/* Fit 4 Worship · bespoke series page (round 3: the gym that turns into worship)
   Art direction: walk into a hardcore training gym that is also a worship room. Rubber floor
   (the series' own scan grain as the rubber fleck), the series' charcoal wall with its purple
   scripture streaks, caged lights, stencilled slogans in scuffed purple (lines from the lessons),
   a red seven-segment gym clock, a chalkboard WOD that programs the four lessons, and a real lift:
   load ten plates of good fruit from Part II onto the series' own barbell, then press and hold.
   After the lockout the gym lights drop and the stage comes up purple for Psalm 150:6.
   Lime is SMR's accent only. Purple tape is the one accent per screen; red is the clock only. */

@media (prefers-reduced-motion: no-preference){
  @view-transition { navigation: auto; }
}

:root{
  --char:#111013;
  --rubber:#0b0a0d;
  --ink:#f4f5e7;            /* the art's off-white */
  --muted:#b9b6c4;
  --purple:#4c0f8a;         /* the art's purple (tape, 4) */
  --purple-hi:#5a14a6;
  --purple-lo:#3a0b6c;
  --paint:#6b1fd0;          /* stencil paint, scuffed */
  --violet:#c9b0ff;
  --chalk:#ecebe2;
  --chalk-ink:#16141b;
  --chalk-muted:#57536a;
  --slate:#18171b;
  --lime:#b6ff00;           /* SMR accent only */
  --led:#ff2b1c;            /* the gym clock only */
  --foot:#0c0b0e;
  --disp:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --sten:"Big Shoulders Stencil","Barlow Condensed","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --gutter:clamp(16px,4.6vw,72px);
  --tex:url(/assets/series/fit-4-worship/floor-512.webp);
  --dust:url(/assets/series/fit-4-worship/dust-512.webp);
  --scuff:url(/assets/series/fit-4-worship/scuff-mask-512.webp);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--rubber);color:var(--ink);font:400 16px/1.65 var(--body);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
main{overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:#0b0b0b;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- shared bits ---------- */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--muted)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.dark{color:var(--chalk-muted)}
.label.dark i{background:var(--chalk-ink)}
.tape{display:inline;background:var(--purple);color:var(--ink);padding:.02em .2em .06em;margin:0 -.03em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tape.ink{background:var(--char);color:var(--ink)}
.wall-h .tape,.h3 .tape,.cue.big .tape,.lifted .tape,.rise .tape{display:inline-block;transform:rotate(-2deg);transform-origin:left center;line-height:.98}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .14s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--lime);color:#0b0b0b}.btn.lime:hover{background:var(--ink)}
.btn.line{border:1px solid rgba(244,245,231,.42);color:var(--ink)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px;white-space:nowrap}

.wall-h{font:800 clamp(46px,7.4vw,138px)/.9 var(--disp);letter-spacing:-.045em;text-transform:uppercase;margin:16px 0 0;text-wrap:balance}
.wall-h.stencil{font:900 clamp(56px,10.4vw,196px)/.84 var(--sten);letter-spacing:-.01em}
.h3{font:800 clamp(28px,3vw,46px)/1.02 var(--disp);letter-spacing:-.03em;text-transform:uppercase;margin:12px 0 0}
.body{margin:22px 0 0;font-size:clamp(16px,1.18vw,18px);line-height:1.7;max-width:56ch}
.note{margin:14px 0 0;font-size:12px;color:var(--muted)}

/* bolted steel plate signage */
.plate-sign{display:inline-flex;flex-wrap:wrap;gap:0;margin:0;padding:9px 30px;position:relative;
  background:linear-gradient(180deg,#d9dade 0%,#a9abb2 46%,#c3c5cb 54%,#8c8e96 100%);color:#17161a;
  font:900 13px/1 var(--sten);letter-spacing:.2em;text-transform:uppercase;box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 10px 24px rgba(0,0,0,.5);
  -webkit-mask:var(--scuff) 0 0/260px;mask:var(--scuff) 0 0/260px}
.plate-sign::before,.plate-sign::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f2f2f4,#6c6e75 60%,#3a3b40)}
.plate-sign::before{left:10px}.plate-sign::after{right:10px}
.plate-sign span+span::before{content:"/";margin:0 .7em;opacity:.55}

/* stencilled slogans, sprayed in scuffed purple on the wall */
.stencil-wall{position:absolute;margin:0;pointer-events:none;user-select:none;font:900 clamp(40px,7vw,132px)/.86 var(--sten);text-transform:uppercase;letter-spacing:.01em;color:var(--paint);
  white-space:nowrap;-webkit-mask:var(--scuff) 0 0/300px;mask:var(--scuff) 0 0/300px;opacity:.9}

/* ---------- header / footer (SMR common) ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:30;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--ink);transition:color .15s}
.nav a:hover{color:var(--lime)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.crumbs a:hover{color:var(--lime)}

.foot{position:relative;z-index:2;padding:40px var(--gutter);background:var(--foot)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start;border-top:1px solid rgba(244,245,231,.1)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--muted);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--muted)}
.fnav a:hover{color:var(--ink)}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- the room: wall, rubber floor, caged lights ---------- */
.wall,.scene-wall{position:absolute;inset:0;z-index:-3;overflow:hidden}
.wall img,.scene-wall img{width:100%;height:100%;object-fit:cover}
.scene-wall.flip img{transform:scaleX(-1)}

/* rubber floor: the series' scan grain as the fleck, tile seams, in perspective */
.floor{position:absolute;left:-30%;right:-30%;bottom:0;height:var(--floor-h,62%);z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.95) 3px,transparent 3px) 0 0/256px 256px,
    linear-gradient(180deg,rgba(0,0,0,.95) 3px,transparent 3px) 0 0/256px 256px,
    var(--tex) 0 0/256px 256px,#0a090c;
  transform:perspective(900px) rotateX(64deg);transform-origin:50% 100%}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,13,1) 0%,rgba(11,10,13,.55) 18%,rgba(11,10,13,0) 46%),
  radial-gradient(50% 60% at 50% 80%,rgba(120,70,220,.12),transparent 70%)}

