/* ==========================================================================
   Mudra Clothing Company: Our Story (/about)
   Nine sections, hard cuts between them. Builds on styles.css tokens.
   Everything is readable with no JS and with reduced motion: the .js-st class
   (added by story.js) is what arms the "before" state of each animation.
   ========================================================================== */

.story{
  --lime:#CCFF00;--ink:#1A1A1A;--rule:rgba(26,26,26,.18);--rule-d:rgba(237,233,224,.2);
  --ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
}
.story .wrap{position:relative;width:100%}
.st{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(72px,11vh,140px);background:var(--paper);color:var(--fg)}
.st[data-tone="dark"]{background:var(--ink);color:var(--paper)}
.st--believe{background:var(--paper-2)}

.st-label{color:var(--ash);margin:0;font-weight:400}
.st-h{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(40px,7vw,104px);line-height:.92;margin:0 0 clamp(28px,5vh,56px);max-width:16ch}
.st-h--xl{font-size:clamp(44px,8.6vw,136px);max-width:13ch}
.st-prose{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:60ch}
.st-prose p{margin:0 0 1.1em}
.st-prose p:last-child{margin-bottom:0}

/* photo frames: hard-edged. A missing file leaves a flat tone, nothing else */
.st-photo{margin:0;position:relative;background:#2a2927 center/cover no-repeat;overflow:hidden}
.st-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.st[data-tone="light"] .st-photo,.st--blue .st-photo{background-color:var(--paper-2)}
.st--blue .st-photo{background-color:rgba(237,233,224,.16)}
body.review .st-photo::after{content:"PHOTO " attr(data-photo);position:absolute;left:12px;bottom:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}

/* chapter counter (desktop) + progress line (mobile) */
.st-count{position:fixed;left:14px;top:50%;z-index:40;transform:rotate(-90deg) translateX(-50%);transform-origin:0 0;
  color:var(--ash);opacity:0;transition:opacity .4s var(--ease),color .3s linear;pointer-events:none}
.st-count.on{opacity:1}
.st-count[data-tone="dark"],.st-count[data-tone="blue"]{color:rgba(237,233,224,.7)}
.st-count[data-tone="lime"]{color:var(--ink)}
.st-progress{display:none}
@media(max-width:900px){
  .st-count{display:none}
  .st-progress{display:block;position:fixed;left:0;right:0;top:0;height:2px;z-index:60}
  .st-progress i{display:block;height:100%;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
}

/* ── 01 the mirror ─────────────────────────────────────────────────
   Default CSS is the finished state: line 1 in ink, line 2 readable in blue.
   story.js adds .is-mirror to the fold (never with reduced motion), and only
   then do the mirrored copy, the pane and the clip exist. --mx/--my (mirror
   centre, px from the top left of line 2) and --p (scroll, 0 to 1) drive the
   pane, its border and the clip on the readable text, so they cannot drift. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.st--hero{min-height:max(70svh,440px);justify-content:stretch;padding-block:clamp(22px,4vh,40px)}
.st-hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.st-hero>.st-label{margin-bottom:16px}
.st-say,.st-glass{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.002em;
  font-size:clamp(26px,4.2vw,54px);line-height:.95;margin:0}
.st-say{color:var(--fg);white-space:nowrap}
.st-glass{position:relative;margin-top:.35em;color:var(--blue)}
.st-glass p{margin:0}
.st-glass p span{display:inline-block;white-space:nowrap}
.st-glass__base,.st-glass__pane,.st-glass__edge{display:none}
.st-hint{margin:20px 0 0;color:var(--ash);visibility:hidden}
.st-hint__touch{display:none}
@media not ((hover:hover) and (pointer:fine)){.st-hint__point{display:none}.st-hint__touch{display:inline}}

.is-mirror .st-glass{
  --l:calc((var(--mx)*1px - 1em)*(1 - var(--p)) - .3em*var(--p));
  --t:calc((var(--my)*1px - 1.6em)*(1 - var(--p)) - .3em*var(--p));
  --r:calc((var(--mx)*1px + 1em)*(1 - var(--p)) + (var(--gw)*1px + .3em)*var(--p));
  --b:calc((var(--my)*1px + 1.6em)*(1 - var(--p)) + (var(--gh)*1px + .3em)*var(--p));
  /* the same rectangle, measured from the top left of the fold */
  --L:calc(var(--l) + var(--ox)*1px);--T:calc(var(--t) + var(--oy)*1px);
  --R:calc(var(--r) + var(--ox)*1px);--B:calc(var(--b) + var(--oy)*1px);
}
.is-mirror .st-glass__base{display:block;position:absolute;inset:0;color:var(--fg);opacity:calc(.35*(1 - var(--p)));
  user-select:none;-webkit-user-select:none;pointer-events:none}
.is-mirror .st-glass__base span{transform:scaleX(-1)}
.is-mirror .st-glass__pane,.is-mirror .st-glass__edge{display:block;position:absolute;pointer-events:none;
  left:calc(var(--ox)*-1px);top:calc(var(--oy)*-1px);width:calc(var(--fw)*1px);height:calc(var(--fh)*1px);
  opacity:calc((1 - var(--p))*5)}
.is-mirror .st-glass__pane{background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),var(--paper);
  clip-path:inset(var(--T) calc(100% - var(--R)) calc(100% - var(--B)) var(--L))}
