/* ==========================================================================
   FUCK ROBOTS — design system
   Matte-black hazard-placard signage x pirate-radio broadcast.
   Semantic color: hazard = the human voice (action). signal = the machine voice.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Chakra Petch';src:url('../fonts/ChakraPetch-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('../fonts/ChakraPetch-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/ArchivoBlack-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('../fonts/MartianMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('../fonts/MartianMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  color-scheme: dark;   /* UA chrome (controls, scrollbars, autofill) must not render light */
  --void:oklch(0.145 0.004 265);
  --steel:oklch(0.205 0.005 265);
  --steel-hi:oklch(0.262 0.006 265);
  --ink:oklch(0.945 0.006 85);
  --ink-2:oklch(0.775 0.008 85);
  --ink-3:oklch(0.585 0.008 85);
  --hazard:oklch(0.682 0.201 38);
  --hazard-lo:oklch(0.600 0.170 38);  /* 4.67:1 with --void; 0.560 measured 3.95:1 and failed AA */
  --signal:oklch(0.820 0.128 195);

  --display:'Chakra Petch',system-ui,sans-serif;
  --heavy:'Archivo Black','Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --tele:'Martian Mono',ui-monospace,monospace;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:88rem;
  --rule:1px solid var(--steel-hi);

  /* semantic z-scale — never arbitrary values */
  --z-base:1; --z-sticky:100; --z-nav:200; --z-backdrop:300; --z-modal:400; --z-toast:500;

  --ease:cubic-bezier(0.16,1,0.3,1); /* ease-out-expo */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}  /* clears the sticky header on in-page jumps */
body{
  background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.6; /* light-on-dark needs the extra room */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:where(h1,h2,h3,h4){font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-0.03em;text-wrap:balance}
p{text-wrap:pretty}

/* focus — always visible, machine-voice */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto}
.bleed{width:100%}

/* ---------- type scale (ratio >=1.25, ceiling 6rem) ---------- */
.t-mega{font-family:var(--heavy);font-size:clamp(3.5rem,13vw,9rem);line-height:0.86;letter-spacing:-0.045em;text-transform:uppercase}
.t-h1{font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-0.035em;text-transform:uppercase}
.t-h2{font-size:clamp(1.875rem,4vw,3.25rem);letter-spacing:-0.03em;text-transform:uppercase}
.t-h3{font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-0.02em}
.t-lead{font-size:clamp(1.0625rem,1.6vw,1.375rem);color:var(--ink-2);max-width:52ch}
.t-body{max-width:70ch;color:var(--ink-2)}

/* telemetry — the ONLY orienting label pattern. Replaces section eyebrows. */
.tele{
  font-family:var(--tele);font-size:0.6875rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--signal);
  display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;
  padding-block:0.75rem;border-top:var(--rule);
}
.tele__dot{width:6px;height:6px;background:var(--hazard);flex:none}
.tele span{white-space:nowrap}
.tele__fill{flex:1 1 auto;height:1px;background:var(--steel-hi);min-width:2rem}

