/* site.css: Headbang Labs. Tokens only; site extensions are built from the system tokens below. */

/* tokens: site extensions (all derived from tokens.css) */
:root {
  --body-weight: 500;                      /* the self-hosted Barlow Condensed starts at 500 */
  --iron: var(--c-accent-2-raw);
  --iron-hi: color-mix(in oklab, var(--c-accent-2-raw) 62%, var(--c-ink));
  --iron-lo: color-mix(in oklab, var(--c-accent-2-raw) 45%, var(--c-bg));
  --iron-deep: color-mix(in oklab, var(--c-accent-2-raw) 55%, var(--c-bg));
  --rivet: color-mix(in oklab, var(--c-accent-2-raw) 40%, var(--c-ink));
  --blood: var(--c-accent-raw);
  --blood-deep: color-mix(in oklab, var(--c-accent-raw) 40%, var(--c-bg));
  --fire: var(--c-accent);
  --fire-hi: color-mix(in oklab, var(--c-accent) 55%, var(--c-accent-2));
  --gold: var(--c-accent-2);
  --px: 4px;                               /* one art pixel at the UI scale */
  --px-2: calc(var(--px) * 2);
  --shake: 0;
  /* pixel outline: four offset shadows leave the corners notched */
  --px-outline: 0 calc(var(--px) * -1) 0 0 var(--c-bg), 0 var(--px) 0 0 var(--c-bg),
                calc(var(--px) * -1) 0 0 0 var(--c-bg), var(--px) 0 0 0 var(--c-bg);
  --bevel: inset var(--px) var(--px) 0 0 var(--iron-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--iron-lo);
  /* four pixel rivets, one per corner */
  --rivets: linear-gradient(var(--rivet), var(--rivet)) left 10px top 10px / 6px 6px no-repeat,
            linear-gradient(var(--rivet), var(--rivet)) right 10px top 10px / 6px 6px no-repeat,
            linear-gradient(var(--rivet), var(--rivet)) left 10px bottom 10px / 6px 6px no-repeat,
            linear-gradient(var(--rivet), var(--rivet)) right 10px bottom 10px / 6px 6px no-repeat;
}

body { overflow-x: clip; }
h2 { text-transform: uppercase; }
img.px, .crate__icon, .cart__px, .hero__sky img, .hero__fire { image-rendering: pixelated; }

/* Buttons: chunky pixel bevels */
.btn { border: 0; box-shadow: var(--px-outline); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 700; }
.btn--fire { background: var(--fire); color: var(--c-accent-ink);
  box-shadow: var(--px-outline), inset var(--px) var(--px) 0 0 var(--fire-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--blood); }
.btn--iron { background: var(--iron); color: var(--c-ink); box-shadow: var(--px-outline), var(--bevel); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 7px; }
.btn--fire:active, .btn--iron:active { transform: translate(var(--px), var(--px)); box-shadow: var(--px-outline); }
@media (hover: hover) and (pointer: fine) {
  .btn--fire:hover { background: var(--gold); color: var(--c-accent-ink); }
  .btn--iron:hover { background: var(--iron-hi); color: var(--c-bg); }
}

