/* ═══════════════════════════════════════════════════════════
   THE WHITE LOTUS — Personality Quiz · style.css

   A single, self-contained stylesheet. It carries only the slice of the
   By Default design system this quiz actually uses (token scales + the
   button, grid, layout, and disclosure primitives), the bespoke brand
   theme (cream / serif · Cinzel + PT Sans · olive + orange), and the
   quiz-specific styles. No external design-system.css dependency.

   Token + class names match the design system so the project still reads
   as "built on the system" — just trimmed to what's in use.

   Sections:
     1. Reset            6. Disclosure        11. Progress (lotus rail)
     2. Tokens           7. A11y utilities    12. Question + options
     3. Fonts            8. Screens           13. Result
     4. Base             9. CTA roles         14. Responsive
     5. Layout/Button   10. Lockup + hero     15. Reduced motion
   ═══════════════════════════════════════════════════════════ */


/* ───── 1. Reset ───── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }


/* ───── 2. Tokens ───── */

:root {

  /* ── Brand primitives — the whole palette (incl. hover shades) lives here;
        a re-skin only touches this block. The bright --wl-olive/--wl-orange
        are the canonical Figma brand colours (reference); UI uses the -deep
        variants because they clear WCAG AA contrast on cream. ── */
  --wl-cream:            #faf9f6;
  --wl-cream-2:          #f0ebdd;
  --wl-cream-hover:      #efeadf;   /* light (hero) CTA pressed state */
  --wl-ink:              #1c1c19;
  --wl-ink-deep:         #0a0c0a;   /* near-black hero backdrop */
  --wl-muted:            #6e6b61;   /* ≈4.6:1 on cream */
  --wl-olive:            #96a009;   /* brand olive (reference) */
  --wl-olive-deep:       #62700a;   /* text / borders / fills / progress (≈5.2:1 w/ white, ≥3:1 UI) */
  --wl-olive-deep-hover: #515d09;
  --wl-orange:           #f1611a;   /* brand orange (reference) */
  --wl-orange-deep:      #bd4715;   /* restart CTA (≈5:1 w/ white) */
  --wl-orange-deep-hover:#a73d12;
  --wl-track:            #cccccc;   /* progress track / inactive lotus */
  --wl-line:             rgba(0, 0, 0, 0.14);

  /* ── Fonts ── */
  --font-primary:    "PT Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary:  "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  --font-quaternary: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Semantic colours (mapped to brand) ── */
  --background-primary: var(--wl-cream);
  --text-primary:       var(--wl-ink);
  --text-secondary:     var(--wl-muted);
  --text-faded:         color-mix(in srgb, var(--wl-ink) 50%, transparent);
  --text-inverted:      #fafafa;
  --text-accent:        var(--wl-olive-deep);
  --text-link:          var(--wl-olive-deep);
  --border-secondary:   var(--wl-track);
  --border-faded:       var(--wl-line);
  --input-focus:        var(--wl-olive-deep);
  --selection-background: var(--wl-olive-deep);
  --selection-text:       var(--wl-cream);

  /* ── Type scale ── */
  --font-3xs: 0.625rem; --font-2xs: 0.75rem; --font-xs: 0.875rem; --font-s: 1rem;
  --font-m: 1.125rem;  --font-l: 1.25rem;   --font-xl: 1.375rem; --font-2xl: 1.5rem;
  --font-3xl: 1.75rem; --font-4xl: 2rem;    --font-5xl: 2.25rem; --font-6xl: 2.5rem;
  --font-7xl: 3rem;    --font-8xl: 3.5rem;  --font-9xl: 4rem;    --font-10xl: 4.5rem;
  --body-size: clamp(var(--font-s), 0.7rem + 0.35vw, var(--font-m));

  --line-height-xs: 0.7; --line-height-s: 1; --line-height-m: 1.2;
  --line-height-l: 1.4;  --line-height-xl: 1.6; --line-height-2xl: 1.8;

  --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-weight-black: 900;

  --letter-spacing-xs: -0.03em; --letter-spacing-s: 0.03em; --letter-spacing-m: 0.06em;
  --letter-spacing-l: 0.12em;   --letter-spacing-xl: 0.24em;

  /* ── Spacing ── */
  --space-none: 0; --space-2xs: 0.125rem; --space-xs: 0.25rem; --space-s: 0.5rem;
  --space-m: 0.75rem; --space-l: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem;
  --space-3xl: 2.5rem; --space-4xl: 3rem; --space-5xl: 3.5rem; --space-6xl: 4rem;
  --space-7xl: 4.5rem; --space-8xl: 5rem; --space-10xl: 6rem; --space-12xl: 7rem;

  /* ── Radius / border / container ── */
  --radius-2xs: 2px; --radius-xs: 4px; --radius-s: 6px; --radius-m: 10px;
  --radius-l: 16px;  --radius-xl: 24px; --radius-pill: 999px;
  --border-s: 0.0625rem; --border-m: 0.125rem; --border-l: 0.25rem;
  --container-l: 1200px;
  --container-xl: 1440px;

  /* ── Motion ── */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot for playful pops (lotus bloom, check, press) — local quiz token; the GSAP layer mirrors it with back.out() */
  --duration-2xs: 100ms; --duration-xs: 200ms; --duration-s: 400ms;
  --duration-m: 600ms; --duration-l: 800ms; --duration-xl: 1200ms;
  --motion-page-fade-duration: var(--duration-m);
  --motion-page-fade-easing: var(--ease-in-out);
}


