@layer reset, tokens, base, layout, components, utilities;

/* ---------- reset ---------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    text-size-adjust: 100%;
  }

  img,
  picture,
  svg { display: block; max-inline-size: 100%; block-size: auto; }

  input,
  button,
  textarea,
  select { font: inherit; }
}

/* ---------- design tokens ---------- */
@layer tokens {
  :root {
    --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Noto Sans", "Nirmala UI", sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
    --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
    --step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    --space-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --space-l: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --space-xl: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
    --radius: 0.5rem;
    --content: 70ch;
    --wrap: 76rem;
    --header-h: 4.5rem;

    /* UNICEF-inspired palette: cyan brand, deep navy, white */
    --brand: #1cabe2;
    --navy: #0b2a45;
    --bg: #fff;
    --surface: #f2f7fa;
    --fg: #1a1a1a;
    --muted: #4f5b66;
    --line: #d5dee5;
    --accent: #006ba6;
    --accent-hover: #004f7c;
    --on-accent: #fff;
    --on-brand: #0b2a45;
    --shadow: 0 1px 2px rgb(11 42 69 / 8%), 0 4px 16px rgb(11 42 69 / 8%);

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1a24;
      --surface: #16242f;
      --fg: #eef3f7;
      --muted: #b4c1cc;
      --line: #2c3e4d;
      --accent: #6cc8ef;
      --accent-hover: #a5dcf5;
      --on-accent: #0b2a45;
      --navy: #081e31;
      --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
    }
  }
}

/* ---------- base ---------- */
@layer base {
  html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    overflow-wrap: anywhere;
  }

  main { flex: 1; }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); }
  h4 { font-size: var(--step-0); }

  p,
  li { max-inline-size: var(--content); text-wrap: pretty; }

  a {
    color: var(--accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  a:hover { color: var(--accent-hover); }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  strong { font-weight: 700; }

  table { border-collapse: collapse; inline-size: 100%; }

  th,
  td {
    text-align: start;
    vertical-align: top;
    padding: var(--space-xs) var(--space-s);
    border-block-end: 1px solid var(--line);
  }

  th { font-weight: 700; }

  thead th {
    background: var(--navy);
    color: #fff;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  caption {
    text-align: start;
    font-weight: 700;
    padding-block-end: var(--space-xs);
  }

  dt { font-weight: 700; }
  dd { margin-inline-start: 0; }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap {
    inline-size: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-xl); }
  .section--tight { padding-block: var(--space-l); }
  .section--alt { background: var(--surface); }

  .section-head {
    display: grid;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .section-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.45; }

  .grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

  .split {
    display: grid;
    gap: var(--space-l);
    align-items: center;
  }

  @media (width >= 56em) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--text-wide { grid-template-columns: 3fr 2fr; }
  }

  .prose > * + * { margin-block-start: var(--space-s); }
  .prose > h2 { margin-block-start: var(--space-l); }
  .prose > h3 { margin-block-start: var(--space-m); }

  .prose ul,
  .prose ol { padding-inline-start: 1.25rem; }
  .prose li + li { margin-block-start: var(--space-2xs); }

  .with-sidebar {
    display: grid;
    gap: var(--space-l);
  }

  @media (width >= 60em) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  }
}

