/* ===== Pilot's Coffee — scroll journey (below the hero) ===== */

/* unlock scrolling (styles.css locks it for the fixed hero) */
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; overflow-y:auto; height:auto; }
body{ background:var(--paper); }

/* ---------- HERO as a scrolling screen ---------- */
.hero-screen{ position:relative; width:100%; height:100svh; min-height:560px; overflow:hidden; }
.hero-screen #c1{ position:absolute; inset:0; }

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(16px,2.6vh,30px); transform:translateX(-50%);
  z-index:25; display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--type); letter-spacing:.3em; text-transform:uppercase;
  font-size:11px; color:var(--ink-soft); text-decoration:none;
  text-shadow:0 1px 0 rgba(255,250,240,.4); cursor:pointer;
}
.scroll-cue .chev{ width:13px; height:13px; border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); animation:cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(3px,3px);} }

/* ---------- JOURNEY shell ---------- */
.journey{ position:relative; z-index:1; background:var(--paper); }
.journey::before{ /* page-wide tonal unevenness + faint organic stains (BEHIND cards) */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 26% at 88% 6%, rgba(120,80,40,.12), transparent 60%),
    radial-gradient(40% 22% at 6% 32%, rgba(120,90,50,.09), transparent 60%),
    radial-gradient(50% 28% at 94% 54%, rgba(108,72,36,.10), transparent 62%),
    radial-gradient(44% 24% at 4% 78%, rgba(116,80,44,.09), transparent 62%),
    radial-gradient(60% 30% at 60% 98%, rgba(96,62,30,.10), transparent 64%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'900'%20height%3D'900'%3E%3Cfilter%20id%3D'j'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.006'%20numOctaves%3D'3'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.40%200%200%200%200%200.27%200%200%200%200%200.13%200%200%200%205%20-2.7'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23j)'%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,auto,auto,900px 900px;
  mix-blend-mode:multiply;
}
.journey .grain{ position:fixed; inset:0; z-index:3; pointer-events:none; }

/* CLEAN VARIANT — strip journey aging */
body.clean .journey::before,
body.clean .journey .grain{ display:none !important; background:none !important; }

/* engineering grid removed — it created visible seam lines down the page */

/* ---------- flight path (single continuous scroll-driven thread) ---------- */
.flight-path{ position:absolute; inset:0; width:100%; z-index:0; pointer-events:none; transform:none; }
.fp-svg{ position:absolute; top:0; left:0; overflow:visible; }
.fp-line{ fill:none; stroke:rgba(60,50,38,.55); stroke-width:3; stroke-dasharray:9 13; opacity:.34; }
.plane-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.plane-layer .plane{
  position:absolute; left:0; top:0; width:42px; height:42px; margin:-21px 0 0 -21px;
  opacity:.95; will-change:transform;
  filter:drop-shadow(0 5px 7px rgba(36,31,24,.34));
}
.plane-layer .plane-rot{
  width:100%; height:100%; transform-origin:center center; will-change:transform;
  transition:transform .5s cubic-bezier(.45,.03,.2,1);   /* smooth bank + turn-around on scroll-up */
}
.plane-layer .plane svg{ width:100%; height:100%; display:block; }
.land-tower{
  position:absolute; top:0; left:0; width:32px; height:48px; transform:translate(-50%,-100%);
  pointer-events:none; z-index:3; filter:drop-shadow(0 4px 5px rgba(36,31,24,.3));
}
.land-tower svg{ width:100%; height:100%; display:block; }

/* fluffy clouds along the descent */
.fp-cloud{ position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  pointer-events:none; will-change:transform; visibility:hidden;
  filter:drop-shadow(0 8px 10px rgba(150,120,80,.10)); }
.fp-cloud svg{ display:block; width:100%; height:auto;
  animation:cloudDrift var(--cd,12s) ease-in-out var(--cdd,0s) infinite alternate; }