/* ───── 3. Fonts (self-hosted, latin subset) ───── */

@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-sans/pt-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/pt-sans/pt-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pt-sans/pt-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cinzel/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cinzel/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel/cinzel-latin-700-normal.woff2") format("woff2"); }


/* ───── 4. Base ───── */

body {
  background: var(--wl-cream);
  color: var(--wl-ink);
  font-family: var(--font-primary);
  font-size: var(--body-size);
  line-height: var(--line-height-l);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: var(--selection-background); color: var(--selection-text); }
:focus-visible { outline-color: var(--wl-olive-deep); }


/* ───── 5. Layout + button (design-system subset) ───── */

.padding-global { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.container-l { display: block; max-width: var(--container-l); width: 100%; margin-left: auto; margin-right: auto; }
.container-xl { display: block; max-width: var(--container-xl); width: 100%; margin-left: auto; margin-right: auto; }

.button {
  --button-color: var(--text-primary);
  --button-bg: var(--button-color);
  --button-border: var(--button-color);
  --button-text-color: var(--text-inverted);
  --button-padding-y: var(--space-l);
  --button-padding-x: var(--space-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--button-padding-y) var(--button-padding-x);
  background-color: var(--button-bg);
  border: var(--border-s) solid var(--button-border);
  border-radius: var(--radius-s);
  font-family: var(--font-primary);
  font-size: var(--font-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  text-decoration: none;
  color: var(--button-text-color);
  cursor: pointer;
  transition: background-color var(--duration-m) var(--ease-out),
              color var(--duration-2xs) var(--ease-out),
              border-color var(--duration-2xs) var(--ease-out),
              transform var(--duration-2xs) var(--ease-out);
}
.button:hover { --button-color: color-mix(in srgb, var(--text-primary), var(--background-primary) 10%); }
.button:active { transform: scale(0.98); }

.button[data-variant="outline"] { --button-bg: transparent; --button-text-color: var(--button-color); }
.button[data-variant="outline"]:hover { background-color: color-mix(in srgb, var(--button-color) 6%, transparent); }

.button[data-variant="text"] {
  --button-bg: transparent;
  --button-border: transparent;
  --button-text-color: var(--button-color);
  --button-padding-x: 0;
  --button-padding-y: 0;
}
.button[data-variant="text"]:hover { text-decoration: underline; text-underline-offset: 2.5px; }
.button[data-variant="text"]:active { transform: none; }

.button[data-size="small"] { --button-padding-y: var(--space-s); --button-padding-x: var(--space-m); font-size: var(--font-xs); }

.button:disabled, .button.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }


/* ───── 6. Disclosure (score breakdown) ───── */

summary {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  font-family: var(--font-primary);
  font-size: var(--body-size);
  color: var(--text-primary);
  padding: var(--space-s) var(--space-m);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-xs) var(--ease-out);
  flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(45deg); }
