/* World As It Was — Archive direction
   ---------------------------------------------------------------------------
   Two themes, one system. Read DESIGN.md before changing anything here.

   TWO LAYERS OF COLOUR:
   1. Brand scale   fixed values, never themed. The raw ink, paper, amber, bronze.
   2. Role tokens   everything else, including the hero, the phone, the plates,
                    the era viewer and the SVG map. Dark values live on :root;
                    the light theme overrides them, and only them.

   Both themes go all the way. Nothing on the page stays dark in light mode:
   the plates have their own light-toned files, swapped by a <picture> source.

   Never write a raw colour into a component rule. Add a role token instead.
   --------------------------------------------------------------------------- */

:root{
  /* ---- 1. brand scale (fixed) ---- */
  --ink-900:#07090d; --ink-800:#0b0e14; --ink-700:#11151c;
  --paper:#f4ecd8; --grey-300:#cbd1de; --grey-500:#7d8597;
  --amber:#e8b86a; --amber-hover:#f0c884;
  --bronze:#9a5f1e; --bronze-hover:#7d4c15; --bronze-text:#8a5a1f;
  --parchment:#f7f2e7; --parchment-deep:#efe8d7; --parchment-lift:#fffdf8;
  --soot:#14110c;

  /* ---- 2. imagery and device surfaces: themed, like everything else ---- */
  --plate-field:#0b0e14;
  --plate-scrim:linear-gradient(transparent 44%,rgba(7,9,13,.86) 80%,#07090d);
  --viewer-scrim:
    linear-gradient(rgba(7,9,13,.88),rgba(7,9,13,.46) 18%,transparent 38%),
    linear-gradient(transparent 50%,rgba(7,9,13,.84) 84%,#07090d);
  --hero-ground:#07090d;
  --hero-vignette:inset 0 0 130px 30px rgba(7,9,13,.9);
  --hero-scrim:
    linear-gradient(#07090d,rgba(7,9,13,.62) 34%,transparent 62%),
    linear-gradient(transparent 46%,rgba(7,9,13,.72) 78%,#07090d),
    linear-gradient(90deg,rgba(7,9,13,.86),rgba(7,9,13,.5) 46%,rgba(7,9,13,.12) 74%);
  --hero-scrim-narrow:
    linear-gradient(#07090d,rgba(7,9,13,.58) 26%,transparent 54%),
    linear-gradient(transparent 40%,rgba(7,9,13,.74) 74%,#07090d),
    linear-gradient(90deg,rgba(7,9,13,.62),rgba(7,9,13,.32) 60%,rgba(7,9,13,.12));
  --phone-body:#11151c;
  --phone-screen:#0b0e14;
  --phone-chrome:rgba(17,21,28,.9);
  --shadow-sheet:0 -22px 60px rgba(0,0,0,.62);
  --shadow-phone:0 34px 90px rgba(0,0,0,.66);



  /* ---- 3. roles: DARK is the default theme ---- */
  --ground:#07090d;
  --ground-recessed:#0b0e14;
  --surface:#11151c;
  --footer-ground:#11151c;
  --header-ground:rgba(17,21,28,.78);

  --text:#f4ecd8;
  --text-90:rgba(244,236,216,.90);
  --text-86:rgba(244,236,216,.86);
  --text-84:rgba(244,236,216,.84);
  --text-74:rgba(244,236,216,.74);
  --text-62:rgba(244,236,216,.62);
  --text-50:rgba(244,236,216,.50);
  --text-2:#cbd1de;
  --text-meta:#7d8597;

  --hairline:rgba(244,236,216,.10);
  --rule:rgba(244,236,216,.18);
  --node:rgba(244,236,216,.30);
  --border:rgba(244,236,216,.24);
  --border-hover:rgba(244,236,216,.48);
  --tint:rgba(244,236,216,.03);

  --accent:#e8b86a;              /* fills and graphics */
  --accent-hover:#f0c884;
  --accent-text:#e8b86a;         /* the accent used as text */
  --accent-dim:rgba(232,184,106,.72);
  --accent-on:#11151c;           /* text sitting on an accent fill */
  --accent-ring:rgba(232,184,106,.45);
  --accent-halo:rgba(232,184,106,.22);
  --select:rgba(232,184,106,.28);

  --known-line:rgba(232,184,106,.65);
  --likely-line:rgba(203,209,222,.42);
  --generated-line:rgba(125,133,151,.70);

  --shadow-lift:0 34px 90px rgba(0,0,0,.66);
  --shadow-pin:0 2px 10px rgba(0,0,0,.6);

  /* ---- type, space, shape (never themed) ---- */
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ui:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-chip:6px; --r-ui:12px; --r-card:20px;
  --measure:62ch; --page:1180px; --gutter:24px;
  --section:112px;
  --ease:cubic-bezier(.22,1,.36,1);

  color-scheme:dark;
}

/* ---- LIGHT theme ----
   Applied when the system asks for light and the reader has not pinned dark,
   and whenever the reader pins light. Every value is measured against its own
   ground: body text at least 7:1, everything else at least 4.5:1. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#f7f2e7;
    --ground-recessed:#efe8d7;
    --surface:#fffdf8;
    --footer-ground:#ece5d3;
    --header-ground:rgba(255,253,248,.84);

    --text:#14110c;
    --text-90:rgba(20,17,12,.92);
    --text-86:rgba(20,17,12,.88);
    --text-84:rgba(20,17,12,.86);
    --text-74:rgba(20,17,12,.78);
    --text-62:rgba(20,17,12,.68);
    --text-50:rgba(20,17,12,.62);
    --text-2:#4c4636;
    --text-meta:#625b4c;

    --hairline:rgba(20,17,12,.14);
    --rule:rgba(20,17,12,.22);
    --node:rgba(20,17,12,.34);
    --border:rgba(20,17,12,.26);
    --border-hover:rgba(20,17,12,.46);
    --tint:rgba(20,17,12,.03);

    --accent:#9a5f1e;
    --accent-hover:#7d4c15;
    --accent-text:#8a5a1f;
    --accent-dim:#8a5a1f;
    --accent-on:#fffdf8;
    --accent-ring:rgba(154,95,30,.45);
    --accent-halo:rgba(154,95,30,.20);
    --select:rgba(154,95,30,.20);

    --known-line:rgba(138,90,31,.60);
    --likely-line:rgba(76,70,54,.42);
    --generated-line:rgba(98,91,76,.62);

    --shadow-lift:0 26px 60px rgba(20,17,12,.16);
    --shadow-pin:0 2px 8px rgba(20,17,12,.22);


    --plate-field:#efe9dc;
    --plate-scrim:linear-gradient(transparent 58%,rgba(247,242,231,.7) 84%,#f7f2e7);
    --viewer-scrim:
      linear-gradient(rgba(247,242,231,.9),rgba(247,242,231,.48) 18%,transparent 38%),
      linear-gradient(transparent 56%,rgba(247,242,231,.84) 86%,#f7f2e7);
    --hero-ground:#f7f2e7;
    --hero-vignette:inset 0 0 130px 30px rgba(247,242,231,.86);
    --hero-scrim:
      linear-gradient(#f7f2e7,rgba(247,242,231,.4) 16%,transparent 46%),
      linear-gradient(transparent 46%,rgba(247,242,231,.58) 76%,#f7f2e7),
      linear-gradient(90deg,rgba(247,242,231,.88),rgba(247,242,231,.44) 42%,transparent 74%);
    --hero-scrim-narrow:
      linear-gradient(#f7f2e7,rgba(247,242,231,.4) 18%,transparent 48%),
      linear-gradient(transparent 42%,rgba(247,242,231,.62) 74%,#f7f2e7),
      linear-gradient(90deg,rgba(247,242,231,.7),rgba(247,242,231,.32) 56%,transparent);
    --phone-body:#fffdf8;
    --phone-screen:#efe9dc;
    --phone-chrome:rgba(255,253,248,.92);
    --shadow-sheet:0 -22px 50px rgba(20,17,12,.13);
    --shadow-phone:0 26px 60px rgba(20,17,12,.2);


    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#f7f2e7;
  --ground-recessed:#efe8d7;
  --surface:#fffdf8;
  --footer-ground:#ece5d3;
  --header-ground:rgba(255,253,248,.84);

  --text:#14110c;
  --text-90:rgba(20,17,12,.92);
  --text-86:rgba(20,17,12,.88);
  --text-84:rgba(20,17,12,.86);
  --text-74:rgba(20,17,12,.78);
  --text-62:rgba(20,17,12,.68);
  --text-50:rgba(20,17,12,.62);
  --text-2:#4c4636;
  --text-meta:#625b4c;

  --hairline:rgba(20,17,12,.14);
  --rule:rgba(20,17,12,.22);
  --node:rgba(20,17,12,.34);
  --border:rgba(20,17,12,.26);
  --border-hover:rgba(20,17,12,.46);
  --tint:rgba(20,17,12,.03);

  --accent:#9a5f1e;
  --accent-hover:#7d4c15;
  --accent-text:#8a5a1f;
  --accent-dim:#8a5a1f;
  --accent-on:#fffdf8;
  --accent-ring:rgba(154,95,30,.45);
  --accent-halo:rgba(154,95,30,.20);
  --select:rgba(154,95,30,.20);

  --known-line:rgba(138,90,31,.60);
  --likely-line:rgba(76,70,54,.42);
  --generated-line:rgba(98,91,76,.62);

  --shadow-lift:0 26px 60px rgba(20,17,12,.16);
  --shadow-pin:0 2px 8px rgba(20,17,12,.22);


  --plate-field:#efe9dc;
  --plate-scrim:linear-gradient(transparent 58%,rgba(247,242,231,.7) 84%,#f7f2e7);
  --viewer-scrim:
    linear-gradient(rgba(247,242,231,.9),rgba(247,242,231,.48) 18%,transparent 38%),
    linear-gradient(transparent 56%,rgba(247,242,231,.84) 86%,#f7f2e7);
  --hero-ground:#f7f2e7;
  --hero-vignette:inset 0 0 130px 30px rgba(247,242,231,.86);
  --hero-scrim:
    linear-gradient(#f7f2e7,rgba(247,242,231,.4) 16%,transparent 46%),
    linear-gradient(transparent 46%,rgba(247,242,231,.58) 76%,#f7f2e7),
    linear-gradient(90deg,rgba(247,242,231,.88),rgba(247,242,231,.44) 42%,transparent 74%);
  --hero-scrim-narrow:
    linear-gradient(#f7f2e7,rgba(247,242,231,.4) 18%,transparent 48%),
    linear-gradient(transparent 42%,rgba(247,242,231,.62) 74%,#f7f2e7),
    linear-gradient(90deg,rgba(247,242,231,.7),rgba(247,242,231,.32) 56%,transparent);
  --phone-body:#fffdf8;
  --phone-screen:#efe9dc;
  --phone-chrome:rgba(255,253,248,.92);
  --shadow-sheet:0 -22px 50px rgba(20,17,12,.13);
  --shadow-phone:0 26px 60px rgba(20,17,12,.2);


  color-scheme:light;
}

@media (max-width:1024px){ :root{ --section:72px } }
@media (max-width:760px){ :root{ --section:48px; --gutter:20px } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--ui); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--accent-text);text-decoration:none;transition:color .12s}
a:hover{color:var(--text)}
::selection{background:var(--select);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:target{scroll-margin-top:88px}

/* a theme change is a colour change, never a layout change */
body,.site-header,.site-footer,.section,.record,.narration,.era,.store,.theme-toggle{
  transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}

.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--surface);color:var(--text);
  padding:10px 14px;border-radius:var(--r-ui);border:1px solid var(--hairline)}
.skip:focus{left:12px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.hidden{display:none!important}

/* ---------- type roles ---------- */
.display-1{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(52px,7.5vw,96px);line-height:1.02;letter-spacing:-.015em}
.display-2{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.01em}
.title{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(28px,3vw,34px);line-height:1.15}
.numeral{font-family:var(--display);font-style:italic;font-weight:400;line-height:1;color:var(--accent-text)}
.lede{font-size:19px;line-height:1.6;color:var(--text-90);max-width:var(--measure)}
.body{font-size:16.5px;line-height:1.7;color:var(--text-86);max-width:var(--measure)}
.small{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.eyebrow{font-family:var(--ui);font-weight:500;font-size:11px;line-height:1;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2)}
.meta{font-family:var(--mono);font-weight:400;font-size:11px;line-height:1.5;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-meta)}
.meta a{color:var(--text-meta)} .meta a:hover{color:var(--text)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;
  border:1px solid transparent;border-radius:var(--r-ui);font-weight:600;font-size:15px;line-height:1;
  white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-on)}
.btn-secondary{border-color:var(--border);color:var(--text)}
.btn-secondary:hover{border-color:var(--border-hover);color:var(--text)}
.btn-sm{height:44px;padding:0 18px;font-size:14px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-ground);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  border-bottom:1px solid var(--hairline)}
.header-inner{display:flex;align-items:center;gap:20px;height:64px}
.wordmark{font-family:var(--display);font-style:italic;font-weight:400;font-size:22px;color:var(--text);
  white-space:nowrap;margin-right:auto}
.wordmark:hover{color:var(--text)}
.nav{display:flex;gap:28px}
.nav a{display:inline-flex;align-items:center;min-height:28px;font-size:13.5px;font-weight:500;
  color:var(--text-2)}
.nav a:hover{color:var(--text)}
.header-end{display:flex;align-items:center;gap:14px}
@media (max-width:900px){ .nav{display:none} }

/* theme toggle: one button showing the theme you can switch TO */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--border);border-radius:var(--r-ui);color:var(--text-2);background:transparent;
  cursor:pointer;transition:color .14s,border-color .14s,background-color .14s}