/* caged lights: CSS/SVG fixtures with their glow and cone */
.lamps{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lamp{position:absolute;top:0;width:clamp(44px,4.2vw,78px);aspect-ratio:80/200;transform-origin:50% 0;transform:rotate(var(--swing,0deg));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 200'%3E%3Cpath d='M40 0V112' stroke='%23050506' stroke-width='3'/%3E%3Crect x='28' y='106' width='24' height='28' rx='3' fill='%2326242b'/%3E%3Ccircle cx='40' cy='162' r='19' fill='%23fff7e4'/%3E%3Cg fill='none' stroke='%23121114' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M30 134C12 148 12 182 40 194C68 182 68 148 50 134'/%3E%3Cpath d='M36 134C27 150 27 184 40 194C53 184 53 150 44 134'/%3E%3Cpath d='M18 150H62M15 166H65M19 182H61'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.lamp::after{content:"";position:absolute;left:50%;top:81%;width:44vw;height:44vw;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,247,228,.5),rgba(255,247,228,.16) 22%,rgba(255,240,215,.05) 52%,transparent);mix-blend-mode:screen;transition:opacity .2s}
.lamp::before{content:"";position:absolute;left:50%;top:86%;width:38vw;height:120vh;transform:translateX(-50%);pointer-events:none;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,247,228,.17),rgba(255,247,228,.03) 60%,transparent);mix-blend-mode:screen;transition:opacity .2s}
.lamp.l1{left:25%}.lamp.l2{left:47%;top:-24px}.lamp.l3{left:67%}
.lamps.dead .lamp,.out .lamps .lamp{filter:brightness(.28) saturate(0)}
.lamps.dead .lamp::before,.lamps.dead .lamp::after,.out .lamps .lamp::before,.out .lamps .lamp::after{opacity:0}

/* ---------- the gym clock: red seven-segment digits (built by JS) ---------- */
.board{--dw:24px;background:#070708;color:var(--led);border:3px solid #26252b;border-radius:4px;padding:calc(var(--dw)*.45) calc(var(--dw)*.6);position:relative;
  box-shadow:0 0 0 1px #000,0 18px 40px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.9)}
.board::before,.board::after{content:"";position:absolute;top:6px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8d8dc,#55565c 60%,#2a2b2f)}
.board::before{left:6px}.board::after{right:6px}
.board-cap{margin:0 0 calc(var(--dw)*.3);font:900 11px/1 var(--sten);letter-spacing:.28em;text-transform:uppercase;color:#8e8b96;text-align:center}
.led-row{display:flex;align-items:flex-end;gap:calc(var(--dw)*.7)}
.led-f{display:flex;flex-direction:column;align-items:center;gap:calc(var(--dw)*.18)}
.led-l{font:800 max(9px,calc(var(--dw)*.3))/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:#9b98a3}
.led-g{display:flex;align-items:center;gap:calc(var(--dw)*.16)}
.seg{width:var(--dw);height:calc(var(--dw)*1.62);display:block;transform:skewX(-7deg);overflow:visible}
.seg polygon{fill:rgba(255,43,28,.075);transition:fill .06s}
.seg polygon.on{fill:var(--led)}
.led-g{filter:drop-shadow(0 0 calc(var(--dw)*.18) rgba(255,43,28,.7))}
.colon{display:flex;flex-direction:column;gap:calc(var(--dw)*.42);margin:0 calc(var(--dw)*.04)}
.colon i{width:calc(var(--dw)*.2);height:calc(var(--dw)*.2);background:var(--led);border-radius:1px;transform:skewX(-7deg)}
.colon.off i{background:rgba(255,43,28,.1)}
.board.flash .led-g{animation:ledflash .5s steps(2) 2}
@keyframes ledflash{50%{opacity:.15}}
.no-js .board{display:none}

.board-fixed{--dw:13px;position:fixed;top:14px;right:14px;z-index:40;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s;padding:8px 12px 7px}
.board-fixed.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.board-fixed::before,.board-fixed::after{display:none}

/* =========================================================
   1 · HERO — doors open: the gym
   ========================================================= */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:max(100svh,820px);padding:112px var(--gutter) 0;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:24px;--floor-h:70%}
.wall img{object-position:50% 30%}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(180deg, rgba(8,7,10,.7) 0%, rgba(8,7,10,.1) 22%, rgba(8,7,10,0) 50%)}
.hero .floor{height:58%}
.sw-hero{left:-1vw;top:clamp(170px,23vh,260px);font-size:clamp(46px,8.2vw,156px);transform:rotate(-2.5deg);opacity:.62;z-index:-1}
.hero-head{grid-column:1/8;grid-row:1;position:relative;z-index:3}
.hero-board{grid-column:9/13;grid-row:1;justify-self:end;align-self:start;z-index:3;--dw:clamp(20px,2.3vw,42px);margin-top:-6px;transform:rotate(1deg)}
.title{grid-column:1/-1;grid-row:2;position:relative;z-index:2;margin:18px 0 0;
  font:800 min(17.4vw,25svh)/.8 var(--disp);letter-spacing:-.052em;text-transform:uppercase;color:var(--ink);
  margin-left:-.04em;text-shadow:0 .02em .14em rgba(0,0,0,.5)}
.title .t1,.title .t2{display:flex;align-items:flex-end;white-space:nowrap}
.title .t2{margin-top:-.02em}
.title .four{color:#7b3fe4;font-size:1.5em;line-height:.62;margin:0 -.04em -.2em .005em;letter-spacing:0;position:relative;z-index:-1}
.title .t-bar{width:2.3em;height:auto;margin:0 0 .02em .04em;flex:none;filter:drop-shadow(0 .03em .05em rgba(0,0,0,.4))}
.hero-cover{grid-column:8/13;grid-row:2/4;align-self:end;justify-self:end;position:relative;z-index:1;width:min(27vw,470px);margin:0 calc(-1*var(--gutter) + 1vw) max(5vh,40px) 0}
.lean{position:relative;transform:perspective(1800px) rotateY(-14deg) rotateZ(4deg);transform-origin:50% 100%}
.lean img{width:100%;box-shadow:-24px 40px 70px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.05);view-transition-name:cover-fit-4-worship}
.lean.small img{view-transition-name:none}
.lean::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.25) 100%)}
.lean::after{content:"";position:absolute;left:-6%;right:-14%;bottom:-5%;height:9%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);transform:rotateZ(-4deg)}
.js .hero-cover .lean{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes settle{from{transform:perspective(1800px) rotateY(-14deg) rotateZ(8deg) translateY(-30px);opacity:0}to{transform:perspective(1800px) rotateY(-14deg) rotateZ(4deg);opacity:1}}
.hero-copy{grid-column:1/8;grid-row:3;align-self:end;position:relative;z-index:3;padding:24px 0 clamp(40px,7vh,100px)}
.lede{margin:0;font:800 clamp(20px,1.9vw,30px)/1.32 var(--body);letter-spacing:-.01em;max-width:32ch;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sub{margin:12px 0 0;color:#cfccd8;max-width:48ch;font-size:15px}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(244,245,231,.35)}
.follow:hover{color:var(--lime);border-color:var(--lime)}

/* =========================================================
   2 · WOD — the chalkboard on the gym wall
   ========================================================= */
.wod{position:relative;isolation:isolate;padding:70px clamp(10px,2.2vw,40px) 110px;background:var(--rubber)}
.board-wall{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--rubber),rgba(11,10,13,0) 16%,rgba(11,10,13,0) 80%,var(--char)),var(--tex) 0 0/420px,#141317}
.chalkboard{position:relative;max-width:1840px;margin:0 auto;padding:clamp(26px,4vw,70px) clamp(18px,4vw,72px) clamp(70px,7vw,110px);color:var(--chalk);
  background:
    radial-gradient(60% 40% at 22% 30%,rgba(236,235,226,.07),transparent 70%),
    radial-gradient(40% 30% at 78% 70%,rgba(236,235,226,.06),transparent 70%),
    linear-gradient(100deg,transparent 30%,rgba(236,235,226,.05) 42%,transparent 54%),
    var(--dust) 0 0/380px,
    var(--slate);
  border:clamp(8px,1vw,16px) solid #8a8c94;border-image:linear-gradient(180deg,#c9cbd1,#7d8088 50%,#a7a9b0) 1;
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 120px rgba(0,0,0,.55)}
.chalkboard::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--dust) 120px 60px/520px;opacity:.35}
.cb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 40px;border-bottom:3px solid rgba(236,235,226,.7);padding-bottom:clamp(14px,2vw,30px);
  -webkit-mask:var(--scuff) 0 0/190px;mask:var(--scuff) 0 0/190px;text-shadow:0 0 1px rgba(255,255,255,.4)}