summary:hover { color: var(--text-secondary); }
summary:focus-visible { outline: 2px solid var(--input-focus); outline-offset: -2px; }
details .disclosure-content {
  padding: var(--space-s) var(--space-m) var(--space-m) calc(0.5em + var(--space-s) + var(--space-m));
  font-family: var(--font-primary);
  font-size: var(--body-size);
  line-height: var(--line-height-xl);
  color: var(--text-secondary);
}
.disclosure-table { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-l); align-items: baseline; margin: 0; }
.disclosure-table dt { color: var(--text-faded); white-space: nowrap; }
.disclosure-table dd { color: var(--text-primary); margin: 0; }


/* ───── 7. A11y utilities ───── */

.wl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wl-skip-link {
  position: absolute;
  top: var(--space-s); left: var(--space-s);
  z-index: 100;
  padding: var(--space-s) var(--space-l);
  background: var(--wl-ink); color: var(--wl-cream);
  border-radius: var(--radius-s);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--duration-xs) var(--ease-out);
}
.wl-skip-link:focus { transform: translateY(0); }


/* ───── 8. Screens ───── */

.wl-screen[hidden] { display: none; }
.wl-screen.is-active { animation: wl-screen-in var(--motion-page-fade-duration) var(--ease-out) both; }
@keyframes wl-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* When the GSAP motion layer is active (quiz-motion.js adds .wl-motion) it owns
   every screen entrance via inner-content choreography (incl. the start-hero
   intro), so suppress the container keyframe to avoid doubling up. This rule
   never applies without JS/GSAP, so the keyframe stays the no-JS +
   reduced-motion (§15) floor for every screen. */
.wl-motion .wl-screen.is-active { animation: none; }

/* Start-hero pre-hide for the GSAP intro: the .wl-js head flag holds the
   background image and hero content dark from first paint, so they can fade in
   from black rather than flashing fully-lit. Released by quiz-motion.js (and by
   the no-GSAP / load-error / reduced-motion paths). */
.wl-js .wl-hero__bg,
.wl-js .wl-hero__inner > * { opacity: 0; }

.wl-arrow { font-style: normal; display: inline-block; transition: transform var(--duration-xs) var(--ease-out); }
.button:hover .wl-arrow { transform: translateX(3px); }
.button:hover .wl-arrow--back { transform: translateX(-3px); }


/* ───── 9. CTA role classes (compose with .button) ───── */