/* HUD header */
.hud { position: fixed; inset: 0 0 auto; z-index: 40; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.hud.is-scrolled { background: color-mix(in oklab, var(--c-bg) 92%, transparent); box-shadow: 0 var(--px) 0 0 var(--iron); }
.hud.is-hidden { transform: translateY(-110%); }
.hud__inner { display: flex; align-items: center; gap: var(--space-m); padding-block: var(--space-2xs); }
.hud__brand { margin-right: auto; display: inline-flex; min-height: 44px; align-items: center; }
.hud__brand img { width: 4.25rem; height: auto; }
.hud__nav ul { display: flex; gap: var(--space-m); list-style: none; padding: 0; }
.hud__nav a { color: var(--c-ink); text-decoration: none; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 700; font-size: var(--step--1); display: inline-flex; align-items: center; min-height: 44px;
  background: linear-gradient(var(--fire), var(--fire)) left bottom 8px / 0 var(--px) no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.hud__nav a:focus-visible { background-size: 100% var(--px); }
.hud__nav a[aria-current] { color: var(--gold); background-size: 100% var(--px); }
.hud__cta { min-height: 44px; font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) { .hud__nav a:hover { background-size: 100% var(--px); color: var(--fire-hi); } }
@media (max-width: 52em) { .hud__nav { display: none; } }

/* Chapter shells down the right edge */
.shells { position: fixed; right: var(--space-2xs); top: 50%; transform: translateY(-50%); z-index: 30; }
.shells ol { list-style: none; padding: 0; margin: 0; display: grid; }
.shells a { display: grid; place-items: center; width: 44px; height: 40px; }
.shells a::before { content: ""; width: 10px; height: 22px; background:
    linear-gradient(var(--gold), var(--gold)) bottom / 100% 6px no-repeat, var(--blood-deep);
  box-shadow: 0 0 0 2px var(--c-bg); transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.shells a[aria-current]::before { background-color: var(--blood); transform: scale(1.25); }
.shells a:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .shells a:hover::before { background-color: var(--fire); } }
@media (max-width: 60em) { .shells { display: none; } }

/* HERO */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; isolation: isolate;
  padding-block: calc(var(--space-xl) + 3rem) var(--space-2xl); cursor: crosshair;
  background: linear-gradient(to bottom, var(--c-bg) 0%, var(--blood-deep) 52%, var(--blood) 78%, var(--fire) 100%); }
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__far, .hero__near { position: absolute; left: 0; bottom: 0; width: 100%; background: bottom center / auto 100% repeat-x; image-rendering: pixelated; }
.hero__far { height: 62%; opacity: 0.9; background-image: url("../art/sky-far.svg"); }
.hero__near { height: 46%; background-image: url("../art/sky-near.svg"); }
.hero__fire { position: absolute; left: 0; bottom: 0; width: 100%; height: min(24%, 11rem); }
.hero__stage { display: grid; justify-items: center; text-align: center; gap: var(--space-s);
  transform: translate(calc(var(--shake) * 1px), calc(var(--shake) * -0.6px)); }
.hero__title { margin: 0; width: min(100%, 780px, max(18rem, (100svh - 25rem) * 1.34)); }
.hero__title img { width: 100%; height: auto; filter: drop-shadow(0 var(--px-2) 0 var(--c-bg)); }
.hero__lede { max-width: 62ch; font-size: var(--step-1); line-height: 1.4; font-weight: 600; color: var(--c-ink);
  background: color-mix(in oklab, var(--c-bg) 86%, transparent); padding: var(--space-xs) var(--space-s); box-shadow: var(--px-outline); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); }
.hero__hint { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold); }
html:not(.js) .hero__hint { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-paused) .hero__title img { animation: slam 520ms var(--ease-out) 120ms; }
}
@keyframes slam {
  0% { transform: scale(1.22); }
  55% { transform: scale(0.97); }
  70% { transform: translate(-6px, 3px) scale(1.01); }
  85% { transform: translate(5px, -2px); }
  100% { transform: none; }
}