.fp-cloud path{ fill:#fdfaf2; }
.fp-cloud.back{  z-index:1; opacity:.95; }
.fp-cloud.front{ z-index:3; opacity:.72; }
@keyframes cloudDrift{ from{ transform:translateX(-9px); } to{ transform:translateX(9px); } }
@media (prefers-reduced-motion:reduce){ .fp-cloud svg{ animation:none; } }

/* ---------- intro / story strip ---------- */
.strip{
  position:relative; z-index:1; max-width:980px; margin:0 auto;
  padding:clamp(70px,13vh,150px) 6vw clamp(40px,7vh,90px); text-align:center;
}
.strip .kicker{ display:inline-block; margin-bottom:clamp(14px,2vh,22px); }
.strip-title{ font-family:var(--display); text-transform:uppercase; color:var(--ink);
  line-height:.98; font-size:clamp(30px,5vw,72px); letter-spacing:.01em; text-wrap:balance; }
.strip-title .accent{ color:var(--rust); }
.strip-sub{ font-family:var(--type); color:var(--ink-soft); line-height:1.85;
  font-size:clamp(13px,1.3vw,17px); max-width:60ch; margin:clamp(18px,3vh,30px) auto 0; text-wrap:pretty; }

/* ---------- cup detour panel ---------- */
.cup-panel{ position:relative; z-index:1; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,6vh,70px) 6vw; overflow:hidden; }
.cup-stage{ position:relative; width:min(385px,80vw); }
.cup-svg{ width:100%; height:auto; display:block; overflow:visible; }
.cup-caption{ position:absolute; left:0; top:20%; transform:none;
  width:min(34%,185px); text-align:left; margin:0;
  font-family:var(--display); text-transform:uppercase; color:var(--ink);
  line-height:1.05; font-size:clamp(16px,1.95vw,26px); letter-spacing:.015em; text-wrap:balance; }
.cup-caption .accent{ color:var(--rust); }

/* steam rising from the mug mouth (~46% down the stage) */
.cup-steam{ position:absolute; left:50%; bottom:57%; width:120px; height:140px;
  transform:translateX(-50%); pointer-events:none; z-index:2; }
.cup-steam span{ position:absolute; bottom:0; left:var(--x,50%);
  width:var(--w,13px); height:var(--h,96px); margin-left:calc(var(--w,13px) / -2);
  border-radius:50% 50% 46% 46% / 70% 70% 30% 30%;
  background:linear-gradient(to top, rgba(255,250,240,0) 0%, rgba(255,250,240,.5) 40%,
     rgba(255,248,236,.34) 66%, rgba(255,248,236,0) 100%);
  filter:blur(4px); opacity:0; transform-origin:50% 100%;
  animation:cup-steam-rise var(--dur,6s) linear var(--delay,0s) infinite; }
.cup-steam span:nth-child(1){ --x:40%; --w:14px; --h:100px; --dur:5.6s; --delay:0s; }
.cup-steam span:nth-child(2){ --x:50%; --w:11px; --h:88px;  --dur:6.6s; --delay:1.4s; }
.cup-steam span:nth-child(3){ --x:58%; --w:15px; --h:108px; --dur:6s;   --delay:2.6s; }
.cup-steam span:nth-child(4){ --x:49%; --w:12px; --h:92px;  --dur:7.2s; --delay:3.8s; }
@keyframes cup-steam-rise{
  0%{   transform:translateY(0)     translateX(0)   scaleX(.6) scaleY(.7); opacity:0; }
  14%{  opacity:.7; }
  46%{  transform:translateY(-58px) translateX(-8px) scaleX(1) scaleY(1.12); opacity:.5; }
  74%{  transform:translateY(-100px) translateX(8px) scaleX(1.25) scaleY(1.3); opacity:.22; }
  100%{ transform:translateY(-140px) translateX(-4px) scaleX(1.5) scaleY(1.5); opacity:0; }
}
@media (max-width:680px){
  .cup-caption{ position:static; transform:none; width:auto; text-align:center;
    margin:18px auto 0; }
  .cup-stage{ display:flex; flex-direction:column; align-items:center; }
}

/* continuous connective steam: a column of rising wisps spanning cup -> hero
   (top/height + wisps generated in JS so it never breaks between sections) */
.steam-thread{ position:absolute; left:50%; transform:translateX(-50%);
  width:170px; pointer-events:none; z-index:0; }
