/* Bloke's Depot
   Layout: a night walk past the depot. Gate sign over wet tarmac, a departures board of
   what's moving, then rows of roller-shutter bays, one row per division.
   Single dark look by choice: rain-slicked industrial, gunmetal plates and safety yellow. */
:root {
  --night: #0d0f12;        /* wet tarmac */
  --tarmac: #14171b;
  --gunmetal: #2b2f33;
  --plate: #3a3f45;
  --edge: #1c1f22;
  --rivet: #7a8088;
  --hazard: #f5c400;       /* safety yellow: brand, Ready stage */
  --chalk: #e4e7eb;        /* main text, Sketch stage */
  --muted: #a7aeb6;        /* secondary text on tarmac */
  --muted-plate: #c3c8ce;  /* secondary text on plates */
  --dim: #79808a;
  --cad: #3ee0ff;          /* Design stage (CAD glow) */
  --dock: #ff4f97;         /* The Dock */
  --hr: #7fdcc4;           /* Bloke's HR: calmer teal, its own room */
  --display: 'Saira Stencil One', 'Impact', 'Arial Narrow Bold', sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(245, 196, 0, .07), transparent 60%),
    radial-gradient(80% 50% at 85% 110%, rgba(62, 224, 255, .05), transparent 60%),
    var(--night);
  background-attachment: fixed;
  color: var(--chalk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--hazard); text-underline-offset: 3px; }
