/* ==========================================================================
   CUSTOMMPC.COM — site.css
   Requires css/tokens.css loaded first. Mobile-first. No soft gradients,
   no rounded corners, hard shadows only. See DESIGN.md.

   INDEX
   00 base / reset          06 article cards
   01 layout utilities      07 product frames (Gumroad)
   02 chamfer panels        08 email capture (LCD module)
   03 buttons / chips / LEDs 09 directory rows
   04 masthead / nav / ticker 10 footer
   05 hero + pad grid       11 article page (prose, TOC)
                            12 motion + reduced motion
   ========================================================================== */

/* ---------- 00 base / reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--steel-100);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 var(--s4); line-height: var(--leading-tight); }
p, ul, ol, table, blockquote, figure { margin: 0 0 var(--s5); }

a { color: inherit; }

main a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--alert-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main a:not([class]):hover {
  background: var(--caution);
}

/* focus: red on light surfaces, cyan inside ink panels */
:focus-visible {
  outline: 3px solid var(--alert-deep);
  outline-offset: 2px;
}
.on-ink :focus-visible,
.on-ink:focus-visible {
  outline-color: var(--lcd);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  background: var(--caution);
  color: var(--ink);
  padding: var(--s3) var(--s5);
  border: var(--line);
  font-weight: 700;
  text-transform: uppercase;
}
.skip-link:focus {
  left: var(--s4);
  top: var(--s4);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- 01 layout utilities ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s7);
  position: relative;
}
.section--well { background: var(--steel-300); }
.section--ink  { background: var(--ink); color: var(--paper); }

.grid {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* LED array separator (was hazard tape — Jo 2026-08-20: too industrial,
   this is a status-light strip: hard stops, not a soft gradient) */
.hazard {
  height: 10px;
  border-block: var(--line-thin);
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    90deg,
    var(--lcd) 0 10px,
    var(--ink) 10px 28px
  );
}

/* vertical katakana gutter rail: desktop ornament only */
.v-rail {
  display: none;
}
@media (min-width: 1160px) {
  .v-rail {
    display: block;
    position: absolute;
    top: var(--s7);
    writing-mode: vertical-rl;
    font-family: var(--font-jp);
    font-weight: 900;
    font-size: var(--text-sm);
    letter-spacing: 0.4em;
    color: var(--steel-500);   /* decorative, aria-hidden in markup */
    user-select: none;
  }
  .v-rail--left  { left: var(--s3); }
  .v-rail--right { right: var(--s3); }
}

/* ---------- 02 chamfer panels ---------- */

.cut-2 {
  --cut: var(--cut-md);
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
}
.cut-4 {
  --cut: var(--cut-md);
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)
  );
}

/* bordered chamfer panel = ink shell + face body (clip-path eats borders,
   so the border IS the outer layer). Shadow via drop-shadow so it follows
   the cut. Usage: <div class="panel cut-2"><div class="panel__body"> */
.panel {
  background: var(--ink);
  padding: var(--line-w);
}
.panel-shadow {           /* wrapper that owns the hard offset shadow */
  filter: drop-shadow(4px 4px 0 var(--ink));
}
.panel-shadow--lcd   { filter: drop-shadow(4px 4px 0 var(--lcd)); }
.panel-shadow--alert { filter: drop-shadow(4px 4px 0 var(--alert)); }

.panel__body {
  background: var(--paper);
  padding: var(--s5);
}
.panel__body.cut-2, .panel__body.cut-4,
.card__body.cut-2, .card__body.cut-4 { --cut: calc(var(--cut-md) - 2px); }
.panel__body--steel   { background: var(--steel-100); }
.panel__body--ink     { background: var(--ink); color: var(--paper); }
.panel__body--caution { background: var(--caution); }

/* ---------- 03 buttons / chips / LEDs ---------- */

.btn {
  --cut: var(--cut-sm);
  display: inline-block;
  padding: var(--s3) var(--s5);
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  background: var(--steel-100);
  border: var(--line);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  /* clip-path removes the box-shadow, so buttons live inside .key wrappers */
}
/* key wrapper: owns the shadow + press travel so the chamfer keeps its shadow */
.key {
  display: inline-block;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transition: filter var(--speed-ui), transform var(--speed-ui);
}
.key:hover  { transform: translate(-1px, -1px); filter: drop-shadow(5px 5px 0 var(--ink)); }
.key:active { transform: translate(3px, 3px);   filter: drop-shadow(0 0 0 var(--ink)); }

