/* ============================================================
   THE MIDNIGHT MERIDIAN — luxury rail nocturne
   Designed & built by Claude Fable 5
   ============================================================ */

:root{
  --midnight:      #0c1b33;
  --midnight-deep: #060d1d;
  --midnight-2:    #10233f;
  --midnight-3:    #16304f;
  --burgundy:      #5e2233;
  --burgundy-deep: #431825;
  --burgundy-dark: #2e0f1a;
  --brass:         #c9a15a;
  --brass-bright:  #e8cd90;
  --brass-dim:     #8a6f3e;
  --moon:          #dfe8f4;
  --moon-dim:      #a9bcd6;
  --cream:         #efe6d0;
  --cream-dim:     #d9cdae;
  --ink-on-cream:  #431825;
  --window-w: min(1120px, 88vw);

  --font-display:'Forum', serif;
  --font-body:'Zilla Slab', serif;

  --ease-out: cubic-bezier(.19,1,.22,1);
  --maxw: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; color-scheme:dark; }
html, body{ overflow-x:clip; }

body{
  background:
    radial-gradient(90% 46% at 88% 10%, rgba(34,64,107,.42), transparent 64%),
    radial-gradient(72% 42% at 4% 94%, rgba(94,34,51,.34), transparent 66%),
    var(--midnight);
  color:var(--moon);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(201,161,90,.22);
}

::selection{ background:#8d394d; color:#fff7df; text-shadow:none; }

*{
  scrollbar-color:color-mix(in srgb, var(--brass) 58%, #0a1426) #071224;
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#071224; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--brass-bright), var(--brass-dim));
  border:3px solid #071224;
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--brass-bright); }

/* film grain over everything */
body::after{
  content:""; position:fixed; inset:-50%; z-index:80; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.05;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.08; text-wrap:balance; }
p,li{ text-wrap:pretty; }

a{ color:var(--brass); text-decoration-color:color-mix(in srgb, var(--brass) 40%, transparent); text-underline-offset:3px; }
a:hover{ color:var(--brass-bright); }

:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:fixed; left:1rem; top:.7rem; z-index:100;
  transform:translateY(-170%);
  min-height:44px; display:inline-flex; align-items:center;
  padding:.45rem .85rem;
  background:var(--brass-bright); color:#241503;
  border:1px solid #f8e7b7; border-radius:3px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .24s var(--ease-out);
}
.skip-link:focus-visible{ transform:translateY(0); outline:2px solid var(--moon); outline-offset:3px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- ornaments ---------- */
.rule{
  display:flex; align-items:center; gap:14px; justify-content:center;
  color:var(--brass);
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1; max-width:180px;
  background:linear-gradient(90deg, transparent, var(--brass));
}
.rule::after{ background:linear-gradient(90deg, var(--brass), transparent); }
.rule .dm{ font-size:.8rem; letter-spacing:.4em; text-indent:.4em; }

.eyebrow{
  font-family:var(--font-body); font-weight:500;
  font-size:.78rem; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--brass);
}

.section-head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.2rem); }
.section-head h2{
  font-size:clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  letter-spacing:.08em; text-transform:uppercase; color:var(--moon);
  margin:.55rem 0 .7rem;
}
.section-head p.lede{ max-width:56ch; margin:0 auto; color:var(--moon-dim); }

section{ position:relative; }
section[id]{ scroll-margin-top:64px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem, 4vw, 2.5rem); }