/* ---------- buttons — 0 radius everywhere; hardware, not software ---------- */
.btn{
  --btn-bg:var(--hazard); --btn-fg:var(--void);
  display:inline-flex;align-items:center;gap:0.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--display);font-weight:700;font-size:0.9375rem;
  letter-spacing:0.04em;text-transform:uppercase;
  padding:1rem 1.75rem;border:0;border-radius:0;cursor:pointer;
  transition:background 0.18s var(--ease),transform 0.18s var(--ease);
}
.btn:hover{--btn-bg:var(--hazard-lo)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--void)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in oklab,var(--void) 88%,transparent);backdrop-filter:blur(10px);border-bottom:var(--rule)}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:0.9rem}
.hdr__mark{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap}
.hdr__mark .sl{color:var(--hazard)}
.hdr__nav{display:flex;gap:1.5rem;margin-left:auto;flex-wrap:wrap}
.hdr__list{display:contents;list-style:none;margin:0;padding:0}
.hdr__nav a{font-family:var(--display);font-weight:600;font-size:0.8125rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-2);transition:color 0.15s}
.hdr__nav a:hover,.hdr__nav a[aria-current]{color:var(--ink)}
.hdr__cart{font-family:var(--tele);font-size:0.75rem;color:var(--ink);white-space:nowrap}
.hdr__cart b{color:var(--hazard);font-weight:500}
.hdr__toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--ink-3);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.55rem 0.85rem;border-radius:0;cursor:pointer}
.hdr__toggle:hover{border-color:var(--hazard);color:var(--hazard)}
@media(max-width:860px){
  .hdr__toggle{display:inline-flex}
  .hdr__nav{display:none;position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;
    background:var(--void);border-bottom:var(--rule);padding:0.5rem var(--gut) 1rem}
  .hdr__nav a{padding-block:0.85rem;border-bottom:var(--rule);font-size:1rem}
  .hdr[data-open="true"] .hdr__nav{display:flex}
  .hdr__in{position:relative}
}

/* ---------- hero — drenched, asymmetric ---------- */
.hero{position:relative;min-height:min(92svh,54rem);display:grid;align-items:end;padding-block:clamp(4rem,12vh,9rem) clamp(2.5rem,6vh,4.5rem);overflow:clip}
.hero__grid{position:absolute;inset:0;z-index:0;opacity:0.5;
  background-image:linear-gradient(var(--steel-hi) 1px,transparent 1px),linear-gradient(90deg,var(--steel-hi) 1px,transparent 1px);
  background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
  mask-image:radial-gradient(120% 90% at 15% 100%,#000 20%,transparent 78%);
}
.hero__in{position:relative;z-index:var(--z-base);display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.hero h1{margin:0}
.hero__sub{max-width:44ch}
.hero__cta{display:flex;gap:0.875rem;flex-wrap:wrap;margin-top:0.5rem}
/* ghost mark bleeding off the right — asymmetry, not decoration-for-its-own-sake */
.hero__ghost{
  position:absolute;right:-4vw;bottom:-2vh;z-index:0;
  font-family:var(--heavy);font-size:min(46vw,34rem);line-height:0.75;
  color:transparent;-webkit-text-stroke:1px var(--steel-hi);
  user-select:none;pointer-events:none;letter-spacing:-0.06em;
}
@media(max-width:700px){.hero__ghost{display:none}}

/* ---------- drop grid — deliberately irregular, never 8 identical tiles ---------- */
.drop{display:grid;gap:1px;background:var(--steel-hi);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.drop--feature{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.drop--feature{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.drop--feature{grid-template-columns:1fr}}
/* the hero piece occupies 2x2 so the composition is not a uniform repeat */
.card--lead{grid-column:span 2;grid-row:span 2}
@media(max-width:560px){.card--lead{grid-column:span 1;grid-row:span 1}}

.card{position:relative;display:flex;flex-direction:column;background:var(--void);isolation:isolate}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--steel)}
.card--lead .card__media{aspect-ratio:1/1}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 0.45s var(--ease),transform 0.8s var(--ease)}
/* visibility (not opacity alone) so the hidden face leaves the accessibility tree
   — otherwise both faces are announced and the turn control does nothing for AT */
.card__media img{visibility:visible}
.card__media .is-front{opacity:0;visibility:hidden}
.card:hover .card__media img{transform:scale(1.03)}
/* front/back is a real, labeled, keyboard-operable control — never hover-only */
.card[data-face="front"] .is-back{opacity:0;visibility:hidden}
.card[data-face="front"] .is-front{opacity:1;visibility:visible}
.card__turn{
  position:absolute;left:0.75rem;bottom:0.75rem;z-index:2;
  font-family:var(--tele);font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;
  background:var(--void);color:var(--ink);border:1px solid var(--ink-3);  /* 4.7:1 — --steel-hi was 1.28:1, invisible on a photo */
  padding:0.5rem 0.75rem;cursor:pointer;
}
.card__turn:hover{border-color:var(--hazard);color:var(--hazard)}
.card__tag{position:absolute;right:0.75rem;top:0.75rem;z-index:2;font-family:var(--tele);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--void);background:var(--hazard);padding:0.3rem 0.5rem}
.card__body{display:flex;align-items:baseline;gap:1rem;padding:1rem 0.75rem 1.25rem}
.card__name{font-family:var(--display);font-weight:600;font-size:0.9375rem;letter-spacing:0.01em;text-transform:uppercase}
.card__price{margin-left:auto;font-family:var(--tele);font-size:0.8125rem;color:var(--hazard)}
.card__link::after{content:"";position:absolute;inset:0;z-index:1}