.btn--buy   { background: var(--caution); }
.btn--ghost { background: var(--steel-100); }
.btn--rec   { background: var(--alert); color: var(--ink); } /* white on alert = 3.9:1, fails AA at 14px */
.btn--lcd   { background: var(--ink); color: var(--lcd); border-color: var(--lcd); }

.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.chip {
  display: inline-block;
  padding: 2px var(--s2);
  border: var(--line-thin);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--paper);
  color: var(--ink);
}
.chip--ink     { background: var(--ink); color: var(--paper); }
.chip--caution { background: var(--caution); }
.chip--lcd     { background: var(--ink); color: var(--lcd); }

.led {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1px solid var(--ink);
  background: var(--led-green);
  vertical-align: baseline;
}
.led--red    { background: var(--alert); }
.led--yellow { background: var(--caution); }
.led--blink  { animation: led-blink 1.2s steps(2, start) infinite; }
@keyframes led-blink { to { visibility: hidden; } }

/* ---------- 04 masthead / nav / ticker ---------- */

.masthead {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--line);
  position: relative;
  z-index: var(--z-nav);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s4);
}

.logo {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  gap: 0;
}
.logo__main {
  --cut: var(--cut-sm);
  background: var(--caution);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  padding: var(--s2) var(--s4);
  border: var(--line);
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
}
.logo__jp {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: var(--text-xs);
  color: var(--lcd);
  writing-mode: vertical-rl;
  padding-left: var(--s2);
  letter-spacing: 0.25em;
  align-self: center;
  max-height: 3.2em;
  overflow: hidden;
}
.logo__tag {
  font-size: var(--text-xs);
  color: var(--steel-300);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-left: var(--s2);
  align-self: center;
}

.nav {
  margin-left: auto;
  max-width: 100%;
}
.nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--s2);
  overflow-x: auto;           /* phone: horizontal scroll strip, nothing hidden */
  -webkit-overflow-scrolling: touch;
  padding-block: var(--s1);
}
.nav a {
  display: inline-block;
  white-space: nowrap;
  padding: var(--s2) var(--s3);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid var(--steel-500);
  transition: background var(--speed-ui), color var(--speed-ui);
}
.nav a:hover {
  background: var(--paper);
  color: var(--ink);
}
.nav a[aria-current="page"] {
  background: var(--caution);
  color: var(--ink);
  border-color: var(--caution);
}

/* wire ticker */
.ticker {
  background: var(--ink);
  color: var(--lcd);
  border-bottom: var(--line);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  overflow: hidden;
  padding-block: var(--s2);
}
.ticker__track {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker-run 40s linear infinite;
}
.ticker__track > span { padding-right: var(--s7); } /* not gap: keeps the -50% loop seamless */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__sep { color: var(--alert); }

/* ---------- 05 hero + pad grid ---------- */

.hero {
  padding-block: var(--s7) var(--s8);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 640px) {
  .hero__inner { grid-template-columns: 7fr 5fr; align-items: center; }
}

.hero__kicker {
  font-family: var(--font-pixel);   /* DotGothic16: Dreamcast-era UI legend */
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--alert-deep);
  margin-bottom: var(--s3);
}
.hero h1 {
  font-family: var(--font-display-shade);  /* Bungee Shade: JSR signage cut */
  font-size: var(--text-3xl);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.05;
}
.hero h1 .u-caution {
  background: var(--caution);
  padding: 0 var(--s2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__deck {
  font-size: var(--text-lg);
  max-width: 46ch;
  color: var(--text-body);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}

/* MPC pad grid */
.padgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--s3);
  background: var(--ink);
  border: var(--line);
  box-shadow: var(--shadow-2);
  width: 100%;
}
.pad {
  --cut: 6px;
  background: var(--steel-100);
  border: 1px solid var(--steel-500);
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)
  );
  box-shadow: inset -4px -4px 0 var(--steel-300);  /* cel step on the pad face */
  transition: background var(--speed-tap), box-shadow var(--speed-tap);
}
.pad.is-lit {
  background: var(--lcd);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.25);
}
.pad.is-accent {
  background: var(--alert);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.25);
}
.padgrid:hover .pad:hover { background: var(--lcd); }

