/* ============================================
   STEAM COFFEE & TEA CO. — DESIGN TOKENS
   ============================================ */
:root{
  --ink:        #1E1B18;
  --ink-soft:   #2B2622;
  --paper:      #EDE6D6;
  --paper-dim:  #DFD5BE;
  --ember:      #A8471E;
  --ember-lite: #C25A2C;
  --pine:       #4B5842;
  --ticket:     #E2577A;
  --board-amber:#F2C879;

  --display: "Big Shoulders Display", sans-serif;
  --serif:   "Fraunces", serif;
  --mono:    "Space Mono", monospace;

  --edge: clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--display); text-transform:uppercase; }
p{ margin:0; }

:focus-visible{ outline:3px solid var(--ember); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================
   LOADER
   ============================================ */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem;
  /* Safety net: if JS never fires (blocked/disabled), don't trap the page behind this forever */
  animation:loader-safety-net 0.01s linear 4s forwards;
}
@keyframes loader-safety-net{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader__wisp{ overflow:visible; margin-bottom:.5rem; }
.wisp-path{
  fill:none; stroke:var(--board-amber); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:wisp-rise 1.8s ease-in-out infinite;
  opacity:.85;
}
.wisp-2{ animation-delay:.35s; stroke:var(--paper); opacity:.5; }
@keyframes wisp-rise{
  0%{ stroke-dashoffset:260; opacity:0; }
  15%{ opacity:.8; }
  70%{ stroke-dashoffset:0; opacity:.4; }
  100%{ stroke-dashoffset:-40; opacity:0; }
}
.loader__mark{
  font-family:var(--display); font-weight:800; font-size:2.4rem;
  color:var(--paper); text-transform:lowercase; letter-spacing:.02em;
}
.loader__sub{
  font-family:var(--mono); color:var(--board-amber); font-size:.7rem;
  letter-spacing:.35em; text-transform:uppercase;
}
.loader.is-done{
  animation:loader-out .7s ease forwards;
  pointer-events:none;
}
@keyframes loader-out{ to{ opacity:0; visibility:hidden; } }

/* ============================================
   NAV
   ============================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--edge);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.is-scrolled{
  background:rgba(30,27,24,.92);
  backdrop-filter:blur(6px);
  padding-top:.9rem; padding-bottom:.9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.nav__mark{
  font-family:var(--display); font-weight:800; font-size:1.4rem;
  color:var(--paper); text-transform:lowercase; letter-spacing:.02em;
  mix-blend-mode:difference;
}
.nav.is-scrolled .nav__mark{ mix-blend-mode:normal; }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper); mix-blend-mode:difference;
  position:relative; padding-bottom:4px;
}
.nav.is-scrolled .nav__links a{ mix-blend-mode:normal; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--board-amber); transition:width .3s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav__toggle span{ width:22px; height:2px; background:var(--paper); }

@media (max-width:760px){
  .nav__links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); flex-direction:column; justify-content:center; gap:2rem;
    padding:2rem; transform:translateX(100%); transition:transform .45s ease;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ mix-blend-mode:normal !important; font-size:1rem; }
  .nav__toggle{ display:flex; z-index:101; }
}

/* ============================================
   01 — OPENER
   ============================================ */
.opener{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
.opener__media{ position:absolute; inset:0; }
.opener__img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  filter:brightness(.62) saturate(1.05);
  transform:scale(1.12);
  will-change:transform;
}
.opener__grain{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,27,24,.15) 0%, rgba(30,27,24,.35) 55%, rgba(30,27,24,.88) 100%);
}
.opener__content{
  position:relative; z-index:2; padding:0 var(--edge) 6rem;
  max-width:1100px;
}
.opener__eyebrow{
  font-family:var(--mono); color:var(--board-amber); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.2rem;
}
.opener__headline{
  color:var(--paper); font-weight:800; line-height:.86;
  font-size:clamp(2.6rem, 9vw, 6.4rem);
}
.opener__headline .line{ display:block; overflow:hidden; }
.opener__headline em{
  font-family:var(--serif); font-style:italic; font-weight:500;
  text-transform:none; color:var(--ember-lite);
}
.opener__dek{
  font-family:var(--serif); color:var(--paper-dim); font-size:1.1rem;
  max-width:34ch; margin-top:1.6rem; line-height:1.5;
}
.opener__scroll{
  position:absolute; right:var(--edge); bottom:2.4rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.opener__scroll span{
  width:1px; height:46px; background:linear-gradient(var(--board-amber), transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
.opener__scroll p{
  font-family:var(--mono); color:var(--paper-dim); font-size:.65rem; letter-spacing:.3em;
  writing-mode:vertical-rl;
}
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.5); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ============================================
   02 — THE PLATFORM
   ============================================ */
.platform{ background:var(--paper); position:relative; }
.platform__pin{
  min-height:100vh; display:flex; align-items:center; gap:4vw;
  padding:6rem var(--edge);
}
.platform__intro{ flex:0 0 clamp(220px, 26vw, 380px); }
.platform__eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ember); margin-bottom:1rem; display:block;
}
.platform__title{
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:.9; font-weight:800; color:var(--ink);
}
.platform__copy{
  font-family:var(--serif); margin-top:1.4rem; max-width:32ch; line-height:1.55; color:var(--ink-soft);
}
.platform__viewport{ flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.platform__track{
  display:flex; gap:1.6rem; width:max-content;
}
.platform__card{
  flex:0 0 auto; width:clamp(220px,28vw,320px); margin:0;
  background:var(--ink); border-radius:2px; overflow:hidden;
  box-shadow:0 20px 40px rgba(30,27,24,.18);
}
.platform__card img{
  width:100%; aspect-ratio:3/4; object-fit:cover; opacity:.94;
}
.platform__card figcaption{
  font-family:var(--mono); color:var(--paper); font-size:.7rem;
  letter-spacing:.05em; padding:.9rem 1rem; border-top:1px solid rgba(237,230,214,.15);
}

@media (min-width:961px){
  .platform__pin{ position:sticky; top:0; }
}
@media (max-width:960px){
  .platform__pin{ flex-direction:column; align-items:flex-start; padding:5rem var(--edge); gap:2.5rem; min-height:0; }
  .platform__viewport{ width:100%; overflow:visible; }
  .platform__track{
    width:100%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
    -webkit-overflow-scrolling:touch;
  }
  .platform__card{ scroll-snap-align:start; width:72vw; }
}

/* ============================================
   03 — DEPARTURES (split-flap menu)
   ============================================ */
.departures{ background:var(--ink); color:var(--paper); padding:7rem var(--edge) 5rem; }
.departures__head{ margin-bottom:3rem; }
.departures__eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--board-amber); display:block; margin-bottom:.8rem;
}
.departures__title{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--paper); }
.departures__note{ font-family:var(--mono); color:var(--paper-dim); margin-top:.6rem; font-size:.85rem; }