/* ---------- components ---------- */
@layer components {
  /* skip link */
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -10rem;
    z-index: 100;
    padding: var(--space-xs) var(--space-s);
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius);
  }

  .skip-link:focus { inset-block-start: 1rem; color: #fff; }

  /* utility bar (top strip) */
  .topbar {
    background: var(--navy);
    color: #dcebf5;
    font-size: var(--step--1);
  }

  .topbar .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-m);
    padding-block: var(--space-2xs);
  }

  .topbar a { color: #fff; }
  .topbar [lang="ne"] { font-weight: 600; }

  /* header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--bg);
    border-block-end: 4px solid var(--brand);
    box-shadow: var(--shadow);
  }

  .site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    min-block-size: var(--header-h);
    padding-block: var(--space-xs);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--fg);
    text-decoration: none;
    min-block-size: 44px;
  }

  .brand:hover { color: var(--fg); }

  .brand svg { inline-size: 2.75rem; block-size: 2.75rem; flex: none; }

  .brand-name {
    display: grid;
    line-height: 1.1;
  }

  .brand-name strong {
    font-size: var(--step-1);
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--accent);
  }

  .brand-name span { font-size: var(--step--1); color: var(--muted); }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding-inline: var(--space-s);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
  }

  .nav-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }

  .nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    inline-size: 100%;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-s);
    color: var(--fg);
    font-weight: 700;
    text-decoration: none;
    border-block-end: 3px solid transparent;
  }

  .nav-list a:hover { color: var(--accent); border-block-end-color: currentcolor; }

  .nav-list a[aria-current="page"] {
    color: var(--accent);
    border-block-end-color: var(--brand);
  }

  .nav-list .nav-cta {
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    border: 2px solid transparent;
  }

  .nav-list .nav-cta:hover { background: var(--accent-hover); color: var(--on-accent); }
  .nav-list .nav-cta[aria-current="page"] { color: var(--on-accent); }

  @media (scripting: none) {
    .nav-toggle,
    .filter { display: none; }
  }

  @media (width <= 63.99em) {
    .nav-list { flex-direction: column; padding-block-end: var(--space-xs); }
    .nav-list .nav-cta { justify-content: center; margin-block-start: var(--space-xs); }
  }

  @media (width <= 63.99em) and (scripting: enabled) {
    .nav-list:not(.is-open) { display: none; }
  }

  @media (width >= 64em) {
    .nav-toggle { display: none; }
    .nav-list { inline-size: auto; justify-content: flex-end; }
    .primary-nav { flex: 1; }
  }

  /* hero */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-block-size: min(80svh, 44rem);
    color: #fff;
    background: var(--navy);
  }

  .hero picture,
  .hero img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(8 30 49 / 92%) 0%, rgb(8 30 49 / 60%) 45%, rgb(8 30 49 / 5%) 80%);
  }

  .hero-body {
    padding-block: var(--space-xl) var(--space-l);
    display: grid;
    gap: var(--space-s);
  }

  .hero-body h1 { max-inline-size: 22ch; }
  .hero-body p { font-size: var(--step-1); line-height: 1.45; max-inline-size: 48ch; }

  .eyebrow {
    display: inline-block;
    justify-self: start;
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .hero .eyebrow {
    background: var(--brand);
    color: var(--on-brand);
    padding: 0.2em 0.6em;
  }

  /* page banner for inner pages */
  .page-banner {
    background: var(--brand);
    color: var(--on-brand);
    padding-block: var(--space-l);
  }

  .page-banner .wrap { display: grid; gap: var(--space-s); }
  .page-banner p { font-size: var(--step-1); line-height: 1.45; max-inline-size: 60ch; }

  .page-banner--image {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--navy);
    padding-block: var(--space-xl) var(--space-l);
  }

  .page-banner--image picture,
  .page-banner--image img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
  }

  .page-banner--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(8 30 49 / 92%), rgb(8 30 49 / 55%));
  }

  .breadcrumbs ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    font-size: var(--step--1);
    font-weight: 600;
  }

  .breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-xs); opacity: 0.7; }
  .breadcrumbs a { color: inherit; }

  /* buttons */
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-s);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding: 0.6em 1.4em;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800;
    text-decoration: none;
  }

  .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

  .button--ghost { background: transparent; color: var(--accent); }
  .button--ghost:hover { background: var(--accent); color: var(--on-accent); }

  .hero .button--ghost,
  .page-banner--image .button--ghost { color: #fff; border-color: #fff; }
  .hero .button--ghost:hover { background: #fff; color: var(--navy); }

  .hero .button {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--navy);
  }

  .hero .button:hover { background: #fff; border-color: #fff; color: var(--navy); }

  /* stats band */
  .stats {
    background: var(--brand);
    color: var(--on-brand);
  }

  .stats dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-m);
    padding-block: var(--space-l);
  }

  .stat { display: flex; flex-direction: column-reverse; gap: var(--space-2xs); }
  .stat dd { font-size: var(--step-3); font-weight: 900; line-height: 1; }
  .stat dt { font-weight: 600; max-inline-size: 22ch; }

  /* cards */
  .card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .section--alt .card { background: var(--bg); }

  .card img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  .card-body {
    display: grid;
    gap: var(--space-xs);
    align-content: start;
    padding: var(--space-m);
    flex: 1;
  }

  .card-body p { color: var(--muted); }

  .card h3 a {
    color: var(--fg);
    text-decoration: none;
  }

  /* whole card clickable via the heading link */
  .card h3 a::after { content: ""; position: absolute; inset: 0; }
  .card:has(h3 a:hover) { border-color: var(--accent); }
  .card:has(h3 a:hover) h3 a { color: var(--accent); text-decoration: underline; }
  .card:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .card h3 a:focus-visible { outline: none; }

  .card-more { font-weight: 700; color: var(--accent); }

  @media (prefers-reduced-motion: no-preference) {
    .card { transition: transform 0.2s ease, border-color 0.2s ease; }
    .card:has(h3 a:hover) { transform: translateY(-3px); }
  }

  /* service tiles */
  .tile {
    display: grid;
    gap: var(--space-xs);
    align-content: start;
    padding: var(--space-m);
    border-block-start: 4px solid var(--brand);
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
  }

  .tile svg { inline-size: 2.5rem; block-size: 2.5rem; color: var(--accent); }
  .tile p { color: var(--muted); }

  /* chips (partner list) */
  .chips {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .chips li {
    padding: 0.4em 0.9em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-weight: 600;
    font-size: var(--step--1);
  }

  /* figures */
  figure { display: grid; gap: var(--space-xs); }
  figure img { border-radius: var(--radius); inline-size: 100%; }
  figcaption { font-size: var(--step--1); color: var(--muted); }

  .gallery {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .gallery img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* quote / callout */
  .callout {
    padding: var(--space-m);
    border-inline-start: 6px solid var(--brand);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .callout p { font-size: var(--step-1); font-weight: 700; line-height: 1.4; }

  /* fact box (sidebar) */
  .facts {
    padding: var(--space-m);
    background: var(--surface);
    border-block-start: 4px solid var(--brand);
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .facts dl { display: grid; gap: var(--space-s); margin-block-start: var(--space-s); }

  .facts dt {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
  }

  /* tables */
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
  }

  .table-wrap table { min-inline-size: 44rem; font-size: var(--step--1); }
  .table-wrap--narrow table { min-inline-size: 28rem; }
  .table-wrap tbody tr:nth-child(even) { background: var(--surface); }
  .table-wrap caption { padding: var(--space-s); }
  td.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
  th.num { text-align: end; }

  .table-group + .table-group { margin-block-start: var(--space-l); }
  .table-group > h2 { margin-block-end: var(--space-xs); font-size: var(--step-2); }
  .table-group > p { color: var(--muted); margin-block-end: var(--space-s); }

  /* filter (enhancement) */
  .filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .filter label { display: grid; gap: var(--space-2xs); font-weight: 700; }

  .filter input {
    min-block-size: 44px;
    inline-size: min(100%, 24rem);
    padding-inline: var(--space-s);
    border: 2px solid var(--muted);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
  }

  .filter output { color: var(--muted); font-size: var(--step--1); }

  /* people */
  .person {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-m);
    border-block-start: 4px solid var(--brand);
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
  }

  .person .role {
    font-size: var(--step--1);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
  }

  .person p { color: var(--muted); font-size: var(--step--1); }

  .person dl {
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    margin-block-start: var(--space-xs);
  }

  /* contact */
  .contact-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-m);
  }
  .contact-list li { display: grid; gap: var(--space-2xs); }

  .contact-list .label {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
  }

  address { font-style: normal; }

  /* publications */
  .doc-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-s);
  }

  .doc-list li {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--bg);
    max-inline-size: none;
  }

  .doc-list a { font-weight: 700; }
  .doc-list span { font-size: var(--step--1); color: var(--muted); }

  /* CTA band */
  .cta-band { background: var(--navy); color: #fff; }

  .cta-band .wrap {
    display: grid;
    gap: var(--space-s);
    justify-items: start;
    padding-block: var(--space-l);
  }
  .cta-band p { color: #dcebf5; font-size: var(--step-1); }

  .cta-band .button {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--navy);
  }

  .cta-band .button:hover { background: #fff; border-color: #fff; }

  /* footer */
  .site-footer {
    background: var(--navy);
    color: #dcebf5;
    font-size: var(--step--1);
    border-block-start: 6px solid var(--brand);
  }

  .site-footer a { color: #fff; }

  .footer-grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    padding-block: var(--space-l);
  }

  .site-footer h2 {
    font-size: var(--step-0);
    color: #fff;
    margin-block-end: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .site-footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
  }
  .site-footer li a { display: inline-block; padding-block: 0.2rem; }

  .footer-bottom {
    border-block-start: 1px solid rgb(255 255 255 / 20%);
    padding-block: var(--space-s);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
  }

  /* 404 */
  .not-found { text-align: center; }
  .not-found .wrap { display: grid; gap: var(--space-s); justify-items: center; }

  .not-found .code {
    font-size: clamp(4rem, 3rem + 8vw, 9rem);
    font-weight: 900;
    color: var(--brand);
    line-height: 1;
  }
}

/* ---------- utilities ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .muted { color: var(--muted); }
  .mt-l { margin-block-start: var(--space-l); }
  .mt-m { margin-block-start: var(--space-m); }
  [hidden] { display: none !important; }
}

/* ---------- forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .button,
  .nav-list .nav-cta,
  .nav-toggle { border: 2px solid ButtonText; }

  .hero::before,
  .page-banner--image::before { background: Canvas; opacity: 0.85; }

  .card,
  .tile,
  .person,
  .facts { border: 1px solid CanvasText; }

  .nav-list a[aria-current="page"] { border-block-end-color: Highlight; }
}

/* ---------- print ---------- */
@media print {
  .topbar,
  .site-header nav,
  .nav-toggle,
  .skip-link,
  .actions,
  .cta-band,
  .filter { display: none !important; }

  .site-header { position: static; box-shadow: none; }

  body { color: #000; background: #fff; font-size: 11pt; }

  .hero,
  .page-banner,
  .page-banner--image,
  .stats { background: none; color: #000; min-block-size: 0; }

  .hero::before,
  .page-banner--image::before,
  .hero picture,
  .page-banner--image picture { display: none; }

  .prose a[href^="http"]::after,
  .contact-list a::after { content: " (" attr(href) ")"; font-size: 0.9em; }

  .table-wrap { overflow: visible; }
  .table-wrap table { min-inline-size: 0; }

  .card,
  .tile,
  .person { box-shadow: none; break-inside: avoid; }
}

/* Solid text panel over photos (UNICEF-style), guarantees text contrast */
@layer components {
  .hero-body,
  .page-banner--image .wrap {
    position: relative;
    padding: var(--space-m);
    background: #081e31;
    border-block-start: 6px solid var(--brand);
    color: #fff;
    max-inline-size: 48rem;
    margin-inline-start: max(1rem, (100% - var(--wrap)) / 2);
    margin-block: var(--space-xl) var(--space-l);
    inline-size: auto;
  }

  @media (width <= 49.99em) {
    .hero-body,
    .page-banner--image .wrap { margin-inline-end: 1rem; }
  }

  .page-banner--image { padding-block: var(--space-xs); }
}

@layer components {
  @media (width < 64em) {
    .primary-nav { flex-basis: 100%; }
  }

  thead th { white-space: nowrap; }

  .table-wrap td,
  .table-wrap th { overflow-wrap: normal; }

  .hero .button.button--ghost {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }

  .hero .button.button--ghost:hover {
    background: #fff;
    color: var(--navy);
  }
}

@layer components {
  .size {
    display: inline-block;
    padding: 0.15em 0.6em;
    border: 1px solid currentcolor;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
  }

  .size--small { color: var(--muted); }
  .size--medium { color: var(--accent); }

  .size--large {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
  }
}