.cb-title{margin:0;display:flex;align-items:flex-end;gap:clamp(12px,2vw,34px);font-weight:400}
.cb-wod{font:900 clamp(110px,17vw,330px)/.74 var(--sten);letter-spacing:-.01em;color:var(--chalk);transform:rotate(-1.5deg);display:block}
.cb-sub{display:flex;flex-direction:column;font:800 clamp(26px,3.6vw,68px)/.92 var(--cond);text-transform:uppercase;letter-spacing:.01em;padding-bottom:.08em}
.cb-sub span+span{color:#c9b0ff}
.cb-meta{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:800 clamp(13px,1.15vw,18px)/1.1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#d6d3cc}
.cb-days{list-style:none;margin:clamp(22px,3vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.cb-day{padding:0 clamp(14px,1.6vw,30px);border-left:2px dashed rgba(236,235,226,.35);-webkit-mask:var(--scuff) 40px 0/170px;mask:var(--scuff) 40px 0/170px;text-shadow:0 0 1px rgba(255,255,255,.35),0 0 8px rgba(236,235,226,.12)}
.cb-day:nth-child(odd){transform:rotate(-.5deg)}.cb-day:nth-child(even){transform:rotate(.4deg)}
.cb-day:first-child{border-left:0;padding-left:0}
.cb-dn{margin:0;font:800 clamp(14px,1.1vw,18px)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#c9b0ff}
.cb-dn b{display:block;font:900 clamp(54px,6vw,112px)/.86 var(--sten);letter-spacing:0;color:var(--chalk);margin-bottom:8px}
.cb-dt{margin:12px 0 0;font:800 clamp(24px,2.3vw,42px)/.95 var(--cond);text-transform:uppercase;letter-spacing:.005em;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em;text-decoration-color:rgba(201,176,255,.8)}
.cb-moves{list-style:none;margin:18px 0 0;padding:0}
.cb-moves li{position:relative;padding:9px 0 9px 26px;font:600 clamp(16px,1.2vw,19px)/1.38 var(--cond);letter-spacing:.02em;color:#e9e7de}
.cb-moves li::before{content:"";position:absolute;left:2px;top:.95em;width:12px;height:12px;border:2px solid rgba(236,235,226,.85);transform:rotate(-4deg)}
.cb-x{font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#fff;margin-right:.4em;font-size:.86em}
.cb-ref{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.82em;color:#c9b0ff}
.cb-foot{margin-top:clamp(26px,3vw,48px);padding-top:clamp(16px,2vw,28px);border-top:2px dashed rgba(236,235,226,.4);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px;
  -webkit-mask:var(--scuff) 0 40px/300px;mask:var(--scuff) 0 40px/300px}
.cb-fin{margin:0;font:800 clamp(24px,2.6vw,46px)/1.02 var(--cond);text-transform:uppercase;max-width:30ch}
.cb-fin .cb-x{display:block;font-size:.5em;color:#c9b0ff;margin-bottom:6px}
.cb-note{margin:0;font:600 clamp(16px,1.25vw,20px)/1.35 var(--cond);letter-spacing:.02em;max-width:34ch;text-align:right;color:#dcd9d0}
.cb-note span{display:block;margin-top:4px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78em;color:#c9b0ff}
.cb-tray{position:absolute;left:-1%;right:-1%;height:16px;bottom:-24px;background:linear-gradient(180deg,#d2d4d9,#7d8088);box-shadow:0 10px 20px rgba(0,0,0,.6)}
.cb-tray i{position:absolute;top:-9px;width:62px;height:10px;border-radius:2px;background:#f2f1ea;box-shadow:inset -6px 0 0 rgba(0,0,0,.08)}
.cb-tray i:nth-child(1){left:14%;transform:rotate(-2deg)}.cb-tray i:nth-child(2){left:19%;width:40px;background:#c9b0ff}
.cb-tray b{position:absolute;right:16%;top:-22px;width:120px;height:24px;border-radius:3px;background:linear-gradient(180deg,#3a3740 0 40%,#d9d6cc 40%)}

/* =========================================================
   3 · THE SETS — four scenes, four grounds, a set number sprayed on each
   ========================================================= */
.program{position:relative;background:var(--char)}
.parts{list-style:none;margin:0;padding:0}
.part{position:relative;isolation:isolate;overflow:hidden}
.set-no{position:absolute;z-index:-1;margin:0;pointer-events:none;font:900 clamp(200px,36vw,700px)/.74 var(--sten);letter-spacing:-.02em;color:var(--paint);opacity:.55;
  -webkit-mask:var(--scuff) 0 0/340px;mask:var(--scuff) 0 0/340px;display:flex;align-items:flex-start}
.set-no span{font-size:.16em;line-height:1;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg);margin:.2em .14em 0 0}
.no{margin:0;font:800 14px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--violet);display:flex;gap:14px;align-items:baseline}
.no span{color:var(--muted);font-weight:600}
.verse{margin:24px 0 0;padding:0}
.verse p{margin:0;font:600 clamp(18px,1.55vw,24px)/1.45 var(--body);max-width:40ch}
.verse footer{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--violet)}
.copy .body{font-size:16px;max-width:50ch}
.cue{margin:24px 0 0;font:800 clamp(18px,1.5vw,22px)/1.25 var(--disp);letter-spacing:-.01em;text-transform:uppercase;max-width:30ch;padding-left:18px;border-left:3px solid currentColor}
.lockup{margin:0;position:absolute;z-index:0;pointer-events:none}
.lockup img{width:100%}
.lockup figcaption,.obj figcaption{position:absolute;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--muted);white-space:nowrap}

.p1{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:calc(max(4vh,30px) + 60vw) var(--gutter) 130px;align-content:end}
.p1::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(180deg,var(--char) 0%,rgba(17,16,19,.2) 10%,rgba(17,16,19,0) 26%,rgba(17,16,19,0) 52%,rgba(17,16,19,.8) 74%,rgba(17,16,19,.9) 100%)}
.p1 .set-no{right:-4vw;bottom:-6vw;opacity:.4}
.p1 .lockup{width:122vw;left:-22vw;top:max(4vh,30px)}
.p1 .lockup figcaption{right:24vw;top:-10px}
.p1 .copy{grid-column:1/7;position:relative;z-index:2}
.p1 .copy-b{grid-column:8/13;position:relative;z-index:2;align-self:end}
.cue.big{font-size:clamp(28px,3.1vw,52px);line-height:1.02;border:0;padding:0;max-width:16ch;margin:0}
.integrity{margin:34px 0 0}
.integrity p{margin:0;font:600 clamp(16px,1.25vw,19px)/1.55 var(--body);color:#dedbe8;max-width:44ch}
.integrity footer{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--violet)}

.p2{background:linear-gradient(180deg,var(--char) 0%,var(--purple-lo) 9%,var(--purple-hi) 30%,var(--purple-hi) 76%,#8f78b0 92%,var(--chalk) 100%);
  min-height:max(120vh,980px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:16vh var(--gutter) 22vh;align-items:center}
.streaks{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;background:linear-gradient(180deg,rgba(36,6,66,0) 0%,#2a0752 12%,#24063f 66%,rgba(36,6,66,0) 86%);
  -webkit-mask:url(/assets/series/fit-4-worship/praise-1000.webp) 30% 0/ max(1300px,120%) auto repeat-y;mask:url(/assets/series/fit-4-worship/praise-1000.webp) 30% 0/ max(1300px,120%) auto repeat-y}
.p2 .set-no{right:-3vw;top:6vh;color:#1d0538;opacity:.5}
.sw-p2{left:-2vw;bottom:9vh;font-size:clamp(44px,7.6vw,146px);color:#2a0a52;opacity:.55;transform:rotate(-2deg);z-index:-1}
.obj{margin:0;position:relative;z-index:1}
.obj img{width:100%}
.p2 .story{grid-column:1/6;margin-left:calc(-1*var(--gutter) - 4vw);transform:rotate(-3deg);width:calc(100% + var(--gutter) + 4vw)}
.p2 .story img{box-shadow:30px 50px 90px rgba(20,4,40,.6),0 0 0 1px rgba(0,0,0,.2)}
.p2 .story figcaption{right:0;bottom:-30px;color:#ddd0f5}
.p2 .copy{grid-column:7/13;position:relative;z-index:2}
.p2 .no,.p2 .verse footer{color:#e4d8ff}
.p2 .no span{color:#cbbbe8}
.p2 .wall-h{font-size:clamp(46px,7.6vw,140px)}
.p2 .body{color:#efe9fb}

.p3{background:var(--chalk);color:var(--chalk-ink);min-height:max(110vh,900px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:6vh var(--gutter) 20vh;align-items:center;margin-top:-1px}
.p3::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--tex) 0 0/360px;opacity:.06;mix-blend-mode:multiply}
.p3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:-1;background:linear-gradient(180deg,rgba(236,235,226,0),var(--char))}
.p3 .set-no{left:-3vw;bottom:2vh;color:#cfc6e4;opacity:.75}
.p3 .copy{grid-column:1/7;grid-row:1;position:relative;z-index:2}
.p3 .post{grid-column:7/13;grid-row:1;margin-right:calc(-1*var(--gutter) - 9vw);transform:rotate(3.5deg)}
.p3 .post img{box-shadow:-20px 50px 90px rgba(30,20,50,.38),0 8px 20px rgba(30,20,50,.18)}
.p3 .post figcaption{left:0;bottom:-30px;color:var(--chalk-muted);transform:rotate(-3.5deg);transform-origin:left}
.p3 .no{color:var(--purple)}.p3 .no span{color:var(--chalk-muted)}
.p3 .verse footer{color:var(--purple)}
.p3 .wall-h{font-size:clamp(44px,6.8vw,124px)}
.p3 .body{color:#34313d}

.p4{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:calc(8vh + 58vw) var(--gutter) 18vh;align-items:start}
.p4::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(180deg,var(--char) 0%,rgba(17,16,19,0) 12%,rgba(17,16,19,0) 46%,rgba(17,16,19,.82) 64%,rgba(17,16,19,.9) 84%,var(--rubber) 100%)}
.p4 .set-no{left:-2vw;bottom:-5vw;opacity:.42}
.p4 .lockup{width:116vw;left:2vw;top:8vh}
.p4 .lockup figcaption{left:2vw;top:-18px}
.p4 .copy{grid-column:1/7;position:relative;z-index:2}
.p4 .copy-b{grid-column:8/13;position:relative;z-index:2;padding-top:36px}

/* =========================================================
   4 · THE LIFT — the platform, the bar, ten plates
   ========================================================= */
.lift-sec{position:relative;isolation:isolate;overflow:hidden;padding:13vh var(--gutter) 110px;background:var(--rubber);--floor-h:52%}
.gym-dark{position:absolute;inset:0;z-index:-4;background:
  linear-gradient(180deg,var(--rubber) 0%,rgba(11,10,13,0) 14%),
  var(--tex) 0 0/520px,#121115}
.gym-dark::after{content:"";position:absolute;inset:0;opacity:.32;background:linear-gradient(180deg,rgba(36,6,66,0),#3a0b6c 40%,rgba(36,6,66,0) 80%);
  -webkit-mask:url(/assets/series/fit-4-worship/praise-1000.webp) 50% 0/ max(1500px,130%) auto repeat-y;mask:url(/assets/series/fit-4-worship/praise-1000.webp) 50% 0/ max(1500px,130%) auto repeat-y}
.lift-sec .floor{top:46%;bottom:auto;height:110%;transform:perspective(1000px) rotateX(66deg);transform-origin:50% 0}
.lift-sec .lamp.l2{display:none}
.lift-sec .lamp.l1{left:30%}.lift-sec .lamp.l3{left:66%}
.haze{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s ease .5s;background:
  radial-gradient(55% 45% at 50% 62%,rgba(150,80,255,.55),transparent 70%),
  conic-gradient(from 168deg at 50% -10%,transparent 0deg,rgba(170,110,255,.28) 8deg,transparent 16deg,transparent 22deg,rgba(170,110,255,.22) 28deg,transparent 34deg)}
.out .haze{opacity:1}
.out .lamps .lamp{animation:flick .9s steps(1) both}
@keyframes flick{0%{filter:none}12%{filter:brightness(.3) saturate(0)}20%{filter:none}34%{filter:brightness(.3) saturate(0)}42%{filter:none}60%,100%{filter:brightness(.28) saturate(0)}}

.lift-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;position:relative;z-index:2}
.lift-head .label{grid-column:1/-1}
.lift-head .wall-h{grid-column:1/9;margin-top:18px}
.lift-head .wall-h .tape{font-family:var(--sten);padding:.04em .14em .02em}
.lift-head .batterson{grid-column:9/13}
.batterson{margin:26px 0 8px}
.batterson p{margin:0;font:600 clamp(16px,1.3vw,19px)/1.55 var(--body);color:#dcd8e6}
.batterson footer{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--violet)}

.stage{position:relative;margin:7vh calc(-1*var(--gutter)) 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.stage-cap{grid-column:1/-1;grid-row:1;margin:0 0 14px;font:900 clamp(26px,2.5vw,46px)/1 var(--sten);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:.35em}
.stage-cap i{font-style:normal;color:var(--paint)}
.stage-cap b{font-weight:900;background:var(--purple);padding:.06em .18em 0;transform:rotate(-1.5deg)}
.lift-board{--dw:clamp(26px,3.3vw,62px);grid-column:5/9;grid-row:2;justify-self:center;z-index:3;transform:rotate(-1deg)}
.pr-stamp{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) rotate(-9deg) scale(1.8);opacity:0;pointer-events:none;
  font:900 calc(var(--dw)*2.3)/.8 var(--sten);letter-spacing:.02em;color:var(--led);padding:.08em .2em 0;border:.08em solid var(--led);background:rgba(7,7,8,.88);
  text-shadow:0 0 .2em rgba(255,43,28,.7);box-shadow:0 0 .3em rgba(255,43,28,.5);transition:opacity .12s,transform .28s cubic-bezier(.3,1.7,.5,1)}
.pr-stamp.on{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}

.rig{grid-column:1/-1;grid-row:3;position:relative;height:min(62vh,46vw);min-height:300px;margin:0 calc(-1*var(--gutter));z-index:1}
.platform{position:absolute;left:50%;bottom:4%;width:min(88vw,1500px);height:22%;transform:translateX(-50%) perspective(700px) rotateX(58deg);transform-origin:50% 100%;
  background:linear-gradient(90deg,#1b1a1f 0 22%,transparent 22% 78%,#1b1a1f 78%),linear-gradient(180deg,#2c2733,#1a1720),var(--tex) 0 0/300px;
  border:4px solid rgba(236,235,226,.55);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.platform::after{content:"";position:absolute;inset:0;background:var(--dust) 0 0/340px;opacity:.5}
.chalk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.lift{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:var(--bw);aspect-ratio:1562/599;padding:0;margin:0;border:0;background:none;cursor:grab;z-index:3;--bw:min(48vw,940px);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;color:inherit}
.lift:active{cursor:grabbing}
.lift:focus-visible{outline:none}
.lift:focus-visible:not(.ptr) .barbell{outline:3px solid var(--lime);outline-offset:1.2em;border-radius:4px}
.barbell{position:absolute;inset:0;display:block;font-size:calc(var(--bw)/100);will-change:transform;transform-origin:50% 40%}
.barbell img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;max-width:none}
.shaft,.end{position:absolute;inset:0;display:block}
.shaft img{clip-path:inset(0 20% 0 20%)}
.end{will-change:transform}
.end-l{transform-origin:21% 38.4%}.end-l img{clip-path:inset(0 78.4% 0 0)}
.end-r{transform-origin:79% 38.4%}.end-r img{clip-path:inset(0 0 0 78.4%)}
.barbell{filter:drop-shadow(0 1.2em 1.4em rgba(0,0,0,.55))}
/* the outboard sleeve and the loaded plates (geometric UI) */
.sleeve{position:absolute;top:58.6%;width:0;height:0;display:block}
.sleeve[data-sleeve="l"]{left:2.2%;transform:rotate(-22deg)}
.sleeve[data-sleeve="r"]{left:97.8%;transform:rotate(22deg)}
.sleeve::before{content:"";position:absolute;top:-1.5em;height:3em;width:16em;background:#efefe6;border:.35em solid #19171d;border-radius:.6em}
.sleeve[data-sleeve="l"]::before{right:-1em}
.sleeve[data-sleeve="r"]::before{left:-1em}
.pl{position:absolute;top:calc(var(--h)*-.5);height:var(--h);width:2.6em;border-radius:.7em;border:.38em solid #f4f5e7;background:var(--purple-hi);
  box-shadow:inset .5em 0 0 rgba(255,255,255,.12),inset -.4em 0 0 rgba(0,0,0,.35),0 0 0 .25em #141217;opacity:0;transition:opacity .12s,transform .3s cubic-bezier(.25,1.6,.5,1)}
.pl.c{background:#1d1b22}
.pl::after{content:"";position:absolute;left:18%;right:18%;top:45%;bottom:45%;background:rgba(244,245,231,.6);border-radius:.2em}
.sleeve[data-sleeve="l"] .pl{transform:translateX(-7em)}
.sleeve[data-sleeve="r"] .pl{transform:translateX(7em)}
.sleeve .pl.on{opacity:1;transform:none}

.stage-foot{grid-column:9/13;grid-row:2;position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:14px}
.hint{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#dcd2f2;max-width:34ch}
.hint .h-fine{display:none}
@media (hover:hover) and (pointer:fine){.hint .h-touch{display:none}.hint .h-fine{display:inline}}
.ctl{display:flex;gap:12px;flex-wrap:wrap}
.ghost{min-height:44px;padding:10px 18px;border:1px solid rgba(244,245,231,.5);background:rgba(11,10,13,.5);color:var(--ink);font:800 11px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ghost:hover{border-color:var(--lime);color:var(--lime)}
.ghost[aria-pressed="true"]{border-color:var(--lime)}
.now{grid-column:1/5;grid-row:2;position:relative;z-index:3;margin:0;min-height:5.4em;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;font:800 clamp(19px,1.6vw,27px)/1.15 var(--disp);letter-spacing:-.015em;text-transform:uppercase;max-width:24ch}
.now .rn{display:block;margin-bottom:10px;font:800 14px/1 var(--cond);letter-spacing:.22em;color:#ff8a7f}

.logwrap{position:relative;z-index:2;margin-top:60px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.log-q{grid-column:1/5;margin:0;font:800 clamp(20px,1.9vw,30px)/1.2 var(--disp);letter-spacing:-.015em;text-transform:uppercase;color:var(--ink);max-width:18ch}
.log{grid-column:5/13;list-style:none;margin:0;padding:0;counter-reset:rep;columns:2;column-gap:40px}
.log li{counter-increment:rep;break-inside:avoid;display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:12px 0;border-top:1px solid rgba(244,245,231,.18)}
.log .tick{grid-row:1/3;width:14px;height:34px;margin:2px 0 0 8px;border:2px solid rgba(244,245,231,.55);border-radius:3px;position:relative;transition:background .2s,border-color .2s}
.log .tick::before{content:counter(rep);position:absolute;left:22px;top:-1px;font:800 11px/1 var(--cond);color:#c9b0ff}
.log .tick::before{display:none}
.log .t{font:600 15px/1.45 var(--body);color:var(--ink)}
.log .ref{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--violet);margin-top:3px}
.log li.done .tick{background:var(--purple-hi);border-color:var(--ink);box-shadow:0 0 0 2px #0b0a0d}
.log li.cur .t{background:var(--ink);color:var(--chalk-ink);box-shadow:-6px 0 0 var(--ink),6px 0 0 var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline;justify-self:start}
.log-end{grid-column:5/13;margin:22px 0 0;font:600 15px/1.55 var(--body);color:#e4dff0;max-width:52ch}
.log-end span{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--violet)}
.no-js .stage .rig,.no-js .stage-foot{display:none}

/* =========================================================
   5 · THE TURN — lights down, stage up, hands up
   ========================================================= */
.praise{position:relative;isolation:isolate;overflow:hidden;padding:30vh var(--gutter) 34vh;
  background:linear-gradient(180deg,#050407 0%,#0d0617 16%,#2b0a55 38%,var(--purple-hi) 62%,#7d5cb0 80%,#c9c2d6 92%,var(--chalk) 100%)}
.praise .lamps{z-index:0;height:40vh}
.beams{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--beam,1)}
.beams i{position:absolute;top:-10%;width:34vw;height:120%;transform-origin:50% 0;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(190,140,255,.5),rgba(150,90,255,.12) 50%,transparent 85%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(6px)}
.beams i:nth-child(1){left:2%;transform:rotate(-18deg)}
.beams i:nth-child(2){left:26%;transform:rotate(-6deg)}
.beams i:nth-child(3){left:44%;transform:rotate(8deg)}
.beams i:nth-child(4){left:66%;transform:rotate(20deg)}
.js .beams i{animation:sway 9s ease-in-out infinite alternate}
.js .beams i:nth-child(2){animation-duration:11s;animation-delay:-3s}
.js .beams i:nth-child(3){animation-duration:10s;animation-delay:-6s}
.js .beams i:nth-child(4){animation-duration:12s;animation-delay:-2s}
@keyframes sway{from{rotate:-6deg}to{rotate:6deg}}
.praise.idle .beams i{animation-play-state:paused}
.praise::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 40% at 50% 46%,rgba(170,110,255,.35),transparent 70%)}
.praise-text{position:absolute;inset:0;z-index:-2;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 90%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 90%)}
.praise-layer{position:absolute;left:-10%;right:-10%;top:0;height:150%;
  background:linear-gradient(180deg,#b88cff,#7b3fe4);opacity:.7;
  -webkit-mask:url(/assets/series/fit-4-worship/praise-1000.webp) center top/ max(2000px,150%) auto repeat-y;mask:url(/assets/series/fit-4-worship/praise-1000.webp) center top/ max(2000px,150%) auto repeat-y;will-change:transform}
.praise-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.lifted{margin:0;max-width:30ch}
.lifted p{margin:0;font:800 clamp(26px,3vw,52px)/1.08 var(--disp);letter-spacing:-.025em;text-transform:uppercase}
.lifted footer{margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#d9c8ff}
.praise .big{margin:16vh 0 0}
.praise .big p{margin:0;font:800 clamp(56px,12.4vw,250px)/.84 var(--disp);letter-spacing:-.055em;text-transform:uppercase;max-width:12ch;text-shadow:0 4px 50px rgba(34,9,63,.6);text-wrap:balance}
.praise .big .w{transition:opacity .4s,text-shadow .6s;opacity:.24}
.praise .big .w.lit{opacity:1;text-shadow:0 0 .25em rgba(200,160,255,.55),0 4px 50px rgba(34,9,63,.6)}
.no-js .praise .big .w,.praise.rm .big .w{opacity:1}
.praise .big footer{margin-top:22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#f3ecff}
.rise{margin:12vh 0 0;font:900 clamp(40px,6.4vw,124px)/.88 var(--sten);text-transform:uppercase;letter-spacing:0;max-width:14ch}
.rise .tape{font-family:var(--sten);padding:.04em .14em 0}
.rise-ref{display:block;margin-top:16px;font:800 12px/1 var(--body);letter-spacing:.18em;color:#f3ecff}
.praise .body{margin-left:auto;margin-right:auto;color:#f7f2ff;max-width:52ch;text-shadow:0 1px 18px rgba(34,9,63,.8)}

/* =========================================================
   6 · KIT — chalk ground, the real download as objects at scale
   ========================================================= */
.kit{position:relative;background:var(--chalk);color:var(--chalk-ink);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:0 var(--gutter) 22vh;margin-top:-1px;overflow:hidden}
.kit-head{grid-column:1/-1;position:relative;z-index:2}
.kit .wall-h{font-size:clamp(46px,8vw,150px);max-width:12ch}
.kit-objects{grid-column:1/9;position:relative;min-height:min(56vw,860px);margin:5vh 0 0 calc(-1*var(--gutter) - 3vw)}
.sheet{position:absolute;left:0;top:4%;width:84%;margin:0;transform:rotate(-2.4deg);z-index:1}
.sheet img{width:100%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.04),0 40px 80px rgba(40,30,60,.24),0 6px 14px rgba(40,30,60,.12)}
.sheet figcaption{position:absolute;left:calc(var(--gutter) + 3vw);top:100%;margin-top:18px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--chalk-muted);transform:rotate(2.4deg);transform-origin:left;white-space:nowrap}
.g-screen{position:absolute;right:-2%;top:-4%;width:52%;z-index:2;transform:rotate(3deg);box-shadow:0 30px 60px rgba(20,12,36,.35)}
.g-story{position:absolute;right:0;bottom:-2%;width:22%;z-index:3;transform:rotate(-4deg);box-shadow:0 30px 60px rgba(20,12,36,.38)}
.g-post{position:absolute;right:23%;bottom:-8%;width:29%;z-index:2;transform:rotate(2deg);box-shadow:0 30px 60px rgba(20,12,36,.35)}
.kit-copy{grid-column:9/13;align-self:center;padding-top:5vh}
.facts{margin:0;padding:0}
.facts div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:13px 0;border-top:1px solid rgba(22,20,27,.16)}
.facts div:last-child{border-bottom:1px solid rgba(22,20,27,.16)}
.facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--chalk-muted);padding-top:3px}
.facts dd{margin:0;font-size:14px;line-height:1.55}

/* =========================================================
   7 · CLOSE — back in the gym, cover at scale, bar on the floor
   ========================================================= */
.close{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:26vh var(--gutter) 0;min-height:max(118vh,980px);background:var(--char);--floor-h:60%}
.close .scene-wall img{object-position:50% 70%}
.close::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(180deg,var(--chalk) 0%,rgba(236,235,226,.82) 4%,rgba(160,158,160,.55) 9%,rgba(40,38,44,.6) 15%,rgba(17,16,19,.5) 22%,rgba(17,16,19,.3) 30%,rgba(17,16,19,.12) 38%,rgba(17,16,19,0) 46%),
  linear-gradient(90deg,rgba(17,16,19,0) 40%,rgba(17,16,19,.6) 70%)}
.close .floor{height:44%}
.sw-close{left:calc(var(--gutter) - 1vw);top:21vh;font-size:clamp(46px,6.6vw,130px);transform:rotate(-2deg);opacity:.7;z-index:-1;white-space:normal;max-width:9ch}
.close-scene{grid-column:1/8;grid-row:1;position:relative;align-self:end;min-height:min(64vw,900px);margin-left:calc(-1*var(--gutter))}
.close-scene .lean{position:absolute;width:min(27vw,450px);left:14%;bottom:13%}
.floor-bar{position:absolute;bottom:2%;left:10%;width:min(52vw,840px);max-width:none;transform:rotate(-2deg);filter:drop-shadow(0 26px 22px rgba(0,0,0,.75));z-index:2}
.close-copy{grid-column:8/13;grid-row:1;align-self:center;position:relative;z-index:3;padding-bottom:14vh}
.close .wall-h{font-size:clamp(44px,6.2vw,116px)}
.close .body{color:#dedbe8;font-size:16px}
.buyline{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:30px}
.price{display:flex;align-items:baseline;gap:10px;margin:0}
.price strong{font:900 clamp(70px,6.4vw,110px)/1 var(--sten);letter-spacing:0}
.price span{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--lime)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  .nav{gap:20px}
  .hero-head{grid-column:1/8}.hero-board{grid-column:8/13}
  .cb-days{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .cb-day:nth-child(3){border-left:0;padding-left:0}
  .p1 .copy{grid-column:1/8}.p1 .copy-b{grid-column:1/-1;margin-top:40px;max-width:640px}
  .p1 .lockup{width:140vw;left:-30vw}
  .p2 .copy{grid-column:6/13}
  .p4 .copy,.p4 .copy-b{grid-column:1/-1}
  .lift-head .wall-h,.lift-head .batterson{grid-column:1/-1}.lift-head .batterson{max-width:640px}
  .stage{display:flex;flex-direction:column;align-items:stretch}
  .stage-cap{order:0;justify-content:center}
  .lift-board{order:1;align-self:center}
  .rig{order:2;height:min(66vh,64vw)}
  .stage-foot{order:3;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:left;margin-top:6px}
  .hint{max-width:52ch}
  .now{order:4;align-items:center;text-align:center;margin:24px auto 0;min-height:3.6em;justify-content:flex-start;max-width:32ch;font-size:clamp(20px,2.6vw,30px)}
  .lift{--bw:62vw}
  .log-q,.log,.log-end{grid-column:1/-1}.log{margin-top:26px}
  .kit-objects{grid-column:1/-1;min-height:74vw}
  .kit-copy{grid-column:1/-1;max-width:640px;padding-top:12vw}
  .close-scene{grid-column:1/-1;grid-row:2;min-height:64vw;margin-top:0}
  .close-copy{grid-column:1/-1;padding-bottom:0;max-width:640px}
  .close{padding-bottom:0}
}
@media (max-width:860px){
  .nav{display:none}
  .fgrid{grid-template-columns:1fr 1fr;row-gap:28px}
  .fbrand{grid-column:1/-1}
  .fnav:nth-of-type(1){grid-column:1/2}.fnav:nth-of-type(2){grid-column:2/3}
}
@media (max-width:700px){
  .top{height:72px}
  .top .btn{padding:10px 14px}
  .board-fixed{--dw:10px;top:10px;right:10px;padding:6px 9px 5px}
  .board-fixed .led-row{gap:8px}

  .hero{display:flex;flex-direction:column;min-height:0;padding:92px var(--gutter) 0}
  .hero .floor{height:40%}
  .hero-head{order:1}
  .hero-board{order:2;align-self:flex-start;--dw:7.2vw;margin:18px 0 0;transform:rotate(-1deg)}
  .sw-hero{top:300px;font-size:15vw;white-space:normal;max-width:8ch;line-height:.84;opacity:.5}
  .title{order:3;font-size:21.4vw;margin-top:22px}
  .title .t-bar{width:2.1em}
  .hero-copy{padding:26px 0 0;order:4}
  .lede{font-size:20px}
  .buyrow{gap:8px 22px}
  .buyrow .buy{width:100%}
  .hero-cover{order:5;width:70vw;align-self:flex-end;margin:46px -4vw 60px 0}
  .lean{transform:perspective(1200px) rotateY(-12deg) rotateZ(4deg)}
  @keyframes settle{from{transform:perspective(1200px) rotateY(-12deg) rotateZ(8deg) translateY(-20px);opacity:0}to{transform:perspective(1200px) rotateY(-12deg) rotateZ(4deg);opacity:1}}
  .lamp{width:40px}
  .lamp::after{width:90vw;height:90vw}
  .lamp::before{width:70vw}
  .lamp.l1{left:8%}.lamp.l2{display:none}.lamp.l3{left:78%}

  .wod{padding:40px 8px 80px}
  .chalkboard{padding:26px 16px 70px;border-width:7px}
  .cb-title{flex-direction:column;align-items:flex-start;gap:8px}
  .cb-wod{font-size:44vw}
  .cb-sub{flex-direction:row;gap:.25em;font-size:9.4vw}
  .cb-meta{align-items:flex-start}
  .cb-days{grid-template-columns:1fr;row-gap:26px}
  .cb-day{border-left:0;padding:22px 0 0;border-top:2px dashed rgba(236,235,226,.35)}
  .cb-day:first-child{border-top:0;padding-top:0}
  .cb-dn{display:flex;align-items:baseline;gap:14px}
  .cb-dn b{font-size:20vw;margin:0}
  .cb-dt{font-size:9vw}
  .cb-note{text-align:left}
  .cb-tray b{width:70px}

  .part{display:block!important}
  .set-no{font-size:62vw}
  .p1{min-height:0;padding:104vw var(--gutter) 90px}
  .p1 .lockup{width:178vw;left:-58vw;top:10vw}
  .p1 .lockup figcaption{right:auto;left:calc(58vw + var(--gutter));top:-14px}
  .p1::before{background:linear-gradient(180deg,var(--char) 0%,rgba(17,16,19,0) 12%,rgba(17,16,19,0) 34%,rgba(17,16,19,.8) 56%,rgba(17,16,19,.9) 100%)}
  .p1 .copy-b{margin-top:56px}
  .p1 .set-no{bottom:-14vw}
  .cue.big{font-size:32px}

  .p2{min-height:0;padding:90px var(--gutter) 150px}
  .p2 .set-no{top:auto;bottom:22vw}
  .sw-p2{white-space:normal;max-width:9ch;font-size:16vw;bottom:auto;top:40px}
  .p2 .story{width:96vw;margin:0 0 0 -16vw;transform:rotate(-3deg)}
  .p2 .story figcaption{right:auto;left:22vw;bottom:auto;top:-26px}
  .p2 .copy{margin-top:-20vw}
  .p2 .wall-h{font-size:14.4vw}

  .p3{min-height:0;padding:40px var(--gutter) 140px}
  .p3 .post{width:100vw;margin:0 -24vw 0 auto;transform:rotate(3.5deg)}
  .p3 .copy{margin-top:56px}
  .p3 .wall-h{font-size:13.2vw}
  .p3 .set-no{bottom:10vw}

  .p4{min-height:0;padding:96vw var(--gutter) 110px}
  .p4 .copy-b{padding-top:0}
  .p4 .lockup{width:150vw;left:-6vw;top:16vw}
  .p4 .lockup figcaption{left:10vw;top:-18px}
  .p4::before{background:linear-gradient(180deg,var(--char) 0%,rgba(17,16,19,0) 12%,rgba(17,16,19,0) 40%,rgba(17,16,19,.82) 62%,rgba(17,16,19,.9) 84%,var(--rubber) 100%)}

  .lift-sec{padding:80px var(--gutter) 90px}
  .lift-sec .floor{top:52%}
  .wall-h.stencil{font-size:19vw}
  .lift-sec .lamp.l1{left:16%}.lift-sec .lamp.l3{left:76%}
  .stage{margin-top:24px}
  .lift-board{--dw:8.6vw;align-self:flex-start}
  .rig{height:104vw;margin-top:4px}
  .lift{--bw:72vw;bottom:13%}
  .platform{width:120vw;height:22%}
  .now{min-height:5.4em;font-size:20px;max-width:none}
  .logwrap{display:block;margin-top:46px}
  .log{columns:1;margin-top:22px}
  .log-q{font-size:22px}

  .praise{padding:26vh var(--gutter) 220px}
  .praise .lamps{height:30vh}
  .beams i{width:70vw}
  .beams i:nth-child(1){left:-30%}.beams i:nth-child(2){left:0}.beams i:nth-child(3){left:20%}.beams i:nth-child(4){left:46%}
  .praise .big p{font-size:15.6vw}
  .rise{font-size:15vw}
  .praise-layer{-webkit-mask-size:300% auto;mask-size:300% auto}

  .kit{padding-bottom:120px}
  .kit .wall-h{font-size:14.4vw}
  .kit-objects{min-height:124vw;margin:36px calc(-1*var(--gutter)) 0}
  .sheet{width:104%;left:-6%;top:28vw}
  .sheet figcaption{left:calc(var(--gutter) + 6%);top:-30px;margin:0}
  .g-screen{width:66%;top:0;right:-6%}
  .g-story{width:32%;bottom:0;right:2%}
  .g-post{width:40%;right:36%;bottom:-6vw}
  .kit-copy{padding-top:70px}
  .facts div{grid-template-columns:84px 1fr}

  .close{display:flex;flex-direction:column;padding:150px var(--gutter) 0;min-height:0}
  .close::before{background:linear-gradient(180deg,var(--chalk) 0%,rgba(236,235,226,.5) 5%,rgba(17,16,19,.75) 14%,rgba(17,16,19,.55) 45%,rgba(17,16,19,.1) 72%)}
  .close .floor{height:30%}
  .sw-close{top:auto;bottom:62vw;font-size:15vw;max-width:9ch}
  .close .wall-h{font-size:14vw}
  .close-copy{order:1}
  .close-scene{order:2;align-self:stretch;min-height:118vw;margin:30px calc(-1*var(--gutter)) 0}
  .close-scene .lean{width:66vw;left:6vw;bottom:26vw}
  .floor-bar{width:112vw;left:-2vw;bottom:4vw}
  .buyline .buy{width:100%}
}
@media (max-width:360px){
  .brand-name{display:none}
  .brand{min-width:44px}
  .now{min-height:7em}
  .plate-sign{padding:9px 24px;font-size:12px;letter-spacing:.14em}
}

/* =========================================================
   Reduced motion: same content, nothing moves
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero-cover .lean{animation:none}
  .beams i{animation:none!important}
}