/* Supermind | Creatine launch | design tokens follow the SUPERMIND World Bible, Edition 02 */
:root{
  --ivory:#F1EEE7; --ivory-2:#E8E3D9; --bean:#1A0706; --cherry:#55100D; --racing:#DD0200;
  --alabaster:#D9D9D9; --muted:#5E5350; --muted-dark:#CBBFB9;
  --satin-hi:#C8444A; --satin:#A92E31; --satin-lo:#761B1A; --satin-deep:#4E110F;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --cond:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem);
  --max:78rem;
  --bar-h:3.25rem;
  --ease:cubic-bezier(.2,.7,.1,1);
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ivory:#F1EEE7}}
:root[data-theme="dark"]{--ivory:#F1EEE7}
html{scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--ivory);color:var(--bean);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--racing);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:0 1.6rem;border-radius:999px;background:var(--cherry);color:var(--ivory);font-family:var(--cond);font-weight:600;font-size:1.05rem;letter-spacing:.05em;text-decoration:none;border:0;cursor:pointer;transition:background .2s ease,transform .2s ease}
.btn:hover{background:#7a1612}
.btn:active{transform:scale(.98)}
.btn svg{width:1.05rem;height:1.05rem;flex:none}
.btn-line{background:transparent;color:var(--bean);box-shadow:inset 0 0 0 1px var(--bean)}
.btn-line:hover{background:var(--bean);color:var(--ivory)}
.btn-ivory{background:var(--ivory);color:var(--cherry)}
.btn-ivory:hover{background:#fff}
.btn-wide{width:100%}

.gauge.dark{mix-blend-mode:normal;color:var(--muted-dark)}
.gauge.dark .gauge-track{background:rgba(241,238,231,.25)}
.gauge.dark li a{color:var(--muted-dark)}
.gauge.dark li a::after{background:transparent;box-shadow:inset 0 0 0 1px var(--muted-dark)}
.gauge.dark li.on a{color:var(--ivory)}
.gauge.dark li.on a::after{background:#E4747A}
/* ---------- intro: the pop ---------- */
.intro{position:fixed;inset:0;z-index:100;display:none;overflow:hidden;pointer-events:auto}
.intro.on{display:block}
.intro::before{content:"";position:absolute;inset:0;background:var(--ivory);opacity:var(--bg,1)}
.intro.open{pointer-events:none}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.intro-stick{position:absolute;left:50%;top:50%;z-index:2;width:clamp(4.2rem,9vw,6rem);aspect-ratio:120/430;transform:translate(-50%,-50%);filter:drop-shadow(14px 22px 20px rgba(26,7,6,.3));will-change:transform,opacity}
.intro-ring{position:absolute;left:50%;top:50%;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--racing);opacity:0}
.intro-flash{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 50%,rgba(221,2,0,.22),rgba(221,2,0,0) 55%);opacity:0}
.intro-word{position:absolute;left:0;right:0;top:50%;z-index:4;transform:translateY(-50%);text-align:center;margin:0;font-family:var(--cond);font-weight:600;color:var(--bean);font-size:clamp(2rem,7vw,5.5rem);letter-spacing:.5em;padding-left:.5em;opacity:0;will-change:opacity,letter-spacing}
.intro-skip{position:absolute;z-index:5;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));background:none;border:0;font-family:var(--cond);font-size:1rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:.6rem;pointer-events:auto}
.tear-body,.tear-top{position:absolute;inset:0}
.tear-body svg,.tear-top svg{width:100%;height:100%;display:block}
.tear-body{clip-path:inset(9.6% 0 0 0)}
.tear-top{clip-path:inset(0 0 90.4% 0);transform-origin:50% 9%}

