/* ==========================================================================
   DeepBlack Specialty Coffee
   Palette sampled from the graded footage (ink steel) and the shop's own
   materials: brushed stainless, a silver sign on a dark wall, matcha green.
   ========================================================================== */

:root{
  --canvas:#0b0e14;
  --canvas-2:#0f131b;
  --panel:#141924;
  --panel-2:#1a212e;
  --steel:#7d8899;
  --accent:#8fbf9f;
  --accent-hover:#a8d4b6;
  --accent-muted:#3a5548;
  --text-primary:#e8ecf2;
  --text-secondary:#9aa5b5;
  --line:#1e2634;
  --line-strong:#5c6675;

  --display:"Bai Jamjuree",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(3,5,9,.95),0 3px 12px rgba(3,5,9,.8),0 10px 44px rgba(3,5,9,.82);
  --rail-w:56px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.03vw,17px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.24;margin:0;letter-spacing:-.005em}
/* Thai has no spaces between words, so the browser breaks lines wherever its
   dictionary allows. Balancing keeps a single orphan syllable off its own line. */
h1,h2,h3,.band-headline,.sh-head,.h2,.h3{text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
.mono{font-family:var(--mono);font-weight:400;font-feature-settings:"tnum"}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;left:12px;top:-100px;z-index:200;
  background:var(--accent);color:#08131a;
  padding:10px 18px;border-radius:8px;font-weight:500;
  transition:top .3s var(--ease);
}
.skip-link:focus{top:12px}

/* --------------------------------------------------------------------------
   The environment: one fixed layer behind everything so scrolling feels like
   moving through a place instead of past stacked sections.
   -------------------------------------------------------------------------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--canvas)}
.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(48% 38% at 22% 18%,rgba(58,85,72,.20),transparent 70%),
    radial-gradient(42% 34% at 82% 72%,rgba(40,58,86,.24),transparent 72%),
    radial-gradient(60% 45% at 50% 108%,rgba(143,191,159,.07),transparent 74%);
  animation:envDrift 96s var(--ease) -22s infinite alternate;
}
@keyframes envDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,-2.5%,0) scale(1.09)}
}
.env-grain{
  position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   The cursor aura and the cup cursor.
   Both are for fine pointers only. A touch device has no cursor to decorate,
   and reduced motion switches the aura off completely.
   -------------------------------------------------------------------------- */
.aura{
  position:fixed;top:0;left:0;width:460px;height:460px;margin:-230px 0 0 -230px;
  z-index:50;pointer-events:none;opacity:0;
  will-change:transform;transform:translate3d(-999px,-999px,0);
  /* two layers on one element, so the frame still costs a single transform:
     a small bright core right under the cup, and a wide soft halo behind it.
     Both alphas were tuned against the worst hero frame with the light parked
     directly on a headline. Anything heavier eats the text contrast. */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(216,242,226,.20) 0%,
      rgba(190,226,204,.13) 4%,
      rgba(168,212,182,.05) 8%,
      rgba(168,212,182,0) 13%),
    radial-gradient(circle at 50% 50%,
      rgba(168,212,182,.115) 0%,
      rgba(143,191,159,.068) 22%,
      rgba(122,158,196,.036) 44%,
      rgba(143,191,159,0) 70%);
  transition:opacity .5s var(--ease);
}
.aura.on{opacity:1}

@media (pointer:fine){
  /* a low detail cup: four paths, no gradients, no filters */
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%2305070c' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M16 6.4h2.4a3.3 3.3 0 0 1 0 6.6H16'/%3E%3Cpath d='M3 4h13v9.5a4.8 4.8 0 0 1-4.8 4.8H7.8A4.8 4.8 0 0 1 3 13.5z'/%3E%3C/g%3E%3Cpath d='M16 6.4h2.4a3.3 3.3 0 0 1 0 6.6H16' fill='none' stroke='%23e8ecf2' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M3 4h13v9.5a4.8 4.8 0 0 1-4.8 4.8H7.8A4.8 4.8 0 0 1 3 13.5z' fill='%23e8ecf2'/%3E%3Cpath d='M4.3 6.7h10.4' stroke='%230b0e14' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 4, auto;}

  /* the hover cup: the coffee turns celadon and one wisp of steam lifts,
     so anything clickable still announces itself */
  a,button,summary,[role="button"],.faq-q,.hold,label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%2305070c' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M11 3.4c-1.2 1.1-1.2 2.2 0 3.3'/%3E%3Cpath d='M16 8.4h2.4a3.3 3.3 0 0 1 0 6.6H16'/%3E%3Cpath d='M3 6h13v9.5a4.8 4.8 0 0 1-4.8 4.8H7.8A4.8 4.8 0 0 1 3 15.5z'/%3E%3C/g%3E%3Cpath d='M11 3.4c-1.2 1.1-1.2 2.2 0 3.3' fill='none' stroke='%23a8d4b6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M16 8.4h2.4a3.3 3.3 0 0 1 0 6.6H16' fill='none' stroke='%23e8ecf2' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M3 6h13v9.5a4.8 4.8 0 0 1-4.8 4.8H7.8A4.8 4.8 0 0 1 3 15.5z' fill='%23e8ecf2'/%3E%3Cpath d='M4.3 8.7h10.4' stroke='%238fbf9f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 6, pointer;}

  input,textarea,select{cursor:auto}
}

