/* ==========================================================================
   Helm — black, deep red, brass. Angular plate, tide-gauge details.
   ========================================================================== */

:root {
  /* Surfaces */
  --ink: #08070a;
  --ink-2: #0e0b0d;
  --plate: #151012;
  --plate-2: #1c1517;
  --seam: #2c2326;

  /* Reds (accent + fills only; never small text on ink) */
  --red-900: #2a0507;
  --red-800: #45080c;
  --red-700: #6e0b11;
  --red-600: #8b1016;
  --red-500: #b0151d;
  --red-400: #d02a2f;

  /* Brass (safe for text on ink: ~7.7:1) */
  --brass: #c29a52;
  --brass-hi: #e2c07e;
  --brass-dim: #7d6237;

  /* Text */
  --bone: #ece4d4;
  --muted: #a8a093;

  /* Type */
  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Spacing (8pt rhythm) */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 900ms;

  /* Layers */
  --z-tide: 0;
  --z-content: 1;
  --z-gauge: 20;
  --z-head: 40;
  --z-toast: 90;
  --z-intro: 100;
  --z-cursor: 110;

  /* Angular plate corners */
  --cut: 14px;
  --plate-clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 1rem/1.65 var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: .02em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.08; }
h3 { font-size: 1.2rem; line-height: 1.25; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.mono { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--brass); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.eyebrow { color: var(--brass); margin-bottom: var(--s-3); display: flex; align-items: center; gap: 12px; font-weight: 500; line-height: 1.4; }
.section__head h2.eyebrow + .section__lede { margin-top: 0; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }

main { position: relative; z-index: var(--z-content); }
main:focus { outline: none; }

.section { position: relative; padding-block: var(--s-8); }
@media (min-width: 1024px) { .section { padding-block: var(--s-9); } }
.section__head { max-width: 760px; margin-bottom: var(--s-6); }
.section__head h2 + .section__lede { margin-top: var(--s-4); }
.section__lede { color: var(--muted); font-size: 1.0625rem; max-width: 62ch; }

/* ---------- Buttons & links ---------- */
.btn {
  --bg: transparent; --fg: var(--bone); --bd: var(--seam);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font: 600 .875rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--red { --bg: var(--red-600); --bd: var(--red-500); --fg: #fff6ee; }
.btn--red:hover { --bg: var(--red-500); }
.btn--brass { --bg: transparent; --bd: var(--brass-dim); --fg: var(--brass-hi); }
.btn--brass:hover { --bg: rgba(194, 154, 82, .12); --bd: var(--brass); }
.btn--ghost { --bd: rgba(236, 228, 212, .28); }
.btn--ghost:hover { --bd: var(--bone); --bg: rgba(236, 228, 212, .06); }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: .75rem; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: .9375rem; }
.btn--block { width: 100%; }

.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--brass-hi); font: 500 .8125rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.link::after { content: "→"; transition: transform var(--t-fast) var(--ease-out); }
.link:hover::after { transform: translateX(4px); }
.link:hover { color: var(--bone); }

/* ---------- Masthead (X-like spare bar) ---------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-head);
  display: flex; align-items: center; gap: var(--s-4);
  height: 68px; padding-inline: 20px;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
/* Near-solid instead of a backdrop blur: the blur had to be redrawn on every scroll frame */
.masthead.is-solid { background: rgba(8, 7, 10, .95); border-color: var(--seam); }
@media (min-width: 768px) { .masthead { padding-inline: 40px; } }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand__mark { width: 34px; height: 46px; flex: none; overflow: visible; }
.brand__lockup { display: grid; gap: 5px; }
.brand__word { font: 700 1.05rem/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; }
.brand__tag {
  font: 500 .58rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
  padding-top: 5px; border-top: 1px solid var(--brass-dim);
}
@media (max-width: 379px) { .brand__tag { display: none; } }

/* Logo mark: same plates as the intro. They assemble on arrival and loosen on hover. */
.brand__mark { filter: brightness(1.25) contrast(1.05) drop-shadow(0 0 6px rgba(176, 21, 29, .35)); }
.lp { transform-box: view-box; }
.js .lp { opacity: 0; transform: translate(calc(var(--dx) * 8), calc(var(--dy) * 8)); }
.brand.is-built .lp {
  opacity: 1; transform: none;
  transition: transform 900ms var(--ease-out) calc(var(--i) * 50ms), opacity 500ms var(--ease-out) calc(var(--i) * 50ms);
}
.brand.is-built:hover .lp, .brand.is-built:focus-visible .lp {
  transform: translate(var(--dx), var(--dy));
  transition: transform 400ms var(--ease-out);
}

.nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--s-2); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--muted); text-decoration: none; font: 500 .8125rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: color var(--t-fast);
}
.nav a:hover, .nav a.is-active { color: var(--bone); }
.nav a.is-active { box-shadow: inset 0 -2px 0 var(--red-400); }

.sound-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--seam); color: var(--brass); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.sound-btn:hover { border-color: var(--brass); }
.sound-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .sound-btn__on { display: none; }
.sound-btn[aria-pressed="true"] { color: var(--brass-hi); border-color: var(--brass-dim); background: rgba(194,154,82,.08); }
.sound-btn[aria-pressed="true"] .sound-btn__on { display: inline; }
.sound-btn[aria-pressed="true"] .sound-btn__off { display: none; }

.menu-btn {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--seam); color: var(--bone); cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; margin: auto; display: block; }

.masthead .sound-btn { margin-left: calc(var(--s-2) - var(--s-4)); }
.replay-btn svg path:last-child { fill: currentColor; stroke: none; }

/* Volume: a mixer button that opens a small brass slider panel */
.vol { position: relative; flex: none; margin-left: calc(var(--s-2) - var(--s-4)); }
.masthead .vol .sound-btn { margin-left: 0; }
.vol-btn .vol-btn__knob { stroke-width: 3; }
.vol-btn[aria-expanded="true"] { color: var(--brass-hi); border-color: var(--brass-dim); background: rgba(194,154,82,.08); }
.vol__panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 200px; padding: 12px 14px 14px; z-index: 60;
  background: rgba(8, 7, 10, .97); border: 1px solid var(--brass-dim);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.vol__panel[hidden] { display: none; }
