/* ============================================================
   CHARTER DAY TRAIL
   Archival serif design for Meta Ray-Ban Display
   600x600 viewport, additive waveguide (pure black = transparent)
   D-pad navigation, UN Blue accent
   ============================================================ */

:root{
  --glow: #4D9DE0;
  --glow-soft: color-mix(in oklch, var(--glow) 55%, white);
  --accent: #C9A842;            /* City Hall gold — Key Moment callouts only */
  --ink: #ffffff;
  --ink-88: rgba(255,255,255,.88);
  --ink-dim: rgba(255,255,255,.62);
  --ink-50: rgba(255,255,255,.50);
  --ink-42: rgba(255,255,255,.42);
  --ink-faint: rgba(255,255,255,.36);
  --hair: rgba(255,255,255,.16);
  --hair-8: rgba(255,255,255,.08);
  --gi: 1;
  --spd: 1;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; }
body{
  background:#000;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:fixed; inset:0;
  width:100vw; height:100dvh;
}
#app{
  position:absolute; top:50%; left:50%;
  width:600px; height:600px; overflow:hidden;
  transform:translate(-50%,-50%);
}

/* ── Responsive (phones / desktop — html.mobile) ──────────
   Glasses keep the fixed 600x600 layout; other devices fill
   the viewport, capped at the design width and centered. */
html.mobile #app{
  position:relative; top:auto; left:auto; transform:none;
  width:100%; max-width:600px; height:100dvh;
  margin:0 auto;
}
html.mobile .home-headline{ font-size:clamp(34px, 10vw, 48px); }

/* ============================================================
   SCREEN
   ============================================================ */
.screen{
  position:absolute; inset:0;
  padding:36px 40px 28px;
  display:flex; flex-direction:column;
  animation:screenIn calc(.42s/var(--spd)) cubic-bezier(.2,.8,.2,1) both;
}
@keyframes screenIn{
  from{ opacity:.3; transform:scale(.992); }
  to{   opacity:1;  transform:none; }
}
@media (prefers-reduced-motion:reduce){ .screen{ animation:none; } }

/* surface mixin — emits just enough light to be opaque on the waveguide */
:root{ --surf: #0a0a0f; }

/* ambient bloom */
.bloom{
  position:absolute; pointer-events:none; z-index:0;
  background:radial-gradient(circle at center,
    color-mix(in oklch,var(--glow) 20%,transparent) 0%, transparent 70%);
  filter:blur(4px);
}

/* ============================================================
   SHARED
   ============================================================ */
.focusable{ outline:none; cursor:pointer; }

.statusbar{
  display:flex; align-items:center; justify-content:space-between; z-index:3;
}
.label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-42);
}

/* generic pill button — background must be non-black so surface emits light on waveguide */
.btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 16px; border-radius:13px; min-height:52px;
  border:1px solid var(--hair);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); background:var(--surf);
  transition:
    transform 475ms cubic-bezier(.6,0,.4,1),
    background 300ms cubic-bezier(.4,.04,.5,1),
    border-color 300ms cubic-bezier(.4,.04,.5,1),
    color 300ms cubic-bezier(.4,.04,.5,1),
    box-shadow 300ms cubic-bezier(.4,.04,.5,1);
}
.btn.is-focused{
  color:#0b0b0c; background:var(--glow); border-color:var(--glow);
  box-shadow:0 3px calc(15px*var(--gi)) -5px var(--glow);
  text-shadow:none;
  transform:scale(.97);
}
.btn.is-focused svg *[stroke]{ stroke:#0b0b0c !important; }
.btn.primary{ color:var(--glow); border-color:color-mix(in oklch,var(--glow) 45%,transparent); }
.btn.primary.is-focused{ color:#0b0b0c; background:var(--glow); }

/* ============================================================
   HOME SCREEN
   ============================================================ */
.home-bloom{
  width:340px; height:240px; top:-80px; left:80px;
  background:radial-gradient(circle at center,
    color-mix(in oklch,var(--glow) 20%,transparent) 0%, transparent 70%);
  filter:blur(4px);
}
.home-hero{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
}
.home-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--glow-soft);
}
.home-headline{
  font-family:var(--font-serif); font-weight:600; font-size:48px;
  line-height:.96; letter-spacing:-.015em; color:#fff; margin-top:16px;
  text-shadow:0 0 22px color-mix(in oklch,var(--glow) 28%,transparent);
}
.home-subtitle{
  font-family:var(--font-serif); font-size:18px; font-style:italic;
  color:rgba(255,255,255,.72); margin-top:10px;
}
.home-foot{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:8px; margin-top:2px;
}
.home-disclaimer{
  text-align:center; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.3);
}