@media (pointer:coarse){
  .aura{display:none}
  html,a,button,.faq-q,.hold{cursor:auto}
}

.wrap{width:min(1180px,calc(100% - clamp(28px,7vw,96px)));margin-inline:auto;position:relative;z-index:2}

/* --------------------------------------------------------------------------
   The signature: มาตรวัดความลึก, the depth rail
   -------------------------------------------------------------------------- */
.rail{
  position:fixed;left:20px;top:0;bottom:0;width:var(--rail-w);z-index:40;
  pointer-events:none;display:none;
  align-items:center;justify-content:center;
}
.rail-svg{position:absolute;left:16px;top:14vh;width:24px;height:72vh}
.rail-track{stroke:var(--line);stroke-width:1}
.rail-fill{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:400;stroke-dashoffset:400}
.rail-ticks{position:absolute;left:16px;top:14vh;height:72vh;width:24px}
.rail-ticks i{
  position:absolute;left:6px;width:12px;height:1px;background:var(--line);
  transition:background .5s var(--ease),width .5s var(--ease);
}
.rail-ticks i.on{background:var(--accent-muted);width:18px}
.rail-read{
  position:absolute;left:8px;top:calc(14vh + 72vh + 16px);
  font-size:11px;letter-spacing:.14em;color:var(--steel);
}
.rail-read::after{content:" ม.";font-family:var(--body);font-size:10px;opacity:.7;letter-spacing:0}
@media (min-width:1180px) and (min-height:640px){
  .rail{display:flex}
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(18px,4.4vw,44px);
  background:linear-gradient(180deg,rgba(11,14,20,.86),rgba(11,14,20,0));
  backdrop-filter:blur(2px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .5s var(--ease);
}
.nav.solid{
  background:rgba(11,14,20,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-block:10px;
}
.nav-mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-mark img{width:auto;height:42px;filter:drop-shadow(0 1px 6px rgba(3,5,9,.9))}
.nav-word{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.13em;
  line-height:1;display:flex;flex-direction:column;gap:3px;
}
.nav-word small{
  font-family:var(--mono);font-weight:400;font-size:8.5px;
  letter-spacing:.24em;color:var(--steel);
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a{
  text-decoration:none;font-size:14px;color:var(--text-secondary);
  transition:color .35s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links .btn{color:#08131a}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#08131a;
  font-family:var(--body);font-weight:500;font-size:15px;line-height:1;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  border:1px solid var(--accent);
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  text-shadow:none;position:relative;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(143,191,159,.2)}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn.ghost{
  background:transparent;color:var(--text-primary);border:1px solid var(--line-strong);
}
.btn.ghost:hover{background:rgba(143,191,159,.09);border-color:var(--accent);color:var(--accent-hover);box-shadow:none}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* inline links sit inside sentences, so they grow by padding rather than by
     a min-height that would break the line box */
  .link{padding-block:4px}
}

.link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted);
  display:inline-flex;align-items:center;gap:5px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.link:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

/* --------------------------------------------------------------------------
   Hero, the scrub stage
   -------------------------------------------------------------------------- */
/* a long hero on purpose: more scroll distance per second of footage means the
   pour moves slower under the hand and every caption gets a longer plateau */
.hero{position:relative;height:800vh;z-index:2}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--canvas-2);
}
.poster,#hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:center;
}
.poster{transition:opacity .8s var(--ease)}
#hero-video{
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