/* STATEMENT (authored silence: no motion) */
.statement { background: var(--c-surface); box-shadow: inset 0 var(--px-2) 0 0 var(--c-bg), inset 0 calc(var(--px-2) * -1) 0 0 var(--c-bg); }
.statement__grid { display: grid; gap: var(--space-l); }
.statement__title { font-size: var(--step-4); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.statement__body { display: grid; gap: var(--space-s); max-width: 60ch; font-size: var(--step-1); line-height: 1.5; color: var(--c-muted); }
.statement__body p:first-child { color: var(--c-ink); }
@media (min-width: 60em) { .statement__grid { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ARSENAL: the peak */
.arsenal { position: relative; background:
    repeating-linear-gradient(135deg, var(--c-bg) 0 18px, var(--iron-deep) 18px 36px) top / 100% var(--px-2) no-repeat, var(--c-bg); }
.arsenal__stage { padding-block: var(--space-2xl); }
.arsenal__inner { display: grid; gap: var(--space-l); }
.arsenal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-l); }
.arsenal__head h2 { font-size: var(--step-5); line-height: 1; }
.arsenal__sub { font-size: var(--step-1); color: var(--gold); font-weight: 700; }
.arsenal__grid { list-style: none; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.crate { position: relative; }
@media (min-width: 60em) { .arsenal__grid { grid-template-columns: repeat(3, 1fr); } }
.crate__body { height: 100%; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m);
  background: var(--rivets), var(--iron); box-shadow: var(--px-outline), var(--bevel); }
.crate__icon { width: 64px; height: 64px; margin-bottom: var(--space-3xs); }
.crate h3 { font-size: var(--step-2); line-height: 1.05; text-transform: uppercase; }
.crate__body > p { color: var(--c-ink); max-width: 46ch; }
.crate__state { color: var(--gold) !important; font-weight: 700; margin-top: auto; }
.crate__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }
.crate__links a { color: var(--fire-hi); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.crate__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .crate__links a:hover { color: var(--gold); } }
.crate--score .crate__body { background: var(--rivets), var(--blood-deep); }
.score__title { color: var(--gold); }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); margin: var(--space-2xs) 0 0; }
.score dt { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--c-muted); }
.score dd { margin: 0; font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* The bunker wall (signature). Resting state: no wall. It only exists while the stage is pinned and motion is on. */
.wall { display: none; position: absolute; inset: 0; pointer-events: none; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.wall i { --k: clamp(0, (var(--p) - var(--t) - var(--d, 0)) * 14, 1);
  background: var(--rivets), var(--iron); box-shadow: var(--bevel), 0 0 0 2px var(--c-bg);
  transform: translate(calc(var(--dx) * var(--k) * 1vw), calc((var(--dy) * var(--k) + 38 * var(--k) * var(--k)) * 1vh)) rotate(calc(var(--r) * var(--k) * 1deg));
  opacity: calc(1 - var(--k)); will-change: transform; }
.wall i:nth-child(1) { --dx: -16; --dy: -30; --r: -200; --d: 0.006; }
.wall i:nth-child(2) { --dx: 2;   --dy: -42; --r: 160;  --d: 0; }
.wall i:nth-child(3) { --dx: 18;  --dy: -28; --r: 240;  --d: 0.008; }
.wall i:nth-child(4) { --dx: -22; --dy: -14; --r: -120; --d: 0.004; }
.wall i:nth-child(5) { --dx: 4;   --dy: -26; --r: 300;  --d: 0; }
.wall i:nth-child(6) { --dx: 24;  --dy: -12; --r: 140;  --d: 0.005; }
.wall i:nth-child(7) { --dx: -14; --dy: -6;  --r: -260; --d: 0.01; }
.wall i:nth-child(8) { --dx: -2;  --dy: -10; --r: 90;   --d: 0.003; }
.wall i:nth-child(9) { --dx: 16;  --dy: -4;  --r: -150; --d: 0.009; }
.wall .boom { --b: clamp(0, (var(--p) - var(--t) + 0.004) * 10, 1);
  position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%;
  background: url("../art/boom.svg") center / contain no-repeat; image-rendering: pixelated;
  transform: scale(calc(0.2 + var(--b) * 1.5)) rotate(calc(var(--b) * 30deg)); opacity: calc(var(--b) * (1 - var(--b)) * 4); }
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .wall { display: grid; }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .arsenal__stage { display: grid; align-content: center; padding-block: 4.5rem var(--space-s); }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .arsenal__inner { gap: var(--space-s); }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .arsenal__head h2 { font-size: var(--step-3); }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .arsenal__grid { gap: var(--space-s); }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .crate__body { padding: var(--space-xs) var(--space-s); gap: var(--space-3xs); line-height: 1.4; }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .crate h3 { font-size: var(--step-1); }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .crate__icon { width: 40px; height: 40px; margin: 0; }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .crate__links a { min-height: 36px; }
  html.js.motion-ready:not(.motion-paused) .arsenal.pin-on .score dd { font-size: var(--step-3); }
}

/* LAB: pan rail of cartridges */
.lab { background: var(--blood-deep); }
.lab__stage { padding-block: var(--space-2xl); }
.lab__head { display: grid; gap: var(--space-2xs); }
.lab__head h2 { font-size: var(--step-5); line-height: 1; }
.lab__sub { font-size: var(--step-1); color: var(--c-ink); }
.lab__track { list-style: none; margin: var(--space-l) 0 0; padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); }
.lab__track > * { flex-basis: min(80vw, 23rem); }
.cart { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-s) var(--space-s) var(--space-m);
  background: var(--iron); box-shadow: var(--px-outline), var(--bevel); }
