/* ============================================================================
   Public subscription surface — INGSOC telescreen (dark).
   The client's link is a guarded secret: the masked URL sits behind a "closed
   lens"; COPY is the amber lamp, and app.js flashes a shutter on copy.
   Tokens from ingsoc.css; --sub-* remapped onto them.
   ============================================================================ */
:root {
  --sub-bg: var(--bg);
  --sub-card: var(--surface);
  --sub-border: var(--border);
  --sub-text: var(--text);
  --sub-muted: var(--muted);
  --sub-accent: var(--lamp);
  --sub-accent-dim: rgba(230, 165, 44, 0.14);
  --sub-radius: var(--radius);
  --sub-font: var(--font-body);
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--sub-text);
  font-family: var(--sub-font);
  line-height: 1.55;
}

.sub-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sub-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sub-header-actions {
  display: flex;
  gap: 8px;
}

.sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--sub-border);
  background: var(--surface-2);
  color: var(--sub-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.14s var(--ease-out);
}

.sub-btn:hover {
  border-color: var(--lamp);
  color: var(--lamp);
  transform: translateY(-1px);
}

.sub-btn.sm { padding: 6px 12px; }

.sub-btn.icon {
  width: 36px;
  height: 36px;
  padding: 0;
}
.sub-btn.icon .logo-mark {
  height: 20px;
  width: 20px;
}
.sub-btn.icon .icon-telegram {
  width: 18px;
  height: 18px;
  display: block;
}
.sub-btn.icon:hover .logo-bar { fill: var(--lamp); }
.sub-btn.icon:hover .logo-bar.core { fill: var(--lamp-strong); }

.sub-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sub-card {
  position: relative;
  background: var(--sub-card);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
/* the status card reads as the lit terminal header */
.sub-status { border-top: 2px solid var(--lamp); }

.sub-section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub-muted);
}

.sub-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.sub-badge {
  flex: 1 1 140px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--sub-border);
  background: var(--surface-inset);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.sub-providers { margin-top: 4px; }

.sub-provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sub-provider-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--sub-border);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.sub-provider-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--sub-accent-dim);
  border: 1px solid var(--glow-amber);
  flex-shrink: 0;
}

/* Masked link — the closed lens */
.sub-url-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius);
  border: 1px solid var(--sub-border);
  overflow: hidden;
  background: var(--surface-inset);
}

.sub-copy-btn {
  flex-shrink: 0;
  padding: 12px 18px;
  border: none;
  border-right: 1px solid var(--lamp-strong);
  background: var(--lamp);
  color: var(--lamp-ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.15s;
}

.sub-copy-btn:hover { background: var(--lamp-strong); }

.sub-url-text {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--sub-muted);
  display: flex;
  align-items: center;
  letter-spacing: 0.02em;
}

.sub-hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--sub-muted);
}

.sub-qr-card { text-align: center; }

.sub-qr {
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
  background: #fff;
  padding: 8px;
}

.sub-instructions p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--sub-text);
}

.sub-instructions p:last-child { margin-bottom: 0; }

.sub-renew {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--sub-border);
  color: var(--sub-muted) !important;
}

.sub-renew a {
  color: var(--sub-accent);
  text-decoration: none;
}

.sub-renew a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .sub-page { padding: 18px 12px 40px; }
  .sub-card { padding: 18px 16px; }
  .sub-brand { font-size: 1.2rem; }
  .sub-header { gap: 10px; }
  .sub-url-text { font-size: 0.72rem; }
}

@media (max-width: 400px) {
  .sub-provider-grid { grid-template-columns: 1fr; }
  .sub-status-row { flex-direction: column; }
}

/* --- Routing transparency page --- */
/* Wider column than the subscription card: this page carries tables of 64-char hashes and
   shell commands, which are unreadable squeezed into the default 520px.
   width:100% is required: body[data-surface=public] is a column flex, and margin:auto
   on the flex item otherwise shrink-to-fits to content — /servers then collapses to a
   single location column instead of the multi-column grid. */
.sub-page-wide {
  max-width: 1080px;
  width: 100%;
}
.sub-page-wide .sub-card { padding: 26px 28px; }
.sub-page-wide .sub-main { display: grid; gap: 18px; }