/* ---------- manifesto — single dominant idea, asymmetric ---------- */
.manifesto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
@media(max-width:860px){.manifesto{grid-template-columns:1fr}}
.manifesto__body p + p{margin-top:1.15em}
.manifesto em{font-style:normal;color:var(--hazard)}

/* ---------- section rhythm — varied, never uniform ---------- */
.sec{padding-block:clamp(4rem,10vw,9rem)}
.sec--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.sec--rule{border-top:var(--rule)}

/* ---------- footer ---------- */
.ftr{border-top:var(--rule);padding-block:clamp(3rem,7vw,5rem) 2rem;margin-top:clamp(3rem,8vw,7rem)}
.ftr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:clamp(1.5rem,4vw,3rem)}
.ftr h3{font-family:var(--display);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.9rem}
.ftr a{color:var(--ink-2);font-size:0.9375rem;display:block;padding-block:0.3rem;transition:color 0.15s}
.ftr a:hover{color:var(--hazard)}
.ftr__credit a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.ftr__credit a:hover{color:var(--hazard)}
.ftr__base{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.25rem;border-top:var(--rule);font-family:var(--tele);font-size:0.6875rem;color:var(--ink-3)}

/* ---------- 18+ notice ---------- */
.warn{display:flex;gap:0.75rem;align-items:center;border:1px solid var(--hazard);padding:0.9rem 1.1rem;font-family:var(--tele);font-size:0.75rem;letter-spacing:0.04em;color:var(--ink)}
.warn b{color:var(--hazard);font-weight:500}

/* ---------- motion: reveals ENHANCE an already-visible default ---------- */
.rise{opacity:1;transform:none}
/* Hiding is gated on a class app.js sets at its own runtime. If the script never
   runs (headless render, blocked asset, JS error), content stays visible. */
.reveal-on .rise{opacity:0;transform:translateY(18px)}
.reveal-on .rise.is-in{opacity:1;transform:none;transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .reveal-on .rise{opacity:1;transform:none}
  .card__media img{transition:none}
}

/* ---------- utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#main:focus{outline:none}
.skip{position:absolute;left:-9999px;z-index:var(--z-toast);background:var(--hazard);color:var(--void);padding:0.75rem 1rem;font-family:var(--display);font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start;padding-block:clamp(1rem,3vw,2rem) clamp(3rem,8vw,6rem)}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}
.pdp__media{display:grid;gap:1px;background:var(--steel-hi)}
.pdp__shot{margin:0;background:var(--steel);aspect-ratio:1/1;overflow:hidden}
.pdp__shot img{width:100%;height:100%;object-fit:cover}
.pdp__buy{position:sticky;top:calc(var(--z-base) * 6rem);display:grid;gap:1.25rem}
@media(max-width:900px){.pdp__buy{position:static}}
.pdp__price{font-family:var(--tele);font-size:1.125rem;color:var(--hazard)}
.pdp__facts{list-style:none;padding:0;margin:0;border-top:var(--rule);font-family:var(--tele);font-size:0.6875rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-2)}
.pdp__facts li{padding-block:0.7rem;border-bottom:var(--rule)}

/* Woo form controls — 0 radius, brand type */
.pdp__buy .quantity input,.pdp__buy select,.variations select{background:var(--steel);border:1px solid var(--steel-hi);color:var(--ink);padding:0.75rem;border-radius:0;font-family:var(--tele);font-size:0.875rem}
.pdp__buy button[type=submit],.single_add_to_cart_button{
  background:var(--hazard);color:var(--void);border:0;border-radius:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:0.9375rem;letter-spacing:0.04em;text-transform:uppercase;
  padding:1rem 1.75rem;width:100%;transition:background 0.18s var(--ease)}