.vol__label { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.vol__label output { color: var(--bone); }
.vol__range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: pointer; margin: 0; }
.vol__range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--brass) var(--fill, 100%), var(--seam) var(--fill, 100%)); }
.vol__range::-moz-range-track { height: 4px; background: var(--seam); }
.vol__range::-moz-range-progress { height: 4px; background: var(--brass); }
.vol__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; background: var(--brass-hi); border: 2px solid #08070a; transform: rotate(45deg); }
.vol__range::-moz-range-thumb { width: 12px; height: 12px; background: var(--brass-hi); border: 2px solid #08070a; border-radius: 0; transform: rotate(45deg); }
.vol__range:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.brand, .masthead__cta { flex: none; white-space: nowrap; }
.nav a { white-space: nowrap; }
@media (max-width: 1359px) {
  .menu-btn { display: block; }
  .masthead__cta { display: none; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; margin: 0;
    background: rgba(8, 7, 10, .97); border-bottom: 1px solid var(--seam);
    padding: var(--s-3) 20px var(--s-4);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { width: 100%; min-height: 52px; font-size: .875rem; border-bottom: 1px solid var(--seam); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-end; padding: 120px 0 120px; overflow: hidden;
  isolation: isolate;
}
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 68% 45%, rgba(110,11,17,.18), transparent 60%),
    linear-gradient(90deg, rgba(8,7,10,.6) 0%, rgba(8,7,10,0) 60%);
}
.hero__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 5.4vw, 4.75rem); line-height: 1.05; letter-spacing: 0; font-weight: 500;
  color: #e6dccb; margin-bottom: var(--s-4);
}
.hero__title em { font-style: italic; color: var(--brass-hi); }
.hero__inner { position: relative; }
.hero__inner::before { /* soft lamplight behind the words */
  content: ""; position: absolute; left: -15%; top: -25%; width: 85%; height: 150%; z-index: -1; pointer-events: none;
  /* closest-side fades to nothing before the box edge, so no hard rectangle shows on wide screens */
  background: radial-gradient(closest-side, rgba(194, 154, 82, .1), transparent);
}
.hero__lede { max-width: 54ch; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: #d9d0bf; margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__readout {
  position: absolute; left: 0; right: 0; bottom: 24px; margin: 0;
  display: flex; gap: var(--s-5); padding-inline: 20px; color: var(--muted);
}
/* Line up with the hero text (.wrap: 1240px max, 40px padding) instead of the screen edge */
@media (min-width: 768px) { .hero__readout { padding-inline: max(40px, calc((100% - 1240px) / 2 + 40px)); } }
.hero__readout div { display: flex; gap: 8px; }
.hero__readout dt { color: var(--brass-dim); }
.hero__readout dd { margin: 0; }
@media (max-width: 479px) { .hero__readout div:nth-child(2) { display: none; } }

/* ---------- Charter plates ---------- */
.charter__list { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .charter__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 1099px) { .charter__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .charter__list { grid-template-columns: repeat(5, 1fr); } }
.plate {
  position: relative; padding: var(--s-5) var(--s-4) var(--s-4);
  /* top layer: a faint brass sheen that follows the pointer (--mx/--my set in JS) */
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, -20%), rgba(226, 192, 126, var(--sheen, 0)), transparent 55%),
    linear-gradient(160deg, var(--plate-2), var(--plate) 60%);
  clip-path: var(--plate-clip);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.charter__list .plate--feature {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, -20%), rgba(226, 192, 126, var(--sheen, 0)), transparent 55%),
    linear-gradient(160deg, var(--red-800), var(--plate) 70%);
}

/* 3D lift: the wrapper tilts towards the pointer and casts a shadow of the angled plate */
.charter__list { perspective: 1000px; }
.tilt {
  display: flex; --rx: 0deg; --ry: 0deg; --lift: 0px;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--ease-out), filter 400ms var(--ease-out);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.tilt > .plate { flex: 1; }
.tilt:hover {
  --lift: -5px;
  transition: transform 160ms ease-out, filter 300ms var(--ease-out);
  filter: drop-shadow(0 11px 12px rgba(0, 0, 0, .5)) drop-shadow(0 2px 4px rgba(110, 11, 17, .3));
}
.tilt:hover .plate { --sheen: .08; }
.tilt:focus-within { outline: 2px solid var(--brass-hi); outline-offset: 4px; }
.plate::before { /* brass seam */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--brass) 0 1px, transparent 1px) top left / 22px 22px no-repeat;
  border: 1px solid var(--seam); clip-path: var(--plate-clip);
}
.plate::after { /* rivets */
  content: ""; position: absolute; top: 12px; right: 12px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass-dim); box-shadow: 0 calc(100% + 0px) 0 0 transparent;
}
.plate__num { color: var(--red-400); font-size: 1rem; }
.plate p { color: var(--muted); flex: 1; }
.plate:hover::before { border-color: var(--brass-dim); }
/* The whole card is clickable: the link's overlay stretches over the plate */
.plate .link { position: static; }
.plate .link::before { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.plate:hover h3 { color: var(--brass-hi); }
.plate .link:focus-visible { outline: none; }

/* ---------- The wharf (X-style three column) ---------- */
.wharf { border-block: 1px solid var(--seam); background: rgba(8, 7, 10, .55); }
.wharf__grid { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) {
  .wharf__grid { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 0; }
  .wharf__rail, .wharf__side { position: sticky; top: 96px; align-self: start; }
  .wharf__feed { border-inline: 1px solid var(--seam); }
  .wharf__rail { padding-right: var(--s-4); }
  .wharf__side { padding-left: var(--s-4); }
}
.wharf__rail { display: none; }
@media (min-width: 1024px) { .wharf__rail { display: block; } }
.rail { margin-bottom: var(--s-4); }
.rail a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px;
  text-decoration: none; font-size: 1.0625rem; color: var(--bone);
  transition: background-color var(--t-fast);
}
.rail a:hover { background: rgba(236, 228, 212, .05); }
.rail svg { width: 22px; height: 22px; fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.feed__head { position: sticky; top: 68px; z-index: 2; background: rgba(8, 7, 10, .96); border-bottom: 1px solid var(--seam); }
.feed__head h2 { font-size: 1.5rem; padding: var(--s-4) var(--s-4) 4px; }
.feed__note { color: var(--muted); padding: 0 var(--s-4) var(--s-3); font-size: .75rem; }
.tabs { display: flex; }
.tabs button {
  flex: 1; min-height: 52px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font: 500 .8125rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  position: relative; transition: color var(--t-fast), background-color var(--t-fast);
}
.tabs button:hover { background: rgba(236, 228, 212, .04); color: var(--bone); }
.tabs button[aria-selected="true"] { color: var(--bone); }
.tabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 48px; height: 3px; transform: translateX(-50%);
  background: var(--red-400);
}

.post {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--seam);
  transition: background-color var(--t-fast), opacity var(--t-med) var(--ease-out);
}
.post:hover { background: rgba(236, 228, 212, .025); }
.post[hidden] { display: none; }
.post__avatar {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--plate-2); border: 1px solid var(--brass-dim); color: var(--brass);
  font: 600 .8rem/1 var(--f-display);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; color: var(--muted); margin-bottom: 4px; }
.post__meta .mono { font-size: .72rem; }
.post__kind { color: var(--bone); font-weight: 600; }
.post__title { font-size: 1.0625rem; margin-bottom: var(--s-3); color: #cfc7b7; }
.post__link { color: var(--bone); text-decoration: none; }
.post__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__stat { color: var(--muted); font-size: .9375rem; }

/* Empty-slot bars: deliberately "unwritten", not loading shimmer */
.slot { display: grid; gap: 8px; }
.slot i {
  display: block; height: 10px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--seam) 0 18px, transparent 18px 24px);
  opacity: .8;
}
.slot i.short { width: 55%; }