.padgrid--mini {
  aspect-ratio: 1;
  width: 40px;
  max-width: 40px;
  gap: 2px;
  padding: 3px;
  border-width: 1px;
  box-shadow: none;
}
.padgrid--mini .pad { --cut: 2px; box-shadow: none; border-width: 1px; }

/* 3D hero centerpiece (js/hero3d.js). Takes the padgrid's exact box so the
   swap causes zero layout shift; only exists when JS + WebGL + full motion. */
.hero3d {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
}
.hero3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.padgrid__caption {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--s3);
}

/* ---------- 05b section headers ---------- */

.sechead {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--line);
  margin-bottom: var(--s6);
}
.sechead__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s3);
  min-width: 0;
}
.sechead__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--caution);
  line-height: 1;
}
.sechead__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.sechead__jp {
  font-family: var(--font-jp);
  font-weight: 900;
  color: var(--lcd);
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.sechead__rail {
  flex: 1;
  align-self: stretch;
  min-width: var(--s6);
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    90deg,
    var(--lcd) 0 8px,
    var(--ink) 8px 24px
  );
  border: 1px solid var(--ink);
  margin-block: var(--s3);
  display: none;
}
@media (min-width: 640px) { .sechead__rail { display: block; } }

/* ---------- 06 article cards ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  padding: var(--line-w);
  transition: transform var(--speed-ui);
}
.card-shell {                 /* shadow owner (drop-shadow follows chamfer) */
  filter: drop-shadow(4px 4px 0 var(--ink));
  transition: filter var(--speed-ui), transform var(--speed-ui);
}
.card-shell:hover {
  transform: translate(-2px, -2px);
  filter: drop-shadow(8px 8px 0 var(--ink));
}
.card__body {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  flex: 1;
  --cut: calc(var(--cut-md) - 2px);
}
.card__media {
  position: relative;
  border-bottom: var(--line);
  background: var(--steel-300);
}
.card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__media::after {          /* cyan scanlines, revealed on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 229, 255, 0.35) 0 2px,
    transparent 2px 6px
  );
  opacity: 0;
  transition: opacity var(--speed-ui);
  pointer-events: none;
}
.card-shell:hover .card__media::after { opacity: 1; }
.card__tag {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
}
.card__content { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.card__title a {
  text-decoration: none;
  color: var(--ink);
}
.card__title a::after {        /* stretched link: whole card clickable */
  content: "";
  position: absolute;
  inset: 0;
}
.card__deck {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex: 1;
}
.card__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-top: var(--line-thin);
  padding-top: var(--s3);
  margin-top: var(--s4);
}

/* ---------- 07 product frames (Gumroad) ---------- */

.product {
  display: flex;
  flex-direction: column;
}
.product__stage {               /* isometric shelf: tilt lives here */
  position: relative;
  margin-bottom: var(--s5);
  perspective: 900px;
}
.product__stage::after {        /* black plinth the unit sits on */
  content: "";
  position: absolute;
  left: 8%;
  right: -4%;
  bottom: -10px;
  height: 18px;
  background: var(--ink);
  z-index: -1;
}
.product__media {
  border: var(--line);
  background: var(--paper);
  transform: rotateX(6deg) rotateY(-8deg);
  transform-origin: bottom center;
  transition: transform var(--speed-ui);
  box-shadow: 10px 10px 0 var(--steel-500);
}
.product:hover .product__media,
.product:focus-within .product__media {
  transform: rotateX(0) rotateY(0);
  box-shadow: 6px 6px 0 var(--ink);
}
.product__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product__media img.product__media-document { object-fit: contain; background: var(--ink); }