/* 1. the global base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 122% 92% at 50% 44%,rgba(8,10,16,0) 34%,rgba(8,10,16,.64) 100%),
    linear-gradient(180deg,rgba(8,10,16,.5) 0%,rgba(8,10,16,0) 26%);
}

.loader{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  color:var(--steel);opacity:1;transition:opacity .5s var(--ease);
}
.loader .ring{width:34px;height:34px;transform:rotate(-90deg)}
.loader circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0}

/* --- the bands: text lives in the left column, the action lane stays clear --- */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;
  /* the action lane stays clear: the column stops short of the cup and the
     pour, which are the brightest things in frame. width and vertical bias
     were both set from the worst frame audit, not by eye. */
  width:min(50%,610px);
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(26px,7.4vw,132px);padding-right:26px;
  padding-top:16vh;padding-bottom:4vh;
  opacity:0;text-shadow:var(--tshadow);
}
.band>*{position:relative;z-index:2}
.band .btn{text-shadow:none}
.band-cta{pointer-events:auto;display:block;margin-top:26px}
.band-cta .btn{pointer-events:auto}

/* 2. the per band scrim: dims exactly while that band's text is on.
   Two parts. The ellipse deepens the text column, the horizontal ramp carries
   that darkness cleanly out to the right so no glyph ever lands on a raw
   highlight. Both die out well before the centre, so the cup stays bright. */
.band::before{
  content:"";position:absolute;inset:-10% -60% -10% -30%;pointer-events:none;z-index:1;
  opacity:calc(.25 + .75*var(--k,1));
  background:
    radial-gradient(ellipse 62% 58% at 24% 52%,rgba(3,5,10,.80) 0%,rgba(3,5,10,.58) 48%,rgba(3,5,10,0) 78%),
    linear-gradient(90deg,rgba(3,5,10,.66) 0%,rgba(3,5,10,.58) 30%,rgba(3,5,10,.34) 52%,rgba(3,5,10,.08) 70%,rgba(3,5,10,0) 82%);
}

/* Thai never takes English style tracking, and IBM Plex Mono carries no Thai
   glyphs, so every Thai label runs on the body face with normal spacing.
   The tracked mono face is kept for Latin words and numerals only. */
.band-eyebrow{
  font-family:var(--body);font-weight:500;
  font-size:13px;letter-spacing:.01em;color:var(--accent);
  margin-bottom:18px;display:flex;align-items:center;gap:11px;
}
.band-eyebrow::before{
  content:"";width:26px;height:1px;background:var(--accent);flex:none;opacity:.8;
}
.band-headline{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.95rem,4.9vw,3.5rem);line-height:1.16;
  max-width:15ch;
}
.band-headline.sm{font-size:clamp(1.5rem,3.7vw,2.5rem);max-width:18ch}
.band .settle-word{
  font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:.05em;max-width:none;
}
.band-sub{
  font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.4em;color:var(--accent);margin-top:12px;
}
.band-meta{font-family:var(--body);font-size:13.5px;color:var(--text-secondary);margin-top:16px;letter-spacing:0}

/* --- the word and character spans built by JS --- */
.band .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.band .vis{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (f) drift down: echoes the pour falling */
.kind-drift .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (a) scatter: echoes steam gathering */
.kind-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (d) word punch with overshoot: echoes the arrival landing */
.kind-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.kind-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) word by word rise into a staged settle */
.kind-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.band-4 .band-sub{opacity:clamp(0,(var(--k,0) - .5)*3.4,1)}
.band-4 .band-meta{opacity:clamp(0,(var(--k,0) - .62)*3.6,1)}
.band-4 .band-cta{opacity:clamp(0,(var(--k,0) - .74)*4.2,1)}