/* Scores: five tiny Helm helmets, lit when earned and dimmed when not */
.pips { display: inline-flex; align-items: center; gap: 5px; }
.pips i {
  width: 18px; height: 25px; flex: none;
  background: url("../helmet-mark.png") center / contain no-repeat;
  filter: grayscale(1) brightness(.55); opacity: .3;
}
.pips i.on { filter: drop-shadow(0 0 4px rgba(176, 21, 29, .4)); opacity: 1; }
/* Part scores (e.g. 4.9): a dimmed helmet with a lit copy over it, cut to --fill */
.pips i.part { position: relative; background: none; filter: none; opacity: 1; }
.pips i.part::before, .pips i.part::after {
  content: ""; position: absolute; inset: 0;
  background: url("../helmet-mark.png") center / contain no-repeat;
}
.pips i.part::before { filter: grayscale(1) brightness(.55); opacity: .3; }
.pips i.part::after { clip-path: inset(0 calc(100% - var(--fill, 50%)) 0 0); filter: drop-shadow(0 0 4px rgba(176, 21, 29, .4)); }
.pips b { margin-left: 8px; color: var(--muted); font-weight: 500; }
.pips b.helm-score { color: var(--brass-hi); }

.card {
  padding: var(--s-4); margin-bottom: var(--s-3);
  background: var(--plate); border: 1px solid var(--seam); clip-path: var(--plate-clip);
}
.card__title { color: var(--brass); margin-bottom: var(--s-3); }
.card p { color: var(--muted); }
.tidetable { margin-bottom: var(--s-2); }
.tidetable li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--seam); }
.tidetable .mono { color: var(--muted); font-size: .72rem; }

/* ---------- Founder logs ---------- */
/* The reader sits faintly behind the section, fading into the page on every side */
.logs { overflow: hidden; isolation: isolate; }
.logs__bg {
  position: absolute; z-index: -1; pointer-events: none;
  inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 40%;
  opacity: .28;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}
@media (min-width: 1024px) {
  .logs__bg {
    width: 70%; opacity: .55; object-position: 30% 40%;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 45%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
    mask-composite: intersect;
  }
}
.logs__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .logs__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .logs__copy { grid-column: 2; } }
.logs__copy > p { color: var(--muted); font-size: 1.0625rem; max-width: 54ch; margin-bottom: var(--s-5); }
.ledger { border-top: 1px solid var(--seam); margin-bottom: var(--s-5); }
.ledger li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--seam); }
.ledger .mono { color: var(--red-400); padding-top: 4px; }
.ledger p { color: var(--muted); }
.berth {
  display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--brass-dim); color: var(--muted);
}
.berth .mono { color: var(--brass); white-space: nowrap; }

/* ---------- Field guide ---------- */
.paths { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } }
.path {
  background: rgba(21, 16, 18, .9); border: 1px solid var(--seam); border-top: 2px solid var(--red-600);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.path__head { padding: var(--s-5) var(--s-4) var(--s-4); border-bottom: 1px solid var(--seam); display: grid; gap: 8px; }
@media (min-width: 768px) { .path__head { padding: var(--s-5) var(--s-5) var(--s-4); } }
.path__step { color: var(--red-400); font-size: .75rem; }
.path__head h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.path__who { color: var(--brass); font-size: .9375rem; }
.path__intro { color: var(--muted); }
.path__cta { justify-self: start; margin-top: var(--s-2); }

.topics > li {
  display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s-3); align-items: start;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--seam);
  transition: background-color var(--t-fast);
}
@media (min-width: 768px) { .topics > li { padding-inline: var(--s-5); } }
.topics > li:last-child { border-bottom: 0; }
.topics > li:hover { background: rgba(236, 228, 212, .03); }
.topics > li > .mono:first-child { color: var(--brass-dim); padding-top: 3px; }
.topics__t { font-weight: 600; color: var(--bone); }
.topics li p:not(.topics__t) { color: var(--muted); font-size: .9375rem; }
.topics__soon { color: var(--muted); font-size: .65rem; padding: 3px 8px; border: 1px solid var(--seam); white-space: nowrap; }

/* Getting started feature panel */
.gsf {
  display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-4);
  background: rgba(21, 16, 18, .92); border: 1px solid var(--seam); border-top: 2px solid var(--red-600);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
@media (min-width: 768px) { .gsf { padding: var(--s-6); } }
.gsf__intro { display: grid; gap: var(--s-3); max-width: 62ch; }
.gsf__intro h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; letter-spacing: 0; }
.gsf__intro p:not(.path__step) { color: var(--muted); font-size: 1.0625rem; }
.gsf__intro .btn { justify-self: start; }

.gsf__steps { display: grid; gap: 10px; }
@media (min-width: 700px) { .gsf__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gsf__steps { grid-template-columns: repeat(5, 1fr); } }
.gsf__steps a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--s-3);
  background: var(--ink-2); border: 1px solid var(--seam); text-decoration: none; color: var(--bone);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.gsf__steps a:hover { border-color: var(--brass-dim); background: var(--plate-2); transform: translateY(-2px); }
.gsf__steps .mono { color: var(--red-400); }
.gsf__steps b { font: 600 1.05rem/1.25 var(--f-display); }
.gsf__steps a > span:last-child { color: var(--muted); font-size: .875rem; line-height: 1.45; }