.wl-cta {
  --button-color: var(--wl-olive-deep);
  --button-text-color: #ffffff;
  --button-padding-y: var(--space-l);
  --button-padding-x: var(--space-2xl);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-s);
}
.wl-cta:hover { --button-color: var(--wl-olive-deep-hover); }
.wl-cta--light { --button-color: #ffffff; --button-text-color: var(--wl-ink); }
.wl-cta--light:hover { --button-color: var(--wl-olive); }
.wl-cta--orange { --button-color: var(--wl-orange-deep); --button-text-color: #ffffff; }
.wl-cta--orange:hover { --button-color: var(--wl-orange-deep-hover); }
.wl-back { --button-color: var(--wl-track); --button-text-color: var(--wl-ink); --button-padding-x: var(--space-2xl); border-radius: var(--radius-pill); font-weight: var(--font-weight-bold); }
.wl-back:hover { --button-color: color-mix(in srgb, var(--wl-track), var(--wl-ink) 12%); }
.wl-share { --button-color: var(--wl-olive-deep); font-weight: var(--font-weight-bold); }
.wl-share:hover { --button-color: var(--wl-olive-deep); }


/* ───── 10. Lockup + hero ───── */

.wl-lockup { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); color: var(--wl-ink); }
.wl-lockup__byline {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-primary); font-weight: var(--font-weight-bold);
  font-size: var(--font-3xs); letter-spacing: var(--letter-spacing-l); text-transform: uppercase;
}
/* The mark ships white (for the dark hero); on cream it must read dark — the hero variant re-whitens it below. */
.wl-lockup__hbo { display: block; width: 40px; height: auto; filter: brightness(0); }
.wl-lockup__show {
  font-family: var(--font-secondary); font-weight: 600;
  font-size: clamp(var(--font-xl), 0.8rem + 1.2vw, var(--font-2xl));
  letter-spacing: var(--letter-spacing-l); text-transform: uppercase; line-height: var(--line-height-s);
}
.wl-lockup__quiz {
  margin: var(--space-m) 0 0; text-align: center;
  font-family: var(--font-secondary); font-weight: 600;
  font-size: clamp(var(--font-4xl), 1rem + 3vw, var(--font-8xl));
  letter-spacing: var(--letter-spacing-m); text-transform: uppercase; line-height: var(--line-height-s); color: var(--wl-ink);
}
.wl-lockup--hero, .wl-lockup--hero .wl-lockup__show { color: #ffffff; }
.wl-lockup--hero .wl-lockup__hbo { filter: brightness(0) invert(1); }

.wl-screen--start {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; background: var(--wl-ink-deep);
}
.wl-hero__bg, .wl-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wl-hero__bg img { object-fit: cover; object-position: center 42%; }
.wl-hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 75% at 50% 32%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.5) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%);
}
.wl-hero__inner {
  position: relative; z-index: 1; text-align: center;
  padding: 0 var(--space-xl) clamp(var(--space-6xl), 9vh, var(--space-12xl));
  max-width: 70vw;
}
.wl-hero__title {
  margin: var(--space-l) 0 0;
  font-family: var(--font-secondary); font-weight: 600;
  font-size: 6vw;
  letter-spacing: var(--letter-spacing-m); line-height: 0.98; text-transform: uppercase; color: #ffffff;
}
.wl-hero__sub {
  margin: var(--space-xl) auto var(--space-2xl);
  font-family: var(--font-primary); font-style: italic;
  font-size:  var(--font-xl);
  line-height: var(--line-height-l); color: rgba(255,255,255,0.86);
  data-wrap: pretty;
}


/* ───── 11. Topbar + progress (lotus rail) ───── */

.wl-topbar { background: var(--wl-cream); padding-top: var(--space-2xl); padding-bottom: var(--space-l); }
.wl-topbar[hidden] { display: none; }
.wl-topbar__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.wl-progress { position: relative; width: 100%; height: 2.75rem; margin-top: var(--space-l); }
.wl-progress__track { position: absolute; left: 1.6rem; right: 1.6rem; top: 50%; height: 2px; transform: translateY(-50%); background: var(--wl-track); }
.wl-progress__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--wl-olive-deep); transition: width var(--motion-page-fade-duration) var(--ease-out); }
.wl-progress__nodes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.wl-lotus { display: inline-flex; padding: 0 0.3rem; background: var(--wl-cream); color: var(--wl-track); transition: color var(--duration-s) var(--ease-out); }
.wl-lotus svg { display: block; width: 3rem; height: auto; }
.wl-lotus .wl-lotus__bg { fill: var(--wl-cream); }   /* silhouette = page bg, masks the rail line */
.wl-lotus.is-lit { color: var(--wl-olive-deep); }    /* petals (currentColor) light up */


/* ───── 12. Question + options ───── */

.wl-screen--quiz { padding-bottom: var(--space-10xl); }
.wl-question { padding-top: var(--space-2xl); }
.wl-qlabel {
  margin: 0; text-align: center;
  font-family: var(--font-primary); font-weight: var(--font-weight-bold);
  font-size: var(--font-s); letter-spacing: var(--letter-spacing-xl); text-transform: uppercase; color: var(--text-secondary);
}
.wl-qtext {
  margin: var(--space-l) 0 var(--space-4xl); text-align: center;
  font-family: var(--font-secondary); font-weight: 600;
  font-size: var(--font-6xl);
  line-height: 1.05; letter-spacing: var(--letter-spacing-xs); text-transform: uppercase;
  text-wrap: pretty;
}
.wl-qtext:focus { outline: none; }