.pdp__buy button[type=submit]:hover,.single_add_to_cart_button:hover{background:var(--hazard-lo)}
.variations{width:100%;border-collapse:collapse;margin-bottom:1rem}
.variations th{text-align:left;font-family:var(--display);font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;padding-block:0.5rem;color:var(--ink-2)}
.variations td{padding-block:0.5rem}
.woocommerce-variation-price{font-family:var(--tele);color:var(--hazard);margin-bottom:0.75rem}
.fr-prose p{margin-bottom:1em}
.fr-prose a{color:var(--hazard);text-decoration:underline}

/* Woo notices — Woo's own stylesheet is dropped on shop/product, so style them here */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  list-style:none;margin:0 0 1rem;padding:0.9rem 1.1rem;border:1px solid var(--steel-hi);
  background:var(--steel);font-family:var(--tele);font-size:0.8125rem;color:var(--ink)}
.woocommerce-notices-wrapper .woocommerce-error{border-color:var(--hazard)}
.woocommerce-notices-wrapper a{color:var(--hazard);text-decoration:underline}

/* ==========================================================================
   HERO FX — broadcast interference. Everything transform/opacity/clip; all of
   it dies under prefers-reduced-motion.
   ========================================================================== */

/* scanline sweep — one thin band of light dragging down the hero */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,color-mix(in oklab,var(--signal) 7%,transparent) 48%,color-mix(in oklab,var(--ink) 9%,transparent) 50%,transparent 52%);
  background-size:100% 220px;background-repeat:no-repeat;background-position:0 -220px;
  animation:fr-scan 7s linear infinite;mix-blend-mode:screen;
}
@keyframes fr-scan{0%{background-position:0 -220px}55%,100%{background-position:0 130vh}}

/* grid drift + pulse — the placard breathes */
.hero__grid{animation:fr-grid 14s var(--ease) infinite alternate}
@keyframes fr-grid{from{transform:translate(0,0);opacity:0.5}to{transform:translate(-24px,-18px);opacity:0.34}}

/* mega type: hard-cut clip reveal on load, then occasional signal flicker */
.fx-on .t-mega .fx-line{display:block;overflow:clip}
.fx-on .t-mega .fx-line > span{display:block;transform:translateY(110%);animation:fr-riser 0.9s var(--ease) forwards}
.fx-on .t-mega .fx-line:nth-child(2) > span{animation-delay:0.12s}
@keyframes fr-riser{to{transform:translateY(0)}}

/* chromatic split flicker — fires rarely, reads as interference not decoration */
.fx-on .t-mega{position:relative;animation:fr-flicker 9s steps(1) infinite}
@keyframes fr-flicker{
  0%,92.6%,93.4%,95.8%,96.4%,100%{text-shadow:none;transform:none}
  92.8%{text-shadow:-3px 0 var(--signal),3px 0 var(--hazard);transform:translateX(1px)}
  93.0%{text-shadow:4px 0 var(--signal),-4px 0 var(--hazard);transform:translateX(-2px) skewX(-0.6deg)}
  96.0%{text-shadow:-2px 0 var(--signal),2px 0 var(--hazard)}
}

/* ghost letters get a slow parallax breathe */
.fx-on .hero__ghost{animation:fr-ghost 18s var(--ease) infinite alternate}
@keyframes fr-ghost{from{transform:translate(0,0)}to{transform:translate(-2.5vw,-2vh)}}