/* ---------- scroll reveals ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s } .rv.d2{ transition-delay:.16s } .rv.d3{ transition-delay:.24s } .rv.d4{ transition-delay:.32s }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:color-mix(in srgb, var(--midnight-deep) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
}
.site-header .bar{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem clamp(1rem,4vw,2.5rem); min-height:60px;
}
.brand{
  display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--moon);
  min-height:44px;
}
.brand svg{ width:34px; height:34px; flex:none; }
.brand .bn{
  font-family:var(--font-display); font-size:1.06rem; letter-spacing:.22em;
  text-transform:uppercase; white-space:nowrap;
}
.brand .bn small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.58rem; letter-spacing:.34em; color:var(--brass); }
.site-nav ul{ list-style:none; display:flex; gap:.25rem; }
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 .85rem;
  font-weight:400; font-size:.86rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--moon-dim); text-decoration:none; border-bottom:1px solid transparent;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--brass-bright); }
.menu-btn{ display:none; }

@media (max-width:760px){
  .brand .bn{ font-size:.9rem; letter-spacing:.16em; }
}
@media (max-width:1099px){
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    min-height:44px; min-width:44px; padding:0 .9rem;
    background:none; border:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
    color:var(--brass); font-family:var(--font-body); font-weight:500;
    font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; cursor:pointer;
    border-radius:2px;
  }
  .menu-icon{
    width:15px; height:10px; flex:none; position:relative;
    border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  }
  .menu-icon::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    border-top:1px solid currentColor; transform:translateY(-50%);
  }
  .menu-btn:hover,
  .menu-btn[aria-expanded="true"]{
    color:var(--brass-bright);
    background:color-mix(in srgb, var(--brass) 12%, transparent);
    border-color:color-mix(in srgb, var(--brass) 70%, transparent);
  }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:color-mix(in srgb, var(--midnight-deep) 96%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--brass) 30%, transparent);
    display:none;
  }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; padding:.4rem 0 .8rem; }
  .site-nav a{ width:100%; padding:0 1.4rem; min-height:48px; font-size:.95rem; }
}

/* ============================================================
   HERO — the overture
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; position:relative; overflow:clip;
  padding:110px clamp(1rem,4vw,2.5rem) 0;
  background:
    radial-gradient(58% 46% at 17% 72%, rgba(94,34,51,.23), transparent 68%),
    radial-gradient(120% 60% at 72% 8%, #22406b 0%, transparent 55%),
    linear-gradient(180deg, var(--midnight-deep) 0%, var(--midnight) 55%, #0a1730 100%);
}
.hero.has-generated-glass{
  background:#05070f;
}
.hero-media{
  position:absolute; inset:62px 0 0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,7,15,.36), rgba(3,7,15,.74) 62%, rgba(3,7,15,.92)),
    radial-gradient(62% 52% at 50% 42%, rgba(12,27,51,.08), rgba(3,7,15,.42) 74%),
    url("/assets/gen/meridian/window.jpg") center / cover no-repeat;
  filter:saturate(.9) contrast(1.06) brightness(.72);
  transform:scale(1.018);
  animation:glassWake 2s var(--ease-out) both;
}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,8,16,.78), rgba(4,8,16,.18) 24%, rgba(4,8,16,.16) 72%, rgba(4,8,16,.64)),
    radial-gradient(60% 38% at 52% 24%, transparent 0 42%, rgba(2,6,14,.34) 78%),
    linear-gradient(180deg, rgba(12,27,51,.42), transparent 34%, rgba(46,15,26,.36) 100%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 160px, rgba(223,232,244,.025) 160px 161px, transparent 161px 320px),
    radial-gradient(80% 12% at 50% 0%, rgba(223,232,244,.12), transparent 70%);
  mix-blend-mode:screen;
  opacity:.7;
}
.hero::before{
  content:""; position:absolute; inset:62px 0 0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(201,161,90,.14) 0 1px, transparent 1px calc(100% - 1px), rgba(201,161,90,.14) calc(100% - 1px)),
    radial-gradient(80% 52% at 50% 36%, transparent 54%, rgba(2,6,14,.22) 100%);
  opacity:.7;
  z-index:1;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(2,6,14,.28) 62%, rgba(2,6,14,.72));
  pointer-events:none;
  z-index:1;
}
.hero-stars{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:.58; mix-blend-mode:screen; }
.hero-moon{ position:absolute; top:9%; right:12%; width:clamp(70px,9vw,120px); pointer-events:none; }
.hero.has-generated-glass .hero-moon{ display:none; }

.hero-rail-map{
  position:absolute; z-index:2;
  left:clamp(1rem, 6vw, 5.5rem); bottom:clamp(92px, 15vh, 150px);
  width:min(320px, 32vw); text-align:left;
  color:var(--brass); opacity:.82;
  animation:riseIn 1.1s var(--ease-out) both 1.15s;
}
.hero-rail-map .map-line{
  position:relative; height:72px;
  border-left:1px solid color-mix(in srgb, var(--brass) 46%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brass) 46%, transparent);
}
.hero-rail-map .map-line::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42px;
  background:
    radial-gradient(circle at 32% 78%, var(--brass-bright) 0 4px, transparent 4.5px),
    radial-gradient(circle at 69% 38%, var(--brass-bright) 0 4px, transparent 4.5px),
    linear-gradient(150deg, transparent 0 22%, var(--burgundy) 22.3% 24.2%, transparent 24.5% 47%, var(--burgundy) 47.3% 49.2%, transparent 49.5%),
    linear-gradient(165deg, transparent 7%, color-mix(in srgb, var(--brass) 66%, transparent) 7.4% 8%, transparent 8.4% 100%);
}
.hero-rail-map span{
  position:absolute; left:var(--x); bottom:-1.6rem; transform:translateX(-50%);
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.hero-rail-map p{
  margin-top:2rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--moon-dim);
}

.hero-inner{ position:relative; z-index:2; max-width:900px; }
.hero .eyebrow{ animation:riseIn 1.1s var(--ease-out) both .15s; }
.hero h1{
  margin:1.1rem 0 1rem;
  font-size:clamp(2.6rem, 1.2rem + 8.4vw, 6.8rem);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--moon);
  text-shadow:0 0 60px rgba(60,110,190,.35);
}
.hero h1 .l1, .hero h1 .l2{ display:block; }
.hero h1 .l1{ font-size:.42em; letter-spacing:.5em; text-indent:.5em; color:var(--brass); animation:riseIn 1.1s var(--ease-out) both .3s; }
.hero h1 .l2{ animation:riseIn 1.2s var(--ease-out) both .45s; }
.hero .rule{ animation:fadeIn 1.4s var(--ease-out) both .8s; max-width:520px; margin:0 auto; }
.hero .sub{
  max-width:52ch; margin:1.3rem auto 0; color:var(--moon-dim);
  animation:riseIn 1.1s var(--ease-out) both .7s;
}
.dep-strip{
  display:flex; gap:clamp(.9rem,3vw,2.4rem); justify-content:center; flex-wrap:wrap;
  margin:2rem auto 0; padding:.9rem 1.4rem;
  border-top:1px solid color-mix(in srgb, var(--brass) 35%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brass) 35%, transparent);
  font-variant-numeric:tabular-nums;
  animation:riseIn 1.1s var(--ease-out) both .9s;
}
.dep-strip span{ font-size:.82rem; letter-spacing:.26em; text-transform:uppercase; color:var(--moon-dim); }
.dep-strip b{ font-weight:600; color:var(--brass-bright); letter-spacing:.1em; }
.hero-cta{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.2rem; margin-bottom:clamp(90px, 13vh, 150px);
  animation:riseIn 1.1s var(--ease-out) both 1.05s;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.65rem 1.9rem;
  font-family:var(--font-body); font-weight:500; font-size:.85rem;
  letter-spacing:.28em; text-indent:.28em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border-radius:2px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
}
.btn-brass{
  background:linear-gradient(160deg, var(--brass-bright), var(--brass) 55%, var(--brass-dim));
  color:#241503; border:none;
  box-shadow:0 6px 24px -8px rgba(201,161,90,.6);
}
.btn-brass:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(201,161,90,.7); color:#241503; }
.btn-ghost{
  background:transparent; color:var(--moon);
  border:1px solid color-mix(in srgb, var(--brass) 55%, transparent);
}
.btn-ghost:hover{ background:color-mix(in srgb, var(--brass) 12%, transparent); color:var(--brass-bright); }

.hero-viaduct{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  width:100%; height:auto; display:block; pointer-events:none;
  animation:fadeIn 2s var(--ease-out) both .5s;
}
.hero-scrollcue{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3;
  color:var(--brass); font-size:.7rem; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  animation:fadeIn 2s var(--ease-out) both 1.6s;
}
.hero-scrollcue::after{
  content:""; display:block; width:1px; height:34px; margin:.5rem auto 0;
  background:linear-gradient(180deg, var(--brass), transparent);
  animation:cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes glassWake{ from{ opacity:0; transform:scale(1.07); filter:saturate(.65) contrast(.9) brightness(.32) blur(8px); } to{ opacity:1; transform:scale(1.018); filter:saturate(.9) contrast(1.06) brightness(.72) blur(0); } }

.hero .train-windows rect{ animation:winFlicker 7s linear infinite; }
@keyframes winFlicker{ 0%,92%,100%{ opacity:1 } 94%{ opacity:.4 } 96%{ opacity:1 } 98%{ opacity:.55 } }

@media (max-width:520px){
  .hero{ align-items:stretch; }
  .hero-media{ background-position:58% center; filter:saturate(.88) contrast(1.08) brightness(.58); }
  .hero-rail-map{ display:none; }
  .hero h1 .l1{ letter-spacing:.28em; text-indent:.28em; }
  .hero .eyebrow{ font-size:.66rem; letter-spacing:.24em; text-indent:.24em; }
}
@media (min-width:1100px) and (min-height:760px){
  .hero-inner{ transform:translateY(-34px); }
  .hero-cta{ margin-bottom:clamp(128px, 16vh, 190px); }
}

/* ============================================================
   JOURNEY — the window (signature)
   ============================================================ */
.journey-intro{ padding:clamp(4rem,10vw,7rem) 0 clamp(3rem,7vw,5rem); text-align:center; }
.journey-title{
  font-size:clamp(2rem,1.3rem + 3.6vw,3.4rem);
  letter-spacing:.08em; text-transform:uppercase; margin:.6rem 0 .8rem;
}
.journey-lede{ max-width:52ch; margin:0 auto; color:var(--moon-dim); }
.journey-lede b{ color:var(--brass-bright); font-weight:500; }