.theme-toggle:hover{color:var(--accent-text);border-color:var(--border-hover);background:var(--tint)}
.theme-toggle svg{width:19px;height:19px;display:block;
  transition:transform .32s var(--ease),opacity .18s linear}
.theme-toggle .icon-moon{display:none}
/* the icon follows the same cascade as the palette, so it needs no JavaScript */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:block}
}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}
.theme-toggle:hover svg{transform:rotate(18deg)}
:root[data-theme="light"] .theme-toggle:hover svg{transform:rotate(-18deg)}
@media (max-width:560px){
  .header-end .btn,
  .header-end .go{display:none}           /* the hero CTA sits directly below */
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--hero-ground);
  color:var(--text);
  padding:clamp(56px,7vw,104px) 0 clamp(56px,6vw,88px);
  min-height:min(880px,calc(100svh - 64px));display:flex;align-items:center}
.hero-plate{position:absolute;inset:0;z-index:-1}
.hero-plate img{width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.hero-plate::after{content:"";position:absolute;inset:0;
  box-shadow:var(--hero-vignette);
  background:var(--hero-scrim)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;align-items:center;width:100%}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy .display-1{margin-bottom:26px}
.hero-copy .lede{margin-bottom:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-device{display:flex;justify-content:center}
.hero-credit{position:absolute;right:var(--gutter);bottom:20px;z-index:1;text-align:right;max-width:60ch}
@media (max-width:1024px){
  /* stop being a flex row, or the credit becomes a squeezed sibling column */
  .hero{display:block;min-height:0;padding-bottom:56px}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-device{justify-content:flex-start}
  .hero-credit{position:static;width:100%;max-width:none;text-align:left;
    margin-top:40px;padding:0 var(--gutter)}
}
@media (max-width:760px){
  .hero-plate img{object-position:52% 34%}
  /* a narrow screen is almost all left-hand gradient, so lighten it */
  .hero-plate::after{background:var(--hero-scrim-narrow)}
  .hero-device{justify-content:center}
}

/* ---------- phone: the real app, in a frame ---------- */
/* The screen is exactly the aspect of the captures (560x1212, a phone viewport at 2x),
   so nothing is cropped and the map keeps its OpenStreetMap attribution on screen,
   where the tile licence needs it. */
.phone{width:300px;flex:none;margin:0;background:var(--phone-body);
  border:1px solid var(--hairline);border-radius:44px;padding:10px;
  box-shadow:var(--shadow-phone);color:var(--text)}
.phone-screen{position:relative;background:var(--phone-screen);border-radius:35px;overflow:hidden}
.phone-status{display:flex;justify-content:space-between;align-items:center;
  height:34px;padding:12px 20px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--text-2)}
.phone-app{position:relative;width:100%;aspect-ratio:560/1212;overflow:hidden}
.phone-app-map{position:absolute;inset:0;display:block}
.phone-app-map img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}