.board{
  border-top:1px solid rgba(237,230,214,.2);
  max-width:980px;
}
.board__row{
  display:grid; grid-template-columns:1.4fr 2fr; gap:1.5rem;
  padding:1.1rem 0; border-bottom:1px solid rgba(237,230,214,.14);
  align-items:baseline;
}
.board__row--head{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim); border-bottom:1px solid rgba(237,230,214,.35);
}
.board__row[data-row] .col-name{
  font-family:var(--mono); font-weight:700; font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:.04em; color:var(--board-amber);
  position:relative;
}
.board__row[data-row] .col-detail{
  font-family:var(--serif); font-style:italic; color:var(--paper-dim); font-size:.95rem;
}
/* flap reveal state, toggled via IntersectionObserver in JS */
.board__row[data-row]{ opacity:0; transform:translateY(10px); }
.board__row[data-row].is-live{
  animation:flap-in .55s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes flap-in{
  0%{ opacity:0; transform:translateY(14px); filter:blur(3px); }
  60%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:translateY(0); }
}

.fullboard{
  margin-top:4rem; padding-top:3rem; border-top:1px dashed rgba(237,230,214,.25);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:2.4rem;
}
.fullboard__col{ min-width:0; }
.fullboard__col h3{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember-lite); margin-bottom:1rem; font-weight:700;
}
.fullboard__line{
  gap:.6rem; min-width:0;
  font-family:var(--serif); font-size:.92rem; color:var(--paper-dim);
  padding:.45rem 0; border-bottom:1px solid rgba(237,230,214,.08);
  overflow-wrap:break-word;
}
.rate-note{
  font-family:var(--mono); font-size:.72rem; color:var(--ember-lite); opacity:.85;
  margin-top:.7rem; font-style:normal;
}