.journey{
  position:relative;
  background:linear-gradient(180deg, var(--midnight), #081326 45%, #0a0d16);
  overflow:clip;
}
.journey::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(201,161,90,.055) 72px 73px, transparent 73px 144px),
    linear-gradient(180deg, transparent 0 22%, rgba(201,161,90,.08) 22.05% 22.12%, transparent 22.2% 100%);
  opacity:.52;
}
.journey-track{ height:720vh; position:relative; z-index:1; }
.journey-sticky{
  position:sticky; top:0; height:100svh; overflow:clip;
  background:
    radial-gradient(70% 44% at 50% 100%, rgba(94,34,51,.26), transparent 70%),
    linear-gradient(180deg, #05070f, #0a0d16);
}
.cabin-sway{ position:absolute; inset:0; transform:scale(1.035); }
@media (prefers-reduced-motion: no-preference){
  .cabin-sway{ animation:sway 7.5s ease-in-out infinite alternate; }
}
@keyframes sway{ from{ transform:scale(1.035) rotate(-.7deg) } to{ transform:scale(1.035) rotate(.7deg) } }

.cabin{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 90% at 50% 115%, #23101a 0%, #150a12 40%, #0a0710 75%),
    #0a0710;
}
/* soft lamp glow in the cabin corner */
.cabin::before{
  content:""; position:absolute; left:-6%; bottom:-8%; width:44%; height:52%;
  background:radial-gradient(closest-side, rgba(255,178,84,.16), transparent 70%);
  pointer-events:none;
}
.cabin::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(201,161,90,.1), transparent 12% 88%, rgba(201,161,90,.1)),
    radial-gradient(50% 14% at 50% 0%, rgba(223,232,244,.08), transparent 78%);
  mix-blend-mode:screen; opacity:.55;
}

.window-frame{
  position:absolute; left:50%; top:52%;
  width:var(--window-w); height:min(69svh, 680px);
  transform:translate(-50%,-50%);
  border-radius:26px 26px 18px 18px;
  padding:12px;
  background:
    linear-gradient(160deg, #3a2417, #1d1109 40%, #2b1a0e 70%, #140b06);
  box-shadow:
    0 0 0 2px rgba(201,161,90,.5),
    0 0 0 6px #120a05,
    0 30px 90px -20px rgba(0,0,0,.9),
    inset 0 2px 0 rgba(232,205,144,.35);
}
.window{
  position:relative; width:100%; height:100%; overflow:clip;
  border-radius:18px 18px 12px 12px;
  background:linear-gradient(180deg,
    #050b18 0%, #081226 34%, #12274a 62%, #1b3763 78%, #10223f 88%, #0a1526 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.window svg{ display:block; }

.sky-stars{ position:absolute; inset:0; width:100%; height:100%; }
.tw{ opacity:var(--tmax,.8); }
@media (prefers-reduced-motion: no-preference){
  .tw{ animation:twinkle var(--td,4s) ease-in-out var(--tdel,0s) infinite alternate; }
}
@keyframes twinkle{ from{ opacity:var(--tmin,.15) } to{ opacity:var(--tmax,.9) } }
.fh-win{ animation:winFlicker 6s linear infinite; }
.fh-win.w2{ animation-delay:2.7s; animation-duration:8s; }
.moon-svg{
  position:absolute; top:7%; right:11%;
  width:clamp(64px, 9vw, 108px); height:auto;
  filter:drop-shadow(0 0 26px rgba(223,232,244,.5));
}

.layer{ position:absolute; inset:0; display:flex; will-change:transform; }
.layer svg{ height:100%; width:auto; flex:none; }
.layer.foreground{ z-index:2; filter:drop-shadow(0 10px 10px rgba(0,0,0,.32)); }

#snow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* warm light the train itself throws on the snow */
.lightspill{
  position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    linear-gradient(100deg, transparent 6%, rgba(255,190,110,.13) 12%, transparent 20%),
    linear-gradient(100deg, transparent 34%, rgba(255,190,110,.11) 41%, transparent 50%),
    linear-gradient(100deg, transparent 64%, rgba(255,190,110,.12) 71%, transparent 80%);
  pointer-events:none;
}

.wisp{
  position:absolute; top:8%; left:-30%; width:42%; height:26%;
  background:radial-gradient(closest-side, rgba(223,232,244,.4), rgba(223,232,244,.06) 60%, transparent 75%);
  filter:blur(14px); border-radius:50%; opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .wisp{ animation:wispDrift 13s linear infinite; }
  .wisp.w2{ top:16%; animation-duration:19s; animation-delay:6s; width:34%; }
  .wisp.w3{ top:4%;  animation-duration:23s; animation-delay:11s; width:50%; }
}
@keyframes wispDrift{
  0%{ transform:translateX(0) translateY(0) scale(.7); opacity:0 }
  12%{ opacity:.5 }
  60%{ opacity:.28 }
  100%{ transform:translateX(320%) translateY(-30%) scale(1.5); opacity:0 }
}

/* glass: faint reflection of the lit cabin + vignette */
.window-glass{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(223,232,244,.05) 46%, transparent 52%, rgba(223,232,244,.03) 60%, transparent 66%),
    radial-gradient(130% 110% at 50% 50%, transparent 62%, rgba(2,6,14,.55) 100%);
}
/* window mullion */
.window-glass::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:6px; margin-left:-3px;
  background:linear-gradient(180deg, #35210f, #191006 50%, #2b1a0e);
  box-shadow:0 0 0 1px rgba(201,161,90,.35);
}

/* curtains */
.curtain{ position:absolute; top:0; bottom:0; width:clamp(54px, 11vw, 170px); z-index:5; pointer-events:none; }
.curtain svg{ width:100%; height:100%; display:block; }
.curtain-l{ left:0; }
.curtain-r{ right:0; transform:scaleX(-1); }

.brass-rail{
  position:absolute; left:4%; right:4%; bottom:9%; height:10px; z-index:6;
  border-radius:99px;
  background:linear-gradient(180deg, #f2ddab 0%, var(--brass) 35%, #7a6136 70%, #4a3a1e 100%);
  box-shadow:0 3px 14px rgba(0,0,0,.7), 0 -1px 0 rgba(255,240,200,.7) inset;
}
.brass-rail::before,.brass-rail::after{
  content:""; position:absolute; top:-7px; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f2ddab, var(--brass) 45%, #57431f 85%);
  box-shadow:0 3px 8px rgba(0,0,0,.6);
}
.brass-rail::before{ left:-4px } .brass-rail::after{ right:-4px }

/* station split-flap board */
.station-board{
  position:absolute; top:max(4.6%, 80px); left:50%; transform:translateX(-50%); z-index:7;
  text-align:center;
}
.station-board .board-label{
  font-size:.62rem; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.45rem;
}
.board-cells{
  display:inline-flex; gap:2px; padding:7px 9px; border-radius:6px;
  background:linear-gradient(180deg, #1a1208, #050403);
  box-shadow:0 0 0 1px rgba(201,161,90,.55), 0 0 0 4px #0d0904, 0 14px 30px rgba(0,0,0,.65);
}
.board-cells .cell{
  width:clamp(13px, 2.4vw, 22px); height:clamp(22px, 3.6vw, 32px);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #222 0%, #121212 48%, #060606 52%, #101010 100%);
  color:var(--cream); border-radius:2px;
  font-family:var(--font-body); font-weight:600;
  font-size:clamp(.72rem, 1.8vw, 1.02rem);
  position:relative; overflow:hidden;
}
.board-cells .cell::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.85);
}
.board-cells .cell.flick{ animation:flick .09s linear; }
@keyframes flick{ 0%{ transform:scaleY(1) } 50%{ transform:scaleY(.1) } 100%{ transform:scaleY(1) } }

.journey-instruments{
  position:absolute; z-index:7;
  top:max(13%, 116px);
  left:calc(50% - var(--window-w) / 2 + 20px);
  display:grid; grid-template-columns:repeat(3, minmax(76px, 1fr)); gap:.35rem;
  width:min(360px, 30vw);
}
.journey-instruments div{
  min-height:48px; padding:.48rem .65rem .42rem;
  background:linear-gradient(180deg, rgba(7,12,22,.72), rgba(18,10,12,.52));
  border:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  box-shadow:inset 0 1px 0 rgba(232,205,144,.12), 0 16px 34px rgba(0,0,0,.32);
}
.journey-instruments span{
  display:block; font-size:.52rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass); white-space:nowrap;
}
.journey-instruments b{
  display:block; margin-top:.08rem; font-family:var(--font-display); font-size:1.18rem;
  font-weight:400; letter-spacing:.08em; color:var(--moon); font-variant-numeric:tabular-nums;
}

/* carriage panels */
.car-panel{
  position:absolute; z-index:8;
  top:50%; transform:translateY(-46%) translateX(40px);
  right:calc(50% - var(--window-w) / 2 + 34px);
  width:min(400px, 78vw);
  max-height:62svh; overflow:auto; overscroll-behavior:contain;
  padding:1.5rem 1.6rem 1.4rem;
  background:linear-gradient(165deg, rgba(14,26,46,.92), rgba(8,14,27,.94));
  border:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius:6px;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(232,205,144,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-out), transform .32s var(--ease-out), visibility 0s linear .32s;
}
.car-panel::before{
  content:""; position:absolute; left:1rem; right:1rem; top:.72rem; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass) 52%, transparent), transparent);
}
.car-panel::after{
  content:""; position:absolute; right:.9rem; top:.9rem; width:8px; height:8px;
  border-top:1px solid var(--brass); border-right:1px solid var(--brass); opacity:.62;
}
.car-panel.left{ right:auto; left:calc(50% - var(--window-w) / 2 + 34px); transform:translateY(-46%) translateX(-40px); }
.car-panel.active{
  opacity:1; visibility:visible; transform:translateY(-46%) translateX(0);
  transition:opacity .48s var(--ease-out), transform .56s var(--ease-out), visibility 0s;
}
.car-panel .car-no{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--brass);
}
.car-panel h3{
  font-size:clamp(1.5rem, 3.4vw, 2rem); letter-spacing:.06em; text-transform:uppercase;
  margin:.4rem 0 .2rem; color:var(--moon);
}
.car-panel .car-sub{ font-style:italic; color:var(--moon-dim); font-size:.95rem; margin-bottom:.9rem; }
.car-panel .menu{ list-style:none; border-top:1px solid color-mix(in srgb, var(--brass) 30%, transparent); }
.car-panel .menu li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid color-mix(in srgb, var(--brass) 18%, transparent);
  font-size:.95rem;
}
.car-panel .menu .dots{ flex:1; border-bottom:1px dotted color-mix(in srgb, var(--brass) 45%, transparent); transform:translateY(-4px); }
.car-panel .menu .price{ font-variant-numeric:tabular-nums; color:var(--brass-bright); font-weight:500; white-space:nowrap; }
.car-panel .note{ margin-top:.85rem; font-size:.85rem; color:var(--moon-dim); font-style:italic; }