/* ============================================================
   LIST SCREEN
   ============================================================ */
.stop-list{
  margin-top:14px; display:flex; flex-direction:column; gap:2px;
  flex:1; min-height:0; z-index:2;
  overflow-y:auto; scrollbar-width:none;
}
.stop-list::-webkit-scrollbar{ display:none; }

.stop-row{
  display:flex; align-items:center; gap:13px;
  padding:12px 13px; border-radius:12px;
  border:1px solid transparent; background:rgba(10,10,15,.5);
  transition:
    transform 475ms cubic-bezier(.6,0,.4,1),
    background 300ms cubic-bezier(.4,.04,.5,1),
    border-color 300ms cubic-bezier(.4,.04,.5,1),
    box-shadow 300ms cubic-bezier(.4,.04,.5,1);
}
.stop-row.is-focused{
  background:linear-gradient(90deg,color-mix(in oklch,var(--glow) 15%,transparent),transparent 90%);
  border-color:color-mix(in oklch,var(--glow) 50%,transparent);
  box-shadow:0 0 calc(18px*var(--gi)) -4px color-mix(in oklch,var(--glow) 70%,transparent);
  transform:scale(.97);
}
/* ============================================================
   PATCH BADGES
   ============================================================ */
.patch-badge{
  flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surf);
  border:1.5px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.22);
  transition:
    background 350ms cubic-bezier(.4,.04,.5,1),
    border-color 350ms cubic-bezier(.4,.04,.5,1),
    color 350ms cubic-bezier(.4,.04,.5,1),
    box-shadow 350ms cubic-bezier(.4,.04,.5,1);
}
.patch-badge.claimed{
  background:color-mix(in oklch,var(--pc) 22%,var(--surf));
  border-color:color-mix(in oklch,var(--pc) 65%,transparent);
  color:var(--pc);
  box-shadow:0 0 12px -2px var(--pc);
}

/* Patch earned state in detail footer */
.patch-earned{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 12px; border-radius:13px; min-height:52px;
  border:1px solid rgba(255,255,255,.1);
  background:var(--surf); z-index:1; position:relative;
}
.pe-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
}

.stop-info{ flex:1; min-width:0; }
.stop-name-row{ display:flex; align-items:center; gap:8px; }
.stop-name{
  font-family:var(--font-serif); font-size:16px; color:var(--ink-88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nearest-tag{
  flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--glow);
  border:1px solid color-mix(in oklch,var(--glow) 45%,transparent);
  border-radius:20px; padding:2px 6px;
}
.stop-sub{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  color:var(--ink-faint); margin-top:3px;
}
.stop-chevron{ flex:none; color:rgba(255,255,255,.3); }
.stop-row.is-focused .stop-chevron{ color:var(--glow); }

/* ============================================================
   DETAIL SCREEN
   ============================================================ */
.detail{ z-index:2; display:flex; flex-direction:column; height:100%; }

.dt-hero{ position:relative; margin-top:11px; z-index:2; }
.dt-meta .dt-subtitle{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--glow-soft);
}
.dt-meta .dt-name{
  font-family:var(--font-serif); font-weight:600; font-size:24px;
  letter-spacing:-.01em; line-height:1.04; color:#fff; margin-top:5px;
}
.dt-meta .dt-addr{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  color:var(--ink-50); margin-top:6px;
}