.steam-thread span{ position:absolute; left:50%; bottom:var(--oy,0px);
  width:var(--w,16px); height:158px;
  margin-left:calc(var(--w,16px) / -2 + var(--xj,0px));
  border-radius:50% 50% 46% 46% / 70% 70% 30% 30%;
  background:linear-gradient(to top, rgba(255,253,248,0) 0%, rgba(255,253,248,.8) 40%,
     rgba(255,251,244,.54) 68%, rgba(255,251,244,0) 100%);
  filter:blur(5px); opacity:0; transform-origin:50% 100%; will-change:transform,opacity;
  animation:steam-thread-rise var(--dur,10s) ease-in var(--delay,0s) infinite; }
@keyframes steam-thread-rise{
  0%{   transform:translateY(0) translateX(0) scaleX(.55) scaleY(.7);  opacity:0; }
  14%{  opacity:.78; }
  50%{  transform:translateY(calc(var(--rise,280px) * -0.5))  translateX(-9px) scaleX(1)    scaleY(1.16); opacity:.54; }
  78%{  transform:translateY(calc(var(--rise,280px) * -0.82)) translateX(9px)  scaleX(1.22) scaleY(1.3);  opacity:.26; }
  100%{ transform:translateY(calc(var(--rise,280px) * -1))    translateX(-4px) scaleX(1.42) scaleY(1.5);  opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .steam-thread{ display:none; } }

/* ---------- coffee entry ---------- */
.coffee{ position:relative; z-index:1; padding:clamp(50px,9vh,110px) 6vw; }
.coffee-inner{
  max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,5vw,80px); align-items:center;
}
.coffee.reverse .coffee-inner{ grid-template-columns:1.05fr 1fr; }
.coffee.reverse .photo-col{ order:2; }