/* journey captions (start / end) */
.journey-caption{
  position:absolute; z-index:8; left:50%; bottom:18%; transform:translateX(-50%) translateY(14px);
  text-align:center; width:min(560px, 84vw);
  padding:.75rem 1rem .85rem;
  background:linear-gradient(180deg, rgba(7,14,28,.58), rgba(7,14,28,.36));
  border:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  border-radius:5px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .8s;
  pointer-events:none;
}
.journey-caption.active{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), visibility 0s; }
.journey-caption p{
  font-family:var(--font-display); font-size:clamp(1.25rem, 3vw, 1.8rem);
  color:var(--moon); text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.journey-caption span{ display:block; margin-top:.4rem; font-size:.74rem; letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; color:var(--brass); }

/* progress rail */
.journey-progress{
  position:absolute; z-index:9; left:50%; bottom:max(3.4%, 20px); transform:translateX(-50%);
  width:min(680px, 84vw);
}
.jp-line{ position:relative; height:2px; background:color-mix(in srgb, var(--brass) 30%, transparent); border-radius:2px; }
.jp-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--brass); border-radius:2px; box-shadow:0 0 8px rgba(201,161,90,.8); }
.jp-tick{ position:absolute; top:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%); background:var(--midnight-3); box-shadow:0 0 0 1px var(--brass-dim); }
.jp-tick.passed{ background:var(--brass); box-shadow:0 0 0 1px var(--brass), 0 0 8px rgba(201,161,90,.9); }
.jp-train{
  position:absolute; top:50%; left:0; transform:translate(-50%,-58%);
  color:var(--brass-bright); filter:drop-shadow(0 0 6px rgba(201,161,90,.8));
}
.jp-labels{ display:flex; justify-content:space-between; margin-top:.55rem; }
.jp-labels span{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--moon-dim);
  font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  :root{ --window-w:94vw; }
  .window-frame{ height:62svh; top:48%; padding:8px; border-radius:18px 18px 12px 12px; }
  .curtain{ width:30px; }
  .brass-rail{ bottom:11%; height:8px; left:2%; right:2%; }
  .journey-instruments{ display:none; }
  .car-panel, .car-panel.left{
    left:50%; right:auto; top:auto; bottom:13%;
    width:min(420px, 92vw); max-height:46svh;
    transform:translateX(-50%) translateY(30px); padding:1.1rem 1.2rem 1rem;
  }
  .car-panel.active{ transform:translateX(-50%) translateY(0); }
  .station-board{ top:max(4%, 78px); }
  .jp-labels span:nth-child(even){ display:none; }
  .journey-caption{ bottom:24%; }
}
@media (min-width:761px) and (max-width:980px){
  :root{ --window-w:90vw; }
  .window-frame{ width:90vw; height:min(70svh, 720px); top:53%; }
  .station-board{ top:max(3.6%, 74px); }
  .journey-progress{ width:min(720px, 86vw); }
}
@media (max-width:520px){
  .journey-progress{ width:88vw; }
  .jp-labels span{
    font-size:.55rem; letter-spacing:.13em; text-indent:0;
  }
  .jp-labels span:nth-child(3){ display:none; }
  .journey-caption{
    width:min(330px, 84vw);
    padding:.65rem .8rem .72rem;
  }
  .journey-caption span{ letter-spacing:.22em; text-indent:.22em; }
}

/* ============================================================
   LANTERN GLASS — generated midnight landscape
   ============================================================ */
