/* ==========================================================================
   Warm Lantern — homepage styles
   --------------------------------------------------------------------------
   Contents:
     1. Design tokens (colour + type)
     2. Base / reset
     3. Left rail
     4. Project accordion (rows, title rows, teasers, motifs, panels)
     5. Per-project styling (pause / crumbwise / wonder / typeface)
     6. Overlays (What guides the work, Contact)
     7. Grain
     8. Mobile (max-width: 820px)
     9. Reduced motion
   ========================================================================== */

/* 1. Design tokens */
:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;
  --font-accent: "Space Grotesk", system-ui, sans-serif;

  --lamplight-1: #ffe9c9;
  --lamplight-2: #f3c37c;
  --lamplight-3: #e89b3c;
  --lamplight-4: #b26a14;

  --page-bg: #13151c;
  --stage-bg: #0e1015;
  --text-on-dusk: #f2eee8;
  --text-secondary-on-dusk: #b8bcc6;
  --text-faint-on-dusk: #8a8f9c;
  --hairline-on-dusk: rgba(242, 238, 232, 0.09);

  --ease-row: cubic-bezier(0.33, 0, 0.2, 1);
}

/* 2. Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--page-bg); }
body {
  color: var(--text-on-dusk);
  font-family: var(--font-body);
}
h1, h2, h3, p { margin: 0; }
a { color: var(--text-on-dusk); text-decoration: none; }
a:hover { color: var(--lamplight-1); }
button { font: inherit; }

:is(a, button, [role="button"]):focus-visible {
  outline: 2px solid var(--lamplight-4);
  outline-offset: 2px;
}

.wl-root {
  display: flex;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

/* 3. Left rail */
.wl-rail {
  flex: none;
  width: 314px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 32px 32px 38px;
  border-right: 1px solid var(--hairline-on-dusk);
  background: linear-gradient(200deg, #171a22 0%, #13151c 70%);
}

.wl-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.wl-mark { position: relative; width: 44px; height: 44px; border: 1px solid rgba(242, 238, 232, 0.14); }
.wl-mark-sliver {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 233, 201, 0.55) 0%, #e89b3c 40%, #e89b3c 62%, rgba(232, 155, 60, 0.35) 100%);
  box-shadow: 0 0 14px rgba(232, 155, 60, 0.45);
}
.wl-wordmark { font-family: var(--font-display); font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; color: var(--text-on-dusk); }
.wl-wordmark span { display: block; }
.wl-wordmark .warm { font-weight: 500; }
.wl-wordmark .lantern { font-weight: 600; }

.wl-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 44px; }
.wl-nav button {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; color: var(--text-secondary-on-dusk);
}
.wl-nav button:hover { color: var(--text-on-dusk); }
.wl-nav button[aria-current="page"] { color: var(--text-on-dusk); }
.wl-nav .tick { display: inline-block; width: 14px; height: 1px; background: transparent; }
.wl-nav button[aria-current="page"] .tick { background: var(--lamplight-3); }

.wl-rail-intro { margin-top: auto; display: flex; flex-direction: column; gap: 18px; padding-top: 32px; }
.wl-opening { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.16; letter-spacing: -0.015em; color: #f6f1e9; text-wrap: pretty; }
.wl-rail-intro p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary-on-dusk); text-wrap: pretty; }
.wl-wander { color: var(--text-faint-on-dusk); }
.wl-rail-rule { height: 1px; background: var(--hairline-on-dusk); margin: 6px 0; }
.wl-creator { font-size: 12.5px !important; line-height: 1.55 !important; color: var(--text-faint-on-dusk) !important; }
.wl-rail-links { display: flex; align-items: baseline; gap: 24px; }
.wl-hello {
  background: none; border: none; padding: 0 0 1px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; color: #c9c3b6;
  border-bottom: 1px solid var(--lamplight-3);
}
.wl-hello:hover { color: var(--lamplight-1); }
.wl-guides-link {
  display: none;
  background: none; border: none; padding: 0 0 1px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; color: #9ba0ab;
  border-bottom: 1px solid rgba(242, 238, 232, 0.25);
}
.wl-guides-link:hover { color: var(--text-on-dusk); }

/* 4. Project accordion */
.wl-stage {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--stage-bg);
  overflow-y: auto;
}