.product__format {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: var(--line-thin);
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--s2);
  background: var(--steel-100);
  margin-bottom: var(--s3);
}
.product__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.product__pitch {
  font-size: var(--text-sm);
  color: var(--text-body); /* products sit on steel-300 wells; muted gray only hits 3.3:1 there */
  margin-bottom: var(--s4);
  flex: 1;
}
.product__buy {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  background: var(--caution);
  border: var(--line);
  padding: var(--s1) var(--s3);
  line-height: 1;
}
.price--free {
  background: var(--ink);
  color: var(--lcd);
  font-family: var(--font-mono-alt);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  padding: var(--s2) var(--s3);
}

.pack-status {
  margin-top: var(--s4);
  max-width: 54ch;
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pack-audio {
  display: block;
  width: min(100%, 720px);
  margin-top: var(--s4);
  accent-color: var(--caution);
}

/* ---------- 08 email capture (LCD module) ---------- */

.lcd-module {
  background: var(--ink);
  color: var(--lcd);
  border: var(--line);
  box-shadow: var(--shadow-2);
  padding: var(--s3);
}
.lcd-module__screen {
  border: 1px solid var(--lcd);
  padding: var(--s5);
  font-family: var(--font-mono-alt);
}
.lcd-module__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--caution);
  margin-bottom: var(--s3);
}
.lcd-module h2, .lcd-module h3 {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--lcd);
}
.lcd-module p { color: var(--lcd); max-width: 52ch; }
.lcd-module .cursor {
  display: inline-block;
  width: 0.6em; height: 1em;
  background: var(--lcd);
  vertical-align: text-bottom;
  animation: led-blink 1s steps(2, start) infinite;
}
.lcd-module__cta { margin-top: var(--s5); }

/* ---------- 09 directory rows ---------- */

.dir {
  border-top: var(--line);
}
.dir-row {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  border-bottom: var(--line-thin);
  align-items: center;
}
@media (min-width: 640px) {
  .dir-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: var(--s4);
  }
}
.dir-row__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.dir-row__loc {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dir-row__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.dir-row__link {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- 10 footer ---------- */

.footer {
  background: var(--ink);
  color: var(--steel-300);
  border-top: 4px solid var(--caution);
  padding-block: var(--s7);
  font-size: var(--text-sm);
}
.footer a { color: var(--paper); text-decoration-color: var(--lcd); }
.footer a:hover { color: var(--lcd); }
.footer__grid {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer__ports {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-block: var(--s4);
}
.port {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.port__slot {
  height: 14px;
  border: 1px solid var(--steel-500);
  background: #1a1a1a;
  margin-top: var(--s1);
}
.footer__heading {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--caution);
  margin-bottom: var(--s3);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s2); }
.footer__legal {
  border-top: 1px solid var(--steel-500);
  margin-top: var(--s6);
  padding-top: var(--s5);
  font-size: var(--text-xs);
  color: var(--steel-300);
  line-height: 1.7;
}
.footer__disclaimer { color: var(--paper); font-weight: 700; }

/* ---------- 11 article page ---------- */

.crumbs {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-block: var(--s4);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.crumbs li + li::before { content: "//"; color: var(--alert-deep); margin-right: var(--s2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.article-head { padding-block: var(--s5) var(--s6); }
.article-head h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  max-width: 24ch;
}
.article-head__lede {
  font-size: var(--text-lg);
  max-width: var(--measure);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  border-block: var(--line);
  padding-block: var(--s3);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block: var(--s5);
}
.article-meta b { color: var(--alert-deep); }

.article-hero-img {
  border: var(--line);
  box-shadow: var(--shadow-2);
  margin-block: var(--s5) var(--s7);
}
.article-hero-img img { width: 100%; }
.article-hero-img figcaption {
  font-size: var(--text-xs);
  color: var(--paper);
  background: var(--ink);
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono-alt);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* article layout: TOC beside prose on desktop */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 960px) {
  .article-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .toc { position: sticky; top: var(--s4); }
}

/* TOC as LCD readout */
.toc {
  background: var(--ink);
  color: var(--lcd);
  border: var(--line);
  box-shadow: var(--shadow-1);
  padding: var(--s3);
  font-family: var(--font-mono-alt);
}
.toc__screen { border: 1px solid var(--lcd); padding: var(--s4); }
.toc__label {
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--caution);
  margin-bottom: var(--s3);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: trk; }
.toc li { counter-increment: trk; margin-bottom: var(--s2); font-size: var(--text-sm); }
.toc li::before {
  content: "TRK " counter(trk, decimal-leading-zero) " ";
  color: var(--caution);
}
.toc a { color: var(--lcd); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* prose */
.prose { max-width: var(--measure); min-width: 0; }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  margin-top: var(--s7);
  scroll-margin-top: var(--s5);
}
.prose h2::after {
  content: "";
  display: block;
  width: 88px;
  height: 8px;
  background: var(--caution);
  border: 1px solid var(--ink);
  margin-top: var(--s2);
}
.prose h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--s6);
  scroll-margin-top: var(--s5);
}
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--alert-deep); }