.cue{
  position:absolute;left:50%;bottom:3.4vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--steel);font-size:11.5px;letter-spacing:0;
  opacity:1;transition:opacity .6s var(--ease);
}
.cue svg{width:12px;height:22px;animation:cueBob 2.9s var(--ease) -.6s infinite}
@keyframes cueBob{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
.cue.gone{opacity:0}

/* the composed still hero, shown at the five gates */
.static-hero{display:none}

/* --------------------------------------------------------------------------
   THE FIVE STATIC HERO GATES.
   These five strings must stay character for character identical to the
   GATES array in main.js, or one side loads what the other side hides.
   -------------------------------------------------------------------------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){

  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:88vh;min-height:88svh}
  .bands,.cue,.loader,#hero-video,.poster{display:none}

  .static-hero{
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;min-height:88vh;min-height:88svh;
    padding:96px clamp(22px,6vw,56px) clamp(38px,7vh,64px);
    background-image:linear-gradient(180deg,rgba(8,10,16,.55) 0%,rgba(8,10,16,.2) 34%,rgba(8,10,16,.86) 100%),url("hero-ending.jpg");
    background-size:cover;background-position:52% 46%;
    text-shadow:var(--tshadow);
  }
  .static-hero .sh-head{
    font-family:var(--display);font-weight:700;
    font-size:clamp(2rem,8.6vw,3.1rem);line-height:1.16;max-width:13ch;
  }
  .static-hero .sh-sub{
    margin-top:16px;color:var(--text-primary);font-size:14.5px;max-width:34ch;
  }
  .static-hero .sh-meta{
    margin-top:10px;color:var(--accent);font-size:13.5px;letter-spacing:0;font-weight:500;
  }
  .static-hero .band-eyebrow{margin-bottom:14px}
  .static-hero .btn{margin-top:26px;align-self:flex-start;text-shadow:none}
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section{position:relative;z-index:2;padding-block:clamp(72px,10.5vh,132px)}
.section-cta{padding-bottom:clamp(84px,12vh,150px)}

.kicker{
  display:flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:500;
  font-size:13px;letter-spacing:.01em;color:var(--accent);
  margin-bottom:16px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;opacity:.8}
.h2{font-size:clamp(1.75rem,4.1vw,2.9rem);max-width:19ch;margin-bottom:22px}
.h3{font-size:clamp(1.35rem,2.9vw,1.95rem);max-width:22ch}
.lede{font-size:clamp(1rem,1.22vw,1.13rem);color:var(--text-secondary);max-width:56ch}

/* the drip divider, drawn by scroll */
.drip{display:flex;justify-content:center;color:var(--accent-muted);position:relative;z-index:2}
.drip svg{width:26px;height:104px}
.drip-path{stroke-dasharray:210;stroke-dashoffset:210;transition:stroke-dashoffset 1.5s var(--ease-out)}
.drip.in .drip-path{stroke-dashoffset:0}

/* --- story --- */
.story-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(34px,5vw,72px);align-items:center}
.rating{
  margin-top:34px;display:inline-grid;grid-template-columns:auto auto;
  gap:2px 16px;align-items:baseline;
  padding:20px 26px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,var(--panel),var(--canvas-2));
  position:relative;overflow:hidden;
}
.rating::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 12% 0%,rgba(143,191,159,.20),transparent 68%);
  opacity:.35;animation:ratingGlow 8s ease-in-out -2.4s infinite;
}
@keyframes ratingGlow{0%,100%{opacity:.2}50%{opacity:.62}}
.rating-stars{grid-column:1;display:flex;gap:3px}
.rating-stars svg{width:14px;height:14px;fill:var(--accent)}
.rating-num{grid-column:2;grid-row:1 / span 2;font-size:2.5rem;line-height:.9;color:var(--text-primary);align-self:center}
.rating-note{grid-column:1;font-size:12.5px;color:var(--text-secondary);max-width:22ch}
.rating .link{grid-column:1 / -1;margin-top:12px;font-size:12.5px;justify-self:start}

.story-sign{margin:0;position:relative}
.story-sign img{
  width:100%;max-width:330px;margin-inline:auto;
  filter:drop-shadow(0 0 34px rgba(143,191,159,.16));
}
.story-sign figcaption{
  margin-top:14px;text-align:center;font-size:12.5px;
  letter-spacing:0;color:var(--steel);
}

/* --- cards --- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);margin-top:44px}
.card{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,var(--panel),var(--canvas-2));
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--accent-muted);box-shadow:0 22px 50px rgba(3,5,9,.55)}
/* the shop's photos are all portrait phone shots, so the frame is portrait too.
   Each one carries its own object-position so the crop centres on the drink,
   not on the middle of the file. */
.card-img{aspect-ratio:4/5;overflow:hidden;background:var(--canvas-2)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:24px 24px 28px;position:relative}
.card-num{
  display:block;font-size:11px;letter-spacing:.24em;color:var(--accent);margin-bottom:10px;position:relative;
}
.card-body h3{font-size:1.16rem;margin-bottom:10px}
.card-body p{font-size:14.5px;color:var(--text-secondary);max-width:34ch}

