:root{
  --bg-void:       #030303;   
  --paper-white:   #F4F4F2;
  --paper-grey:    #E5E5E2;
  --ink-black:     #0A0A0A;
  --ink-grey:      #555555;
  --accent-orange: #FF4400;
  --font-serif: 'Newsreader', 'Times New Roman', Times, serif;
  --font-mono:  'Courier Prime', 'Courier New', Courier, monospace;
  --radius-none: 0px;         
  --shadow-paper: 0 24px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-hover: 0 32px 64px rgba(0,0,0,0.8), 0 8px 16px rgba(0,0,0,0.5);
  --space-1:.5rem; --space-2:1rem; --space-3:2rem;
  --space-4:4rem;  --space-6:6rem; --space-8:8rem;
  --edge-lid:   #EDEDEA;   
  --edge-side:  #D3D3CF;   
  --edge-under: #BEBEBA;   
  --edge-lid-o:  #FF5C1F;
  --edge-side-o: #E03B00;
  --edge-under-o:#B62E00;
  --sw: 356px;
  --sh: 545px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--bg-void) }
body{
  background:var(--bg-void);
  color:var(--paper-white);
  font-family:var(--font-serif);
  line-height:1.4;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-weight:400; letter-spacing:-0.02em }   
.lamp{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -6%, rgba(255,68,0,.075), transparent 62%),
    radial-gradient(900px 900px at 50% 30%, rgba(244,244,242,.030), transparent 70%);
}
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.075;                    
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{ position:relative; z-index:1 }
.wrap{
  max-width:1400px;
  margin:0 auto;
  padding:var(--space-8) var(--space-4);
}
.mono-label,
.eyebrow,
.stat-label,
.run-time,
.run-note,
.spine,
.btn,
.foot span{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.eyebrow{ font-size:.72rem; letter-spacing:.16em; color:#6E6E69; margin-bottom:2.25rem }
.hero h1{
  font-size:clamp(2.6rem, 6.2vw, 5.5rem);
  line-height:1;
  margin-bottom:2rem;
}
.lead{
  font-size:1.25rem;
  line-height:1.5;
  color:rgba(244,244,242,.70);
  max-width:46ch;
}
.run{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin-top:var(--space-6);
  padding-top:2.25rem;
  border-top:1px solid rgba(244,244,242,.16);
}
.run-stop{ position:relative }
.run-stop:nth-child(2){ text-align:center }
.run-stop:nth-child(3){ text-align:right }
.run-stop::before{
  content:''; position:absolute; top:calc(-2.25rem - 4px);
  width:8px; height:8px; background:var(--paper-white);
}
.run-stop:nth-child(1)::before{ left:0 }
.run-stop:nth-child(2)::before{ left:50%; margin-left:-4px }
.run-stop:nth-child(3)::before{ left:auto; right:0 }
.run-stop.is-stop::before{ background:var(--accent-orange) }
.run-time{ display:block; font-size:.8rem; color:var(--accent-orange); margin-bottom:.35rem }
.run-name{ display:block; font-size:1.5rem; line-height:1.1 }
.run-note{
  display:block; font-size:.66rem; letter-spacing:.09em;
  color:#6E6E69; margin-top:.55rem; min-height:1.2em;
  opacity:0; transition:opacity .25s var(--ease);
}
.run-stop:hover .run-note,
.run-stop:focus-within .run-note{ opacity:1 }
.fares{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:var(--space-8);
  perspective:1400px;
  perspective-origin:50% -55%;
  transform-style:preserve-3d;
}
.fare + .fare{ margin-left:-18px }   
.fare{
  position:relative;
  width:var(--sw);
  height:var(--sh);
  transform-style:preserve-3d;
}
.fare-cast{
  position:absolute; left:-10%; right:-10%; top:6%; bottom:-12%;
  background:radial-gradient(ellipse 58% 52% at 50% 64%,
             rgba(0,0,0,.95) 0%, rgba(0,0,0,.62) 36%, rgba(0,0,0,0) 74%);
  transform:translate(var(--shx,0px), var(--shy,0px)) scale(1);
  opacity:.9;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.fare-lift{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:translateZ(var(--rest));
  transition:transform .45s var(--ease);
}
.fare-tilt{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform-origin:50% 90%;
  transform:rotateX(var(--rx,-6deg)) rotateY(var(--ry,0deg));
  transition:transform .18s var(--ease);
}
.sheet{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateZ(var(--scatter));
}
.fare.is-lifted .fare-lift{ transform:translateZ(var(--lift)) }
.fare.is-lifted .fare-cast{ transform:translate(var(--shx,0px), calc(var(--shy,0px) + 26px)) scale(1.16); opacity:1 }
   --down keeps them a few px apart rather than all landing on z=0, because
   coplanar siblings inside preserve-3d z-fight (Template 03 §4). */
.fares.has-lift .fare:not(.is-lifted) .fare-lift{ transform:translateZ(var(--down,0px)) }
.fares.has-lift .fare:not(.is-lifted) .fare-cast{ opacity:.55 }
.s-face,.s-edge{
  position:absolute; top:50%; left:50%;
  border-radius:var(--radius-none);
  backface-visibility:hidden;
}
.s-face{
  width:var(--sw); height:var(--sh);
  transform:translate(-50%,-50%) translateZ(calc(var(--sd) / 2));
  background:var(--paper-white);
  color:var(--ink-black);
  box-shadow:0 4px 12px rgba(0,0,0,.4);      
  display:flex; flex-direction:column;
  padding:1.85rem;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.fare.is-lifted .s-face{ background:#FAFAF8; box-shadow:0 10px 22px rgba(0,0,0,.55) }
.s-edge-top{
  width:var(--sw); height:var(--sd);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--sh) / 2));
  background:var(--edge-lid);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.s-edge-bottom{
  width:var(--sw); height:var(--sd);
  transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--sh) / 2));
  background:var(--edge-under);
}
.s-edge-left{
  width:var(--sd); height:var(--sh);
  transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--sw) / 2));
  background:var(--edge-side);
}
.s-edge-right{
  width:var(--sd); height:var(--sh);
  transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--sw) / 2));
  background:var(--edge-side);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 12px, rgba(0,0,0,.22) 12px 16px);
}
.spine{
  font-size:11px; line-height:1; letter-spacing:.18em;
  color:#8C8C87; white-space:nowrap;
}
.fare[data-fare="berth"] .spine{ font-size:9px; letter-spacing:.1em; color:rgba(0,0,0,.55) }
.fare[data-fare="seat"] .s-edge-top{
  background:linear-gradient(var(--edge-lid) 0 38%, #D6D6D2 38% 62%, var(--edge-lid) 62% 100%);
}
.s-head{ border-bottom:1px solid rgba(0,0,0,.1); padding-bottom:1.25rem }
.mono-label{ font-size:.68rem; color:var(--ink-grey); margin-bottom:.9rem }
.s-name{ font-size:2rem; line-height:1; margin-bottom:.4rem }
.s-price{
  font-size:3.4rem; line-height:1;
  display:flex; align-items:baseline; gap:.6rem;
  margin-bottom:.85rem;
}
.s-price span{
  font-family:var(--font-mono); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-grey);
}
.s-blurb{
  font-family:var(--font-mono); font-size:.78rem; line-height:1.6;
  color:#3A3A38;
}
.features{ list-style:none; flex-grow:1; padding-top:.4rem }
.features li{
  font-family:var(--font-mono); font-size:.76rem; line-height:1.5;
  padding:.62rem 0;
  border-bottom:1px solid rgba(0,0,0,.09);
  display:flex; gap:.7rem;
}
.features li::before{ content:"—"; color:var(--accent-orange); flex:none }
.btn{
  display:block; width:100%; margin-top:1.35rem;
  padding:.95rem 1rem;
  background:var(--ink-black); color:var(--paper-white);
  font-size:.72rem; letter-spacing:.14em; text-align:center;
  text-decoration:none; border-radius:var(--radius-none);
  transition:color .2s, background .2s;
}
.btn:hover,.btn:focus-visible{ color:var(--accent-orange) }
.fare.is-featured .s-face{ background:var(--accent-orange); color:var(--ink-black) }
.fare.is-featured.is-lifted .s-face{ background:#FF5417 }
.fare.is-featured .s-head{ border-bottom-color:rgba(0,0,0,.22) }
.fare.is-featured .mono-label,
.fare.is-featured .s-price span{ color:rgba(0,0,0,.62) }
.fare.is-featured .s-blurb{ color:rgba(0,0,0,.78) }
.fare.is-featured .features li{ border-bottom-color:rgba(0,0,0,.16) }
.fare.is-featured .features li::before{ color:var(--ink-black) }   
.fare.is-featured .btn{ color:var(--accent-orange) }
.fare.is-featured .btn:hover,
.fare.is-featured .btn:focus-visible{ color:var(--paper-white) }
.fare.is-featured .s-edge-top{ background:var(--edge-lid-o) }
.fare.is-featured .s-edge-bottom{ background:var(--edge-under-o) }
.fare.is-featured .s-edge-left,
.fare.is-featured .s-edge-right{ background-color:var(--edge-side-o) }
.fare-foot{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:#787872;
  text-align:center; margin-top:5.5rem;   
}
.ff-touch{ display:none }
.stats{
  margin-top:var(--space-6);
  padding-top:var(--space-6);
  border-top:1px solid rgba(244,244,242,.14);
  display:grid; grid-template-columns:1fr 1.55fr; gap:var(--space-4);
}
.stats-head h2{ font-size:2.5rem; line-height:1.1; margin-bottom:1.25rem }
.stats-head p{ font-size:1.05rem; color:rgba(244,244,242,.62); max-width:34ch }
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.25rem 3rem }
.stat-label{
  font-size:.68rem; color:var(--accent-orange); margin-bottom:.9rem;
}
.odometer,.stat-static{
  font-family:var(--font-mono); font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem, 4.4vw, 4rem);
  line-height:1;
}
.odometer{ display:inline-flex; align-items:baseline }
.odo-window{
  display:inline-block; height:1em; overflow:hidden;
  vertical-align:bottom; position:relative;
}
.odo-strip{
  display:flex; flex-direction:column; will-change:transform;
  transform:translateY(0);
  transition:transform 2.5s var(--ease);
}
.odo-num{ height:1em; display:flex; align-items:center; justify-content:center }
.odo-char{ height:1em; display:flex; align-items:center; color:rgba(255,255,255,.3) }
.odometer.is-visible .odo-strip{
  transform:translateY(calc(var(--target-digit) * -1em));
}
.foot{
  margin-top:var(--space-8);
  padding-top:var(--space-3);
  border-top:1px solid rgba(244,244,242,.12);
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.1em; color:#5C5C58;
}
@media (max-width:1180px){
  :root{ --sw:300px; --sh:640px }
  .wrap{ padding:var(--space-6) var(--space-3) }
}
@media (max-width:900px){
  .fares{
    perspective:none; transform-style:flat;
    flex-direction:column; align-items:center; gap:var(--space-3);
    margin-top:var(--space-6);
  }
  .fare + .fare{ margin-left:0 }
  .fare{
    width:100%; max-width:440px; height:auto;
    transform-style:flat;
  }
  .fare-cast{ display:none }
  .fare-lift,.fare-tilt,.sheet{
    position:static; transform:none !important; transform-style:flat;
  }
  .s-edge{ display:none }
  .s-face{
    position:static; transform:none; width:auto; height:auto;
    border-left:var(--sd) solid var(--edge-side);
    box-shadow:var(--shadow-paper);
  }
  .fare.is-lifted .s-face{ box-shadow:var(--shadow-hover) }
  .fare.is-featured .s-face{ border-left-color:#8F2400 }
  .ff-pointer{ display:none }
  .ff-touch{ display:inline }
  .stats{ grid-template-columns:1fr; gap:var(--space-3) }
  .stats-head h2{ font-size:2rem }
  .stats-grid{ gap:2.5rem 2rem }
  .run{ grid-template-columns:1fr; gap:1.9rem; padding-top:2rem }
  .run-stop,.run-stop:nth-child(2),.run-stop:nth-child(3){ text-align:left; padding-left:1.5rem }
  .run-stop::before{ top:.55rem; left:0 !important; right:auto !important; margin-left:0 }
  .run-note{ opacity:1 }        
}
@media (max-width:520px){
  .wrap{ padding:var(--space-4) 1.25rem }
  .s-face{ padding:1.5rem }
  .s-price{ font-size:2.8rem }
  .foot{ flex-direction:column; gap:.6rem }
}
@media (prefers-reduced-motion:reduce){
  .odo-strip{ transition:none }
  .fare-lift,.fare-tilt,.fare-cast,.s-face,.run-note{ transition:none }
}