.lantern-glass{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:clip;
  background:
    radial-gradient(70% 42% at 22% 82%, rgba(94,34,51,.46), transparent 68%),
    #05070f;
  isolation:isolate;
}
.lantern-glass::before{
  content:""; position:absolute; inset:clamp(14px,2.2vw,32px);
  z-index:2; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--brass) 42%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,200,.08),
    inset 0 0 70px rgba(0,0,0,.48),
    0 0 0 999px rgba(2,6,14,.18);
}
.lantern-glass::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:3; height:32%;
  background:
    linear-gradient(180deg, transparent, rgba(3,7,15,.66)),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(201,161,90,.12) 46px 48px, transparent 48px 92px);
  opacity:.72; pointer-events:none;
}
.glass-media{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(3,7,15,.78), rgba(3,7,15,.18) 34%, rgba(3,7,15,.54) 100%),
    url("/assets/gen/meridian/window.jpg") center / cover no-repeat;
}
.glass-media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(.84) contrast(1.1) brightness(.72);
}
.glass-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(45% 34% at 60% 26%, rgba(223,232,244,.1), transparent 70%),
    linear-gradient(90deg, rgba(3,7,15,.82), rgba(3,7,15,.22) 42%, rgba(3,7,15,.56)),
    linear-gradient(180deg, rgba(3,7,15,.28), rgba(3,7,15,.38) 54%, rgba(3,7,15,.88));
  pointer-events:none;
}
.glass-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(223,232,244,.075) 43%, transparent 50%, rgba(223,232,244,.04) 57%, transparent 64%),
    radial-gradient(80% 100% at 50% 50%, transparent 58%, rgba(2,6,14,.6));
  mix-blend-mode:screen;
}
.glass-content{
  position:relative; z-index:4;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:clamp(5.5rem, 12vh, 8rem);
  padding-bottom:clamp(4rem, 10vh, 7rem);
}
.glass-copy{
  width:min(590px, 100%);
  text-shadow:0 2px 22px rgba(0,0,0,.82);
}
.glass-copy h2{
  margin:.7rem 0 1rem;
  font-size:4.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--moon);
}
.glass-copy .lede{
  max-width:48ch;
  color:#edf3fb;
  font-weight:300;
}
.glass-ledger{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  margin:2rem 0 0;
  border:1px solid color-mix(in srgb, var(--brass) 36%, transparent);
  background:color-mix(in srgb, var(--brass) 20%, transparent);
  box-shadow:0 28px 70px -38px rgba(0,0,0,.95);
}
.glass-ledger p{
  min-height:84px;
  padding:.85rem .9rem;
  background:linear-gradient(180deg, rgba(4,10,21,.72), rgba(11,22,39,.58));
}
.glass-ledger span{
  display:block;
  color:var(--brass-bright);
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.glass-ledger b{
  display:block;
  margin-top:.28rem;
  color:var(--moon);
  font-weight:500;
  line-height:1.35;
}
.bell-row{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:1.5rem;
}
.bell-pull{
  min-height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.65rem 1.1rem .65rem .9rem;
  border:1px solid color-mix(in srgb, var(--brass) 58%, transparent);
  border-radius:2px;
  background:linear-gradient(160deg, rgba(18,10,12,.82), rgba(8,17,32,.72));
  color:var(--brass-bright);
  font-family:var(--font-body);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(232,205,144,.16), 0 16px 36px -24px rgba(0,0,0,.9);
  transition:transform .32s var(--ease-out), border-color .32s, background .32s, color .32s;
}
.bell-pull:hover,
.bell-pull[aria-pressed="true"]{
  transform:translateY(-2px);
  border-color:var(--brass-bright);
  background:linear-gradient(160deg, rgba(94,34,51,.78), rgba(18,10,12,.86));
  color:#fff4d6;
}
.bell-icon{
  position:relative;
  width:30px; height:30px; flex:none;
  border-radius:50% 50% 44% 44%;
  border:1px solid currentColor;
  box-shadow:inset 0 -8px 0 rgba(201,161,90,.24);
}
.bell-icon::before{
  content:""; position:absolute; left:50%; top:-13px; width:1px; height:13px;
  background:currentColor;
}
.bell-icon::after{
  content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px;
  border-radius:50%;
  background:currentColor;
  transform:translateX(-50%);
}
.bell-status{
  color:var(--moon-dim);
  font-size:.9rem;
  font-style:italic;
}
.bell-wave{
  position:absolute; z-index:1; left:58%; top:34%;
  width:24vmin; aspect-ratio:1;
  border:1px solid rgba(232,205,144,.72);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  pointer-events:none;
}
.lantern-glass.bell-rung .bell-wave{
  animation:bellWave 1.35s var(--ease-out) both;
}
.lantern-glass.bell-rung .glass-media::after{
  background:
    radial-gradient(circle at 58% 33%, rgba(232,205,144,.26), transparent 0 28%, rgba(232,205,144,.08) 38%, transparent 58%),
    linear-gradient(115deg, transparent 38%, rgba(223,232,244,.09) 43%, transparent 50%, rgba(223,232,244,.05) 57%, transparent 64%),
    radial-gradient(80% 100% at 50% 50%, transparent 58%, rgba(2,6,14,.6));
}
@keyframes bellWave{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3); }
  18%{ opacity:.82; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(4.8); }
}

@media (max-width:900px){
  .glass-copy h2{ font-size:3.6rem; }
  .glass-ledger{ grid-template-columns:1fr; max-width:560px; }
  .glass-ledger p{ min-height:0; }
}
@media (max-width:560px){
  .lantern-glass{ min-height:104svh; align-items:flex-end; }
  .lantern-glass::before{ inset:10px; }
  .glass-media{ background-position:58% center; }
  .glass-media video{ object-position:58% center; }
  .glass-content{
    align-items:flex-end;
    padding-top:6rem;
    padding-bottom:3.4rem;
  }
  .glass-copy h2{
    font-size:2.42rem;
    letter-spacing:.07em;
  }
  .glass-copy .lede{ font-size:1rem; }
  .bell-pull{
    width:100%;
    justify-content:flex-start;
    font-size:.72rem;
    letter-spacing:.16em;
    text-indent:0;
  }
  .bell-status{ width:100%; }
}

/* ============================================================
   CARRIAGES — the consist
   ============================================================ */
.carriages{
  padding:clamp(5rem,11vw,8.5rem) 0;
  background:
    radial-gradient(52% 28% at 72% 18%, rgba(201,161,90,.1), transparent 72%),
    linear-gradient(180deg, #0a0d16, var(--midnight) 26%);
  overflow:clip;
}
.carriages::before{
  content:""; position:absolute; left:-4%; right:-4%; top:clamp(9rem, 20vw, 16rem); height:82px;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(201,161,90,.16) 42px 44px, transparent 44px 86px),
    linear-gradient(180deg, transparent 38px, rgba(201,161,90,.34) 39px 41px, transparent 42px);
  opacity:.34; pointer-events:none;
}
.consist-scroller{ overflow-x:auto; padding:1rem 0 1.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--brass-dim) transparent; cursor:grab; touch-action:pan-x pan-y; }
.consist-scroller:active{ cursor:grabbing; }
.consist{ min-width:1080px; width:100%; display:block; }
.consist .car-g{ cursor:pointer; }
.consist .car-g .win{ transition:fill .35s, filter .35s; }
.consist .car-g:hover .win, .consist .car-g:focus .win{ fill:#ffd98a; filter:drop-shadow(0 0 4px rgba(255,217,138,.9)); }
.consist .car-g:hover .car-body{ stroke:var(--brass); }
.consist-hint{ text-align:center; font-size:.75rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--moon-dim); margin-top:.2rem; }
.consist-ledger{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  margin:clamp(1.2rem,3vw,2rem) auto 0;
  max-width:960px;
  border:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  background:color-mix(in srgb, var(--brass) 20%, transparent);
}
.consist-ledger p{
  min-height:64px; padding:.72rem .9rem;
  background:rgba(6,13,29,.78);
  font-variant-numeric:tabular-nums;
}
.consist-ledger span{
  display:block; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--moon-dim);
}
.consist-ledger b{
  display:block; margin-top:.1rem; font-family:var(--font-display); font-size:1.28rem;
  color:var(--brass-bright); font-weight:400; letter-spacing:.08em;
}