/* --- menu --- */
.pick{
  margin-top:38px;padding:22px clamp(20px,2.6vw,32px);
  border:1px solid var(--accent-muted);border-radius:16px;
  background:linear-gradient(150deg,rgba(58,85,72,.20),rgba(15,19,27,.6));
  position:relative;overflow:hidden;
}
.pick::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 120% at 88% 0%,rgba(143,191,159,.22),transparent 70%);
  opacity:.3;animation:ratingGlow 9s ease-in-out -3.5s infinite;
}
.pick-label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--accent);
  margin-bottom:14px;position:relative;z-index:1;
}
.pick-label::before{content:"";width:22px;height:1px;background:var(--accent);flex:none;opacity:.8}
.pick-list{display:flex;flex-wrap:wrap;gap:9px 10px;position:relative;z-index:1}
.pick-list li{
  font-size:13.5px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(11,14,20,.5);
  display:flex;align-items:baseline;gap:8px;
}
.pick-list b{color:var(--accent);font-weight:500;font-size:12.5px}

.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,34px);margin-top:38px;align-items:start}
.menu-h{
  font-size:.98rem;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.menu-h-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--accent);text-transform:none}
.price-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;font-size:13.8px;color:var(--text-secondary);
  border-bottom:1px dotted rgba(30,38,52,.9);
}
.price-list li:last-child{border-bottom:0}
.price-list span{min-width:0}
.price-list b{color:var(--text-primary);font-weight:400;font-size:13px;flex:none}
.menu-note{margin-top:30px;font-size:13px;color:var(--text-secondary)}

/* --- the one interactive moment --- */
.roast{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4.4vw,64px);align-items:center;
  padding:clamp(28px,3.6vw,48px);border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(155deg,var(--panel),var(--canvas-2));
}
.roast-copy p{color:var(--text-secondary);font-size:14.8px;max-width:44ch;margin-top:14px}
.roast-out{
  margin-top:22px !important;color:var(--accent) !important;
  font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;
  min-height:2.9em;
}
.roast-tool{display:flex;flex-direction:column;align-items:center;gap:24px}
.roast-swatch{
  width:100%;max-width:220px;aspect-ratio:1;border-radius:50%;
  background:#c8a273;position:relative;overflow:hidden;
  border:1px solid var(--line);
  transition:background .35s linear,box-shadow .6s var(--ease);
}
.roast-swatch.done{box-shadow:0 0 0 1px var(--accent-muted),0 18px 46px rgba(3,5,9,.6)}
.roast-shine{
  position:absolute;inset:0;
  background:radial-gradient(42% 38% at 32% 26%,rgba(255,255,255,.34),transparent 68%);
  animation:shineDrift 11s ease-in-out -3s infinite alternate;
}
@keyframes shineDrift{0%{transform:translate(0,0)}100%{transform:translate(7%,6%)}}
.hold{
  position:relative;width:112px;height:112px;border:0;background:none;padding:0;
  cursor:pointer;color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.hold svg{width:112px;height:112px;transform:rotate(-90deg)}
.hold-track{fill:none;stroke:var(--line-strong);stroke-width:2}
.hold::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,rgba(143,191,159,.12),rgba(11,14,20,.4) 70%);
  transition:background .4s var(--ease);
}
.hold:hover::before{background:radial-gradient(circle at 50% 34%,rgba(143,191,159,.22),rgba(11,14,20,.4) 70%)}
.hold svg,.hold .hold-label{position:relative;z-index:1}
.hold-prog{
  fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:314;
}
.hold-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:500;
  font-size:12.5px;letter-spacing:0;color:var(--text-secondary);
  transition:color .35s var(--ease);
}
.hold:hover .hold-label{color:var(--text-primary)}
.hold.done .hold-label{color:var(--accent)}