/* telemetry line boots up: dot blinks, then text "locks" */
.fx-on .hero .tele__dot{animation:fr-dot 1.1s steps(2) 4, none}
@keyframes fr-dot{50%{opacity:0}}
.fx-on .hero .tele span:not(.tele__dot):not(.tele__fill){animation:fr-lock 0.5s var(--ease) backwards}
.fx-on .hero .tele span:nth-child(4){animation-delay:0.35s}
@keyframes fr-lock{from{opacity:0;transform:translateX(-6px)}}

/* CTA: hazard sweep on hover instead of a plain darken */
.btn{position:relative;overflow:clip}
.btn::before{content:"";position:absolute;inset:0;background:var(--void);transform:translateX(-101%);transition:transform 0.32s var(--ease);z-index:0}
.btn:hover::before{transform:translateX(0)}
.btn:hover{--btn-fg:var(--hazard)}
.btn > *,.btn{isolation:isolate}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{--btn-fg:var(--void)}
.btn span,.btn{position:relative}

/* product cards: hazard tag ticks in, media gets a slow ken-burns on hover only */
.card:hover .card__media img{transform:scale(1.045)}
.card__media img{transition:opacity 0.45s var(--ease),transform 1.6s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .hero::after{animation:none;background:none}
  .hero__grid,.fx-on .t-mega,.fx-on .hero__ghost,.fx-on .hero .tele__dot,
  .fx-on .hero .tele span:not(.tele__dot):not(.tele__fill){animation:none}
  .fx-on .t-mega .fx-line > span{transform:none;animation:none}
}

/* hover = second angle (Represent/Stüssy pattern); button stays for keyboard+touch */
@media(hover:hover){
  .card[data-face="back"]:hover .is-front{opacity:1;visibility:visible}
  .card[data-face="back"]:hover .is-back{opacity:0}
  .card[data-face="front"]:hover .is-back{opacity:1;visibility:visible}
  .card[data-face="front"]:hover .is-front{opacity:0}
}

/* serialized pieces — drops read as numbered artifacts, not catalog rows */
.drop{counter-reset:fr-piece}
.card{counter-increment:fr-piece}
.card__body::before{
  content:"№ " counter(fr-piece,decimal-leading-zero);
  font-family:var(--tele);font-size:0.625rem;letter-spacing:0.1em;
  color:var(--ink-3);align-self:center;margin-right:0.25rem;
}

/* ---------- scroll choreography chrome ---------- */
.fx-noise{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;image-rendering:pixelated}
.fx-strip{overflow:clip;border-block:var(--rule);padding-block:0.9rem;background:var(--steel);user-select:none}
.fx-strip__in{white-space:nowrap;will-change:transform;font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:0.05em;color:var(--ink-3);text-transform:uppercase}
.fx-strip__in::selection{background:none}
@media(prefers-reduced-motion:reduce){.fx-strip{display:none}.fx-noise{display:none}}

/* ---------- generative hero field ----------
   The stock welder photo was oblique: nothing about it said robots or merch.
   Replaced with the brand's own motif — a scanning field of bot heads with one
   struck out, drawn live in fx.js so it moves. Ties the hero to the actual
   Spot The Human graphic on the shirts. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 38%, color-mix(in oklab,var(--hazard) 12%,transparent) 0%, transparent 58%),
    linear-gradient(90deg,var(--void) 12%,color-mix(in oklab,var(--void) 55%,transparent) 52%,transparent 82%);
  opacity:calc(1 - var(--photo-fade,0) * 0.7);
}
.fx-bots{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  opacity:calc(0.85 - var(--photo-fade,0) * 0.8)}
.hero__grid{mix-blend-mode:normal;opacity:0.16}
.hero__in{position:relative;z-index:2}
.hero__ghost{z-index:1}

/* ==========================================================================
   HEADER LOCKUP — the mark is a designed object, not styled text.
   Real vector artwork (approved concepts D + B) masked in, so it stays
   selectable/crawlable text underneath for SEO and screen readers.
   ========================================================================== */