a:hover { color: #ffd84d; }
:focus-visible { outline: 3px solid var(--cad); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.noscript { padding: 40px var(--gutter); }

#rain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .55;
}
.topbar, main, .footer { position: relative; z-index: 1; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--hazard); color: #111; padding: 8px 12px; font-weight: 600;
}
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* ---------------------------------------------------------------- shared pieces */
.stencil { font-family: var(--display); color: var(--hazard); letter-spacing: .02em; line-height: .95; text-shadow: 0 2px 0 var(--edge); }
.label { font-family: var(--label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* riveted gunmetal plate: rivets are drawn in the background, no extra markup */
.plate {
  --r: 9px;
  position: relative;
  background:
    radial-gradient(circle at var(--r) var(--r), var(--rivet) 2.6px, var(--edge) 3.4px, transparent 4.2px),
    radial-gradient(circle at calc(100% - var(--r)) var(--r), var(--rivet) 2.6px, var(--edge) 3.4px, transparent 4.2px),
    radial-gradient(circle at var(--r) calc(100% - var(--r)), var(--rivet) 2.6px, var(--edge) 3.4px, transparent 4.2px),
    radial-gradient(circle at calc(100% - var(--r)) calc(100% - var(--r)), var(--rivet) 2.6px, var(--edge) 3.4px, transparent 4.2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    var(--plate);
  border: 2px solid var(--edge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), 0 4px 0 var(--edge);
}
.plate--sm { --r: 6px; display: inline-flex; align-items: center; padding: 4px 18px; }
.plate--sm .stencil { font-size: 20px; }

.hazard-bar {
  height: 10px; border: 2px solid var(--edge);
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--edge) 10px 20px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 20px;
  font-family: var(--label); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 2px solid var(--edge);
  background: var(--hazard); color: #121212;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { color: #121212; filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn--ghost { background: transparent; color: var(--chalk); border-color: var(--rivet); box-shadow: none; }
.btn--ghost:hover { color: var(--hazard); border-color: var(--hazard); }
.btn--dock { background: var(--dock); color: #12060c; }
.btn--dock:hover { color: #12060c; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border: 1.5px solid currentColor;
  font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.chip::before { content: ''; width: 7px; height: 7px; background: currentColor; }
.chip--sketch { color: var(--chalk); }
.chip--design { color: var(--cad); }
.chip--ready { color: #121212; background: var(--hazard); border-color: var(--hazard); }
.chip--ready::before { background: #121212; }
.chip--dock { color: var(--dock); }
.chip--vacant { color: var(--dim); }
.chip--ai-part { color: var(--muted-plate); border-style: dashed; }
.chip--ai-full { color: #121212; background: var(--chalk); border-color: var(--chalk); }
.chip--ai-full::before { background: #121212; }
.bay-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet figcaption .chip { align-self: flex-start; margin-top: 6px; }

.section { display: flex; flex-direction: column; gap: 24px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.section-head h1, .section-head h2 { font-family: var(--label); font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.section-head p { color: var(--muted); max-width: 60ch; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: 10px var(--gutter);
  background: rgba(13, 15, 18, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122, 128, 136, .25);
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--chalk); }
.brand-name { font-family: var(--label); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: 15px; }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px;
  font-family: var(--label); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--chalk); }
.nav a[aria-current="page"] { color: var(--hazard); border-bottom-color: var(--hazard); }
.nav a.nav-dock { color: var(--dock); }
.nav a.nav-hr { color: var(--hr); }

/* ---------------------------------------------------------------- page frame */
main { display: block; outline: none; }
.page {
  max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--gutter); padding-block: 28px 72px;
  display: flex; flex-direction: column; gap: 72px;
}
.page > * { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--hazard); }

/* ---------------------------------------------------------------- gate (hero) */
.gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-top: 24px; }
.gate-sign { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gate-sign .kicker { font-family: var(--label); font-weight: 700; letter-spacing: .5em; text-transform: uppercase; font-size: clamp(14px, 2vw, 18px); color: var(--chalk); padding-left: .5em; }
.neon {
  font-family: var(--display); color: #fff3c4;
  font-size: clamp(54px, 12vw, 148px); line-height: .9; letter-spacing: .02em;
  text-shadow:
    0 0 2px #fff6d6, 0 0 10px var(--hazard), 0 0 26px rgba(245, 196, 0, .75),
    0 0 60px rgba(245, 196, 0, .45), 0 0 110px rgba(245, 196, 0, .25);
  animation: buzz 7s infinite steps(1);
}
.neon .bad { animation: dying 5.3s infinite steps(1); }
@keyframes buzz { 0%, 96%, 100% { opacity: 1; } 96.5% { opacity: .55; } 97.4% { opacity: 1; } 98% { opacity: .7; } }
@keyframes dying { 0%, 61%, 66%, 100% { opacity: 1; } 62% { opacity: .25; } 63.5% { opacity: .9; } 64.5% { opacity: .2; } }
.gate-reflection {
  font-family: var(--display); font-size: clamp(54px, 12vw, 148px); line-height: .9; letter-spacing: .02em;
  height: .5em; overflow: hidden; margin-top: 4px; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 95%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 95%);
}
.gate-reflection span { display: block; color: rgba(245, 196, 0, .45); filter: blur(2.5px); transform: scaleY(-1); transform-origin: 50% 45%; animation: ripple 5s ease-in-out infinite; }
@keyframes ripple { 0%, 100% { transform: scaleY(-1) skewX(0deg); } 50% { transform: scaleY(-1.04) skewX(1.5deg); } }
.gate .hazard-bar { width: min(420px, 80%); }
.gate-lede { max-width: 58ch; color: var(--muted); font-size: 19px; }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------------------------------------------------------------- departures board */
.board {
  border: 2px solid var(--edge); background: #08090b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .45);
}
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 18px; border-bottom: 2px solid var(--edge); background: var(--gunmetal); }
.board-head .stencil { font-size: 22px; }
.board-clock { font-family: var(--mono); color: var(--hazard); font-size: 15px; }
.board-scroll { overflow-x: auto; }
.board table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 15px; min-width: 560px; }
.board th { text-align: left; font-family: var(--label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; color: var(--dim); padding: 10px 18px; border-bottom: 1px solid #1d2126; }
.board td { white-space: nowrap; padding: 12px 18px; border-bottom: 1px solid #16191d; color: #ffe27a; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
/* each row takes its stage colour: Sketch white, Design cyan, Ready yellow */
.board tr.row--sketch td { color: var(--chalk); }
.board tr.row--design td { color: var(--cad); }
.board tr.row--ready td { color: var(--hazard); }
.board tr.vacant td { color: #3d434b; }
.board tbody tr { transition: background .15s; }
.board tbody tr[data-href] { cursor: pointer; }
.board tbody tr[data-href]:hover { background: #111419; }
.board td a { color: inherit; text-decoration: none; }
.board td a:hover { text-decoration: underline; }
.flap { display: inline-block; background: #121418; border: 1px solid #23272d; padding: 1px 7px; margin-right: 2px; }

/* ---------------------------------------------------------------- pipeline */
.pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: stage; }
.stage { position: relative; padding: 22px 22px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.stage::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--stage-colour); box-shadow: 0 0 14px var(--stage-colour);
}
.stage--sketch { --stage-colour: var(--chalk); }
.stage--design { --stage-colour: var(--cad); }
.stage--ready { --stage-colour: var(--hazard); }
.stage-num { font-family: var(--mono); font-size: 13px; color: var(--stage-colour); letter-spacing: .1em; }
.stage h3 { font-family: var(--label); font-weight: 700; font-size: 28px; letter-spacing: .08em; text-transform: uppercase; color: var(--stage-colour); }
.stage p { color: var(--muted); max-width: 34ch; }

/* ---------------------------------------------------------------- division doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.door {
  position: relative; display: flex; flex-direction: column; min-height: 300px;
  text-decoration: none; color: var(--chalk); overflow: hidden;
  border: 2px solid var(--edge); background: #0a0c0f;
}
.door-bay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px;
  background: radial-gradient(60% 55% at 50% 100%, rgba(245, 196, 0, .32), transparent 70%), #0b0d10;
  color: var(--hazard);
}
.door-bay svg { width: 96px; height: 96px; filter: drop-shadow(0 0 10px rgba(245, 196, 0, .6)); }
.door--quiet .door-bay { background: radial-gradient(60% 55% at 50% 100%, rgba(122, 128, 136, .18), transparent 70%), #0b0d10; color: var(--rivet); }
.door--quiet .door-bay svg { filter: none; }
.shutter {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 18px 16px;
  background:
    repeating-linear-gradient(180deg, #353a40 0 14px, #2a2e33 14px 16px, #24282c 16px 17px),
    #30353a;
  border-bottom: 6px solid var(--edge);
  transition: transform .55s cubic-bezier(.3, .7, .2, 1);
}
.door:hover .shutter, .door:focus-visible .shutter { transform: translateY(-58%); }
.door-plate { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.door-plate .label { color: var(--chalk); font-size: 12px; letter-spacing: .3em; }
.door-plate .stencil { font-size: clamp(24px, 2.3vw, 30px); overflow-wrap: anywhere; }
.door-plate .cat { font-family: var(--label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--muted-plate); }
.door-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.door-counts .chip { background: rgba(13, 15, 18, .78); }
.door-counts .chip--ready { background: var(--hazard); }
.working { font-family: var(--mono); font-size: 11px; color: var(--dock); letter-spacing: .08em; }

/* ---------------------------------------------------------------- division page */
.div-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 28px; align-items: center; }
.div-plate { display: flex; align-items: center; gap: 18px; padding: 22px 34px 22px 26px; }
.icon-box { width: 84px; height: 84px; flex: none; display: grid; place-items: center; background: var(--gunmetal); border: 2px solid var(--edge); color: var(--hazard); }
.icon-box svg { width: 60px; height: 60px; }
.div-plate .label { color: var(--chalk); letter-spacing: .32em; }
.div-plate .stencil { font-size: clamp(44px, 7vw, 72px); }
.div-plate .cat { font-family: var(--label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-plate); font-size: 14px; }
.div-intro { display: flex; flex-direction: column; gap: 14px; }
.div-intro p { color: var(--muted); max-width: 52ch; font-size: 19px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 40px; padding: 4px 14px; cursor: pointer;
  font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  background: transparent; color: var(--muted); border: 1.5px solid #3a3f45;
}
.filter:hover { color: var(--chalk); border-color: var(--rivet); }
.filter[aria-pressed="true"] { color: #121212; background: var(--chalk); border-color: var(--chalk); }

/* ---------------------------------------------------------------- bays */
.bays { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.bay {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tarmac); border: 2px solid var(--edge);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.bay-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--gunmetal); border-bottom: 2px solid var(--edge); }
.bay-top .mono { color: var(--hazard); font-size: 14px; letter-spacing: .08em; }
.bay-shot { position: relative; aspect-ratio: 4 / 3; background: #0a0c0f; overflow: hidden; display: block; }
.bay-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bay:hover .bay-shot img { transform: scale(1.03); }
.bay-shot--paper img { object-fit: contain; background: #f4f3ef; }
.placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 20px; color: var(--dim);
  background:
    repeating-linear-gradient(180deg, #1a1d21 0 18px, #15181b 18px 20px);
}
.placeholder svg { width: 72px; height: 72px; color: #4a5058; }
.placeholder .label { color: var(--muted); }
.bay-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; flex: 1; }
.bay-name { display: flex; flex-direction: column; gap: 2px; }
.bay-name h3 { font-family: var(--label); font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.bay-name h3 a { color: var(--chalk); text-decoration: none; }
.bay-name h3 a:hover { color: var(--hazard); }
.bay-name .sub { color: var(--muted); font-size: 15px; }
.bay-line { font-family: var(--mono); font-size: 12px; color: var(--cad); letter-spacing: .1em; text-transform: uppercase; }
.bay-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.bay-actions .btn { min-height: 42px; font-size: 15px; padding: 8px 14px; }

.track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.track span {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #4b515a;
}
.track span::before { content: ''; height: 5px; background: #24282d; }
.track .on { color: var(--c); }
.track .on::before { background: var(--c); box-shadow: 0 0 10px var(--c); }
.track .s1 { --c: var(--chalk); }
.track .s2 { --c: var(--cad); }
.track .s3 { --c: var(--hazard); }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.specs div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.specs dt { font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.specs dd { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--chalk); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.specs dd.tbc { color: var(--dim); }
.badge-sf {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #0e1a10; background: #7ee08a; padding: 3px 10px;
}
.badge-sf svg { width: 14px; height: 14px; }

.bay--vacant .bay-shot { aspect-ratio: auto; flex: 1; min-height: 260px; }
.bay--vacant .placeholder::after {
  content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 26px;
  transform: translateY(-50%) rotate(-7deg);
  background: repeating-linear-gradient(45deg, var(--hazard) 0 14px, #121212 14px 28px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5); opacity: .85;
}
.bay--vacant .placeholder { gap: 76px; }
.bay--vacant .placeholder > * { position: relative; z-index: 1; background: rgba(13, 15, 18, .9); padding: 4px 10px; }

/* ---------------------------------------------------------------- bay detail */
.detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--edge); background: #0a0c0f; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; background: #f4f3ef; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs button { width: 84px; height: 64px; padding: 0; border: 2px solid var(--edge); background: #0a0c0f; cursor: pointer; }
.thumbs button[aria-current="true"] { border-color: var(--hazard); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.spec-card { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 24px; }
.spec-card .mono.code { color: var(--hazard); font-size: 15px; letter-spacing: .1em; }
.spec-card h1 { font-family: var(--display); color: var(--hazard); font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: .95; text-shadow: 0 3px 0 var(--edge); }
.spec-card .sub { color: var(--muted-plate); }
.spec-card .specs dt { color: #a1a8b0; }
.spec-card .specs dd.tbc { color: #a1a8b0; }
.cta-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: rgba(13, 15, 18, .55); border: 1px solid var(--edge); }
.cta-box p { color: var(--muted-plate); font-size: 15px; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.log li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid #23272d; }
.log li:last-child { border-bottom: 1px solid #23272d; }
.log .mono { color: var(--hazard); font-size: 14px; }
.log .next { color: var(--cad); }
.summary { font-size: 19px; color: var(--chalk); max-width: 60ch; }

/* ---------------------------------------------------------------- sketchbook */
.sketch-set { display: flex; flex-direction: column; gap: 14px; }
.sketch-set-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; border-top: 1px solid #23272d; padding-top: 18px; }
.sketch-set-head h3 { font-family: var(--label); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .05em; }
.sketch-set > p { color: var(--muted); max-width: 64ch; }
.strip { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.sheet { margin: 0; display: flex; flex-direction: column; background: var(--tarmac); border: 2px solid var(--edge); min-width: 0; }
.sheet-img { aspect-ratio: 1 / 1.05; background: #f4f3ef; overflow: hidden; }
.sheet-img img { width: 100%; height: 100%; object-fit: contain; }
.sheet figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.sheet .mono { color: var(--hazard); font-size: 13px; letter-spacing: .08em; }
.sheet .cap { font-size: 15px; }
.strip--feature { --n: 1; }
.strip--feature .sheet-img { aspect-ratio: auto; }
.strip--feature .sheet-img img { height: auto; max-height: 72vh; }
.arrow { color: var(--dim); font-family: var(--mono); }

/* ---------------------------------------------------------------- the dock */
.dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dock-pitch { display: flex; flex-direction: column; gap: 18px; }
.dock-pitch h1 { font-family: var(--display); font-weight: 400; color: #ffd6e7; font-size: clamp(48px, 8vw, 96px); line-height: .9;
  text-shadow: 0 0 2px #fff, 0 0 12px var(--dock), 0 0 34px rgba(255, 79, 151, .6), 0 0 80px rgba(255, 79, 151, .3); }
.dock-pitch p { color: var(--muted); max-width: 52ch; font-size: 19px; }
.perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.perks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.perks svg { width: 26px; height: 26px; color: var(--dock); margin-top: 2px; }
.perks strong { display: block; font-family: var(--label); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.perks span { color: var(--muted); }
.dock-form {
  display: flex; flex-direction: column; gap: 16px; padding: 26px 24px;
  background: #0b0c10; border: 2px solid var(--dock);
  box-shadow: 0 0 0 4px rgba(255, 79, 151, .12), 0 0 40px rgba(255, 79, 151, .18);
}
.dock-form h2 { font-family: var(--label); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: .08em; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-family: var(--label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 14px; color: var(--chalk); }
.field .hint { color: var(--dim); font-size: 14px; }
.field input[type="text"], .field input[type="email"] {
  min-height: 48px; padding: 10px 12px; font: 500 17px var(--body);
  color: var(--chalk); background: #15171c; border: 1.5px solid #3a3f45;
}
.field input:focus { border-color: var(--dock); outline: none; box-shadow: 0 0 0 3px rgba(255, 79, 151, .25); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px;
  font-family: var(--label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px;
  border: 1.5px solid #3a3f45; color: var(--muted);
}
.check input:checked + span { border-color: var(--dock); color: var(--dock); background: rgba(255, 79, 151, .1); }
.check input:focus-visible + span { outline: 3px solid var(--cad); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--muted); font-size: 15px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dock); }
.form-msg { font-size: 15px; padding: 10px 12px; border-left: 3px solid var(--dock); background: rgba(255, 79, 151, .08); }
.form-msg.ok { border-color: #7ee08a; background: rgba(126, 224, 138, .08); }
.hp { position: absolute; left: -9999px; }
.dock-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  padding: 26px 28px; border: 2px solid var(--dock); background: #0b0c10;
  box-shadow: 0 0 40px rgba(255, 79, 151, .14);
}
.dock-cta h2 { font-family: var(--display); font-weight: 400; color: #ffd6e7; font-size: clamp(34px, 5vw, 52px); line-height: .95; text-shadow: 0 0 12px var(--dock), 0 0 30px rgba(255, 79, 151, .5); }
.dock-cta p { color: var(--muted); max-width: 56ch; margin-top: 8px; }

.dock-how {
  display: flex; flex-direction: column; gap: 18px; padding: 26px 24px;
  background: #0b0c10; border: 2px solid var(--dock);
  box-shadow: 0 0 0 4px rgba(255, 79, 151, .12), 0 0 40px rgba(255, 79, 151, .18);
}
.dock-opens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--chalk); font-size: 17px; }
.vip-card .label { color: #ff9cc4; }
.vip-perks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vip-perks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.vip-perks svg { width: 22px; height: 22px; padding: 3px; color: #12060c; background: var(--dock); }
.vip-tba { margin-top: 6px; color: var(--muted); }
.dock-costs { margin-top: 8px; }
.ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ranks li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; background: var(--tarmac); border: 2px solid var(--edge); border-top: 3px solid var(--dock); }
.ranks .chip { font-size: 15px; }
.ranks p { color: var(--muted); }
.rank-off { display: flex; align-items: baseline; gap: 10px; }
.rank-off strong { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: #ffd6e7; text-shadow: 0 0 10px var(--dock), 0 0 24px rgba(255, 79, 151, .45); }
.ranks .rank-off span { color: var(--chalk); font-size: 15px; }
@media (max-width: 900px) { .ranks { grid-template-columns: minmax(0, 1fr); } }
.dock-how h2 { font-family: var(--label); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: .08em; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps .mono { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--dock); color: var(--dock); font-weight: 700; }
.steps strong { display: block; font-family: var(--label); font-weight: 700; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.steps span:not(.mono) { color: var(--muted); }
.example { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed #4a5058; }
.example .btn { pointer-events: none; font-size: 14px; min-height: 40px; padding: 8px 12px; }
.hint-small, .dock-pitch .hint-small { color: var(--dim); font-size: 14px; }
.dock--alerts { padding-top: 32px; border-top: 1px solid #23272d; }
.alerts-title { font-family: var(--label); font-weight: 700; font-size: clamp(30px, 4vw, 42px); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------- raised on */
.raised { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid #23272d; }
@media (max-width: 900px) { .raised { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .raised { grid-template-columns: minmax(0, 1fr); } }
.raised li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid #23272d; min-width: 0; }
.raised-name { font-family: var(--display); color: var(--cad); font-size: 26px; line-height: 1; text-shadow: 0 0 12px rgba(62, 224, 255, .45); }
.raised-line { color: var(--muted); font-size: 16px; max-width: 32ch; }

/* ---------------------------------------------------------------- the Depot computer + toast */
.comms { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.comms .label { font-size: 12px; }
.comms-prompt { color: var(--cad); }
.comms input {
  min-height: 40px; width: min(240px, 60vw); padding: 6px 10px;
  background: #08090b; color: var(--cad); border: 1.5px solid #2a2f35; font-size: 15px; caret-color: var(--cad);
}
.comms input::placeholder { color: #4f6b73; }
.comms input:focus { outline: none; border-color: var(--cad); box-shadow: 0 0 0 3px rgba(62, 224, 255, .2); }
.comms-btn {
  min-height: 40px; padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--cad); border: 1.5px solid var(--cad);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.comms-btn:hover, .comms-btn[aria-expanded="true"] { background: rgba(62, 224, 255, .12); box-shadow: 0 0 14px rgba(62, 224, 255, .25); }
.comms-btn:focus-visible, .cmd:focus-visible, .comms-close:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.comms-list {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 15;
  width: min(460px, calc(100vw - 2 * var(--gutter)));
  padding: 14px 16px 12px; background: #08090b; border: 1.5px solid var(--cad);
  box-shadow: 0 0 30px rgba(62, 224, 255, .18), 0 12px 30px rgba(0, 0, 0, .6);
}
.comms-list[hidden], .term[hidden] { display: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.term-btn {
  min-width: 44px; height: 36px; padding: 0 8px; cursor: pointer;
  background: rgba(62, 224, 255, .06); color: var(--cad); border: 1.5px solid var(--cad);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 0 12px rgba(62, 224, 255, .2);
}
.term-btn:hover, .term-btn[aria-expanded="true"] { background: rgba(62, 224, 255, .16); box-shadow: 0 0 18px rgba(62, 224, 255, .35); }
.term-btn:focus-visible, .board-term:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term {
  position: absolute; top: calc(100% + 8px); left: var(--gutter); z-index: 15;
  width: min(480px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 110px); overflow-y: auto;
  padding: 14px 16px 12px; background: #08090b; border: 1.5px solid var(--cad);
  box-shadow: 0 0 30px rgba(62, 224, 255, .18), 0 12px 30px rgba(0, 0, 0, .6);
}
.term-form { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.term-form input {
  flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px;
  background: #0d0f12; color: var(--cad); border: 1.5px solid #2a2f35; font-size: 15px; caret-color: var(--cad);
}
.term-form input::placeholder { color: #4f6b73; }
.term-form input:focus { outline: none; border-color: var(--cad); box-shadow: 0 0 0 3px rgba(62, 224, 255, .2); }
.board-term {
  display: block; width: 100%; padding: 8px 18px; cursor: pointer; text-align: left;
  background: #08090b; color: var(--cad); border: 0; border-bottom: 2px solid var(--edge); font-size: 14px;
}
.board-term b { color: var(--hazard); font-weight: 700; }
.board-term:hover { background: rgba(62, 224, 255, .08); }
.comms-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.comms-list-head .label { color: var(--cad); }
.head-btns { display: flex; align-items: center; gap: 8px; }
.sound-btn { cursor: pointer; }
.term .sound-btn { height: 32px; padding: 0 10px; background: transparent; color: var(--cad); border: 1px solid #23414a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sound-btn[aria-pressed="false"] { color: var(--dim); border-color: #2a2f35; }
.sound-btn:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.comms-close { width: 32px; height: 32px; padding: 0; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid #2a2f35; font-size: 20px; line-height: 1; }
.comms-close:hover { color: var(--chalk); border-color: var(--muted); }
.cmd-rows { list-style: none; margin: 0; padding: 0; }
.cmd-rows li { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid #1d2126; }
.cmd {
  justify-self: start; padding: 3px 8px; cursor: pointer;
  background: transparent; color: var(--cad); border: 1px solid #23414a; font-size: 14px; text-align: left;
}
.cmd::before { content: '> '; color: var(--dim); }
.cmd:hover { border-color: var(--cad); background: rgba(62, 224, 255, .1); }
@media (max-width: 480px) { .cmd-rows li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.cmd-desc { display: flex; flex-direction: column; gap: 2px; color: var(--chalk); font-size: 15px; }
.cmd-also { color: var(--dim); font-size: 12px; }
.cmd-hint { margin-top: 8px; color: var(--dim); font-size: 13px; }
/* "trust the awesomeness": a golden flare washes over the page */
.awesome::after {
  content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(245, 196, 0, .42), rgba(245, 196, 0, .08) 45%, transparent 70%);
  animation: awe 1.7s ease-out forwards;
}
@keyframes awe { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* "stasis": everything greys out and the rain freezes for a few seconds */
.topbar, main, .footer, #rain { transition: filter .6s ease; }
.stasis .topbar, .stasis main, .stasis .footer, .stasis #rain { filter: grayscale(1) brightness(.55) contrast(1.1); }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 18px;
  font-family: var(--mono); font-size: 15px; color: var(--cad); background: #08090b;
  border: 1.5px solid var(--cad); box-shadow: 0 0 24px rgba(62, 224, 255, .25);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- footer */
.footer {
  max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--gutter); padding-block: 26px 40px;
  display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #23272d;
}
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.footer-divisions { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 14px; }
.footer-divisions a { color: var(--muted); text-decoration: none; }
.footer-divisions a:hover { color: var(--hazard); }
.footer-small { color: var(--dim); font-size: 14px; }

/* ---------------------------------------------------------------- page change */
.page { animation: rise .35s ease both; }
@keyframes rise { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the bloke */
.bloke-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.bloke-intro { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.bloke-intro h1 { font-family: var(--display); font-weight: 400; color: var(--hazard); font-size: clamp(44px, 7vw, 84px); line-height: .92;
  text-shadow: 0 0 16px rgba(245, 196, 0, .32), 0 3px 0 var(--edge); }
.bloke-intro p { color: var(--muted); font-size: 19px; max-width: 58ch; }
.bloke-intro p:first-of-type { color: var(--chalk); font-size: 21px; }
.id-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 22px 22px; }
.id-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-inline: 8px; }
.id-card .code { color: var(--hazard); font-size: 14px; letter-spacing: .12em; }
.mugshot { display: flex; flex-direction: column; border: 2px solid var(--edge); background: #0a0c0f; }
.mugshot > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mugshot-empty { aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px), #101317; }
.mugshot-empty img { width: 96px; height: 96px; }
.mugshot-empty .mono { color: var(--dim); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.mugshot .hazard-bar { border: 0; border-top: 2px solid var(--edge); }
.id-name { font-size: clamp(36px, 4.4vw, 48px); font-weight: 400; }
.id-card .sub { color: var(--muted-plate); }
.id-card .specs dt { color: #a1a8b0; }

.story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.story-text { display: flex; flex-direction: column; gap: 16px; }
.story-text > p { color: var(--muted); font-size: 18px; max-width: 62ch; }
.story-text > p.story-intro { color: var(--chalk); font-size: 20px; }
.chapters { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.chapters li { position: relative; padding: 0 0 24px 36px; }
.chapters li::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: -4px; width: 2px; background: #2b3036; }
.chapters li:last-child { padding-bottom: 4px; }
.chapters li:last-child::before { display: none; }
.chapters li::after { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: var(--night); border: 2px solid var(--hazard); }
.chapters li:last-child::after { background: var(--hazard); box-shadow: 0 0 12px rgba(245, 196, 0, .5); }
.chapters .tag { font-family: var(--mono); color: var(--hazard); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.chapters strong { display: block; margin: 2px 0 4px; font-family: var(--label); font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; }
.chapters p { color: var(--muted); max-width: 60ch; }
.ai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--dim); font-size: 14px; }
.story-quote { margin: 8px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--hazard); }
.story-quote p { font-family: var(--display); color: var(--hazard); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05;
  text-shadow: 0 0 14px rgba(245, 196, 0, .3); }
.ai-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--tarmac); border: 2px solid var(--edge); border-top: 3px solid var(--hazard); }
.ai-card h3 { font-family: var(--label); font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; }
.ai-card > p { color: var(--muted); }
.ai-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ai-card li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid #23272d; }
.ai-card li .chip { justify-self: start; }

.reasons { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #23272d; }
.reasons li { display: grid; grid-template-columns: 64px minmax(0, 17rem) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid #23272d; }
.reasons .mono { color: var(--hazard); font-size: 15px; letter-spacing: .1em; }
.reasons strong { font-family: var(--label); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; }
.reasons p { color: var(--muted); max-width: 62ch; }

.workshop { margin: 0; border: 2px solid var(--edge); background: #0a0c0f; }
.workshop img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
.workshop figcaption { padding: 10px 14px; color: var(--muted); font-size: 15px; border-top: 2px solid var(--edge); }
@media (max-width: 640px) { .workshop img { aspect-ratio: 4 / 3; } }
.bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.bench li { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; background: var(--tarmac); border: 2px solid var(--edge); border-top: 3px solid var(--cad); }
.bench .label { color: var(--cad); }
.off-shift { color: var(--muted); }
.off-shift .label { margin-right: 12px; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.rules li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; background: var(--tarmac); border: 2px solid var(--edge); }
.rules svg { width: 30px; height: 30px; padding: 4px; color: #121212; background: var(--hazard); }
.rules strong { display: block; font-family: var(--label); font-weight: 700; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.rules span { color: var(--muted); }

@media (max-width: 900px) {
  .bloke-hero, .bench, .story { grid-template-columns: minmax(0, 1fr); }
  .reasons li { grid-template-columns: 48px minmax(0, 1fr); }
  .reasons p { grid-column: 2; }
}
@media (max-width: 640px) {
  .rules { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 900px) {
  .detail, .dock, .div-head { grid-template-columns: minmax(0, 1fr); }
  .strip { --n: 2 !important; }
  .strip--feature { --n: 1 !important; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .pipeline { grid-template-columns: minmax(0, 1fr); }
  .stage { padding-right: 0; }
  .dock-cta { grid-template-columns: minmax(0, 1fr); }
  .div-plate { padding: 18px 20px; }
  .icon-box { width: 64px; height: 64px; }
  .icon-box svg { width: 46px; height: 46px; }
  .door { min-height: 190px; }
  .brand-name { display: none; }
  .topbar { padding-block: 8px 0; gap: 4px; }
  .nav { width: 100%; }
  .nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding-inline: 10px; }
}
@media (max-width: 420px) {
  .strip { --n: 1 !important; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .neon, .neon .bad, .gate-reflection span, .page { animation: none; }
  .shutter, .bay-shot img, .btn, .toast { transition: none; }
  .blink { animation: none; }
  .awesome::after { animation: none; opacity: 0; }
  .door:hover .shutter, .door:focus-visible .shutter { transform: translateY(-58%); }
}


/* ------------------------------------------------------------------ Bloke's HR
   Mental health section. Same depot, quieter light: a steady teal sign, no buzz,
   longer measure for reading. */
.btn--hr { background: var(--hr); color: #071613; }
.btn--hr:hover { color: #071613; }

.hr-door {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  padding: 26px 28px; border: 2px solid var(--hr); background: #0a0e0e;
  box-shadow: 0 0 40px rgba(127, 220, 196, .1);
}
.hr-door h2 { font-family: var(--display); font-weight: 400; color: #dff8f1; font-size: clamp(34px, 5vw, 52px); line-height: .95; margin-top: 4px;
  text-shadow: 0 0 10px rgba(127, 220, 196, .7), 0 0 28px rgba(127, 220, 196, .35); }
.hr-door p { color: var(--muted); max-width: 58ch; margin-top: 8px; }

.page--hr { gap: 48px; }
.hr-gate { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; max-width: 760px; margin: 0 auto; width: 100%; }
.hr-neon {
  font-family: var(--display); font-weight: 400; color: #e8fbf6; text-align: center;
  font-size: clamp(44px, 10vw, 112px); line-height: .9; letter-spacing: .02em;
  text-shadow: 0 0 2px #f2fffb, 0 0 10px var(--hr), 0 0 26px rgba(127, 220, 196, .6), 0 0 70px rgba(127, 220, 196, .3);
}
.hr-bar { width: min(420px, 80%); background: repeating-linear-gradient(-45deg, var(--hr) 0 10px, var(--edge) 10px 20px); }
.hr-gate-text { display: flex; flex-direction: column; gap: 14px; text-align: center; max-width: 60ch; }
.hr-gate-text p { font-size: 19px; color: var(--chalk); }
.hr-gate-text p + p { color: var(--muted); }

.helplines { width: 100%; padding: 20px 22px; border: 1px solid #2a3a37; border-left: 4px solid var(--hr); background: rgba(10, 18, 17, .85); }
.helplines h2 { font-family: var(--label); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: #dff8f1; }
.helplines ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.helplines li { display: flex; flex-direction: column; gap: 2px; }
.helplines strong { font-size: 18px; }
.helplines strong a { color: var(--hr); }
.helplines li > span:last-child { color: var(--muted); }

.hr-enter { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hr-consent { display: flex; gap: 14px; align-items: flex-start; max-width: 56ch; padding: 16px 18px; border: 1px solid var(--rivet); background: #0b0d10; cursor: pointer; }
.hr-consent:hover { border-color: var(--hr); }
.hr-consent input { appearance: none; flex: 0 0 auto; width: 26px; height: 26px; margin: 1px 0 0; border: 2px solid var(--hr); background: transparent; cursor: pointer; display: grid; place-content: center; }
.hr-consent input::after { content: ''; width: 12px; height: 7px; border: 3px solid #071613; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.hr-consent input:checked { background: var(--hr); }
.hr-consent input:checked::after { opacity: 1; }
.hr-consent input:focus-visible { outline: 3px solid var(--cad); outline-offset: 3px; }
.hr-enter .form-msg { border-color: var(--hr); background: rgba(127, 220, 196, .08); }

.hr-head { display: flex; flex-direction: column; gap: 12px; }
.hr-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 88px); line-height: .9; color: #e8fbf6;
  text-shadow: 0 0 10px rgba(127, 220, 196, .55), 0 0 30px rgba(127, 220, 196, .25); }
.hr-head p { color: var(--muted); font-size: 18px; max-width: 62ch; }
.hr-head p:first-of-type { color: var(--chalk); }
.hr-wait { color: var(--muted); }

.hr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hr-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid #2a3a37; border-left: 4px solid var(--hr);
  background: rgba(13, 15, 18, .85); color: var(--chalk); text-decoration: none; transition: border-color .15s, transform .15s; }
.hr-card:hover { color: var(--chalk); border-color: var(--hr); transform: translateX(3px); }
.hr-card h2 { font-family: var(--label); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; }
.hr-card p { color: var(--muted); max-width: 62ch; }
.hr-date { color: var(--hr); font-size: 14px; letter-spacing: .08em; }
.hr-card-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.hr-topics { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--muted); font-size: 15px; }
.hr-topics .label { font-size: 12px; }

.hr-post { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.hr-post header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid #23272d; }
.hr-post h1 { font-family: var(--label); font-weight: 700; font-size: clamp(34px, 5.5vw, 56px); line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; color: #e8fbf6; }
.hr-greeting { font-family: var(--label); font-weight: 700; font-size: 24px; letter-spacing: .04em; color: var(--hr); }
.hr-text { display: flex; flex-direction: column; gap: 18px; font-size: 19px; line-height: 1.7; }
.hr-text h2 { font-family: var(--label); font-weight: 700; font-size: 28px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--hr); margin-top: 18px; }
.hr-text ul, .hr-text ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.hr-text li::marker { color: var(--hr); font-family: var(--mono); }
.hr-text strong { color: #fff; }
.hr-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
.hr-more a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #23272d; text-decoration: none; color: var(--chalk); }
.hr-more a:hover { border-color: var(--hr); color: var(--chalk); }
.hr-more .hr-newer { text-align: right; grid-column: 2; }
.page--hr .helplines { max-width: 720px; }
.hr-about-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; max-width: 720px;
  padding: 16px 20px; border: 1px dashed var(--hr); color: var(--chalk); text-decoration: none; }
.hr-about-link:hover { color: var(--chalk); background: rgba(127, 220, 196, .06); }
.hr-about-link strong { font-family: var(--label); font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--hr); }
.hr-about-link span:last-child { grid-column: 1 / -1; color: var(--muted); }
.hr-text-note { color: var(--muted); font-size: 16px; }
.hr-ai-note { color: var(--muted-plate); font-size: 15px; max-width: 62ch; }
.page--hr .hr-gate .helplines { max-width: none; }
.hr-reply { max-width: 720px; font-size: 20px; color: #e8fbf6; }
.hr-leave { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 640px) {
  .hr-door { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .helplines ul { grid-template-columns: minmax(0, 1fr); }
  .hr-gate-text { text-align: left; }
  .hr-text { font-size: 18px; }
  .hr-more { grid-template-columns: minmax(0, 1fr); }
  .hr-more .hr-newer { grid-column: auto; text-align: left; }
}

/* Big division plates: keep long names on narrow phones */
@media (max-width: 420px) { .div-plate .stencil { font-size: 10.5vw; } }

.helplines-note { margin: 6px 0 12px; }