/* Answers: a row of image cards, each with its caption underneath. */
.wl-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); align-items: start; }
.wl-option {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; width: 100%; background: none; border: none;
  font: inherit; color: var(--wl-ink); cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-m);
}
.wl-option__media {
  position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: var(--radius-l); background: var(--wl-cream-2);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
  transition: transform var(--duration-xs) var(--ease-out), box-shadow var(--duration-xs) var(--ease-out);
}
.wl-option__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-option__num {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 var(--space-xs);
  border-radius: var(--radius-l) 0 var(--radius-m) 0;
  background: var(--wl-olive-deep); color: #ffffff;
  font-weight: var(--font-weight-bold); font-size: var(--font-s);
}
.wl-option__check {
  position: absolute; top: var(--space-s); right: var(--space-s);
  display: none; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill);
  background: var(--wl-olive-deep); color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wl-option__check svg { width: 1.05rem; height: 1.05rem; }
.wl-option.is-selected .wl-option__check { display: inline-flex; }
.wl-option__cap { font-size: var(--font-s); line-height: var(--line-height-l); color: var(--wl-ink); }
/* states */
.wl-option:hover .wl-option__media { transform: translateY(-5px); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.5); }
.wl-option:focus-visible { outline: none; }
.wl-option:focus-visible .wl-option__media { outline: 3px solid var(--wl-olive-deep); outline-offset: 2px; }
.wl-option.is-selected .wl-option__media { outline: 3px solid var(--wl-olive-deep); }
.wl-option.is-selected .wl-option__cap { font-weight: var(--font-weight-bold); }

.wl-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); margin-top: var(--space-3xl); }


/* ───── 13. Result ───── */

.wl-screen--result { padding-top: var(--space-2xl); padding-bottom: var(--space-10xl); }
.wl-result__grid { display: grid; grid-template-columns: minmax(0, 22.5rem) 1fr; gap: clamp(var(--space-2xl), 4vw, var(--space-6xl)); align-items: start; }
.wl-result__aside { display: flex; flex-direction: column; gap: var(--space-l); position: sticky; top: var(--space-xl); }

.wl-portrait { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-l); overflow: hidden; background: var(--grad, var(--wl-cream-2)); display: flex; }
.wl-portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-portrait__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.00) 60%, rgba(0,0,0,0.92) 100%); }
.wl-portrait__label { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; padding: var(--space-xl) var(--space-l) var(--space-xl) var(--space-l); color: #ffffff; margin: 0 auto; }
.wl-portrait__youare { font-family: var(--font-secondary); font-weight: 400; font-size: var(--font-4xl); line-height: var(--line-height-s); }
.wl-portrait__name { margin: 0; font-family: var(--font-secondary); font-weight: 700; font-size: var(--font-5xl); line-height: 1; }
.wl-portrait__name:focus { outline: none; }
.wl-portrait__role { margin: var(--space-s) 0 0; font-family: var(--font-secondary); font-weight: 600; font-size: var(--font-l); letter-spacing: var(--letter-spacing-m); text-transform: uppercase; color: rgba(255,255,255,0.9); }
.wl-restart { width: 100%; }

.wl-look { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-l); overflow: hidden; background: var(--grad, var(--wl-cream-2)); }
.wl-look__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-look__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%); }
.wl-look__label { position: absolute; left: var(--space-l); bottom: var(--space-l); z-index: 1; font-family: var(--font-secondary); font-size: var(--font-xs); letter-spacing: var(--letter-spacing-l); text-transform: uppercase; color: rgba(255,255,255,0.92); }
.wl-hotspot {
  position: absolute; z-index: 2; width: 2.25rem; height: 2.25rem;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 2px solid rgba(255,255,255,0.9);
  background: var(--wl-olive-deep); color: #ffffff; font-size: var(--font-l); line-height: 1;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform var(--duration-xs) var(--ease-out);
}
.wl-hotspot:hover { transform: translate(-50%, -50%) scale(1.12); }
.wl-hotspot:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.wl-shopcard {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 13rem; padding: var(--space-l);
  background: var(--wl-cream); border-radius: var(--radius-m);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.45); text-align: center;
}
.wl-shopcard[hidden] { display: none; }
.wl-shopcard__close {
  position: absolute; top: -0.6rem; right: -0.6rem; width: 1.6rem; height: 1.6rem;
  border: none; border-radius: var(--radius-pill); background: var(--wl-olive-deep); color: #ffffff;
  cursor: pointer; font-size: var(--font-m); line-height: 1;
}
.wl-shopcard__close:focus-visible { outline: 2px solid var(--wl-ink); outline-offset: 2px; }
.wl-shopcard__name { margin: 0 0 var(--space-2xs); font-weight: var(--font-weight-bold); font-size: var(--font-s); line-height: var(--line-height-l); }
.wl-shopcard__brand { margin: 0 0 var(--space-m); font-size: var(--font-xs); color: var(--text-secondary); }
.wl-shopcard__cta { border-radius: var(--radius-pill); }