.routing-title { margin: 0 0 12px; font-size: 1.5rem; }
.routing-h2 { margin: 0 0 14px; font-size: 1.15rem; }
.routing-h3 { margin: 18px 0 8px; font-size: 0.95rem; color: var(--sub-muted); }
.routing-lead { margin: 0 0 10px; line-height: 1.6; }
.routing-list {
  margin: 0 0 10px;
  padding-left: 1.25em;
  line-height: 1.65;
  color: var(--text);
}
.routing-list li { margin: 0 0 6px; }
.routing-meta { margin: 0 0 12px; color: var(--sub-muted); font-size: 0.85rem; }
.routing-note { margin: 10px 0 0; color: var(--sub-muted); font-size: 0.85rem; line-height: 1.6; }

.routing-table-wrap { overflow-x: auto; }

.routing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.routing-table th,
.routing-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--sub-border);
  vertical-align: top;
}

.routing-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-muted);
}

.routing-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.routing-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  word-break: break-all;
}

.routing-code {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-inset);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
}

.routing-keys { margin: 12px 0 0; }
.routing-keys dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-muted);
  margin-top: 10px;
}
.routing-keys dd { margin: 4px 0 0; }

/* Instant View cover banner: shipped in the HTML for Telegram's IV reader (which
   ignores CSS), never shown on the website itself. See docs/LEGAL.md. */
.doc-iv-cover { display: none; }

/* --- Legal & help documents (/docs/*) --- */
/* Long prose, not a form: a wider column than the 520px subscription card but
   narrower than the routing tables, so the line length stays readable.
   The Telegram Mini App rendering of the same markup lives in reader.css. */
.sub-page-doc {
  max-width: 780px;
  width: 100%;
}
.sub-page-doc .sub-card { padding: 28px 32px; }

.legal-doc h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.25;
  text-align: center;
}

.legal-doc h2 {
  margin: 34px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--sub-border);
  font-size: 1.12rem;
  text-align: center;
}

.legal-doc h3 {
  margin: 24px 0 8px;
  font-size: 0.98rem;
  color: var(--sub-accent);
}

.legal-doc p { margin: 0 0 12px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }

/* Flash colouring on the public support page. */
.legal-meta.error { color: var(--sub-danger, #c44); }
.legal-meta.ok { color: var(--sub-accent); }

/* One message in a support thread. */
.sub-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--sub-border); border-radius: var(--sub-radius); }
.sub-note-body { white-space: pre-wrap; }

.legal-meta {
  margin: 0 0 18px;
  color: var(--sub-muted);
  font-size: 0.85rem;
}
.legal-doc > h1 + .legal-meta { text-align: center; }

.legal-lead { color: var(--sub-text); }
.legal-label { margin-bottom: 6px; color: var(--sub-muted); }

.legal-toc {
  margin: 0 0 8px;
  padding: 14px 18px;
  background: var(--surface-inset);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
}
.legal-toc ol { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.legal-toc li { margin-bottom: 4px; }
.legal-toc a { color: var(--sub-text); }
.legal-toc a:hover { color: var(--sub-accent); }

.legal-terms { margin: 0 0 14px; }
.legal-terms dt { margin-top: 12px; font-weight: 600; color: var(--sub-accent); }
.legal-terms dd { margin: 2px 0 0; }

.legal-crosslink {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--sub-border);
}

/* Guest support form on /support (same column as legal docs). */
.legal-doc .form-group { margin-bottom: 16px; }
.legal-doc .form-group input,
.legal-doc .form-group textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  background: var(--surface-inset);
  color: var(--sub-text);
  font: inherit;
}
.legal-doc .form-group textarea { resize: vertical; min-height: 120px; }
.legal-doc .mt { margin-top: 18px; }

@media (max-width: 640px) {
  .sub-page-doc .sub-card { padding: 20px 18px; }
}

/* ============================================================================
   Public /servers — connection banner + live location grid (Mullvad-style).
   Uses --sub-* / ingsoc tokens, so it themes light/dark with the rest.
   ============================================================================ */

.sub-btn.primary {
  background: var(--lamp);
  border-color: var(--lamp);
  color: #14100a;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.sub-btn.primary:hover {
  color: #14100a;
  box-shadow: 0 6px 20px var(--glow-amber);
  filter: brightness(1.05);
}

/* --- Connection banner: what every site already sees about the visitor --- */
.chk-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--sub-border));
  border-left: 3px solid var(--danger);
  border-radius: var(--sub-radius);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}
.chk-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent);
  animation: chk-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes chk-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.chk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chk-status {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--danger);
}
.chk-detail { font-size: 0.86rem; color: var(--sub-muted); }
.chk-ip { font-family: var(--font-mono); color: var(--sub-text); }
.chk-geo { color: var(--sub-text); }
.chk-cta {
  flex: none;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lamp);
  white-space: nowrap;
}
.chk-cta:hover { text-decoration: underline; }