/* Navigate button in detail */
.navigate-btn{
  display:flex; align-items:center; gap:12px; width:100%;
  margin-top:11px; padding:10px 13px; border-radius:11px; z-index:2;
  border:1px solid color-mix(in oklch,var(--glow) 28%,transparent);
  background:linear-gradient(90deg,color-mix(in oklch,var(--glow) 14%,var(--surf)),var(--surf) 90%);
  text-align:left;
  transition:
    transform 475ms cubic-bezier(.6,0,.4,1),
    border-color 300ms cubic-bezier(.4,.04,.5,1),
    box-shadow 300ms cubic-bezier(.4,.04,.5,1);
}
.navigate-btn.is-focused{
  border-color:var(--glow);
  box-shadow:0 0 calc(18px*var(--gi)) -5px var(--glow);
  transform:scale(.97);
}
.nb-icon{ flex:none; color:var(--glow); }
.nb-text{ flex:1; min-width:0; }
.nb-label{
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--glow-soft);
}
.nb-sub{
  display:block; font-family:var(--font-mono); font-size:12px;
  color:var(--ink-50); margin-top:3px;
}
.nb-chev{ flex:none; color:rgba(255,255,255,.4); }

/* Scroll area */
.dt-scroll-wrap{ position:relative; flex:1; min-height:0; margin-top:12px; }
.dt-scroll{
  height:100%; overflow-y:auto; padding:2px 14px 6px;
  border-left:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
  scrollbar-width:none;
}
.dt-scroll::-webkit-scrollbar{ display:none; }
.dt-scroll.is-focused{
  border-left-color:color-mix(in oklch,var(--glow) 60%,transparent);
  box-shadow:-10px 0 calc(22px*var(--gi)) -16px var(--glow);
}
.dt-scroll .lede{
  font-family:var(--font-serif); font-size:16px; font-weight:500;
  color:#fff; line-height:1.4; text-wrap:pretty;
}
.dt-scroll .hpar{
  font-size:13px; line-height:1.58; color:var(--ink-dim);
  margin-top:11px; text-wrap:pretty;
}

/* Section headers */
.section-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--glow-soft);
  margin:20px 0 10px; padding-bottom:6px;
  border-bottom:1px solid color-mix(in oklch,var(--glow) 25%,transparent);
}

/* Landmark — left-rule style (not a card) */
.landmark-item{
  padding:2px 0 14px 15px; margin-bottom:14px;
  border-left:1px solid color-mix(in oklch,var(--glow) 30%,transparent);
}
.lm-year{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--glow-soft); margin-bottom:3px;
}
.lm-name{ font-family:var(--font-serif); font-size:15px; font-weight:600; color:#fff; margin-bottom:5px; }
.lm-fact{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.6); text-wrap:pretty; }

/* Key dates timeline */
.keyfact-row{
  display:flex; align-items:baseline; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--hair-8); font-size:12px;
}
.kf-year{
  flex:none; min-width:42px; font-family:var(--font-mono); font-size:11px;
  color:var(--glow); letter-spacing:.04em;
}
.kf-text{ color:rgba(255,255,255,.6); line-height:1.4; }

/* Key Moment — left-rule callout */
.key-moment-callout{
  margin-top:18px; padding:2px 0 4px 16px;
  border-left:2px solid color-mix(in oklch,var(--accent) 60%,transparent);
}
.km-date{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.km-headline{
  font-family:var(--font-serif); font-size:20px; font-weight:600;
  color:#fff; line-height:1.1; margin-bottom:9px;
  text-shadow:0 0 calc(16px*var(--gi)) color-mix(in oklch,var(--accent) 55%,transparent);
}
.km-detail{ font-size:12px; line-height:1.55; color:var(--ink-dim); text-wrap:pretty; }

/* Promo code — left-rule with glow */
.promo-callout{
  margin-top:16px; padding:2px 0 2px 16px;
  border-left:2px solid color-mix(in oklch,var(--glow) 50%,transparent);
}
.promo-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--glow-soft); margin-bottom:4px;
}
.promo-code{
  font-family:var(--font-mono); font-size:20px; font-weight:600; letter-spacing:.1em;
  color:var(--glow); text-shadow:0 0 calc(12px*var(--gi)) var(--glow);
}
.promo-detail{ font-size:11px; color:rgba(255,255,255,.6); margin-top:4px; }