.cold-foams{
  margin-top:3rem; padding-top:2.5rem; border-top:1px dashed rgba(237,230,214,.25);
  text-align:center;
}
.cold-foams__title{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--board-amber); font-weight:700; margin-bottom:.8rem;
}
.cold-foams__list{
  font-family:var(--serif); font-style:italic; color:var(--paper); font-size:1.05rem;
}

@media (max-width:960px){
  .fullboard{ grid-template-columns:repeat(2,1fr); }
  .board__row{ grid-template-columns:1fr; gap:.3rem; }
  .board__row--head{ display:none; }
}
@media (max-width:560px){
  .fullboard{ grid-template-columns:1fr; }
}

/* ============================================
   04 — THE CABOOSE (about)
   ============================================ */
.caboose{
  background:var(--paper); padding:7rem var(--edge);
  display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center;
}
.caboose__photos{ position:relative; height:clamp(360px,42vw,560px); }
.caboose__photo{
  position:absolute; object-fit:cover; border-radius:2px;
  box-shadow:0 24px 48px rgba(30,27,24,.22);
}
.caboose__photo--a{ width:66%; height:78%; top:0; left:0; z-index:2; }
.caboose__photo--b{ width:52%; height:56%; bottom:0; right:0; z-index:1; border:8px solid var(--paper); }
.caboose__eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); display:block; margin-bottom:2rem;
}
.caboose__block{ margin-bottom:2.2rem; padding-left:1.4rem; border-left:2px solid var(--pine); }
.caboose__block:last-child{ margin-bottom:0; }
.caboose__block h3{
  font-family:var(--display); font-size:1.5rem; color:var(--ink); margin-bottom:.5rem;
}
.caboose__block p{
  font-family:var(--serif); line-height:1.6; color:var(--ink-soft); max-width:44ch;
}

@media (max-width:900px){
  .caboose{ grid-template-columns:1fr; padding:5rem var(--edge); }
  .caboose__photos{ height:76vw; margin-bottom:1rem; }
}

/* ============================================
   05 — ALL ABOARD (visit)
   ============================================ */
.allaboard{ background:var(--ink); color:var(--paper); padding:7rem var(--edge) 5rem; }
.allaboard__inner{ max-width:1100px; margin:0 auto; }
.allaboard__eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--board-amber); display:block; margin-bottom:1rem;
}
.allaboard__title{ font-size:clamp(2.2rem,6vw,4rem); line-height:.92; margin-bottom:3.5rem; }
.allaboard__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:4rem;
}
.allaboard__where h3, .allaboard__schedule h3{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember-lite); margin-bottom:1.2rem;
}
.allaboard__where p{
  font-family:var(--serif); font-size:1.25rem; line-height:1.5; color:var(--paper);
}
.allaboard__caboose{ color:var(--board-amber); font-style:italic; }
.allaboard__phone{
  display:inline-block; margin-top:1.2rem; font-family:var(--mono);
  font-size:1rem; color:var(--paper); border-bottom:1px solid var(--ember-lite); padding-bottom:2px;
}
.schedule{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.95rem; }
.schedule td{ padding:.6rem 0; border-bottom:1px solid rgba(237,230,214,.14); }
.schedule td:first-child{ color:var(--paper-dim); letter-spacing:.1em; width:4rem; }
.schedule td:last-child{ text-align:right; color:var(--paper); }
.schedule__closed{ color:var(--ember-lite) !important; }
.allaboard__product{
  width:220px; margin:0 auto; opacity:.95; border-radius:2px;
}

@media (max-width:760px){
  .allaboard__grid{ grid-template-columns:1fr; gap:2.6rem; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  background:var(--ink); color:var(--paper-dim); text-align:center;
  padding:3rem var(--edge) 2.4rem; border-top:1px solid rgba(237,230,214,.12);
}
.footer__mark{
  font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--paper);
  text-transform:lowercase;
}
.footer__tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.6rem; }
.footer__copy{ font-family:var(--serif); font-size:.8rem; margin-top:1.4rem; opacity:.7; }