:root{
  --paper:#f4f1eb;
  --ink:#1b1310;
  --ink-2:#4d3c31;
  --ink-3:#8e7c6e;
  --cream:#f6ead2;
  --cream-2:#d9c1a0;
  --cream-3:#a08a76;
  --rule:rgba(27,19,16,.17);
  --rule-dark:rgba(246,234,210,.22);
  --orange:#ed5a14;
  --gold:#d99d21;
  --blue:#1e5fce;
  --navy:#16305f;
  --green:#3f7a2e;
  --cocoa:#6b3a1e;
  --hot:#8d9657;              
  --pad:clamp(16px,3.2vw,44px);
  --bot:74px;
  --ease:cubic-bezier(.2,1,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{ background:var(--paper); }
body{
  background:transparent;
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
#scene{
  position:fixed; inset:0; z-index:0;
  display:block; width:100%; height:100%;
}
.grain{
  position:fixed; inset:0; z-index:6;
  pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background-repeat:repeat;
}
.kicker,.tally,.sub,.hint,.buy,.livemeta,.price,.ribkeys,.live span,.rowmeta,.rowprice{
  font-family:"DM Mono",ui-monospace,monospace;
}
.topframe{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
  padding:calc(var(--pad)*.52) var(--pad) calc(var(--pad)*.4);
  border-bottom:1px solid var(--rule);
  background:linear-gradient(to bottom,rgba(244,241,235,.97),rgba(244,241,235,.84));
  backdrop-filter:blur(3px);
  pointer-events:none;
}
.ident{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.mark{ font-size:clamp(18px,2vw,24px); font-weight:700; letter-spacing:.16em; line-height:1 }
.sub{ font-size:12px; color:var(--ink-3); letter-spacing:.02em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stations{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,26px);
  pointer-events:auto; flex:0 1 auto; min-width:0;
}
.stations a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
  transition:color .28s ease, letter-spacing .34s var(--ease);
}
.stations a::before{
  content:""; width:5px; height:5px; margin-right:7px; flex:0 0 auto;
  background:currentColor; opacity:.5;
  transition:opacity .28s ease, transform .34s var(--ease);
}
.stations a:hover{ color:var(--ink); letter-spacing:.13em }
.stations a.on{ color:var(--orange) }
.stations a.on::before{ opacity:1; transform:scale(1.9) }
.tally{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
  transition:color .5s linear;
}
.tally.some{ color:var(--orange) }
#page{ position:relative; z-index:3; }
.stop{
  position:absolute; left:0; top:0;
  width:min(46vw,520px);
  opacity:0; pointer-events:none;
  transform:translateY(16px);
  transform-origin:left top;
  will-change:opacity,transform;
}
.stop.lit{ pointer-events:auto }
.kicker{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); margin-bottom:clamp(8px,1.1vw,14px);
}
.stop h1,.stop h2{
  font-weight:600; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(28px,3.5vw,50px);
}
.stop[data-size="l"] h2{ font-size:clamp(32px,4.4vw,64px) }
.stop[data-size="s"] h2{ font-size:clamp(24px,2.6vw,36px) }
.big{
  font-weight:600; letter-spacing:-.055em; line-height:.8;
  font-size:clamp(96px,13vw,196px);
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.big i{ font-style:normal; font-size:.34em; letter-spacing:-.02em; color:var(--orange) }
.note{
  margin-top:clamp(10px,1.3vw,18px);
  max-width:44ch; font-size:15px; line-height:1.6; color:var(--ink-2);
}
.note.em{ color:var(--ink) }
.note.em::first-line{ font-style:italic }
.ribbon{
  display:flex; align-items:stretch;
  height:clamp(26px,3.2vw,40px);
  margin-top:clamp(14px,1.8vw,22px);
  overflow:hidden;
}
.ribbon span{ display:block; height:100%; transition:none }
.ribbon span[data-k="acid"]{ background:var(--gold) }
.ribbon span[data-k="sugar"]{ background:var(--cocoa) }
.ribbon span[data-k="carbon"]{ background:#2c2523 }
.ribkeys{
  margin-top:7px; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.ribkeys b{ color:var(--ink); font-weight:500 }
.run{ display:flex; flex-direction:column; margin-top:clamp(12px,1.6vw,20px) }
.roastrow{
  appearance:none; border:none; background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer;
  display:flex; align-items:baseline; gap:1px 14px; flex-wrap:wrap;
  padding:9px 0 8px;
  border-top:1px solid var(--rule);
  min-height:46px;
  transition:color .3s ease, padding-left .42s var(--ease);
}
.roastrow:last-child{ border-bottom:1px solid var(--rule) }
.roastrow:hover{ padding-left:11px; color:var(--orange) }
.rowname{ font-size:16px; font-weight:600; letter-spacing:-.02em; flex:1 1 auto }
.rowmeta{ font-size:10.5px; letter-spacing:.02em; line-height:1.45;
          color:var(--ink-3); flex:1 1 100%; min-width:0 }
.rowprice{ font-size:12.5px; letter-spacing:.03em; flex:0 0 auto; color:var(--ink-2) }
.roastrow.on .rowname{ color:var(--orange) }
.roastrow .tick{ color:var(--gold); font-size:11px; letter-spacing:.1em }
.grip{
  position:fixed; z-index:5;
  cursor:grab; touch-action:none;
}
.grip:active{ cursor:grabbing }
.hint{
  position:fixed; z-index:5; pointer-events:none;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-2); white-space:nowrap;
  transition:opacity .6s ease, transform .6s var(--ease);
}
.hint span{ display:inline-block; animation:nudge 2.4s var(--ease) infinite }
.hint.gone{ opacity:0; transform:translateY(6px) }
@keyframes nudge{
  0%,100%{ transform:translateX(0) }
  46%{ transform:translateX(10px) }
  62%{ transform:translateX(6px) }
}
.botframe{
  position:fixed; bottom:0; left:0; right:0; z-index:5;
  height:var(--bot);
  display:flex; align-items:center; gap:clamp(10px,1.8vw,26px);
  padding:0 var(--pad);
  border-top:1px solid var(--rule-dark);
  color:var(--cream);
}
.swatch{ display:block; width:30px; height:38px; flex:0 0 auto }
.live{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto }
.live b{
  font-size:clamp(15px,1.7vw,21px); font-weight:600; letter-spacing:-.015em;
  line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.live span{
  font-size:11.5px; letter-spacing:.07em; color:var(--cream-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.price{
  display:flex; align-items:flex-start; gap:1px; flex:0 0 auto;
  color:var(--cream); line-height:1;
}
.price i{ font-style:normal; font-size:12px; padding-top:3px; color:var(--cream-3) }
.price b{ font-size:clamp(21px,2.4vw,30px); font-weight:500; font-variant-numeric:tabular-nums }
.buy{
  appearance:none; border:none; background:var(--orange); color:#22150c;
  font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:500;
  padding:0 20px; min-height:46px; flex:0 0 auto; cursor:pointer;
  transition:background .26s ease, letter-spacing .32s var(--ease), color .26s ease;
}
.buy:hover:not(:disabled){ letter-spacing:.2em; background:#ff7128 }
.buy:disabled{ background:none; color:var(--cream-3); cursor:not-allowed }
.buy.done{ background:#5f9f3a; color:#0e1a08 }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }
@media (max-width:860px){
  :root{ --bot:96px }
  .topframe{ align-items:center; padding-top:7px; padding-bottom:0; flex-wrap:wrap; gap:0 12px }
  .sub{ display:none }
  .ident{ flex:1 1 auto }
  .stations{ order:3; flex:1 1 100%; justify-content:space-between; gap:4px }
  .stations a{ font-size:11px; letter-spacing:.01em; min-height:44px }
  .stations a::before{ display:none }
  .stop{ width:auto }
  .note{ font-size:14.5px; max-width:none }
  .botframe{ flex-wrap:wrap; align-content:center; gap:4px 12px; padding-top:8px; padding-bottom:9px }
  .swatch{ width:24px; height:31px }
  .live{ flex:1 1 auto }
  .price{ order:3; margin-left:auto }
  .buy{ order:4; flex:0 0 auto; margin-left:auto; min-height:44px; padding:0 16px;
        font-size:11px; display:flex; align-items:center; justify-content:center }
  .rowmeta{ flex:1 1 100% }
}
@media (max-width:520px){
  .big{ font-size:clamp(78px,26vw,120px) }
  .stop h1,.stop h2{ font-size:clamp(25px,7.6vw,34px) }
  .stop[data-size="l"] h2{ font-size:clamp(27px,8.4vw,38px) }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .hint span{ animation:none }
  *{ transition-duration:.001s !important }
}