.is-mirror .st-glass__edge{background:var(--blue);
  clip-path:polygon(evenodd,var(--L) var(--T),var(--R) var(--T),var(--R) var(--B),var(--L) var(--B),var(--L) var(--T),
    calc(var(--L) + 1px) calc(var(--T) + 1px),calc(var(--R) - 1px) calc(var(--T) + 1px),
    calc(var(--R) - 1px) calc(var(--B) - 1px),calc(var(--L) + 1px) calc(var(--B) - 1px),calc(var(--L) + 1px) calc(var(--T) + 1px))}
.is-mirror .st-glass__text{position:relative;
  clip-path:inset(var(--t) calc(100% - var(--r)) calc(100% - var(--b)) var(--l))}
.is-mirror .st-hint{visibility:visible}
.is-mirror .st-hint span{opacity:calc(1 - var(--p)*2)}
@keyframes st-p{from{--p:0}to{--p:1}}
@supports (animation-timeline:scroll()){
  .is-mirror{animation:st-p linear both;animation-timeline:scroll(root);animation-range:0px 20vh}
}
.js-st .st-hero>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-st .st-hero.in>*{opacity:1;transform:none}
.js-st .st-hero.in>:nth-child(2){transition-delay:.08s}
.js-st .st-hero.in>:nth-child(3){transition-delay:.2s}
.js-st .st-hero.in>:nth-child(4){transition-delay:.32s}

/* ── 02 11:47 PM ───────────────────────────────────────────────────── */
.st--night{padding-block:0;justify-content:stretch}
.st-split{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.st-photo--fan{min-height:100%}
.st-split__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,40px);
  padding:clamp(56px,9vh,110px) var(--gut) clamp(56px,9vh,110px) clamp(24px,5vw,88px)}