.prose blockquote {
  background: var(--ink);
  color: var(--lcd);
  font-family: var(--font-mono-alt);
  border: none;
  border-left: 6px solid var(--lcd);
  padding: var(--s4) var(--s5);
  margin-inline: 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* spec tables: horizontal scroll inside the panel on phones */
.table-wrap {
  overflow-x: auto;
  border: var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--s5);
  background: var(--paper);
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-family: var(--font-mono-alt);
  font-size: var(--text-sm);
  margin: 0;
}
.prose th {
  background: var(--steel-300);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
}
.prose th, .prose td {
  border: var(--line-thin);
  padding: var(--s2) var(--s3);
  vertical-align: top;
}
.prose td.win { background: var(--caution); font-weight: 700; }

.callout {
  background: var(--caution);
  border: var(--line);
  box-shadow: var(--shadow-1);
  padding: var(--s5);
  margin-block: var(--s6);
}
.callout__label {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--ink); /* alert-deep on caution = 4.4:1, just under AA at 12px */
  margin-bottom: var(--s2);
}
.callout p:last-child { margin-bottom: 0; }

/* inline product placement inside prose */
.prose .product-inline {
  border: var(--line);
  box-shadow: var(--shadow-1);
  background: var(--paper);
  padding: var(--s5);
  margin-block: var(--s6);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 640px) {
  .prose .product-inline { grid-template-columns: 160px minmax(0, 1fr); }
}
.product-inline img { border: var(--line-thin); }

/* Contextual affiliate module: disclosure stays inside the recommendation,
   not buried in the footer. No merchant imagery or live-price claims. */