/* Video watch button */
.watch-bar{
  display:flex; align-items:center; gap:13px; width:100%;
  margin-top:8px; padding:11px 14px; border-radius:13px;
  border:1px solid color-mix(in oklch,var(--glow) 38%,transparent);
  background:linear-gradient(90deg,color-mix(in oklch,var(--glow) 14%,var(--surf)),var(--surf) 85%);
  text-align:left;
  transition:
    transform 475ms cubic-bezier(.6,0,.4,1),
    border-color 300ms cubic-bezier(.4,.04,.5,1),
    box-shadow 300ms cubic-bezier(.4,.04,.5,1);
}
.watch-bar.is-focused{
  border-color:var(--glow);
  box-shadow:0 0 calc(20px*var(--gi)) -5px var(--glow);
  transform:scale(.97);
}
.wb-play{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--glow); display:flex; align-items:center; justify-content:center;
  color:var(--glow); box-shadow:0 0 calc(10px*var(--gi)) -2px var(--glow);
}
.wb-text{ min-width:0; flex:1; }
.wb-title{
  display:block; font-family:var(--font-serif); font-size:14px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wb-meta{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--glow-soft); margin-top:3px;
}

/* Detail footer gradient + back button */
.detail-foot{ display:flex; gap:10px; margin-top:12px; position:relative; }
.detail-foot::before{
  content:""; position:absolute; left:-44px; right:-44px; top:-24px; bottom:-30px;
  background:linear-gradient(to top,#000 55%,rgba(0,0,0,.82) 78%,transparent);
  z-index:0; pointer-events:none;
}
.detail-foot .btn{ z-index:1; }

/* scroll cue bob */
.scroll-cue{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  color:var(--glow); filter:drop-shadow(0 0 calc(6px*var(--gi)) var(--glow));
  animation:cueBob calc(1.6s/var(--spd)) ease-in-out infinite;
  transition:opacity .3s ease;
}
.scroll-cue.hidden{ opacity:0; }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,4px); } }

/* ============================================================
   NAVIGATE SCREEN
   ============================================================ */
.nav-maneuver{
  display:flex; align-items:center; gap:13px; padding:4px 2px; z-index:2;
  padding-top:14px;
}
.nav-arrow-wrap{
  flex:none; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--glow);
  filter:drop-shadow(0 0 8px color-mix(in oklch,var(--glow) 60%,transparent));
}
.nav-arrow-inner{ display:flex; transition:transform .18s linear; }
.nav-instr{ flex:1; min-width:0; }
.nav-instr-text{
  font-family:var(--font-serif); font-size:19px; font-weight:600;
  color:#fff; line-height:1.1;
}
.nav-instr-sub{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--glow-soft); margin-top:3px;
}

/* Chevron lane */
.nav-lane-wrap{
  position:relative; flex:1; min-height:0;
  margin:20px 0; overflow:hidden; z-index:2;
}
.nav-lane{
  position:absolute; bottom:14px; left:50%;
  transform-origin:bottom center; transition:transform .2s linear;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.nav-chev{
  color:var(--glow);
  filter:drop-shadow(0 0 8px var(--glow));
  animation:chevFlow 1.3s ease-in-out infinite;
}
@keyframes chevFlow{ 0%,100%{ opacity:.22; } 45%{ opacity:1; } }
.nav-street{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:rgba(255,255,255,.85);
}

/* Turn-by-turn list */
.nav-steps-hd{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:4px; z-index:2;
}
.nav-steps-hd .label{ font-size:11px; letter-spacing:.24em; }
.nav-dist-eta{ font-family:var(--font-mono); font-size:12px; color:var(--ink-50); }
.nav-steps{
  display:flex; flex-direction:column; z-index:2;
  overflow-y:auto; scrollbar-width:none;
}
.nav-steps::-webkit-scrollbar{ display:none; }
.nav-step{
  display:flex; align-items:center; gap:11px;
  padding:5px 0; border-bottom:1px solid var(--hair-8);
}
.nav-step-marker{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--glow); border:1px solid color-mix(in oklch,var(--glow) 35%,transparent);
}
.nav-step-text{
  flex:1; min-width:0;
  font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-step-dist{
  flex:none; font-family:var(--font-mono); font-size:12px; color:var(--glow-soft);
}

/* ============================================================
   WATCH SCREEN
   ============================================================ */
.watch{ z-index:2; }
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9; margin-top:16px;
  border-radius:14px; overflow:hidden; border:1px solid var(--hair);
  background:#06080b center/cover no-repeat;
  box-shadow:0 0 calc(40px*var(--gi)) -16px var(--glow);
}
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-meta{ margin-top:16px; flex:1; }
.vm-title{ font-family:var(--font-serif); font-size:18px; font-weight:600; line-height:1.25; text-wrap:pretty; }
.vm-sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-50); margin-top:8px; }
.vm-src{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--glow-soft); margin-top:10px; }

