/* Steez — editorial design system.
   One file, tokens first. Every colour, size and space below comes from :root. */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Colour: warm paper, forest-charcoal ink, muted olive, muted gold and tan. */
  --bg: #f4f0e6;
  --bg-2: #ebe5d6;
  --surface: #faf7f0;
  --ink: #171b18;
  --muted: #565c4c;
  --olive: #5d6a4c;
  --gold: #b8975a;          /* decorative: rules, marks */
  --gold-ink: #6c5320;      /* accent text on paper (AA) */
  --line: rgba(23, 27, 24, 0.16);
  --line-strong: rgba(23, 27, 24, 0.42);
  --panel: #1b231e;         /* the dark editorial panel: charcoal, forest undertone */
  --on-panel: #f4f0e6;
  --on-panel-muted: #b8bdb0;
  --gold-on-panel: #d4b67c;
  --tan: #cdb27d;           /* the gold/tan surface */
  --on-tan: #1d201a;
  --danger: #9a3b2e;
  --focus: #6c5320;

  /* Type */
  --font-display: 'Clash Display', 'Archivo Narrow', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-label: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.0625rem, 1.4vw + 0.8rem, 1.3125rem);
  --fs-h3: clamp(1.125rem, 1vw + 0.9rem, 1.375rem);
  --fs-h2: clamp(1.875rem, 4.4vw, 3.25rem);
  --fs-h1: clamp(2.25rem, 7vw, 4.75rem);
  --fs-hero: clamp(2.75rem, 9.5vw, 5.25rem);

  /* Space (rem scale) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;

  /* Shape */
  --r1: 4px;   /* controls */
  --r2: 10px;  /* cards and panels */
  --measure: 38rem;
  --page: 72rem;
  --header-h: 3.75rem;
  --nav-h: 4rem;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1411;
    --bg-2: #161c18;
    --surface: #131915;
    --ink: #f1ece0;
    --muted: #a3a898;
    --olive: #8c9a76;
    --gold: #c9a96a;
    --gold-ink: #d8bb7f;
    --line: rgba(241, 236, 224, 0.16);
    --line-strong: rgba(241, 236, 224, 0.42);
    --panel: #1a241d;
    --on-panel: #f1ece0;
    --on-panel-muted: #a9b0a2;
    --gold-on-panel: #d8bb7f;
    --danger: #e08a7a;
    --focus: #d8bb7f;
    --tan: #c4a56d;
    --on-tan: #1d201a;
  }
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; outline: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Headings and <main> take focus only so screen readers land on the new page; they aren't controls. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--gold); color: #17181b; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.skip { position: absolute; left: var(--s4); top: -4rem; background: var(--ink); color: var(--bg); padding: var(--s3) var(--s4); z-index: 100; }
.skip:focus { top: var(--s3); }
.status, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ type system */
.label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
}
.label--gold { color: var(--gold-ink); }
.label--panel { color: var(--gold-on-panel); }
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.display { font-size: var(--fs-hero); line-height: 0.92; letter-spacing: -0.025em; }
.h1 { font-size: var(--fs-h1); line-height: 0.98; }
.h2 { font-size: var(--fs-h2); line-height: 1; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: 0; }
.lede { font-size: var(--fs-lede); line-height: 1.5; max-width: var(--measure); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); color: var(--muted); }
.prose { max-width: var(--measure); }
.gold { color: var(--gold-ink); }
.serif-quote { font-family: var(--font-display); text-transform: none; font-weight: 600; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 3rem; padding: 0.8rem 1.4rem;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: var(--r1);
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; padding: 0.55rem 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.2em; color: inherit; min-height: 2.75rem; }
.text-link { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; font-weight: 500; }
.text-link:hover { border-color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--line); border-radius: var(--r1); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------------ header */
.header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--header-h); gap: var(--s4); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.wordmark span { color: var(--gold-ink); }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0; background: none; border: 0; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; }
.menu-btn svg { width: 1.5rem; height: 1.5rem; }
.header__links { display: none; }
.header__links a { text-decoration: none; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s2) 0; border-bottom: 1px solid transparent; }
.header__links a:hover { border-color: var(--line-strong); }
.header__links a[aria-current="page"], .drawer a[aria-current="page"] { border-color: var(--gold); }