/* ---------- header bar + chapters ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:30;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;justify-content:space-between;align-items:center;background:rgba(241,238,231,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .3s ease,color .3s ease}
.bar.dark{background:rgba(26,7,6,.78);color:var(--ivory)}
.wordmark{font-family:var(--cond);font-weight:500;letter-spacing:.42em;font-size:.95rem;text-decoration:none;justify-self:start}
.bar-chapter{position:absolute;left:50%;bottom:calc(var(--bar-h)/2);transform:translate(-50%,50%);font-family:var(--serif);font-style:italic;font-size:1.05rem;opacity:0;transition:opacity .3s ease;white-space:nowrap}
.bar-chapter.on{opacity:1}
.bar-menu{justify-self:end;background:none;border:0;color:inherit;font-family:var(--cond);font-weight:500;font-size:1rem;letter-spacing:.04em;cursor:pointer;padding:.5rem 0;border-bottom:1px solid currentColor}
.bar-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--racing);transform-origin:0 50%;transform:scaleX(0)}

.gauge{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:25;display:none;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--cond);font-size:.85rem;color:var(--muted);mix-blend-mode:multiply}
.gauge-cap{letter-spacing:.06em}
.gauge-track{position:absolute;top:1.8rem;bottom:1.8rem;width:1px;background:var(--alabaster)}
.gauge-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--racing);transform-origin:50% 0;transform:scaleY(0)}
.gauge ol{list-style:none;margin:0;padding:.6rem 0;display:flex;flex-direction:column;gap:1.15rem;position:relative}
.gauge li a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;text-decoration:none;color:var(--muted);height:.9rem}
.gauge li a::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--muted);transition:transform .2s ease,background .2s ease}
.gauge li a span{opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;white-space:nowrap;position:absolute;right:1.4rem}
.gauge li a:hover span,.gauge li a:focus-visible span,.gauge li.on a span{opacity:1;transform:none}
.gauge li.on a::after{background:var(--racing);box-shadow:none;transform:scale(1.4)}
.gauge li.on a{color:var(--bean)}

.menu{position:fixed;inset:0;z-index:29;background:var(--cherry);color:var(--ivory);padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}
.menu[hidden]{display:none}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:ch}
.menu li{border-bottom:1px solid rgba(241,238,231,.2)}
.menu li a{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;text-decoration:none;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,6vw,3rem);line-height:1.05}
.menu li a small{font-family:var(--cond);font-weight:500;font-size:1rem;color:#E4A9A6;min-width:2.6rem}
.menu .btn{margin-top:2rem;align-self:flex-start}
.bar.menu-open{background:var(--cherry);color:var(--ivory)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + clamp(.5rem,3vw,2.5rem));padding-bottom:clamp(2.5rem,6vw,5rem);overflow:hidden}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;grid-template-areas:"head" "stage" "body";gap:.25rem}
.hero-head{grid-area:head}.hero-body{grid-area:body}.stage{grid-area:stage}
.hero h1{font-weight:800;font-size:clamp(3.1rem,11.5vw,7.4rem);line-height:.92;letter-spacing:-.02em;max-width:9ch}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:34ch;margin:0}
.price-line{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin:1.4rem 0 1.3rem}
.price{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1}
.per{font-family:var(--cond);font-size:1.05rem;color:var(--muted)}
.cta-row{display:flex;gap:.9rem 1.4rem;flex-wrap:wrap;align-items:center}
.aff-mini{font-family:var(--cond);font-weight:500;font-size:1rem;letter-spacing:.02em;color:var(--cherry);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.aff-mini:hover{color:var(--racing)}
.was{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--racing)}
.launch-note{font-family:var(--cond);font-size:1rem;color:var(--muted);margin:1.1rem 0 0}
.launch-note b{color:var(--bean);font-weight:600}


.stage{position:relative;height:clamp(21rem,62vw,40rem);display:flex;align-items:center;justify-content:center;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.stage:active{cursor:grabbing}
.stage::before{content:"";position:absolute;inset:6% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0));opacity:.9}
.shadow{position:absolute;left:50%;bottom:11%;width:min(62%,24rem);height:2.2rem;transform:translateX(-46%);background:radial-gradient(closest-side,rgba(26,7,6,.32),rgba(26,7,6,0));filter:blur(4px)}
.box-pivot{--w:clamp(8.5rem,24vw,14rem);--h:calc(var(--w)*1.6);--d:calc(var(--w)*.56);position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:translateX(-12%) rotateX(var(--rx,-10deg)) rotateY(var(--ry,-30deg));will-change:transform}
.face{position:absolute;left:0;top:0;backface-visibility:hidden;overflow:hidden}
.f-front,.f-back{width:var(--w);height:var(--h)}
.f-front{transform:translateZ(calc(var(--d)/2))}
.f-back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.f-right,.f-left{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d))/2)}
.f-right{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.f-left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.f-top,.f-bottom{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d))/2)}
.f-top{transform:rotateX(90deg) translateZ(calc(var(--h)/2))}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
.satin{background:linear-gradient(100deg,var(--satin-lo) 0%,var(--satin) 28%,var(--satin-hi) calc(var(--sheen,45%) - 2%),var(--satin) calc(var(--sheen,45%) + 16%),var(--satin-lo) 88%,var(--satin-deep) 100%)}
.satin-side{background:linear-gradient(90deg,var(--satin-deep),var(--satin-lo) 60%,#6a1717)}
.satin-top{background:linear-gradient(180deg,#b7383c,#9a2a2c)}
.label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;color:#F4E9E3;font-family:var(--cond);text-align:center}
.label .mark{width:30%;margin-top:22%;color:#F4E9E3}
.label .mark svg{width:100%;height:auto;display:block}
.label .name{font-weight:600;font-size:calc(var(--w)*.135);letter-spacing:.06em;margin-top:9%;line-height:1}
.label .sub{font-weight:500;font-size:calc(var(--w)*.05);letter-spacing:.06em;margin-top:4%;white-space:nowrap}
.label .rule{width:62%;height:1px;background:rgba(244,233,227,.75);margin:5% 0 4%}
.label .fuel{font-weight:500;font-size:calc(var(--w)*.065);letter-spacing:.09em}
.label .count{margin-top:auto;margin-bottom:12%;font-weight:500;font-size:calc(var(--w)*.058);letter-spacing:.08em;line-height:1.55}
.label-back{padding:16% 12%;align-items:flex-start;text-align:left}
.label-back p{margin:0 0 9%;font-size:calc(var(--w)*.054);letter-spacing:.05em;line-height:1.5}
.label-back strong{display:block;font-weight:600;letter-spacing:.12em;margin-bottom:.2em}
.side-word,.top-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:500;color:rgba(244,233,227,.88)}
.side-word span{transform:rotate(90deg);white-space:nowrap;font-size:calc(var(--w)*.05);letter-spacing:.5em}
.top-word{font-size:calc(var(--w)*.05);letter-spacing:.55em}
.stick{position:absolute;left:50%;bottom:9.5%;width:clamp(4.3rem,10.5vw,6.2rem);transform:translateX(62%) rotate(4deg);filter:drop-shadow(10px 14px 14px rgba(26,7,6,.28));pointer-events:none}
.stick svg{display:block;width:100%;height:auto}

/* hero entrance runs after the intro releases the page */
@media (prefers-reduced-motion: no-preference){
  body:not(.ready) .reveal-1,body:not(.ready) .reveal-2,body:not(.ready) .reveal-3,body:not(.ready) .reveal-4{opacity:0}
  body.ready .reveal-1{animation:rise .9s var(--ease) both}
  body.ready .reveal-2{animation:boxIn 1.3s .1s var(--ease) both}
  body.ready .reveal-3{animation:stickIn 1.1s .35s var(--ease) both}
  body.ready .reveal-4{animation:rise .9s .25s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes boxIn{from{opacity:0;transform:translateX(-12%) translateY(40px) rotateX(-10deg) rotateY(-80deg)}to{opacity:1}}
  @keyframes stickIn{from{opacity:0;transform:translateX(62%) translateY(30px) rotate(10deg)}to{opacity:1}}
}

/* ---------- pour (pinned) ---------- */
.pour{position:relative;height:340vh;background:var(--ivory-2)}
.pour-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pour-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);margin:0;text-align:center;font-family:var(--cond);font-weight:600;font-size:clamp(5.4rem,24vw,22rem);line-height:.8;letter-spacing:-.02em;user-select:none;pointer-events:none}
.pour-word span{display:block;will-change:transform}
.pw-l{color:var(--satin)}
.pw-r{color:var(--cherry)}
.pour-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.pour-mug{position:absolute;left:0;top:0;width:clamp(9rem,20vw,15rem);z-index:1;will-change:transform}
.pour-stick{position:absolute;left:0;top:0;width:clamp(3.8rem,8vw,6.4rem);aspect-ratio:120/430;z-index:3;will-change:transform;filter:drop-shadow(12px 18px 16px rgba(26,7,6,.28))}
.pour-steam{position:absolute;left:0;top:0;width:6rem;height:7rem;z-index:1;opacity:0;pointer-events:none}
.pour-steam i,.steam i{position:absolute;bottom:0;width:2px;height:100%;border-radius:2px;background:linear-gradient(to top,rgba(255,255,255,.0),rgba(255,255,255,.85),rgba(255,255,255,0))}
.pour-steam i:nth-child(1),.steam i:nth-child(1){left:30%}
.pour-steam i:nth-child(2),.steam i:nth-child(2){left:50%}
.pour-steam i:nth-child(3),.steam i:nth-child(3){left:70%}
@media (prefers-reduced-motion: no-preference){
  .pour-steam i,.steam i{animation:steam 3.2s ease-in-out infinite}
  .pour-steam i:nth-child(2),.steam i:nth-child(2){animation-delay:-1.1s}
  .pour-steam i:nth-child(3),.steam i:nth-child(3){animation-delay:-2.2s}
  @keyframes steam{0%{transform:translateY(20%) scaleY(.6) skewX(0);opacity:0}40%{opacity:.9}100%{transform:translateY(-35%) scaleY(1.1) skewX(-12deg);opacity:0}}
}
.pour-lines{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 1.2rem)}
.pl{position:absolute;left:0;top:0;margin:0;max-width:22ch;font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,3.2vw,2.5rem);line-height:1.15;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s var(--ease)}
.pl.on{opacity:1;transform:none}
.pl-final{max-width:15ch}
.pl-final h2{font-weight:800;font-size:clamp(2.3rem,6vw,4.8rem);line-height:.98}
.pl-final p{font-family:var(--sans);font-size:1.05rem;margin:.9rem 0 0;max-width:30ch}
.pour-cue{position:absolute;z-index:4;left:0;right:0;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-family:var(--cond);color:var(--muted);font-size:.95rem;transition:opacity .3s}

