/* Tough as Nails: a bespoke series page.
   Art direction: the series' own poster, rebuilt live from its Photoshop layers. White paper, black torn
   paper, a fold line, two crossed nails, red marker scribbles, torn paper labels written by hand, and a
   heavy grotesque title set in difference so it flips black/white as it crosses the torn edge.
   Grounds: white + black (the poster) -> red (the prologue) -> black folded paper (nail them up)
   -> white | black (two reports) -> red (another spirit) -> white sky, black mountain (Part IV)
   -> bone paper (the finale) -> black paper (the download).
   Handoffs are torn edges cut from the art's own torn paper, never boxes.
   Lime is SMR's accent only (buy, focus, label tick). The series accent is the red and the handwriting. */

@view-transition { navigation: auto; }

:root{
  --white:#fff;
  --bone:#eeece6;
  --ink:#151515;
  --black:#0d0d0d;
  --red:#f23a33;
  --mist:#b9b9b6;
  --lime:#b6ff00;
  --gutter:64px;
  --disp:'Inter Tight','Arial Black',Arial,sans-serif;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif;
  --A:'/assets/series/tough-as-nails/';
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body.tan{margin:0;background:var(--ink);color:#fff;font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
p{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.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:80;background:var(--lime);color:#000;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- atoms ---------- */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;display:flex;align-items:center;gap:12px;color:var(--mist)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.dark{color:#141414}
.label.dark i{background:#141414}
.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:#000}.btn.lime:hover{background:#fff}
.btn.line{border:1px solid rgba(255,255,255,.6);color:#fff}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin-top:12px;font-size:13px;line-height:1.5}
.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:2px solid currentColor}
.follow:hover{color:var(--red)}
.wall{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.045em}
.wall span{display:block}
.say{font:800 clamp(21px,1.9vw,30px)/1.22 var(--body);letter-spacing:-.02em}
.say em{font-style:normal;color:var(--red)}
.body{font-size:16px;line-height:1.65;max-width:34em}
blockquote{margin:0}
.verse p{font:600 clamp(17px,1.32vw,20px)/1.55 var(--body);letter-spacing:-.01em}
.verse cite{display:block;margin-top:10px;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.cite{margin-top:12px;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.src{margin-top:28px;font-size:12px;line-height:1.5;opacity:.72;max-width:52em}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px;align-items:start}
.cols>div>*+*{margin-top:18px}

/* torn edges: the art's own torn paper, used as a mask so any ground can tear into the one above */
.torn-top::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--th,9vw) + 1px);height:var(--th,9vw);background:var(--tc,#000);-webkit-mask:url(/assets/series/tough-as-nails/edge-a.png) 0 0/100% 100% no-repeat;mask:url(/assets/series/tough-as-nails/edge-a.png) 0 0/100% 100% no-repeat;z-index:3;pointer-events:none}

/* ---------- header: the shared SMR lockup, set in difference so it reads on white and black ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:40;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter);mix-blend-mode:difference;color:#fff}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 #fff}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#fff}
.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 · the poster ============ */
.hero{--ts:min(15.4vw,25svh);position:relative;z-index:1;height:max(720px,100svh);background:#fff;overflow:hidden;isolation:isolate}
.hero-ground,.hero-grain,.hero-scrib{position:absolute;inset:0;pointer-events:none}
.hero-ground{z-index:0}
.hero-ground img,.hero-grain img,.hero-scrib img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 50%}
.hero-grain{z-index:3;mix-blend-mode:lighten}
.hero-scrib{z-index:4;transform:translateY(64px)}
.crumbs{position:absolute;z-index:6;left:var(--gutter);top:80px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.crumbs li+li::before{content:'/';margin-right:10px;opacity:.6}
.crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.hero-title{position:absolute;z-index:2;left:calc(var(--gutter) - .04em);top:calc(84px + 7svh);margin:0;font:900 var(--ts)/.8 var(--disp);letter-spacing:-.052em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.hero-title .ln{display:block}
.hero-title .w{display:inline}
.hero-cover{position:absolute;z-index:6;right:7vw;top:calc(84px + 4svh);width:min(23vw,40svh);margin:0;transform:rotate(5deg);transform-origin:50% 0}
.hero-cover-img{display:block;width:100%;height:auto;box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 12px 24px rgba(0,0,0,.35);view-transition-name:cover-tough-as-nails}
.hero-cover-pin{position:absolute;left:50%;top:-3%;width:22%;height:auto;transform:translateX(-50%) rotate(-5deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.hero-copy{position:absolute;z-index:6;left:var(--gutter);bottom:calc(7vw + 3svh);width:min(560px,44vw);color:#111}
.hero-copy .label{color:#111}
.hero-copy .label i{background:var(--lime);outline:1px solid #111}
.lede{margin-top:14px;font:700 clamp(18px,1.45vw,22px)/1.38 var(--body);letter-spacing:-.015em}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.hero-copy .note{color:#333}

/* ============ 2 · red: the prologue ============ */
.gate{position:relative;z-index:2;background:var(--red);color:#111;padding:min(22vw,40svh) var(--gutter) 18svh;overflow-x:clip;--th:7vw;--tc:var(--red)}
.gate.torn-top::before{-webkit-mask-image:url(/assets/series/tough-as-nails/edge-b.png);mask-image:url(/assets/series/tough-as-nails/edge-b.png)}
.gate-tape{position:absolute;z-index:3;right:-9vw;top:min(4vw,8svh);width:64vw;max-width:none;height:auto;transform:rotate(-5deg);filter:drop-shadow(0 22px 26px rgba(80,0,0,.35))}
.gate-in{position:relative;z-index:4}
.gate-wall{margin-top:22px;font-size:12.6vw;color:#111}
.gate-wall span{padding-left:9vw}
.gate .cols{margin-top:56px;max-width:1180px}
.gate .verse p{font-size:clamp(18px,1.5vw,23px)}

/* ============ 3 · signature: nail them up ============ */
.nailup{position:relative;z-index:3;background:var(--black)}
.js .nailup.live{height:560svh}
.stage{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--black);touch-action:pan-y}
.js .nailup.live .stage{position:sticky;top:0}
.stage-ground{position:absolute;inset:0}
.stage-ground img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.stage-in{position:absolute;inset:0;isolation:isolate}
.stage-head{position:absolute;z-index:6;left:var(--gutter);top:7svh;max-width:40vw}
.stage-h{margin:14px 0 0;font:900 clamp(40px,5vw,84px)/.86 var(--disp);letter-spacing:-.045em;text-transform:uppercase;color:#fff}
.stage-count{margin-top:12px;font:700 15px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.stage-count b{font-size:22px;color:#fff;font-weight:800}
.tapes{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:3}
.tp{--tw:min(54vw,84svh);position:absolute;width:var(--tw);top:calc(var(--y) * 1%);transform:translateY(-50%)}
.tp.L{left:var(--x)}
.tp.R{right:var(--x)}
.tp:nth-child(1){--y:23;--x:-5vw}
.tp:nth-child(2){--y:34;--x:-4vw}
.tp:nth-child(3){--y:45;--x:-2vw}
.tp:nth-child(4){--y:56;--x:-6vw}
.tp:nth-child(5){--y:67;--x:-3vw}
.tp:nth-child(odd){right:var(--x)}
.tp:nth-child(even){left:var(--x)}
.tp-body{position:relative;transform-origin:var(--ox) var(--oy);will-change:transform}
/* nail spots (% of the label): the first nail (--ox/--oy, the pivot) and the second (--qx/--qy). JS re-picks them per
   width from each label's clear paper near its visible ends (never on the handwriting); these are the no-JS defaults. */
.tp{--ox:86%;--oy:48%;--qx:6%;--qy:42%}
.tp:nth-child(even){--ox:14%;--oy:39%;--qx:94%;--qy:46%}
.tp-img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.55))}
/* ---- the nails: common framing nails drawn in CSS (no images). One em = the head's diameter (~57px at 1440, 34px
   on a phone). Flat, slightly cupped galvanized heads with a waffle face, hammer scuffs and a little rust at the rim.
   Each nail box is counter-rotated by the label's swing (--cth) so the light stays top left, plus a small random
   tilt (--tilt). The first nail went in rough: its head stands proud on a short visible shank and throws a long
   shadow. The second is driven flush by the strike. ---- */
.nl{position:absolute;left:var(--ox);top:var(--oy);width:1em;height:1em;margin:-.5em 0 0 -.5em;font-size:clamp(34px,calc(var(--tw) * .075),66px);transform:rotate(calc(var(--cth,0deg) + var(--tilt,0deg)));pointer-events:none;z-index:2}
.nl-drv{left:var(--qx);top:var(--qy);z-index:3}
/* the paper: a dimple pressed in round the head, five fold creases, and the head's seated shadow */
.nl-dent{position:absolute;left:50%;top:50%;width:1.9em;height:1.9em;margin:-.95em 0 0 -.95em;border-radius:50%;
  background:
    radial-gradient(circle at 46% 44%,rgba(0,0,0,0) 0 .47em,rgba(28,26,22,.34) .5em,rgba(28,26,22,.1) .6em,rgba(0,0,0,0) .74em),
    radial-gradient(circle at 56% 58%,rgba(255,255,255,0) 0 .55em,rgba(255,255,255,.4) .62em,rgba(255,255,255,0) .8em)}
.nl-dent::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from var(--cr,0deg),transparent 0 16deg,rgba(30,28,24,.3) 19deg,rgba(255,255,255,.5) 21.5deg,transparent 25deg 92deg,rgba(30,28,24,.22) 95deg,rgba(255,255,255,.45) 97deg,transparent 100deg 151deg,rgba(30,28,24,.32) 154deg,rgba(255,255,255,.5) 156.5deg,transparent 160deg 236deg,rgba(30,28,24,.2) 239deg,rgba(255,255,255,.4) 241deg,transparent 244deg 297deg,rgba(30,28,24,.24) 300deg,rgba(255,255,255,.4) 302deg,transparent 305deg);
  -webkit-mask:radial-gradient(circle,transparent 0 .46em,#000 .52em,rgba(0,0,0,.4) .75em,transparent .95em);mask:radial-gradient(circle,transparent 0 .46em,#000 .52em,rgba(0,0,0,.4) .75em,transparent .95em)}
.nl-dent::after{content:"";position:absolute;left:50%;top:50%;width:1.04em;height:1.04em;margin:-.47em 0 0 -.47em;border-radius:50%;background:rgba(8,8,10,.72);filter:blur(.05em)}
/* the head: a smooth chamfered rim lit top left round a flat, slightly cupped waffle face */
.nl-head{position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 300deg,#a9adb0,#8d9296 70deg,#676c70 150deg,#53575b 200deg,#73787c 260deg,#a9adb0);
  box-shadow:inset 0 0 0 .02em rgba(20,21,23,.85),inset -.03em -.04em .05em rgba(0,0,0,.35),inset .02em .025em .03em rgba(255,255,255,.3)}
.nl-head::before{content:"";position:absolute;inset:.055em;border-radius:50%;transform:rotate(var(--hr,0deg)) scale(1,var(--hs,.96));
  background:
    linear-gradient(28deg,transparent 43%,rgba(235,238,240,.55) 45%,rgba(235,238,240,.55) 47%,transparent 49%) 62% 26%/.34em .16em no-repeat,
    linear-gradient(-36deg,transparent 42%,rgba(235,238,240,.45) 45%,transparent 48%) 30% 66%/.3em .2em no-repeat,
    linear-gradient(80deg,transparent 40%,rgba(20,20,20,.35) 46%,transparent 52%) 70% 70%/.18em .2em no-repeat,
    radial-gradient(circle at 36% 33%,rgba(0,0,0,.26),rgba(0,0,0,0) 48%),
    radial-gradient(circle at 64% 68%,rgba(255,255,255,.26),rgba(255,255,255,0) 46%),
    repeating-linear-gradient(45deg,rgba(30,31,33,.24) 0 .014em,rgba(255,255,255,.13) .018em .032em,rgba(0,0,0,0) .036em .118em),
    repeating-linear-gradient(-45deg,rgba(30,31,33,.24) 0 .014em,rgba(255,255,255,.13) .018em .032em,rgba(0,0,0,0) .036em .118em),
    radial-gradient(ellipse 30% 22% at 30% 62%,rgba(160,166,170,.6),rgba(160,166,170,0)),
    radial-gradient(ellipse 26% 30% at 70% 34%,rgba(110,116,120,.6),rgba(110,116,120,0)),
    radial-gradient(circle at 50% 50%,#8f9498,#7e8387 70%,#6d7276);
  box-shadow:inset .03em .035em .05em rgba(0,0,0,.45),inset -.02em -.025em .03em rgba(255,255,255,.3)}
.nl-head::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 16% 66%,rgba(104,58,26,.55) 0 .03em,rgba(104,58,26,0) .08em),
    radial-gradient(circle at 24% 80%,rgba(92,54,30,.4) 0 .02em,rgba(92,54,30,0) .06em),
    radial-gradient(circle at 80% 22%,rgba(56,46,36,.45) 0 .03em,rgba(56,46,36,0) .07em),
    conic-gradient(from var(--rust,40deg),rgba(104,56,24,.42) 0 12deg,rgba(104,56,24,.18) 24deg,transparent 38deg 70deg,rgba(96,54,26,.3) 78deg 86deg,transparent 98deg 186deg,rgba(60,48,38,.32) 200deg 222deg,transparent 240deg);
  -webkit-mask:radial-gradient(circle,transparent 0 .34em,rgba(0,0,0,.7) .42em,#000 .5em);mask:radial-gradient(circle,transparent 0 .34em,rgba(0,0,0,.7) .42em,#000 .5em)}
/* shank and shadows. The arm runs from where the nail enters the paper out to the head */
.nl-arm,.nl-sarm{position:absolute;inset:0;transform:rotate(var(--phi,-120deg))}
.nl-sarm{transform:rotate(var(--sphi,40deg))}
.nl-shank{position:absolute;left:50%;top:50%;width:var(--L,.72em);height:.4em;margin-top:-.2em;transform-origin:0 50%;clip-path:polygon(0 9%,100% 0,100% 100%,0 91%);
  background:linear-gradient(90deg,rgba(10,10,10,.55),rgba(10,10,10,.12) 30%,rgba(0,0,0,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.12) 31%,rgba(255,255,255,0) 36%,rgba(0,0,0,0) 62%,rgba(0,0,0,.12) 63%,rgba(0,0,0,0) 68%),
    linear-gradient(180deg,#1f2224 0%,#4b5054 16%,#9da2a6 31%,#7f8489 46%,#575c61 70%,#1f2224 100%)}
.nl-arm .nl-head{transform:translateX(var(--L,.72em)) scaleX(var(--fx,.82)) rotate(calc(var(--phi,-120deg) * -1))}
.nl-sbar{position:absolute;left:50%;top:50%;width:var(--SL,1.4em);height:.24em;margin-top:-.12em;transform-origin:0 50%;background:rgba(0,0,0,.42);filter:blur(.04em)}
.nl-sdot{position:absolute;left:calc(50% + var(--SL,1.4em));top:50%;width:.96em;height:.88em;margin:-.44em 0 0 -.48em;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(.07em)}
.nl-pin .nl-dent{transform:scale(.6);background:radial-gradient(circle at 50% 50%,rgba(20,18,16,.55) 0 .2em,rgba(28,26,22,.28) .27em,rgba(28,26,22,.08) .45em,rgba(0,0,0,0) .62em)}
.nl-pin .nl-dent::after{display:none}
/* the driven nail rests flush: no shank, no shadow arm; only its seated shadow */
.nl-drv .nl-shank{width:var(--L,1.45em);transform:scaleX(0);clip-path:polygon(0 50%,9% 22%,100% 6%,100% 94%,9% 78%)}
.nl-drv .nl-sbar,.nl-drv .nl-sdot{opacity:0}
.nl-drv .nl-head{transform:translateX(0) scaleX(1) rotate(calc(var(--phi,-120deg) * -1)) scale(1)}
/* the blow: a hammer (flat steel block, wooden handle) and an impact flash with sparks */
.nl-ham{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;z-index:4;filter:drop-shadow(.3em .45em .2em rgba(0,0,0,.45))}
.nl-ham-h{position:absolute;left:.5em;top:-.24em;width:5.4em;height:.48em;border-radius:.24em;background:linear-gradient(180deg,#3a2718,#86603d 30%,#a67a4e 46%,#6b4a2c 76%,#2f2016)}
.nl-ham-k{position:absolute;left:-.68em;top:-.68em;width:1.36em;height:1.36em;border-radius:.34em;background:radial-gradient(circle at 40% 36%,#70767b,#41464a 55%,#232629 92%);box-shadow:inset .06em .06em .08em rgba(255,255,255,.28),inset -.08em -.1em .14em rgba(0,0,0,.55),0 0 0 .03em #15171a}
.nl-ham-k::after{content:"";position:absolute;left:50%;top:50%;width:1em;height:1em;margin:-.5em;border-radius:50%;box-shadow:inset 0 0 0 .05em rgba(255,255,255,.12),inset .1em .12em .2em rgba(0,0,0,.35)}
.nl-spark{position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em;border-radius:50%;opacity:0;z-index:5;
  background:radial-gradient(circle,rgba(255,255,244,1) 0 .1em,rgba(255,236,180,.7) .26em,rgba(255,220,150,0) .7em),
    repeating-conic-gradient(from 12deg,rgba(255,244,210,.95) 0 1.6deg,rgba(255,244,210,0) 2.4deg 27deg);
  -webkit-mask:radial-gradient(circle,#000 0 .45em,rgba(0,0,0,.7) .9em,transparent 1.5em);mask:radial-gradient(circle,#000 0 .45em,rgba(0,0,0,.7) .9em,transparent 1.5em)}
/* the burst at impact: paper fibres, grit and a puff (spawned by JS, removed after) */
.nl-dust{position:absolute;left:50%;top:50%;width:0;height:0;font-size:.42em}
.nl-dust i{position:absolute;left:0;top:0;display:block;border-radius:1px;animation:nl-fly var(--t,.6s) cubic-bezier(.12,.8,.3,1) both}
.nl-dust i.f{width:.62em;height:2px;margin:-1px 0 0 -.31em;background:#efede6;box-shadow:0 0 0 .5px rgba(0,0,0,.35)}
.nl-dust i.d{width:3px;height:3px;margin:-1.5px;border-radius:50%;background:rgba(92,86,78,.85)}
.nl-dust i.p{width:2.6em;height:2.6em;margin:-1.3em;border-radius:50%;background:radial-gradient(circle,rgba(150,144,134,0) 30%,rgba(150,144,134,.38) 52%,rgba(150,144,134,0) 72%);animation:nl-puff .5s ease-out both}
@keyframes nl-fly{0%{transform:translate(0,0) rotate(var(--r0,0deg)) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r1,90deg)) scale(.7);opacity:0}}
@keyframes nl-puff{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.tp-n{position:absolute;top:50%;transform:translateY(-50%);font:900 clamp(44px,5.4vw,96px)/1 var(--disp);letter-spacing:-.04em;color:#fff;transition:opacity .3s}
.tp:nth-child(odd) .tp-n{right:calc(100% + 1.6vw)}
.tp:nth-child(even) .tp-n{left:calc(100% + 1.6vw)}
.stage-wall{position:absolute;z-index:5;left:0;right:0;bottom:2.6svh;text-align:center;white-space:nowrap;font:900 min(8.7vw,12.5svh)/.82 var(--disp);letter-spacing:-.05em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none}
.stage-foot{position:absolute;z-index:7;right:var(--gutter);top:7svh;display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:30vw;text-align:right}
.strike{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:10px 24px 10px 12px;border:2px solid #fff;background:#fff;color:#111;font:800 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s,background .15s,color .15s}
.strike:hover{background:var(--red);border-color:var(--red);color:#111}
.strike:active{transform:translateY(2px)}
.strike[disabled]{background:transparent;color:#fff;cursor:default}
.strike[hidden]{display:none} /* reduced motion / no JS: nothing to drive, every nail is already in */
.strike-mark{width:34px;height:35px;background:url(/assets/series/tough-as-nails/nail-mark.webp) center/contain no-repeat;filter:invert(1)}
.strike[disabled] .strike-mark{filter:none}
.stage-hint{font-size:13px;line-height:1.45;color:var(--mist);max-width:22em}

/* live states (JS) */
.live .tp{opacity:0;visibility:hidden}
.live .tp.in{opacity:1;visibility:visible}
.live .tp:not(.drive) .nl-drv{opacity:0}
.live .tp-n{opacity:0}
.live .tp.fast .tp-n{opacity:1}
/* unpinned (reduced motion, no JS): the stage grows a band at its foot for the line, clear of the labels above and of
   the next section's torn edge (7vw) below */
.nailup:not(.live) .stage{height:calc(100svh + 7vw + 4svh)}
.nailup:not(.live) .stage-in{bottom:calc(7vw + 4svh)}
.nailup:not(.live) .stage-wall{bottom:-3svh}
.live .stage-wall{opacity:0}
.live .stage-in.done .stage-wall{opacity:1;animation:slam .5s cubic-bezier(.2,1.4,.4,1) both}
/* a strike (.7s). 0-28%: the nail comes in tilted, its long shank showing and its point on the paper, and is set.
   44-50%: the hammer comes down from the side away from the shank onto the head. 50-62%: hammer and head drive down
   together, the shank plunging in, the head landing last (impact at 62%: flash, sparks, dimple). 62-82%: 4 frames of
   settle while the hammer rebounds and lifts away. */
.tp.drive .nl-drv .nl-head{animation:nl-head .7s linear both}
.tp.drive .nl-drv .nl-shank{animation:nl-shank .7s linear both}
.tp.drive .nl-drv .nl-sbar{animation:nl-sbar .7s linear both}
.tp.drive .nl-drv .nl-sdot{animation:nl-sdot .7s linear both}
.tp.drive .nl-drv .nl-dent{animation:nl-dent .7s linear both}
.tp.drive .nl-drv .nl-ham{animation:nl-ham .7s linear both}
.tp.drive .nl-drv .nl-spark{animation:nl-spark .7s linear both}
@keyframes nl-head{
  0%{transform:translateX(calc(var(--L) * 1.35)) scaleX(.6) rotate(calc(var(--phi) * -1)) scale(1.45);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  14%{transform:translateX(var(--L)) scaleX(.64) rotate(calc(var(--phi) * -1)) scale(1.28);opacity:1;animation-timing-function:ease-out}
  28%{transform:translateX(calc(var(--L) * .86)) scaleX(.68) rotate(calc(var(--phi) * -1)) scale(1.24)}
  50%{transform:translateX(calc(var(--L) * .86)) scaleX(.68) rotate(calc(var(--phi) * -1)) scale(1.24);animation-timing-function:cubic-bezier(.6,0,1,.8)}
  62%{transform:translateX(0) scaleX(1) rotate(calc(var(--phi) * -1)) scale(.86);animation-timing-function:ease-out}
  66%{transform:translateX(0) scaleX(1) rotate(calc(var(--phi) * -1)) scale(1.08);animation-timing-function:ease-in-out}
  70%{transform:translateX(0) scaleX(1) rotate(calc(var(--phi) * -1)) scale(.96);animation-timing-function:ease-in-out}
  75%{transform:translateX(0) scaleX(1) rotate(calc(var(--phi) * -1)) scale(1.02);animation-timing-function:ease-in-out}
  82%,100%{transform:translateX(0) scaleX(1) rotate(calc(var(--phi) * -1)) scale(1);opacity:1}}
@keyframes nl-shank{
  0%{transform:scaleX(1.35);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  14%{transform:scaleX(1);opacity:1;animation-timing-function:ease-out}
  28%{transform:scaleX(.86)}
  50%{transform:scaleX(.86);animation-timing-function:cubic-bezier(.6,0,1,.8)}
  62%,100%{transform:scaleX(0);opacity:1}}
@keyframes nl-sbar{
  0%{transform:scaleX(1.35);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  14%{transform:scaleX(1);opacity:1;animation-timing-function:ease-out}
  28%{transform:scaleX(.86);opacity:1}
  50%{transform:scaleX(.86);opacity:1;animation-timing-function:cubic-bezier(.6,0,1,.8)}
  62%,100%{transform:scaleX(0);opacity:0}}
@keyframes nl-sdot{
  0%{transform:translateX(calc(var(--SL) * .35));opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  14%{transform:translateX(0);opacity:1;animation-timing-function:ease-out}
  28%{transform:translateX(calc(var(--SL) * -.14));opacity:1}
  50%{transform:translateX(calc(var(--SL) * -.14));opacity:1;animation-timing-function:cubic-bezier(.6,0,1,.8)}
  62%,100%{transform:translateX(calc(var(--SL) * -1));opacity:0}}
@keyframes nl-dent{
  0%,61%{transform:scale(.3);opacity:0}
  62%{transform:scale(.62);opacity:1}
  67%{transform:scale(1.12)}
  73%{transform:scale(.97)}
  100%{transform:scale(1);opacity:1}}
@keyframes nl-ham{
  0%,30%{transform:translate(calc(var(--hx) * .86),calc(var(--hy) * .86)) rotate(var(--hang)) translateX(2.4em) scale(1.9);opacity:0}
  44%{transform:translate(calc(var(--hx) * .86),calc(var(--hy) * .86)) rotate(var(--hang)) translateX(1em) scale(1.5);opacity:1;animation-timing-function:cubic-bezier(.7,0,1,.6)}
  50%{transform:translate(calc(var(--hx) * .86),calc(var(--hy) * .86)) rotate(var(--hang)) translateX(0) scale(1.06);opacity:1;animation-timing-function:cubic-bezier(.6,0,1,.8)}
  62%{transform:translate(0em,0em) rotate(var(--hang)) translateX(0) scale(.97);opacity:1;animation-timing-function:ease-out}
  68%{transform:translate(0em,0em) rotate(var(--hang)) translateX(.35em) scale(1.14);opacity:1;animation-timing-function:ease-in-out}
  84%{transform:translate(0em,0em) rotate(var(--hang)) translateX(2em) scale(1.7);opacity:.85}
  94%,100%{transform:translate(0em,0em) rotate(var(--hang)) translateX(2.6em) scale(1.85);opacity:0}}
@keyframes nl-spark{
  0%,61%{transform:scale(.4) rotate(0deg);opacity:0}
  62%{transform:scale(.75) rotate(0deg);opacity:1}
  67%{transform:scale(1.1) rotate(9deg);opacity:.85}
  75%,100%{transform:scale(1.35) rotate(14deg);opacity:0}}
.stage-in.shake{animation:shake .32s linear}
@keyframes shake{0%{transform:translate(0,0)}12%{transform:translate(-9px,7px)}26%{transform:translate(8px,-6px)}42%{transform:translate(-5px,4px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}100%{transform:none}}
@keyframes slam{0%{transform:scale(1.3);opacity:0}100%{transform:scale(1);opacity:1}}

/* ============ 4 · white | black: the two reports ============ */
.nailup{--th:6vw;--tc:var(--black)}
.nailup.torn-top::before{z-index:4;-webkit-mask-image:url(/assets/series/tough-as-nails/edge-d.png);mask-image:url(/assets/series/tough-as-nails/edge-d.png)}
.report{position:relative;z-index:4;background:var(--black);color:#111;overflow-x:clip}
.rep-ten{background:#fff}
.rep-ten::after{content:'';position:absolute;left:0;right:0;top:calc(-7vw + 1px);height:7vw;background:#fff;-webkit-mask:url(/assets/series/tough-as-nails/edge-c.png) 0 0/100% 100% no-repeat;mask:url(/assets/series/tough-as-nails/edge-c.png) 0 0/100% 100% no-repeat}

.report-in{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.report-in>.label{position:absolute;z-index:3;left:var(--gutter);top:9vh}
.rep-two .src{color:#cfcfcc;opacity:1}
.rep{position:relative;padding:20vh 5vw 22vh var(--gutter)}
.rep-two{background:var(--black) url(/assets/series/tough-as-nails/paper-tall-900.webp) 50% 30%/cover;color:#fff;padding-left:5vw;padding-right:var(--gutter)}
.rep-two::before{content:'';position:absolute;top:0;bottom:0;right:calc(100% - 1px);width:4.4vw;background:inherit;background-position:0 30%;-webkit-mask:url(/assets/series/tough-as-nails/edge-v.png) 0 0/100% 100% no-repeat;mask:url(/assets/series/tough-as-nails/edge-v.png) 0 0/100% 100% no-repeat}
.rep-num{font:900 min(27vw,48svh)/.78 var(--disp);letter-spacing:-.06em;margin-left:-.05em}
.rep-ten .rep-num{color:#111}
.rep-two .rep-num{color:#fff}
.rep-kicker{margin-top:28px;font:800 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase}
.rep-wall{margin-top:12px;font:900 clamp(40px,4.9vw,86px)/.86 var(--disp);letter-spacing:-.045em;text-transform:uppercase}
.rep .verse{margin-top:26px;max-width:28em}
.rep-two .rep-wall{color:#fff}
.report-line{position:relative;margin-top:40px;color:#fff;font:800 clamp(20px,1.7vw,27px)/1.25 var(--body);letter-spacing:-.02em;max-width:22em}
.report-line em{font-style:normal;color:var(--red)}

/* ============ 5 · red: another spirit ============ */
.spirit{position:relative;z-index:5;background:var(--red);color:#111;padding:min(26vw,44svh) var(--gutter) 16svh;overflow-x:clip;--th:6vw;--tc:var(--red)}
.spirit.torn-top::before{-webkit-mask-image:url(/assets/series/tough-as-nails/edge-b.png);mask-image:url(/assets/series/tough-as-nails/edge-b.png)}
.spirit-tape{position:absolute;z-index:1;left:-14vw;top:4vw;width:80vw;max-width:none;height:auto;transform:rotate(4deg);filter:drop-shadow(0 26px 30px rgba(80,0,0,.35))}
.spirit-in{position:relative;z-index:2}
.spirit-wall{margin-top:24px;font-size:17vw;color:#111;line-height:.8}
.spirit-wall span{padding-left:22vw}
.spirit .cols{margin-top:60px;max-width:1180px}

/* ============ 6 · white sky, black mountain ============ */
.mountain{position:relative;z-index:6;background:#fff;color:#111;min-height:150svh;isolation:isolate;--th:6vw;--tc:#fff}
.mountain.torn-top::before{-webkit-mask-image:url(/assets/series/tough-as-nails/edge-a.png);mask-image:url(/assets/series/tough-as-nails/edge-a.png)}
.mtn-clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.mtn-ridge{position:absolute;z-index:1;left:-20vw;right:-20vw;bottom:-6svh;height:min(84svh,64vw);transform:translate3d(0,var(--rise,0px),0) rotate(-7deg);transform-origin:50% 100%;will-change:transform}
.mtn-ridge::before{content:'';position:absolute;inset:0;background:var(--black) url(/assets/series/tough-as-nails/paper-wide-1920.webp) 50% 0/cover;-webkit-mask:url(/assets/series/tough-as-nails/edge-d.png) 0 0/100% 34% no-repeat,linear-gradient(#000,#000) 0 33%/100% 68% no-repeat;mask:url(/assets/series/tough-as-nails/edge-d.png) 0 0/100% 34% no-repeat,linear-gradient(#000,#000) 0 33%/100% 68% no-repeat}

.mtn-in{position:relative;padding:16svh var(--gutter) 12svh;min-height:150svh;display:flex;flex-direction:column}
.mtn-wall{margin:22px 0 0;font:900 11.4vw/.8 var(--disp);letter-spacing:-.05em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;max-width:9em}
.mtn-years{position:relative;margin-top:4svh;display:flex;align-items:flex-end;gap:2vw;justify-content:flex-end;font-family:var(--disp);font-weight:900;letter-spacing:-.06em;color:#fff;mix-blend-mode:difference;line-height:.78}
.y40{font-size:9vw;opacity:.55}
.y85{font-size:min(30vw,52svh)}
.mtn-copy{margin-top:auto;padding-top:6svh;color:#fff;max-width:620px;margin-left:auto}
.mtn-copy .verse p{font-size:clamp(18px,1.5vw,23px)}
.mtn-copy .say{margin-top:26px}
.mtn-copy .say em{color:var(--red)}

/* ============ 7 · bone paper: the finale ============ */
.finale{position:relative;z-index:7;background:var(--bone);color:#111;padding:min(30vw,48svh) var(--gutter) 18svh;overflow-x:clip;--th:6vw;--tc:var(--bone)}
.finale.torn-top::before{-webkit-mask-image:url(/assets/series/tough-as-nails/edge-a.png);mask-image:url(/assets/series/tough-as-nails/edge-a.png)}
.fin-tape{position:absolute;z-index:1;right:-12vw;top:5vw;width:60vw;max-width:none;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 22px 24px rgba(0,0,0,.18))}
.fin-in{position:relative;z-index:2}
.fin-wall{margin-top:22px;font-size:10.6vw;color:#111}
.fin-wall span{color:var(--red)}
.finale .cols{margin-top:56px;max-width:1180px}
.finale .say{font-size:clamp(23px,2.2vw,34px)}

/* ============ 8 · black paper: the download ============ */
.kit{position:relative;z-index:8;background:var(--black);color:#fff;padding:12svh 0 0;overflow-x:clip;--th:6vw;--tc:var(--black)}
.kit.torn-top::before{-webkit-mask-image:url(/assets/series/tough-as-nails/edge-c.png);mask-image:url(/assets/series/tough-as-nails/edge-c.png)}
.kit-ground{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.9}
.kit-ground img{display:block;width:100%;height:100%;object-fit:cover}
.kit-wall{position:relative;z-index:1;margin:0;padding:0 var(--gutter);font:900 9.7vw/.8 var(--disp);letter-spacing:-.05em;text-transform:uppercase;color:#fff;white-space:nowrap}
.kit-reel{position:relative;z-index:2;margin-top:-3.6vw;overflow:hidden;padding:4vw 0 5vw}
.reel{list-style:none;margin:0;padding:0;display:flex;gap:0;width:max-content;transform:translate3d(var(--rx,-8vw),0,0);will-change:transform}
.reel li{width:min(23vw,40svh);margin-right:-2.6vw;flex:none}
.reel li:nth-child(odd){transform:rotate(-3deg) translateY(1.5vw)}
.reel li:nth-child(even){transform:rotate(2.5deg)}
.reel img{display:block;width:100%;height:auto;box-shadow:0 30px 50px -18px rgba(0,0,0,.85)}
.kit-in{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:4vw var(--gutter) 6vw}
.kit-buy{grid-column:1/6}
.kit-list{grid-column:7/13}
.kit-h{margin:16px 0 0;font:900 clamp(44px,5.4vw,92px)/.86 var(--disp);letter-spacing:-.045em;text-transform:uppercase}
.kit-lede{margin-top:20px;font-size:17px;line-height:1.6;color:#e2e2df;max-width:30em}
.price{display:flex;align-items:baseline;gap:12px;margin:28px 0 20px}
.price strong{font:900 64px/1 var(--disp);letter-spacing:-.04em}
.price span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mist)}
.kit-buy .note{color:var(--mist)}
.kit-sub{margin:6px 0 0;font:800 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.inc{list-style:none;margin:16px 0 0;padding:0}
.inc li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-top:1px solid rgba(255,255,255,.18);font-size:15px;line-height:1.5}
.inc li span:first-child{font:800 11px/1.9 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.kit-list .src{color:var(--mist);opacity:1}
.more{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:16px 56px;padding:0 var(--gutter) 64px}
.more a{display:flex;flex-direction:column;gap:6px;min-height:44px;text-decoration:none}
.more span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mist)}
.more b{font:900 clamp(24px,2.2vw,34px)/1 var(--disp);letter-spacing:-.03em;text-transform:uppercase}
.more a:hover b{color:var(--red)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:8;padding:40px var(--gutter);background:var(--black);color:#fff}
.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(255,255,255,.14)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mist);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(--mist)}
.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:var(--mist)}

/* ---------- reveal (JS adds .rv, then .on when seen) ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
.tape-rv{opacity:0;transition:opacity .2s}
.tape-rv.on{opacity:1;animation:slap .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes slap{0%{translate:0 -60px;scale:1.12}100%{translate:0 0;scale:1}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.tape-rv{opacity:1;transform:none}
  .mtn-ridge{transform:rotate(-7deg)}
  .reel{transform:translate3d(-8vw,0,0)}
}

/* ---------- breakpoints ---------- */
@media (min-width:1700px){
  .body{font-size:17px}
}
@media (max-width:1100px){
  :root{--gutter:40px}
  .nav{gap:22px}
  .hero-copy{width:min(420px,44vw)}
}
@media (max-width:900px){
  .nav{display:none}
  .cols{grid-template-columns:1fr}
  .kit-buy,.kit-list{grid-column:1/13}
  .kit-list{margin-top:48px}
}
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:68px}
  .top .btn{display:none}
  .brand-mark{height:34px;width:34px}

  /* hero: the story artboard, its own crop */
  .hero{--ts:min(27.5vw,17svh);height:auto;min-height:100svh;padding:118px var(--gutter) 0;display:flex;flex-direction:column}
  .hero{background:#171717}
  .hero-ground,.hero-grain{bottom:auto;height:min(780px,94svh);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .hero-ground img,.hero-grain img{object-position:38% 50%}
  .hero-scrib{display:none}
  .crumbs{top:60px}
  .hero-title{position:relative;left:auto;top:auto;margin-left:-.04em;letter-spacing:-.05em;line-height:.8}
  .hero-title .w{display:block}
  .hero-scrib{transform:none}
  .hero-cover{position:relative;right:auto;top:auto;width:46vw;margin:-1.2svh 0 0 auto;transform:rotate(5deg) translateX(1vw)}
  .hero-copy{position:relative;left:auto;bottom:auto;width:auto;margin-top:4svh;color:#fff;padding-bottom:9svh}
  .hero-copy .label,.hero-copy .note{color:#e8e8e5}
  .hero-copy .label i{outline:none}
  .lede{font-size:18px}
  .buyrow{gap:10px 20px}
  .buyrow .btn{width:100%}
  
  .gate{padding:46vw var(--gutter) 14svh;--th:12vw}
  .gate-tape{right:-22vw;top:4vw;width:118vw}
  .gate-wall{font-size:17.4vw}
  .gate-wall span{padding-left:0}
  .gate .cols{margin-top:36px}

  .js .nailup.live{height:520svh}
  .stage{min-height:560px}
  .stage-head{top:6svh;max-width:none;right:var(--gutter)}
  .stage-h{font-size:40px}
  .stage-count{margin-top:6px}
  .tp{--tw:104vw}
  .tp:nth-child(1){--y:26;--x:-14vw}
  .tp:nth-child(2){--y:37;--x:-12vw}
  .tp:nth-child(3){--y:48;--x:-15vw}
  .tp:nth-child(4){--y:59;--x:-12vw}
  .tp:nth-child(5){--y:70;--x:-14vw}
  .tp-n{display:none}
  .tp{--ox:84%;--qx:13%}
  .tp:nth-child(even){--ox:16%;--qx:86%}
  .stage-wall{font-size:min(15.4vw,9.4svh);white-space:normal;bottom:3svh}
  .live .stage-in.done .stage-foot{opacity:0;pointer-events:none}
  .stage-foot{left:var(--gutter);right:var(--gutter);top:auto;bottom:3svh;max-width:none;gap:10px;align-items:stretch;transition:opacity .3s}
  .strike{width:100%;justify-content:center}
  .stage-hint{display:none}

  .report{--th:12vw}
  .report-in{grid-template-columns:1fr;min-height:0}
  .report-in>.label{top:9vh}
  .rep{padding:18vh var(--gutter) 12vh}
  .rep-two{padding:12vh var(--gutter) 10vh;background-image:url(/assets/series/tough-as-nails/paper-tall-600.webp)}
  .rep-two::before{left:0;right:0;width:auto;top:auto;bottom:calc(100% - 1px);height:12vw;-webkit-mask-image:url(/assets/series/tough-as-nails/edge-a.png);mask-image:url(/assets/series/tough-as-nails/edge-a.png);background-position:0 0}
  .rep-num{font-size:46vw}
  .rep-wall{font-size:12.4vw}

  .spirit{padding:58vw var(--gutter) 14svh}
  .spirit-tape{left:-26vw;top:8vw;width:130vw}
  .spirit-wall{font-size:19.5vw}
  .spirit-wall span{padding-left:0}
  .spirit .cols{margin-top:36px}

  .mountain{min-height:0}
  .mtn-in{min-height:0;padding:16svh var(--gutter) 10svh}
  .mtn-wall{font-size:17.6vw}
  .mtn-ridge{left:-60vw;right:-60vw;height:76%;bottom:-6%;transform:translate3d(0,var(--rise,0px),0) rotate(-9deg)}
  .mtn-ridge::before{background-position:0 0;-webkit-mask-size:100% 12%,100% 90%;mask-size:100% 12%,100% 90%;-webkit-mask-position:0 0,0 11.5%;mask-position:0 0,0 11.5%}
  .mtn-years{justify-content:flex-start;margin-top:22vw}
  .y40{font-size:15vw}
  .y85{font-size:44vw}
  .mtn-copy{margin-left:0;padding-top:8svh}

  .finale{padding:56vw var(--gutter) 14svh}
  .fin-tape{right:-24vw;top:8vw;width:120vw}
  .fin-wall{font-size:15.4vw}
  .finale .cols{margin-top:36px}

  .kit{padding-top:10svh}
  .kit-ground{opacity:.75}
  .kit-ground img{object-position:6% 50%}
  .kit-wall{font-size:15.6vw;white-space:normal;line-height:.82}
  .kit-reel{margin-top:6vw}
  .reel li{width:46vw;margin-right:-5vw}
  .kit-in{padding:8vw var(--gutter) 12vw}
  .inc li{grid-template-columns:1fr;gap:4px}
  .more{gap:20px}
  .foot{padding-top:24px}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media (max-width:350px){
  .stage-h{font-size:34px}
  .price strong{font-size:52px}
}