/* Try Hard: a bespoke series page.
   Art direction: the series' own poster. Cracked black asphalt with a halftone grain, an old engraving of
   Jacob wrestling the angel, huge distressed orange condensed letters, and a heavy old-style serif for the
   second lines. Two weeks: The Wrestle, Not the Shortcut (Genesis 32) and Wear the Label (Colossians 3:23-24).
   The scroll is one night at the river: the poster edge to edge -> the room's verdict ("extra") over the
   wrestlers in the stone -> week one on full orange (ALL. NIGHT.) -> the signature: rub the costume off,
   tell the old name, receive the new one -> week one's points over the wrestlers, who stay on screen ->
   the altar call as an orange poster -> week two on bone (wear the label; the hallway roast list) ->
   week two's points on the stone -> the decision, and the poster standing on the stone in the light.
   Lime is SMR's accent only (focus, label tick, the skip link). The accent voice on every screen is one
   phrase in the art's orange serif italic. */

@view-transition { navigation: auto; }

:root{
  --stone:#1f1f27;
  --stone-d:#131318;
  --stone-l:#2c2c36;
  --orange:#df7803;
  --orange-l:#f59a2c;
  --orange-d:#b85f00;
  --bone:#ece5d8;
  --bone-d:#d9cfbd;
  --ink:#141418;
  --lime:#b6ff00;
  --gutter:clamp(20px,4.4vw,64px);
  --cond:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --serif:Fraunces,'Bookman Old Style',Georgia,serif;
  --body:Manrope,Arial,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--stone-d)}
body.th{margin:0;background:var(--stone);color:var(--bone);font-family:var(--body);overflow-x:hidden}
@supports (overflow:clip){body.th{overflow-x:clip}}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;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:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
section{position:relative}
p{margin:0}

/* atoms */
.wall{font-family:var(--cond);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;margin:0}
.serif{font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 72;letter-spacing:-.005em}
.serif em,.accent{font-style:italic;color:var(--orange-l)}
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--bone)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.ink{color:var(--ink)}
.label.ink i{background:var(--ink)}
.src{margin:22px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#bdb6aa}
.src.ink{color:#2a2117}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .14s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.line{background:transparent;border:1px solid rgba(236,229,216,.7);color:var(--bone)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.btn.soon{margin:0;background:transparent;border:2px dashed rgba(236,229,216,.55);color:var(--bone);cursor:default}
.btn.soon:hover{transform:none}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:#d4ccbd}
.grain::after,.wrestle::after,.fight::after,.label-wk::after,.name .under::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.22;pointer-events:none}

/* header: the SMR lockup on a scrim over the poster */
.top{position:absolute;top:0;left:0;right:0;z-index:20;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;font-weight:600;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--bone)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.nav a:hover{color:var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--bone)}
.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}