/* The sheet slides up over the map, as it does in the app. Its top corners are
   transparent in the file, so the map shows through them at every position. */
.phone-sheet-pic{position:absolute;left:0;right:0;bottom:0;display:block;
  transform:translateY(101%);transition:transform .62s var(--ease)}
.phone-sheet-pic img{display:block;width:100%;height:auto}
.phone-sheet-pic.is-on{transform:none}
@media (prefers-reduced-motion:reduce){ .phone-sheet-pic{transition:none} }

/* ---------- sections ---------- */
.section{padding:var(--section) 0;background:var(--ground)}
.recessed{background:var(--ground-recessed)}
.section + .section:not(.recessed){border-top:1px solid var(--hairline)}
.recessed + .section{border-top:0}
.section-head{margin-bottom:clamp(40px,5vw,64px);max-width:var(--measure)}
.section-head .eyebrow{margin-bottom:20px}
.section-head .body{margin-top:20px}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);
  align-items:center}
.two-col.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:1024px){
  .two-col,.two-col.flip{grid-template-columns:1fr;gap:40px}
  .two-col.flip > .plate{order:-1}
}

/* ---------- plates ---------- */
.plate{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--plate-field);border:1px solid var(--hairline)}
.plate img,.plate picture{width:100%;height:100%;display:block}
.plate img{object-fit:cover}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--plate-scrim)}
.plate figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1}
.ratio-4x5{aspect-ratio:4/5}
.ratio-3x2{aspect-ratio:3/2}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,32px)}
.steps li{padding-top:28px;border-top:1px solid var(--hairline)}
.steps .meta{display:block;margin-bottom:22px}
.steps h3{font-family:var(--ui);font-weight:500;font-size:17px;line-height:1.35;margin-bottom:10px}
.steps p{font-size:15px;line-height:1.65;color:var(--text-2)}
@media (max-width:760px){ .steps{grid-template-columns:1fr;gap:28px} }