.wl-row {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  flex: 1 1 0; min-height: 96px;
  cursor: pointer;
  transition: flex-grow 420ms var(--ease-row);
}
.wl-row.is-open { flex-grow: 2; min-height: 370px; }
.wl-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--lamplight-4); }

.wl-titlerow {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 18px 32px 0 32px;
}
.wl-titlegroup { display: flex; align-items: baseline; gap: 18px; transform: translateX(0); transition: transform 200ms ease-out; }
.wl-row:hover:not(.is-open) .wl-titlegroup { transform: translateX(6px); }
.wl-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.wl-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; white-space: nowrap; }

/* closed teaser */
.wl-teaser {
  position: absolute; left: 32px; right: 32px; bottom: 18px;
  display: flex; align-items: center; gap: 16px;
  opacity: 1; pointer-events: none;
  transition: opacity 260ms ease-out;
}
.wl-row.is-open .wl-teaser { opacity: 0; }
.wl-teaser p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.wl-teaser-line { flex: none; display: inline-block; width: 20px; height: 1px; transition: width 220ms ease-out; }
.wl-row:hover:not(.is-open) .wl-teaser-line { width: 48px; }
.wl-teaser-cue { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* motifs (watermarks) */
.wl-motif {
  position: absolute; right: 60px; top: 44px;
  pointer-events: none; user-select: none; white-space: nowrap;
  transition: color 260ms ease-out, opacity 260ms ease-out, font-size 260ms ease-out;
}

/* horizon line (expanded only) */
.wl-horizon {
  position: absolute; left: 32px; right: 32px; top: 44%; height: 1px;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease-out;
}
.wl-row.is-open .wl-horizon { opacity: 1; }

/* expanded panel */
.wl-open {
  flex: 1; min-height: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 56px;
  padding: 20px 32px 28px 32px;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease-out;
}
.wl-row.is-open .wl-open { opacity: 1; pointer-events: auto; }
.wl-left { flex: 1 1 280px; min-width: 220px; display: flex; flex-direction: column; gap: 14px; }
.wl-left > p { margin: 0; font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }
.wl-door { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.wl-statement {
  flex: 1 1 240px; min-width: 220px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 18px;
  text-align: right;
}
.wl-feature-list { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.wl-feature-list > div { display: flex; gap: 14px; padding: 1px 0; transition: background 160ms ease-out; }
.wl-feature-list .ref { flex: none; }
.wl-feature-list .title { transition: color 160ms ease-out; }

/* 5. Per-project styling */

/* -- Pause ------------------------------------------------------------- */
.wl-row--pause { background: linear-gradient(120deg, #37300f 0%, #2b250b 55%, #1f1a08 100%); }
.wl-row--pause.is-open { min-height: 400px; }
.wl-row--pause .wl-sliver {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(232,155,60,0) 0%, rgba(232,155,60,0.85) 30%, rgba(232,155,60,0.85) 70%, rgba(232,155,60,0) 100%);
}
.wl-row--pause .wl-horizon { top: 64px; background: linear-gradient(90deg, rgba(219,197,110,0) 0%, rgba(219,197,110,0.16) 30%, rgba(219,197,110,0.16) 78%, rgba(219,197,110,0) 100%); }
.wl-row--pause .wl-title {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-accent); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: #f3eed7;
}
.wl-pause-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #f3eed7; background: transparent;
}
.wl-row--pause .wl-tagline { color: #d9bd57; }
.wl-row--pause .wl-status { color: #f4d35e; }
.wl-row--pause .wl-motif { display: flex; gap: 14px; top: 46px; right: 32px; opacity: 0.25; }
.wl-row--pause:hover:not(.is-open) .wl-motif { opacity: 0.45; }
.wl-row--pause.is-open .wl-motif { opacity: 0; }
.wl-row--pause .wl-motif span { width: 5px; height: 5px; border-radius: 50%; background: #e2d8a8; }
.wl-row--pause .wl-teaser p { color: #c8b878; }
.wl-row--pause .wl-teaser-line { background: rgba(219,197,110,0.4); }
.wl-row--pause .wl-teaser-cue { color: #d9bd57; }
.wl-row--pause .wl-left { flex: 1 1 300px; min-width: 240px; gap: 11px; }
.wl-row--pause .wl-left > p { color: #dcd3ab; }
.wl-moods { display: flex; flex-direction: column; gap: 8px; }
.wl-moods-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #d9bd57; }
.wl-moods-row { display: flex; flex-wrap: nowrap; gap: 7px; }
.wl-pill {
  flex: 0 0 auto; text-align: center;
  font-size: 12px; color: #ece5c5;
  border: 1px solid rgba(219,197,110,0.28); border-radius: 999px;
  padding: 3px 9px; cursor: default;
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}
.wl-pill:hover { color: #ffffff; border-color: rgba(219,197,110,0.6); background: rgba(219,197,110,0.1); }
.wl-glimpses { font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: #b5a35e; }
.wl-enter {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #f4d35e;
  border: 1px solid rgba(244,211,94,0.5); border-radius: 999px;
  padding: 8px 18px; margin-top: 2px;
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out;
}
.wl-enter:hover { color: #f9e28e; border-color: #f4d35e; background: rgba(244,211,94,0.1); }
.wl-row--pause .wl-statement { flex: 2 1 260px; min-width: 240px; }
.wl-life-will-wait {
  font-family: var(--font-accent); font-weight: 700; font-size: 22px;
  line-height: 1.3; letter-spacing: -0.005em; color: #f3eed7;
  max-width: 21ch; text-wrap: balance;
}
.wl-phrase { display: inline-block; color: #f4d35e; }
.wl-phrase.is-entering { animation: wlPhrase 640ms ease-out; }
@keyframes wlPhrase { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wl-statement-rule { width: 52px; height: 1px; background: rgba(219,197,110,0.35); }

/* -- Crumbwise --------------------------------------------------------- */
.wl-row--crumbwise { background: linear-gradient(105deg, #241b13 0%, #1d1610 60%, #171208 100%); }
.wl-crumb-trail {
  position: absolute; left: 32px; right: 32px; bottom: 50px; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(226,196,150,0.22) 0 3px, transparent 3px 16px);
  transition: background 260ms ease-out;
}
.wl-row--crumbwise:hover:not(.is-open) .wl-crumb-trail { background: repeating-linear-gradient(90deg, rgba(226,196,150,0.4) 0 3px, transparent 3px 16px); }
.wl-row--crumbwise.is-open .wl-crumb-trail { background: transparent; }
.wl-recipe-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(226,196,150,0.5); }
.wl-row--crumbwise .wl-horizon { background: linear-gradient(90deg, rgba(226,196,150,0) 0%, rgba(226,196,150,0.12) 30%, rgba(226,196,150,0.12) 78%, rgba(226,196,150,0) 100%); }
.wl-row--crumbwise .wl-motif { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(226,196,150,0.08); }
.wl-row--crumbwise:hover:not(.is-open) .wl-motif { color: rgba(226,196,150,0.12); }
.wl-row--crumbwise.is-open .wl-motif { color: rgba(226,196,150,0); }
.wl-row--crumbwise .wl-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.025em; color: #efe3d2; }
.wl-row--crumbwise .wl-tagline { color: #8d7a58; }
.wl-row--crumbwise .wl-status { color: #b09468; }
.wl-row--crumbwise .wl-teaser p { color: #b3a084; }
.wl-row--crumbwise .wl-teaser-line { background: rgba(226,196,150,0.4); }
.wl-row--crumbwise .wl-teaser-cue { color: #96835f; }
.wl-row--crumbwise .wl-left > p { color: #cbb99f; }
.wl-row--crumbwise .wl-feature-list > div:hover { background: rgba(226,196,150,0.06); }
.wl-row--crumbwise .wl-feature-list .ref { color: rgba(226,196,150,0.6); width: 52px; }
.wl-row--crumbwise .wl-feature-list .title { color: #d3c1a4; }
.wl-row--crumbwise .wl-feature-list > div:hover .title { color: #f0e2c8; }
.wl-row--crumbwise .wl-door { color: #96835f; }
.wl-bake-statement {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.02em; color: #e8d8bf;
  max-width: 16ch; text-wrap: balance;
}
.wl-bake-statement em { font-weight: 500; }
.wl-taking-shape {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lamplight-2);
  border-bottom: 1px solid rgba(232,155,60,0.5); padding-bottom: 2px;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.wl-taking-shape:hover { color: var(--lamplight-1); border-color: var(--lamplight-3); }

/* -- The Wonder Archives ------------------------------------------------ */
.wl-row--wonder { background: linear-gradient(105deg, #221a20 0%, #1b141a 60%, #150f14 100%); }
.wl-row--wonder .wl-horizon { background: linear-gradient(90deg, rgba(233,219,227,0) 0%, rgba(233,219,227,0.12) 30%, rgba(233,219,227,0.12) 78%, rgba(233,219,227,0) 100%); }
.wl-row--wonder .wl-motif { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(233,219,227,0.08); }
.wl-row--wonder:hover:not(.is-open) .wl-motif { color: rgba(233,219,227,0.12); }
.wl-row--wonder.is-open .wl-motif { color: rgba(233,219,227,0); }
.wl-row--wonder .wl-title { font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: #e9dbe3; }
.wl-row--wonder .wl-tagline { color: #8b7484; text-transform: none; }
.wl-row--wonder .wl-status { color: #9c8494; }
.wl-row--wonder .wl-teaser p { color: #a893a1; }
.wl-row--wonder .wl-teaser-line { background: rgba(233,219,227,0.35); }
.wl-row--wonder .wl-teaser-cue { color: #9c8494; }
.wl-row--wonder .wl-open { padding-bottom: 28px; }
.wl-row--wonder .wl-left > p { color: #c3b0bc; }
.wl-row--wonder .wl-door { color: #8b7484; }
.wl-row--wonder .wl-feature-list { color: #b9a6b2; }
.wl-row--wonder .wl-feature-list > div:hover { background: rgba(233,219,227,0.05); }
.wl-row--wonder .wl-feature-list .ref { color: rgba(232,155,60,0.7); width: 56px; }
.wl-row--wonder .wl-feature-list .title { color: #c9b3c1; }
.wl-row--wonder .wl-feature-list > div:hover .title { color: #e5d5df; }
.wl-row--wonder .wl-statement { position: relative; }
.wl-047 { margin: -6px 0; }
.wl-wonder-statement {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.015em; color: #e9dbe3;
  text-align: right; max-width: 16ch; text-wrap: balance;
}
.wl-047 {
  font-family: var(--font-display); font-weight: 600; font-size: 96px;
  line-height: 0.9; letter-spacing: -0.04em; color: rgba(233,219,227,0.08);
  pointer-events: none; user-select: none;
}

/* -- Typeface ------------------------------------------------------------ */
.wl-row--typeface { background: linear-gradient(165deg, #1c1732 0%, #150f28 55%, #0e0a1c 100%); }
.wl-row--typeface .wl-horizon { background: linear-gradient(90deg, rgba(224,216,242,0) 0%, rgba(224,216,242,0.12) 30%, rgba(224,216,242,0.12) 78%, rgba(224,216,242,0) 100%); }
.wl-row--typeface .wl-motif {
  top: 30px; right: 60px;
  font-family: var(--font-display); font-weight: 600; font-size: 34px;
  line-height: 1; letter-spacing: -0.03em; color: rgba(224,216,242,0.07);
}
.wl-row--typeface:hover:not(.is-open) .wl-motif { color: rgba(224,216,242,0.12); }
.wl-row--typeface.is-open .wl-motif { color: rgba(224,216,242,0); }
.wl-row--typeface .wl-title { font-family: var(--font-mono); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: #e1dcf0; }
.wl-row--typeface .wl-title .face { font-weight: 300; font-style: italic; }
.wl-row--typeface .wl-tagline { color: #8377a3; }
.wl-row--typeface .wl-status { color: #948aac; }
.wl-row--typeface .wl-teaser p { color: #a89ec4; }
.wl-row--typeface .wl-teaser-line { background: rgba(224,216,242,0.32); }
.wl-row--typeface .wl-teaser-cue { color: #948aac; }
.wl-row--typeface .wl-open { padding-bottom: 28px; }
.wl-row--typeface .wl-left > p { color: #b3a8cc; }
.wl-row--typeface .wl-feature-list { color: #a89ec4; }
.wl-row--typeface .wl-feature-list > div:hover { background: rgba(224,216,242,0.07); }
.wl-row--typeface .wl-feature-list .ref { color: #6f6490; }
.wl-row--typeface .wl-feature-list > div:hover .title { color: #dcd5ee; }
.wl-row--typeface .wl-door { color: #6f6490; }
.wl-row--typeface .wl-statement { position: relative; }
.wl-letter-statement {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.015em; color: #e3dcf2;
  text-align: right; max-width: 16ch; text-wrap: balance;
}
.wl-specimen { flex: none; position: relative; width: 210px; height: 110px; }
.wl-specimen .line-baseline { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: rgba(224,216,242,0.26); }
.wl-specimen .line-xheight { position: absolute; left: 0; right: 0; bottom: 72px; height: 1px; background: rgba(224,216,242,0.15); }
.wl-specimen .label-baseline, .wl-specimen .label-xheight {
  position: absolute; right: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: #8377a3;
}
.wl-specimen .label-baseline { bottom: 25px; }
.wl-specimen .label-xheight { bottom: 75px; }
.wl-specimen .glyph-G { position: absolute; left: 6px; bottom: 13px; font-family: var(--font-display); font-weight: 600; font-size: 86px; line-height: 0.78; color: #cfc7e6; }
.wl-specimen .glyph-g { position: absolute; left: 82px; bottom: 1px; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 86px; line-height: 0.78; color: #a89ec4; }

/* 6. Overlays */
.wl-overlay { position: fixed; inset: 0; z-index: 80; display: flex; }
.wl-overlay[hidden] { display: none; }
.wl-scrim { position: absolute; inset: 0; background: rgba(7,8,11,0.55); border: none; padding: 0; cursor: default; }
.wl-drawer {
  position: relative; width: 440px; max-width: 86vw; height: 100%;
  background: #181b23;
  border-right: 1px solid rgba(242,238,232,0.10);
  box-shadow: 12px 0 48px rgba(4,5,8,0.5);
  padding: 44px 44px 40px 44px;
  display: flex; flex-direction: column; gap: 22px;
  overflow: auto;
}
.wl-drawer h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.015em; color: #f6f1e9; }
.wl-drawer p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #c4c8d1; text-wrap: pretty; }
.wl-drawer strong { font-weight: 600; color: var(--text-on-dusk); }
.wl-drawer .small { font-size: 13px; color: var(--text-faint-on-dusk); }
.wl-drawer .small a { color: #c4c8d1; border-bottom: 1px solid rgba(232,155,60,0.5); padding-bottom: 1px; }
.wl-drawer-rule { width: 32px; height: 1px; background: var(--lamplight-3); margin-top: 6px; }
.wl-email { align-self: flex-start; font-size: 15px; color: var(--text-on-dusk); border-bottom: 1px solid var(--lamplight-3); padding-bottom: 2px; }
.wl-close {
  position: absolute; top: 20px; right: 20px; width: 34px; height: 34px;
  background: none; border: 1px solid rgba(242,238,232,0.18); border-radius: 50%;
  color: var(--text-secondary-on-dusk); cursor: pointer; font-size: 15px; line-height: 1;
}
.wl-close:hover { color: var(--text-on-dusk); border-color: rgba(242,238,232,0.4); }

/* 7. Grain */
.wl-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* 8. Mobile */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .wl-root { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .wl-rail {
    width: 100%; height: auto; overflow: visible;
    padding: 40px 28px;
    border-right: none;
    border-bottom: 1px solid var(--hairline-on-dusk);
  }
  .wl-nav { display: none; }
  .wl-guides-link { display: inline-block; }
  .wl-rail-intro { margin-top: 0; padding-top: 40px; gap: 22px; }
  .wl-stage { height: auto; overflow: visible; gap: 8px; padding-bottom: 64px; }
  .wl-row { flex: none; min-height: 0; }
  .wl-row.is-open { min-height: 0; }
  .wl-titlerow { padding: 26px 28px 0 28px; flex-wrap: wrap; row-gap: 6px; }
  .wl-open { flex-direction: column; align-items: stretch; gap: 28px; padding: 24px 28px 36px 28px; }
  .wl-row:not(.is-open) .wl-open { display: none; }
  .wl-left { flex: none; width: 100%; min-width: 0; }
  .wl-row--pause .wl-left, .wl-row--wonder .wl-left { flex: none; width: 100%; min-width: 0; }
  .wl-statement, .wl-row--pause .wl-statement { flex: none; width: 100%; min-width: 0; align-items: flex-start; text-align: left; }
  .wl-statement > * { text-align: left; }
  .wl-047 { font-size: 72px; }
  .wl-motif { display: none !important; }
  .wl-teaser {
    position: static; left: auto; right: auto; bottom: auto;
    margin: 12px 28px 26px 28px;
    flex-wrap: wrap; row-gap: 8px;
  }
  .wl-teaser p { white-space: normal; }
  .wl-horizon, .wl-crumb-trail { display: none; }
  .wl-specimen { align-self: flex-start; }
}

/* 9. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}