/* photo: taped field photograph */
.photo-col{ position:relative; display:flex; justify-content:center; }
.polaroid{
  position:relative; margin:0; background:#f3ecda; padding:14px 14px 54px;
  box-shadow:0 26px 50px -22px rgba(36,25,12,.6), 0 2px 0 rgba(255,255,255,.5) inset;
  transform:rotate(-2.2deg); max-width:380px; width:100%;
  border:1px solid rgba(60,50,38,.18);
}
.coffee.reverse .polaroid{ transform:rotate(2.4deg); }
.polaroid .ph-frame{ position:relative; overflow:hidden; background:#1a140d; aspect-ratio:3/4.4; }
.polaroid .ph-frame img,
.polaroid .ph-frame image-slot{ width:100%; height:100%; display:block; object-fit:cover; }
.polaroid .ph-frame img{ filter:sepia(.34) saturate(.85) contrast(1.06) brightness(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-family:var(--type); font-size:12.5px; letter-spacing:.12em; color:#5a4d3c; text-transform:uppercase; }
.tape{ position:absolute; width:108px; height:30px; background:rgba(214,196,150,.55);
  border:1px solid rgba(150,120,70,.25); box-shadow:0 2px 5px rgba(0,0,0,.12);
  backdrop-filter:blur(.5px); }
.tape.tl{ top:-14px; left:-22px; transform:rotate(-34deg); }
.tape.br{ bottom:30px; right:-24px; transform:rotate(-32deg); }

/* origin destination stamp on the photo */
.origin-stamp{
  position:absolute; z-index:4; right:-14px; top:-18px;
  font-family:var(--display); text-transform:uppercase; color:var(--rust-deep);
  border:4px solid var(--rust-deep); border-radius:6px; padding:7px 16px 5px;
  font-size:clamp(17px,1.7vw,24px); letter-spacing:.06em; transform:rotate(8deg);
  background:rgba(243,236,218,.5); box-shadow:inset 0 0 0 2px rgba(151,67,36,.3);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.coffee.reverse .origin-stamp{ right:auto; left:-14px; transform:rotate(-8deg); }

/* info / manifest card */
.manifest{ position:relative; }
.manifest-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(10px,1.6vh,16px); }
.manifest-head .no{ position:relative; font-family:var(--display); color:var(--rust); font-size:clamp(20px,2.4vw,34px); letter-spacing:.04em; cursor:help; border-bottom:2px dotted rgba(151,67,36,.5); padding-bottom:1px; outline:none; }
.manifest-head .roast{ font-family:var(--type); text-transform:uppercase; letter-spacing:.22em;
  font-size:clamp(10px,1vw,12.5px); color:var(--ink-mute); white-space:nowrap; }
.manifest-head .roast::before{ content:''; display:inline-block; width:26px; height:1px; background:var(--ink-mute);
  vertical-align:middle; margin-right:10px; }

/* ---------- origin easter-egg: hover a lot number, a plane arcs out ---------- */
.origin-flyout{ position:absolute; left:-14px; bottom:calc(100% + 2px); width:300px; height:140px;
  pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:9; }
.manifest-head .no:hover .origin-flyout,
.manifest-head .no:focus-visible .origin-flyout,
.manifest-head .no.of-open .origin-flyout{ opacity:1; }
.of-arc{ position:absolute; left:0; bottom:0; width:300px; height:140px; overflow:visible; }
.of-arc path{ fill:none; stroke:var(--rust); stroke-width:2; stroke-dasharray:2.5 6; stroke-linecap:round; opacity:.7; }
.of-plane{ position:absolute; left:0; top:0; width:24px; height:24px;
  offset-path:path('M24 132 C46 78 104 56 168 50'); offset-rotate:auto; offset-distance:0%; opacity:0; }
.of-plane svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(36,31,24,.32)); }
.manifest-head .no:hover .of-plane,
.manifest-head .no:focus-visible .of-plane,
.manifest-head .no.of-open .of-plane{ animation:ofFly 1s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes ofFly{ 0%{ offset-distance:0%; opacity:0; } 14%{ opacity:1; } 84%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
.of-card{ position:absolute; left:150px; top:0; width:152px; box-sizing:border-box;
  background:var(--paper-warm,#f3ecda); border:1px solid rgba(60,50,38,.32);
  box-shadow:0 14px 28px -16px rgba(36,25,12,.6); padding:11px 13px 12px;
  opacity:0; transform:translateY(6px) rotate(-1.6deg); transition:opacity .3s ease .42s, transform .3s ease .42s; }
.manifest-head .no:hover .of-card,
.manifest-head .no:focus-visible .of-card,
.manifest-head .no.of-open .of-card{ opacity:1; transform:translateY(0) rotate(-1.6deg); }
.of-loc{ display:block; font-family:var(--display); text-transform:uppercase; color:var(--rust);
  font-size:15px; letter-spacing:.04em; margin-bottom:5px; }
.of-note{ display:block; font-family:var(--type); font-size:11px; line-height:1.55; color:var(--ink-soft); }
@media (prefers-reduced-motion:reduce){
  .manifest-head .no:hover .of-plane, .manifest-head .no:focus-visible .of-plane, .manifest-head .no.of-open .of-plane{ animation:none; offset-distance:100%; opacity:1; }
}
.coffee-name{ font-family:var(--display); text-transform:uppercase; color:var(--ink);
  line-height:.94; font-size:clamp(30px,4.2vw,60px); letter-spacing:.005em; margin:0 0 clamp(14px,2vh,20px); text-wrap:balance; }

.notes{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(16px,2.4vh,24px); }
.notes span{ font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(11px,1vw,13px); color:var(--ink-soft);
  border:1.5px solid rgba(60,50,38,.35); border-radius:30px; padding:6px 14px; background:rgba(255,250,238,.35); }

.desc{ font-family:var(--type); color:var(--ink-soft); line-height:1.85;
  font-size:clamp(13px,1.15vw,15.5px); max-width:52ch; margin:0 0 clamp(20px,3vh,28px); text-wrap:pretty; }

.specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(60,50,38,.25);
  border:1px solid rgba(60,50,38,.25); margin:0 0 clamp(22px,3.2vh,32px); }
.specs div{ background:var(--paper-warm); padding:11px 16px; }
.specs dt{ font-family:var(--type); text-transform:uppercase; letter-spacing:.2em;
  font-size:9.5px; color:var(--ink-mute); margin-bottom:3px; }
.specs dd{ font-family:var(--cond); font-weight:600; font-size:clamp(13px,1.2vw,16px); color:var(--ink); margin:0; }

.buy{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap; }
.price{ font-family:var(--display); color:var(--ink); font-size:clamp(28px,3.4vw,46px); letter-spacing:.02em; white-space:nowrap; }
.price small{ font-family:var(--type); font-size:12px; letter-spacing:.16em; color:var(--ink-mute); margin-left:6px; }
.add-bag{ position:relative; }
.add-bag.added{ background:var(--ink); }

/* placeholder note on the WIP coffee */
.wip-flag{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:var(--type); text-transform:uppercase; letter-spacing:.2em; font-size:10px;
  color:var(--rust-deep); border:1.5px dashed var(--rust-deep); border-radius:3px; padding:5px 10px; }
.is-placeholder .coffee-name,
.is-placeholder .desc{ opacity:.78; }

/* ---------- footer ---------- */
.site-foot{ position:relative; z-index:1; background:#211b13; color:var(--cream);
  padding:clamp(48px,8vh,88px) 6vw clamp(34px,5vh,54px); margin-top:clamp(40px,7vh,90px); }
.foot-inner{ max-width:1140px; margin:0 auto; display:flex; align-items:flex-start;
  justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand{ display:flex; flex-direction:column; gap:14px; max-width:340px; }
.foot-brand img{ width:170px; }
.foot-brand p{ font-family:var(--type); font-size:12.5px; line-height:1.8; color:rgba(239,231,212,.7); }
.foot-cols{ display:flex; gap:clamp(36px,6vw,80px); flex-wrap:wrap; }
.foot-col h4{ font-family:var(--type); text-transform:uppercase; letter-spacing:.24em; font-size:11px;
  color:rgba(239,231,212,.55); margin:0 0 14px; }
.foot-col a{ display:block; font-family:var(--cond); font-weight:500; text-transform:uppercase; letter-spacing:.08em;
  font-size:14px; color:rgba(239,231,212,.85); text-decoration:none; margin-bottom:10px; transition:color .2s; }
.foot-col a:hover{ color:var(--rust); }
.foot-base{ max-width:1140px; margin:clamp(34px,5vh,54px) auto 0; padding-top:22px;
  border-top:1px solid rgba(239,231,212,.16); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--type); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(239,231,212,.5); }

/* ============================================================
   SCROLL REVEAL ENGINE — 5 styles toggled via body[data-scroll]
   ============================================================ */
/* Visibility is INSTANT on reveal (never gated on an animation timeline);
   only the transform animates, so content can never be stuck invisible. */
[data-reveal]{ opacity:0; }
body:not(.js) [data-reveal]{ opacity:1 !important; transform:none !important; }

[data-reveal].is-in{
  opacity:1;
  animation-duration:.85s; animation-timing-function:cubic-bezier(.2,.75,.2,1);
  animation-fill-mode:both;
}

@keyframes rv-drift{ from{ transform:translateY(46px);} to{ transform:none;} }
@keyframes rv-up{    from{ transform:translateY(54px);} to{ transform:none;} }
@keyframes rv-left{  from{ transform:translateX(-72px);} to{ transform:none;} }
@keyframes rv-right{ from{ transform:translateX(72px);} to{ transform:none;} }
@keyframes rv-scale{ from{ transform:scale(.9) translateY(40px);} to{ transform:none;} }
@keyframes rv-stamp{ from{ transform:scale(1.4) rotate(-6deg);} 60%{ transform:scale(.97) rotate(.5deg);} to{ transform:none;} }
@keyframes rv-wipe{  from{ transform:translateY(26px) skewY(1.5deg);} to{ transform:none;} }

/* 01 — Drift */
body[data-scroll="1"] [data-reveal].is-in{ animation-name:rv-drift; }
/* 02 — Parallax Manifest (direction-aware) */
body[data-scroll="2"] [data-reveal].is-in{ animation-name:rv-up; }
body[data-scroll="2"] [data-reveal][data-dir="left"].is-in{ animation-name:rv-left; }
body[data-scroll="2"] [data-reveal][data-dir="right"].is-in{ animation-name:rv-right; }
/* 03 — Flight Path */
body[data-scroll="3"] [data-reveal].is-in{ animation-name:rv-scale; }
/* 04 — Stamp (slam in with overshoot) */
body[data-scroll="4"] [data-reveal].is-in{ animation-name:rv-stamp; animation-duration:.6s;
  animation-timing-function:cubic-bezier(.2,1.5,.4,1); }
/* 05 — Cinematic Wipe */
body[data-scroll="5"] [data-reveal].is-in{ animation-name:rv-wipe; animation-duration:.95s; }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; }
  [data-reveal].is-in{ animation:none !important; }
  .plane-layer, .land-tower{ display:none; }
  .scroll-cue .chev{ animation:none; }
}

/* ---------- scroll-style switcher ---------- */
#scrollswitch{
  position:fixed; left:50%; bottom:clamp(14px,2.4vh,24px); transform:translateX(-50%);
  z-index:80; display:flex; align-items:center; gap:6px;
  background:rgba(28,22,15,.93); border:1px solid rgba(239,231,212,.18); border-radius:40px;
  padding:7px 8px 7px 16px; box-shadow:0 14px 36px -12px rgba(0,0,0,.7); backdrop-filter:blur(6px);
  max-width:94vw;
}
#scrollswitch .lab{ font-family:var(--type); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(239,231,212,.5); white-space:nowrap; }
#scrollswitch .lab b{ color:var(--cream); font-weight:400; }
#scrollswitch .tabs{ display:flex; gap:3px; margin-left:10px; padding-left:12px;
  border-left:1px solid rgba(239,231,212,.2); }