.cart__art { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--c-bg); box-shadow: inset 0 0 0 var(--px) var(--iron-lo); margin-bottom: var(--space-2xs); padding: var(--space-s); }
.cart__art img { max-height: 100%; width: auto; max-width: 100%; }
.cart__art .cart__px { width: 96px; height: 96px; }
.cart--hn .cart__art img, .cart--ub .cart__art img { width: 100%; height: auto; }
.cart h3 { font-size: var(--step-1); text-transform: uppercase; }
.cart p { color: var(--c-ink); }
.cart__state { margin-top: auto; padding-top: var(--space-2xs); color: var(--gold) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1); }

/* FORGE: the process */
.forge__grid { display: grid; gap: var(--space-xl); }
.forge__head h2 { font-size: var(--step-4); line-height: 1.02; max-width: 12ch; }
.forge__head p { margin-top: var(--space-s); color: var(--c-muted); max-width: 36ch; font-size: var(--step-1); line-height: 1.45; }
.forge__list { list-style: none; padding: 0; margin: 0; counter-reset: stage; display: grid; }
.forge__list li { counter-increment: stage; display: grid; grid-template-columns: 4.5rem 1fr; column-gap: var(--space-m);
  padding-block: var(--space-m); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--iron); }
.forge__list li::before { content: counter(stage); grid-row: span 2; font-family: var(--font-display); font-size: var(--step-5);
  line-height: 0.9; color: var(--fire); text-shadow: var(--px) var(--px) 0 var(--blood); }
.forge__list h3 { font-size: var(--step-2); text-transform: uppercase; line-height: 1.05; }
.forge__list p { color: var(--c-muted); margin-top: var(--space-3xs); }
@media (min-width: 60em) {
  .forge__grid { grid-template-columns: 5fr 7fr; }
  .forge__head { position: sticky; top: 6rem; align-self: start; }
}

/* FOUNDER */
.founder { background: var(--c-surface); }
.founder__grid { display: grid; gap: var(--space-xl); align-items: center; }
.founder__stage { margin: 0; display: grid; gap: var(--space-xs); justify-items: center; }
.founder__sprite { --s: 8; width: calc(32px * var(--s)); height: calc(48px * var(--s)); overflow: hidden; cursor: pointer; box-shadow: 0 var(--px-2) 0 0 var(--c-bg); }
.founder__sprite img { display: block; width: calc(192px * var(--s)); height: calc(96px * var(--s)); max-width: none; image-rendering: pixelated; }
.founder__sprite.is-horns img { translate: 0 calc(-48px * var(--s)); }
.founder__stage figcaption { color: var(--c-muted); font-size: var(--step--1); }
.founder__copy { display: grid; gap: var(--space-s); max-width: 60ch; }
.founder__copy h2 { font-size: var(--step-3); line-height: 1.02; }
.founder__lede { font-size: var(--step-1); line-height: 1.45; color: var(--c-ink); font-weight: 600; }
.founder__copy p:not(.founder__lede) { color: var(--c-muted); }
.founder__copy a { color: var(--fire-hi); }
@media (min-width: 60em) { .founder__grid { grid-template-columns: 5fr 7fr; } }
@media (max-width: 30em) { .founder__sprite { --s: 5; } }