.affiliate-box {
  margin-block: var(--s6);
  padding: var(--s5);
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-lcd);
}
.affiliate-box__label {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 2px var(--s2);
  background: var(--ink);
  color: var(--lcd);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.affiliate-box h3 { margin-top: 0; }
.affiliate-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-block: var(--s4);
}
.affiliate-box__disclosure {
  margin: 0;
  padding-top: var(--s3);
  border-top: var(--line-thin);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.affiliate-box__disclosure strong { color: var(--ink); }

/* ---------- 11b MPC1000 Builder's Vault ---------- */

.vault-hero {
  overflow: hidden;
  background: var(--paper);
  border-bottom: var(--line);
}
.vault-hero::before {
  content: "FIELD SYSTEM 001";
  position: absolute;
  right: -0.25em;
  bottom: -0.2em;
  color: var(--steel-300);
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 0.8;
  white-space: nowrap;
  pointer-events: none;
}
.vault-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s7);
  align-items: center;
  position: relative;
  z-index: 1;
}
.vault-hero__copy { min-width: 0; }
.vault-hero h1 {
  max-width: 13ch;
  font-family: var(--font-display-shade);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  line-height: 1.02;
}
.vault-hero h1 .u-caution {
  background: var(--caution);
  padding-inline: var(--s2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.vault-price-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  max-width: 560px;
  margin-top: var(--s6);
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--paper);
  border-left: 8px solid var(--caution);
  box-shadow: var(--shadow-1);
}
.vault-price-panel > div {
  padding-right: var(--s4);
  border-right: 1px solid var(--steel-500);
}
.vault-price-panel__label {
  display: block;
  color: var(--caution);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vault-price-panel__price {
  display: block;
  color: var(--lcd);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}
.vault-price-panel p { margin: 0; font-size: var(--text-sm); }
.vault-status {
  margin: var(--s4) 0 0;
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vault-status .led { margin-right: var(--s2); }

.vault-preview {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--s4);
  background: var(--ink);
  border: var(--line);
  box-shadow: 10px 10px 0 var(--caution);
  transform: rotate(1.25deg);
}
.vault-preview__tab {
  display: inline-block;
  margin-bottom: var(--s3);
  color: var(--caution);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.vault-preview img { width: 100%; border: 1px solid var(--steel-500); }
.vault-preview__readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s3);
  color: var(--lcd);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.vault-jobs { align-items: stretch; }
.vault-job {
  padding: var(--s5);
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-1);
}
.vault-job:nth-child(2) { box-shadow: 4px 4px 0 var(--lcd); }
.vault-job:nth-child(3) { box-shadow: 4px 4px 0 var(--alert); }
.vault-job__mode {
  display: inline-block;
  margin-bottom: var(--s4);
  padding: 2px var(--s2);
  background: var(--ink);
  color: var(--lcd);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.vault-job h3,
.vault-inventory__note h3,
.vault-fit h2,
.vault-fit h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.vault-job ul,
.vault-fit ul { margin: 0; padding-left: 1.2em; }
.vault-job li,
.vault-fit li { margin-bottom: var(--s2); }
.vault-job li::marker { color: var(--alert-deep); }

.vault-inventory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.vault-inventory__screen {
  min-width: 0;
  padding: var(--s5);
  background: var(--ink);
  color: var(--lcd);
  border: var(--line);
  box-shadow: var(--shadow-lcd);
}
.vault-inventory__screen ol { margin: 0; padding: 0; list-style: none; }
.vault-inventory__screen li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s2);
  border-bottom: 1px solid #006a75;
  font-family: var(--font-mono-alt);
  font-size: var(--text-sm);
}
.vault-inventory__screen li span { color: var(--caution); font-weight: 700; }
.vault-inventory__note {
  padding: var(--s5);
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-1);
}
.vault-inventory__note .chip { margin-bottom: var(--s4); }
.vault-micro {
  margin-bottom: 0;
  padding-top: var(--s3);
  border-top: var(--line-thin);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.vault-fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.vault-fit h2 { max-width: 18ch; font-size: var(--text-2xl); }
.vault-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.vault-fit__panel {
  padding: var(--s5);
  border: var(--line);
}
.vault-fit__panel h3 {
  display: inline-block;
  padding: var(--s1) var(--s3);
  margin-bottom: var(--s4);
  background: var(--ink);
  color: var(--paper);
}
.vault-fit__panel--yes { background: var(--caution); box-shadow: var(--shadow-1); }
.vault-fit__panel--no { background: var(--paper); box-shadow: 4px 4px 0 var(--alert); }
.vault-fit__panel--yes li::marker { color: var(--ink); }
.vault-fit__panel--no li::marker { color: var(--alert-deep); }

@media (min-width: 760px) {
  .vault-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); }
  .vault-inventory { grid-template-columns: minmax(0, 7fr) minmax(260px, 5fr); }
  .vault-fit { grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); align-items: start; }
  .vault-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .logo__tag { display: none; }
  .vault-price-panel { grid-template-columns: 1fr; }
  .vault-price-panel > div { padding: 0 0 var(--s3); border-right: 0; border-bottom: 1px solid var(--steel-500); }
  .vault-preview { transform: none; box-shadow: 6px 6px 0 var(--caution); }
}

/* ---------- 11c skin designer (/tools/skin-designer/) ---------- */

.skin {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 960px) {
  .skin { grid-template-columns: 380px minmax(0, 1fr); align-items: start; }
}

/* preview stage: ink bench the unit sits on */
.skin__stage {
  background: var(--ink);
  border: var(--line);
  box-shadow: var(--shadow-2);
  padding: var(--s4);
  position: sticky;
  top: var(--s4);
}
.skin__stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--caution);
}
.skin__stage-head .chip { letter-spacing: 0.1em; }
.skin__canvas-wrap {
  background: var(--steel-300);
  border: 1px solid var(--lcd);
  padding: var(--s3);
}
.skin__canvas-wrap canvas {
  display: block;
  width: 100%;
  cursor: grab;
  touch-action: none;
  background: var(--paper);
  outline: 1px solid var(--ink);
}
.skin__canvas-wrap canvas.is-dragging { cursor: grabbing; }
.skin__readout {
  margin-top: var(--s3);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lcd);
  min-height: 1.4em;
}
.skin__status {
  margin: var(--s2) 0 0;
  font-family: var(--font-pixel);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--paper);
}
.skin__status::before { content: "> "; color: var(--caution); }

