/* No Chat Reports — The Stripped Signature (seed 15aada8d)
   Neutral charcoal night ground; slate tooltip chrome; pixel type. */

@font-face {
  font-family: "Monocraft";
  src: url("../fonts/Monocraft.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --night-0: #0a0b10;
  --night-1: #10121a;
  --night-2: #181b26;
  --tip-bg: rgba(16, 18, 26, 0.94);
  --tip-border-t: #434958;
  --tip-border-b: #262a35;
  --aqua: #8ec9dc;
  --aqua-dim: #5f95a6;
  --red: #e06c6c;
  --red-deep: #a04747;
  --brand-red: #ac311f;
  --brand-red-dark: #7d2317;
  --green: #96d996;
  --btn-green: #35942c;
  --btn-green-lt: #58c24b;
  --btn-green-dk: #1d5417;
  --stone: #6d6d6d;
  --stone-lt: #9c9c9c;
  --stone-dk: #3c3c3c;
  --text: #eef0f5;
  --text-dim: #a6adbb;
  --text-faint: #6e7583;
  --keyline: rgba(140, 150, 168, 0.22);
  --px: "Monocraft", "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--tip-border-b) var(--night-0);
}

body {
  margin: 0;
  background: var(--night-0);
  color: var(--text);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.7;
  caret-color: var(--aqua);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--aqua); color: #0a0b10; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night-0); }
::-webkit-scrollbar-thumb { background: var(--tip-border-b); border: 3px solid var(--night-0); }
::-webkit-scrollbar-thumb:hover { background: var(--tip-border-t); }

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

a {
  color: var(--aqua);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(142, 201, 220, 0.45);
  transition: text-decoration-color 120ms ease-out, color 120ms ease-out;
}
a:hover { text-decoration-color: var(--aqua); }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--green);
  background: rgba(150, 217, 150, 0.08);
  padding: 0.08em 0.35em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tip-bg);
  color: var(--aqua);
  padding: 0.6rem 1rem;
  font-family: var(--px);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Minecraft tooltip panel: notched corners + purple gradient border ---------- */
.tip {
  position: relative;
  background: var(--tip-bg);
  border: 2px solid;
  border-image: linear-gradient(to bottom, var(--tip-border-t), var(--tip-border-b)) 1;
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
}

.tip-title {
  font-family: var(--px);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0 0 0.75rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* ---------- Minecraft buttons: hard bevel, pixel type, no radius ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--px);
  font-size: 1.05rem;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.85rem 1.3rem 0.95rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-width: 3px;
  transition: filter 120ms ease-out;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.18); }
.btn:active { filter: brightness(0.92); transform: translateY(1px); }

.btn-green {
  background: var(--btn-green);
  border-color: var(--btn-green-lt) var(--btn-green-dk) var(--btn-green-dk) var(--btn-green-lt);
}
.btn-stone {
  background: var(--stone);
  border-color: var(--stone-lt) var(--stone-dk) var(--stone-dk) var(--stone-lt);
}
.btn-slim { font-size: 0.95rem; padding: 0.7rem 1.15rem 0.75rem; }
.btn-big { font-size: 1.3rem; padding: 1.1rem 2rem 1.2rem; }

.px-icon {
  width: 1em;
  height: 1em;
  flex: none;
  image-rendering: pixelated;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.05rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 11, 16, 0.92);
  border-bottom: 1px solid var(--keyline);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}
.brand img { display: block; }
.brand-name {
  font-family: var(--px);
  font-size: 1.15rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* "Chat" crossed out in the wordmark, like the icon's red X */
.brand-chat {
  position: relative;
  color: var(--brand-red);
}
.brand-chat::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 46%;
  height: 0.13em;
  background: var(--brand-red-dark);
  transform: rotate(-5deg);
  pointer-events: none;
}