.st-clock{font-family:var(--mono);font-weight:400;font-size:clamp(46px,7.4vw,118px);letter-spacing:-.04em;line-height:1;margin:0}
.st-notif{width:min(340px,100%);height:74px}
.st-notif__card{position:relative;width:100%;height:100%}
.st-notif__front{position:absolute;inset:0;border:1px solid var(--rule-d);background:#262524;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.st-notif__back{display:none}
.st-notif__meta{display:flex;justify-content:space-between;color:rgba(237,233,224,.55);font-size:10px}
.st-notif__meta b{font-weight:400}
.st-notif__text{font-size:15px;line-height:1.2}
.st-typing{position:absolute;right:14px;bottom:13px;display:flex;gap:4px;opacity:0}
.st-typing i{width:5px;height:5px;background:var(--paper);opacity:.35}
/* armed: slide in → typing dots → dots go → card dims, then turns face down (blank) */
.js-st .st-notif__card{opacity:0;transform:translateY(-14px)}
.js-st .st-notif.in .st-notif__card{animation:st-card 5.2s var(--ease) forwards}
.js-st .st-notif.in .st-notif__front>span:not(.st-typing){animation:st-face 5.2s linear forwards}
.js-st .st-notif.in .st-notif__front{animation:st-back 5.2s linear forwards}
.js-st .st-notif.in .st-typing{animation:st-typing 5.2s linear forwards}
.js-st .st-notif.in .st-typing i{animation:st-dot 1s ease-in-out infinite}
.js-st .st-notif.in .st-typing i:nth-child(2){animation-delay:.15s}
.js-st .st-notif.in .st-typing i:nth-child(3){animation-delay:.3s}
@keyframes st-card{0%{opacity:0;transform:translateY(-14px)}9%,86%{opacity:1;transform:none}
  93%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:none}}