.hdr__mark{
  display:flex;align-items:center;gap:0.7rem;
  font-size:0;line-height:0;               /* the glyphs are drawn by the mask */
  padding-block:0.15rem;
}
/* FK/RB tile — the compact mark */
.hdr__mark::before{
  content:"";flex:none;width:30px;height:30px;
  background:url('../img/mark-tile.svg') center/contain no-repeat;
  transform:rotate(0deg);
  transition:transform 0.5s var(--ease),filter 0.3s var(--ease);
}
/* the wordmark itself, as vector — masked so it inherits colour + effects */
.hdr__mark > .fr-lock{
  display:block;width:clamp(132px,13vw,178px);height:22px;
  background:var(--ink);
  -webkit-mask:url('../img/logo-callsign.svg') left center/contain no-repeat;
          mask:url('../img/logo-callsign.svg') left center/contain no-repeat;
  transition:background 0.28s var(--ease),width 0.42s var(--ease),opacity 0.3s var(--ease);
}
/* hover: tile snaps a quarter turn, wordmark goes hazard */
.hdr__mark:hover::before{transform:translateY(-2px);filter:brightness(1.12)}
.hdr__mark:hover > .fr-lock{background:var(--hazard)}
.hdr__mark:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* SCROLLED STATE: wordmark collapses away, tile persists — the header
   compacts into its own monogram. Driven by [data-scrolled] from app.js. */
.hdr[data-scrolled="true"]{background:color-mix(in oklab,var(--void) 95%,transparent)}
.hdr[data-scrolled="true"] .hdr__mark > .fr-lock{width:0;opacity:0}
.hdr[data-scrolled="true"] .hdr__mark::before{transform:none;width:34px;height:34px}