.wl-look-list { display: none; }
.wl-look-list__item { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-s) 0; border-bottom: var(--border-s) solid var(--wl-line); }
.wl-look-list__thumb { width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: var(--radius-s); }
.wl-look-list__text { display: flex; flex-direction: column; flex: 1; }
.wl-look-list__name { font-weight: var(--font-weight-bold); font-size: var(--font-s); }
.wl-look-list__brand { font-size: var(--font-xs); color: var(--text-secondary); }
.wl-look-list__cta { border-radius: var(--radius-pill); }

.wl-body { margin-top: var(--space-l); }
.wl-lede { margin: 0 0 var(--space-m); font-size: var(--font-m); line-height: var(--line-height-l); }
.wl-lede--first { font-family: var(--font-secondary); font-size: clamp(var(--font-xl), 0.9rem + 1vw, var(--font-3xl)); line-height: var(--line-height-m); text-wrap:balance; }
.wl-lede em { font-style: italic; }
.wl-traits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-2xl); margin: var(--space-xl) 0 var(--space-s); max-width: 38rem; }
.wl-trait dt { font-size: var(--font-2xs); letter-spacing: var(--letter-spacing-m); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2xs); }
.wl-trait dd { margin: 0; font-size: var(--font-s); color: var(--wl-ink); }
.wl-look-desc { margin: var(--space-l) 0 0; font-size: var(--font-s); color: var(--text-secondary); }
.wl-look-desc strong { color: var(--wl-ink); }
.wl-ctas { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-2xl); }
.wl-score { margin-top: var(--space-2xl); max-width: 38rem; }
.wl-score__name.is-win, .wl-score__pts.is-win { color: var(--wl-olive-deep); font-weight: var(--font-weight-bold); }
.wl-score__note { margin-top: var(--space-s); font-size: var(--font-xs); color: var(--text-secondary); }


/* ───── 14. Responsive (spec §10) ───── */

@media (max-width: 860px) {
  .wl-result__grid { grid-template-columns: 1fr; }
  .wl-result__aside { position: static; max-width: 22.5rem; margin: 0 auto; }
  .wl-traits { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .wl-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .wl-options { grid-template-columns: 1fr; }
  .wl-look-list { display: flex; flex-direction: column; }
  .wl-hotspot { width: 2.75rem; height: 2.75rem; }
  .wl-nav { gap: var(--space-s); }
}


/* ───── 15. Reduced motion ───── */
/* The CSS floor below zeroes every transition/keyframe. The GSAP motion layer
   (quiz-motion.js) self-guards in parallel: it reads this same preference and
   no-ops to the resting state, so reveals never run. The only CSS pre-hide is
   the start hero (.wl-js, §8) — overridden to visible here so reduced-motion
   users get the hero instantly with no dark hold. */

@media (prefers-reduced-motion: reduce) {
  .wl-screen.is-active { animation: none; }
  .wl-js .wl-hero__bg, .wl-js .wl-hero__inner > * { opacity: 1; }
  .wl-progress__fill, .wl-lotus, .wl-arrow, .wl-hotspot, .wl-skip-link,
  .button, .wl-option__media, summary::before { transition: none; }
  .button:hover .wl-arrow, .button:hover .wl-arrow--back,
  .wl-option:hover .wl-option__media { transform: none; }
}