/* --- Hero: big count over a faint world map --- */
.srv-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: 30px 26px;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  background: var(--sub-card);
}
.srv-hero-map {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 78%);
}
.srv-hero-map .hub-map-svg { width: 100%; height: auto; }
.srv-hero-body { position: relative; z-index: 1; }
.srv-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--sub-accent);
}
.srv-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--sub-text);
}
.srv-note { margin: 0 0 20px; max-width: 44ch; font-size: 0.9rem; color: var(--sub-muted); }
.srv-stats { display: flex; flex-wrap: wrap; gap: 26px; }
.srv-stat { display: flex; flex-direction: column; gap: 2px; }
.srv-stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sub-text);
}
.srv-stat-num.srv-live { color: var(--sub-accent); }
.srv-stat-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sub-muted);
}

.srv-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.srv-list-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub-text);
}
.srv-search {
  flex: 0 1 260px;
  padding: 9px 13px;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  background: var(--sub-card);
  color: var(--sub-text);
  font-family: var(--sub-font);
  font-size: 0.9rem;
}
.srv-search:focus {
  outline: none;
  border-color: var(--sub-accent);
  box-shadow: 0 0 0 3px var(--sub-accent-dim);
}

.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.srv-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius);
  background: var(--sub-card);
  transition: border-color 0.15s, transform 0.15s var(--ease-out);
}
.srv-card:hover { border-color: var(--sub-accent); transform: translateY(-2px); }
.srv-card[hidden] { display: none; }
.srv-flag { flex: none; font-size: 1.5rem; line-height: 1; }
.srv-card-body { flex: 1 1 auto; min-width: 0; }
.srv-name {
  font-weight: 600;
  color: var(--sub-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srv-badges { display: flex; gap: 5px; margin-top: 4px; }
.srv-badge {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.srv-badge.super { color: var(--lamp); border-color: color-mix(in srgb, var(--lamp) 45%, transparent); }
.srv-badge.game  { color: #46b39d; border-color: color-mix(in srgb, #46b39d 45%, transparent); }
.srv-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.srv-count {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sub-text);
}
.srv-ping {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sub-muted);
}
.srv-ping::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 5px rgba(63, 185, 80, 0.7);
}

.srv-empty, .srv-noresults { margin: 8px 0; color: var(--sub-muted); font-size: 0.9rem; }
.srv-noresults[hidden] { display: none; }

.srv-credit { margin: 6px 0 0; font-size: 0.7rem; color: var(--sub-muted); opacity: 0.75; }
.srv-credit span { color: var(--sub-text); }

/* --- World-map raster shared with the auth hub (node_map partial) --- */
.srv-hero-map .map-land {
  fill: none;
  stroke: var(--text);
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0.28;
}
.srv-hero-map .map-node-core { fill: var(--lamp); filter: drop-shadow(0 0 4px var(--glow-amber)); }
.srv-hero-map .map-node-halo {
  fill: var(--lamp);
  opacity: 0.15;
  animation: map-pulse 3.2s var(--ease-in-out) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes map-pulse {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.45; }
}

@media (max-width: 640px) {
  .srv-title { font-size: 1.4rem; }
  .srv-hero { padding: 24px 18px; }
  .srv-stats { gap: 20px; }
  .chk-cta { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chk-dot, .srv-hero-map .map-node-halo { animation: none; }
  .srv-card:hover { transform: none; }
}

/* ============================================================================
   Manifest (/manifest) — the one long-form page that is not a legal document.
   Chapters are numbered plates rather than a running <h2> stream: the text is
   read in sittings, and the numeral is what a reader comes back to.
   ============================================================================ */

/* Prose like /docs/*, but every chapter carries a 300px illustration beside the
   text, so the 780px document column is the wrong measure: it leaves the text
   about 330px wide, a third of the plate, and the page reads as a caption strip.
   1080px is the width the chapters were designed at. */
.sub-page-manifest {
  max-width: 1080px;
  width: 100%;
}
.mf-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 28px 52px;
  text-align: center;
  border: 1px solid var(--sub-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, var(--party-soft), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

/* A single scan line that trips every few seconds: the telescreen is watching
   this page too. Purely decorative, and off under reduced-motion. */
.mf-hero-glitch {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--party), transparent);
  opacity: 0;
  animation: mf-glitch 5s steps(1) infinite;
}
@keyframes mf-glitch {
  0%, 92%, 100% { opacity: 0; transform: translateY(0); }
  93% { opacity: 0.5; transform: translateY(-6px); }
  96% { opacity: 0.25; transform: translateY(4px); }
}

.mf-hero-kicker {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--party);
}