/* --- faq --- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4.6vw,72px);align-items:start}
.faq-img{margin:32px 0 0}
.faq-img img{width:100%;max-width:300px;border-radius:16px;border:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font-family:var(--body);font-weight:400}
.faq-q{
  width:100%;background:none;border:0;padding:20px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,17.5px);
  color:var(--text-primary);text-align:left;line-height:1.5;
  transition:color .35s var(--ease);
}
.faq-q:hover{color:var(--accent)}
@media (pointer:coarse){.faq-q{min-height:44px}}
.plus{position:relative;width:15px;height:15px;flex:none}
.plus::before,.plus::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1.4px;
  background:var(--accent);transition:transform .45s var(--ease);
}
.plus::after{transform:rotate(90deg)}
.faq-item.open .plus::after{transform:rotate(0deg)}
.faq-a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq-a p{padding-bottom:22px;color:var(--text-secondary);font-size:14.5px;max-width:52ch}

/* --- cta --- */
.cta{
  text-align:center;padding:clamp(38px,5.4vw,68px) clamp(24px,4vw,54px);
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(165deg,var(--panel-2),var(--canvas-2));
  position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 50% 116%,rgba(143,191,159,.26),transparent 68%);
  opacity:.4;animation:ratingGlow 10s ease-in-out -4s infinite;
}
.cta>*{position:relative;z-index:1}
.cta .kicker{justify-content:center}
.cta .h2{margin-inline:auto}
.cta .h2{max-width:16ch}
.cta-addr{color:var(--text-secondary);font-size:15px;margin-top:4px}
.cta-hint{font-size:13px;color:var(--steel)}
.hours{
  margin:30px auto 0;max-width:420px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(11,14,20,.5);
}
.hours-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 20px;font-size:14px;border-bottom:1px solid var(--line);
}
.hours-row:last-child{border-bottom:0}
.hours-row b{font-weight:500;font-size:13.5px;color:var(--accent);font-feature-settings:"tnum"}
.hours-row.is-off{color:var(--steel)}
.hours-row.is-off b{color:var(--steel)}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* --- footer --- */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:clamp(44px,6vh,72px) 34px;background:rgba(8,10,15,.6)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.foot-brand img{height:76px;width:auto}
.foot-name{
  margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.14em;line-height:1.5;
}
.foot-name span{display:block;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.24em;color:var(--steel)}
.foot-h{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.01em;color:var(--accent);margin-bottom:12px}
.foot-col p{font-size:13.5px;color:var(--text-secondary)}
.foot-col p+p{margin-top:8px}
.foot-plus{color:var(--steel) !important;font-size:12px !important;letter-spacing:.1em}
.foot-note{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;letter-spacing:0;color:var(--steel)}

/* --------------------------------------------------------------------------
   Entrances. Start and end states are prefixed with the container class so a
   later rule cannot silently cancel them.
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.stagger .reveal:nth-child(1){transition-delay:0ms}
.stagger .reveal:nth-child(2){transition-delay:90ms}
.stagger .reveal:nth-child(3){transition-delay:180ms}
.stagger .reveal:nth-child(4){transition-delay:270ms}
/* retire the stagger once the entrance is done, or every later hover lags.
   the selector repeats nth-child so it matches the specificity it retires. */
.stagger.done .reveal:nth-child(1),
.stagger.done .reveal:nth-child(2),
.stagger.done .reveal:nth-child(3),
.stagger.done .reveal:nth-child(4){transition-delay:0ms !important}

/* pause every animation on hidden tabs. animation-play-state does not
   inherit, so this has to hit elements and pseudo elements directly. */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-grid{grid-template-columns:1fr;gap:38px}
  .story-sign img{max-width:230px}
  .faq-grid{grid-template-columns:1fr;gap:28px}
  .faq-img{display:none}
  .roast{grid-template-columns:1fr;gap:34px}
  .roast-tool{flex-direction:row;justify-content:center;gap:32px}
  .roast-swatch{max-width:150px}
}
@media (max-width:820px){
  .cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .nav-links a:not(.btn){display:none}
  .nav-word small{display:none}
}
@media (max-width:600px){
  .menu-grid{grid-template-columns:1fr}
  .rating{grid-template-columns:1fr auto;width:100%}
  .roast-tool{flex-direction:column}
  .cta-btns .btn{width:100%}
}
/* short screens have no room for the small scroll driven overlays */
@media (max-height:560px){
  .cue,.rail{display:none}
}

/* --------------------------------------------------------------------------
   Reduced motion, honored completely
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal{opacity:1;transform:none}
  .drip-path{stroke-dashoffset:0}
  .rail-fill{stroke-dashoffset:0}
  .aura{display:none}
  /* positional transforms are re-applied, never blanket removed */
  .loader,.cue{display:none}
  .nav{background:rgba(11,14,20,.94)}
}