/* CONTACT + the pit */
.contact { position: relative; padding-top: var(--section-space); overflow: clip;
  background: linear-gradient(to bottom, var(--c-bg) 0%, var(--c-bg) 55%, var(--blood-deep) 80%, var(--blood) 100%); }
.contact__plate { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--space-s);
  max-width: 50rem; padding: var(--space-xl) var(--space-l); background: var(--rivets), var(--iron); box-shadow: var(--px-outline), var(--bevel); }
.contact__plate h2 { font-size: var(--step-5); line-height: 1; }
.contact__plate p { font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-top: var(--space-2xs); }
.pit { --s: 4; display: flex; justify-content: center; align-items: end; gap: 0; margin-top: var(--space-l); margin-inline: -2rem;
  box-shadow: 0 var(--px) 0 0 var(--c-bg); }
.fan { width: calc(32px * var(--s)); height: calc(48px * var(--s)); margin-inline: calc(-6px * var(--s)); overflow: hidden; flex: none; cursor: pointer;
  border: 0; padding: 0; background: none; }
.fan img { display: block; width: calc(192px * var(--s)); height: calc(1152px * var(--s)); max-width: none; image-rendering: pixelated;
  translate: 0 calc(var(--row) * -96px * var(--s)); }
.fan.is-horns img { translate: 0 calc((var(--row) * 2 + 1) * -48px * var(--s)); }
.fan:nth-child(even) { transform: translateY(calc(6px * var(--s))); }
@media (max-width: 60em) { .pit { --s: 3; } }
@media (max-width: 40em) { .pit { --s: 2; } .hero__hint { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-paused) .founder__sprite img { animation: bang6 0.62s steps(6) infinite; }
  html.js:not(.motion-paused) .founder__sprite.is-horns img { animation: horns3 0.4s steps(3) 1 forwards; }
  html.js:not(.motion-paused) .fan img { animation: bang6 var(--dur, 0.55s) steps(6) var(--delay, 0s) infinite; }
  html.js:not(.motion-paused) .fan.is-horns img { animation: horns3 0.4s steps(3) 1 forwards; }
}
@keyframes bang6 { to { transform: translateX(calc(-192px * var(--s))); } }
@keyframes horns3 { from { transform: translateX(0); } to { transform: translateX(calc(-96px * var(--s))); } }

/* FX canvas (explosions) */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; image-rendering: pixelated; }

/* Footer */
.site-footer { margin-top: 0; padding-block: var(--space-xl) var(--space-l); background: var(--c-bg); box-shadow: inset 0 var(--px) 0 0 var(--iron); }
.site-footer__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
.site-footer__mark { font-family: var(--font-display); font-size: min(var(--step-6), 12.5vw); line-height: var(--leading-display);
  text-transform: uppercase; color: var(--iron-hi); }
.site-footer__contact p { margin-top: var(--space-2xs); color: var(--c-muted); }
.site-footer__nav ul { list-style: none; padding: 0; display: grid; gap: var(--space-3xs); }
.site-footer__nav a, .site-footer__contact a { color: var(--c-ink); display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); color: var(--c-muted);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--iron); padding-top: var(--space-s); }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__motion { background: none; border: 0; padding: 0; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 52em) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
  .site-footer__mark, .site-footer__legal { grid-column: 1 / -1; }
}

/* 404 */
.not-found { min-height: 60svh; display: grid; align-content: center; gap: var(--space-m); padding-top: calc(var(--space-2xl) + 4rem); }