/* control modules */
.skin__controls { display: grid; gap: var(--s4); }
.skin-mod {
  border: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  padding: 0;
  margin: 0;
  min-width: 0;
}
.skin-mod > legend,
.skin-mod__head {
  float: left;               /* legend hack: full-width ink strip */
  width: 100%;
  margin: 0;
  padding: var(--s1) var(--s3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: var(--line);
}
.skin-mod > legend + *, .skin-mod__head + * { clear: both; }
.skin-mod__body { padding: var(--s3) var(--s3) var(--s4); display: grid; gap: var(--s3); clear: both; }
.skin-mod__body.is-locked { opacity: 0.55; pointer-events: none; }

.skin-field { display: grid; gap: var(--s1); min-width: 0; }
.skin-field__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.skin-field__row output {
  color: var(--alert-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.skin-field__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.skin input[type="range"] {
  width: 100%;
  accent-color: var(--caution);
  margin: 0;
  height: 28px;
}
.skin select,
.skin input[type="text"],
.skin input[type="number"] {
  width: 100%;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border: var(--line);
  background: var(--steel-100);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.skin select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.skin input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 2px;
  border: var(--line);
  background: var(--steel-100);
  border-radius: 0;
  cursor: pointer;
}
.skin-check {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.skin-check input { width: 18px; height: 18px; accent-color: var(--alert); margin: 0; }
.skin-checks { display: grid; gap: var(--s2); }

/* drop zone */
.skin-drop {
  border: 2px dashed var(--ink);
  background: var(--steel-100);
  padding: var(--s4);
  text-align: center;
  display: grid;
  gap: var(--s2);
  justify-items: center;
  cursor: pointer;
  transition: background var(--speed-ui);
}
.skin-drop.is-over, .skin-drop:hover { background: var(--caution); }
.skin-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.skin-drop__hint {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}
.skin-drop__file {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  word-break: break-all;
  margin: 0;
}
.skin-drop__quality {
  font-family: var(--font-pixel);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--alert-deep);
  margin: 0;
}

/* exports */
.skin__exports { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.skin__exports .btn:disabled { opacity: 0.5; cursor: wait; }
.skin__exports .key:has(.btn:disabled) { filter: none; transform: none; }
.skin__fine {
  font-family: var(--font-mono-alt);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* paid gate */
.skin-gate {
  background: var(--ink);
  color: var(--lcd);
  border: var(--line);
  box-shadow: var(--shadow-alert);
  padding: var(--s3);
}
.skin-gate__screen { border: 1px solid var(--alert); padding: var(--s4); font-family: var(--font-mono-alt); }
.skin-gate__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--caution); margin: 0 0 var(--s2);
}
.skin-gate h3 { font-family: var(--font-mono-alt); font-size: var(--text-lg); text-transform: uppercase; color: var(--lcd); margin-bottom: var(--s2); }
.skin-gate p { color: var(--lcd); font-size: var(--text-sm); }
.skin-gate__form { display: grid; gap: var(--s2); grid-template-columns: 1fr auto; align-items: stretch; margin-top: var(--s3); }
.skin-gate__form input {
  min-height: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--lcd); background: var(--ink); color: var(--lcd);
  font-family: var(--font-mono-alt); font-size: var(--text-sm); border-radius: 0;
  letter-spacing: 0.08em;
}
.skin-gate__form .btn { min-height: 44px; }
.skin-gate__msg { font-family: var(--font-pixel); font-size: var(--text-sm); color: var(--caution); margin: var(--s2) 0 0; min-height: 1.4em; }
.skin-gate[hidden] { display: none; }
.skin-gate--ok .skin-gate__screen { border-color: var(--led-green); }

/* tier table */
.skin-tiers { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .skin-tiers { grid-template-columns: 1fr 1fr; } }
.skin-tier { border: var(--line); background: var(--paper); box-shadow: var(--shadow-1); padding: var(--s5); display: flex; flex-direction: column; }
.skin-tier--pro { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lcd); }
.skin-tier__name { font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; margin-bottom: var(--s2); }
.skin-tier--pro .skin-tier__name { color: var(--lcd); }
.skin-tier ul { padding-left: 1.2em; font-size: var(--text-sm); flex: 1; }
.skin-tier li { margin-bottom: var(--s1); }
.skin-tier .price { align-self: flex-start; margin-bottom: var(--s4); }

/* steps + models table */
.skin-steps { counter-reset: step; display: grid; gap: var(--s4); }
@media (min-width: 640px) { .skin-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .skin-steps { grid-template-columns: repeat(3, 1fr); } }
.skin-step { border: var(--line); background: var(--paper); padding: var(--s4); position: relative; padding-top: var(--s6); }
.skin-step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -1px; left: -1px;
  background: var(--ink); color: var(--caution);
  font-family: var(--font-display); font-size: var(--text-sm);
  padding: 2px var(--s2);
}
.skin-step h3 { font-family: var(--font-mono-alt); font-size: var(--text-base); text-transform: uppercase; margin-bottom: var(--s2); }
.skin-step p { font-size: var(--text-sm); margin: 0; }