/* ---------- era scrubber ---------- */
.scrub-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,4vw,56px);align-items:start}
@media (max-width:1024px){ .scrub-grid{grid-template-columns:1fr;gap:36px} }

.viewer{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline);
  background:var(--plate-field);aspect-ratio:3/2}
.viewer-layer{position:absolute;inset:0;opacity:0;transition:opacity .42s var(--ease)}
.viewer-layer.on{opacity:1}
.viewer-layer picture{display:block;width:100%;height:100%}
.viewer-layer img{width:100%;height:100%;object-fit:cover}
.viewer-layer svg{width:100%;height:100%}
.viewer::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--viewer-scrim)}
.viewer-caption{position:absolute;left:20px;right:20px;bottom:16px;z-index:3}
.viewer-stamp{position:absolute;left:20px;top:18px;z-index:3;display:flex;align-items:baseline;gap:10px}
.viewer-stamp .numeral{font-size:clamp(34px,4vw,46px)}
.viewer-stamp .meta{padding-bottom:4px}

.scrub{margin:36px 0 0}
.scrub-rail{position:relative;height:44px}
.scrub-line{position:absolute;left:0;right:0;top:21px;height:1px;background:var(--rule)}
.scrub-nodes{position:absolute;left:0;right:0;top:17px;display:flex;justify-content:space-between}
.scrub-nodes i{width:9px;height:9px;border-radius:50%;background:var(--ground-recessed);
  border:1px solid var(--node)}