.car-cards{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem;
  margin-top:clamp(2rem, 5vw, 3.4rem);
}
.car-card{
  padding:1.7rem 1.5rem 1.5rem; position:relative;
  background:linear-gradient(170deg, var(--midnight-2), #0b1830);
  border:1px solid color-mix(in srgb, var(--brass) 26%, transparent);
  border-radius:4px;
  transition:transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.car-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--brass) 60%, transparent); box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.car-card:nth-child(2),
.car-card:nth-child(4){ margin-top:1.15rem; }
.car-card .cno{
  position:absolute; top:-.9rem; right:1rem;
  font-family:var(--font-display); font-size:2.6rem; color:color-mix(in srgb, var(--brass) 38%, transparent);
}
.car-card h3{ font-size:1.35rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-bright); margin-bottom:.15rem; }
.car-card .fr{ font-style:italic; color:var(--moon-dim); font-size:.88rem; margin-bottom:.8rem; }
.car-card p{ font-size:.95rem; color:var(--moon-dim); }
.car-card p b{ color:var(--moon); font-weight:500; }

@media (max-width:1024px){
  .car-cards{ grid-template-columns:repeat(2,1fr); }
  .consist-ledger{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .car-cards{ grid-template-columns:1fr; }
  .car-card:nth-child(2),
  .car-card:nth-child(4){ margin-top:0; }
  .consist-ledger{ grid-template-columns:1fr 1fr; }
  .consist-ledger b{ font-size:1.08rem; }
}

/* ============================================================
   TIMETABLE
   ============================================================ */
.timetable{
  padding:clamp(5rem,11vw,8.5rem) 0;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(94,34,51,.28), transparent 70%),
    var(--midnight);
}
.route-ribbon{ margin:0 auto clamp(2.4rem,6vw,4rem); max-width:920px; }
.route-ribbon svg{ width:100%; height:auto; display:block; }
.dispatch-ledger{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  margin:calc(clamp(2.4rem,6vw,4rem) * -0.42) auto clamp(2rem,5vw,3.2rem);
  max-width:1040px;
  border:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  background:color-mix(in srgb, var(--brass) 18%, transparent);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.dispatch-ledger p{
  background:
    linear-gradient(180deg, rgba(10,21,38,.96), rgba(6,13,29,.9));
  padding:.85rem .9rem .95rem; min-height:76px;
}
.dispatch-ledger span{
  display:block; color:var(--moon-dim); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase;
}
.dispatch-ledger b{
  display:block; margin-top:.28rem; color:var(--brass-bright); font-size:.96rem;
  font-weight:500; font-variant-numeric:tabular-nums;
}

.tt-wrap{
  overflow-x:auto; border:1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  border-radius:4px;
  background:
    linear-gradient(180deg, rgba(8,18,34,.86), rgba(4,9,20,.9)),
    rgba(6,13,29,.6);
  box-shadow:0 28px 80px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(232,205,144,.12);
}
table.tt{
  width:100%; min-width:640px; border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.tt caption{ text-align:left; padding:1.1rem 1.3rem .4rem; font-family:var(--font-display); font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.tt th{
  font-weight:500; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); text-align:left; padding:.85rem 1.3rem;
  border-bottom:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
.tt td{
  padding:.9rem 1.3rem; border-bottom:1px solid color-mix(in srgb, var(--brass) 14%, transparent);
  color:var(--moon-dim); font-size:.98rem;
}
.tt td.st{ color:var(--moon); font-weight:500; letter-spacing:.04em; }
.tt td.num{ color:var(--brass-bright); font-weight:500; }
.tt tr:last-child td{ border-bottom:none; }
.tt tr:hover td{ background:rgba(201,161,90,.05); }
.tt-notes{ margin-top:1rem; font-size:.85rem; color:var(--moon-dim); font-style:italic; text-align:center; }
@media (max-width:900px){
  .dispatch-ledger{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:-1rem; }
}
@media (max-width:560px){
  .dispatch-ledger{ grid-template-columns:1fr; }
  .tt caption{ font-size:1rem; letter-spacing:.1em; }
}

/* ============================================================
   FARES — the ticket
   ============================================================ */
.fares{
  padding:clamp(5rem,11vw,8.5rem) 0;
  background:
    radial-gradient(58% 36% at 82% 36%, rgba(201,161,90,.11), transparent 68%),
    radial-gradient(54% 32% at 18% 18%, rgba(94,34,51,.24), transparent 72%),
    linear-gradient(180deg, var(--midnight), #0a1526 55%, var(--midnight-deep));
  overflow:clip;
}
.fares::before{
  content:""; position:absolute; left:0; right:0; top:0; height:100%;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(201,161,90,.08) 9.1% 9.22%, transparent 9.35% 90.65%, rgba(201,161,90,.08) 90.78% 90.9%, transparent 91%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(223,232,244,.018) 34px 35px);
  pointer-events:none;
}
.fares-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
@media (max-width:900px){ .fares-grid{ grid-template-columns:1fr; } }

.fare-classes{ display:flex; flex-direction:column; gap:.9rem; }
.fare-opt{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  width:100%; text-align:left; min-height:64px; padding:.9rem 1.2rem;
  background:rgba(6,13,29,.65); color:var(--moon);
  border:1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  border-radius:4px; cursor:pointer;
  font-family:var(--font-body);
  transition:border-color .3s, background .3s, transform .3s var(--ease-out);
}
.fare-opt:hover{ transform:translateX(4px); }
.fare-opt[aria-pressed="true"]{
  border-color:var(--brass); background:linear-gradient(160deg, rgba(94,34,51,.5), rgba(46,15,26,.6));
  box-shadow:inset 3px 0 0 var(--brass);
}
.fare-opt .fo-name{ font-family:var(--font-display); font-size:1.18rem; letter-spacing:.1em; text-transform:uppercase; }
.fare-opt .fo-desc{ display:block; font-size:.82rem; color:var(--moon-dim); font-family:var(--font-body); letter-spacing:0; text-transform:none; margin-top:.15rem; }
.fare-opt .fo-price{ font-variant-numeric:tabular-nums; color:var(--brass-bright); font-weight:600; font-size:1.15rem; white-space:nowrap; }

.date-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.3rem; }
.date-chip{
  min-height:44px; padding:.4rem 1rem; border-radius:99px; cursor:pointer;
  background:transparent; color:var(--moon-dim);
  border:1px solid color-mix(in srgb, var(--brass) 35%, transparent);
  font-family:var(--font-body); font-weight:500; font-size:.85rem; letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.date-chip:hover{ transform:translateY(-1px); color:var(--brass-bright); border-color:var(--brass); }
.date-chip[aria-pressed="true"]{ background:var(--brass); color:#241503; border-color:var(--brass); }
.fare-label{ font-size:.72rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--brass); margin:1.6rem 0 .6rem; }
.fare-label:first-child{ margin-top:0; }
.fare-ledger{
  margin-top:1.4rem;
  border-top:1px solid color-mix(in srgb, var(--brass) 32%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--brass) 20%, transparent);
}
.fare-ledger p{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid color-mix(in srgb, var(--brass) 13%, transparent);
  font-variant-numeric:tabular-nums;
}
.fare-ledger p:last-child{ border-bottom:none; }
.fare-ledger span{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--moon-dim);
}
.fare-ledger b{
  color:var(--brass-bright); font-weight:500; text-align:right; white-space:nowrap;
}

/* ---- the ticket itself ---- */
.ticket-tilt{ perspective:1100px; position:relative; }
.ticket-tilt::before{
  content:""; position:absolute; left:5%; right:1%; bottom:-18px; height:24px;
  background:radial-gradient(closest-side, rgba(0,0,0,.74), transparent 70%);
  filter:blur(10px); transform:rotate(-1.2deg); pointer-events:none;
}
.ticket{
  position:relative; color:var(--ink-on-cream);
  background:
    radial-gradient(120% 140% at 20% 0%, #f6efdc 0%, var(--cream) 45%, #e2d6b8 100%);
  border-radius:8px;
  display:grid; grid-template-columns:1fr 168px;
  box-shadow:0 34px 80px -20px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.5);
  transform:rotate(-1.2deg);
  transition:transform .6s var(--ease-out);
  font-variant-numeric:tabular-nums;
  -webkit-mask-image:
    radial-gradient(circle 9px at right 168px top 0, transparent 8px, #000 9px),
    radial-gradient(circle 9px at right 168px bottom 0, transparent 8px, #000 9px);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle 9px at right 168px top 0, transparent 8px, #000 9px),
    radial-gradient(circle 9px at right 168px bottom 0, transparent 8px, #000 9px);
  mask-composite:intersect;
}
.ticket::before{
  content:""; position:absolute; inset:10px; border:1px solid rgba(94,34,51,.34);
  border-radius:5px; pointer-events:none; z-index:1;
}
.ticket::after{
  content:"N°9"; position:absolute; left:12%; bottom:8%;
  font-family:var(--font-display); font-size:7.5rem; line-height:1;
  letter-spacing:.04em; color:rgba(94,34,51,.075);
  transform:rotate(-10deg); pointer-events:none; z-index:0;
}
.ticket:hover{ transform:rotate(0deg) scale(1.01); }
.ticket-main{ padding:1.6rem 1.5rem 1.4rem; position:relative; z-index:2; }
.ticket-head{ display:flex; justify-content:space-between; align-items:start; gap:1rem; border-bottom:2px solid var(--burgundy); padding-bottom:.7rem; }
.ticket-head .t-co{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--burgundy); font-weight:600; }
.ticket-head h3{ font-size:clamp(1.3rem,3vw,1.8rem); letter-spacing:.1em; text-transform:uppercase; color:var(--burgundy-deep); }
.ticket-head .t-no{ font-weight:600; color:var(--burgundy); font-size:.85rem; text-align:right; }
.ticket-fields{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem 1.2rem; margin-top:1rem; }
.tf{ min-width:0; }
.tf .k{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:#7a5b46; font-weight:600; }
.tf .v{ font-family:var(--font-display); font-size:clamp(.95rem, 2vw, 1.2rem); color:var(--burgundy-deep); letter-spacing:.04em; overflow-wrap:break-word; }
.ticket-foot{ display:flex; justify-content:space-between; align-items:end; margin-top:1.15rem; gap:1rem; }
.ticket-foot .fine{ font-size:.62rem; color:#7a5b46; max-width:34ch; line-height:1.5; }
.punch-row{ display:flex; gap:6px; }
.punch{ width:11px; height:11px; border-radius:50%; border:1.5px dashed #a58a5f; }
.punch.p{ background:var(--burgundy); border-style:solid; border-color:var(--burgundy); }

.ticket-stub{
  position:relative; z-index:2;
  border-left:2px dashed #a58a5f; padding:1.4rem .9rem;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.7rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(94,34,51,.05) 8px 9px),
    radial-gradient(120% 140% at 80% 0%, #efe5cd 0%, #e6dabd 100%);
  text-align:center;
}
.ticket-stub .stub-v{
  writing-mode:vertical-rl; font-family:var(--font-display);
  letter-spacing:.34em; text-transform:uppercase; color:var(--burgundy);
  font-size:.82rem;
}
.ticket-stub .stub-class{ font-family:var(--font-display); font-size:1.5rem; color:var(--burgundy-deep); line-height:1.15; }
.ticket-stub .stub-k{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:#7a5b46; font-weight:600; }

.stamp{
  position:absolute; right:16%; top:30%; z-index:3;
  transform:rotate(-14deg) scale(2.4); opacity:0; pointer-events:none;
  border:3px double #7c2337; border-radius:6px; color:#7c2337;
  padding:.35rem .9rem; text-align:center;
  font-weight:700; font-size:.85rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  mix-blend-mode:multiply;
}
.stamp small{ display:block; font-size:.6rem; letter-spacing:.2em; font-weight:600; }
.ticket.stamped .stamp{ animation:stampDown .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stampDown{
  from{ opacity:0; transform:rotate(-2deg) scale(2.4); }
  to{ opacity:.92; transform:rotate(-14deg) scale(1); }
}
.reserve-row{ margin-top:1.6rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.reserve-msg{ font-size:.85rem; color:var(--brass-bright); font-style:italic; opacity:0; transition:opacity .6s; }
.reserve-msg.show{ opacity:1; }

@media (max-width:520px){
  .ticket{ grid-template-columns:1fr 104px; }
  .ticket-fields{ grid-template-columns:repeat(2,1fr); }
  .ticket-stub{ padding:1rem .5rem; }
  .stamp{ right:8%; }
  .fare-ledger p{ flex-direction:column; gap:.05rem; }
  .fare-ledger b{ text-align:left; }
  .ticket{
    -webkit-mask-image:
      radial-gradient(circle 9px at right 104px top 0, transparent 8px, #000 9px),
      radial-gradient(circle 9px at right 104px bottom 0, transparent 8px, #000 9px);
    mask-image:
      radial-gradient(circle 9px at right 104px top 0, transparent 8px, #000 9px),
      radial-gradient(circle 9px at right 104px bottom 0, transparent 8px, #000 9px);
  }
}

/* ============================================================
   LEGEND — lore
   ============================================================ */
.legend{
  padding:clamp(5rem,11vw,8.5rem) 0 clamp(4rem,9vw,7rem);
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(94,34,51,.3), transparent 65%),
    var(--midnight-deep);
  overflow:clip;
}
.legend::before{
  content:""; position:absolute; inset:auto -4% 7rem -4%; height:92px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(201,161,90,.18) 38px 40px, transparent 40px 78px),
    linear-gradient(180deg, transparent 42px, rgba(201,161,90,.38) 43px 45px, transparent 46px);
  opacity:.45;
}
.legend-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media (max-width:900px){ .legend-grid{ grid-template-columns:1fr; } }
.legend-eyebrow{ margin-bottom:1.2rem; }
.legend-copy p{ color:var(--moon-dim); margin-bottom:1.1rem; max-width:58ch; }
.legend-copy > p:first-of-type::first-letter{
  font-family:var(--font-display); font-size:3.4em; float:left; line-height:.8;
  padding:.08em .12em 0 0; color:var(--brass);
}
.pull{
  border-left:2px solid var(--brass); padding:.4rem 0 .4rem 1.6rem; margin:0;
}
.pull p{
  font-family:var(--font-display); font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  line-height:1.3; color:var(--moon);
}
.pull cite{ display:block; margin-top:1rem; font-style:normal; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); }
.pull .cite-title{ text-transform:none; letter-spacing:0; }
.legend-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1rem,3vw,2.2rem);
  margin-top:2.2rem;
  padding-top:1.1rem;
  border-top:1px solid color-mix(in srgb, var(--brass) 26%, transparent);
}
.lstat .n{ font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.7rem); color:var(--brass-bright); font-variant-numeric:tabular-nums; }
.lstat .k{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--moon-dim); }
.winter-log{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  margin-top:clamp(2.6rem,6vw,4.4rem);
  border:1px solid color-mix(in srgb, var(--brass) 26%, transparent);
  background:color-mix(in srgb, var(--brass) 18%, transparent);
}
.winter-log p{
  min-height:118px;
  padding:1rem 1.05rem;
  background:
    linear-gradient(160deg, rgba(12,27,51,.92), rgba(5,11,24,.94));
}
.winter-log span{
  display:block; color:var(--brass-bright); font-family:var(--font-display);
  font-size:1.55rem; font-variant-numeric:tabular-nums;
}
.winter-log b{
  display:block; margin:.2rem 0 .25rem;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--moon);
}
.winter-log small{
  display:block; color:var(--moon-dim); font-size:.85rem; line-height:1.45;
}
@media (max-width:760px){
  .legend-stats{ grid-template-columns:1fr; }
  .winter-log{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  background:var(--midnight-deep);
  padding:2.6rem 0 2.4rem; text-align:center;
}
.site-footer .rule{ margin-bottom:1.4rem; }
.site-footer p{ font-size:.85rem; color:var(--moon-dim); letter-spacing:.08em; }
.site-footer .foot-links{ display:flex; gap:.4rem 1.6rem; justify-content:center; flex-wrap:wrap; margin-top:.7rem; }
.site-footer a{ display:inline-flex; align-items:center; min-height:44px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }

/* ============================================================
   GUIDE PAGE
   ============================================================ */
.guide-hero{ padding:clamp(7rem,14vw,10rem) 0 clamp(2.5rem,6vw,4rem); text-align:center; overflow:clip; }
.guide-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 78% 24%, rgba(223,232,244,.18) 0 34px, transparent 88px),
    linear-gradient(90deg, transparent 0 14%, rgba(201,161,90,.12) 14.1% 14.25%, transparent 14.4% 85.6%, rgba(201,161,90,.12) 85.75% 85.9%, transparent 86%),
    radial-gradient(80% 45% at 50% 0%, rgba(34,64,107,.36), transparent 70%);
  opacity:.85;
}
.guide-nav{
  display:block; position:static; background:none; border:none;
}
.guide-nav ul{ flex-direction:row; padding:0; }
.guide-nav a{ padding:0 .55rem; }
.guide-hero h1{ font-size:clamp(2.2rem, 1.4rem + 4.6vw, 4.2rem); letter-spacing:.08em; text-transform:uppercase; margin:.6rem 0 .8rem; }
.guide-plate{
  display:inline-grid; grid-template-columns:auto 120px auto; gap:.9rem; align-items:center;
  margin-top:1.45rem;
  color:var(--moon-dim); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
}
.guide-plate i{
  display:block; height:1px; position:relative;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
}
.guide-plate i::before,
.guide-plate i::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  background:var(--brass); transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(201,161,90,.7);
}
.guide-plate i::before{ left:22%; }
.guide-plate i::after{ left:78%; }
.guide-body{ padding-bottom:clamp(4rem,9vw,7rem); }
.guide-body article{
  max-width:82ch; margin:0 auto; position:relative;
  padding:0 clamp(0rem, 1.3vw, 1.4rem);
}
.guide-body article::before{
  content:""; position:absolute; left:0; top:.3rem; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(201,161,90,.38), transparent);
}
.guide-body article::after{
  content:""; position:absolute; right:0; top:0; bottom:8%; width:1px;
  background:linear-gradient(180deg, rgba(201,161,90,.2), transparent 42%, rgba(201,161,90,.16));
  opacity:.55;
}
.guide-body h2{
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass-bright); margin:2.6rem 0 .9rem;
  padding-top:1.4rem; border-top:1px solid color-mix(in srgb, var(--brass) 26%, transparent);
}
.guide-body p{ color:var(--moon-dim); margin-bottom:1rem; }
.guide-body b, .guide-body strong{ color:var(--moon); font-weight:500; }
.guide-body code{
  font-family:'Zilla Slab', serif; font-weight:500; font-size:.92em;
  color:var(--brass-bright); background:rgba(201,161,90,.1);
  padding:.08em .38em; border-radius:3px; border:1px solid rgba(201,161,90,.22);
}
.guide-diagram{
  float:right; width:min(280px, 42%); aspect-ratio:1.45;
  margin:.15rem 0 1rem 1.3rem; position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brass) 34%, transparent);
  background:linear-gradient(180deg, #071327, #10284b 68%, #071224);
  box-shadow:0 18px 46px -30px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.38);
}
.guide-diagram::before{
  content:""; position:absolute; inset:10px;
  border:4px solid #271708; box-shadow:0 0 0 1px var(--brass);
}
.guide-diagram span{
  position:absolute; left:-20%; right:-20%; height:34%;
  background:#18365f; clip-path:polygon(0 100%, 18% 35%, 34% 78%, 48% 22%, 68% 72%, 84% 38%, 100% 100%);
}
.guide-diagram span:nth-child(1){ bottom:30%; opacity:.72; transform:translateX(4%); }
.guide-diagram span:nth-child(2){ bottom:19%; opacity:.54; transform:translateX(-9%); background:#0d2342; }
.guide-diagram span:nth-child(3){ bottom:8%; opacity:.9; transform:translateX(-22%); background:#071526; clip-path:polygon(0 100%, 0 64%, 100% 74%, 100% 100%); }
.guide-diagram b{
  position:absolute; right:18%; top:18%; width:30px; height:30px; border-radius:50%;
  background:#dfe8f4; box-shadow:0 0 26px rgba(223,232,244,.62);
}
.token-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin:1.1rem 0 .4rem; }
.swatch{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--moon-dim); font-variant-numeric:tabular-nums; }
.swatch i{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(223,232,244,.3); }
.guide-body ul{ margin:0 0 1rem 1.2rem; color:var(--moon-dim); }
.guide-body li{ margin-bottom:.45rem; }
@media (max-width:520px){
  .guide-page .site-header .bar{ gap:.65rem; }
  .guide-page .brand .bn{ font-size:.82rem; letter-spacing:.12em; }
  .guide-page .brand .bn small{ letter-spacing:.28em; }
  .guide-nav a{ font-size:.75rem; letter-spacing:.14em; padding:0 .2rem; }
  .guide-body article{ padding-left:0; }
  .guide-body article::before,
  .guide-body article::after{ content:none; }
  .guide-body code{ padding:.04em .28em; font-size:.88em; }
  .token-row{ gap:.5rem .75rem; }
  .guide-plate{ grid-template-columns:1fr; gap:.45rem; }
  .guide-plate i{ width:150px; margin:0 auto; }
  .guide-diagram{ float:none; width:100%; margin:.2rem 0 1rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .wisp{ display:none; }
  #snow{ display:none; }
  .ambient-video{ display:none; }
}