.topnav {
  display: flex;
  gap: 2.2rem;
  margin-left: auto;
}
.topnav a {
  font-family: var(--px);
  font-size: 0.95rem;
  color: var(--text-dim);
  text-decoration: none;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.topnav a:hover { color: var(--aqua); }

/* Mobile section menu: pause-menu style, shown only when the nav row hides */
.mnav { display: none; position: relative; margin-left: auto; }
.mnav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--px);
  font-size: 0.85rem;
  color: var(--text);
  background: var(--stone-dk);
  border: 2px solid;
  border-color: var(--stone) var(--night-0) var(--night-0) var(--stone);
  padding: 0.5rem 0.75rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav[open] > summary { border-color: var(--night-0) var(--stone) var(--stone) var(--night-0); }
.mnav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 12.5rem;
  display: grid;
  padding: 0.5rem 0;
  z-index: 60;
}
.mnav-panel a {
  font-family: var(--px);
  font-size: 0.9rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.mnav-panel a:hover, .mnav-panel a:focus-visible { color: var(--aqua); background: rgba(142, 201, 220, 0.07); }

/* ---------- Hero: wide split, icon left, copy right ---------- */
.hero {
  position: relative;
  min-height: min(80vh, 50rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--keyline);
}
.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: min(76rem, 100%);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 10vh, 6.5rem);
}
.hero-copy { flex: 1; min-width: 0; }

.hero-media {
  flex: 1.15;
  min-width: 0;
  display: grid;
  place-items: center;
}
.hero-shot {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
  border: 2px solid;
  border-image: linear-gradient(to bottom, var(--tip-border-t), var(--tip-border-b)) 1;
}

.hero h1 {
  font-family: var(--px);
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  line-height: 0.98;
  margin: 0 0 1.2rem;
  letter-spacing: 0.01em;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7);
  text-wrap: balance;
}
.tagline {
  font-family: var(--px);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--aqua);
  margin: 0 0 1.2rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.tagline-note { color: var(--text-dim); white-space: nowrap; }
.hero-sub {
  max-width: 58ch;
  color: var(--text-dim);
  margin: 0 0 2rem;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.official-line {
  margin: 0;
  font-family: var(--px);
  font-size: 0.85rem;
  color: var(--text-faint);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.sys { color: var(--text-faint); }


/* ---------- Sections ---------- */
.section {
  width: min(52rem, 100%);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1rem, 4vw, 2.5rem) 0;
  scroll-margin-top: 4.5rem;
}
.section-wide { width: min(72rem, 100%); }
.section-first { padding-top: clamp(2.5rem, 6vh, 4.5rem); }

h2 {
  font-family: var(--px);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.section-lede {
  color: var(--text-dim);
  max-width: 62ch;
  margin: -0.6rem 0 2rem;
}
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.2rem; }
.prose a { overflow-wrap: break-word; }

/* ---------- Pipeline ---------- */
.pipeline {
  margin: 2.8rem 0 0;
  padding: 1.2rem 1.4rem 1.5rem;
}
.pipe-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.pipe-stage {
  position: relative;
  padding: 0.4rem 1.1rem 0.2rem 0;
  border-left: 1px solid var(--keyline);
  padding-left: 1.1rem;
}
.pipe-stage:first-child { border-left: 0; padding-left: 0; }
.pipe-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--px);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.pipe-note {
  display: block;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.pipe-kill .pipe-name { color: var(--red); }
.pipe-kill {
  background:
    linear-gradient(rgba(160, 71, 71, 0.12), rgba(160, 71, 71, 0.12));
  outline: 1px solid rgba(224, 108, 108, 0.35);
  outline-offset: -6px;
  padding: 0.7rem 1.1rem 0.6rem;
}

/* ---------- Setups ---------- */
.setup-list { display: grid; gap: 0; border-top: 1px solid var(--keyline); }
.setup {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--keyline);
}
.setup h3 { margin: 0; min-width: 0; }
.setup-key {
  font-family: var(--px);
  font-size: 1rem;
  color: var(--aqua);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}
.setup-body p { margin: 0 0 1rem; }
.setup-body p:last-child { margin-bottom: 0; }

.config-note { margin-top: 2.4rem; padding: 1.2rem 1.4rem; }
.config-text { margin: 0; font-size: 0.9rem; color: var(--text-dim); }

/* ---------- Video links ---------- */
.video-links { color: var(--text-dim); }