/* Mobile video drawer */
.vd-overlay{
  position:absolute; inset:0; z-index:1000; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.62); animation:vdFade calc(.25s/var(--spd)) ease both;
}
.vd-sheet{
  width:100%; max-height:92%; overflow-y:auto; scrollbar-width:none;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  background:#0a0d12; border-top-left-radius:20px; border-top-right-radius:20px;
  border-top:1px solid var(--hair); box-shadow:0 -18px 50px -12px #000;
  animation:vdUp calc(.32s/var(--spd)) cubic-bezier(.2,.8,.2,1) both;
}
.vd-sheet::-webkit-scrollbar{ display:none; }
.vd-handle{ width:42px; height:4px; border-radius:3px; background:rgba(255,255,255,.28); margin:6px auto 4px; }
.vd-sheet .video-frame{ margin-top:10px; }
.vd-close{ width:100%; justify-content:center; margin-top:16px; }
@keyframes vdFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vdUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

/* ============================================================
   ARRIVAL OVERLAY
   ============================================================ */
.arrival-overlay{
  position:absolute; inset:0; z-index:200;
  background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center;
  animation:arrFade .35s ease both;
}
@keyframes arrFade{ from{ opacity:0; } to{ opacity:1; } }

.arrival-panel{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:36px 28px 28px; width:86%;
  background:#0a0a14;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  animation:arrIn .48s cubic-bezier(.2,.8,.2,1) .08s both;
}
@keyframes arrIn{ from{ transform:scale(.86) translateY(22px); opacity:0; } to{ transform:none; opacity:1; } }

.arrival-badge-anim{
  animation:arrPulse 2.4s ease-in-out infinite;
}
@keyframes arrPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* Badge burst on collect */
.arrival-badge-anim.burst{
  animation:badgeBurst .65s cubic-bezier(.18,.89,.32,1.28) both !important;
}
@keyframes badgeBurst{
  0%  { transform:scale(1); }
  40% { transform:scale(1.38); }
  70% { transform:scale(.9); }
  100%{ transform:scale(1.1); opacity:.7; }
}

/* Overlay fade when collecting */
.arrival-overlay.is-collecting{
  animation:arrFadeOut .5s ease .72s both;
}
@keyframes arrFadeOut{ to{ opacity:0; } }

/* Particle burst */
.collect-particles{
  position:absolute; inset:0; pointer-events:none;
}
.collect-particle{
  position:absolute; left:50%; top:50%;
  width:7px; height:7px; border-radius:50%;
  animation:particleBurst .65s ease-out both;
}
@keyframes particleBurst{
  0%  { transform:translate(-50%,-50%) scale(1.4); opacity:1; }
  100%{
    transform:
      translate(
        calc(-50% + calc(var(--dx) * 58px)),
        calc(-50% + calc(var(--dy) * 58px))
      ) scale(.2);
    opacity:0;
  }
}

.arrival-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--glow-soft);
}
.arrival-name{
  font-family:var(--font-serif); font-size:22px; font-weight:600;
  color:#fff; text-align:center; line-height:1.1;
}
.arrival-foot{ width:100%; margin-top:4px; display:flex; justify-content:center; }
.arrival-foot .btn{ flex:none; min-width:160px; }

/* ============================================================
   MISC
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .screen,
  .scroll-cue,
  .nav-chev{ animation:none !important; }
}