.skin-models { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.skin-models th, .skin-models td { border: var(--line-thin); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }
.skin-models th { background: var(--ink); color: var(--paper); font-family: var(--font-mono-alt); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; }
.skin-models .led { margin-right: var(--s1); }
.skin-models__wrap { overflow-x: auto; border: var(--line); background: var(--paper); }

/* materials */
.skin-mat { display: flex; flex-direction: column; border: var(--line); background: var(--paper); padding: var(--s4); box-shadow: var(--shadow-1); }
.skin-mat h3 { font-family: var(--font-mono-alt); font-size: var(--text-base); text-transform: uppercase; margin-bottom: var(--s2); }
.skin-mat p { font-size: var(--text-sm); flex: 1; }

/* ---------- 12 motion + reduced motion ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker__track { animation: none; transform: none; }
  .key:hover, .key:active { transform: none; }
  .key:active .btn { background: var(--steel-300); }
  .card-shell:hover { transform: none; }
  .product__media { transform: none; box-shadow: 6px 6px 0 var(--ink); }
  .led--blink, .lcd-module .cursor { animation: none; visibility: visible; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   JSRF layer — motion + sticker energy (Jo, 2026-08-20)
   Reference: Jet Set Radio Future. Every animation lives inside the
   no-preference gate; static states must read complete without it.
   ========================================================================== */

.card__tag { transform: rotate(-3deg); }   /* sticker slap, safe when static */

@media (prefers-reduced-motion: no-preference) {

  /* LED strips chase. 168px = LCM of both strip periods (28px, 24px),
     so one keyframe loops both seamlessly. */
  .hazard,
  .sechead__rail {
    animation: led-chase 4s linear infinite;
  }
  @keyframes led-chase {
    to { background-position: 168px 0; }
  }

  /* hero: title stamps in like a tag hitting a wall, copy rises after */
  .hero h1 {
    animation: stamp-in 480ms cubic-bezier(0.18, 1.4, 0.3, 1) both;
  }
  @keyframes stamp-in {
    from { opacity: 0; transform: scale(1.45) rotate(-3deg); }
  }
  .hero__deck,
  .hero__cta {
    animation: rise-in 400ms 200ms ease-out backwards;
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(12px); }
  }

  /* cards lift and cock sideways, tag wiggles once */
  .card-shell {
    transition: transform var(--speed-ui), box-shadow var(--speed-ui);
  }
  .card-shell:hover {
    transform: translate(-2px, -2px) rotate(-0.6deg);
    box-shadow: var(--shadow-2);
  }
  .card-shell:hover .card__tag {
    animation: tag-wiggle 340ms ease-in-out;
  }
  @keyframes tag-wiggle {
    25% { transform: rotate(2deg) scale(1.1); }
    70% { transform: rotate(-6deg); }
    100% { transform: rotate(-3deg); }
  }

  /* price chip pops when its product is hovered */
  .price { transition: transform var(--speed-tap); }
  .product:hover .price { transform: rotate(-3deg) scale(1.08); }
}