/* signal-lock sweep across the wordmark on first load */
@keyframes fr-lockon{
  0%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
.fx-on .hdr__mark > .fr-lock{animation:fr-lockon 0.72s var(--ease) 0.1s backwards}
.fx-on .hdr__mark::before{animation:fr-tilein 0.46s var(--ease) backwards}
@keyframes fr-tilein{from{transform:scale(0.3);opacity:0}}

/* hazard underline that tracks the sweep */
.hdr__mark{position:relative}
.hdr__mark::after{
  content:"";position:absolute;left:40px;right:0;bottom:-2px;height:2px;
  background:var(--hazard);transform:scaleX(0);transform-origin:left;
  transition:transform 0.34s var(--ease);
}
.hdr__mark:hover::after{transform:scaleX(1)}
.hdr[data-scrolled="true"] .hdr__mark::after{display:none}

@media(prefers-reduced-motion:reduce){
  .fx-on .hdr__mark > .fr-lock,.fx-on .hdr__mark::before{animation:none}
  .hdr__mark::before,.hdr__mark > .fr-lock,.hdr__mark::after{transition:none}
}

/* Unfilled legal placeholders — deliberately loud so they cannot ship unnoticed.
   Remove the token and the styling disappears with it. */
mark.fr-todo{
  background:var(--hazard);color:var(--void);
  font-family:var(--tele);font-size:0.8em;font-weight:500;
  letter-spacing:0.04em;padding:0.15em 0.45em;border-radius:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
mark.fr-todo::before{content:"⚠ ";}

/* ==========================================================================
   PDP + MOBILE POLISH
   ========================================================================== */

/* Product gallery: the first shot is the graphic and deserves the room.
   Subsequent shots pair up rather than repeating one giant column. */
@media(min-width:900px){
  .pdp__media{grid-template-columns:1fr 1fr}
  .pdp__shot:first-child{grid-column:1 / -1;aspect-ratio:4/3}
}

/* Mobile: the buy box must be reachable without scrolling past the gallery */
@media(max-width:899px){
  .pdp{display:flex;flex-direction:column}
  .pdp__buy{order:-1}
  .pdp__media{order:1;grid-template-columns:1fr 1fr;gap:1px}
  .pdp__shot:first-child{grid-column:1 / -1}
  .pdp__buy .single_add_to_cart_button{position:sticky;bottom:0;z-index:var(--z-sticky)}
}

/* Touch targets: 44px floor everywhere it matters */
@media(hover:none){
  .card__turn{min-height:44px;padding:0.75rem 1rem}
  .hdr__nav a{min-height:44px;display:flex;align-items:center}
  .ftr a{min-height:44px;display:flex;align-items:center}
}

/* Hero on small screens: the type must not collide with the photo subject */
@media(max-width:760px){
  .hero{min-height:min(88svh,44rem)}
  .t-mega{font-size:clamp(3rem,17vw,5.5rem)}
  .hero__sub{max-width:32ch}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* Kinetic strip is decorative — pull it back on small screens where it eats room */
@media(max-width:640px){
  .fx-strip{padding-block:0.6rem}
  .fx-strip__in{font-size:0.95rem}
}

/* Drop grid on mobile: 2-up reads better than a single stack of huge cards */
@media(max-width:560px){
  .drop--feature{grid-template-columns:1fr 1fr}
  .card--lead{grid-column:span 2}
  .card__name{font-size:0.8125rem}
  .card__body{padding:0.75rem 0.6rem 1rem}
  .card__body::before{display:none}
}

/* ---------- single-image products must not fade to nothing ----------
   Beanies have one Printful view. The hover/turn swap assumed a second face,
   so hovering faded the only image out and left an empty card. */
.card__media:not(:has(.is-front)) .is-back,
.card[data-face="front"] .card__media:not(:has(.is-front)) .is-back{opacity:1 !important;visibility:visible !important}
.card__media:not(:has(.is-front)) .card__turn{display:none}
.card__media:not(:has(.is-back)) .is-front{opacity:1 !important;visibility:visible !important}

/* ---------- effects pass ---------- */
/* cards lift and the graphic pushes in slightly — depth without a shadow cliche */
.card{transition:transform 0.42s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card__media img{transition:opacity 0.45s var(--ease),transform 0.9s var(--ease)}
.card:hover .card__media img{transform:scale(1.035)}
/* hazard scan sweeps the media on hover */
.card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent 42%,color-mix(in oklab,var(--hazard) 26%,transparent) 50%,transparent 58%);
  transform:translateY(-110%);transition:transform 0.75s var(--ease);mix-blend-mode:screen}
.card:hover .card__media::after{transform:translateY(110%)}

/* primary CTA: hazard bleeds in from the left rather than a flat colour swap */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hazard-lo);
  transform:scaleX(0);transform-origin:left;transition:transform 0.38s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn--ghost::before{background:var(--ink)}

/* section rules draw themselves in */
.sec--rule{position:relative}
.sec--rule::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--steel-hi);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.sec--rule.is-in::before,.reveal-on .sec--rule.is-in::before{transform:scaleX(1)}
html:not(.reveal-on) .sec--rule::before{transform:scaleX(1)}

/* the telemetry dot actually pulses like a live indicator */
@keyframes fr-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.82)}}
.tele__dot{animation:fr-live 2.4s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){
  .tele__dot{animation:none}
  .card,.card__media img,.card__media::after,.btn::before,.sec--rule::before{transition:none}
}

/* Classic WooCommerce checkout ships its own light "payment box" styling for
   gateway detail panels (grey card + upward-pointing triangle) that never
   inherits theme colors. Card brand icons also fall back to stacking
   vertically once the theme's base image reset drops their inline sizing.
   Card input fields themselves (Stripe-hosted iframes) stay white by
   design — that's the normal, trusted look for a card field even on a
   dark page — only the surrounding chrome needs to match the theme. */
.payment_box{
  background:var(--steel) !important;color:var(--ink) !important;
  border:1px solid var(--steel-hi) !important;border-radius:4px}
.payment_box:before{border-bottom-color:var(--steel) !important}
.payment_box p{color:var(--ink-2) !important}
ul.wc_payment_methods label img,.payment_box img{
  display:inline-block !important;height:22px !important;width:auto !important;
  margin:0 4px 4px 0 !important;vertical-align:middle !important}