.scrub-range{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:44px;
  margin:0;background:transparent;cursor:grab}
.scrub-range:active{cursor:grabbing}
.scrub-range::-webkit-slider-runnable-track{height:44px;background:transparent}
.scrub-range::-moz-range-track{height:44px;background:transparent}
.scrub-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:3px solid var(--ground-recessed);box-shadow:var(--shadow-pin);
  margin-top:13px}
.scrub-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--ground-recessed);box-shadow:var(--shadow-pin)}
.scrub-range:focus-visible{outline:none}
.scrub-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-ring)}
.scrub-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-ring)}
.scrub-halo{position:absolute;top:21px;width:44px;height:44px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;transition:left .42s var(--ease);
  background:radial-gradient(circle,var(--accent-halo),transparent 68%)}
.scrub-labels{display:flex;justify-content:space-between;margin-top:6px;gap:8px}
.scrub-labels button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-meta);padding:6px 2px;transition:color .12s;white-space:nowrap}
.scrub-labels button:hover{color:var(--text)}
.scrub-labels button[aria-current="true"]{color:var(--accent-text)}

.record{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(24px,3vw,32px)}
.record-head{padding-bottom:18px;border-bottom:1px solid var(--hairline);margin-bottom:20px}
.record-head .title{margin:8px 0 12px}
.record-head p{font-size:15px;line-height:1.6;color:var(--text-2)}
.record dl{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:baseline;margin:0}
.record dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-meta);white-space:nowrap}
.record dd{margin:0;font-size:15px;line-height:1.5}
.record-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline)}
@media (max-width:420px){ .record dl{grid-template-columns:1fr;gap:4px 0} .record dd{margin-bottom:10px} }