.gsf__extras { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .gsf__extras { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.gsf__label { color: var(--brass); font-size: .7rem; display: block; margin-bottom: 8px; }
.gsf__engines { padding: var(--s-3) var(--s-4); border: 1px dashed var(--brass-dim); }
.gsf__engines ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.gsf__engines b { display: block; font: 600 1rem/1.2 var(--f-display); }
.gsf__engines li span { color: var(--muted); font-size: .8125rem; }
.gsf__video {
  display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2);
  border: 1px solid var(--brass-dim); text-decoration: none; color: var(--bone);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.gsf__video:hover { border-color: var(--brass); background: var(--plate-2); }
.gsf__video img { width: 132px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.gsf__video b { display: block; font: 600 1rem/1.3 var(--f-display); }
.gsf__by { color: var(--muted); font-size: .8125rem; }

.later {
  margin-top: var(--s-4); display: grid; gap: var(--s-3) var(--s-5);
  padding: var(--s-4); border: 1px dashed var(--brass-dim);
}
@media (min-width: 900px) { .later { grid-template-columns: auto 1fr 1fr; align-items: start; padding: var(--s-4) var(--s-5); } }
.later__label { color: var(--brass); padding-top: 3px; }
.later__t { font: 600 1.1rem/1.3 var(--f-display); margin-bottom: 4px; }
.later__item p:not(.later__t) { color: var(--muted); font-size: .9375rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Recommended games ---------- */
.picks__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.picks__tabs { display: inline-flex; border: 1px solid var(--seam); }
.picks__tabs button {
  min-height: 48px; padding: 0 20px; background: none; border: 0; cursor: pointer; position: relative;
  color: var(--muted); font: 500 .8125rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.picks__tabs button + button { border-left: 1px solid var(--seam); }
.picks__tabs button:hover { color: var(--bone); background: rgba(236, 228, 212, .04); }
.picks__tabs button[aria-selected="true"] { color: var(--brass-hi); background: rgba(194,154,82,.08); }
.picks__tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red-400); }
.picks__tabs button:focus-visible { outline: 1px solid var(--brass); outline-offset: -4px; }
.picks__when { color: var(--brass); font-size: .8125rem; letter-spacing: .08em; }
.picks__panel { display: grid; gap: var(--s-4); }
@media (min-width: 1100px) { .picks__panel { grid-template-columns: 1fr 4fr; } }
.picks__label { color: var(--brass); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.picks__label::after { content: ""; flex: 1; height: 1px; background: var(--seam); }
.picks__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .picks__grid--paid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .picks__grid--paid { grid-template-columns: repeat(4, 1fr); } }
.picks__group, .picks__grid, .pick { min-width: 0; }
.picks__group { display: flex; flex-direction: column; }
.picks__grid { flex: 1; }
.pick {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s-3) var(--s-3) 14px;
  background: var(--ink-2); border: 1px solid var(--seam); border-top: 2px solid var(--red-600);
  clip-path: var(--plate-clip); transition: border-color var(--t-fast), background-color var(--t-fast);
}
.pick:hover { background: var(--plate-2); border-color: var(--brass-dim); }
.pick--free { border-top-color: var(--brass); }
.pick__band { color: var(--red-400); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.pick--free .pick__band { color: var(--brass-hi); }
.pick__name { font: 600 1.15rem/1.25 var(--f-display); }
.pick__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .8125rem; }
.pick__rating { color: var(--bone); font-weight: 600; }
.pick__score[data-tier="mid"] .pick__rating { color: var(--brass-hi); }
.pick__score[data-tier="low"] .pick__rating { color: var(--muted); }
.pick__pct { color: var(--muted); font-size: .75rem; }
.pick__by { color: var(--brass); font-size: .8125rem; }
.pick__blurb { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.pick__foot { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--seam); }
.pick__price { color: var(--bone); font-size: .875rem; }
.picks__note { margin-top: var(--s-3); color: var(--muted); font-size: .8125rem; }

/* ---------- Events ---------- */
.ev-block { margin-bottom: var(--s-5); }
.ev-block__label { color: var(--brass); margin-bottom: var(--s-3); display: flex; align-items: center; gap: 12px; }
.ev-block__label::after { content: ""; flex: 1; height: 1px; background: var(--seam); }
.ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev__item {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-3); background: var(--ink-2); border: 1px solid var(--seam); border-left: 3px solid var(--red-400);
}
.ev__item[hidden] { display: none; }
.ev__date { margin: 0; }
.ev__date time { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--brass-dim); text-align: center; }
.ev__date b { font: 600 1.6rem/1.1 var(--f-display); color: var(--brass-hi); }
.ev__date span { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ev__kind { color: var(--red-400); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.ev__body h3, .ev-year h3 { font: 600 1.15rem/1.3 var(--f-display); margin-bottom: 4px; }
.ev__body p:last-child, .ev-year p:not(.ev__kind) { color: var(--muted); font-size: .9375rem; }
.ev__link { grid-column: 2; justify-self: start; }
@media (min-width: 800px) {
  .ev__item { grid-template-columns: 110px 1fr auto; }
  .ev__link { grid-column: auto; }
}
.ev__none { color: var(--muted); padding: var(--s-3); border: 1px dashed var(--brass-dim); }
.ev-year { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .ev-year { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ev-year { grid-template-columns: repeat(4, 1fr); } }
.ev-year li { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); background: var(--ink-2); border: 1px solid var(--seam); }
.ev-year .link { margin-top: auto; padding-top: var(--s-2); }
.ev-meet { list-style: none; margin: 0; padding: 0; border: 1px solid var(--seam); }
.ev-meet li { display: grid; grid-template-columns: 1fr; gap: 2px var(--s-4); padding: 12px var(--s-3); align-items: center; }
.ev-meet li + li { border-top: 1px solid var(--seam); }
.ev-meet b { font: 600 1rem/1.3 var(--f-display); }
.ev-meet span { color: var(--muted); font-size: .9375rem; }
@media (min-width: 700px) { .ev-meet li { grid-template-columns: 220px 1fr auto; } }

/* ---------- Studio directory ---------- */
.dir-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); }
.dir-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.dir-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; }
.dir-search input {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 42px;
  background: var(--ink-2); border: 1px solid var(--seam); color: var(--bone); font: inherit;
}
.dir-search input::placeholder { color: var(--muted); }
.dir-search input:focus { outline: none; border-color: var(--brass); }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-chip {
  min-height: 40px; padding: 8px 14px; background: none; border: 1px solid var(--seam); color: var(--muted); cursor: pointer;
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.dir-chip:hover { color: var(--bone); border-color: var(--brass-dim); }
.dir-chip[aria-pressed="true"] { color: var(--brass-hi); border-color: var(--brass); background: rgba(194,154,82,.08); }
.dir-chip:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .dir { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dir { grid-template-columns: repeat(3, 1fr); } }
.dir__item {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-4);
  background: var(--ink-2); border: 1px solid var(--seam); clip-path: var(--plate-clip);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.dir__item:hover { background: var(--plate-2); border-color: var(--brass-dim); }
.dir__item[hidden] { display: none; }
.dir__city { color: var(--red-400); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.dir__item h3 { font: 600 1.25rem/1.25 var(--f-display); }
.dir__games { color: var(--muted); font-size: .9375rem; margin-bottom: var(--s-2); }
.dir__item .link { margin-top: auto; }
.dir__empty { color: var(--muted); padding: var(--s-4); border: 1px dashed var(--brass-dim); }
.dir-cta { margin-top: var(--s-4); color: var(--muted); }

/* ---------- Reviews ---------- */
.scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--seam); border: 1px solid var(--seam); margin-bottom: var(--s-5); }
.scale li { display: grid; gap: 8px; padding: var(--s-4); background: var(--ink-2); }
.scale b { font: 600 1.6rem/1 var(--f-display); color: var(--bone); }
.scale li > span:last-child { color: var(--muted); font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.pips--static i { width: 15px; height: 21px; }
.review-grid { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  display: grid; gap: var(--s-3); padding: var(--s-4);
  background: var(--plate); border: 1px solid var(--seam); clip-path: var(--plate-clip);
}
.review__tag { color: var(--brass); font-size: .72rem; }
.review__game { font: 600 1.35rem/1.2 var(--f-display); color: #8f877a; }
.local--reviews > .wrap > .local__sub:first-child { margin-top: 0; }
.reviews__intro { color: var(--muted); max-width: 62ch; margin-bottom: var(--s-4); }
.local .scale { margin-bottom: var(--s-4); }
.logs__copy .bio { margin-bottom: var(--s-5); }
/* Interviews title and intro run across the full width, over the top of the photo */
.logs__head { margin-bottom: var(--s-6); }
.logs__head h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.logs__intro { margin-top: var(--s-4); max-width: 92ch; color: #d9d0bf; font-size: 1.125rem; text-shadow: 0 1px 12px rgba(0,0,0,.8); }

/* Interview panel: riveted brass frame, header on the left, questions that open to show the answer */
.ivp { position: relative; padding: 30px 30px 26px; background: linear-gradient(160deg, rgba(28,21,23,.94), rgba(12,9,11,.94));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
@media (max-width: 599px) { .ivp { padding: 26px 18px 22px; } }
.ivp::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass-dim); pointer-events: none;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.ivp i.rv { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e2c07e, #7d6237); }
.ivp i.r1 { top: 14px; left: 20px; } .ivp i.r2 { top: 14px; right: 20px; } .ivp i.r3 { bottom: 14px; left: 20px; } .ivp i.r4 { bottom: 14px; right: 20px; }
.ivp__head { padding: 6px 4px 20px; margin-bottom: 18px; border-bottom: 1px solid var(--brass-dim); }
.ivp__label { color: var(--brass); font-size: .68rem; margin-bottom: 10px; }
.ivp__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: .95; letter-spacing: 0; margin-bottom: 6px; }
.ivp__role { color: var(--brass-hi); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.2rem; margin-bottom: 12px; }
.ivp__bio { color: var(--muted); max-width: 56ch; }

.qs { display: grid; gap: 10px; }
.qt { background: rgba(14,11,13,.85); border: 1px solid var(--seam); border-top: 2px solid var(--red-600); transition: border-color var(--t-fast), background-color var(--t-fast); }
.qt.is-open { border-color: var(--brass-dim); background: rgba(24,18,20,.95); }
.qt__btn { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; text-align: left;
  background: none; border: 0; color: var(--bone); cursor: pointer; font: inherit; }
.qt__btn:hover .qt__q { color: var(--brass-hi); }
.qt__btn:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
.qt__stage { grid-column: 1; color: var(--brass); font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.qt__stage b { color: var(--red-400); font-weight: 500; margin-right: 6px; }
.qt__q { grid-column: 1; font: 600 1rem/1.35 var(--f-display); letter-spacing: .01em; transition: color var(--t-fast); }
.qt__icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--brass-dim); color: var(--brass-hi); transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.qt__icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.qt.is-open .qt__icon { transform: rotate(45deg); background: var(--red-600); border-color: var(--red-400); }
.qt__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.qt.is-open .qt__a { grid-template-rows: 1fr; }
.qt__a > div { overflow: hidden; }
.qt__a p { margin: 0; padding: 0 56px 16px 16px; color: #d9d0bf; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; line-height: 1.5; }

/* Advice & FAQ: same tiles as the interview, with body text for longer answers */
.faq__list { max-width: 920px; }
.faq__body { padding: 0 56px 18px 16px; color: #d9d0bf; font-size: 1rem; line-height: 1.65; }
.faq__body p, .faq__body ol { margin: 0; font-family: var(--f-body); font-size: 1rem; padding: 0; color: #d9d0bf; }
.faq__body p + p, .faq__body ol + p { margin-top: 10px; }
.faq__body ol { list-style: decimal; padding-left: 20px; display: grid; gap: 6px; }
.faq__body li::marker { color: var(--brass); font-family: var(--f-mono); font-size: .85em; }
.faq__body a { color: var(--brass-hi); }
@media (max-width: 599px) { .faq__body { padding-right: 16px; } }
.faq__more { margin-top: var(--s-4); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Interview header: open dossier with brass nameplate details */
.iv { border-left: 2px solid var(--red-600); padding: 4px 0 4px 22px; margin-bottom: var(--s-6); }
.iv__badge { position: relative; display: inline-block; padding: 7px 22px; margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(28,21,23,.92), rgba(14,11,13,.92)); color: var(--brass); font-size: .68rem;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.iv__badge::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--brass-dim);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.iv__badge i { position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e2c07e, #7d6237); }
.iv__badge i:first-child { left: 10px; } .iv__badge i:last-child { right: 10px; }
.iv__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .95; margin-bottom: 8px; color: var(--bone); }
.iv__role { color: var(--brass-hi); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.25rem; margin-bottom: 14px; }
.iv__rule { height: 1px; width: 60%; background: linear-gradient(90deg, var(--brass-dim), transparent); margin-bottom: 14px; }
.iv__bio { color: #d9d0bf; max-width: 52ch; margin-bottom: 0; }
.iv__plate { position: relative; display: inline-grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; margin: 0;
  padding: 14px 26px; background: linear-gradient(160deg, rgba(28,21,23,.9), rgba(14,11,13,.9));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.iv__plate::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--brass-dim); pointer-events: none;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.iv__plate i.rivet { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e2c07e, #7d6237); }
.iv__plate i.r1 { top: 9px; left: 12px; } .iv__plate i.r2 { top: 9px; right: 12px; } .iv__plate i.r3 { bottom: 9px; left: 12px; } .iv__plate i.r4 { bottom: 9px; right: 12px; }
.iv__plate dt { color: var(--brass-dim); font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.iv__plate dd { margin: 0; color: var(--bone); }
.iv__plate dd a { color: var(--brass-hi); }
@media (max-width: 520px) { .iv__plate { grid-template-columns: 1fr; display: grid; } }
.logs__copy .ledger h3 { font-size: 1.05rem; line-height: 1.35; }
#reviews { scroll-margin-top: 90px; }
/* NZ games: 8 at a time (4 across x 2 down), scroll sideways for the rest */
.nz-games {
  --gap: 16px; --cols: 4;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.nz-games::-webkit-scrollbar { display: none; }
.nz-games:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 4px; }
.nz-games > li { scroll-snap-align: start; }
@media (max-width: 1099px) { .nz-games { --cols: 2; } }
@media (max-width: 599px) { .nz-games { --cols: 1; grid-auto-columns: 86%; } }
.nz-nav .spotlights__count { margin-left: var(--s-3); }
.nz-games .review__game { color: var(--bone); font-size: 1.15rem; }
.review__blurb { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.review__steam { font-size: .8125rem; color: var(--muted); }
.review__steam--none { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-dim); }
.nz-games .review { align-content: start; }
.review__verdict {color: var(--muted); font-style: italic; border-top: 1px dashed var(--seam); padding-top: var(--s-3); }

.review-grid + .local__sub, .scale + .local__sub { margin-top: var(--s-6); }
@media (min-width: 1100px) { .review-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Made in Aotearoa ---------- */
.local { background: linear-gradient(180deg, transparent, rgba(42,5,7,.35) 30%, rgba(42,5,7,.35) 70%, transparent); }
.local__sub { color: var(--brass); font-size: .8125rem; font-weight: 500; margin: var(--s-7) 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--seam); }
.reviews .local__sub { margin-top: 0; }

.spotlight {
  display: grid; background: rgba(21,16,18,.9); border: 1px solid var(--seam);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
@media (min-width: 900px) { .spotlight { grid-template-columns: 1.3fr 1fr; } }
.spotlight__media {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted);
  background:
    linear-gradient(135deg, rgba(110,11,17,.25), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(194,154,82,.05) 14px 15px),
    var(--ink-2);
  border-bottom: 1px solid var(--seam);
}
@media (min-width: 900px) { .spotlight__media { aspect-ratio: auto; min-height: 380px; border-bottom: 0; border-right: 1px solid var(--seam); } }
.spotlight__media { margin: 0; overflow: hidden; }
.spotlight__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%;
  filter: saturate(.85) brightness(.85);
}
.spotlight__media::after { /* grade the bright screenshot into the dark page */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 55%, rgba(21,16,18,.85)), linear-gradient(0deg, rgba(42,5,7,.45), transparent 45%);
}
@media (max-width: 899px) { .spotlight__media::after { background: linear-gradient(0deg, rgba(21,16,18,.9), transparent 45%); } }
.spotlight__corner { z-index: 1;
  position: absolute; top: 20px; left: 20px; width: 28px; height: 28px;
  border: 2px solid var(--brass-dim); border-right: 0; border-bottom: 0;
}
.spotlight__body { padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-3); align-content: center; }
@media (min-width: 768px) { .spotlight__body { padding: var(--s-6); } }
.spotlight__tag { color: var(--brass); font-size: .75rem; }
.spotlight__body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: #a39b8e; }
.spotlight__body > p:not(.spotlight__tag) { color: var(--muted); }
.spotlight__facts { margin: var(--s-2) 0 0; display: grid; border-top: 1px solid var(--seam); }
.spotlight__facts div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 12px 0; border-bottom: 1px dashed var(--seam); }
.spotlight__facts dt { color: var(--brass-dim); font-size: .72rem; }
.spotlight__facts dd { margin: 0; color: var(--bone); text-align: right; }
.spotlight__note { display: block; color: var(--muted); font-size: .8125rem; }
.spotlight__why {
  color: var(--brass-hi) !important; font: italic 500 1.1rem/1.45 "Cormorant Garamond", Georgia, serif;
  padding-left: var(--s-3); border-left: 2px solid var(--brass-dim);
}
.reviews .spotlight { margin-bottom: var(--s-6); }
/* Image on the right for the special highlight */
@media (min-width: 900px) {
  .spotlight--flip { grid-template-columns: 1fr 1.3fr; }
  .spotlight--flip .spotlight__media { order: 2; border-right: 0; border-left: 1px solid var(--seam); }
  .spotlight--flip .spotlight__media::after { background: linear-gradient(270deg, transparent 55%, rgba(21,16,18,.85)), linear-gradient(0deg, rgba(42,5,7,.45), transparent 45%); }
}
.steam-score { color: #66c0f4; font-weight: 600; margin-right: 6px; }
.spotlight__body h3 { color: var(--bone); }

/* Spotlight slider: swipe/scroll sideways, or use the arrows */
.spotlights__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.spotlights__track::-webkit-scrollbar { display: none; }
.spotlights__track:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 4px; }
.spotlights__track > .spotlight { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.spotlights__nav { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.spotlights__nav .spotlights__count { margin-left: var(--s-3); }
.spotlights__btn {
  width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  background: rgba(194,154,82,.08); border: 1px solid var(--brass); color: var(--brass-hi);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.spotlights__btn:hover:not(:disabled) { background: var(--red-600); border-color: var(--red-400); color: #fff6ee; }
.spotlights__btn:active:not(:disabled) { transform: scale(.94); }
.spotlights__btn:disabled { opacity: .35; cursor: default; }
.spotlights__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spotlights__count { color: var(--brass); margin: 0 var(--s-2); }
.spotlights__count span:first-child { color: var(--bone); }
.spotlights__dots { display: flex; gap: 8px; margin-right: auto; }
.spotlights__dots i { width: 28px; height: 3px; background: var(--seam); transition: background-color var(--t-med); }
.spotlights__dots i.on { background: var(--red-400); }

.features { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  background: var(--plate); border: 1px solid var(--seam); border-top: 2px solid var(--red-600); clip-path: var(--plate-clip);
}
.feature__kind { color: var(--brass); font-size: .72rem; }
.feature__title { font: 600 1.25rem/1.25 var(--f-display); }
.feature p:not(.feature__kind):not(.feature__title) { color: var(--muted); flex: 1; }
.feature__soon { color: var(--muted); font-size: .7rem; margin-top: var(--s-2); }

.submit {
  margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border: 1px dashed var(--brass-dim);
}
.submit__title { font: 600 1.35rem/1.2 var(--f-display); margin-bottom: 4px; }
.submit p:not(.submit__title) { color: var(--muted); }

/* ---------- Getting started guide page ---------- */
.gs-page { background: radial-gradient(ellipse at 70% 0%, rgba(110,11,17,.25), transparent 50%), var(--ink); }
.gs-brand-mark { width: 30px; height: auto; filter: brightness(1.2) drop-shadow(0 0 6px rgba(176, 21, 29, .35)); }
.gs-back { margin-left: auto; }
.gs { padding-top: 120px; position: relative; z-index: 1; }
.gs-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: 0; margin-bottom: var(--s-4); }
.gs-lede { color: #d9d0bf; font-size: 1.125rem; max-width: 60ch; margin-bottom: var(--s-6); }
.gs-steps-nav ol { display: grid; gap: 8px; counter-reset: none; }
@media (min-width: 900px) { .gs-steps-nav ol { grid-template-columns: repeat(5, 1fr); } }
.gs-steps-nav a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--s-3);
  background: var(--plate); border: 1px solid var(--seam); border-top: 2px solid var(--red-600);
  text-decoration: none; color: var(--bone); font-weight: 600;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.gs-steps-nav a:hover { border-color: var(--brass-dim); background: var(--plate-2); }
.gs-steps-nav .mono { color: var(--brass); font-weight: 500; }

.gs-step { padding-block: var(--s-8) 0; scroll-margin-top: 80px; }
.gs-step:last-of-type { padding-bottom: var(--s-8); }
.gs-step__num { color: var(--red-400); margin-bottom: var(--s-2); }
.gs-step h2 { margin-bottom: var(--s-3); }
.gs-step__lede { color: var(--muted); font-size: 1.0625rem; max-width: 64ch; margin-bottom: var(--s-5); }
.gs-note { color: var(--muted); font-size: .875rem; margin-top: var(--s-4); max-width: 70ch; }
.gs-note a { color: var(--brass-hi); }

/* Engine comparison: a table on wide screens, stacked cards on phones */
.gs-engines { border: 1px solid var(--seam); }
.gs-engines__head { display: none; }
.gs-engine { display: grid; gap: 8px; padding: var(--s-4); border-bottom: 1px solid var(--seam); background: var(--plate); }
.gs-engine:last-child { border-bottom: 0; }
.gs-engine h3 { font-size: 1.3rem; color: var(--bone); }
.gs-engine p { color: var(--muted); font-size: .9375rem; }
.gs-label { display: block; font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-dim); }
@media (min-width: 1000px) {
  .gs-engines__head, .gs-engine { display: grid; grid-template-columns: 1fr 1.6fr 1.4fr 1.5fr 1.1fr 1fr; gap: var(--s-3); align-items: start; }
  .gs-engines__head { padding: 14px var(--s-4); background: var(--ink-2); border-bottom: 1px solid var(--seam);
    font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
  .gs-engine .gs-label { display: none; }
  .gs-engine:hover { background: var(--plate-2); }
}
.gs-diff { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.gs-diff i { width: 12px; height: 6px; background: var(--seam); }
.gs-diff i.on { background: var(--red-500); }

.gs-tip { margin-top: var(--s-5); padding: var(--s-4); border-left: 2px solid var(--brass); background: rgba(194,154,82,.06); max-width: 80ch; }
.gs-tip p:not(.gs-tip__label) { color: #d9d0bf; }
.gs-tip strong { color: var(--brass-hi); font-weight: 600; }
.gs-tip__label { color: var(--brass); margin-bottom: 6px; display: block; }

.gs-list { display: grid; gap: var(--s-3); counter-reset: gs; max-width: 80ch; }
.gs-list > li { counter-increment: gs; display: grid; grid-template-columns: 44px 1fr; gap: 0 var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--seam); }
.gs-list > li::before { content: counter(gs, decimal-leading-zero); grid-row: span 2; color: var(--red-400); font: 500 .8125rem/1.8 var(--f-mono); }
.gs-list h3, .gs-foundations h3 { font-size: 1.1rem; margin-bottom: 4px; }
.gs-list p, .gs-foundations p { color: var(--muted); }
.gs-list em { color: var(--bone); }

.gs-foundations { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .gs-foundations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gs-foundations { grid-template-columns: repeat(4, 1fr); } }
.gs-foundations > li { padding: var(--s-4); background: var(--plate); border: 1px solid var(--seam); clip-path: var(--plate-clip); }

.gs-video {
  margin-top: var(--s-4); display: grid; gap: var(--s-4); align-items: center; max-width: 820px;
  padding: var(--s-3); background: var(--plate); border: 1px solid var(--brass-dim); text-decoration: none; color: var(--bone);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
@media (min-width: 640px) { .gs-video { grid-template-columns: 240px 1fr; } }
.gs-video:hover { border-color: var(--brass); background: var(--plate-2); }
.gs-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gs-video__body { display: grid; gap: 6px; }
.gs-video__title { font: 600 1.2rem/1.3 var(--f-display); }
.gs-video__by { color: var(--muted); }

.gs-end { margin-top: var(--s-6); padding: var(--s-5); border: 1px dashed var(--brass-dim); }
.gs-end__title { font: 600 1.5rem/1.2 var(--f-display); margin-bottom: 6px; }
.gs-end > p:not(.gs-end__title) { color: var(--muted); max-width: 60ch; }
.gs-end__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* ---------- Interviews ---------- */
.interview { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) {
  .interview { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .interview__sitter { position: sticky; top: 110px; flex-direction: column; align-items: flex-start; }
}
/* Short bio card: who's speaking, their role, studio and game */
.bio {
  display: grid; gap: var(--s-3); padding: var(--s-4);
  background: rgba(21, 16, 18, .9); border: 1px solid var(--seam); border-left: 2px solid var(--red-600);
  clip-path: var(--plate-clip);
}
.bio__label { color: var(--brass); font-size: .7rem; }
.bio__top { display: flex; gap: var(--s-3); align-items: center; }
.bio__avatar {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--plate-2); border: 1px solid var(--brass-dim); color: var(--brass);
  font: 600 1.2rem/1 var(--f-display);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.bio__name { font: 600 1.15rem/1.25 var(--f-display); color: #a39b8e; }
.bio__role { color: var(--muted); font-size: .9375rem; }
.bio__facts { margin: 0; border-top: 1px solid var(--seam); }
.bio__facts div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px 0; border-bottom: 1px dashed var(--seam); }
.bio__facts dt { color: var(--brass-dim); font-size: .7rem; }
.bio__facts dd { margin: 0; color: var(--muted); text-align: right; }
.bio__text { color: var(--muted); font-size: .9375rem; }
.bio__facts dd a { color: var(--brass-hi); }
.bio__name { color: var(--bone) !important; }
.interview__sitter { align-self: start; }
.qa { display: grid; gap: var(--s-5); }
.qa__head { color: var(--brass); padding-bottom: var(--s-3); border-bottom: 1px solid var(--seam); font-size: .8125rem; font-weight: 500; }
.qa__list > li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--seam); }
.qa__n { color: var(--red-400); padding-top: 4px; }
.qa__opt {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px;
  border: 1px solid var(--brass-dim); color: var(--brass); font-size: .65rem; font-weight: 500; letter-spacing: .12em;
}
.qa__q {font: 600 clamp(1.125rem, 2vw, 1.375rem)/1.35 var(--f-display); letter-spacing: .01em; margin-bottom: var(--s-3); max-width: 46ch; }

/* ---------- Join ---------- */
.join { min-height: 90vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.join__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; z-index: -2; }
.join__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 0%, rgba(8,7,10,.85) 38%, rgba(8,7,10,.2) 75%), linear-gradient(0deg, var(--ink), transparent 30%, transparent 75%, var(--ink)); }
@media (max-width: 767px) { .join__shade { background: linear-gradient(0deg, var(--ink) 15%, rgba(8,7,10,.78) 60%, rgba(8,7,10,.5)); } .join { align-items: flex-end; } }
.join__inner h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); margin-bottom: var(--s-4); }
.join__inner p:not(.eyebrow) { max-width: 46ch; color: #d9d0bf; font-size: 1.125rem; margin-bottom: var(--s-5); }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: var(--z-content); border-top: 1px solid var(--seam); padding-block: var(--s-5); background: var(--ink); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; }
.footer p { color: var(--muted); }

/* ---------- Tide layer (rises with scroll) ---------- */
.tide {
  position: fixed; inset: 0; z-index: var(--z-tide); pointer-events: none;
  transform: translate3d(0, 100%, 0); will-change: transform;
}
.tide__crest { display: block; width: 100%; height: 40px; fill: rgba(110, 11, 17, .45); }
.tide__body { height: 100%; background: linear-gradient(180deg, rgba(110,11,17,.45) 0%, rgba(69,8,12,.6) 40%, rgba(42,5,7,.75) 100%); }
.tide::before { /* brass waterline glint */
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,192,126,.5), transparent);
}

/* ---------- Side gauge ---------- */
.gauge {
  position: fixed; right: 18px; top: 50%; z-index: var(--z-gauge);
  display: none; grid-template-rows: 220px auto; justify-items: end; gap: 8px;
  transform: translateY(-50%); pointer-events: none;
}
@media (min-width: 1280px) { .gauge { display: grid; } }
.gauge__track { width: 10px; position: relative; border: 1px solid var(--brass-dim); background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(194,154,82,.35) 21px 22px); overflow: hidden; }
.gauge__level { position: absolute; inset: auto 0 0 0; height: 100%; background: var(--red-500); transform-origin: bottom; transform: scaleY(0); }
.gauge__read { color: var(--brass); font-size: .65rem; white-space: nowrap; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast);
  padding: 14px 20px; background: var(--plate-2); border: 1px solid var(--brass-dim); color: var(--bone);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Background puzzle helmet ---------- */
.puzzle {
  position: fixed; inset: 0; z-index: var(--z-tide); pointer-events: none;
  opacity: .22; transition: opacity 1.2s var(--ease-out);
}
/* .puzzle-eyes is a separate layer that turns in step with the helmet, so the glow
   isn't dimmed along with the faint helmet itself */
.puzzle-eyes {
  position: fixed; inset: 0; z-index: var(--z-tide); pointer-events: none;
  opacity: .072; mix-blend-mode: screen; transition: opacity 600ms linear;
}
.puzzle__stage, .puzzle-eyes svg {
  position: relative; width: 100%; height: 100%; display: block;
  /* Starts small, far back and turned away; slowly swings round to face the viewer */
  opacity: 0; transform: perspective(1400px) rotateY(38deg) rotateX(4deg) scale(.86);
  transform-origin: 60% 45%; will-change: transform, opacity;
  transition: opacity 3.2s cubic-bezier(.4, 0, .2, 1), transform 6.5s cubic-bezier(.25, .1, .25, 1);
}
.puzzle.is-shown .puzzle__stage, .puzzle-eyes.is-shown svg { opacity: 1; transform: perspective(1400px) rotateY(0deg) rotateX(0deg) scale(1); }
/* Eyes kindle as the helmet finishes turning to face you; JS then brightens the layer
   (about 7% loose → 18% assembled) as the plates come together while scrolling */
.puzzle-eyes .eyes-kindle { opacity: 0; transition: opacity 3s ease-in-out 4s; }
.puzzle-eyes.is-shown .eyes-kindle { opacity: 1; }
.puzzle .piece { position: absolute; will-change: transform; }
.puzzle .piece__sil { position: absolute; inset: 0; }
.puzzle .piece img { position: absolute; max-width: none; display: block; }
.puzzle .piece svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Hidden while the Interviews section is on screen (class set in JS) */
.bg-off .puzzle, .bg-off .puzzle-eyes { opacity: 0 !important; transition: opacity .9s var(--ease-out); }
.puzzle .piece-edge { fill: none; stroke: var(--brass); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Intro
   ========================================================================== */
.intro, .intro__skip { display: none; }
.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: var(--z-intro);
  background: radial-gradient(ellipse at 50% 55%, #140c0e 0%, #050405 70%);
  overflow: hidden;
}
.intro-on body { overflow: hidden; }
.intro__stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.intro__world { position: absolute; left: 0; top: 0; width: 1376px; height: 768px; transform-origin: 0 0; }
.intro__shake { position: absolute; inset: 0; }
.intro-layer {
  position: absolute; background-size: 100% 100%; background-repeat: no-repeat;
  backface-visibility: hidden;
}
.intro-shard { opacity: 0; will-change: transform, opacity; }
.intro-bg, .intro-whole { opacity: 0; }
.intro-eyes { position: absolute; left: 0; top: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.intro-eyes svg { display: block; overflow: visible; }

/* Sound screen fades away instead of vanishing */
.intro__gate.is-out { opacity: 0; transform: translateY(-10px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); pointer-events: none; }
.intro__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 48%, transparent 55%, #050405 100%);
}

.intro__loader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 12px; justify-items: center; color: var(--brass);
  transition: opacity var(--t-med);
}
.intro__loader-bar { width: 160px; height: 2px; background: var(--seam); overflow: hidden; }
.intro__loader-bar span { display: block; height: 100%; width: 40%; background: var(--red-400); animation: tw-sweep 1.1s var(--ease-out) infinite; }
@keyframes tw-sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.intro.is-running .intro__loader { opacity: 0; }

.intro__title {
  position: absolute; left: 0; right: 0; bottom: 9vh; display: grid; justify-items: center; gap: 10px;
  pointer-events: none; text-align: center; padding-inline: 20px;
}
.intro__word {
  font: 700 clamp(2rem, 7vw, 5rem)/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase;
  color: var(--bone); text-shadow: 0 2px 30px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(16px); padding-left: .32em;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), letter-spacing 1600ms var(--ease-out);
}
.intro__sub { color: var(--brass); opacity: 0; transition: opacity 700ms var(--ease-out) 300ms; }
.intro.is-titled .intro__word { opacity: 1; transform: none; letter-spacing: .22em; }
.intro.is-titled .intro__sub { opacity: 1; }

.intro-on .intro__skip {
  display: inline-flex; align-items: center; position: fixed; right: 20px; bottom: 20px; z-index: calc(var(--z-intro) + 1);
  min-height: 44px; padding: 0 18px; background: rgba(8,7,10,.6); color: var(--bone);
  border: 1px solid var(--seam); cursor: pointer; transition: border-color var(--t-fast), opacity var(--t-med);
}
.intro__skip:hover { border-color: var(--brass); }

/* Sound choice, shown once the helmet image has loaded */
.intro__gate { display: none; }
.intro-gate .intro__gate {
  position: fixed; inset: 0; z-index: calc(var(--z-intro) + 2);
  display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  padding: 20px; text-align: center;
  animation: tw-gate-in 900ms var(--ease-out) both;
}
@keyframes tw-gate-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.intro__gate-word { font: 700 clamp(1.8rem, 6vw, 3.6rem)/1 var(--f-display); letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; }
.intro__gate-line { color: var(--muted); font-size: 1.0625rem; }
.intro__gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); }
.intro__gate-credit { color: var(--brass-dim); font-size: .7rem; margin-top: var(--s-4); }
.intro-gate .intro__loader, .intro-gate .intro__skip { display: none; }

.intro.is-leaving {
  transform: translateY(-100%); opacity: .2;
  transition: transform 2000ms cubic-bezier(.65, 0, .35, 1), opacity 2000ms cubic-bezier(.5, 0, .75, 0);
}
.intro.is-leaving + .intro__skip { opacity: 0; pointer-events: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__img { transform: none; }
}