@keyframes st-face{0%,70%{opacity:1}84%,92%{opacity:.45}93%,100%{opacity:0}}
@keyframes st-back{0%,92%{background:#262524}93%,100%{background:#1f1e1d}}
@keyframes st-typing{0%,26%{opacity:0}30%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes st-dot{0%,100%{opacity:.25}50%{opacity:.9}}

/* ── 03 the quiet ones ─────────────────────────────────────────────── */
.st-cols{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,88px);align-items:start}
.st-narr{position:relative;min-height:clamp(180px,26vw,320px);display:flex;align-items:center}
.st-narr__p{position:relative;margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:26ch}
.st-marquee{position:absolute;inset:0 calc(var(--gut) * -1) 0 calc(var(--gut) * -1);overflow:hidden;display:flex;align-items:center;pointer-events:none}
.st-marquee__track{display:flex;gap:.6em;white-space:nowrap;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(64px,10vw,150px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(122,117,107,.3);
  animation:st-slide 60s linear infinite}
.st-marquee__track span{text-decoration:line-through;text-decoration-color:rgba(122,117,107,.28);text-decoration-thickness:2px}
@keyframes st-slide{to{transform:translateX(-50%)}}
.st-lines{margin:0;display:grid;font-size:clamp(18px,1.6vw,22px);line-height:1.4}
.st-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:16px 0;border-top:1px solid var(--rule)}
.st-line:last-child{border-bottom:1px solid var(--rule)}
.st-tag{color:var(--blue);font-size:10.5px;white-space:nowrap;opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.st-line:hover .st-tag,.st-line:focus-within .st-tag,.st-line.tapped .st-tag{opacity:1;transform:none}
.st-tag:hover{text-decoration:underline;text-underline-offset:3px}
@media(hover:none){.st-tag{opacity:.0}.st-line.in.has-tag::after{content:""}}
.js-st .st-line{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js-st .st-line.in{opacity:1;transform:none}
.st-wide{margin:clamp(40px,7vh,84px) 0 0;font-size:clamp(20px,2.2vw,32px);line-height:1.35;max-width:38ch}
.st-chat{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:clamp(36px,6vh,72px)}
.st-bubble{margin:0;background:var(--blue);color:var(--paper);padding:14px 18px;font-size:clamp(18px,1.7vw,24px);line-height:1.3;max-width:24ch}
.st-delivered{color:var(--ash);font-size:10px}
.js-st .st-chat>*{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js-st .st-chat.in>*{opacity:1;transform:none}
.js-st .st-chat.in>.st-delivered{transition-delay:.7s}

/* ── 04 seals ──────────────────────────────────────────────────────── */
.st--seals{padding-top:0;justify-content:flex-start}
.st-seals__top{position:relative;min-height:min(86svh,900px);display:flex;align-items:flex-end;padding-bottom:clamp(36px,6vh,72px)}
.st-photo--clay{position:absolute;inset:0;background-color:#211f1d}
.st-photo--clay::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(26,26,26,0) 30%,#1A1A1A 100%)}
.st-seals__top .wrap{width:100%;z-index:2}
.st-seals__top .st-h{margin:0}
.st-narrow{max-width:560px;margin-inline:auto;padding-inline:var(--gut);padding-block:clamp(36px,7vh,80px)}
.st-word{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4vh,40px);
  text-align:center;padding-inline:var(--gut);overflow:hidden}
.st-word__big{display:flex;flex-direction:column;align-items:center;color:var(--blue);line-height:.9}
.st-word__en{font-family:var(--display);text-transform:uppercase;font-size:clamp(84px,22vw,380px);letter-spacing:.01em}
/* the Devanagari word is the brand's stencil lettering (assets/svg/mudra-devanagari.svg), inlined.
   Same path and the same four stencil cuts as the file; each cut is its own piece so it can light up on hover. */
.st-word__hi{display:block;font-size:clamp(84px,22vw,380px);line-height:0;margin-top:.14em}
/* sized so the headline-to-baseline height (1266 of the 3931-wide viewBox) equals the
   Saira Stencil cap height (.692em): 0.692 × 3931 / 1266 = 2.148em. The matra hangs below like a descender. */
.st-word__hi svg{display:block;width:2.148em;height:auto}
.st-word__hi use{transition:fill .16s linear}
.st-word__en>span{transition:color .16s linear}
@media(hover:hover){.st-word__hi use:hover{fill:var(--lime)}.st-word__en>span:hover{color:var(--lime)}}
.st-word__line{margin:0;font-size:clamp(17px,1.35vw,20px);color:rgba(237,233,224,.78)}
.st-word__line [lang="hi"]{font-family:"Anek Devanagari","Noto Sans Devanagari",sans-serif;font-weight:600}
.js-st .st-word__big>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-st .st-word.in .st-word__big>*{opacity:1;transform:none}
.js-st .st-word.in .st-word__hi{transition-delay:.18s}

.st-press{display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:clamp(20px,5vh,56px) clamp(40px,8vh,90px)}
.st-clay{position:relative;width:clamp(150px,18vw,210px);aspect-ratio:1;border-radius:50%;background:var(--paper-2);
  color:var(--blue);display:grid;place-items:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease)}
.st-clay:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.st-clay__seal{width:58%;height:58%;opacity:0;transform:scale(1.5)}
.st-clay__ring{position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(var(--blue) calc(var(--hold,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.st-clay.holding{transform:scale(.97)}
.st-clay.sealed{cursor:default}
.st-clay.sealed .st-clay__ring{opacity:0}
.st-clay.sealed .st-clay__seal{opacity:1;transform:none}
.st-clay.stamping .st-clay__seal{animation:st-stamp .34s cubic-bezier(.3,1.2,.4,1) both}
.st-clay.stamping{animation:st-thud .34s var(--ease)}
@keyframes st-stamp{0%{opacity:0;transform:scale(1.5)}55%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes st-thud{0%{transform:scale(.97)}50%{transform:scale(.93)}100%{transform:none}}
.st-press__label{color:rgba(237,233,224,.7)}

/* ── 05 so we made you one ─────────────────────────────────────────── */
.st-made{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,88px);align-items:center}
.st-photo--chai{aspect-ratio:4/5;max-height:86svh;width:100%}
.st-walk{position:relative;height:74px;margin-block:clamp(22px,4vh,36px);border-block:1px solid var(--rule);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;padding:0 4% 12px}
.st-walk i{position:relative;width:2px;height:26px;background:var(--ash);flex:0 0 auto;transition:opacity .6s linear,background .3s linear}
.st-walk i:nth-child(3n){height:22px}.st-walk i:nth-child(4n){height:29px}
.st-walk b{position:absolute;left:50%;bottom:36px;transform:translate(-50%,6px);font-weight:400;color:var(--blue);
  white-space:nowrap;opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js-st .st-walk i{animation:st-walk 26s linear infinite}
@keyframes st-walk{from{transform:translateX(60px)}to{transform:translateX(-60px)}}
.st-walk.same i:not(.st-walk__one){opacity:.22}
.st-walk.same .st-walk__one{background:var(--blue);animation-play-state:paused}
.st-walk.same b{opacity:1;transform:translate(-50%,0)}
.st-close{margin:clamp(22px,4vh,36px) 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.25;max-width:22ch}

/* ── 06 old word, new light ────────────────────────────────────────── */
.st--blue{background:var(--blue);color:var(--paper);overflow:hidden}
.st--blue .wrap{z-index:1}
.st-spin{position:absolute;right:calc(clamp(240px,33vw,500px) * -0.4);top:clamp(28px,5vh,56px);
  width:clamp(240px,33vw,500px);height:auto;color:var(--paper);opacity:.95;animation:st-turn 90s linear infinite}
@keyframes st-turn{to{transform:rotate(1turn)}}
.st-lead{font-size:clamp(20px,2.1vw,30px);line-height:1.35;max-width:30ch;margin:0 0 clamp(40px,7vh,84px)}
.st-two{display:grid;grid-template-columns:3fr 6fr 3fr;gap:clamp(20px,3vw,48px);align-items:start;font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.st-two p{margin:0}
.st-two__label{display:block;margin-bottom:14px;color:rgba(237,233,224,.72)}
.st-diptych{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-diptych .st-photo{aspect-ratio:4/5}
.st-pride{margin:clamp(40px,7vh,84px) 0 0;font-size:clamp(20px,2.1vw,30px);line-height:2;max-width:34ch}
.st-place{position:relative;text-decoration:underline dotted;text-underline-offset:6px;text-decoration-thickness:2px;white-space:nowrap}
.st-place b{position:absolute;left:50%;bottom:calc(100% - .35em);transform:translate(-50%,6px) scale(.9);font-weight:700;
  background:var(--lime);color:var(--ink);padding:3px 6px 2px;font-size:10px;line-height:1;opacity:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.st-place.in b{opacity:1;transform:translate(-50%,0)}
.st-place:nth-of-type(2).in b{transition-delay:.35s}
.st-place:nth-of-type(3).in b{transition-delay:.7s}

/* ── 07 what we believe ────────────────────────────────────────────── */
.st-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.st-card{position:relative;background:var(--paper);border:1px solid var(--rule);padding:clamp(18px,2vw,28px);
  min-height:clamp(200px,20vw,280px);display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:border-color .3s linear}
.st-card__n{color:var(--ash)}
.st-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2vw,28px);line-height:1;margin:auto 0 0;letter-spacing:.01em;max-width:14ch}
.st-card p{margin:0;color:var(--ash);font-size:16px;line-height:1.45;max-width:30ch;padding-right:56px}
.st-card__seal{position:absolute;right:14px;bottom:14px;width:54px;height:54px;color:var(--blue);opacity:0;transform:rotate(8deg) scale(1.5)}
.st-card.stamped{border-color:var(--blue)}
.st-card.stamped .st-card__seal{opacity:1;transform:rotate(8deg);animation:st-cstamp .3s cubic-bezier(.3,1.2,.4,1) both}
@media(hover:hover){
  .st-card:hover{border-color:var(--blue)}
  .st-card:hover .st-card__seal{opacity:1;transform:rotate(8deg);animation:st-cstamp .3s cubic-bezier(.3,1.2,.4,1) both}
}
@keyframes st-cstamp{0%{opacity:0;transform:rotate(8deg) scale(1.5)}60%{opacity:1;transform:rotate(8deg) scale(.92)}100%{opacity:1;transform:rotate(8deg)}}

/* ── 08 mission / vision ───────────────────────────────────────────── */
.st--posters{padding:0;display:block;min-height:0;background:none}
.st-poster{min-height:70svh;display:flex;align-items:center;padding-block:clamp(56px,9vh,110px)}
.st-poster--lime{background:var(--lime);color:var(--ink)}
.st-poster--ink{background:var(--ink);color:var(--paper)}
.st-poster__label{margin:0 0 clamp(18px,3vh,30px);font-weight:400}
.st-poster__text{font-family:var(--display);text-transform:uppercase;margin:0;font-size:clamp(30px,5.6vw,92px);line-height:.96;letter-spacing:.005em;max-width:20ch}

/* ── 09 and that is all ────────────────────────────────────────────── */
.st--end{padding-block:clamp(90px,16vh,200px)}
.st-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(28px,5vh,56px)}
.st-end__big{font-family:var(--display);text-transform:uppercase;margin:0;font-size:clamp(58px,14.5vw,230px);line-height:.88}
.st-end__big span{white-space:nowrap}
.st-photo--mirror{width:min(360px,72vw);aspect-ratio:3/4.4}
.st-mirror{position:relative}
.st-mirror p{margin:0;font-size:clamp(19px,1.8vw,24px);line-height:1.3}
.st-mirror__refl{transform:scaleY(-1);margin-top:2px !important;color:var(--fg);user-select:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.42),transparent 85%);mask-image:linear-gradient(to top,rgba(0,0,0,.42),transparent 85%)}
.st-mirror.lit .st-mirror__refl{
  background:radial-gradient(120px 60px at var(--mx,50%) 50%,var(--blue),var(--fg) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.st-btn{display:inline-block;background:var(--ink);color:var(--paper);padding:17px 34px;font-size:11.5px;letter-spacing:.16em;
  transition:background .2s linear}
.st-btn:hover{background:var(--blue)}
.st-biz{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,5vw,72px);margin-top:clamp(20px,5vh,56px);text-align:left}
.st-biz .mono{color:var(--ash);display:block;margin-bottom:5px;font-size:10px}
.st-biz p{margin:0;font-size:14px}
.st-biz a:hover{color:var(--blue)}

/* ── tablet / phone ────────────────────────────────────────────────── */
@media(max-width:900px){
  .st{padding-block:clamp(64px,10vh,96px)}
  .st-split{grid-template-columns:1fr;min-height:0}
  .st-photo--fan{aspect-ratio:4/5;min-height:0}
  .st-split__copy{padding:40px var(--gut) 72px}
  .st--night{padding-block:0}
  .st-cols,.st-made,.st-two{grid-template-columns:1fr}
  .st-narr{min-height:150px}
  .st-made .st-photo--chai{order:-1;max-height:none}
  .st-diptych{order:2}
  .st-two>div:last-child{order:3}
  .st-cards{grid-template-columns:1fr}
  .st-card{min-height:170px}
  .st-spin{width:150px;right:-58px;top:18px}
  .st--blue .st-h{position:relative}
  .st-biz{grid-template-columns:1fr;gap:16px;text-align:center}
  .st-tag{flex-basis:100%}
  .st-seals__top{min-height:70svh}
}
@media(hover:none){
  .st-line.in .st-tag{opacity:.55;transform:none}
  .st-line.tapped .st-tag{opacity:1}
}

/* ── reduced motion: the finished state of everything, no movement ─── */
@media (prefers-reduced-motion:reduce){
  .story *,.story *::before,.story *::after{animation:none !important;transition:none !important}
  .js-st .st-hero>*,.js-st .st-line,.js-st .st-chat>*,.js-st .st-word__big>*{opacity:1;transform:none}
  .js-st .st-notif__card{opacity:1;transform:none}
  .st-tag{opacity:1;transform:none}
  .st-clay .st-clay__seal{opacity:1;transform:none}
  .st-walk i:not(.st-walk__one){opacity:.22}
  .st-walk .st-walk__one{background:var(--blue)}
  .st-walk b{opacity:1;transform:translate(-50%,0)}
  .st-place b{opacity:1;transform:translate(-50%,0)}
  .st-card{border-color:var(--blue)}
  .st-card__seal{opacity:1;transform:rotate(8deg)}
}