@layer reset, tokens, elements, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
}

@layer tokens {
  :root {
    --ink: #203148;
    --ink-soft: #4e6178;
    --paper: #f8fafc;
    --surface: #edf2f7;
    --line: #bac6d2;
    --accent: #b8e132;
    --rail: 16.5rem;
    --content: 76rem;
    --text: 72ch;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --radius: 1.2rem;
  }
}

@layer elements {
  body {
    min-width: 20rem;
    color: var(--ink);
    background: var(--paper);
    font-family: "Century Gothic", "Avenir Next", Avenir, sans-serif;
    line-height: 1.65;
    padding-bottom: 2.6rem;
  }
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .18em; }
  :focus-visible { outline: .2rem solid var(--accent); outline-offset: .2rem; }
  h1, h2, h3 { line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
  h1 { font-size: clamp(3.8rem, 9.4vw, 9.5rem); font-weight: 800; }
  h2 { font-size: clamp(2.25rem, 5vw, 4.8rem); font-weight: 800; }
  h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.1; }
  p { max-width: var(--text); }
  table { border-collapse: collapse; width: 100%; }
  th { text-align: left; }
}

@layer components {
  .skip-link {
    position: fixed; left: 1rem; top: -5rem; z-index: 30;
    background: var(--ink); color: var(--paper); padding: .75rem 1rem;
  }
  .skip-link:focus { top: 1rem; }

  .site-rail {
    position: fixed; inset: 0 auto 2.6rem 0; z-index: 10;
    width: var(--rail); padding: var(--space-6);
    background: var(--paper); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: var(--space-12);
  }
  .brand {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: 1rem; font-weight: 800; letter-spacing: -.03em;
  }
  .brand:hover { text-decoration: none; }
  .brand-mark { width: 2.6rem; height: 2.6rem; flex: none; }
  .rail-nav { display: grid; gap: var(--space-2); }
  .rail-nav a {
    display: block; padding: .45rem 0; color: var(--ink-soft);
    font-size: .83rem; font-weight: 700; letter-spacing: .02em;
  }
  .rail-nav a[aria-current="page"] { color: var(--ink); }
  .rail-nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 1.25rem; height: .28rem; margin-right: .55rem; background: var(--accent); vertical-align: middle; }
  .rail-note { margin-top: auto; color: var(--ink-soft); font-size: .7rem; line-height: 1.5; }

  .page-shell { margin-left: var(--rail); }
  .top-strap {
    min-height: 3.2rem; display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); padding: .7rem clamp(1rem, 4vw, 4rem);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    background: var(--accent); color: var(--ink); font-size: .74rem; font-weight: 700;
  }
  .top-strap a { text-decoration: underline; text-underline-offset: .16em; }
  .mobile-brand { display: none; }
  .container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
  .narrow { width: min(calc(100% - 2rem), 52rem); margin-inline: auto; }
  .section { padding-block: clamp(4rem, 9vw, 7.5rem); }
  .section + .section::before {
    content: ""; display: block; width: 4rem; height: .35rem;
    margin: 0 auto clamp(4rem, 9vw, 7.5rem); background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16,1,.3,1);
  }
  .section + .section.is-visible::before { transform: scaleX(1); }
  .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: var(--space-6); font-size: .72rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .eyebrow::before { content: ""; width: 1.75rem; height: .35rem; background: var(--accent); }
  .lede { margin-top: var(--space-6); font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--ink-soft); line-height: 1.55; }
  .intro-note {
    padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); font-size: .85rem; color: var(--ink-soft);
  }
  .button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.9rem; padding: .58rem 1.1rem; border: 3px double var(--ink);
    border-radius: .35rem; background: var(--accent); color: var(--ink);
    font-size: .77rem; font-weight: 800; letter-spacing: .04em;
  }
  .button:hover { background: var(--paper); text-decoration: none; }
  .button--quiet { background: transparent; }
  .tag {
    display: inline-flex; align-items: center; min-height: 1.75rem;
    padding: .25rem .65rem; border-radius: 999px; background: var(--surface);
    color: var(--ink-soft); font-size: .68rem; font-weight: 700;
  }
  .tag--accent { background: var(--accent); color: var(--ink); }

  .media-pair {
    display: grid; grid-template-columns: 1.35fr .85fr; gap: var(--space-4);
    margin-top: var(--space-12);
  }
  .media-pair img {
    width: 100%; height: 100%; min-height: 16rem; object-fit: cover;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  }
  .media-pair img:last-child { margin-top: var(--space-12); max-height: 23rem; }

  .safety-strip {
    padding: var(--space-8) 0; background: var(--surface); border-block: 1px solid var(--line);
  }
  .safety-strip__inner { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); align-items: center; gap: var(--space-4); }
  .safety-strip h2 { font-size: 1rem; letter-spacing: -.02em; line-height: 1.25; }
  .safety-link {
    min-height: 4.5rem; padding: .75rem; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: .7rem; background: var(--paper);
  }
  .safety-link img { max-width: 7rem; max-height: 2.1rem; object-fit: contain; }
  .safety-link span { font-size: .72rem; font-weight: 700; }

  .site-footer { padding: var(--space-12) 0 var(--space-16); background: var(--ink); color: var(--paper); }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-12); }
  .site-footer h2 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; }
  .site-footer p { color: #d6e0ea; font-size: .78rem; }
  .site-footer nav { display: grid; align-content: start; gap: .5rem; font-size: .78rem; }
  .footer-brand { display: grid; gap: var(--space-4); }
  .footer-brand .brand-mark { background: var(--paper); border-radius: .6rem; padding: .25rem; }

  .age-bar {
    position: fixed; inset: auto 0 0; z-index: 20; min-height: 2.6rem;
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    padding: .5rem 1rem; background: var(--ink); color: var(--paper);
    border-top: 1px solid var(--line); font-size: .7rem; text-align: center;
  }
  .age-bar strong { color: var(--accent); }
  .age-bar a { text-decoration: underline; text-underline-offset: .15em; }
  .cookie-banner {
    position: fixed; right: 1rem; bottom: 3.6rem; z-index: 19; width: min(28rem, calc(100% - 2rem));
    padding: var(--space-6); border: 1px solid var(--ink); border-radius: var(--radius);
    background: var(--paper); color: var(--ink);
  }
  .cookie-banner p { font-size: .8rem; }
  .cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-4); }
  .cookie-banner[hidden] { display: none; }

  .article-hero { padding: clamp(4rem, 10vw, 9rem) 0 var(--space-16); background: var(--accent); overflow: hidden; }
  .article-hero h1 { max-width: 10ch; }
  .article-hero .lede { color: var(--ink); }
  .prose { display: grid; gap: var(--space-6); font-size: 1rem; }
  .prose h2 { margin-top: var(--space-12); }
  .prose h3 { margin-top: var(--space-6); }
  .prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: .6rem; max-width: var(--text); }
  .fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-block: var(--space-8); }
  .fact { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .fact h3 { margin-bottom: var(--space-3); }
  .fact p { font-size: .9rem; color: var(--ink-soft); }
  .legal-list { display: grid; gap: var(--space-4); list-style: none; }
  .legal-list li { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
  .contact-form { display: grid; gap: var(--space-4); max-width: 42rem; }
  .form-field { display: grid; gap: .4rem; }
  .form-field label { font-size: .8rem; font-weight: 800; }
  .form-field input, .form-field textarea {
    width: 100%; padding: .85rem; border: 1px solid var(--line); border-radius: .5rem;
    background: var(--paper); color: var(--ink);
  }
  .form-field textarea { min-height: 10rem; resize: vertical; }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .muted { color: var(--ink-soft); }
  .small { font-size: .78rem; }
  .mt-6 { margin-top: var(--space-6); }
  .mt-12 { margin-top: var(--space-12); }
}

@media (max-width: 900px) {
  body { padding-bottom: 3.7rem; }
  .site-rail {
    position: sticky; top: 0; inset: auto; width: 100%; height: auto; padding: .7rem 1rem;
    flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .site-rail > .brand, .site-rail > .rail-note { display: none; }
  .rail-nav { display: flex; gap: 1rem; white-space: nowrap; }
  .rail-nav a { padding: .2rem 0; }
  .rail-nav a[aria-current="page"]::before { display: none; }
  .page-shell { margin-left: 0; }
  .mobile-brand { display: flex; }
  .top-strap { align-items: flex-start; flex-direction: column; }
  .safety-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .safety-strip h2 { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(3.25rem, 18vw, 5.6rem); }
  .media-pair, .fact-grid, .footer-grid { grid-template-columns: 1fr; }
  .media-pair img:last-child { margin-top: 0; }
  .safety-strip__inner { grid-template-columns: 1fr 1fr; }
  .button { width: 100%; }
  .age-bar { min-height: 3.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section + .section::before { transition: none; transform: scaleX(1); }
}