/* Our story: a timeline in Joseph's own words.
   Day is bone, night is black. A thin rail runs down the page, fills as the reader scrolls,
   goes dark at the shutdown and comes back orange when he starts again. */

/* ---------- first screen: day beside night ---------- */
.st-hero{padding:clamp(26px,4.6vw,64px) 0 clamp(44px,6.4vw,84px)}
.st-hero__grid{display:grid;gap:34px}
.st-hero__grid>*{min-width:0}
.st-h1{margin-top:14px;display:grid;gap:.1em;font-size:clamp(2.45rem,10.4vw,4.5rem);line-height:.99;letter-spacing:-.022em}
.st-h1 span{display:block}
.st-h1__day{color:#fff}
.st-h1__night{color:var(--green-hi);text-shadow:0 0 44px rgba(99,217,54,.5)}
.st-hero .lead{margin-top:18px;max-width:33ch}
.st-hero__act{margin-top:24px}

/* the diptych: a barber pole in daylight, a search box in the dark */
.st-dip{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;height:236px;border-radius:var(--r-xl);overflow:hidden;background:#0b0e0b;border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -50px #000,0 0 80px -30px rgba(99,217,54,.35)}
.st-dip::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.st-dip__day,.st-dip__night{position:relative;display:grid;place-items:center;min-width:0}
.st-dip__day{background:radial-gradient(120% 80% at 50% 0,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#f7faf4,#d5dfcd)}
.st-dip__night{background:radial-gradient(110% 80% at 50% 112%,rgba(99,217,54,.3),transparent 62%),linear-gradient(180deg,#151915,#050605)}
.st-dip__night::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 42%,rgba(255,255,255,0) 42.3%);pointer-events:none}

.st-pole{position:relative;display:flex;flex-direction:column;align-items:center;width:46px;height:80%}
.st-pole::after{content:"";position:absolute;left:50%;bottom:-9px;width:150%;height:14px;margin-left:-75%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,30,4,.38),transparent);z-index:-1}
.st-pole__ball{flex:none;width:17px;height:17px;margin-bottom:-4px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#9c4705 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34),0 0 14px rgba(255,138,36,.6);position:relative;z-index:1}
.st-pole__cap{flex:none;width:100%;height:17px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#59615a 0,#1c211c 55%,#0a0c0a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35)}
.st-pole__cap--b{height:22px;border-radius:4px 4px 14px 14px;background:linear-gradient(180deg,#0a0c0a 0,#1c211c 45%,#3e453f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 14px -8px rgba(0,0,0,.6)}
.st-pole__glass{position:relative;flex:1;width:80%;min-height:0;overflow:hidden;background:#0b0e0b;box-shadow:0 0 0 1.5px rgba(0,0,0,.72)}
.st-pole__stripes{position:absolute;left:0;right:0;top:0;bottom:-112px;background-size:112px 112px;background-image:linear-gradient(45deg,
  #63d936 0,#63d936 10.8%,#f3f7f0 11.2%,#f3f7f0 13.3%,#0b0e0b 13.7%,#0b0e0b 24.8%,
  #ff8a24 25.2%,#ff8a24 35.8%,#f3f7f0 36.2%,#f3f7f0 38.3%,#0b0e0b 38.7%,#0b0e0b 49.8%,
  #63d936 50.2%,#63d936 60.8%,#f3f7f0 61.2%,#f3f7f0 63.3%,#0b0e0b 63.7%,#0b0e0b 74.8%,
  #ff8a24 75.2%,#ff8a24 85.8%,#f3f7f0 86.2%,#f3f7f0 88.3%,#0b0e0b 88.7%,#0b0e0b 100%)}
.st-pole__glass::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 24%,rgba(255,255,255,.5) 36%,rgba(255,255,255,0) 50%,rgba(0,0,0,0) 68%,rgba(0,0,0,.62) 100%)}
.anim .st-pole__stripes{animation:st-pole 3.4s linear infinite;will-change:transform}
@keyframes st-pole{to{transform:translate3d(0,-112px,0)}}

/* the glass search box, drawn three ways down the page: live, holding his words, and switched off */
.st-tube{display:flex;align-items:center;gap:9px;height:48px;padding:0 9px 0 15px;border-radius:999px;background:linear-gradient(180deg,#191e19,#0c0f0c);border:1.5px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -13px 24px -17px rgba(99,217,54,.55),0 0 46px -8px rgba(99,217,54,.6)}
.st-tube>svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round}
.st-tube--live{width:min(82%,250px)}
.st-caret{flex:none;width:2px;height:21px;border-radius:2px;background:var(--green-hi);box-shadow:0 0 9px var(--green-hi)}
.anim .st-caret{animation:blink 1.1s steps(1) infinite}
.st-tube__go{flex:none;margin-left:auto;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#ffe0bd 0,#ffa145 36%,#f07812 72%,#b8580a 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),0 6px 16px -6px rgba(255,138,36,.9)}

/* ---------- the timeline ---------- */
.st-story{--ch-pad:clamp(54px,8.6vw,112px);--rail-x:9px;--bead:34px;--stub:calc(var(--gut) - var(--rail-x) - 2px)}
.st-ch{position:relative;padding-block:var(--ch-pad);--fill:var(--green);--glow:rgba(99,217,54,.7);--track:rgba(255,255,255,.13);--bead-bg:#070907;--bead-fg:#fff;--bead-dim:rgba(255,255,255,.3)}
.st-ch:focus{outline:none}
.st-rail{position:absolute;z-index:1;top:0;bottom:0;left:var(--rail-x);width:2px;background:var(--track);pointer-events:none}
.st-rail i{position:absolute;inset:0;background:var(--fill);box-shadow:0 0 12px var(--glow);transform-origin:50% 0}
.anim .st-rail i{transform:scaleY(0);will-change:transform}
.st-ch--bench .st-rail{-webkit-mask-image:linear-gradient(180deg,transparent,#000 72px);mask-image:linear-gradient(180deg,transparent,#000 72px)}
.st-ch__in>*{min-width:0}
.st-ch__head{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin-bottom:24px}
.st-ch__head::before{content:"";position:absolute;right:100%;top:50%;width:var(--stub);height:2px;margin-top:-1px;background:var(--fill)}
.st-ch__head h2{font-size:clamp(1.32rem,4.6vw,1.62rem);line-height:1.1;letter-spacing:0}
.st-bead{position:relative;flex:none;display:grid;place-items:center;width:var(--bead);height:var(--bead);border-radius:50%;background:var(--bead-bg);color:var(--bead-fg);box-shadow:inset 0 0 0 2px var(--bead-dim);font:800 1.02rem/1 var(--display);font-variant-numeric:tabular-nums}
.st-bead::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fill),0 0 18px var(--glow);transition:opacity .5s var(--ease)}
.st-live .st-ch:not(.is-on) .st-bead::after{opacity:0}

/* shared story type */
.st-big{font:800 clamp(2.05rem,8.7vw,3.5rem)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.st-big--xl{font-size:clamp(2.5rem,11.4vw,5.1rem);line-height:.97;letter-spacing:-.026em}
.st-body{font-size:clamp(1.15rem,2.1vw,1.3rem);line-height:1.52;color:var(--text-2);max-width:35ch}
.st-body--hi{color:var(--text);font-weight:600}
.st-pull{font:800 clamp(1.6rem,6.5vw,2.35rem)/1.1 var(--display);letter-spacing:-.012em;text-wrap:balance}
.band .st-body{color:inherit}

/* framed photos: rounded, a thin light edge, a soft glow. The frame holds up whether the photo is dark or bright. */
.st-shot{position:relative;--shot-glow:rgba(99,217,54,.55)}
.st-shot picture{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#0c0f0c;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 1px rgba(0,0,0,.75),0 36px 80px -34px var(--shot-glow),0 0 74px -22px var(--shot-glow)}
.st-shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.st-shot picture::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 24%,rgba(0,0,0,0) 60%,rgba(0,0,0,.32));box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.05)}
.st-standin{display:inline-block;margin-top:14px;padding:6px 11px;border-radius:9px;border:1px dashed var(--line-3);font-size:.86rem;font-weight:600;line-height:1.35;color:var(--text-3);text-wrap:balance}

/* 1. the bench: night, one photo, one promise */
.st-bench{display:grid;gap:26px}
.st-bench__txt{display:grid;gap:22px}
.st-bench__txt .st-pull{color:var(--green-hi);text-shadow:0 0 34px rgba(99,217,54,.35)}

/* 2. the chair: daylight */
.st-ch--chair{--fill:#0b0e0b;--glow:transparent;--track:rgba(11,14,11,.16);--bead-bg:#0b0e0b;--bead-fg:var(--bone);--bead-dim:#0b0e0b}
.st-chair{display:grid;gap:26px}
.st-chair__lead{font-weight:500}
.st-collage{position:relative;padding:7px 11px 15% 7px}
.st-ch--chair .st-shot picture{border:0;box-shadow:0 0 0 7px #0b0e0b,0 34px 54px -24px rgba(22,70,8,.6)}
.st-collage__a{width:88%}
.st-collage__b{position:absolute;right:11px;bottom:11px;width:46%}
.st-ch--chair .st-collage__b picture{transform:rotate(3deg);box-shadow:0 0 0 6px #0b0e0b,0 0 0 11px var(--bone),0 26px 40px -18px rgba(22,70,8,.6)}
.st-chair__big{margin-top:4px}
.st-came{display:grid;gap:3px}
.st-came__a{font-size:clamp(1.15rem,2.1vw,1.3rem);line-height:1.5;font-weight:500;margin-bottom:8px}
.st-came__w{font:800 clamp(1.9rem,8.5vw,3.8rem)/1.03 var(--display);letter-spacing:-.022em;color:rgba(11,14,11,.46)}
.st-came__w:nth-of-type(3){padding-left:13%;color:rgba(11,14,11,.72)}
.st-came__w:nth-of-type(4){justify-self:end;color:#0b0e0b}
.st-chair__pull{padding-top:22px;border-top:3px solid #0b0e0b}

/* 3. TOWS: the first engine, as an outline */
.st-tows{display:grid;gap:30px}
.st-named{display:grid;gap:8px}
.st-named__a{font:800 clamp(1.6rem,6.5vw,2.35rem)/1.1 var(--display);letter-spacing:-.012em;max-width:17ch;text-wrap:balance}
.st-named__w{--ol:2px;--oc:var(--green-hi);display:block;justify-self:start;font:900 clamp(5.2rem,27.5vw,12.6rem)/.86 var(--display);letter-spacing:-.02em;color:#060906;filter:drop-shadow(0 0 20px rgba(99,217,54,.42));text-shadow:
  var(--ol) 0 0 var(--oc),calc(var(--ol)*-1) 0 0 var(--oc),0 var(--ol) 0 var(--oc),0 calc(var(--ol)*-1) 0 var(--oc),
  calc(var(--ol)*.707) calc(var(--ol)*.707) 0 var(--oc),calc(var(--ol)*-.707) calc(var(--ol)*.707) 0 var(--oc),calc(var(--ol)*.707) calc(var(--ol)*-.707) 0 var(--oc),calc(var(--ol)*-.707) calc(var(--ol)*-.707) 0 var(--oc),
  calc(var(--ol)*.924) calc(var(--ol)*.383) 0 var(--oc),calc(var(--ol)*.383) calc(var(--ol)*.924) 0 var(--oc),calc(var(--ol)*-.924) calc(var(--ol)*.383) 0 var(--oc),calc(var(--ol)*-.383) calc(var(--ol)*.924) 0 var(--oc),
  calc(var(--ol)*.924) calc(var(--ol)*-.383) 0 var(--oc),calc(var(--ol)*.383) calc(var(--ol)*-.924) 0 var(--oc),calc(var(--ol)*-.924) calc(var(--ol)*-.383) 0 var(--oc),calc(var(--ol)*-.383) calc(var(--ol)*-.924) 0 var(--oc)}
.st-tows__grid{display:grid;gap:32px}
.st-flow{display:grid;margin-top:14px;max-width:440px}
.st-flow__n{display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.028));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);font:700 1.12rem/1.3 var(--sans);color:var(--text)}
.st-flow__n>span{text-wrap:balance}
.st-flow__n .coin{font-size:1.25rem}
.st-flow__n .icon{color:var(--orange-hi)}
.st-flow__c{position:relative;display:block;width:2px;height:44px;margin-left:29px;background:repeating-linear-gradient(180deg,var(--line-3) 0,var(--line-3) 4px,transparent 4px,transparent 9px)}
.st-flow__c i{position:absolute;left:-5px;top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#e6ffd9 0,#8cf060 34%,#49b922 68%,#1d6a0e 100%);box-shadow:0 0 12px rgba(99,217,54,.85)}
.calm .st-flow__c i,html:not(.anim) .st-flow__c i{top:16px}
.anim .st-flow__c i{animation:st-drop 2.3s var(--ease) infinite}
@keyframes st-drop{0%{transform:translate3d(0,0,0);opacity:0}16%{opacity:1}80%{opacity:1}100%{transform:translate3d(0,44px,0);opacity:0}}
.st-ai{display:grid;gap:13px;align-content:start}
.st-ai__t{font-size:clamp(1.15rem,2.1vw,1.3rem);line-height:1.5;color:var(--text);font-weight:600}
.st-tube--caps{height:auto;min-height:60px;flex-wrap:wrap;gap:8px;padding:11px 12px 11px 16px;border-radius:31px;max-width:520px}
.st-cap{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:rgba(99,217,54,.17);box-shadow:inset 0 0 0 1px rgba(99,217,54,.55);color:#fff;font-size:1rem;font-weight:700;white-space:nowrap}

/* 4. 59,000 a week: the bright band, ink on green */
.st-ch--grow{--fill:var(--green-ink);--glow:transparent;--track:rgba(5,20,2,.18);--bead-bg:var(--green-ink);--bead-fg:var(--green-hi);--bead-dim:var(--green-ink)}
.st-grow{display:grid;gap:30px}
.st-grow__top{display:grid;gap:6px}
.st-flyers{position:relative;height:112px}
.st-fly{position:absolute;left:var(--x);top:var(--y)}
.st-fly i{position:relative;display:block;width:58px;height:76px;border-radius:6px;background:linear-gradient(180deg,#fff,#e6eddf);box-shadow:0 14px 20px -10px rgba(4,44,0,.62),inset 0 0 0 1px rgba(0,0,0,.07);transform:rotate(var(--r))}
.st-fly i::before{content:"";position:absolute;left:8px;right:8px;top:10px;height:12px;border-radius:99px;background:radial-gradient(circle at calc(100% - 6px) 50%,#ff8a24 0,#ff8a24 3px,transparent 3.6px),#0b0e0b}
.st-fly i::after{content:"";position:absolute;left:8px;right:8px;top:32px;height:31px;background:repeating-linear-gradient(180deg,rgba(11,14,11,.5) 0,rgba(11,14,11,.5) 3px,transparent 3px,transparent 10px)}
.st-fly--1{--x:1%;--y:30px;--r:-19deg}
.st-fly--2{--x:15%;--y:12px;--r:-9deg}
.st-fly--3{--x:30%;--y:22px;--r:-2deg}
.st-fly--4{--x:53%;--y:16px;--r:6deg}
.st-fly--5{--x:68%;--y:8px;--r:13deg}
.st-fly--6{--x:83%;--y:30px;--r:23deg}
.st-score__main{display:grid;gap:4px}
.st-score__n{display:block;padding-bottom:.115em;font:900 clamp(4.9rem,25.4vw,12.4rem)/.84 var(--display);letter-spacing:-.045em}
.st-score__l{font:800 clamp(1.14rem,4.4vw,1.7rem)/1.14 var(--display);letter-spacing:-.005em}
.st-score__row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 18px;margin-top:24px;border-top:3px solid var(--green-ink)}
.st-score__row li{display:grid;align-content:start;gap:3px;padding-top:14px}
.st-score__k{font-size:.98rem;font-weight:700;opacity:.82}
.st-score__m{display:block;padding-bottom:.09em;font:900 clamp(2.9rem,13vw,5.4rem)/.9 var(--display);letter-spacing:-.035em}
.st-grow__txt{display:grid;gap:14px}
.st-grow__txt .st-body{font-weight:500}
.st-grow__sick{padding-top:26px;border-top:3px solid var(--green-ink)}

/* 5. the shutdown: lights off. No gloss, no color. */
.st-ch--stop{background:#000;--fill:rgba(255,255,255,.42);--glow:transparent;--track:transparent;--bead-bg:#000;--bead-fg:var(--text-2);--bead-dim:rgba(255,255,255,.26)}
.st-ch--stop .st-rail{background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 5px,transparent 5px,transparent 12px)}
.st-ch--stop .st-rail i{opacity:0}
.st-ch--stop .st-ch__head::before{background:rgba(255,255,255,.3)}
.st-ch--stop .st-ch__head h2{color:var(--text-2)}
.st-stop{display:grid;gap:30px}
.st-tube--off{width:min(100%,440px);height:58px;background:none;border:1.5px dashed rgba(255,255,255,.3);box-shadow:none}
.st-flat{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.2)}
.st-tube--off .st-tube__go{width:38px;height:38px;margin-left:0;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.st-stop__rows{display:grid}
.st-stop__rows p{padding:18px 0;border-top:1px solid var(--line-2);font-size:clamp(1.15rem,2.1vw,1.3rem);line-height:1.45;font-weight:500;color:var(--text);max-width:34ch}
.st-stop__rows p:last-child{border-bottom:1px solid var(--line-2)}

/* 6. starting again: dusk. The glow comes back, orange this time. */
.st-ch--again{--fill:var(--orange);--glow:rgba(255,138,36,.75);background:radial-gradient(84% 36% at 82% 62%,rgba(255,138,36,.2),transparent 72%),radial-gradient(64% 26% at 6% 78%,rgba(99,217,54,.1),transparent 72%)}
.st-again{display:grid;gap:30px}
.st-again__txt{display:grid;gap:18px}
.st-again__txt .st-big{color:var(--orange-hi);text-shadow:0 0 40px rgba(255,138,36,.4)}
.st-again__shot{--shot-glow:rgba(255,138,36,.62)}
.st-newname{display:grid;gap:6px;margin-top:6px}
.st-newname__w{display:block;justify-self:start;font:900 clamp(5.4rem,29vw,14.5rem)/.84 var(--display);letter-spacing:-.035em;color:var(--green-hi);background:linear-gradient(180deg,#eaffdf 0,#9cf573 30%,#63d936 58%,#3aa51c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(99,217,54,.42)) drop-shadow(0 16px 20px rgba(0,0,0,.7))}
.st-newname__dot{padding:0 .09em 0 .03em;margin:0 -.09em 0 -.03em;background:linear-gradient(180deg,#ffe3c2 0,#ffa94f 34%,#ff8a24 62%,#d1670c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--orange-hi)}
.st-newname__say{font:800 clamp(1.5rem,6vw,2.3rem)/1.1 var(--display);letter-spacing:-.01em}

/* the last node: signed */
.st-ch--close{--fill:var(--orange);--glow:rgba(255,138,36,.75);padding-bottom:clamp(20px,4vw,48px)}
.st-ch--close .st-rail{bottom:auto;height:calc(var(--ch-pad) - 24px)}
.st-ch--close .st-rail::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#9c4705 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34),0 0 18px rgba(255,138,36,.8)}
.st-close__h{display:grid;font-size:clamp(2.6rem,11.6vw,5.2rem);line-height:.98;letter-spacing:-.024em}
.st-close__h span{display:block}
.st-close__idea{margin-top:14px;font:800 clamp(1.5rem,6vw,2.3rem)/1.1 var(--display);letter-spacing:-.01em;color:var(--text-2)}
.st-sign{display:table;margin-top:28px;padding-top:18px;border-top:1px solid var(--line-3);font-size:1.08rem;color:var(--text-2)}
.st-sign strong{font:800 1.4rem/1.2 var(--display);color:var(--text)}
.st-close__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:26px}
.st-quiet{display:inline-flex;align-items:center;min-height:44px}
.st-note{margin-top:clamp(40px,6vw,64px);max-width:46ch;padding:12px 15px;border-radius:12px;border:1px dashed var(--line-3);font-size:.9rem;line-height:1.45;font-weight:500;color:var(--text-3)}

/* ---------- wider screens: the chapter name rides the rail ---------- */
@media (min-width:700px){
  .st-dip{height:300px}
  .st-pole{width:58px}
  .st-tube--live{height:54px}
  .st-flyers{height:124px}
  .st-fly i{width:66px;height:86px}
  .st-fly i::after{top:34px;height:38px}
  .st-collage{max-width:560px}
  .st-stop__rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
  .st-stop__rows p,.st-stop__rows p:last-child{border-bottom:0}
}
@media (min-width:980px){
  .st-hero__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:60px}
  .st-dip{height:clamp(390px,33vw,460px)}
  .st-pole{width:74px}
  .st-pole__ball{width:24px;height:24px;margin-bottom:-5px}
  .st-pole__cap{height:24px;border-radius:18px 18px 5px 5px}
  .st-pole__cap--b{height:30px;border-radius:5px 5px 18px 18px}

  .st-story{--rail-x:max(var(--gut),calc((100% - var(--wrap))/2));--bead:44px;--stub:26px}
  .st-ch__in{display:grid;grid-template-columns:214px minmax(0,1fr);column-gap:42px;align-items:start}
  .st-ch__head{position:sticky;top:calc(var(--top) + 30px);flex-direction:column;align-items:flex-start;gap:14px;margin:0;padding-left:28px}
  .st-ch__head::before{right:auto;left:2px;top:calc(var(--bead)/2)}
  .st-ch__head h2{font-size:1.62rem;max-width:8ch}
  .st-bead{font-size:1.2rem}
  .st-ch--close .st-ch__body{grid-column:2}

  .st-bench{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"big shot" "txt shot";grid-template-rows:auto 1fr;gap:26px 52px}
  .st-bench__big{grid-area:big;align-self:end}
  .st-bench__shot{grid-area:shot}
  .st-bench__txt{grid-area:txt;align-content:start}

  .st-chair{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"col ." "col lead" "col big" "col ." "came came" "pull pull";grid-template-rows:1fr auto auto 1fr;gap:0 52px}
  .st-chair__lead{grid-area:lead;padding-bottom:20px}
  .st-collage{grid-area:col;max-width:none}
  .st-chair__big{grid-area:big}
  .st-came{grid-area:came;margin-top:44px}
  .st-came__w:nth-of-type(3){padding-left:11%}
  .st-came__w:nth-of-type(4){justify-self:start;padding-left:22%}
  .st-chair__pull{grid-area:pull;margin-top:36px}

  .st-named__a{max-width:22ch}
  .st-tows__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:start}
  .st-named__w{--ol:2.5px}

  .st-grow__top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:30px}
  .st-flyers{height:150px}
  .st-score__row{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0 40px}
  .st-grow__txt{grid-template-columns:1fr 1fr;gap:40px}

  .st-again{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"txt shot" "name name";gap:40px 52px;align-items:center}
  .st-again__txt{grid-area:txt}
  .st-again__shot{grid-area:shot}
  .st-newname{grid-area:name}
  .st-newname__w{font-size:clamp(5.4rem,17vw,12.6rem)}
}
@media (min-width:1180px){
  .st-newname{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px 34px}
  .st-newname__say{padding-bottom:.5em}
}