/* ---------- confidence ---------- */
.known{text-decoration:underline;text-decoration-color:var(--known-line);text-underline-offset:3px;
  color:var(--text-90)}
.likely{text-decoration:underline dashed var(--likely-line);text-underline-offset:3px;color:var(--text-84)}
.generated{text-decoration:underline dotted var(--generated-line);text-underline-offset:3px;
  color:var(--text-74)}
.narration{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(24px,3vw,32px);margin:32px 0 26px;max-width:var(--measure)}
.narration p{font-size:17px;line-height:1.8;margin-bottom:18px}
.legend{display:flex;flex-wrap:wrap;gap:14px 32px}
.legend li{display:flex;align-items:center;gap:10px}
.rule{display:inline-block;width:15px;height:0;border-bottom-width:1px;flex:none}
.rule.known{border-bottom-style:solid;border-bottom-color:var(--known-line);text-decoration:none}
.rule.likely{border-bottom-style:dashed;border-bottom-color:var(--likely-line);text-decoration:none}
.rule.generated{border-bottom-style:dotted;border-bottom-color:var(--generated-line);text-decoration:none}

/* ---------- reconstruct list ---------- */
.facets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,64px)}
.facets > div{padding:22px 0;border-top:1px solid var(--hairline)}
.facets dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-meta);margin-bottom:10px}
.facets dd{margin:0;font-size:15px;line-height:1.6;color:var(--text-86)}
@media (max-width:760px){ .facets{grid-template-columns:1fr} }

/* ---------- archive ---------- */
.city{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,48px);
  align-items:start;padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--hairline)}