/* ---------- buy ---------- */
.buy{padding-block:clamp(3.5rem,8vw,6rem);background:var(--ivory)}
.buy-grid{display:grid;gap:2.5rem}
.gallery{display:grid;gap:.75rem}
.g-main{aspect-ratio:1/1;background:#fff;border-radius:6px;overflow:hidden}
.g-main img{width:100%;height:100%;object-fit:cover}
.g-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.g-thumbs button{padding:0;border:0;border-radius:4px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1px var(--alabaster);opacity:.65;transition:opacity .2s}
.g-thumbs button[aria-pressed="true"]{opacity:1;outline:2px solid var(--cherry);outline-offset:-2px}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.buy h2{font-size:clamp(2rem,4vw,2.9rem);line-height:1.05;margin-bottom:.6rem}
.spec{font-family:var(--cond);font-size:1.1rem;color:var(--muted);margin:0}
.inside-list{list-style:none;padding:0;margin:0 0 1.8rem;border-top:1px solid var(--alabaster)}
.inside-list li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--alabaster)}
.ic{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--cherry);display:flex;align-items:center;justify-content:center;color:var(--cherry)}
.ic svg{width:60%;height:60%}
.inside-list b{display:block;font-family:var(--cond);font-weight:600;font-size:1.15rem;letter-spacing:.02em}
.inside-list span{font-size:.98rem;color:var(--muted)}
.alt-link{display:inline-block;margin-top:1rem;font-family:var(--cond);font-size:1.05rem}
.fine{font-size:.9rem;color:var(--muted);margin:1.1rem 0 0;max-width:44ch}