/* ---------- 1 · hero: the poster edge to edge ---------- */
.hero{background:var(--stone);z-index:2}
.hero-art{position:relative;height:max(520px,calc(100svh - 210px));max-height:62vw;overflow:hidden}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;view-transition-name:cover-try-hard}
.hero-art::before{content:"";position:absolute;inset:0 0 auto;height:150px;z-index:1;background:linear-gradient(rgba(19,19,24,.8),rgba(19,19,24,.35) 60%,rgba(19,19,24,0))}
.hero-art::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(rgba(31,31,39,0),var(--stone))}
.hero-band{position:relative;z-index:2;padding:6px var(--gutter) 64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(28px,4vw,64px);align-items:end}
.crumbs{grid-column:1 / -1}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.crumbs li+li::before{content:"/";margin-right:10px;color:#8d877c}
.crumbs a{color:var(--bone);text-decoration:none;display:inline-flex;min-height:44px;align-items:center;margin:-14px 0}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{color:#bdb6aa}
.hero-copy{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(20px,2.6vw,40px)}
.hero-copy .label{flex-basis:100%;margin-bottom:6px}
.title{font-family:var(--cond);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(52px,6vw,96px);line-height:.86;color:var(--orange);margin:0;letter-spacing:-.01em}
.hero-line{font-size:clamp(20px,2.1vw,32px);line-height:1.15;color:var(--bone);max-width:24ch}
.hero-act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-act .action{display:flex;flex-direction:column}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--orange-l);border-bottom:2px solid rgba(245,154,44,.5)}
.follow:hover{color:var(--lime);border-color:var(--lime)}
@media (prefers-reduced-motion:no-preference){
  .hero-art img{animation:poster 1.8s cubic-bezier(.2,.7,.2,1) both}
  .hero-band{animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes poster{from{transform:scale(1.07);filter:brightness(.6)}to{transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- 2 · they called you extra ---------- */
.extra{background:var(--stone);overflow:hidden;padding:clamp(80px,12vh,140px) 0 clamp(200px,26vh,300px)}
.extra-art{position:absolute;inset:0}
.extra-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:contrast(1.35) brightness(1.3)}
.extra-art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,31,39,.9) 0%,rgba(31,31,39,.55) 42%,rgba(31,31,39,.05) 75%)}
.extra::before{content:"";position:absolute;inset:0 0 auto;height:180px;z-index:1;background:linear-gradient(var(--stone),rgba(31,31,39,0))}
.extra::after{content:"";position:absolute;inset:auto 0 0;height:300px;z-index:1;background:linear-gradient(rgba(223,120,3,0),rgba(223,120,3,.55) 55%,var(--orange));pointer-events:none}
.extra-inner{position:relative;z-index:2;padding:0 var(--gutter)}
.ask{margin-top:26px;font-size:clamp(24px,2.7vw,42px);line-height:1.1;max-width:22ch;color:var(--bone)}
.ask span{color:var(--orange-l)}
.did{list-style:none;margin:26px 0 0;padding:0;font-size:clamp(18px,1.7vw,26px);line-height:1.3;color:#cfc7b8;max-width:34ch}
.did li+li{margin-top:4px}
.extra-wall{margin-top:clamp(48px,7vh,90px)}
.extra-wall span{display:block}
.w-a{font-size:clamp(40px,6.2vw,104px);color:var(--bone)}
.w-b{font-size:clamp(56px,9.4vw,160px);color:var(--orange);margin-top:.04em;white-space:nowrap}
.w-b s{text-decoration:none;position:relative;display:inline-block}
.w-b s::after{content:"";position:absolute;left:-2%;right:-3%;top:47%;height:.12em;background:var(--bone);transform:rotate(-4deg);transform-origin:0 50%}
.accent-line{margin-top:clamp(18px,2.4vw,34px);font-size:clamp(28px,3.6vw,58px);line-height:1.05}

/* ---------- 3 · week one on full orange ---------- */
.wrestle{background:var(--orange);color:var(--ink);padding:clamp(40px,6vh,80px) 0 0;overflow:hidden;z-index:1}
.slide-obj{margin:0;position:relative;z-index:1}
.slide-obj img{display:block;width:100%;height:auto;box-shadow:0 2px 0 rgba(0,0,0,.25),0 40px 80px -20px rgba(40,18,0,.7)}
.wrestle{display:grid;grid-template-columns:var(--gutter) minmax(0,30vw) minmax(0,1fr)}
.w1-side{grid-column:2;grid-row:1;align-self:end;position:relative;z-index:2;padding-bottom:clamp(10px,2vw,30px)}
.w1-side .verse{margin-top:22px}
.w1-obj{grid-column:3;grid-row:1;width:auto;margin:0 -11vw 0 clamp(24px,3vw,48px);transform:rotate(-2.2deg);transform-origin:100% 0}
.wrestle-inner,.night{grid-column:1 / -1}
.wrestle-inner{position:relative;z-index:2;padding:0 var(--gutter);margin-top:clamp(36px,4vw,64px)}
.w1-title{font-size:clamp(64px,11.6vw,196px);color:var(--ink)}
.w1-title span{display:block;font-family:var(--serif);font-weight:900;font-style:normal;text-transform:none;font-size:.38em;line-height:1;margin-top:.12em;letter-spacing:-.01em}
.verse{margin:clamp(32px,4vw,56px) 0 0;max-width:46ch;font-size:clamp(17px,1.45vw,24px);line-height:1.38;font-weight:700;color:var(--ink)}
.verse p{margin:0}
.verse em{font-style:italic;color:inherit;box-shadow:inset 0 -.38em 0 rgba(20,20,24,.16)}
.verse cite{display:block;margin-top:14px;font:600 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;font-style:normal}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);margin-top:clamp(48px,7vw,100px)}
.versus p{font-size:clamp(24px,2.5vw,40px);line-height:1.12}
.vs-k{display:block;font:900 italic .62em/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.vs-a{opacity:.62}
.vs-a .serif{text-decoration:line-through;text-decoration-thickness:.08em}
.night{position:relative;z-index:2;padding:clamp(60px,9vw,130px) var(--gutter) 0}
.night-pre{font-size:clamp(24px,2.8vw,44px);font-style:italic}
.night-wall{font-size:clamp(120px,23vw,400px);line-height:.8;color:var(--ink);margin:.06em 0 0 -.03em;white-space:nowrap}
.night-wall span:last-child{display:inline-block;margin-left:.06em}
.night .src{padding-bottom:28px}

/* ---------- 4 · the signature: the costume ---------- */
.name{background:var(--orange);color:var(--ink);z-index:2}
.name-stage{position:relative;overflow:hidden;isolation:isolate}
.under{position:relative;min-height:max(660px,100svh);display:grid;grid-template-rows:auto 1fr auto auto;padding:clamp(56px,9vh,110px) var(--gutter) clamp(150px,20vh,190px);background:var(--orange)}
.under-top{position:relative;z-index:1}
.live .under-top{opacity:0;transition:opacity .6s .3s}
.told .under-top{opacity:1}
.q{font-size:clamp(40px,5.6vw,92px);margin-top:12px}
.esau{margin-top:16px;max-width:40ch;font-size:clamp(17px,1.4vw,22px);line-height:1.4}
.esau s{text-decoration-thickness:.1em}
.live .esau{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.names{position:relative;z-index:1;display:grid;place-items:center;align-self:center}
.names > *{grid-area:1/1}
.jacob{position:relative;font-size:clamp(110px,25vw,420px);line-height:.8;color:var(--ink)}
.jacob .jw{display:block}
.strike{position:absolute;left:-4%;right:-4%;top:44%;height:.11em;background:var(--bone);transform:rotate(-5deg) scaleX(0);transform-origin:0 50%;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.israel{font-size:clamp(100px,22vw,370px);line-height:.8;color:var(--stone);opacity:0;transform:scale(1.5) rotate(-3deg);text-shadow:0 0 0 transparent;background:url(/assets/series/try-hard/plate-1280.webp) 50% 50%/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 18px 30px rgba(60,25,0,.45)) contrast(1.4) brightness(1.1)}
.jacob-gloss{position:relative;z-index:1;text-align:center;font-size:clamp(20px,2.2vw,34px);margin-top:14px}
.under-foot{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,90px);align-items:end;margin-top:clamp(24px,4vh,48px)}
.kjv{margin:0;font-size:clamp(17px,1.4vw,22px);line-height:1.4;max-width:44ch}
.kjv p{margin:0}
.kjv cite{display:block;margin-top:10px;font:600 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;font-style:normal}
.rename{font-size:clamp(24px,2.5vw,40px);line-height:1.1;justify-self:end;max-width:22ch}
.rename em{color:var(--bone)}
.costume,.fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.costume{z-index:3;touch-action:pan-y;cursor:grab;transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.costume:active{cursor:grabbing}
.fx{z-index:4;pointer-events:none}
.name-ui{position:absolute;z-index:5;left:0;right:0;bottom:clamp(28px,5vh,52px);display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 var(--gutter);pointer-events:none;text-align:center}
.name-ui > *{pointer-events:auto}
.hint{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hint .h-m{display:none}
@media (hover:none),(pointer:coarse){.hint .h-d{display:none}.hint .h-m{display:inline}}
.tell{background:var(--orange);color:var(--ink);min-width:220px}
@media (hover:hover){.tell:hover{background:var(--bone)}}
.status{min-height:1.4em;font-size:13px;font-weight:600;color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.name-src{padding:0 var(--gutter) 28px;color:#2a2117;margin:0}
/* before JS runs, and without it: the told state as plain content */
.no-js .costume,.no-js .fx,.no-js .name-ui,.static .costume,.static .fx,.static .name-ui{display:none}
.no-js .under,.static .under{padding-bottom:clamp(56px,9vh,110px)}
.js:not(.ready) .name-ui .tell{visibility:hidden}
/* told: the costume falls away; Jacob is struck; Israel lands */
.told .costume{opacity:0;transform:scale(1.04) translateY(2%);pointer-events:none}
.told .hint{opacity:0}
.told .status,.static .status{color:var(--ink);text-shadow:none}
.told .tell{background:var(--ink);color:var(--bone)}
@media (hover:hover){.told .tell:hover{background:var(--stone-l)}}
.renamed .strike,.no-js .strike,.static .strike{transform:rotate(-5deg) scaleX(1);transition:transform .35s cubic-bezier(.5,0,.2,1)}
.renamed .jw,.no-js .jw,.static .jw{opacity:.28;transition:opacity .6s .35s}
.renamed .israel,.no-js .israel,.static .israel{opacity:1;transform:rotate(-3deg)}
.renamed .israel{transition:opacity .25s .55s,transform .5s .55s cubic-bezier(.3,1.6,.5,1)}
.renamed .name-stage{animation:jolt .5s .62s both}
@keyframes jolt{0%,100%{transform:none}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-2px,1px)}}

/* ---------- 5 · week one's points over the wrestlers ---------- */
.points{background:var(--stone);overflow:clip}
.p1{padding:0 0 clamp(60px,10vh,120px)}
.pin{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;z-index:0}
.pin img{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 40%;filter:contrast(1.45) brightness(1.4)}
.pin::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 55% 50%,rgba(31,31,39,0),rgba(31,31,39,.55))}
.p1::before{content:"";position:absolute;inset:0 0 auto;height:min(46vh,420px);z-index:1;background:linear-gradient(var(--orange),rgba(223,120,3,.6) 30%,rgba(31,31,39,0));pointer-events:none}
.pt{position:relative;z-index:2;min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,12vh,140px) var(--gutter)}
.pt-2{align-items:flex-end;text-align:right}
.num{display:inline-block;align-self:flex-start;background:var(--orange);color:var(--ink);font:900 italic clamp(30px,3.2vw,52px)/1 var(--cond);padding:.1em .22em .06em .14em;margin-bottom:18px}
.pt-2 .num{align-self:flex-end}
.pt h3{font-size:clamp(60px,10.6vw,180px);color:var(--orange);text-shadow:0 6px 40px rgba(0,0,0,.55)}
.pt .sub{font-size:clamp(30px,4.6vw,78px);line-height:1;text-transform:uppercase;color:var(--orange-l);margin-top:.1em;word-spacing:.35em}
.gloss{margin-top:26px;max-width:42ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--bone);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.gloss strong{color:#fff}
.pt-2 .gloss{margin-left:auto}
.p-src{position:relative;z-index:2;padding:0 var(--gutter)}

/* ---------- 6 · the altar call on full orange ---------- */
.fight{background:var(--orange);color:var(--ink);padding:clamp(120px,18vh,200px) var(--gutter) clamp(50px,7vh,80px);overflow:hidden}
.fight::before{content:"";position:absolute;inset:0 0 auto;height:min(30vh,260px);background:linear-gradient(var(--stone),rgba(31,31,39,0));pointer-events:none}
.fight-pre{position:relative;font-size:clamp(24px,2.7vw,44px);line-height:1.1;max-width:30ch}
.fight-pre em{color:var(--bone)}
.fight-wall{position:relative;margin-top:clamp(28px,4vw,56px);font-size:clamp(76px,15.8vw,270px);line-height:.8}
.fight-wall span{display:block;white-space:nowrap}
.fight-wall span:nth-child(2){padding-left:9vw}
.fight-wall span:nth-child(3){padding-left:3vw;color:var(--bone)}
.fight-wall span:nth-child(4){padding-left:14vw}

/* ---------- 7 · week two on bone ---------- */
.label-wk{background:var(--bone);color:var(--ink);padding:clamp(80px,12vh,140px) 0 clamp(80px,12vh,140px);overflow:hidden}
.label-wk::before{content:"";position:absolute;inset:0 0 auto;height:min(32vh,300px);background:linear-gradient(var(--orange),rgba(236,229,216,0));pointer-events:none}
.label-wk::after{opacity:.22}
.w2-obj{width:62vw;margin-left:-12vw;transform:rotate(2deg);transform-origin:0 0}
.lw-inner{position:relative;z-index:2;padding:0 var(--gutter) 0 0;margin:clamp(-260px,-17vw,-90px) 0 0 auto;width:min(100%,47vw)}
.w2-title{font-size:clamp(64px,10.4vw,176px);color:var(--ink)}
.w2-title span{color:var(--orange)}
.label-wk .verse{max-width:44ch}
.aud{margin-top:28px;max-width:46ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55}
.roast{position:relative;z-index:2;padding:clamp(80px,11vw,160px) var(--gutter) 0}
.roast-pre{font-size:clamp(26px,3vw,50px);line-height:1.08;max-width:24ch}
.roll{list-style:none;margin:clamp(32px,4vw,60px) 0 0;padding:0}
.roll li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,30ch);align-items:end;gap:10px clamp(24px,3vw,48px);padding:clamp(10px,1.4vw,20px) 0;border-top:1px solid rgba(20,20,24,.18)}
.roll li:nth-child(even){grid-template-columns:minmax(0,30ch) minmax(0,auto);justify-content:end}
.roll li:nth-child(even) .who{order:2;text-align:right}
.who{font-size:clamp(54px,8.4vw,144px);line-height:.82}
.why{font-size:clamp(15px,1.15vw,18px);line-height:1.5;padding-bottom:.6em}
.reviews{margin-top:clamp(48px,6vw,90px);font-size:clamp(26px,3.3vw,54px);line-height:1.1;max-width:26ch}
.reviews s{text-decoration-thickness:.09em;text-decoration-color:var(--ink);color:#6d655a}
.reviews em{color:var(--orange-d)}

/* ---------- 8 · week two's points on the stone ---------- */
.p2{background:var(--stone-d);padding:clamp(120px,18vh,200px) 0 clamp(80px,12vh,140px)}
.p2::before{content:"";position:absolute;inset:0 0 auto;height:min(34vh,320px);z-index:1;background:linear-gradient(var(--bone),rgba(236,229,216,.25) 45%,rgba(19,19,24,0));pointer-events:none}
.p2-art{position:absolute;inset:0;z-index:0}
.p2-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:scaleX(-1);filter:contrast(1.4) brightness(1.15);opacity:.75}
.p2-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,19,24,.25),rgba(19,19,24,.85) 70%)}
.row{position:relative;z-index:2;padding:clamp(40px,6vh,70px) var(--gutter);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2vw,32px);align-items:start}
.row .num{grid-row:1 / span 3;margin:.2em 0 0}
.row h3{font-size:clamp(52px,8.2vw,140px);color:var(--bone)}
.row h3 .sub{display:block;font-family:var(--serif);font-style:normal;font-weight:900;font-size:.42em;line-height:1.02;color:var(--orange-l);margin-top:.12em;text-transform:uppercase;letter-spacing:.01em;word-spacing:.3em}
.row .gloss{grid-column:2}
.r-2{padding-left:calc(var(--gutter) + 8vw)}
.r-3{padding-left:calc(var(--gutter) + 16vw)}
.lbl{display:inline-block;padding:.05em .4em;background:var(--orange);color:var(--ink);font-weight:800;text-shadow:none}
.lbl.cold{background:transparent;color:#9fb2bd;border:1px solid #6f8591}
.fire{grid-column:2;margin-top:20px;font-size:clamp(24px,2.5vw,40px);line-height:1.1;max-width:26ch}

/* ---------- 9 · the decision, and the poster on the stone ---------- */
.get{background:var(--stone);padding:clamp(100px,14vh,160px) 0 clamp(80px,10vh,120px);overflow:hidden}
.get::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 46% at 28% 74%,rgba(223,120,3,.42),rgba(223,120,3,0) 70%),linear-gradient(var(--stone-d),rgba(31,31,39,0) 30%);pointer-events:none}
.get-wall{position:relative;padding:0 var(--gutter)}
.get-pre{font-size:clamp(26px,3vw,50px);line-height:1.08}
.decision{font-size:clamp(84px,17vw,290px);color:var(--bone);margin-top:.08em;white-space:nowrap}
.decision span{color:var(--orange)}
.heartily{margin-top:clamp(18px,2vw,30px);font-size:clamp(20px,1.9vw,30px);line-height:1.2;max-width:36ch;font-style:italic;color:#d4ccbd}
.get-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center;padding:clamp(60px,9vh,110px) var(--gutter) 0}
.poster{position:relative;aspect-ratio:1/1;max-width:640px;width:100%;justify-self:center}
.poster::after{content:"";position:absolute;left:-14%;right:-14%;bottom:-3%;height:16%;background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);z-index:0}
.post,.cover{position:absolute;display:block;height:auto}
.post{width:46%;bottom:6%;z-index:1;filter:brightness(.62) saturate(.9);box-shadow:0 30px 50px -16px rgba(0,0,0,.7)}
.p-a{left:-4%;transform:rotate(-8deg)}
.p-b{right:-4%;transform:rotate(7deg)}
.cover{width:62%;left:19%;bottom:3%;z-index:2;transform:rotate(-1.2deg);box-shadow:0 1px 0 rgba(255,255,255,.08),0 50px 70px -18px rgba(0,0,0,.85),-30px 30px 60px -30px rgba(223,120,3,.45)}
.get-copy{max-width:560px}
.get-h{font-size:clamp(56px,6.4vw,110px);color:var(--bone);margin-top:16px}
.get-h span{color:var(--orange)}
.kit{margin:28px 0 0;padding:0}
.kit div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid rgba(236,229,216,.16)}
.kit dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--orange-l);padding-top:3px}
.kit dd{margin:0;font-size:15px;line-height:1.5;color:var(--bone)}
.pricerow{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:30px}
.price{font:900 italic clamp(48px,4.4vw,72px)/1 var(--cond);text-transform:uppercase;color:var(--orange)}
.price strong{font-weight:900}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--bone)}
.back:hover{color:var(--lime)}