.city:first-of-type{border-top:0;padding-top:0}
.city-name{margin:10px 0 22px}
.eras{display:grid;gap:12px}
.era{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 24px}
.era .numeral{font-size:40px}
.era .numeral small{font-size:.48em;margin-left:2px;letter-spacing:.02em}
.era h4{font-family:var(--ui);font-weight:500;font-size:15px;line-height:1.35;margin-bottom:6px}
.era p{font-size:13px;line-height:1.55;color:var(--text-2);margin-bottom:10px}
.era .status{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-dim)}
.era.archived .numeral{color:var(--text-50)}
.era.archived .status{color:var(--text-meta)}
.tour-note{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--hairline);
  max-width:var(--measure)}
.tour-note .request{margin-top:14px;font-size:15px;line-height:1.6;color:var(--text-86)}
.tour-note .request a{border-bottom:1px solid var(--known-line);padding:3px 0 2px}
.tour-note .request a:hover{border-bottom-color:currentColor}
@media (max-width:1024px){ .city{grid-template-columns:1fr} .city > .plate{max-width:400px} }
@media (max-width:560px){
  .era{grid-template-columns:62px minmax(0,1fr);row-gap:14px}
  .era .go{grid-column:2;justify-self:start}
  .era .numeral{font-size:34px}
}

/* ---------- later ---------- */
.later{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(32px,4vw,48px)}
.later li{padding:24px 0;border-top:1px solid var(--hairline)}
.later h3{font-family:var(--ui);font-weight:500;font-size:15px;line-height:1.35;margin-bottom:8px;
  color:var(--text-62)}
.later p{font-size:14px;line-height:1.6;color:var(--text-meta)}
@media (max-width:900px){ .later{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .later{grid-template-columns:1fr} }

/* ---------- waitlist ---------- */
/* the invitation is a place, not a paragraph that trails off the page */
.join{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(30px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4vw,56px);align-items:center}
.join::before{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.join .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.join .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.join h2{max-width:16ch}
.join-sub{margin-top:20px;font-family:var(--mono);font-size:11px;line-height:1.6;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-meta)}
.join .waitlist{margin-top:0}
/* the field sits on the page ground so it reads as a slot cut into the panel */
.join .wl-row{background:var(--ground)}
@media (max-width:900px){
  .join{grid-template-columns:1fr;gap:28px;align-items:start}
  .join h2{max-width:17ch}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.waitlist{margin-top:clamp(36px,5vw,52px);max-width:660px}

/* one field, one button, one box */
.wl-row{display:flex;align-items:center;gap:10px;padding:9px 9px 9px 22px;
  background:var(--surface);border:1px solid var(--border);border-radius:17px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),
             background-color .22s var(--ease),transform .16s var(--ease)}
.wl-row:hover{border-color:var(--border-hover)}
.wl-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring),var(--shadow-lift)}
.wl-row input{flex:1 1 auto;min-width:0;height:54px;padding:0;border:0;background:transparent;
  font-family:var(--ui);font-size:16.5px;letter-spacing:.005em;color:var(--text)}
.wl-row input::placeholder{color:var(--text-meta)}
.wl-row input:focus{outline:none}
.wl-row .btn{height:54px;flex:none;padding:0 26px;border-radius:11px}
.wl-row .btn[disabled]{opacity:.65;cursor:progress}
@media (max-width:600px){
  .wl-row{flex-direction:column;align-items:stretch;padding:10px;gap:10px}
  .wl-row input{padding:0 14px;height:52px}
  .wl-row .btn{width:100%;height:52px}
}

/* the promise under the box, given room to be read */
.waitlist .meta{margin-top:22px;max-width:52ch;line-height:1.7}

.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-status{margin-top:18px;font-size:15.5px;line-height:1.55;min-height:1.2em}
.wl-status[data-tone="ok"]{color:var(--accent-text)}
.wl-status[data-tone="error"]{color:var(--text)}
.wl-status:empty{margin-top:0;min-height:0}