/* ---------- inside (horizontal track) ---------- */
.track{position:relative;background:var(--bean);color:var(--ivory)}
.track-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vh,2.4rem);padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
.track-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;width:100%}
.track-head h2{max-width:12ch}
.track-count{font-family:var(--cond);font-size:1.05rem;color:var(--muted-dark);margin:0;white-space:nowrap}
.track-count span{color:#E4747A}
.track-rail{display:flex;gap:clamp(1rem,3vw,2.5rem);padding-left:var(--gutter);padding-right:var(--gutter);will-change:transform;width:max-content}
.panel{width:min(84vw,62rem);flex:none;display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center}
.specimen{position:relative;width:min(64vw,34vh,24rem);aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 38% 32%,#f4f1ec,#c9c4bc 62%,#8e8a85 100%);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 6px rgba(255,255,255,.25)}
.specimen canvas,.specimen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.specimen-photo{border-radius:10px;width:min(78vw,40vh,30rem);aspect-ratio:580/254;background:none}
.panel-copy h3{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;margin:.6rem 0 .6rem}
.panel-copy p{margin:0;color:var(--muted-dark);max-width:36ch}
.panel-ic{display:inline-flex;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid #E4747A;color:#E4747A;align-items:center;justify-content:center}
.panel-ic svg{width:60%;height:60%}
.trio{display:flex;gap:1.4rem;margin-top:1.1rem;font-family:var(--serif);font-weight:700;font-size:1.35rem}
.trio span{border-top:1px solid var(--ivory);padding-top:.4rem}

/* ---------- ritual ---------- */
.ritual{background:var(--bean);color:var(--ivory);padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid rgba(241,238,231,.12)}
.ritual-grid{display:grid;gap:2.5rem}
.ritual h2{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;margin-bottom:.8rem}
.intro-p{max-width:42ch;color:var(--muted-dark);margin:0 0 2.2rem}
.ritual-visual{position:relative;border-radius:10px;background:radial-gradient(circle at 50% 70%,#3a1a12,#1A0706 70%);min-height:clamp(18rem,40vw,30rem);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ritual-media{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.ritual-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ritual-mug{width:min(60%,17rem);margin-bottom:10%}
.ritual-mug svg{display:block;width:100%;height:auto}
.steam{position:absolute;left:50%;bottom:50%;width:7rem;height:8rem;transform:translateX(-62%);opacity:.8}
.clock{position:absolute;z-index:2;top:1.2rem;left:1.4rem;font-family:var(--cond);font-weight:500;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.04em;color:#E4747A;line-height:1}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:4.8rem 1fr;gap:1rem;padding:1.3rem 0;border-top:1px solid rgba(241,238,231,.18);opacity:.38;transition:opacity .5s ease}
.steps li.on{opacity:1}
.steps li:last-child{border-bottom:1px solid rgba(241,238,231,.18)}
.steps time{font-family:var(--cond);font-weight:500;font-size:1.1rem;color:#E4747A;letter-spacing:.04em;padding-top:.3rem}
.steps h3{font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1}
.steps p{margin:.45rem 0 0;color:var(--muted-dark);max-width:40ch}
.note{margin:2rem 0 0;font-family:var(--cond);font-size:1.1rem;color:var(--muted-dark)}

/* ---------- still ---------- */
.still{padding-top:clamp(3rem,7vw,6rem);overflow:hidden}
.still-frame{margin:0 auto;max-width:var(--max);padding-left:var(--gutter);padding-right:var(--gutter)}
.still-frame img{width:100%;border-radius:6px;transform:scale(var(--zoom,1.08));transition:transform .1s linear}
.still-frame figcaption{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;margin-top:1.2rem;max-width:30ch}

/* ---------- uniform ---------- */
.uniform{padding-block:clamp(3.5rem,8vw,7rem)}
.uniform-grid{display:grid;gap:2rem}
.uniform h2{max-width:13ch;margin-bottom:1rem}
.uniform-p{margin:0;max-width:32ch;color:var(--muted)}
.places{list-style:none;margin:0;padding:0}
.places li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--alabaster);overflow:hidden}
.places li span{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4.6vw,3.3rem);line-height:1.1}
.places li small{font-family:var(--cond);font-size:1rem;color:var(--muted);text-align:right}
@media (prefers-reduced-motion: no-preference){
  .places li span{transform:translateY(105%);transition:transform .8s var(--ease)}
  .places li.on span{transform:none}
  .places li:nth-child(2) span{transition-delay:.08s}.places li:nth-child(3) span{transition-delay:.16s}.places li:nth-child(4) span{transition-delay:.24s}
}

/* ---------- affiliate ---------- */
.affiliate{background:linear-gradient(135deg,var(--cherry) 0%,#2b0907 100%);color:var(--ivory);padding-block:clamp(3.5rem,8vw,6.5rem)}
.aff-grid{display:grid;gap:2.4rem}
.affiliate h2{max-width:12ch;margin-bottom:1rem}
.affiliate p{margin:0 0 1.8rem;max-width:44ch;color:#E9D6D2}
.aff-points{list-style:none;margin:0;padding:0}
.aff-points li{padding:1rem 0;border-top:1px solid rgba(241,238,231,.25)}
.aff-points li:last-child{border-bottom:1px solid rgba(241,238,231,.25)}
.aff-points b{display:block;font-family:var(--cond);font-weight:600;font-size:1.2rem;letter-spacing:.02em}
.aff-points span{color:#E9D6D2}

/* ---------- faq ---------- */
.faq{padding-block:clamp(3.5rem,8vw,6rem)}
.faq h2{margin-bottom:1.6rem}
.faq details{border-top:1px solid var(--bean)}
.faq details:last-of-type{border-bottom:1px solid var(--bean)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-family:var(--cond);font-weight:600;font-size:1.25rem}
.faq summary::-webkit-details-marker{display:none}
.pm{width:1.1rem;height:1.1rem;position:relative;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .25s}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}
.faq details p{margin:0 0 1.3rem;max-width:58ch;color:#3a2b28}
.faq details p a{color:var(--cherry);font-weight:500;text-underline-offset:3px}
.bb-info s{color:var(--muted)}

/* ---------- close + footer ---------- */
.close{background:var(--cherry);color:var(--ivory);padding-block:clamp(4rem,9vw,8rem);text-align:center}
.close h2{font-weight:800;font-size:clamp(2.8rem,9vw,6.6rem);line-height:.95;margin:0 auto;max-width:11ch;letter-spacing:-.015em}
.close p{margin:1.4rem auto 2rem;max-width:36ch;color:#E9D6D2}
footer{background:var(--bean);color:var(--muted-dark);padding-block:3rem 8rem;font-size:.9rem}
footer .wordmark{color:var(--ivory)}
.foot-line{margin:.8rem 0 0}
.foot-grid{display:grid;gap:1.6rem}
.foot-links{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;font-family:var(--cond);font-size:1rem}
.foot-links a{text-decoration:none;border-bottom:1px solid rgba(203,191,185,.5)}
.disclaimer{max-width:70ch;font-size:.82rem;line-height:1.5;color:#9d8f8a}

/* ---------- sticky buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;visibility:hidden;opacity:0;background:rgba(241,238,231,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--alabaster);padding:.6rem var(--gutter);padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:.9rem;transform:translateY(calc(100% + 2rem));transition:transform .35s ease,opacity .35s ease,visibility .35s}
.buybar.show{transform:none;visibility:visible;opacity:1}
.bb-info{flex:1;min-width:0;line-height:1.2}
.bb-info b{display:block;font-family:var(--cond);font-weight:600;font-size:1.02rem}
.bb-info span{font-family:var(--cond);color:var(--muted);font-size:.95rem}
.buybar .btn{min-height:2.9rem;padding:0 1.3rem;font-size:1rem}
.bb-thumb{width:2.6rem;height:2.6rem;flex:none;border-radius:4px;background:linear-gradient(110deg,var(--satin-lo),var(--satin-hi) 45%,var(--satin));display:flex;align-items:center;justify-content:center;color:#F4E9E3}
.bb-thumb svg{width:55%}

/* ---------- launch offer pop-up ---------- */
.promo{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.promo[hidden]{display:none}
.promo-scrim{position:absolute;inset:0;background:rgba(26,7,6,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.promo-card{position:relative;width:min(100%,44rem);background:var(--ivory);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:0 40px 90px rgba(26,7,6,.4);max-height:calc(100svh - 2rem);overflow-y:auto}
.promo-x{position:absolute;top:.6rem;right:.6rem;z-index:2;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:rgba(241,238,231,.92);color:var(--bean);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(26,7,6,.15)}
.promo-x svg{width:1.2rem;height:1.2rem}
.promo-x:hover{background:#fff}
.promo-art{background:linear-gradient(140deg,var(--cherry),#2b0907);display:flex;align-items:center;justify-content:center;min-height:11rem;padding:1.4rem 0}
.promo-stick{width:3.8rem;transform:rotate(-12deg);filter:drop-shadow(10px 16px 14px rgba(0,0,0,.45))}
.promo-stick svg{display:block;width:100%;height:auto}
.promo-copy{padding:1.6rem 1.5rem 1.3rem}
.promo-kicker{margin:0 0 .5rem;font-family:var(--cond);font-weight:600;font-size:1rem;letter-spacing:.04em;color:var(--racing)}
.promo h2{font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.02}
.promo-price{display:flex;align-items:baseline;gap:.9rem;margin:1rem 0 .4rem;font-family:var(--serif)}
.promo-price s{font-size:1.8rem;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--racing)}
.promo-price span{font-size:3.4rem;font-weight:800;line-height:1}
.promo-sub{margin:0 0 1.3rem;color:var(--muted);max-width:36ch}
.promo-no{display:block;margin:.8rem auto 0;background:none;border:0;font-family:var(--cond);font-size:1rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:.5rem}
@media (prefers-reduced-motion: no-preference){
  .promo:not([hidden]) .promo-card{animation:promoIn .55s var(--ease) both}
  .promo:not([hidden]) .promo-scrim{animation:fade .4s ease both}
  @keyframes promoIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}}
}
@media (max-width: 599px){
  .promo{align-items:flex-end;padding:0}
  .promo-card{border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .promo-art{min-height:8.5rem;padding:1rem 0}
  .promo-stick{width:2.9rem}
}
@media (min-width: 600px){
  .promo-card{grid-template-columns:.8fr 1.2fr}
  .promo-art{min-height:100%}
}

/* ---------- desktop ---------- */
@media (min-width: 900px){
  .gauge{display:flex}
  .bar-menu{display:inline-block}
  .hero-grid{grid-template-columns:1.05fr 1fr;grid-template-areas:"head stage" "body stage";gap:1.6rem 2rem;align-content:center;min-height:calc(100vh - var(--bar-h) - 3rem)}
  .hero-head{align-self:end}.hero-body{align-self:start}
  .pl{max-width:16ch}
  .pour-lines{left:calc(var(--gutter) + 1rem);right:auto;top:auto;bottom:18vh;width:34vw}
  .pl{top:auto;bottom:0}
  .buy-grid{grid-template-columns:1.05fr 1fr;gap:4.5rem;align-items:start}
  .buy-col{position:sticky;top:calc(var(--bar-h) + 1.5rem)}
  .panel{grid-template-columns:auto 1fr;gap:3.5rem;width:min(78vw,60rem)}
  .specimen{width:min(30vw,52vh,26rem)}
  .specimen-photo{width:min(34vw,30rem)}
  .ritual-grid{grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
  .uniform-grid{grid-template-columns:1fr 1.6fr;gap:4rem;align-items:start}
  .aff-grid{grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
  .foot-grid{grid-template-columns:1fr 1fr;align-items:start}
  .buybar{left:auto;right:4.5rem;bottom:1.25rem;border-radius:999px;border:1px solid var(--alabaster);max-width:26rem;padding:.45rem .45rem .45rem .9rem;box-shadow:0 12px 40px rgba(26,7,6,.14)}
}
@media (max-width: 899px){
  .pour{height:300vh}
  .pour-word{font-size:30vw}
}
@media (max-width: 599px){
  .bar-chapter{display:none}
}

/* ---------- reduced motion: every pinned sequence becomes a normal layout ---------- */
@media (prefers-reduced-motion: reduce){
  .pour{height:auto}
  .pour-sticky{position:relative;height:auto;min-height:100svh}
  .pl{position:relative;opacity:1;transform:none;margin-bottom:1rem}
  .pl:not(.pl-final){display:none}
  .track{height:auto!important}
  .track-sticky{position:relative;height:auto;padding-block:5rem}
  .track-rail{transform:none!important;overflow-x:auto;width:auto;scroll-snap-type:x mandatory}
  .panel{scroll-snap-align:start}
  .still-frame img{transform:none}
  .buybar{transition:none}
}