/* ---------- Download picker ---------- */
.picker { padding: 1.3rem 1.4rem 1.4rem; }
.picker-selects {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.picker-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 0.3rem;
}
.picker-logo.px { image-rendering: pixelated; }
.picker-field { min-width: 0; }
.picker-row { margin-bottom: 1rem; }
.picker-field .picker-label { margin-bottom: 0.45rem; }
.picker-label {
  display: block;
  font-family: var(--px);
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 0.45rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.ver-select {
  width: 100%;
  max-width: 22rem;
  font-family: var(--px);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--night-1);
  border: 2px solid;
  border-color: var(--tip-border-b) var(--tip-border-t) var(--tip-border-t) var(--tip-border-b);
  padding: 0.65rem 0.8rem;
  color-scheme: dark;
  cursor: pointer;
}
.picker-note {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---------- Page icons ---------- */
.page-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: block;
  color: var(--aqua-dim);
  margin-bottom: 1.1rem;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
}

/* ---------- Wiki-grounded pages ---------- */
.code-block {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--tip-bg);
  border: 1px solid var(--keyline);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 68ch;
}
.code-block code {
  background: none;
  padding: 0;
  color: var(--text-dim);
  font-size: 1em;
}
.wiki-source {
  font-size: 0.85rem;
  color: var(--text-faint);
  border-top: 1px solid var(--keyline);
  padding-top: 1rem;
  margin-top: 1.8rem;
}

/* ---------- Version pages ---------- */
.version-note { margin-top: 2rem; }
.ver-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.ver-links a {
  font-family: var(--px);
  font-size: 0.95rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--keyline);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.ver-links a:hover, .ver-links a:focus-visible {
  color: var(--aqua);
  border-color: var(--tip-border-t);
}

/* ---------- Install page ---------- */
.path-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.path-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--keyline);
}
.path-list li:last-child { border-bottom: 0; }
.verify-shot {
  margin: 1.4rem 0 0;
  max-width: 26rem;
}
.verify-shot img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 2px solid;
  border-image: linear-gradient(to bottom, var(--tip-border-t), var(--tip-border-b)) 1;
}
.verify-shot figcaption {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 0.5rem;
}