/* --------------------------------------------------------- bottom nav (mobile) */
.bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); min-height: calc(var(--nav-h) + var(--safe-b)); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--nav-h); text-decoration: none; font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); position: relative; }
.bottom-nav a svg { width: 1.375rem; height: 1.375rem; }
.bottom-nav a[aria-current="page"] { color: var(--ink); }
.bottom-nav a[aria-current="page"]::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--gold); }

/* ------------------------------------------------------------------ drawer */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, 0.5); }
.drawer { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(22rem, 88vw); background: var(--bg); border-right: 1px solid var(--line); padding: var(--s4) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s6); overflow-y: auto; padding-top: max(var(--s4), env(safe-area-inset-top)); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__group { display: grid; gap: var(--s1); }
.drawer__group .label { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }
.drawer__group a { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 1.5rem; line-height: 1.15; text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid transparent; width: fit-content; }
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation: slide-in .22s ease-out; }
  @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }
}

/* ------------------------------------------------------------------ footer */
.footer { border-top: 1px solid var(--line); padding-block: var(--s7) var(--s6); margin-top: var(--s8); }
.footer__grid { display: grid; gap: var(--s5); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer nav a { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: var(--s2) 0; }

/* ----------------------------------------------------------------- toast */
.toast { position: fixed; z-index: 60; left: var(--s4); right: var(--s4); bottom: calc(var(--nav-h) + var(--safe-b) + var(--s3)); max-width: 30rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); background: var(--ink); color: var(--bg); border-radius: var(--r2); font-size: var(--fs-small); }
.toast .btn { min-height: 2.25rem; padding: 0.35rem 0.8rem; background: var(--bg); color: var(--ink); border-color: var(--bg); }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s6); }
.section + .section { border-top: 1px solid var(--line); }
.page-head { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--line); }
.page-head .h1 { margin-top: var(--s3); max-width: 14ch; }
.page-head .lede { margin-top: var(--s4); }
.back { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--ink); }
.section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
.section-heading .h2 { margin-top: var(--s2); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* -------------------------------------------------------------------- hero */
.hero { padding-block: var(--s6) var(--s7); }
.hero__grid { display: grid; gap: var(--s6); }
.hero__copy .display { margin-top: var(--s4); }
.hero__copy .display span { display: block; }
.hero__copy .display span:nth-child(2) { color: var(--olive); }
.hero__copy .display span:nth-child(3) { color: var(--gold-ink); }
.hero__copy .lede { margin-top: var(--s5); }
.hero__copy .btn-row { margin-top: var(--s6); }
.hero__panel { background: var(--panel); color: var(--on-panel); border-radius: var(--r2); padding: var(--s5); min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); position: relative; overflow: hidden; }
.hero__mark { width: min(11rem, 55%); color: var(--gold-on-panel); }
.hero__panel p.serif-quote { font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.15; max-width: 16ch; }

