:root{
  --cobalt:      #0044CC;
  --cobalt-deep: #003399;
  --grid:        rgba(255,255,255,.08);
  --stock:       #EFEADA;          
  --ink:         #06266E;          
  --slot:        rgba(0,16,62,.46);
  --lamp:        #F7D046;          
  --flare:       #FF4A2F;          
  --rule:        rgba(255,255,255,.16);
  --rule-soft:   rgba(255,255,255,.10);
  --mono:  'Space Mono', ui-monospace, Consolas, monospace;
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --radius-flap: 3px;
  --radius-ui:   0;
}
*,*::before,*::after{ box-sizing:border-box }
html,body{
  height:100%;
  margin:0;
  overflow:hidden;                 
}
body{
  background: var(--cobalt);
  color:#fff;
  font-family: var(--mono);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}
::selection{ background: var(--lamp); color:#00307A }
.grid-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 55%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 46%, #000 55%, transparent 100%);
}
.star-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  transition: translate .7s cubic-bezier(.2,.8,.2,1);
}
.star-layer svg{
  position:absolute;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
}
.chrome{
  position:relative; z-index:1;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(18px,2.6vw,44px);
  border-bottom:1px solid var(--rule-soft);
}
.foot{
  border-bottom:0;
  border-top:1px solid var(--rule-soft);
  padding-block:14px;
  font-size:10px; text-transform:uppercase; letter-spacing:.34em; opacity:.42;
}
.foot-mid{ display:flex; gap:32px }
.brand{ display:flex; align-items:center; gap:12px }
.brand-sq{
  width:20px; height:20px; background:var(--lamp); flex:0 0 auto;
  clip-path: polygon(0 0,100% 0,100% 60%,60% 60%,60% 100%,0 100%);
}
.brand-id{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.30em;
}
.nav{ display:flex; gap:30px }
.nav a{
  position:relative;
  color:#fff; text-decoration:none;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  opacity:.62; transition:opacity .18s ease, color .18s ease;
  padding-bottom:4px;
}
.nav a::after{                       
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--lamp); transition:width .28s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{ opacity:1; color:var(--lamp) }
.nav a:hover::after{ width:100% }
.head-right{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.ctl{
  font-family:var(--mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.30); border-radius:var(--radius-ui);
  padding:9px 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.ctl:hover{ background:rgba(255,255,255,.10); color:var(--lamp); border-color:var(--lamp) }
.ctl:active{ transform:translateY(1px) }
.ctl kbd{
  font-family:var(--mono); font-size:9px; letter-spacing:0;
  border:1px solid rgba(255,255,255,.34); padding:1px 5px; opacity:.8;
}
.ctl[disabled]{ opacity:.4; cursor:default }
.countdown{ text-align:right; line-height:1.25 }
.cd-label{
  display:block; font-size:9px; text-transform:uppercase; letter-spacing:.34em; opacity:.5;
}
.cd-val{ display:block; font-size:19px; font-weight:700; letter-spacing:.02em }
.stage{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px,1.8vh,26px);
  padding:clamp(14px,2.4vh,34px) clamp(18px,2.6vw,44px);
  box-shadow: inset 0 0 150px rgba(0,10,48,.55);
}
.wordmark{
  margin:0;
  display:flex; align-items:baseline; justify-content:center;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(44px,7.2vw,100px);
  letter-spacing:-.025em; line-height:.92;
}
.wm-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:.60em; height:.52em;
  margin-left:.11em; margin-right:.02em;
}
.wm-glyph svg{ width:100%; height:100%; shape-rendering:crispEdges }
.tagline{
  margin:0; max-width:46ch; text-align:center;
  font-size:12px; line-height:1.7; letter-spacing:.02em; opacity:.62;
}
.meta{
  width:100%; max-width:1280px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  font-size:10px; text-transform:uppercase; letter-spacing:.30em; opacity:.55;
}
.meta-l{ display:flex; gap:22px; flex-wrap:wrap }
.sig{ display:inline-flex; align-items:center; gap:9px }
.dot{
  width:8px; height:8px; border-radius:50%; display:inline-block;
  background:var(--lamp); box-shadow:0 0 10px rgba(247,208,70,.9);
  opacity:.35;                       
  transition:opacity .3s ease;
}
body.boarded .dot{ opacity:1; animation:blink 1.6s infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.32} }
.rows{ display:flex; flex-direction:column; gap:clamp(6px,.9vh,10px) }
.row{
  --gap:  clamp(3px,.5vw,8px);
  --side: clamp(36px,5.2vw,88px);
  --tw:   min(62px, calc((100vw - var(--side) - (var(--n) - 1) * var(--gap)) / var(--n)));
  display:flex; gap:var(--gap); justify-content:center;
}
.flap{
  position:relative; flex:0 0 auto;
  width:var(--tw); height:calc(var(--tw) * 1.3);   
  border-radius:var(--radius-flap);
  overflow:hidden;
  background:var(--stock); color:var(--ink);
  font-family:var(--mono); font-weight:700;
  font-size:calc(var(--tw) * .74);
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding-top:calc(var(--tw) * .055);              
  box-shadow:0 4px 10px rgba(0,12,52,.42);
  user-select:none;
  transform-origin: top center;                    
  transition: transform .05s ease-in-out;          
}
.flap::after{
  content:''; position:absolute; top:50%; left:0;
  width:100%; height:2px; z-index:10; pointer-events:none;
  background: rgba(8,40,112,.30);
}
.flap::before{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.08) 49.6%,
    rgba(10,42,116,.17)   50.4%,
    rgba(10,42,116,0)     84%);
}
.flap.blank{
  background: var(--slot);
  color:transparent;
  box-shadow: inset 0 2px 8px rgba(0,6,32,.6), 0 2px 5px rgba(0,12,52,.28);
}
.flap.blank::before{ opacity:0 }
.flap.blank::after{ background: rgba(0,8,36,.45) }
.flap.flipping{ transform: scaleY(.95) }      
.flap.settling{ transform: scaleY(1.035) }    
.journey{ width:100%; max-width:1280px }
.jline{ display:flex; align-items:center }
.jr{ height:1px; background:var(--rule) }
.jd{ width:9px; height:9px; flex:0 0 auto; border-radius:50%; }
.d-dep{ background:var(--lamp) }
.d-mid{ background:var(--flare) }              
.d-arr{ background:#EFEADA }
.jlabels{
  display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:11px;
  font-size:10px; text-transform:uppercase; letter-spacing:.22em; opacity:.55;
}
.jl b{ font-weight:700; letter-spacing:.06em; opacity:.95 }
.jl em{ font-style:normal; opacity:.6; letter-spacing:.14em }
.a-start{ text-align:left }
.a-mid{ text-align:center }
.a-end{ text-align:right }
.fares{
  position:relative; z-index:1; flex:0 0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--rule);
  border-top:1px solid var(--rule);
}
.fare{
  appearance:none; border:0; border-radius:var(--radius-ui);
  font-family:var(--mono); color:#fff; text-align:left; cursor:pointer;
  background: linear-gradient(180deg, rgba(0,51,153,.78), rgba(0,51,153,.48));
  padding:18px clamp(18px,2.6vw,44px) 20px;
  display:grid; gap:4px; align-content:start;
  transition: padding-left .22s ease, background .22s ease;
}
.fare:hover{ padding-left:calc(clamp(18px,2.6vw,44px) + 10px) }
.fare:hover .f-num{ color:var(--lamp) }
.f-num{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.28em;
  opacity:.7; transition:color .22s ease;
}
.f-tag{
  font-style:normal; margin-left:10px; color:var(--lamp);
  letter-spacing:.22em; opacity:.95;
}
.f-price{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,3.4vw,50px); line-height:1; letter-spacing:-.01em;
}
.f-copy{ font-size:11px; line-height:1.65; opacity:.6; max-width:34ch }
.fare.is-on{
  background: linear-gradient(180deg, rgba(0,26,92,.92), rgba(0,38,124,.62));
  box-shadow: inset 0 2px 0 var(--lamp);
}
.fare.is-on .f-num{ color:var(--lamp); opacity:1 }
.fare.is-on .f-price{ color:var(--lamp) }
.fare.is-on .f-copy{ opacity:.78 }
.fare:focus-visible{ outline:2px solid var(--lamp); outline-offset:-3px }
.ctl:focus-visible{ outline:2px solid var(--lamp); outline-offset:2px }
@media (max-width:900px){
  .nav{ display:none }
  .tagline{ display:none }
}
@media (max-width:720px){
  .chrome{ padding:14px 18px }
  .head-right{ gap:12px }
  .ctl kbd{ display:none }
  .cd-val{ font-size:16px }
  .f-copy{ display:none }
  .fare{ padding:14px 12px 16px }
  .fare:hover{ padding-left:12px }
  .f-num{ letter-spacing:.16em; font-size:9px }
  .f-tag{ display:none }
  .foot-mid{ display:none }
  .foot{ letter-spacing:.24em }
  .jl em{ display:none }
  .jn-x{ display:none }
  .ctl-x{ display:none }
  .ctl{ padding:8px 10px }
  .jlabels{ letter-spacing:.12em; font-size:9px }
  .meta{
    flex-direction:column; align-items:flex-start; gap:5px;
    letter-spacing:.18em; font-size:9px;
  }
  .meta-l{ gap:14px }
}
@media (prefers-reduced-motion: reduce){
  .flap{ transition:none }
  body.boarded .dot{ animation:none }
  .star-layer{ transition:none }
}