/* Roam Prints - plain CSS, no build step.
   Concept: the site is a print. Layer lines, a nozzle that draws as you scroll, a build plate under every product. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/BarlowCondensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/BarlowCondensed-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/IBMPlexSans.woff2') format('woff2');}

:root{
  --ink:#0b0b0b; --ink-2:#151515; --line:#2b2b2b;
  --paper:#f1efe9; --white:#fff;
  --orange:#ff6a00; --orange-text:#b94700; --led:#ff2a12;
  --muted:#5b5b57; --muted-dark:#a3a29d;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1240px; --pad:clamp(20px,4vw,48px); --head:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--head)}
body{margin:0;font:400 17px/1.55 var(--body);color:var(--white);background:var(--ink);overflow-x:hidden}
html:not(.js) body{overflow-x:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:var(--ink);padding:10px 16px;z-index:100;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- global texture & chrome ---------- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
.filament{position:absolute;left:0;top:0;z-index:55;pointer-events:none;overflow:visible}
.filament path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.filament .case{stroke:#000;stroke-width:5;opacity:.9}
.filament .core{stroke:var(--orange);stroke-width:3}
.filament .nozzle{fill:var(--orange);stroke:#000;stroke-width:2}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
h2{font-size:clamp(52px,9vw,140px);text-wrap:balance}
.outline{color:transparent;-webkit-text-stroke:2px var(--orange)}

/* buttons */
.btn{display:inline-block;font:600 15px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  padding:16px 24px;border:1px solid var(--orange);background:var(--orange);color:var(--ink);cursor:pointer;border-radius:2px;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--white);border-color:var(--white);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--white);border-color:#6b6b6b}
.btn--ghost:hover{background:transparent;border-color:var(--orange);color:var(--orange)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--white);border-color:var(--white);color:var(--ink)}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);background:#0b0b0b;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%}
.brand span{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.nav ul{display:flex;gap:clamp(14px,2.6vw,34px)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:max(100svh,660px);padding-top:var(--head);overflow:hidden;background:var(--ink);isolation:isolate}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(46% 62% at 72% 50%,rgba(255,42,18,.34),rgba(255,42,18,.10) 55%,transparent 75%)}
body[data-lights=on] .hero-glow{opacity:1}
.hero-type{--fs:min(28vw,38svh);font-size:var(--fs);line-height:.76;pointer-events:none}
.hero-type .l{position:absolute;display:block;white-space:nowrap;left:-.035em;top:calc(var(--head) + 1.5svh);z-index:1;will-change:transform}
.hero-type .l2{left:.45em;top:calc(var(--head) + 1.5svh + var(--fs) * .78);z-index:3}
.hero-type .stripe{background:repeating-linear-gradient(to bottom,#f1efe9 0 7px,transparent 7px 9px);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-type .outline{-webkit-text-stroke:3px var(--orange);background:repeating-linear-gradient(to bottom,rgba(255,106,0,.42) 0 3px,transparent 3px 7px);-webkit-background-clip:text;background-clip:text}
.hero-rotor{position:absolute;z-index:2;right:2vw;top:calc(var(--head) + 3svh);width:min(84svh,56vw);aspect-ratio:1;will-change:transform}
.hero-rotor img,.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .12s linear}
.r-lit{opacity:0}
body[data-lights=on] .r-lit{opacity:1}
body[data-lights=on] .r-unlit{opacity:0}
body[data-lights=on] .hero-rotor,body[data-lights=on] .swap{filter:drop-shadow(0 0 70px rgba(255,42,18,.45))}
.hero-rotor .head{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--orange);opacity:0}
.hero-copy{position:absolute;z-index:3;left:var(--pad);bottom:clamp(84px,12svh,120px);max-width:min(30em,46vw)}
.hero-copy .hand{margin-bottom:14px}
.hero-copy .lead{font-size:clamp(17px,1.5vw,20px);color:#e1dfd9;text-shadow:0 2px 18px #000,0 0 6px #000}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-side{position:absolute;z-index:3;right:var(--pad);bottom:clamp(84px,12svh,120px);display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* hero build animation: stepped clip, like layers going down */
@keyframes build{from{clip-path:inset(99.6% 0 0 0)}to{clip-path:inset(-80px -80px -80px -80px)}}
@keyframes head{0%{bottom:0;opacity:1}98%{opacity:1}100%{bottom:100%;opacity:0}}
@keyframes slide{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.js .hero-rotor{clip-path:inset(99.6% 0 0 0);animation:build 1.5s steps(30,end) .25s forwards}
html.js .hero-rotor .head{animation:head 1.5s steps(30,end) .25s forwards}
html.js .hero-type .l{clip-path:inset(99.6% 0 0 0);animation:build 1s steps(22,end) forwards}
html.js .hero-type .l1{animation-delay:.1s}
html.js .hero-type .l2{animation-delay:.45s}
html.js .hero-copy>*,html.js .hero-side>*{opacity:0;animation:fadeup .7s ease-out forwards}
html.js .hero-copy .lead{animation-delay:1.3s}html.js .hero-copy .hand{animation-delay:1.1s}html.js .hero-copy .cta{animation-delay:1.5s}
html.js .hero-side>*{animation-delay:1.7s}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- MARQUEE ---------- */

/* ---------- SHOP RAIL ---------- */
.rail{background:var(--ink);position:relative;overflow-x:clip}
.intro{padding:clamp(56px,8vw,96px) var(--pad) 24px;max-width:1240px;margin:0 auto}
.intro h2{margin:16px 0 20px}
.intro-note{color:var(--muted-dark);max-width:30em;font-size:16px}
.panel{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(40px,6vw,72px) var(--pad);border-top:1px solid var(--line);max-width:1240px;margin:0 auto}
.p-text h3{font-size:clamp(44px,5.4vw,84px);line-height:.88}
.p-price{display:flex;align-items:baseline;gap:12px;margin:18px 0 16px;color:var(--orange)}
.p-price b{font:700 clamp(64px,8vw,120px)/.85 var(--display);letter-spacing:0}
.p-price small{font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.p-desc{color:#d2d0ca;font-size:16px;max-width:27em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.variants{border:0;display:grid;grid-template-columns:1fr 1fr;margin-top:20px;max-width:30em}
.variants legend{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);padding:0;margin-bottom:8px}
.variants label{position:relative;cursor:pointer}
.variants input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.variants span{display:block;border:1px solid #666;padding:11px 12px;font-size:14px;line-height:1.25;height:100%;transition:background .15s,border-color .15s}
.variants label+label span{border-left:0}
.variants b{display:block;font:500 15px/1.3 var(--mono);color:var(--orange)}
.variants input:checked+span{background:var(--white);color:var(--ink);border-color:var(--white)}
.variants input:checked+span b{color:var(--orange-text)}
.variants input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.p-stage{position:relative;display:grid;place-items:center;min-height:clamp(380px,60vw,560px)}
.cut,.soon{position:relative;z-index:1;height:calc(var(--cap,420px) * var(--s,1));max-width:92%;width:auto;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.65));will-change:transform}
.cut.swap{aspect-ratio:1;height:calc(var(--cap,420px) * var(--s,1));filter:none}
body[data-lights=on] .cut.swap{filter:drop-shadow(0 0 60px rgba(255,42,18,.4))}
.cut img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.panel{--cap:min(66vw,460px)}
.panel--hot{background:var(--orange);color:var(--ink);border-top-color:#000}
.panel--hot .p-price,.panel--hot .p-price small{color:var(--ink)}
.panel--hot .p-desc{color:#1a1006}
.panel--hot .p-num{-webkit-text-stroke-color:rgba(0,0,0,.28)}
.panel--hot .plate{background-image:linear-gradient(rgba(0,0,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.5) 1px,transparent 1px)}
.panel--hot .btn--ink:hover{color:var(--ink)}
.rail-hud{display:none}

/* pinned horizontal mode (desktop, motion allowed) */
.rail.pin .rail-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.rail.pin .track{display:flex;align-items:stretch;height:100%;width:max-content;padding-top:var(--head);will-change:transform}
.rail.pin .intro{flex:0 0 min(56vw,760px);margin:0;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:0 3vw 0 var(--pad)}
.rail.pin .panel{flex:0 0 min(84vw,1180px);max-width:none;margin:0;height:100%;border-top:0;border-left:1px solid var(--line);padding:3vh 3vw 9vh;--cap:min(58vh,520px)}
.rail.pin .panel--hot{border-left-color:#000}
.rail.pin .p-stage{min-height:0;height:100%}
.rail.pin .p-text h3{font-size:clamp(44px,min(5.2vw,9vh),92px)}
.rail.pin .p-price b{font-size:clamp(64px,min(8vw,15vh),130px)}
.rail.pin .rail-hud{display:flex;align-items:center;gap:16px;position:absolute;left:var(--pad);right:var(--pad);bottom:18px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted-dark)}
.rail-count b{color:var(--orange);font-weight:500}

/* ---------- layer reveals ---------- */
html.js .layers{clip-path:inset(99.6% 0 0 0)}
html.js .layers.in{animation:build .9s steps(16,end) forwards}

/* ---------- CUSTOM ---------- */
.custom{background:var(--orange);color:var(--ink);padding:clamp(64px,9vw,128px) 0;position:relative;overflow:hidden}
.custom .wrap{position:relative}
.custom h2{font-size:clamp(64px,13vw,210px);line-height:.82;margin:18px 0 clamp(32px,5vw,64px)}
.custom-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.custom .lead{font-size:clamp(18px,1.7vw,22px);max-width:30em;font-weight:500}

/* ---------- ABOUT ---------- */
.about{background:var(--paper);color:var(--ink);padding:clamp(64px,9vw,128px) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:center}
.about h2{font-size:clamp(48px,6.6vw,104px);margin:16px 0 24px}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink);padding:clamp(64px,9vw,128px) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{font-size:clamp(56px,8vw,128px);margin:16px 0 22px}
.contact .lead{color:#d2d0ca;max-width:26em}
.direct{margin-top:28px;border-top:1px solid var(--line);padding-top:14px;font-size:15px;color:var(--muted-dark)}
.direct a{color:var(--white);font-weight:600;word-break:break-all}
.direct a:hover{color:var(--orange)}
form{display:grid;gap:20px}
.field{display:grid;gap:7px}
.field .opt{color:var(--muted-dark);text-transform:none;letter-spacing:.02em}
input,select,textarea{font:400 17px/1.3 var(--body);color:var(--white);background:var(--ink-2);border:1px solid #4a4a4a;border-radius:2px;padding:14px;width:100%}
input::placeholder,textarea::placeholder{color:#7b7a76}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.status{font-size:15px;min-height:1.5em}
.status.ok{color:#6fd68a}.status.err{color:#ff8a7a}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.foot-grid .brand span{font-size:28px}
.foot-grid p{color:var(--muted-dark);font-size:15px;margin-top:14px;max-width:22em}
.foot-grid li{border-top:1px solid var(--line)}
.foot-grid li:last-child{border-bottom:1px solid var(--line)}
.foot-grid li a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;text-decoration:none;font-size:15px}
.foot-grid li a span{color:var(--muted-dark);font-family:var(--mono);font-size:13px;text-align:right}
.foot-grid li a:hover,.foot-grid li a:hover span{color:var(--orange)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .panel{grid-template-columns:1fr}
  .p-stage{order:-1}
  .custom-grid,.contact-grid,.about-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>:first-child{grid-column:1/-1}
  .hero-copy{max-width:min(30em,52vw)}
}
@media (max-width:760px){
  body{font-size:16px}
  .site-header{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:0;row-gap:2px}
  :root{--head:96px}
  .brand img{width:38px;height:38px}
  .brand span{font-size:22px}
  .nav{width:100%;border-top:1px solid var(--line)}
  .nav ul{justify-content:space-between}
  .nav a{display:block;padding:11px 0}
  .hero{min-height:0;display:flex;flex-direction:column;padding-bottom:28px}
  .hero-type{--fs:37vw;position:relative;height:calc(var(--fs) * 1.56);margin-top:14px;flex:none}
  .hero-type .l{top:0}
  .hero-type .l2{left:.1em;top:calc(var(--fs) * .78)}
  .hero-type .stripe{background-image:repeating-linear-gradient(to bottom,#f1efe9 0 5px,transparent 5px 7px)}
  .hero-type .outline{-webkit-text-stroke-width:2px}
  .hero-rotor{position:relative;right:auto;top:auto;width:92vw;margin:-6vw auto 0;align-self:center}
  .hero-copy{position:relative;left:auto;bottom:auto;max-width:none;padding:0 var(--pad);margin-top:-2vw}
  .hero-side{position:relative;right:auto;bottom:auto;align-items:flex-start;padding:22px var(--pad) 0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 20px}
  .outline{-webkit-text-stroke-width:1.5px}
  .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .variants span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .layers,html.js .hero-rotor,html.js .hero-type .l{clip-path:none}
  html.js .rv,html.js .hero-copy>*,html.js .hero-side>*{opacity:1;transform:none}
  .m-track{animation:none!important}
}

/* ==========================================================================
   v3: the hand-made layer. Margin notes, tape, stickers, spool, nozzle.
   ========================================================================== */
@font-face{font-family:'Reenie Beanie';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ReenieBeanie.woff2') format('woff2');}
:root{--hand:'Reenie Beanie','Segoe Print','Bradley Hand',cursive;--acc:var(--orange)}
body[data-lights=on]{--acc:#ff3a1c}
::selection{background:var(--orange);color:#000}
html{scrollbar-color:var(--orange) #111;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#111}
::-webkit-scrollbar-thumb{background:repeating-linear-gradient(to bottom,var(--orange) 0 6px,#c85200 6px 8px);border:2px solid #111}
.custom :focus-visible,.panel--hot :focus-visible,.about :focus-visible{outline-color:#000}

.hand{font:400 clamp(30px,3.2vw,46px)/.9 var(--hand);color:var(--orange);display:inline-block;transform:rotate(-3deg);margin-bottom:10px;letter-spacing:.01em}
.custom .hand{color:var(--ink)}
.about .hand{color:var(--orange-text)}
.foot-grid h2.hand{font:400 32px/.9 var(--hand);text-transform:none;color:var(--orange);margin-bottom:12px;letter-spacing:.01em}
.nav a{font:600 17px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:10px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--orange);border-color:var(--orange)}
.cue{font:400 28px/1 var(--hand);color:#c9c8c2;text-shadow:0 0 8px #000;transform:rotate(-2deg)}
.legal{margin-top:36px;font-size:14px;color:var(--muted-dark);max-width:48em}
.field label{font:400 28px/.9 var(--hand);color:var(--orange);letter-spacing:.01em}
.field .opt{color:var(--muted-dark)}
.outline{-webkit-text-stroke:2px var(--orange)}
.hero-copy .hand{margin-bottom:8px}

/* margin notes */
.ar{stroke:var(--orange);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;width:64px;height:48px;flex:none;overflow:visible}
.note{position:absolute;left:var(--x,0);top:var(--y,0);z-index:4;display:flex;align-items:flex-start;gap:4px;max-width:11.5em;margin:0;font:400 clamp(26px,2.3vw,34px)/.88 var(--hand);color:#f1efe9;transform:rotate(var(--r,-4deg));pointer-events:none}
.note[hidden]{display:none}
.note--dark{color:#000}
.note--dark .ar{stroke:#000}
.note--static{position:static;display:inline-flex;margin-top:22px;--r:-3deg}
.note--hero{position:static;margin:0 70px -4px 0;--r:-5deg;color:#f1efe9}
.note--hero.used{display:none}
.note--led{position:static;margin-left:6px;--r:-4deg;align-self:center}
.note--led .ar{transform:scaleX(-1) rotate(70deg) translate(6px,-12px)}

/* tape */
.tape::before,.tape::after{content:"";position:absolute;z-index:5;height:20px;background:rgba(232,222,186,.74);box-shadow:0 1px 3px rgba(0,0,0,.25);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%)}
.tape::before{width:64px;top:-9px;left:calc(50% - 40px);transform:rotate(-5deg)}
.tape::after{width:44px;bottom:6px;right:-18px;transform:rotate(-52deg)}
.inset{position:absolute;z-index:3;right:var(--ix,-2%);bottom:var(--iy,0);width:clamp(130px,27%,196px);background:#f1efe9;padding:6px 6px 0;transform:rotate(var(--r,2deg));box-shadow:0 12px 24px rgba(0,0,0,.55);color:#111}
.inset img{width:100%;aspect-ratio:4/5;object-fit:cover}
.inset figcaption{font:400 22px/.9 var(--hand);padding:5px 2px 8px;color:#1b1b1b}

/* rocker switch */
.lights{display:inline-flex;align-items:center;gap:12px;background:#111;border:1px solid #555;color:var(--white);padding:10px 16px 10px 12px;font:600 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:3px}
.lights:hover{border-color:var(--orange)}
.lights b{color:var(--orange);font-weight:600}
.rocker{position:relative;width:46px;height:24px;border-radius:12px;background:#222;border:2px solid #6a6a6a;flex:none;transition:background .15s,border-color .15s}
.rocker i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#aaa;transition:transform .12s steps(3),background .12s}
body[data-lights=on] .rocker{background:#4a0d06;border-color:var(--led)}
body[data-lights=on] .rocker i{transform:translateX(22px);background:var(--led);box-shadow:0 0 12px var(--led)}
body[data-lights=on] .lights b{color:#ff6a50}
.lights--mini{padding:13px 16px 13px 12px}

/* nozzle cursor + trail (hero only) */
.nozzle-cursor{position:fixed;left:0;top:0;z-index:70;width:0;height:0;pointer-events:none;opacity:0;will-change:transform}
.nozzle-cursor.on{opacity:1}
.nozzle-cursor i{position:absolute;left:-10px;top:-24px;width:20px;height:24px;background:var(--acc);clip-path:polygon(0 0,100% 0,100% 52%,64% 100%,36% 100%,0 52%)}
.nozzle-cursor i::before{content:"";position:absolute;left:-3px;top:-13px;width:26px;height:13px;background:#cfcfca}
html.nozzle .hero{cursor:none}
html.nozzle .hero a,html.nozzle .hero button{cursor:pointer}
.trail{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
@media (hover:none),(pointer:coarse){.nozzle-cursor,.trail{display:none}}

/* filament line + spool meter */
.filament .core{stroke:var(--acc)}
.filament .nozzle{fill:var(--acc)}
.spool{position:fixed;left:12px;bottom:12px;z-index:58;display:flex;align-items:center;gap:10px;background:var(--ink);border:1px solid var(--line);padding:6px 14px 6px 6px}
.spool svg{width:46px;height:46px;display:block;flex:none}
.spool .fil{fill:var(--acc)}
.spool .flange{fill:none;stroke:#cfcfca;stroke-width:2.4}
.spool .core{fill:var(--ink);stroke:#555;stroke-width:1.5}
.spool .spk{stroke:#777;stroke-width:3.5;stroke-linecap:round}
.spool .turn{transform-origin:32px 32px;transform-box:view-box}
.sp-t{font:400 25px/.9 var(--hand);color:#dcdbd5}
.sp-t b{color:var(--acc);font-weight:400}
.sp-done{color:var(--acc)}
.sp-t[hidden]{display:none}

/* tapes (replace the plain marquee) */
.tapes{position:relative;height:clamp(150px,16vw,220px);overflow:hidden;background:var(--ink)}
.tape-a,.tape-b{position:absolute;left:-6%;right:-6%;white-space:nowrap;overflow:hidden}
.tape-a{top:20%;z-index:2;transform:rotate(-1.6deg);background:var(--orange);color:var(--ink);box-shadow:0 10px 22px rgba(0,0,0,.6)}
.tape-b{top:50%;z-index:1;transform:rotate(1.3deg);background:#f1efe9;color:var(--ink);box-shadow:0 8px 18px rgba(0,0,0,.6)}
.tape-b::before,.tape-b::after{content:"";position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(-45deg,#0b0b0b 0 10px,transparent 10px 20px)}
.tape-b::before{top:0}.tape-b::after{bottom:0}
.m-track{display:inline-flex;align-items:center;gap:28px;padding:12px 0;will-change:transform}
.tape-a span{font:700 clamp(34px,5vw,64px)/1 var(--display);text-transform:uppercase}
.tape-a i{width:14px;height:14px;background:var(--ink);flex:none}
.m-track--b{padding:16px 0 14px;gap:36px}
.tape-b span{font:600 clamp(20px,2.4vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.14em}
.tape-b span::after{content:"";display:inline-block;width:10px;height:10px;background:var(--orange);transform:rotate(45deg);margin-left:36px}

/* shop panels: each one gets its own personality */
.rail.pin .panel{flex:0 0 var(--w,min(84vw,1180px))}
.arrow{display:none}
.rail.pin .arrow{display:block;margin-top:30px;font:400 38px/1 var(--hand);color:var(--orange);transform:rotate(-2deg)}
.panel{position:relative}
.panel.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.panel.flip .p-text{order:2}
.actions{position:relative;align-items:center}
.p-price small{font:400 34px/1 var(--hand);letter-spacing:0;text-transform:none;color:#b9b8b2;transform:rotate(-4deg);display:inline-block}
.panel--hot .p-price small{color:#000}
.p-num{position:absolute;z-index:0;left:var(--nx,0);top:var(--ny,-2%);font:700 clamp(150px,24vw,340px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2);transform:rotate(var(--nr,0deg));pointer-events:none;user-select:none}
[data-product=ledLights] .p-num{--nx:auto;--ny:auto;right:-8%;bottom:-8%;-webkit-text-stroke-color:rgba(255,58,28,.4)}
[data-product=legos] .p-num{--nx:26%;--ny:-4%;--nr:-6deg;color:rgba(255,106,0,.1);-webkit-text-stroke:0}
[data-product=cardHolders] .p-num{--nx:auto;right:-4%;--ny:-8%;--nr:4deg;-webkit-text-stroke-color:rgba(255,106,0,.5)}
[data-product=lifesize] .p-num{--nx:auto;right:-6%;--ny:auto;bottom:-10%;-webkit-text-stroke-color:rgba(0,0,0,.35)}
[data-product=penHolder] .p-num{--nx:6%;--ny:34%;--nr:-9deg;-webkit-text-stroke-color:rgba(255,255,255,.28)}
[data-product=lightBoxes] .p-num{--nx:auto;right:2%;--ny:-6%;--nr:3deg;-webkit-text-stroke-color:rgba(255,106,0,.45)}
.panel--hot .p-num{-webkit-text-stroke-color:rgba(0,0,0,.35)}
.plate{position:absolute;z-index:0;left:50%;bottom:7%;width:112%;height:40%;transform:translateX(-50%) perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,106,0,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,106,0,.6) 1px,transparent 1px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);pointer-events:none}
body[data-lights=on] .panel--led .plate{background-image:linear-gradient(rgba(255,58,28,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(255,58,28,.75) 1px,transparent 1px)}
body[data-lights=on] .panel--led{background:radial-gradient(55% 70% at 28% 55%,rgba(255,42,18,.22),transparent 72%)}
[data-product=kaws] .plate{background-size:24px 24px}
[data-product=penHolder] .plate{width:90%;bottom:18%;background-size:20px 20px}
[data-product=penHolder] .cut{transform:rotate(-7deg)}
[data-product=legos] .plate{background-size:48px 48px;width:120%}
[data-product=cardHolders] .p-stage::before{content:"";position:absolute;inset:6% 4% 8% 6%;border:1px dashed rgba(255,106,0,.45);z-index:0}
[data-product=cardHolders] .p-stage::after{content:"+";position:absolute;left:3%;top:3%;font:400 30px/1 var(--hand);color:var(--orange)}
.panel--hot .plate{background-image:linear-gradient(rgba(0,0,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.5) 1px,transparent 1px)}
.ruler{position:absolute;z-index:0;left:2%;top:8%;bottom:10%;width:38px;border-right:2px solid #000;
  background:linear-gradient(#000,#000) right 0 top 0/16px 2px repeat-y,linear-gradient(#000,#000) right 0 top 0/30px 2px repeat-y;
  background-image:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 22px),repeating-linear-gradient(to bottom,#000 0 3px,transparent 3px 110px);
  background-size:16px 100%,32px 100%;background-position:right top,right top;background-repeat:no-repeat}
.panel--hot .p-text h3{font-size:clamp(52px,6.4vw,104px)}

/* unprint on hover: the cutout slices into print layers */
@property --on{syntax:'<length>';inherits:true;initial-value:9px}
.cut{--on:9px;-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px);transition:--on .5s steps(7)}
.p-stage:hover .cut,.cut.sliced{--on:3px}

/* light box panel */
.panel--box .p-stage{min-height:clamp(340px,50vw,520px)}
.panel--box .cut{--cap:480px}

/* reveals use the same stepped "layers" as the images, not a fade */
html.js .rv{clip-path:inset(99.6% 0 0 0)}
html.js .rv.in{animation:build .75s steps(10,end) var(--d,0s) forwards}

/* custom band */
.custom::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 6px);pointer-events:none}
.custom h2{font-size:clamp(64px,13vw,210px);line-height:.82;margin:18px 0 clamp(32px,5vw,64px)}
.custom h2 span{display:block;color:transparent;-webkit-text-stroke:3px var(--ink);margin-left:.9em}
.custom-grid{align-items:center}
.c-text p+p{margin-top:18px;font-size:18px;max-width:30em;color:#1a1006}
.c-text .btn{margin-top:10px}
.g12{margin:0;padding:0 0 0 6%}
.g12-frame{position:relative;background:var(--ink);padding:10px;transform:rotate(-2.2deg);box-shadow:12px 12px 0 var(--ink)}
.g12-frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.g12 .note{font-size:clamp(28px,2.6vw,38px)}
.g12 .ar{transform:scaleX(-1) rotate(-20deg)}

/* about: sticker cabinet */
.about h2 span.outline{display:block}
.about .outline{-webkit-text-stroke:2px var(--ink)}
.about p{max-width:30em;color:#262622}
.about p+p{margin-top:14px}
.cabinet{position:relative;margin:0;aspect-ratio:5/4.2;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(112deg,#191919 0 46%,#222 46% 47%,#121212 47%);
  box-shadow:inset 0 0 0 7px #0b0b0b,12px 12px 0 var(--ink);transform:rotate(1.3deg);overflow:hidden}
.stk{position:absolute;display:grid;place-items:center;text-align:center;font:700 clamp(16px,2.1vw,28px)/.95 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:.4em .7em;transform:rotate(var(--r,0deg));box-shadow:0 1px 0 rgba(0,0,0,.5),0 6px 10px rgba(0,0,0,.5);color:#111;background:#f1efe9}
.stk em{font-style:normal;color:var(--orange-text)}
.s-logo{--r:-9deg;left:6%;top:8%;width:30%;aspect-ratio:1;padding:0;border-radius:50%;background:#f1efe9;overflow:hidden;border:5px solid #f1efe9}
.s-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.s-nova{--r:4deg;left:42%;top:9%;background:var(--orange);font-size:clamp(22px,3.2vw,44px);padding:.35em .6em}
.s-lines{--r:-3deg;left:47%;top:36%;max-width:44%}
.s-lights{--r:5deg;left:7%;top:49%;background:#0b0b0b;color:#fff;border:2px solid var(--led);grid-auto-flow:column;gap:.5em;padding:.45em .9em}
.s-lights i{width:.6em;height:.6em;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led)}
.s-spag{--r:-6deg;left:33%;top:60%;color:var(--orange-text)}
.s-warm{--r:3deg;left:5%;top:73%;background:transparent;color:var(--orange);border:2px dashed var(--orange);box-shadow:none;font-size:clamp(14px,1.8vw,24px)}
.s-inj{--r:-4deg;right:4%;bottom:7%;font-size:clamp(13px,1.6vw,21px)}
.s-ask{--r:8deg;right:6%;top:52%;width:21%;aspect-ratio:1;border-radius:50%;background:var(--orange);padding:.2em;font-size:clamp(14px,1.8vw,24px)}
.s-rp{--r:-12deg;right:30%;bottom:3%;width:11%;aspect-ratio:1;border-radius:50%;background:#0b0b0b;color:#fff;border:2px solid #fff;padding:0;font-size:clamp(16px,2vw,28px)}

/* footer: the print failure */
.foot-type{display:block;width:100%;position:relative;margin:clamp(12px,3vw,40px) 0 0;padding:0;border:0;background:none;color:inherit;height:14.4vw;overflow:hidden;white-space:nowrap;font:700 21vw/.76 var(--display);text-transform:uppercase;text-align:center;cursor:pointer}
.foot-type>span{display:block;margin-left:-.02em;background:repeating-linear-gradient(to bottom,var(--orange) 0 7px,transparent 7px 9px);-webkit-background-clip:text;background-clip:text;color:transparent;transform-origin:50% 100%}
.fail-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.fail-svg path{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.fail-msg{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-3deg);font:400 clamp(30px,5vw,64px)/1 var(--hand);color:#fff;background:var(--ink);padding:2px 16px;opacity:0;white-space:nowrap;text-transform:none}
.foot-type.fail>span{animation:shift 1.1s steps(1) forwards}
.foot-type.fail .fail-svg{opacity:1}
.foot-type.fail .fail-svg path{animation:draw 1.4s ease-out forwards}
.foot-type.fail .fail-msg{opacity:1}
@keyframes shift{0%{transform:none}14%{transform:translateX(2%)}28%{transform:translateX(-4%) skewX(-6deg)}44%{transform:translateX(6%) skewX(4deg)}60%{transform:translateX(5%) skewX(9deg) scaleY(.96)}100%{transform:translateX(7%) skewX(14deg) scaleY(.9)}}

/* responsive */
@media (max-width:980px){
  .panel.flip{grid-template-columns:1fr}
  .inset{right:0}
  .g12{padding:0 3%}
  .note--led{display:none}
}
@media (max-width:760px){
  .note{font-size:24px;max-width:9em}
  .ar{width:46px;height:36px}
  .hero-side{padding-top:34px}
  .note--hero{margin-right:20px}
  .hero-copy .hand{font-size:32px}
  .tapes{height:150px}
  .cabinet{aspect-ratio:1/1.05}
  .custom h2 span{margin-left:.4em}
  .foot-grid h2.hand{font-size:30px}
  .nav a{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .layers{clip-path:none}
  html.js .sp path{stroke-dashoffset:0!important}
  .cut{transition:none}
  .foot-type.fail>span{transform:translateX(5%) skewX(10deg)}
  .foot-type.fail .fail-svg path{stroke-dashoffset:0}
}

/* the swap box masks its images, not itself, so the LED glow isn't clipped to a square */
.cut.swap{-webkit-mask-image:none;mask-image:none}
.cut.swap img{-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px)}
/* masks clip shadows into visible rectangles, so the cutouts carry none; the build plate grounds them */
.cut,.cut img{filter:none}
.hero-copy p,.hero-copy .hand{text-shadow:0 0 10px #0b0b0b,0 0 3px #0b0b0b}

/* ==========================================================================
   v4: "starting at" prices and the Fresh Off the Bed photo section
   ========================================================================== */
.p-price{flex-wrap:wrap}
.variants b{font-size:14px}
@media (max-width:760px){.p-price small{font-size:30px}}

.fresh{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(60px,8vw,110px);border-top:1px solid var(--line);overflow:hidden;
  background:#0d0d0d radial-gradient(circle,#252525 2.4px,transparent 3.3px) 7px 11px/38px 38px}
.fresh-head{position:relative}
.fresh h2{font-size:clamp(56px,10vw,160px);line-height:.84;margin:16px 0 18px}
.fresh h2 .outline{display:inline-block;margin-left:.12em}
.fresh-lead{max-width:29em;color:var(--muted-dark);font-size:clamp(16px,1.5vw,19px)}
.fresh-note{position:absolute;left:auto;right:calc(var(--pad) + 12%);top:auto;bottom:8px;margin:0;--r:5deg;color:#f1efe9;max-width:8em}
.fresh-ns{padding:24px var(--pad);color:var(--muted-dark)}
.fresh-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(44px,6vw,88px)}
.fresh-cta .hand{font-size:clamp(28px,2.6vw,38px);color:var(--orange);transform:rotate(-2deg);margin:0}

.pw{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,2vw,28px);row-gap:clamp(34px,5vw,72px);
  max-width:1320px;margin:clamp(44px,6vw,84px) auto 0;padding:0 var(--pad);align-items:start}
.pi{position:relative;margin:var(--mt,0) 0 0;transform:rotate(var(--r,0deg));min-width:0}
.pi-ph{position:relative;z-index:1}
.pi-ph>img{display:block;width:100%;height:auto;--on:9px;
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--on),transparent var(--on) 9px);transition:--on .5s steps(7)}
.pi:hover .pi-ph>img,.pi:focus-within .pi-ph>img,.pi-ph>img.sliced{--on:3px}
.pi figcaption{position:relative;z-index:2;padding-top:10px}
.pi-cap{display:block;font:400 clamp(26px,2.3vw,34px)/.9 var(--hand);color:#f1efe9;transform:rotate(-1.5deg);transform-origin:left top}
.pi-note{display:flex;align-items:flex-start;gap:2px;margin:4px 0 0 .8em;font:400 clamp(22px,1.9vw,28px)/.9 var(--hand);color:var(--orange);transform:rotate(2.5deg)}
.pi-note .ar{width:42px;height:32px;margin-top:-6px}
.pi-ask{display:inline-block;text-wrap:balance;margin-top:8px;font:400 clamp(22px,1.9vw,27px)/1 var(--hand);color:#b9b8b2;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px;transform:rotate(-1deg)}
.pi-ask:hover{color:var(--orange)}

/* four ways to stick a photo to a wall, so they don't all look alike */
.pi--tape .pi-ph{box-shadow:0 14px 26px rgba(0,0,0,.6)}
.pi--pin .pi-ph{border:6px solid #e9e6dc;box-shadow:0 14px 26px rgba(0,0,0,.6)}
.pi--pin .pi-ph::before{content:"";position:absolute;z-index:6;top:-13px;left:calc(50% - 11px);width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffb08a 0 14%,var(--acc) 15% 62%,#a52a00 100%);box-shadow:3px 6px 6px rgba(0,0,0,.5)}
.pi--paper{background:#f1efe9;padding:10px 10px 14px;box-shadow:0 14px 26px rgba(0,0,0,.6)}
.pi--paper figcaption{padding-top:8px}
.pi--paper .pi-cap{color:#161616}
.pi--paper .pi-note{color:#b94700}
.pi--paper .ar{stroke:#b94700}
.pi--paper .pi-ask{color:#333}
.pi--bare .pi-ph{box-shadow:11px 11px 0 var(--acc)}

/* no two neighbours the same size; the pattern repeats every ten, so adding more photos just keeps going */
.pi:nth-child(10n+1){grid-column:1/span 4;--r:-2deg}
.pi:nth-child(10n+2){grid-column:6/span 4;--r:1.6deg;--mt:70px}
.pi:nth-child(10n+3){grid-column:10/span 3;--r:-1deg;--mt:10px}
.pi:nth-child(10n+4){grid-column:2/span 3;--r:2deg;--mt:10px}
.pi:nth-child(10n+5){grid-column:5/span 5;--r:-1.2deg;--mt:-30px}
.pi:nth-child(10n+6){grid-column:10/span 3;--r:2.5deg;--mt:40px}
.pi:nth-child(10n+7){grid-column:1/span 3;--r:-3deg;--mt:20px}
.pi:nth-child(10n+8){grid-column:4/span 3;--r:1deg;--mt:-20px}
.pi:nth-child(10n+9){grid-column:7/span 3;--r:-2deg;--mt:70px}
.pi:nth-child(10n+10){grid-column:10/span 3;--r:1.4deg;--mt:46px}

@media (max-width:980px){
  .pw{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pi:nth-child(n){--mt:0px}
  .pi:nth-child(odd){grid-column:1/span 4}
  .pi:nth-child(even){grid-column:3/span 4;--mt:-14px}
  .pi:nth-child(5n){grid-column:2/span 5}
  .fresh-note{position:static;margin-top:14px;display:inline-flex}
}
@media (max-width:600px){
  .pi:nth-child(odd){grid-column:1/span 5}
  .pi:nth-child(even){grid-column:2/span 5}
  .pi:nth-child(5n){grid-column:1/span 6}
}
@media (prefers-reduced-motion:reduce){.pi-ph>img{transition:none}}

.fresh-note .tap{display:none}
@media (hover:none){.fresh-note .hov{display:none}.fresh-note .tap{display:inline}}

@keyframes draw{to{stroke-dashoffset:0}}

/* v6: the spool meter is a desktop toy. On phones and tablets it was an unlabeled black square over the content, so it's gone. */
@media (hover:none),(pointer:coarse),(max-width:820px){.spool{display:none!important}}

/* v6: lifesize ruler. JS sizes it to the cylinder so the top tick is 4 ft and every foot is a quarter of the height. */
[data-product=lifesize] .ruler{--ft:96px;top:var(--rt,8%);bottom:auto;height:var(--rh,82%);width:40px;border-right:3px solid #000;
  background-image:repeating-linear-gradient(to top,#000 0 3px,transparent 3px var(--ft)),repeating-linear-gradient(to top,#000 0 2px,transparent 2px calc(var(--ft)/2)),repeating-linear-gradient(to top,#000 0 2px,transparent 2px calc(var(--ft)/6));
  background-size:36px 100%,24px 100%,12px 100%;background-position:right bottom,right bottom,right bottom;background-repeat:no-repeat}
[data-product=lifesize] .ruler::before{content:"";position:absolute;right:0;top:0;width:36px;height:3px;background:#000}
.rl{position:absolute;left:calc(100% + 8px);font:500 13px/1 var(--mono);letter-spacing:.06em;color:#000;white-space:nowrap;transform:translateY(50%)}
.rl1{bottom:var(--ft)}.rl2{bottom:calc(var(--ft)*2)}.rl3{bottom:calc(var(--ft)*3)}
.rl4{top:0;bottom:auto;transform:translateY(-52%) rotate(-3deg);font:400 clamp(30px,3vw,42px)/.8 var(--hand);letter-spacing:0;padding:0 2px}
.rl4::after{content:"";display:block;height:3px;margin-top:3px;background:#000;transform:rotate(1.5deg)}
@media (max-width:700px){.panel--box .p-stage{min-height:440px}.panel--box .cut{--cap:330px}.panel--box .note:not(.note--extra){--y:0%!important;--x:6%!important}}

/* ==========================================================================
   v7: white-box photos, "as shot" corner snapshots, Customs we made strip, no dead space after the shop
   ========================================================================== */
/* the Fresh photos are cut out and shot on white, so they read as lit product tiles against the dark wall */
.pi-ph{background:#f4f4f2}
.pi--paper{background:#f1efe9}
.pi-ph>img{background:#f4f4f2}
.pi-shot{position:absolute;z-index:5;right:-9%;bottom:-6%;width:34%;background:#f1efe9;padding:4px 4px 0;transform:rotate(5deg);box-shadow:0 8px 16px rgba(0,0,0,.55);pointer-events:none}
.pi-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;-webkit-mask-image:none;mask-image:none}
.pi-shot i{display:block;font:400 18px/1 var(--hand);color:#1b1b1b;padding:3px 2px 5px;font-style:normal;text-align:center}
.pi:nth-child(even) .pi-shot{right:auto;left:-9%;transform:rotate(-5deg)}
.pi--pin .pi-shot{right:-12%}
.pi--pin:nth-child(even) .pi-shot{left:-12%;right:auto}

/* Customs we made */
.customs{grid-column:1/-1;min-width:0;position:relative;z-index:2}
.cs-head{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:10px}
.cs-head h4{margin:0;font:400 clamp(30px,2.6vw,40px)/1 var(--hand);color:var(--orange);transform:rotate(-2deg)}
.cs-hint{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.cs-hint .tap{display:none}
@media (hover:none){.cs-hint .hov{display:none}.cs-hint .tap{display:inline}}
.cs-btns{margin-left:auto;display:flex;gap:8px}
.cs-btns button{width:38px;height:38px;border:1px solid #666;background:transparent;color:#f1efe9;font:500 18px/1 var(--mono);cursor:pointer;padding:0}
.cs-btns button:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.cs-btns button:focus-visible,.cs-strip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (hover:none){.cs-btns{display:none}}
.cs-strip{--tile:clamp(110px,min(12vw,16.5vh),176px);list-style:none;margin:0;padding:6px 4px 14px;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--orange) #222}
.cs-strip.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.cs-item{flex:0 0 var(--tile);scroll-snap-align:start;transform:rotate(var(--r,0deg));background:#f4f4f2;padding:0 0 4px;box-shadow:0 10px 20px rgba(0,0,0,.55);color:#161616}
.cs-item img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cs-item span{display:block;font:400 clamp(20px,1.6vw,24px)/.95 var(--hand);padding:5px 8px 4px}
@media (max-width:979px){.cs-strip{--tile:min(46vw,190px)}}

.panel--customs{grid-template-rows:minmax(0,1fr) auto}
.rail.pin .panel--customs{padding-bottom:6.5vh}

/* no dead space after the shop: JS pulls the next section up by whatever empty height the pinned rail has left at the bottom */
.rail.pin{margin-bottom:var(--rail-tuck,0px)}
.rail.pin+.fresh{padding-top:clamp(40px,5vw,72px);border-top:0}
.cs-item.cs-wide{flex-basis:calc(var(--tile)*2 + 16px)}
.cs-item.cs-wide img{aspect-ratio:2/1}
/* lifesize: second photo, the lifesize KAWS, sits above the living-room one */
.inset--b{bottom:calc(var(--iy,0px) + 46%);right:var(--ix,-2%);width:clamp(110px,22%,160px)}
.inset--b img{aspect-ratio:4/5}
@media (max-width:600px){.inset--b{width:96px;bottom:calc(var(--iy,0px) + 52%)}}
.customs.fits .cs-btns,.customs.fits .cs-hint{display:none}

/* ==========================================================================
   v4 copy: Gifts, events and parties section + form additions
   ========================================================================== */
.hero-line{font:700 clamp(26px,2.9vw,42px)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--white);margin:0 0 14px;max-width:15em}
.hero-copy .lead{max-width:27em}
.hero-copy .cta{margin-top:20px}

.occ{background:var(--ink);padding:clamp(56px,8vw,112px) 0 clamp(40px,6vw,80px);position:relative}
.occ h2{font-size:clamp(60px,9.4vw,152px);line-height:.84;margin:12px 0 22px}
.occ h2 .outline{display:block;margin-left:.6em;-webkit-text-stroke:3px var(--orange)}
.occ-lead{color:#d2d0ca;max-width:30em;font-size:clamp(18px,1.7vw,22px)}
.occ-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,4vw,52px)}
.occ-card{position:relative;background:var(--ink-2);border:1px solid #3a3a3a;border-top:6px solid var(--orange);padding:22px 22px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,border-color .18s}
.occ-card:nth-child(even){border-top-color:var(--paper)}
.occ-card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:var(--orange)}
.occ-n{position:absolute;right:16px;top:8px;font:700 64px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
.occ-card h3{font-size:clamp(26px,2.4vw,34px);line-height:.95;max-width:8em;color:var(--white)}
.occ-card p{color:#d2d0ca;font-size:16px;line-height:1.5;flex:1}
.occ-card a{align-self:flex-start;font:700 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:3px;margin-top:6px}
.occ-card a:hover{color:var(--white);border-color:var(--white)}
.occ-bulk{margin-top:clamp(18px,2vw,26px);background:var(--orange);color:var(--ink);display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;padding:clamp(20px,2.6vw,34px) clamp(20px,3vw,40px);transform:rotate(-.5deg);box-shadow:0 8px 0 #000}
.occ-bulk h3{font-size:clamp(34px,4vw,56px);margin-bottom:6px;color:var(--ink)}
.occ-bulk p{max-width:34em;font-weight:500;font-size:clamp(16px,1.4vw,19px)}
@media (max-width:980px){.occ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .occ-grid{grid-template-columns:1fr}
  .occ h2 .outline{margin-left:.3em;-webkit-text-stroke-width:2px}
  .occ-bulk{transform:none}
}

/* form additions */
form{color-scheme:dark}
textarea.short{min-height:92px}
.field .hint{font-size:14px;line-height:1.5;color:var(--muted-dark);margin-top:2px}
.field .hint a{color:var(--white);font-weight:600;word-break:break-all}
.field .hint a:hover{color:var(--orange)}
select option{background:var(--ink-2);color:var(--white)}
.occ-bulk{position:relative;padding-right:clamp(190px,24vw,320px)}
.occ-bulk-ph{position:absolute;right:clamp(18px,3vw,40px);top:50%;width:clamp(150px,19vw,250px);margin:0;transform:translateY(-50%) rotate(4deg);background:#f1efe9;padding:6px 6px 0;box-shadow:0 10px 18px rgba(0,0,0,.45)}
.occ-bulk-ph img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.occ-bulk-ph figcaption{font:400 22px/1 var(--hand);color:#161616;padding:4px 4px 6px;text-align:center}
@media (max-width:760px){
  .occ-bulk{padding-right:clamp(20px,3vw,40px);padding-bottom:clamp(20px,3vw,40px)}
  .occ-bulk-ph{position:relative;right:auto;top:auto;width:min(260px,70%);transform:rotate(-2deg);margin:6px auto 0}
}

/* ==========================================================================
   v4b hero: the copy gets its own space under the wordmark, beside the rotor
   ========================================================================== */
@media (min-width:761px){
  .hero{--fs:min(20vw,25svh);display:flex;flex-direction:column;min-height:max(100svh,600px);padding-bottom:clamp(92px,12svh,120px)}
  .hero-type{--fs:inherit;position:relative;flex:none;height:calc(var(--fs) * 1.54 + 1.5svh)}
  .hero-type .l{top:1.5svh}
  .hero-type .l2{top:calc(1.5svh + var(--fs) * .78)}
  .hero-rotor{width:min(78svh,52vw)}
  .hero-copy{position:relative;left:auto;bottom:auto;margin:clamp(16px,3svh,32px) 0 0 var(--pad);
    max-width:min(34em,calc(98vw - min(78svh,52vw) - var(--pad) - 28px))}
  .hero-line{font-size:clamp(24px,2.5vw,38px);max-width:none}
  .hero-copy .hand{font-size:clamp(28px,2.6vw,40px)}
}
/* tablets: the rotor is tall here, so the copy goes under it, full width */
@media (min-width:761px) and (max-width:980px){
  .hero-copy{max-width:36em;margin-top:max(16px,calc(3svh + 52vw - var(--fs) * 1.54 - 1.5svh + 20px))}
  .hero-side{position:relative;right:auto;bottom:auto;top:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:28px var(--pad) 0}
  .note--hero{margin:0}
}

/* the spool badge: icon only, tucked into the left margin so it never sits on text.
   The "% filament left" text shows on hover. */
.spool{left:3px;bottom:10px;padding:0;background:none;border:0;gap:6px}
.spool svg{width:32px;height:32px;filter:drop-shadow(0 0 3px #000)}
.spool .sp-t{position:absolute;left:38px;white-space:nowrap;background:var(--ink);border:1px solid var(--line);padding:5px 9px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;pointer-events:none}
.spool:hover .sp-t{opacity:1;transform:none}
.spool{pointer-events:auto}
@media (max-width:760px){.hero-copy{margin-top:12px}}

/* ===== v5 polish pass ===== */
/* type: no orphans, balanced headings */
p,li,figcaption,.lead,.occ-lead{text-wrap:pretty}
h1,h2,h3,.hero-line,.pi-cap{text-wrap:balance}

/* bigger hit areas without changing the look */
.occ-card a,.pi-ask,.field .hint a,.foot-grid li a,.contact a[href^="mailto"]{position:relative}
.occ-card a::after,.pi-ask::after,.field .hint a::after{content:"";position:absolute;inset:-12px -6px}
.foot-grid li a{min-height:44px}
@media (max-width:760px){
  .nav a{padding:14px 0}
  .brand{min-height:44px}
}
.field .hint a{word-break:normal;overflow-wrap:normal;white-space:nowrap}

/* occasions: numerals never touch the copy, card rhythm lines up */
.occ-card h3{padding-right:76px;max-width:none;min-height:48px}
@media (min-width:761px){.occ-card h3{min-height:1.9em}}
.occ-n{top:10px;font-size:60px}
.occ-card a{margin-top:10px}
.occ-card p{max-width:34em}

/* rail: counter clears the corner spool badge */
.rail.pin .rail-hud{left:max(var(--pad),56px)}

/* lifesize insets: stack cleanly, no caption collisions */
@media (max-width:980px){.inset--b{bottom:calc(var(--iy,0px) + 53%)}}
@media (max-width:600px){.inset--b{width:118px;bottom:calc(var(--iy,0px) + 60%)}.inset--b figcaption{font-size:18px}}

/* about cabinet: stickers no longer pile onto each other */
.s-spag{left:36%;top:64%}
@media (max-width:760px){.s-rp{right:38%}}

/* photo wall */
.pi--shot:nth-child(odd) figcaption{padding-right:27%}
.pi--shot:nth-child(even) figcaption{padding-left:27%}
.pi-shot{right:-5%}
.pi:nth-child(even) .pi-shot{left:-5%}
.pi--pin .pi-shot{right:-7%}
.pi--pin:nth-child(even) .pi-shot{left:-7%}
@media (max-width:760px){.pi-shot{right:-3%;width:32%}.pi:nth-child(even) .pi-shot{left:-3%}.pi--pin .pi-shot{right:-4%}.pi--pin:nth-child(even) .pi-shot{left:-4%}}
.pi-ask{white-space:nowrap}
/* a cycle that ends on two pieces gets them centered instead of a hole on the right */
@media (min-width:981px){
  .pi:nth-child(10n+7):nth-last-child(2){grid-column:2/span 4}
  .pi:nth-child(10n+8):last-child{grid-column:7/span 4;--mt:40px}
}
@media (max-width:600px){.inset--b ~ .note--dark{--x:22%!important;--y:3%!important}}
.foot-type{font-size:19.4vw;height:13.3vw}