/* ----------------------------------------------------------------- pathways */
.paths { display: grid; gap: var(--s4); }
.path { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); border-radius: var(--r2); }
.path__label { display: flex; align-items: center; gap: var(--s3); }
.path__label svg { width: 1.5rem; height: 1.5rem; flex: none; }
.path__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 14ch; }
.path__body { max-width: 34ch; line-height: 1.55; }
.path__links { margin-top: auto; border-top: 1px solid currentColor; }
.path__links li { border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.path__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 3.5rem; padding-block: var(--s3); text-decoration: none; font-weight: 600; }
.path__links small { display: block; font-weight: 400; font-size: var(--fs-small); opacity: 0.75; margin-top: 2px; }
.path__go { font-family: var(--font-label); transition: transform .15s ease; }
.path__links a:hover .path__go { transform: translateX(4px); }
.path__links a:hover span:first-child { text-decoration: underline; text-underline-offset: 0.2em; }
.path__facts li { display: flex; align-items: center; min-height: 3.5rem; padding-block: var(--s3); font-weight: 600; }
.path__action { margin-top: var(--s2); }
.path--cream { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.path--cream .label { color: var(--gold-ink); }
.path--cream .path__links { border-color: var(--line-strong); }
.path--forest { background: var(--panel); color: var(--on-panel); }
.path--forest .label { color: var(--gold-on-panel); }
.path--forest .path__body { color: var(--on-panel-muted); }
.path--tan { background: var(--tan); color: var(--on-tan); }
.path--tan .label { color: var(--on-tan); }
.path--tan .btn--ghost { color: var(--on-tan); border-color: var(--on-tan); }
.path--tan .btn--ghost:hover { background: var(--on-tan); color: var(--tan); }
.path--tan :focus-visible { outline-color: var(--on-tan); }
.path--forest :focus-visible { outline-color: var(--gold-on-panel); }
@media (prefers-reduced-motion: reduce) { .path__go { transition: none; } }

/* ------------------------------------------------------------ brand statement */
.statement { background: var(--panel); color: var(--on-panel); margin-top: var(--s7); }
.statement__inner { padding-block: var(--s8); display: grid; gap: var(--s4); justify-items: start; }
.statement__mark { width: 3rem; color: var(--gold-on-panel); }
.statement__line { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(2.5rem, 9vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; }
.statement__support { color: var(--on-panel-muted); max-width: 30rem; }

/* ----------------------------------------------------------- formula + chips */
.formula { border-top: 2px solid var(--ink); padding-top: var(--s5); }
.formula__name { margin-top: var(--s2); }
.formula__pieces { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s5); }
.formula__piece { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.1; }
.formula__plus { color: var(--gold-ink); font-family: var(--font-label); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-small); line-height: 1.3; }
.chip--gold { border-color: var(--gold); color: var(--gold-ink); }
.meta-row { display: grid; gap: var(--s2); margin-top: var(--s5); }

/* -------------------------------------------------------------------- note */
.note { background: var(--bg-2); padding: var(--s5); border-left: 3px solid var(--gold); border-radius: 0 var(--r2) var(--r2) 0; }
.note__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.25; margin-top: var(--s3); max-width: 30ch; }
.note__source { margin-top: var(--s4); }

/* ------------------------------------------------------------------- grids */
.grid { display: grid; gap: var(--s5); }
.split { display: grid; gap: var(--s6); }
.edu { border-top: 1px solid var(--line-strong); padding-top: var(--s4); }
.edu .h3 { margin-bottom: var(--s2); }
.edu p { color: var(--muted); max-width: 32ch; }
.edu--link { display: block; color: inherit; text-decoration: none; }
.edu--link:hover .h3 { text-decoration: underline; }
.formula-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.formula-links a { position: relative; }
.formula-links a::before { content: ''; position: absolute; inset: -0.85rem -0.4rem; } /* 44px+ tap area, look unchanged */
.edu__go { display: inline-block; margin-top: var(--s3); font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }

/* ------------------------------------------------------------- index rows */
.rows { border-top: 1px solid var(--line-strong); }
.row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); text-decoration: none; min-height: 4rem; }
a.row:hover .row__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.row__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.1; }
.row__sub { color: var(--muted); font-size: 0.9375rem; margin-top: var(--s1); max-width: 46ch; }
.row__go { font-family: var(--font-label); font-size: 1.125rem; color: var(--gold-ink); }
.row__meta { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s5); }
.standalone { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); }
.standalone .card { max-width: 26rem; width: 100%; text-align: left; }
.standalone .h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }

/* ---------------------------------------------------------------- outfit card */
.outfit { background: var(--panel); color: var(--on-panel); border-radius: var(--r2); padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
.outfit .label { color: var(--gold-on-panel); }
.outfit__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.12; }
.outfit__body { font-size: 1.0625rem; line-height: 1.55; }
.outfit__why { color: var(--on-panel-muted); font-style: italic; font-size: 0.9375rem; }
.outfit__extra { border-top: 1px solid rgba(244, 240, 230, 0.16); padding-top: var(--s4); font-size: 0.9375rem; line-height: 1.55; }
.outfit__extra .label { display: block; margin-bottom: var(--s1); }
.outfit--paper { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.outfit--paper .label { color: var(--gold-ink); }
.outfit--paper .outfit__why { color: var(--muted); }
.outfit--paper .outfit__extra { border-color: var(--line); }

/* ------------------------------------------------------------------- quiz */
.quiz { padding-block: var(--s6) var(--s7); max-width: 40rem; }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-block: var(--s4) var(--s6); }
.progress i { height: 3px; background: var(--line); }
.progress i.is-done { background: var(--gold); }
.progress i.is-now { background: var(--ink); }
.quiz .h1 { font-size: clamp(1.875rem, 6vw, 3rem); line-height: 1.02; margin-top: var(--s3); outline: none; }
.opts { display: grid; gap: var(--s2); margin-top: var(--s6); border: 0; padding: 0; min-width: 0; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: var(--s3); min-height: 3.25rem; padding: 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r1); font-weight: 500; background: var(--surface); transition: border-color .12s ease, background-color .12s ease; }
.opt span::before { content: ''; flex: none; width: 1rem; height: 1rem; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.opt input:checked + span { border-color: var(--ink); background: var(--bg-2); box-shadow: inset 3px 0 0 var(--gold); }
.opt input:checked + span::before { border-color: var(--ink); background: radial-gradient(var(--ink) 0 42%, transparent 46%); }
.opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt:hover span { border-color: var(--ink); }
.field { display: grid; gap: var(--s2); margin-top: var(--s5); }
.field label { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.input { width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r1); }
textarea.input { min-height: 8rem; resize: vertical; }
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error { color: var(--danger); font-size: var(--fs-small); font-weight: 500; min-height: 1.25rem; margin-top: var(--s3); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s5); }

/* ------------------------------------------------------------------ result */
.result { padding-block: var(--s6) var(--s7); }
.result__grid { display: grid; gap: var(--s4); margin-top: var(--s6); }
.result__foot { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s5); }
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.code { font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--muted); }

/* ----------------------------------------------------- states + skeleton */
.state { border: 1px dashed var(--line-strong); border-radius: var(--r2); padding: var(--s6) var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.state .h3 { max-width: 22ch; }
.state--error { border-color: var(--danger); }
.skeleton { height: 0.875rem; width: 70%; background: var(--line); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: pulse 1.3s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}

/* -------------------------------------------------------------- tips / tabs */
.tips-cat { margin-top: var(--s7); }
.tips-cat:first-child { margin-top: 0; }
.tip { border-bottom: 1px solid var(--line); }
.tip:first-of-type { border-top: 1px solid var(--line-strong); }
.tip summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 3.5rem; font-weight: 600; cursor: pointer; }
.tip summary::-webkit-details-marker { display: none; }
.tip summary::after { content: '+'; font-family: var(--font-label); color: var(--gold-ink); font-size: 1.25rem; }
.tip[open] summary::after { content: '\2013'; }
.tip p { padding-bottom: var(--s4); max-width: var(--measure); color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.filter { min-height: 2.75rem; padding: 0.4rem 1rem; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-small); font-weight: 600; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.priority { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.priority--core { color: var(--gold-ink); }
.item { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.item__name { font-weight: 600; }
.item__note { grid-column: 1 / -1; color: var(--muted); max-width: 52ch; }
.cat-block { margin-bottom: var(--s7); }
.cat-block > .h3 { padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); }

/* --------------------------------------------------------------- larger screens */
@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .toast { bottom: var(--s5); }
  .menu-btn { display: none; }
  .header__inner { grid-template-columns: auto 1fr; }
  .header__links { display: flex; justify-content: flex-end; gap: var(--s5); align-items: center; }
  .wordmark { grid-column: 1; grid-row: 1; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .result__grid { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .result__grid .outfit--fit { grid-row: span 2; }
  .meta-row { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}
@media (min-width: 64rem) {
  .hero { padding-block: var(--s8) var(--s8); }
  .hero__grid { grid-template-columns: 1.7fr 1fr; align-items: end; gap: var(--s7); }
  .hero__panel { min-height: 30rem; padding: var(--s6); }
  .split { grid-template-columns: 1.1fr 1fr; gap: var(--s8); align-items: start; }
  .grid--3 { gap: var(--s6); }
  .paths { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .path { padding: var(--s6); min-height: 30rem; }
  .statement__inner { padding-block: var(--s9); }
  .footer__grid { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s7); }
}

@media print {
  .header, .bottom-nav, .footer, .toast, .drawer, .scrim { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}