/* ---------- Seam gallery ---------- */
.seam-gallery {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vh, 4rem);
  padding: 1rem 0 0;
}
.seam-gallery::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--keyline);
}
.exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0;
}
.exhibit:nth-child(even) .shot-link { order: 2; }
.exhibit:nth-child(even) figcaption { order: 1; text-align: right; justify-self: end; }
.shot-link {
  display: block;
  line-height: 0;
  border: 2px solid;
  border-image: linear-gradient(to bottom, var(--tip-border-t), var(--tip-border-b)) 1;
  transition: filter 150ms ease-out;
}
.shot-link:hover { filter: brightness(1.12); }
.shot-link img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.exhibit figcaption { max-width: 44ch; }
.exhibit h3 {
  font-family: var(--px);
  font-size: 1.15rem;
  margin: 0 0 0.7rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.exhibit p { margin: 0; color: var(--text-dim); font-size: 0.95rem; }

/* ---------- Videos: thumbnail-first embeds in tooltip frames ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
}
.video-card { margin: 0; }
.video-lite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--night-1);
  border: 2px solid;
  border-image: linear-gradient(to bottom, var(--tip-border-t), var(--tip-border-b)) 1;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.video-lite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82);
  transition: filter 150ms ease-out;
}
.video-lite:hover img, .video-lite:focus-visible img { filter: brightness(1.05); }
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--aqua);
}
.video-play .px-icon {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  background: rgba(10, 11, 16, 0.8);
  border: 1px solid rgba(142, 201, 220, 0.45);
  box-sizing: content-box;
  transition: filter 150ms ease-out;
}
.video-lite:hover .video-play .px-icon,
.video-lite:focus-visible .video-play .px-icon {
  filter: brightness(1.18);
}
.video-frame { width: 100%; height: 100%; border: 0; }
.video-card figcaption {
  font-family: var(--px);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.7rem;
  line-height: 1.5;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* ---------- Latest-release panel (downloads) ---------- */
.latest-panel { margin-top: 1.8rem; padding: 1.2rem 1.4rem 1.3rem; }
.latest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.4rem 0 1rem;
}
.latest-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.dl-size {
  font-family: var(--mono);
  font-size: 0.8rem;
  opacity: 0.75;
  margin-left: 0.55rem;
  text-shadow: none;
}
.plate-table .dl-size { display: inline-block; color: var(--text-faint); opacity: 1; }
.dl-title {
  font-family: var(--px);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

/* ---------- Checksums ---------- */
.sum-table td {
  font-size: 0.8rem;
  color: var(--text-dim);
  word-break: break-all;
}
.sum-table td:first-child { color: var(--text); white-space: nowrap; }

/* ---------- Effects: particle canvas + sound toggle ---------- */
.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
}
/* ---------- Download plate ---------- */
.plate { padding: 1.2rem 1.4rem 1.4rem; overflow-x: auto; }
.cap-short { display: none; }
.plate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.plate-table caption { text-align: left; }
.plate-table th, .plate-table td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--keyline);
}
.plate-table thead th {
  font-family: var(--px);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.plate-table tbody th {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.plate-table a { text-decoration: none; }
.plate-table a:hover { text-decoration: underline; }
.plate-empty { color: var(--text-faint); }
.is-latest th, .is-latest td { background: rgba(142, 201, 220, 0.05); }
.is-latest tbody th { color: var(--aqua); }
.plate-foot {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* ---------- Changelog ---------- */
.log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--keyline);
}
.log-entry { padding: 0 0 1.6rem 1.5rem; position: relative; }
.log-entry::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--tip-border-t);
}
.log-build {
  font-family: var(--px);
  font-size: 0.95rem;
  color: var(--aqua);
  margin-right: 1rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.log-date {
  font-size: 0.8rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.log-entry ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.log-entry li { margin-bottom: 0.25rem; }

.log-more { margin-top: 0.5rem; }
.log-more > summary {
  cursor: pointer;
  font-family: var(--px);
  font-size: 0.9rem;
  color: var(--text-dim);
  padding: 0.6rem 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.log-caret { color: var(--aqua); transition: transform 140ms ease-out; }
.log-more[open] .log-caret { transform: rotate(90deg); }
.log-more > summary::-webkit-details-marker { display: none; }
.log-more > summary:hover { color: var(--aqua); }
.log-more[open] > summary { margin-bottom: 1rem; }

/* ---------- FAQ: one tooltip panel, questions as chat lines ---------- */
.faq-list { padding: 1.1rem 0 0.4rem; }
.faq-list > .tip-title { padding: 0 1.25rem; }
.faq { border-top: 1px solid var(--keyline); }
.faq:first-of-type { border-top: 0; }
.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq-ico { flex: none; margin-top: 0.22em; }
.faq-ico-q { color: var(--aqua); }
.faq-ico-bang { color: var(--green); display: none; }
.faq[open] .faq-ico-q { display: none; }
.faq[open] .faq-ico-bang { display: inline-block; }
.faq > summary h3 {
  display: inline;
  font-family: var(--px);
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.faq > summary:hover h3 { color: var(--aqua); }
.faq > p {
  margin: 0;
  padding: 0.1rem 1.25rem 1.1rem 3rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* ---------- Close ---------- */
.close {
  text-align: center;
  padding: clamp(4.5rem, 12vh, 8rem) 1rem clamp(4rem, 10vh, 7rem);
}
.close-sub {
  margin: 1.4rem 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ---------- Footer: Monocraft throughout, brand block + two link columns ---------- */
.footer {
  border-top: 1px solid var(--keyline);
  background: var(--night-1);
  font-family: var(--px);
  padding: 3.2rem clamp(1rem, 4vw, 2.5rem) 1.6rem;
}
.footer-inner {
  width: min(72rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
}
.footer-brand img {
  display: block;
  margin-bottom: 0.9rem;
}
.footer-wordmark { margin: 0 0 0.5rem; color: var(--text); }
.footer-tag {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.footer-by {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-faint);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.footer-by a { color: var(--text-dim); text-decoration: none; }
.footer-by a:hover { color: var(--aqua); }
.footer-head {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.footer-col a {
  display: block;
  font-size: 0.95rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.28rem 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--aqua); }
.footer-langs {
  width: min(72rem, 100%);
  margin: 2.2rem auto 0;
  font-size: 0.85rem;
  color: var(--text-faint);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.footer-langs a { color: var(--text-dim); text-decoration: none; }
.footer-langs a:hover { color: var(--aqua); }
.footer-langs span { color: var(--text); }

.footer-legal {
  width: min(72rem, 100%);
  margin: 2.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--keyline);
  font-size: 0.8rem;
  color: var(--text-faint);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pipe-track { grid-template-columns: 1fr 1fr; gap: 1.2rem 0; }
  .pipe-track .pipe-stage:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 820px) {
  .topnav { display: none; }
  .mnav { display: block; }
  .hero-inner { flex-direction: column; text-align: center; gap: 2.2rem; }
  .hero-media { width: 100%; }
  .hero-copy .cta-row { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .seam-gallery::before { display: none; }
  .exhibit { grid-template-columns: 1fr; gap: 1rem; }
  .exhibit:nth-child(even) .shot-link { order: 0; }
  .exhibit:nth-child(even) figcaption { order: 0; text-align: left; justify-self: start; }
  .exhibit { border-bottom: 1px solid var(--keyline); padding-bottom: 2rem; }
  .exhibit:last-child { border-bottom: 0; }
  .setup { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 700px) {
  .video-grid { grid-template-columns: 1fr; }
  .picker-selects { align-items: stretch; flex-direction: column; }
  .picker-logo { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cap-long { display: none; }
  .cap-short { display: inline; }
  .plate { position: relative; padding-right: 0.6rem; }
  .plate::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.4rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(16, 18, 26, 0.92));
  }
  .plate-table th, .plate-table td { padding: 0.55rem 0.65rem; }
}

@media (max-width: 560px) {

  body { font-size: 0.95rem; }
  .topbar { gap: 0.7rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .brand-name { font-size: 0.8rem; white-space: nowrap; }
  .btn-slim { font-size: 0.8rem; padding: 0.5rem 0.6rem 0.55rem; }
  .btn-slim .cta-label { display: none; }
  .btn-slim .px-icon { width: 1.3em; height: 1.3em; }
  .mnav > summary { font-size: 0.8rem; padding: 0.5rem 0.6rem; }
  .pipe-track { grid-template-columns: 1fr; }
  .pipe-stage { border-left: 0; padding-left: 0; border-top: 1px solid var(--keyline); padding-top: 0.9rem; margin-top: 0.4rem; }
  .pipe-stage:first-child { border-top: 0; margin-top: 0; }
  .btn-big { font-size: 0.95rem; padding: 0.95rem 1rem 1rem; }
  .faq > p { padding-left: 1.25rem; }
}

/* ---------- Page-transition loading screen: seed/terrain generation over a blur ---------- */
.loadscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 11, 16, 0.55);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
@supports not (backdrop-filter: blur(9px)) {
  .loadscreen { background: rgba(10, 11, 16, 0.9); }
}
.loadscreen.is-on {
  opacity: 1;
  pointer-events: auto;
}
.load-cubes {
  display: flex;
  gap: 10px;
}
.load-cubes span {
  width: 18px;
  height: 18px;
  background: var(--btn-green);
  box-shadow: inset 3px 3px 0 var(--btn-green-lt), inset -3px -3px 0 var(--btn-green-dk);
  animation: cube-pulse 0.9s ease-in-out infinite;
}
.load-cubes span:nth-child(2) { animation-delay: 0.15s; }
.load-cubes span:nth-child(3) { animation-delay: 0.3s; }
.load-cubes span:nth-child(4) { animation-delay: 0.45s; }
@keyframes cube-pulse {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-10px); opacity: 1; }
}

/* ---------- Scroll reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms ease-out, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--rvd, 0) * 70ms);
}
.rv-in {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, a { transition: none; }
}