#scrollswitch .tab{ font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.06em;
  color:rgba(239,231,212,.62); background:transparent; border:none; cursor:pointer;
  padding:7px 11px; border-radius:30px; transition:all .18s; }
#scrollswitch .tab:hover{ color:var(--cream); background:rgba(239,231,212,.1); }
#scrollswitch .tab.on{ color:var(--cream); background:var(--rust); }

@media (max-width:820px){
  .coffee-inner,
  .coffee.reverse .coffee-inner{ grid-template-columns:1fr; gap:36px; }
  .coffee.reverse .photo-col{ order:0; }
  .specs{ grid-template-columns:1fr 1fr; }
  #scrollswitch .lab{ display:none; }
}
@media (max-width:480px){
  .specs{ grid-template-columns:1fr; }
}

/* ============================================================
   PHONE TUNING  (≤ 600px) — keep it as bold as desktop
   ============================================================ */
@media (max-width:600px){
  /* — HERO: release the headline from nowrap so it wraps BIG,
     like a stencilled crate stamp instead of a tiny one-liner — */
  #c1 .wrap{ gap:clamp(20px,3.4vh,32px); padding:5vh 6vw; }
  #c1 .logo{ width:clamp(196px,56vw,300px); }
  #c1 .stampbox{ max-width:min(360px,88vw); transform:rotate(-.6deg);
    padding:clamp(12px,2.2vh,18px) clamp(20px,5.6vw,34px); }
  #c1 .fya{ white-space:normal; text-wrap:balance; text-align:center;
    font-size:clamp(42px,13.4vw,64px); line-height:.9; letter-spacing:.012em; }

  /* — STORY STRIP — */
  .strip{ padding:clamp(62px,11vh,108px) 7vw clamp(34px,6vh,60px); }
  .strip-title{ font-size:clamp(36px,10.4vw,54px); }
  .strip-sub{ font-size:14.5px; line-height:1.8; }

  /* — CUP DETOUR — */
  .cup-panel{ min-height:auto; padding:clamp(50px,9vh,92px) 8vw; }
  .cup-stage{ width:min(300px,74vw); }
  .cup-caption{ font-size:clamp(20px,6vw,26px); line-height:1.08; margin-top:26px; }

  /* — COFFEE CARDS — */
  .coffee{ padding:clamp(48px,8vh,82px) 7vw; }
  .coffee-inner{ gap:30px; }
  .coffee-name{ font-size:clamp(34px,9.2vw,50px); }
  .desc{ font-size:14.5px; line-height:1.8; }
  .polaroid{ max-width:300px; }            /* hold it off the edges so tape + stamp stay on-screen */
  .origin-stamp{ font-size:20px; }
  .buy{ gap:18px; }
  /* origin-arc easter egg: now tap-to-open on phones (toggled in scroll.js) */
  .manifest-head .no{ cursor:pointer; }

  /* — FOOTER: stack into a clean single column — */
  .site-foot{ padding:clamp(48px,7vh,74px) 8vw clamp(30px,5vh,46px); }
  .foot-inner{ flex-direction:column; gap:32px; }
  .foot-brand{ max-width:none; }
  .foot-brand img{ width:150px; }
  .foot-cols{ gap:32px 40px; }
  .foot-base{ flex-direction:column; gap:9px; }
}