/* ======================================================================
   THEN & THERE — the air-route poster.
   The map is the page (full-bleed, behind everything). Over it float the
   printed things a 1930s traveller carried: the ticket coupon with its
   stub, the timetable strip, the postmark. Ultramarine sea, flat sunlit
   land, route vermilion; aluminium white stock; carbon-purple figures.
   Day and Night share one system — Night is the same poster after dark.
   ====================================================================== */

@font-face{ font-family:"Limelight"; src:url("/chronicle/assets/fonts/limelight.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Jost"; src:url("/chronicle/assets/fonts/jost-var.woff2") format("woff2"); font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Jost"; src:url("/chronicle/assets/fonts/jost-var-ext.woff2") format("woff2"); font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Jost"; src:url("/chronicle/assets/fonts/jost-var-italic.woff2") format("woff2"); font-weight:300 800; font-style:italic; font-display:swap; }
@font-face{ font-family:"Big Shoulders Display"; src:url("/chronicle/assets/fonts/big-shoulders.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face{ font-family:"Courier Prime"; src:url("/chronicle/assets/fonts/courier-prime-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Courier Prime"; src:url("/chronicle/assets/fonts/courier-prime-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root{
  --display:"Limelight", "Didot", Georgia, serif;
  --sans:"Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --carbon-face:"Courier Prime", "Courier New", monospace;
  --figures:"Big Shoulders Display", "Jost", system-ui, sans-serif;   /* timetable numerals */

  /* the poster */
  --field:#1c3587;            /* ultramarine: the page's own ground */
  --field-deep:#122461;
  --field-rgb:28,53,135;
  --stock:#f5f3ee;            /* aluminium-white coupon stock */
  --stock-2:#ebe7de;
  --rule:#cfc8b8;
  --ink:#141c44;              /* navy printing ink */
  --ink-2:#4a5070;
  --carbon:#4a3a92;           /* carbon-copy purple: every filled-in figure */
  --route:#e0412a;            /* route vermilion: answers, actions, the stamp */
  --route-rgb:224,65,42;
  --route-soft:rgba(224,65,42,.45);
  --route-casing:#fff6e6;
  --brass:#b8862b;            /* WHEN */
  --where:#2c55b0;            /* WHERE */
  --on-field:#f7f4ec;
  --on-field-2:rgba(247,244,236,.78);
  --dock:rgba(15,27,74,.9);
  --dock-line:rgba(255,255,255,.1);
  --stub:#141c44;
  --shadow:0 18px 40px -12px rgba(8,16,48,.55), 0 3px 8px rgba(8,16,48,.25);

  /* the map (read by app.js basemap()) */
  --map-sea:#2b52aa;
  --map-land:#e9cf95;
  --map-relief:.42;
  --map-relief-tone:-.35;
  --map-relief-max:1;
  --map-ice:#f5f2ea;
  --map-wood:#a4b57b;
  --map-urban:#dcb877;
  --map-river:#5f84cf;
  --map-road:#c49d5d;
  --map-border:#8b2e1f;
  --map-road-major:#b1432a;
  --map-road-case:rgba(255,248,230,.85);
  --map-rail:#3a2c24;
  --map-grat:rgba(255,255,255,.24);
  --map-halo:#e9cf95;
  --map-label:#2a1b0c;
  --map-label-soft:#5a4127;
  --map-label-water:#dbe5ff;

  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[data-theme="night"]{
  --field:#0a1440;
  --field-deep:#060d2c;
  --field-rgb:10,20,64;
  --stock:#e4dece;
  --stock-2:#d8d1bf;
  --rule:#b9b09c;
  --ink:#121936;
  --ink-2:#464b66;
  --carbon:#46378a;
  --route:#ff5a3d;
  --route-rgb:255,90,61;
  --route-soft:rgba(255,90,61,.45);
  --route-casing:#0a1440;
  --where:#2a4fa3;
  --dock:rgba(6,12,40,.9);
  --stub:#0a1440;
  --shadow:0 18px 40px -12px rgba(0,0,0,.7), 0 3px 8px rgba(0,0,0,.4);

  --map-sea:#0f1e4e;
  --map-land:#39436f;
  --map-relief:.5;
  --map-relief-tone:-.85;
  --map-relief-max:.5;
  --map-ice:#5a648e;
  --map-wood:#3f5a54;
  --map-urban:#4d5684;
  --map-river:#2c4a93;
  --map-road:#5f6997;
  --map-border:#f1b39c;
  --map-road-major:#f0a07a;
  --map-road-case:rgba(10,20,60,.7);
  --map-rail:#c9c1ae;
  --map-grat:rgba(255,255,255,.13);
  --map-halo:#2c355f;
  --map-label:#f3ecdc;
  --map-label-soft:#cfc6b0;
  --map-label-water:#9fb3ea;
  color-scheme:dark;
}

/* ---------- ground ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden; background:var(--field); color:var(--ink);
  font:400 16px/1.45 var(--sans); -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
::selection{ background:var(--route); color:#fff; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
svg .fill{ fill:currentColor; stroke:none; }
[hidden]{ display:none !important; }
.num,.carbon{ font-variant-numeric:tabular-nums; }

/* space around the globe: the page's own field, a soft atmosphere glow behind
   the sphere, and — at night — stars (canvases painted by paintSky) */
#sky{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 52%, rgba(255,255,255,.16) 0, rgba(255,255,255,.05) 38%, rgba(0,0,0,0) 62%), var(--field-deep); }
:root[data-theme="night"] #sky{ background:radial-gradient(circle at 50% 52%, rgba(120,150,255,.14) 0, rgba(120,150,255,.04) 36%, rgba(0,0,0,0) 60%), radial-gradient(ellipse at 20% 10%, #0d1a52 0, #040a24 70%); }
#sky canvas{ position:absolute; inset:0; width:100%; height:100%; }
@media (prefers-reduced-motion:no-preference){
  #sky .twinkle{ animation:twinkle 3.8s ease-in-out infinite alternate; }
}
@keyframes twinkle{ 0%{ opacity:.25 } 45%{ opacity:1 } 70%{ opacity:.55 } 100%{ opacity:.95 } }
#map{ position:fixed; inset:0; z-index:0; background:transparent; }
.mapfail{ position:fixed; inset:auto 16px 50% 16px; z-index:4; text-align:center; color:var(--on-field); font-weight:500; }
.scrim{ position:fixed; inset:0; z-index:1; pointer-events:none; transition:opacity .6s var(--ease);
  background:linear-gradient(180deg, rgba(var(--field-rgb),.78) 0, rgba(var(--field-rgb),0) 110px); }
body.on-start .scrim{
  background:
    linear-gradient(180deg, rgba(var(--field-rgb),.96) 0%, rgba(var(--field-rgb),.72) 26%, rgba(var(--field-rgb),0) 58%),
    linear-gradient(0deg, rgba(var(--field-rgb),.55) 0%, rgba(var(--field-rgb),0) 30%);
}
body[data-screen="end"] .scrim{ background:linear-gradient(180deg, rgba(var(--field-rgb),.7) 0, rgba(var(--field-rgb),0) 110px); }

/* MapLibre chrome, re-dressed */
.maplibregl-ctrl-top-right{ top:64px; }
body.on-start .maplibregl-ctrl-top-right{ display:none; }
.maplibregl-ctrl-group{ background:var(--stock); border-radius:10px; box-shadow:var(--shadow); }
.maplibregl-ctrl-group button{ width:36px; height:36px; }
.maplibregl-ctrl-attrib{ font:400 11px var(--sans); }
.maplibregl-ctrl-bottom-right{ z-index:2; }
body[data-screen="round"] .maplibregl-ctrl-bottom-right,
body[data-screen="end"] .maplibregl-ctrl-bottom-right{ bottom:auto; top:112px; }
body[data-screen="end"] .maplibregl-ctrl-top-right, body[data-screen="end"] .maplibregl-ctrl-bottom-right{ right:486px; }
.maplibregl-ctrl-attrib.maplibregl-compact{ background:rgba(245,243,238,.85); }

main{ position:fixed; inset:0; z-index:3; pointer-events:none; }
.screen{ display:none; position:absolute; inset:0; }
.screen.on{ display:block; }
.screen.on > *{ pointer-events:auto; }
.screen .hero{ pointer-events:none; }

/* ---------- the bar ---------- */
#bar{
  position:fixed; z-index:6; top:0; left:0; right:0; height:60px;
  padding:env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--on-field);
}
.brandmini{ justify-self:start; display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:6px 4px; color:var(--on-field); }
.brandmini span{ font:400 21px/1 var(--display); letter-spacing:.01em; }
.brandmini em{ font-style:normal; color:var(--route); }
body.on-start .brandmini{ visibility:hidden; }
.mark .m1{ fill:var(--route); stroke:none; } .mark .m2{ fill:var(--stock); stroke:none; } .mark .m3{ fill:var(--route); stroke:none; }
.mark .m4{ stroke:var(--on-field); stroke-width:2.2; stroke-dasharray:3.2 3; }
.tools{ grid-column:3; justify-self:end; display:flex; gap:6px; }
.iconbtn{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(var(--field-rgb),.5); color:var(--on-field); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .2s; }
.iconbtn:hover{ background:rgba(var(--field-rgb),.85); }
.iconbtn svg{ width:20px; height:20px; }

.stubs{ grid-column:2; list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.stubs li{
  position:relative; min-width:40px; height:28px; padding:0 8px; display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:5px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:var(--on-field-2);
  font:800 15px/1 var(--figures); letter-spacing:.02em; transition:background .3s, color .3s, transform .4s var(--ease);
}
.stubs li .n{ opacity:.8; }
.stubs li.now{ background:var(--stock); color:var(--ink); border-color:var(--stock); transform:translateY(2px); }
.stubs li.done{ background:rgba(var(--route-rgb),.92); border-color:transparent; color:#fff; }
.stubs li.done .n{ display:none; }
.stubs li.done::after{ /* the punch */
  content:""; position:absolute; right:-4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--field); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:9px; white-space:nowrap;
  padding:14px 20px; font:600 15px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, filter .2s;
}
.btn svg{ width:18px; height:18px; stroke-width:2; transition:transform .3s var(--ease); }
.btn.primary{ background:var(--route); color:#fff; box-shadow:0 8px 18px -6px rgba(var(--route-rgb),.7), inset 0 -2px 0 rgba(0,0,0,.14); }
.btn.primary:hover:not(:disabled){ transform:translateY(-1px); filter:brightness(1.05); }
.btn.primary:hover:not(:disabled) svg{ transform:translateX(3px); }
.btn.primary:active:not(:disabled){ transform:translateY(1px); box-shadow:0 3px 8px -4px rgba(var(--route-rgb),.7); }
.btn:disabled{ cursor:not-allowed; background:rgba(var(--route-rgb),.28); color:rgba(255,255,255,.75); box-shadow:none; }
.btn.big{ width:100%; padding:18px 22px; font-size:16px; }
.btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--rule); }
.btn.ghost:hover{ border-color:var(--ink); }

/* ---------- START ---------- */
.hero{ position:absolute; left:clamp(20px,5vw,76px); top:clamp(78px,13vh,140px); max-width:min(760px, 60vw); color:var(--on-field); }
.wordmark{ margin:0; font:400 clamp(54px,8.4vw,96px)/.9 var(--display); letter-spacing:-.005em;
  text-shadow:0 3px 18px rgba(var(--field-rgb),.45); }
.wordmark span{ display:inline-block; }
.wordmark .amp{ color:var(--route); text-shadow:none; }
.tagline{ margin:22px 0 0; font:500 clamp(17px,1.6vw,21px)/1.35 var(--sans); color:var(--on-field-2); letter-spacing:.01em; max-width:30ch; }
@media (prefers-reduced-motion:no-preference){
  .wordmark span{ animation:rise .9s var(--ease) both; }
  .wordmark .amp{ animation-delay:.14s; }
  .tagline{ animation:rise .9s .35s var(--ease) both; }
  .ticket{ animation:rise 1s .25s var(--ease) both; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }

.ticket{
  position:absolute; right:clamp(16px,4vw,60px); bottom:clamp(16px,6vh,64px); width:min(410px, calc(100vw - 32px));
  background:var(--stock) var(--grain); border-radius:12px; padding:22px 22px 18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.ticket-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px;
  border-bottom:2px dotted var(--rule); }
.ticket-head .no{ font:800 38px/1 var(--figures); letter-spacing:.01em; color:var(--ink); }
.ticket-head .date{ font:400 13px/1.3 var(--carbon-face); color:var(--ink-2); text-align:right; }
.ticket-stubs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.ticket-stubs li{ height:46px; border-radius:6px; border:1.5px dashed var(--rule); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font:700 13px/1 var(--carbon-face); color:var(--ink-2); position:relative; }
.ticket-stubs li b{ font:800 20px/1 var(--figures); color:#fff; margin-top:3px; }
.ticket-stubs li.done{ background:var(--route); border:0; color:rgba(255,255,255,.8); }
.meta{ margin:0; font:500 14px/1.4 var(--sans); color:var(--ink-2); text-align:center; }
.meta b{ font:700 14px var(--carbon-face); color:var(--ink); }
.ribbon{ margin:-22px -22px 0; padding:14px 22px 16px; border-radius:12px 12px 0 0; background:var(--ink); color:var(--stock);
  display:grid; gap:10px; }
.ribbon p{ margin:0; font-weight:500; }
.ribbon b{ font:800 22px var(--figures); color:#ffd6c9; }
.ribbon .btn.ghost{ color:var(--stock); border-color:rgba(255,255,255,.35); justify-self:start; padding:10px 14px; font-size:13px; }
.howto{ border-top:1px solid var(--rule); padding-top:10px; }
.howto summary{ cursor:pointer; list-style:none; font:600 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; gap:8px; padding:4px 0; }
.howto summary::-webkit-details-marker{ display:none; }
.howto summary::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 1.8px 1.8px 0; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); }
.howto[open] summary::after{ transform:rotate(225deg) translate(-2px,0); }
.howto ol{ list-style:none; margin:12px 0 2px; padding:0; display:grid; gap:12px; }
.howto li{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-size:15px; line-height:1.4; color:var(--ink); }
.howto li svg{ width:26px; height:26px; color:var(--route); }
.howto li b{ font-weight:600; }

/* ---------- ROUND: the coupon ---------- */
.coupon{
  position:absolute; top:74px; left:20px; width:400px; max-height:calc(100dvh - 94px);
  filter:drop-shadow(0 16px 22px rgba(8,16,48,.4)) drop-shadow(0 2px 3px rgba(8,16,48,.25));
  transition:transform .6s var(--ease), opacity .45s var(--ease), filter .6s;
}
.coupon.enter{ transform:translate(-24px,-6px) rotate(-1.5deg); opacity:0; transition:none; }
.paper{
  display:grid; grid-template-columns:62px 1fr; max-height:inherit; overflow:auto; overscroll-behavior:contain;
  background:var(--stock) var(--grain); border-radius:10px;
  /* the two punched notches at either end of the perforation */
  -webkit-mask:radial-gradient(circle at 62px 0, transparent 9px, #000 9.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 62px 100%, transparent 9px, #000 9.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 62px 0, transparent 9px, #000 9.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 62px 100%, transparent 9px, #000 9.5px) bottom/100% 51% no-repeat;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.stub{ background:var(--stub); color:var(--stock); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:20px; gap:4px;
  position:relative; }
.stub b{ font:800 44px/1 var(--figures); }
.stub span{ font:700 11px/1 var(--carbon-face); letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.stub::after{ /* the perforation */
  content:""; position:absolute; right:-3px; top:14px; bottom:14px; width:6px;
  background:radial-gradient(circle, var(--stock) 1.6px, transparent 2px) 0 0/6px 9px repeat-y; }
.body{ padding:20px 20px 18px 22px; min-width:0; }
.head{ margin:0; font:500 clamp(19px,1.7vw,23px)/1.28 var(--sans); color:var(--ink); text-wrap:balance; letter-spacing:-.005em; }
.fields{ display:grid; grid-template-columns:1fr 1.25fr; gap:10px; margin-top:16px; }
.field{ border-top:1.5px solid var(--ink); padding-top:7px; display:grid; gap:4px; min-width:0; }
.lab{ display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.lab svg{ width:14px; height:14px; }
.field .val{ font:700 17px/1.2 var(--carbon-face); color:var(--rule); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.field.set .val{ color:var(--carbon); }
.field.set .val{ animation:strike .35s var(--ease); }
@keyframes strike{ from{ transform:translateY(-3px); opacity:.2; filter:blur(1.5px); } to{ transform:none; opacity:1; filter:none; } }
.field:first-child .lab svg{ color:var(--brass); } .field:last-child .lab svg{ color:var(--where); }

/* the answer side */
.reveal{ margin-top:16px; border-top:2px dotted var(--rule); padding-top:14px; animation:rise .6s var(--ease) both; }
.scores{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.sc{ display:grid; gap:3px; align-content:start; }
.sc b{ font:800 42px/1 var(--figures); color:var(--ink); font-variant-numeric:tabular-nums; }
.sc.when b{ color:var(--brass); } .sc.where b{ color:var(--where); }
.sc.tot{ border-left:1px solid var(--rule); padding-left:12px; } .sc.tot b{ color:var(--route); }
.sc .off{ font:500 12.5px/1.25 var(--sans); color:var(--ink-2); }
.truth{ margin:14px 0 0; display:grid; gap:2px; font:600 15px/1.35 var(--sans); color:var(--ink); }
.truth span:last-child{ font-weight:500; color:var(--ink-2); }
.note{ margin:10px 0 0; font:400 15px/1.5 var(--sans); color:var(--ink); max-width:65ch; }

.truthrow{ display:grid; grid-template-columns:1fr 112px; align-items:center; gap:8px; margin-top:10px; }
.truthrow .truth{ margin:0; }
.stamp{ width:112px; height:112px; color:var(--route); pointer-events:none; margin:-8px -6px -10px 0;
  transform:rotate(var(--tilt,-6deg)); mix-blend-mode:multiply; opacity:.95; }
:root[data-theme="night"] .stamp{ mix-blend-mode:normal; }
.stamp svg{ width:100%; height:100%; }
.stamp .o{ stroke-width:3; } .stamp .o2{ stroke-width:1.2; }
.stamp line{ stroke-width:1.4; }
.stamp text{ fill:currentColor; stroke:none; }
.stamp .rim{ font:700 12.5px var(--sans); letter-spacing:.16em; }
.stamp .d{ font:700 15.5px var(--carbon-face); letter-spacing:.02em; }
.stamp .p{ font:400 13px var(--display); letter-spacing:.12em; }
@media (prefers-reduced-motion:no-preference){
  .coupon.stamped .stamp{ animation:thump .55s cubic-bezier(.2,1.4,.4,1) both; }
  .coupon.stamped .paper{ animation:jolt .5s .08s var(--ease); }
}
@keyframes thump{ 0%{ opacity:0; transform:rotate(calc(var(--tilt,-6deg) - 8deg)) scale(1.9); filter:blur(3px); }
  60%{ opacity:.95; transform:rotate(var(--tilt,-6deg)) scale(.94); filter:none; } 100%{ opacity:.92; transform:rotate(var(--tilt,-6deg)) scale(1); } }
@keyframes jolt{ 0%{ transform:none; } 30%{ transform:translateY(3px) scale(.995); } 100%{ transform:none; } }

/* ---------- ROUND: the timetable dock ---------- */
.dock{
  position:absolute; left:436px; right:20px; bottom:20px;
  background:var(--dock); color:var(--on-field); border:1px solid var(--dock-line); border-radius:14px;
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:var(--shadow); padding:34px 24px 14px;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"track track" "year act"; align-items:center; gap:4px 20px;
}
.yearbox{ grid-area:year; display:flex; align-items:center; gap:4px; }
.nudge{ width:40px; height:40px; border-radius:8px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  font:700 12px/1 var(--carbon-face); color:var(--on-field-2); transition:background .2s, color .2s; touch-action:manipulation; user-select:none; }
.nudge:hover{ background:rgba(255,255,255,.14); color:#fff; }
.yearout{ position:relative; min-width:132px; height:56px; }
.yshow{ width:100%; height:100%; padding:0 8px; border:0; background:none; display:flex; align-items:baseline; justify-content:center; gap:6px; cursor:text; }
.yn{ font:800 50px/56px var(--figures); letter-spacing:.01em; color:#fff; font-variant-numeric:tabular-nums; }
.yearout.unset .yn{ opacity:.4; letter-spacing:.04em; }
.ye{ font:600 14px/1 var(--sans); letter-spacing:.12em; color:var(--on-field-2); }
.ytype{ position:absolute; inset:4px 0; width:100%; border:1.5px solid var(--brass); border-radius:8px; background:var(--stock); color:var(--ink);
  font:700 22px var(--carbon-face); text-align:center; opacity:0; pointer-events:none; }
.yearout.typing .ytype{ opacity:1; pointer-events:auto; }
.yearout.typing .yn, .yearout.typing .ye{ visibility:hidden; }
.yearout::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:rgba(255,255,255,.25); }

.track{ grid-area:track; position:relative; height:40px; margin-bottom:24px; cursor:pointer; touch-action:none; user-select:none; border-radius:6px; }
.track:focus-visible{ outline-offset:6px; }
.bands{ position:absolute; inset:0; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.era{ position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; overflow:hidden; border-right:1px solid rgba(0,0,0,.25); }
.era.tight i{ display:none; }
.era i{ font:600 10px/1 var(--sans); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap; padding:0 4px; }
.e0{ background:#57466f; } .e1{ background:#7a5a36; } .e2{ background:#3f6660; } .e3{ background:#8a4a3a; }
.e4{ background:#4e5f86; } .e5{ background:#2f6f8c; } .e6{ background:#6a7a3b; }
:root[data-theme="night"] .era{ filter:saturate(.8) brightness(.85); }
.ticks{ position:absolute; left:0; right:0; top:44px; height:14px; }
.tick{ position:absolute; top:0; transform:translateX(-50%); }
.tick::before{ content:""; position:absolute; left:50%; top:-8px; width:1px; height:5px; background:rgba(255,255,255,.4); }
.tick b{ font:400 11px/1 var(--carbon-face); color:var(--on-field-2); white-space:nowrap; }
.tick:first-child{ transform:none; } .tick:last-child{ transform:translateX(-100%); }
.handle{ position:absolute; top:-12px; bottom:-4px; width:0; transition:left .12s ease-out; pointer-events:none; }
.track.dragging .handle{ transition:none; }
.handle::before{ content:""; position:absolute; left:-1.5px; top:6px; bottom:0; width:3px; border-radius:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.handle i{ position:absolute; left:-8px; top:-2px; width:16px; height:16px; background:#fff; transform:rotate(45deg); border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.4); }
.track.unset .handle{ opacity:0; }
.track.unset .bands{ animation:beckon 2.6s ease-in-out 1s 2; }
@keyframes beckon{ 0%,100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } 50%{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); } }
.gap{ position:absolute; top:0; height:40px; background:repeating-linear-gradient(-45deg, rgba(var(--route-rgb),.75) 0 2px, rgba(var(--route-rgb),.2) 2px 6px);
  border-radius:3px; transform-origin:left; animation:grow .7s var(--ease) both; }
@keyframes grow{ from{ transform:scaleX(0); opacity:0; } to{ transform:none; opacity:1; } }
.truthmark{ position:absolute; top:-26px; bottom:-4px; width:0; animation:drop .6s cubic-bezier(.2,1.3,.4,1) both; pointer-events:none; }
.truthmark i{ position:absolute; left:-1.5px; top:20px; bottom:0; width:3px; border-radius:2px; background:var(--route); box-shadow:0 0 0 1px rgba(255,255,255,.5); }
.truthmark b{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); padding:3px 7px; border-radius:4px; background:var(--route); color:#fff;
  font:800 15px/1 var(--figures); letter-spacing:.03em; white-space:nowrap; }
.truthmark b::after{ content:""; position:absolute; left:50%; bottom:-4px; margin-left:-4px; border:4px solid transparent; border-bottom:0; border-top-color:var(--route); }
@keyframes drop{ from{ transform:translateY(-14px); opacity:0; } to{ transform:none; opacity:1; } }
.track.revealed{ cursor:default; }

.act{ grid-area:act; display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.act .btn{ min-width:170px; padding:16px 22px; }
.hint{ margin:0; font:500 13px/1.2 var(--sans); color:var(--on-field-2); white-space:nowrap; }
.dock.revealed .hint{ visibility:hidden; }
.dock.revealed .nudge{ display:none; }
.dock.revealed .yearout{ pointer-events:none; }

/* ---------- the clock ---------- */
.timer{ position:absolute; top:7px; right:18px; display:inline-flex; align-items:center; gap:5px; color:var(--on-field-2);
  font:800 17px/1 var(--figures); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.timer svg{ width:15px; height:15px; }
.timer.low{ color:#ff7a62; }
.tbar{ position:absolute; left:14px; right:14px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--brass);
  transform-origin:left center; transition:transform .2s linear, background .3s; }
.tbar.low{ background:var(--route); }
@media (prefers-reduced-motion:no-preference){ .timer.low b{ animation:tick 1s ease-in-out infinite; } }
@keyframes tick{ 0%,100%{ transform:none } 50%{ transform:scale(1.14) } }

/* ---------- names on: the one-way assist ---------- */
.namesbtn{ position:absolute; right:20px; top:150px; display:inline-flex; align-items:center; gap:8px; padding:9px 13px 9px 11px;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(var(--field-rgb),.72); color:var(--on-field);
  font:600 12.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.45); transition:background .2s, color .2s; }
.namesbtn svg{ width:16px; height:16px; }
.namesbtn:hover{ background:rgba(var(--field-rgb),.92); }
.namesbtn.on{ background:var(--brass); border-color:transparent; color:#fff; cursor:default; }
body[data-screen="round"] .dock.revealed ~ .namesbtn, .screen .dock.revealed + .namesbtn{ display:none; }
.dlg{ border:0; padding:0; border-radius:14px; max-width:min(420px, calc(100vw - 32px)); background:var(--stock) var(--grain); color:var(--ink); box-shadow:var(--shadow); }
.dlg::backdrop{ background:rgba(6,12,40,.55); backdrop-filter:blur(2px); }
.dlg form{ padding:24px 24px 20px; display:grid; gap:10px; }
.dlg h2{ margin:0; font:400 30px/1.05 var(--display); color:var(--ink); }
.dlg p{ margin:0; font-size:16px; line-height:1.5; }
.dlg .fine{ font-size:14px; color:var(--ink-2); }
.dlg-acts{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.dlg-acts .btn{ padding:12px 16px; font-size:13px; }
.duel .assist{ margin:6px 0 0; font-size:13px; color:var(--ink-2); }
.log sup{ font-size:.75em; color:var(--brass); margin-left:1px; }

/* ---------- markers on the map ---------- */
.pin{ width:30px; height:42px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); cursor:grab; }
.pin .pb{ fill:var(--stock); stroke:var(--ink); stroke-width:1.6; }
.pin .pd{ fill:var(--ink); stroke:none; }
.pin svg{ display:block; width:100%; height:100%; overflow:visible; }
.pin.small{ width:22px; height:31px; }
.pin.drop svg{ animation:pindrop .5s cubic-bezier(.3,1.5,.5,1) both; transform-origin:50% 100%; }
@keyframes pindrop{ 0%{ transform:translateY(-26px) scale(.9); opacity:0; } 70%{ transform:translateY(0) scale(1.06,.92); opacity:1; } 100%{ transform:none; } }
.roundel{ width:34px; height:34px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.roundel .r1{ fill:var(--route); stroke:#fff; stroke-width:1.5; } .roundel .r2{ fill:#fff; stroke:none; } .roundel .r3{ fill:var(--route); stroke:none; }
.roundel text{ fill:var(--route); stroke:none; font:800 15px var(--figures); }
.roundel.numbered .r3{ display:none; }
.roundel .pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--route); opacity:0; }
.roundel.land svg{ animation:land .6s cubic-bezier(.2,1.5,.4,1) both; }
.roundel.land .pulse{ animation:pulse 1.8s .15s ease-out 3; }
.roundel.idle{ width:22px; height:22px; }
.roundel.idle svg{ width:22px; height:22px; animation:land .6s cubic-bezier(.2,1.5,.4,1) both, fadeaway .8s 3s forwards; }
.roundel.idle .pulse{ animation:pulse 1.8s ease-out 2; }
@keyframes land{ from{ transform:scale(0); } to{ transform:none; } }
@keyframes pulse{ 0%{ opacity:.8; transform:scale(1); } 100%{ opacity:0; transform:scale(3.2); } }
@keyframes fadeaway{ to{ opacity:0; transform:scale(.6); } }
.plane{ width:26px; height:26px; color:#fff; filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)); transition:opacity .25s; }
.plane svg{ width:26px; height:26px; } .plane .fill{ stroke:var(--route); stroke-width:1.2; paint-order:stroke; }
.plane.gone{ opacity:0; }

/* ---------- END: the journey sheet ---------- */
.sheet{
  position:absolute; top:72px; right:20px; bottom:20px; width:450px; overflow:auto; overscroll-behavior:contain;
  background:var(--stock) var(--grain); border-radius:14px; box-shadow:var(--shadow); padding:24px 26px 22px;
  display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
@media (prefers-reduced-motion:no-preference){ .screen.on .sheet{ animation:slidein .8s var(--ease) both; } }
@keyframes slidein{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:2px dotted var(--rule); padding-bottom:12px; }
.sheet-head h2{ margin:0; font:800 30px/1 var(--figures); letter-spacing:.01em; color:var(--ink); }
.best{ margin:0; font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--brass); padding:6px 9px; border-radius:4px; }
.total{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.total b{ font:800 clamp(84px,10vw,112px)/.85 var(--figures); color:var(--route); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.total span{ font:500 18px var(--sans); color:var(--ink-2); }
.rank{ margin:-4px 0 0; font:italic 500 22px/1.2 var(--sans); color:var(--ink); }
.split{ display:grid; gap:8px; }
.splitbar{ display:grid; grid-template-columns:90px 44px 1fr; align-items:center; gap:10px; }
.splitbar b{ font:700 16px var(--carbon-face); color:var(--carbon); text-align:right; }
.splitbar i{ height:10px; border-radius:5px; background:var(--stock-2); position:relative; overflow:hidden; }
.splitbar i::after{ content:""; position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--v,0)); border-radius:5px; transition:transform 1.2s .3s var(--ease); }
.splitbar.when i::after{ background:var(--brass); } .splitbar.where i::after{ background:var(--where); }
.splitbar.when .lab svg{ color:var(--brass); } .splitbar.where .lab svg{ color:var(--where); }
.log{ width:100%; border-collapse:collapse; font-size:13px; margin-top:4px; }
.log caption{ text-align:left; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); padding-bottom:8px; }
.log th,.log td{ padding:8px 4px; border-top:1px solid var(--rule); vertical-align:top; text-align:left; }
.log thead th{ font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); border-top:1.5px solid var(--ink); }
.log tbody th{ font:800 18px/1 var(--figures); color:var(--route); width:22px; }
.log .ev b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; line-height:1.3; color:var(--ink); }
.log .ev span{ display:block; margin-top:3px; font-size:12px; color:var(--ink-2); line-height:1.3; }
.log .num{ text-align:right; white-space:nowrap; font-family:var(--carbon-face); }
.log .num .you{ display:block; font-size:11.5px; color:var(--ink-2); }
.log .num i{ font-style:normal; font-weight:700; color:var(--carbon); }
.log .tot{ font:800 20px var(--figures); color:var(--ink); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); margin:4px 0 0; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--rule); }
.stats div{ padding:10px 4px; text-align:center; }
.stats div + div{ border-left:1px solid var(--rule); }
.stats dt{ font:600 10.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.stats dd{ margin:6px 0 0; font:800 28px/1 var(--figures); color:var(--ink); }
.sheet .meta{ text-align:left; }
.sheet .meta.next{ text-align:center; }
.sheet-foot{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:2px; }
.sheet-foot .btn{ padding:11px 14px; font-size:13px; }

.duel{ border:1.5px solid var(--ink); border-radius:10px; padding:12px 14px; }
.duel h3{ margin:0 0 8px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.duel ol{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.duel li{ display:grid; grid-template-columns:18px 1fr 1fr; gap:6px; align-items:center; }
.duel .n{ font:800 16px var(--figures); color:var(--ink-2); }
.duel .bar{ position:relative; height:20px; border-radius:4px; background:var(--stock-2); overflow:hidden; }
.duel .bar::before{ content:""; position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--v)); }
.duel .bar.you::before{ background:var(--route); } .duel .bar.them::before{ background:var(--ink-2); }
.duel .bar b{ position:relative; font:700 12px/20px var(--carbon-face); color:#fff; padding-left:6px; mix-blend-mode:normal; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.duel .verdict{ margin:10px 0 0; font:800 22px var(--figures); color:var(--ink); display:flex; justify-content:space-between; }
.duel .verdict span{ font:700 14px var(--carbon-face); color:var(--ink-2); align-self:center; }

.toast{ position:fixed; z-index:9; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); padding:12px 18px; border-radius:10px;
  background:var(--ink); color:var(--stock); font:500 15px var(--sans); box-shadow:var(--shadow); animation:rise .35s var(--ease) both; transition:opacity .3s; }
.toast.out{ opacity:0; }

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .coupon{ width:360px; }
  .dock{ left:396px; }
  .act .btn{ min-width:0; }
}
@media (max-width:900px){
  #bar{ height:54px; }
  .brandmini span{ display:none; }
  .coupon{ top:58px; left:10px; right:10px; width:auto; max-height:44dvh; }
  .paper{ grid-template-columns:48px 1fr;
    -webkit-mask:radial-gradient(circle at 48px 0, transparent 7px, #000 7.5px) top/100% 51% no-repeat, radial-gradient(circle at 48px 100%, transparent 7px, #000 7.5px) bottom/100% 51% no-repeat;
            mask:radial-gradient(circle at 48px 0, transparent 7px, #000 7.5px) top/100% 51% no-repeat, radial-gradient(circle at 48px 100%, transparent 7px, #000 7.5px) bottom/100% 51% no-repeat; }
  .stub{ padding-top:14px; } .stub b{ font-size:28px; } .stub span{ font-size:9.5px; }
  .body{ padding:12px 14px 12px 16px; }
  .head{ font-size:17.5px; }
  .fields{ margin-top:10px; gap:8px; }
  .field .val{ font-size:15px; }
  .reveal{ margin-top:10px; padding-top:10px; }
  .sc b{ font-size:28px; }
  .note{ font-size:14px; }
  .truthrow{ grid-template-columns:1fr 92px; } .stamp{ width:92px; height:92px; }
  .dock{ left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); padding:30px 14px 12px; gap:6px 12px;
    grid-template-columns:1fr auto; grid-template-areas:"track track" "year act"; }
  .track{ margin-bottom:22px; }
  .yn{ font-size:36px; line-height:48px; } .yearout{ min-width:96px; height:48px; }
  .nudge{ width:36px; height:40px; }
  .act{ align-self:center; }
  .act .hint{ display:none; }
  .act .btn{ padding:15px 18px; }
  .era.tight i{ display:none; }
.era i{ font-size:8.5px; letter-spacing:.08em; }
  .sheet{ top:auto; left:0; right:0; bottom:0; width:auto; height:62dvh; border-radius:18px 18px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); }
  @media (prefers-reduced-motion:no-preference){ .screen.on .sheet{ animation:slideup .8s var(--ease) both; } }
  .hero{ top:74px; max-width:none; right:20px; }
  .wordmark{ font-size:clamp(46px,14.5vw,76px); }
  .tagline{ font-size:17px; margin-top:14px; }
  .ticket{ left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom)); padding:18px 16px 14px; gap:12px; }
  .ribbon{ margin:-18px -16px 0; padding:12px 16px 14px; }
  .maplibregl-ctrl-top-right{ display:none; }
  body[data-screen="round"] .maplibregl-ctrl-bottom-right{ top:auto; bottom:190px; }
  .namesbtn{ top:auto; right:10px; bottom:calc(186px + env(safe-area-inset-bottom)); padding:8px 11px 8px 9px; font-size:11.5px; }
  body[data-screen="end"] .maplibregl-ctrl-bottom-right{ top:auto; right:0; bottom:calc(62dvh + 6px); }
}
@media (max-width:480px){
  .nudge[data-nudge="-10"], .nudge[data-nudge="10"]{ display:none; }
  .ticks .tick:nth-child(2), .ticks .tick:nth-child(8){ display:none; }
  .stubs{ gap:4px; } .stubs li{ min-width:32px; padding:0 5px; height:26px; }
  .log thead th:nth-child(3), .log thead th:nth-child(4){ font-size:9.5px; }
}
@keyframes slideup{ from{ transform:translateY(60px); opacity:0; } to{ transform:none; opacity:1; } }
@media (max-height:640px) and (max-width:900px){
  .howto:not([open]){ display:none; }
  .tagline{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- the about page: a printed timetable leaflet ---------- */
body.page{ overflow:auto; background:var(--field); color:var(--ink); }
body.page::before{ content:""; position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/100% 96px, linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/96px 100%; }
.page-bar{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px max(16px, env(safe-area-inset-left)); background:linear-gradient(180deg, var(--field) 60%, rgba(var(--field-rgb),0)); }
.page-bar .brandmini{ visibility:visible; text-decoration:none; }
.page-bar .btn{ text-decoration:none; padding:11px 16px; font-size:13px; }
.page-main{ position:relative; padding:16px 16px 72px; }
.leaf{ max-width:720px; margin:0 auto; background:var(--stock) var(--grain); border-radius:14px; box-shadow:var(--shadow); padding:clamp(24px,5vw,56px); }
.leaf h1{ margin:0; font:400 clamp(44px,7vw,72px)/.95 var(--display); color:var(--ink); }
.leaf h2{ margin:40px 0 10px; font:600 14px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--route);
  padding-top:14px; border-top:1.5px solid var(--ink); }
.leaf p{ font-size:17px; line-height:1.6; max-width:65ch; margin:0 0 12px; }
.leaf .lede{ font-size:20px; line-height:1.5; margin-top:20px; }
.leaf .small{ font-size:14px; color:var(--ink-2); }
.leaf a{ color:var(--where); text-underline-offset:3px; }
.rules{ margin:14px 0 0; display:grid; gap:14px; }
.rules div{ display:grid; grid-template-columns:90px 1fr; gap:14px; border-top:1px solid var(--rule); padding-top:12px; }
.rules dt{ font:800 24px/1 var(--figures); color:var(--brass); }
.rules div + div dt{ color:var(--brass); }
.rules div:first-child dt{ color:var(--where); }
.rules dd{ margin:0; font-size:16px; line-height:1.55; }
@media (max-width:560px){ .rules div{ grid-template-columns:1fr; gap:4px; } .page-bar .brandmini span{ display:none; } }