/* InkByte parallax module v1 · parallax.css
   Load AFTER site.css. Uses only site.css variables: --bg --panel --panel2 --text --soft --rule --lime --red --ink --grey --sans.
   Static-first: every rule outside .px-motion is the no-JS / reduced-motion layout and keeps all content visible.
   .px-js is added by parallax.js when it runs; .px-motion only when it runs AND motion is allowed. */

/* ---------- logos (see README: logo-whole guarantee) ---------- */
[data-px-header]{position:sticky;top:0;z-index:100}
[data-px-logo]{position:relative;z-index:6;-webkit-mask:none;mask:none;clip-path:none}
html:not(.px-js) [data-px-logo]:not([data-px-logo="pin"]){display:none}
.px-js [data-px-logo]:not([data-px-logo="pin"]){opacity:0}
.px-js [data-px-logo].px-ok{opacity:1;transition:opacity .45s ease}

/* ---------- hero (both variants) ---------- */
html [data-px-hero]{position:relative;padding:0;text-align:left;background:radial-gradient(ellipse at 72% 28%,rgba(195,49,74,.26),transparent 55%),radial-gradient(ellipse at 12% 88%,rgba(195,49,74,.12),transparent 50%),var(--bg)}
[data-px-hero] [data-px-stage]{position:relative;min-height:calc(100vh - 80px);display:flex;flex-direction:column;padding:clamp(1.5rem,5vh,3.5rem) 0 clamp(2rem,7vh,4.5rem)}
[data-px-hero] [data-px-content]{position:relative;z-index:3;width:100%;margin-top:auto;margin-bottom:auto}
[data-px-hero] [data-px-content]>*{max-width:62rem}
[data-px-hero] .mark{margin-left:0}
[data-px-hero] h1{font-weight:800;font-size:clamp(2.3rem,min(8.6vw,10vh),6.6rem);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
[data-px-hero] .lede{margin-left:0}
[data-px-hero] .ctas{justify-content:flex-start}
.px-strike{position:relative;white-space:nowrap;color:var(--soft)}
.px-strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--red);transform-origin:left center}
.px-layers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.px-layers>[data-px-layer]{position:absolute;inset:-10% -5%}
.px-grid{background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:64px 64px;opacity:.45;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 70%)}
.px-type{display:flex;flex-direction:column;justify-content:center;font:900 clamp(6rem,24vw,22rem)/.82 var(--sans);letter-spacing:-.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--rule);white-space:nowrap}
.px-type>*:nth-child(2){padding-left:18vw;-webkit-text-stroke-color:var(--red);opacity:.3}
.px-blots canvas{position:absolute;display:block}
.px-blots canvas:nth-child(1){width:min(70vw,720px);height:min(70vw,720px);right:-6%;top:6%;opacity:.55}
.px-blots canvas:nth-child(2){width:min(42vw,420px);height:min(42vw,420px);left:2%;bottom:6%;opacity:.22}
[data-px-hero] [data-px-content]::before{content:"";position:absolute;z-index:-1;top:-5rem;bottom:-5rem;left:-8%;width:min(108%,74rem);background:radial-gradient(farthest-side at 42% 50%,rgba(0,0,0,.58) 62%,transparent);pointer-events:none}
/* (a) home: floating quote cards */
.px-quote{position:absolute;max-width:17rem;padding:.55rem .8rem;border:1px solid var(--rule);background:var(--panel);color:var(--soft);font:500 .8rem/1.35 var(--sans)}
.px-quote.is-bad{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.px-quote.is-good{border-color:var(--lime);color:var(--text)}
.px-quote:nth-child(1){right:5%;top:15%}.px-quote:nth-child(2){right:10%;top:31%}.px-quote:nth-child(3){right:22%;bottom:30%}.px-quote:nth-child(4){right:6%;bottom:18%}
/* (b) kit pages: thumbnail stack (slots Milo fills with existing kit page images) */
[data-px-hero="kit"] [data-px-content]{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
[data-px-hero="kit"] [data-px-content]>*{min-width:0}
.px-thumbs{position:relative;z-index:2;display:flex;justify-content:center;padding:1rem 0 .5rem;max-width:none}
.px-thumb{margin:0 -1.2rem;width:clamp(6.5rem,27vw,12.5rem);flex:none;aspect-ratio:210/297;background:var(--text);color:var(--ink);box-shadow:0 14px 30px -10px rgba(0,0,0,.85),0 4px 10px rgba(0,0,0,.5);border-radius:3px;overflow:hidden;transform:rotate(-3deg)}
.px-thumb:nth-child(even){transform:rotate(3deg) translateY(.8rem)}
.px-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.px-slot{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:.7rem;border:1px dashed var(--grey);background:repeating-linear-gradient(135deg,var(--text) 0 10px,var(--soft) 10px 11px);font:600 .58rem/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase}
@media(min-width:900px){[data-px-hero="kit"] [data-px-content]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}}
/* mobile: calmer layers + contrast scrim (hero text measured >= 4.5:1, see README) */
@media(max-width:759px){
 .px-quote{display:none}.px-quote[data-px-keep]{display:block;top:13%;right:4%;max-width:11rem;font-size:.68rem}
 .px-type{-webkit-text-stroke-color:var(--rule);opacity:.6}
 .px-type>*:nth-child(2){opacity:.25}
 .px-blots canvas:nth-child(1){opacity:.32}.px-blots canvas:nth-child(2){opacity:.2}
 [data-px-hero] [data-px-content]::before{top:-.75rem;bottom:-.75rem;left:0;width:auto;right:0;background:rgba(0,0,0,.62);box-shadow:0 0 30px 18px rgba(0,0,0,.62);pointer-events:none}
}

/* ---------- pinned, scroll-scrubbed steps: static layout first ---------- */
[data-px-pin] [data-px-steps]{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
[data-px-progress]{display:none;height:2px;background:var(--red);transform-origin:left center}
[data-px-fill]{transform-origin:left center}
[data-px-scene]{position:relative}

/* ---------- marquee ---------- */
[data-px-marquee]{overflow:hidden}
[data-px-row]{display:flex;width:max-content;white-space:nowrap}
[data-px-row]>*{flex:none;padding-right:.4em}
.px-big{font:900 clamp(3.4rem,13vw,11rem)/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase;color:var(--text)}
.px-big.is-outline{color:transparent;-webkit-text-stroke:1.5px var(--grey);font-size:clamp(2.2rem,8vw,6.5rem)}
.px-big b{color:var(--red);font-weight:900}
.px-big.is-outline b{color:var(--lime);-webkit-text-stroke:0}

/* ---------- ink ---------- */
[data-px-ink="blot"]{display:none;position:absolute;pointer-events:none;z-index:0}
[data-px-ink="drip"]{display:block;width:100%;height:clamp(120px,18vw,240px);color:var(--red);margin-bottom:-1px}
[data-px-ink="drip"] svg{display:block;width:100%;height:100%;transform-origin:top center}
.px-clip{position:relative;overflow:hidden}

/* ---------- tilt ---------- */
[data-px-tilt]{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
[data-px-tilt]:hover{box-shadow:0 30px 60px -30px rgba(195,49,74,.55)}

/* ================= motion mode (JS running, motion allowed) ================= */
.px-motion [data-px-hero]:not(.px-flow) [data-px-stage]{position:sticky;min-height:0}
.px-motion [data-px-layer],.px-motion [data-px-thumb]{will-change:transform}
.px-motion [data-px-words] .px-w{display:inline-block;opacity:0;transform:translateY(.4em);animation:px-up .9s cubic-bezier(.2,.7,.2,1) forwards}
.px-motion .px-strike::after{transform:scaleX(0);animation:px-strike .9s 1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes px-up{to{opacity:1;transform:none}}
@keyframes px-strike{to{transform:scaleX(1)}}
.px-motion [data-px-reveal]{opacity:0;transform:translateY(46px)}
.px-motion.px-calm [data-px-reveal]{transform:translateY(16px)}
.px-motion [data-px-reveal].px-in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.px-motion [data-px-ink="wipe"]{position:relative}
.px-motion [data-px-ink="wipe"]>*{opacity:0}
.px-motion [data-px-ink="wipe"]::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.px-motion [data-px-ink="wipe"].px-in::after{animation:px-wipe 1s cubic-bezier(.75,0,.2,1) forwards}
.px-motion [data-px-ink="wipe"].px-in>*{animation:px-show .01s .5s forwards}
@keyframes px-wipe{0%{transform:scaleX(0);transform-origin:left center}50%{transform:scaleX(1);transform-origin:left center}50.1%{transform-origin:right center}100%{transform:scaleX(0);transform-origin:right center}}
@keyframes px-show{to{opacity:1}}
.px-motion [data-px-ink="blot"]{display:block;opacity:0;transform:scale(.2)}
.px-motion [data-px-progress]{display:block}
.px-motion [data-px-pin] [data-px-stage]{position:sticky;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.px-motion [data-px-pin] [data-px-steps]{position:relative;display:block;min-height:15rem}
.px-motion [data-px-step]{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}
.px-motion [data-px-step].is-on{opacity:1;transform:none}
.px-motion [data-px-scene]{min-height:min(30rem,62vh)}
.px-motion [data-px-row]{will-change:transform}
@media(max-width:759px){.px-motion [data-px-pin] [data-px-stage]{justify-content:flex-start;padding-top:1.4rem}.px-motion [data-px-pin] [data-px-steps]{min-height:10rem}.px-motion [data-px-scene]{min-height:17rem}}
@media(prefers-reduced-motion:reduce){[data-px-tilt],[data-px-logo]{transition:none!important}}