.mf-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--text-strong);
}

.mf-hero-rule {
  width: 120px;
  height: 1px;
  margin: 26px auto 0;
  background: var(--lamp);
  box-shadow: 0 0 12px var(--glow-amber);
  transform-origin: center;
  animation: mf-rule-grow 1.2s var(--ease-out) both;
}
@keyframes mf-rule-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.mf-hero-lead {
  margin: 26px auto 0;
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--sub-muted);
}

.mf-chapter {
  position: relative;
  margin-top: 26px;
  padding: 38px 34px 34px;
  border: 1px solid var(--sub-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Amber spine down the left edge: the lamp, running the length of the text. */
.mf-chapter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 34px;
  width: 3px;
  background: var(--lamp);
  box-shadow: 0 0 10px var(--glow-amber);
}

.mf-chapter-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
}

.mf-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--lamp);
}

.mf-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.mf-rule {
  width: 100%;
  height: 1px;
  margin: 14px 0 22px;
  background: linear-gradient(90deg, var(--lamp), transparent);
}

.mf-chapter p {
  margin: 0 0 14px;
  line-height: 1.75;
  text-wrap: pretty;
}
.mf-chapter p:last-child { margin-bottom: 0; }

/* Text column plus a fixed 300px illustration. The width is fixed rather than
   fractional so every chapter's picture lines up down the page, and so the
   files can be encoded once for one known column width. */
.mf-chapter-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.mf-figure {
  margin: 0;
  border: 1px solid var(--sub-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-inset);
}

/* No filter and no overlay. The design put CRT scan lines and a dark scrim over
   this column, which suits a photograph but not these illustrations: most of
   them are posters whose point is the lettering, and a 1px grid over a picture
   downscaled from 600px to 300px both eats the text and moires. The censorship
   motif is already inside the images (black bars, pixelation), it does not need
   a second pass in CSS. */
.mf-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Below the two-column breakpoint the picture leads the chapter instead of
   sitting in a column of its own: a 300px image stranded above a full-width
   paragraph block reads as a stray thumbnail. */
@media (max-width: 860px) {
  .mf-chapter-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .mf-figure { order: -1; }
}

.mf-close {
  margin-top: 26px;
  padding: 52px 28px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--lamp) 35%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--lamp) 10%, transparent), transparent 70%),
    var(--surface);
}

.mf-close-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--text-strong);
}

.mf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 12px 26px;
  border: 1px solid var(--lamp);
  border-radius: var(--radius);
  background: var(--lamp);
  color: var(--lamp-ink);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-fast) var(--ease-out);
}
.mf-cta:hover,
.mf-cta:focus-visible {
  box-shadow: 0 6px 20px var(--glow-amber);
  filter: brightness(1.05);
  text-decoration: none;
}

/* Scroll reveal. The default state is fully visible, so a reader without
   JavaScript gets the whole document; interactions.js opts the page in by
   setting .js-reveal, then lifts each chapter as it scrolls into view. */
.js-reveal .mf-chapter,
.js-reveal .mf-close {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js-reveal .mf-chapter.is-visible,
.js-reveal .mf-close.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .mf-hero { padding: 44px 18px 36px; }
  .mf-chapter { padding: 26px 20px 24px; }
  .mf-chapter-head { gap: 12px; }
  .mf-num { font-size: 1.9rem; }
  .mf-title { font-size: 1.05rem; }
  .mf-close { padding: 36px 18px; }
}

/* ============================================================================
   FAQ (/faq) — accordion over the same document column as /docs/*.
   ============================================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--sub-border);
  border-left: 3px solid var(--lamp);
  border-radius: var(--radius);
  background: var(--surface-inset);
  overflow: hidden;
}
/* Losing your access code is the one question with no self-service answer, so
   it is marked in party red rather than amber. */
.faq-item.danger { border-left-color: var(--party); }

.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}
.faq-q::-webkit-details-marker { display: none; }

.faq-mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--lamp) 55%, transparent);
  border-radius: 50%;
  color: var(--lamp);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item.danger .faq-mark {
  border-color: color-mix(in srgb, var(--party) 55%, transparent);
  color: var(--party);
}

.faq-q-text { flex: 1 1 auto; }

.faq-a {
  padding: 0 18px 18px 52px;
  line-height: 1.7;
}
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .faq-a { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-hero-glitch, .mf-hero-rule { animation: none; }
  .js-reveal .mf-chapter,
  .js-reveal .mf-close { opacity: 1; transform: none; transition: none; }
}