/* the follow-up question, only after someone is in */
.wl-more{margin-top:30px;padding-top:28px;border-top:1px solid var(--hairline);
  animation:wl-in .42s var(--ease) both}
.wl-more label{display:block;margin-bottom:12px;text-transform:none;letter-spacing:.02em;
  font-family:var(--ui);font-size:15px;color:var(--text-86)}
@keyframes wl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .wl-more{animation:none} }

/* ---------- one action, two devices ---------- */
/* The app refuses anything with a mouse, using exactly (pointer:fine), so the site asks
   the same question and a person is never sent to a screen that will turn them away.
   The switch itself is at the very end of this file and has to stay there; see the note
   above it. What follows is only how each of the two sides looks. */
.go{display:inline-flex}

/* the phone side: one button, and the address spelled out under it */
.launch-go .btn{height:58px;padding:0 34px;font-size:16.5px;border-radius:14px}
.launch-note{margin-top:20px;font-size:15px;line-height:1.7;color:var(--text-2);max-width:34ch}
.launch-go .meta{margin-top:12px;text-transform:none;letter-spacing:.06em;font-size:12px}

/* the desktop side: a paper tile you point a camera at. The code stays ink on paper in
   both themes, because a scanner wants dark on light and nothing else, so it is drawn
   from the fixed brand scale rather than the role tokens that flip. */
.handoff{display:flex;align-items:center;gap:clamp(18px,2.2vw,28px)}
.handoff-qr{flex:none;width:clamp(126px,14vw,160px);height:auto;
  border-radius:12px;background:var(--parchment);
  border:1px solid var(--hairline);box-shadow:var(--shadow-pin)}
.handoff-copy h3{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.1vw,26px);line-height:1.2;color:var(--text);
  margin-bottom:14px;max-width:17ch}
.handoff-copy p{font-size:15px;line-height:1.7;color:var(--text-2);max-width:36ch}
.handoff-copy b{font-family:var(--mono);font-weight:400;font-size:14px;
  letter-spacing:.01em;color:var(--text);white-space:nowrap}
.handoff-aside{margin-top:12px;font-size:13.5px;color:var(--text-meta)}
.handoff-aside a{color:var(--text-2);border-bottom:1px solid var(--known-line);padding-bottom:1px}
.handoff-aside a:hover{color:var(--text);border-bottom-color:currentColor}
@media (max-width:620px){ .handoff{flex-direction:column;align-items:flex-start;gap:20px} }

/* the quieter promise underneath: the web app is live, the stores are not */
.notify{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.notify .eyebrow{margin-bottom:16px}
.notify .title{font-size:clamp(24px,2.5vw,30px);margin-bottom:14px}
.notify-copy p{font-size:15px;line-height:1.7;color:var(--text-2);max-width:44ch}
.notify .waitlist{margin-top:0;max-width:none}
.notify .waitlist .meta{margin-top:18px}
@media (max-width:900px){ .notify{grid-template-columns:1fr;gap:26px} }

/* ---------- footer ---------- */
.site-footer{background:var(--footer-ground);border-top:1px solid var(--hairline);padding:48px 0 40px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-links a{display:inline-flex;align-items:center;min-height:28px}
.footer-note{margin-top:32px;padding-top:24px;border-top:1px solid var(--hairline);max-width:78ch}
.footer-note + .footer-note{margin-top:12px;padding-top:0;border-top:0}

/* ---------- motion ---------- */
/* entrances are a progressive enhancement: without JS nothing is ever hidden */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .viewer-layer{transition:none}
  .scrub-halo{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---------- the device switch, last and absolute ---------- */
/* These two queries are exact complements, so precisely one always applies. They live at
   the end and carry !important on purpose: this is not styling, it is which of two links
   a person is given, and losing to a later layout rule (it happened, .handoff won and put
   the QR on a phone) means sending someone to a screen that turns them away. */
@media not all and (pointer:fine){ .for-desktop{display:none!important} }
@media (pointer:fine){ .for-phone{display:none!important} }