/* ---------- 3b · the ring: Genesis 32 as a bout that runs ALL. NIGHT. ----------
   A wrestling ring in 3/4 view on the black asphalt: a static painted layer (crowd darkness, the spotlight
   cone, the canvas, the apron) under live SVG (orange ropes with white tape, turnbuckle pads, posts) and
   Jacob and the angel cut from the series poster, locked mid-ring. The announcer cards, the round counter
   and the lines from the lesson are HTML over it. JS plays the bout once when it comes into view (tap to
   replay); reduced motion and no-JS show the ring, both cards and the last line, still. */
.ring{position:relative;margin:clamp(20px,3vw,44px) calc(-1 * var(--gutter)) 0;color:var(--bone)}
.ring::before{content:"";display:block;height:clamp(90px,11vw,190px);background:linear-gradient(rgba(11,11,14,0),rgba(11,11,14,.55) 45%,#0b0b0e)}
.ring-stage{position:relative;height:min(63.6vw,100svh);min-height:600px;background:#0b0b0e;overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(#000 82%,rgba(0,0,0,0));mask-image:linear-gradient(#000 82%,rgba(0,0,0,0))}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rope path{fill:none;stroke-linecap:round}
.r-sh{stroke:#3a1b00;opacity:.8}
.r-base{stroke:#d97303}
.r-tw{stroke:#7a3800;opacity:.42}
.r-hi{stroke:#ffc47a;opacity:.7}
.r-tape{stroke:#f2ede3}
.crowd ellipse{fill:#060608}
.pop{fill:#fffaf0;opacity:0}
.pop.on{animation:rg-pop .45s ease-out}
@keyframes rg-pop{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.wr,.wr-in,.hit{transform-box:fill-box}
.wr{transform-origin:50% 100%}
.wr-in{transform-origin:72% 100%}
.hit{opacity:0;transform-origin:center}
.dawn-glow{opacity:0;transition:opacity 2.6s ease}

/* the cards, the round counter and the lines from the lesson */
.ring-top{position:absolute;z-index:3;left:0;right:0;top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,2vw,40px);align-items:start;padding:clamp(26px,4.4vh,60px) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));pointer-events:none}
.c-pre{font:800 11px/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#cfc6b6}
.c-name{margin-top:10px;font-size:clamp(54px,6.4vw,112px);color:var(--orange);text-shadow:0 6px 30px rgba(0,0,0,.6)}
.ring-top>*{min-width:0;max-width:100%}
/* the corner cards are mirror images: each sits inside the gutter on its own side and never runs past it */
.card{max-width:100%;overflow-wrap:break-word}
.c-a{text-align:right;justify-self:end;width:100%}
.c-a .c-name{font-size:clamp(34px,3.6vw,64px);line-height:.86;color:var(--bone)}
.c-a .c-name span{display:block}
.c-a .c-name span+span{font-size:.72em;margin-top:.06em;color:#cfc6b6}
.c-line{margin-top:12px;max-width:24ch;font-size:clamp(15px,1.15vw,19px);line-height:1.35;font-style:italic;color:#d4ccbd}
.c-a .c-line{margin-left:auto}
.round{text-align:center}
.r-num{font-size:clamp(30px,3.1vw,54px);color:var(--bone);letter-spacing:.02em}
.r-num b{display:inline-block;min-width:.6em;color:var(--orange);font-weight:900}
.r-clock{margin-top:8px;font:800 12px/1.2 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--orange-l)}
.ring-lines{list-style:none;display:grid;margin:clamp(14px,1.8vw,26px) auto 0;padding:0;max-width:36ch;text-align:center;font-size:clamp(19px,1.7vw,30px);line-height:1.16;color:var(--bone);text-shadow:0 2px 18px rgba(0,0,0,.85)}
.ring-lines li{grid-area:1/1;font-style:italic;font-weight:700}
.ring-lines .who{display:block;margin-bottom:8px;font:800 11px/1.2 var(--body);letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:#cfc6b6}
.l-bless{color:var(--orange-l)}
.ring-lines cite{margin-left:.9em;padding-left:.9em;border-left:1px solid rgba(236,229,216,.35);font:600 11px/1.2 var(--body);letter-spacing:.14em;font-style:normal;color:#bdb6aa}
.ring-ui{position:relative;z-index:3;display:flex;justify-content:flex-end;gap:10px;padding:6px var(--gutter) 0}
.ring-btn{min-height:44px;padding:10px 16px;font:800 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:transparent;border:1.5px solid rgba(20,20,24,.6);cursor:pointer}
@media (hover:hover){.ring-btn:hover{background:var(--ink);color:var(--bone)}}
.ring-snd[aria-pressed="true"]{background:var(--ink);color:var(--orange-l)}
.snd-st{margin-left:.6em;padding:2px 6px;border:1px solid currentColor;font-size:10px;letter-spacing:.12em}
.ring .night-wall{margin-top:-.02em;padding:0 var(--gutter)}

/* resting state (no JS, reduced motion, and the end of the bout): both cards and the final line */
.ring-lines li{opacity:0;visibility:hidden}
.ring:not(.live) .l-bless,.ring.done .l-bless{opacity:1;visibility:visible}
.no-js .ring-ui,.ring.static .ring-ui{display:none}
/* live: hidden until the bell */
.ring.live .card,.ring.live .round{opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
/* the cards slide in from their own gutter only, so even mid-entrance neither crosses the viewport edge */
.ring.live .c-j{transform:translateX(calc(var(--gutter) * -.75))}
.ring.live .c-a{transform:translateX(calc(var(--gutter) * .75))}
.ring.live.k1 .c-j,.ring.live.k2 .c-a{opacity:1;transform:none}
.ring.live.k3 .round{opacity:1}
.ring.live.k3:not(.done) .card{opacity:.5}
.ring.live .ring-lines li{transition:opacity .45s ease,visibility 0s .45s}
.ring.live[data-line="2am"] .l-2am,.ring.live[data-line="limp"] .l-limp,.ring.live[data-line="let"] .l-let,.ring.live[data-line="bless"] .l-bless{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.ring.live.k3:not(.done) .wr{animation:rg-grapple 2.4s ease-in-out infinite}
@keyframes rg-grapple{0%,100%{transform:none}24%{transform:rotate(-1.3deg) translateX(-7px)}50%{transform:rotate(.9deg) translateX(6px)}74%{transform:rotate(-.4deg) translateX(-2px)}}
.r-num b.tick{animation:rg-tick .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes rg-tick{from{transform:scale(1.7);color:#fff}to{transform:none}}
.ring.live.imp .wr-in{animation:rg-imp .42s ease-out}
@keyframes rg-imp{0%,100%{transform:none}30%{transform:translate(-6px,3px) rotate(-.8deg)}60%{transform:translate(4px,-1px) rotate(.4deg)}}
.ring.live.lim .wr-in{animation:rg-limp 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rg-limp{0%{transform:none}16%{transform:translate(-8px,12px) rotate(-3deg)}46%{transform:translate(3px,4px) rotate(.8deg)}100%{transform:translate(-2px,6px) rotate(-1deg)}}
.ring.live.lim .hit{animation:rg-hit .9s ease-out}
@keyframes rg-hit{0%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.ring.live.dawn .dawn-glow{opacity:1}
.ring.live.slam .night-wall{animation:rg-slam .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes rg-slam{0%{transform:scale(1.18) translateY(-.06em);opacity:.4}55%{transform:scale(.985)}100%{transform:none;opacity:1}}

@media (max-width:1100px){
  .ring-stage{height:min(74vw,100svh)}
  .ring-top{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
  .c-name{font-size:clamp(44px,6.6vw,72px)}
  .c-a .c-name{font-size:clamp(28px,3.6vw,44px)}
  .ring-lines{font-size:clamp(18px,2.2vw,24px)}
}
/* phone and narrow tablet: the cards and the counter stack above the ring, which gets its own crop */
@media (max-width:900px){
  .ring-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .ring-top{position:relative;order:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px;padding:26px var(--gutter) 0}
  .ring-mid{grid-column:1 / -1;grid-row:2}
  .c-a{grid-column:2;grid-row:1}
  .c-name{font-size:clamp(40px,13vw,56px);margin-top:6px}
  .c-a .c-name{font-size:clamp(22px,6.6vw,30px)}
  .c-pre{font-size:10px;letter-spacing:.18em}
  .c-line{font-size:14px;margin-top:8px}
  .ring-lines{font-size:clamp(19px,5.6vw,24px);max-width:24ch;min-height:4.2em}
  .ring-svg{position:relative;order:2;flex:none;height:98vw;margin-top:-12vw}
  .ring-ui{justify-content:center}
  .ring-btn{flex:0 1 260px;min-width:0}
}

/* footer */
.foot{background:var(--stone-d);padding:0 var(--gutter) 40px;position:relative}
.foot::before{content:"";position:absolute;inset:-100px 0 auto;height:100px;background:linear-gradient(rgba(19,19,24,0),var(--stone-d));pointer-events:none}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:64px;align-items:start}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:#bdb6aa;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:#bdb6aa}
.fnav a:hover{color:#fff}
.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:#a49d92}

/* scroll arrivals (JS adds .in; without JS or with reduced motion everything is simply there) */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateX(var(--rx,-6vw));transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .rv.r{--rx:6vw}
  .js .rv.in{opacity:1;transform:none}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .hero-band{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .under-foot{grid-template-columns:1fr}
  .rename{justify-self:start}
  .lw-inner{width:auto;margin:40px 0 0;padding:0 var(--gutter)}
  .wrestle{grid-template-columns:var(--gutter) minmax(0,40vw) minmax(0,1fr)}
  .get-inner{grid-template-columns:1fr}
  .roll li,.roll li:nth-child(even){grid-template-columns:1fr;justify-content:start}
  .roll li:nth-child(even) .who{order:0;text-align:left}
  .r-2,.r-3{padding-left:var(--gutter)}
}

/* ---------- phone: its own crops ---------- */
@media (max-width:700px){
  .top{height:72px;gap:12px}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
  .hero-art{height:auto;max-height:none;aspect-ratio:1080/1300}
  .hero-art img{object-position:50% 40%}
  .hero-art::after{height:16%}
  .hero-band{padding-bottom:52px;gap:18px}
  .title{font-size:clamp(46px,15vw,64px)}
  .hero-line{font-size:22px}
  .hero-act,.hero-act .action,.hero-act .btn{width:100%}
  .extra{padding-top:40px;padding-bottom:220px}
  .extra-art img{object-position:50% 30%;opacity:.8}
  .extra-art::before{background:linear-gradient(rgba(31,31,39,.45),rgba(31,31,39,.75) 50%,rgba(31,31,39,.5))}
  .w-a{font-size:clamp(34px,10.4vw,60px)}
  .w-b{font-size:clamp(40px,12.6vw,80px);white-space:normal}
  .wrestle{display:block}
  .w1-side{padding:0 var(--gutter) 28px}
  .w1-obj{width:112vw;margin:0 -12vw 0 auto;transform:rotate(-2.5deg)}
  .wrestle-inner{margin-top:36px}
  .w1-title{font-size:clamp(58px,19vw,110px)}
  .w1-title span{font-size:.42em}
  .night-wall{font-size:clamp(96px,30vw,180px);white-space:normal}
  .night-wall span{display:block}
  .night-wall span:last-child{margin-left:0}
  .under{padding:48px var(--gutter) 196px}
  .q{font-size:clamp(36px,11vw,60px)}
  .jacob{font-size:clamp(84px,27vw,160px)}
  .israel{font-size:clamp(80px,25vw,150px)}
  .jacob-gloss{font-size:19px}
  .kjv{font-size:15px}
  .rename{font-size:22px}
  .under{min-height:max(700px,100svh)}
  .tell{min-width:0;width:100%}
  .pt{min-height:80svh;padding:72px var(--gutter)}
  .pin img{object-position:58% 40%}
  .pt h3{font-size:clamp(50px,15.6vw,92px)}
  .pt .sub{font-size:clamp(26px,8vw,46px);word-spacing:.2em}
  .fight{padding-top:120px}
  .fight-wall{font-size:clamp(60px,17.4vw,110px)}
  .fight-wall span:nth-child(n){padding-left:0}
  .fight-wall span:nth-child(2),.fight-wall span:nth-child(4){padding-left:6vw}
  .w2-obj{width:112vw;margin-left:-12vw;transform:rotate(2.2deg)}
  .lw-inner{margin-top:28px;padding:0 var(--gutter)}
  .w2-title{font-size:clamp(60px,19vw,110px)}
  .who{font-size:clamp(46px,14vw,84px)}
  .row{grid-template-columns:1fr;padding:34px var(--gutter)}
  .row .num{grid-row:auto;justify-self:start;margin-bottom:14px}
  .row .gloss,.fire{grid-column:1}
  .row h3{font-size:clamp(46px,13.4vw,80px)}
  .p2-art img{object-position:60% 50%}
  .p2-art::after{background:linear-gradient(rgba(19,19,24,.55),rgba(19,19,24,.8))}
  .decision{font-size:clamp(64px,20vw,120px);white-space:normal}
  .poster{margin:0 -8vw;width:auto;max-width:none}
  .kit div{grid-template-columns:86px minmax(0,1fr)}
  .pricerow .action,.pricerow .btn{width:100%}
  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}
  .brand-name{font-size:8.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Free-download button */
.btn.freecode{background:#b6ff00;color:#0b0a10;cursor:pointer}
.btn.freecode:hover{background:#fff;color:#0b0a10}