/* Rocket Racing Archive styles. The real RL typeface, tinted-black canvas,
   one warm accent, and the live DelMar loading wheel in the hero. */

/* the real Rocket Racing typeface (Psyonix RL Fonts) */
@font-face { font-family:"RL Display"; src:url(fonts/RLLarge-D800.woff2) format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Display"; src:url(fonts/RLLarge-E900.woff2) format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Medium.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Semibold.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --bg:      #06080b;
  --bg-2:    #0a0d12;
  --panel:   rgba(255,255,255,0.022);
  --ink:     #eef1f3;
  --dim:     #9aa4ad;
  --faint:   #69737d;
  --line:    rgba(255,255,255,0.085);
  --line-2:  rgba(255,255,255,0.14);
  --accent:  #ff6a2b;
  --disp: "RL Display", "Arial Narrow", system-ui, sans-serif;
  --text: "RL Text", ui-sans-serif, system-ui, sans-serif;
  --chrome-h: 60px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* a small racing-car cursor (Rocket Racing); hotspot at the car's centre so
     clicks land where the icon visually sits (nose-tip felt inaccurate) */
  --cur-car: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI2IDMwIj48ZyBzdHJva2U9IiMwYTBiMGUiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjQiIHk9IjcuNSIgd2lkdGg9IjQuMiIgaGVpZ2h0PSI2LjQiIHJ4PSIxLjgiIGZpbGw9IiMwYTBiMGUiLz48cmVjdCB4PSIxOS40IiB5PSI3LjUiIHdpZHRoPSI0LjIiIGhlaWdodD0iNi40IiByeD0iMS44IiBmaWxsPSIjMGEwYjBlIi8+PHJlY3QgeD0iMi40IiB5PSIxNy42IiB3aWR0aD0iNC4yIiBoZWlnaHQ9IjYuNCIgcng9IjEuOCIgZmlsbD0iIzBhMGIwZSIvPjxyZWN0IHg9IjE5LjQiIHk9IjE3LjYiIHdpZHRoPSI0LjIiIGhlaWdodD0iNi40IiByeD0iMS44IiBmaWxsPSIjMGEwYjBlIi8+PHBhdGggZD0iTTEzIDEuNCBDMTQuNSAyLjggMTUuNiA1LjYgMTUuNiA5LjMgTDE1LjYgMjMuNCBDMTUuNiAyNi43IDE0LjQgMjguMyAxMyAyOC4zIEMxMS42IDI4LjMgMTAuNCAyNi43IDEwLjQgMjMuNCBMMTAuNCA5LjMgQzEwLjQgNS42IDExLjUgMi44IDEzIDEuNCBaIiBmaWxsPSIjZmY2YTJiIi8+PHJlY3QgeD0iNy44IiB5PSI4LjQiIHdpZHRoPSIxMC40IiBoZWlnaHQ9IjIuNCIgcng9IjEuMiIgZmlsbD0iIzBhMGIwZSIgc3Ryb2tlPSJub25lIi8+PGVsbGlwc2UgY3g9IjEzIiBjeT0iMTYuMiIgcng9IjEuOSIgcnk9IjIuNyIgZmlsbD0iIzBhMGIwZSIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPgo=") 13 15;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chrome-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: 16.5px; line-height: 1.75; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
::selection { background: rgba(255,106,43,0.26); }
/* racing-car cursor site-wide; clickable things keep it (pointer fallback),
   text fields keep a caret so typing feels normal. Ignored on touch devices. */
body { cursor: var(--cur-car), auto; }
a, button, [role="button"], summary, .btn, .sc, .comp-card, .feature-media, .pg, .support-btn { cursor: var(--cur-car), pointer; }
input, textarea, select, [contenteditable="true"] { cursor: text; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* site-wide liquid-glass ambient background (behind everything) */
#liquid-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 2.4s ease; }
body.revealed #liquid-bg { opacity: 1; }
#liquid-fallback { position: fixed; inset: 0; z-index: -3; background: url(media/liquid.webp) center / cover; filter: brightness(0.26) saturate(0.82) contrast(1.05); animation: liquidpan 100s ease-in-out infinite alternate; }
@keyframes liquidpan { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.16) translate(-2.4%, -1.8%); } }

/* progress */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}

/* chrome (top bar) */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; height: var(--chrome-h); z-index: 80;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-name { font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: 0.005em; }
.brand-name em { color: var(--dim); font-style: normal; font-weight: 400; }
.chrome-right { display: flex; align-items: center; gap: 18px; }
.chrome-here { font-size: 12.5px; color: var(--dim); max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: none; border: 0; font-family: var(--text); padding: 8px 0; cursor: pointer; transition: color .2s; }
.chrome-here:hover { color: var(--accent); }

/* skip-to-content (visible only when focused via keyboard) */
.skip-link { position: fixed; top: -52px; left: 16px; z-index: 200; background: var(--accent); color: #0a0b0e; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chrome-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); font-family: var(--text); font-weight: 500; font-size: 13px; padding: 8px 2px; transition: color .2s; }
.chrome-btn:hover { color: var(--accent); }
/* header search looks like a real tappable field, not just an icon */
#search-btn { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); position: relative; z-index: 1; }
#search-btn:hover { border-color: var(--accent); color: var(--accent); }
/* gold glow around the search button: base radial + particle canvas.
   particles fade with distance so the canvas edge never shows as a square */
.sbtn-wrap { position: relative; display: inline-flex; }
.sbtn-wrap::before { content: ""; position: absolute; left: 50%; top: 55%; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,176,74,0.22), rgba(255,150,40,0.08) 45%, transparent 72%); }
.sbtn-glow { position: absolute; left: 50%; top: 55%; width: 180px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.chrome-btn kbd, .search-hint kbd { font-family: var(--text); font-size: 10px; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--dim); }
.chrome-index::before { content: ""; width: 15px; height: 1px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

/* index overlay */
#scrim { position: fixed; inset: 0; z-index: 95; background: rgba(3,4,6,0.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
#scrim.open { opacity: 1; pointer-events: auto; }
.index-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 92vw); z-index: 100;
  background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .5s var(--ease-out); overflow-y: auto; overscroll-behavior: contain;
}
.index-overlay.open { transform: translateX(0); }
.index-inner { padding: calc(var(--chrome-h) + 32px) 40px 64px; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.index-kicker { font-family: var(--disp); font-weight: 800; font-size: 20px; }
.index-count { font-size: 11px; color: var(--faint); }
.index-list { display: flex; flex-direction: column; }
#index-filter { width: 100%; margin: 16px 0 2px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: var(--text); font-size: 13px; outline: none; transition: border-color .2s; }
#index-filter:focus { border-color: var(--accent); }
#index-filter::placeholder { color: var(--faint); }
.index-sep { font-size: 11px; color: var(--faint); margin: 30px 0 6px; }
.nav-sec { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; color: var(--dim); border-bottom: 1px solid var(--line); transition: color .18s, padding-left .2s var(--ease-out); }
.nav-sec:hover { color: var(--ink); padding-left: 8px; }
.nav-sec.active { color: var(--accent); }
.nav-num { font-family: var(--text); font-weight: 500; font-size: 12px; color: var(--faint); min-width: 24px; font-variant-numeric: tabular-nums; }
.nav-sec:hover .nav-num, .nav-sec.active .nav-num { color: var(--accent); }
.nav-label { font-family: var(--disp); font-weight: 800; font-size: 17px; line-height: 1.2; }

/* main / typography */
#main { padding-top: var(--chrome-h); position: relative; z-index: 2; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 32px; }
.prose { max-width: 46rem; margin: 0 auto; padding: 80px 32px 128px; }

.kicker { font-family: var(--text); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.sec-head { margin-bottom: 40px; }
.sec-head h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(31px, 5vw, 52px); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }

.prose h2, .prose h3, .prose h4 { font-family: var(--disp); letter-spacing: -0.005em; scroll-margin-top: calc(var(--chrome-h) + 24px); }
.prose h2 { font-size: 26px; font-weight: 800; margin: 64px 0 20px; padding-top: 30px; border-top: 1px solid var(--line); }
.prose h3 { font-size: 20px; font-weight: 800; margin: 42px 0 12px; }
.prose h4 { font-size: 13px; font-weight: 600; font-family: var(--text); margin: 30px 0 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.prose p { margin: 0 0 20px; }
.prose strong { font-weight: 600; color: #fff; }
.prose em { color: #dfe4e8; }
.prose a:not(.btn) { color: var(--accent); border-bottom: 1px solid rgba(255,106,43,0.32); transition: border-color .2s; }
.prose a:not(.btn):hover { border-bottom-color: var(--accent); }
.prose h2 a, .prose h3 a, .prose h4 a { color: inherit; border: 0; }
.prose h2 a:hover, .prose h3 a:hover { color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--faint); font-family: var(--text); font-size: 13px; }
.prose blockquote { margin: 26px 0; padding: 4px 24px; border-left: 2px solid var(--accent); color: #dbe0e5; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.85em; background: rgba(255,255,255,0.055); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: #ffb083; overflow-wrap: anywhere; word-break: break-word; }
.prose pre { background: #04050a; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 26px 0; }
.prose pre code { background: none; border: 0; padding: 0; color: #ccd4de; font-size: 13px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 46px 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.prose td, .prose th { min-width: 5.5em; }
.prose td a, .prose th a { white-space: nowrap; }
.prose thead th { text-align: left; font-family: var(--disp); font-weight: 800; color: #fff; padding: 11px 14px; border-bottom: 2px solid var(--line-2); }
.prose tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: top; }
.prose tbody tr:hover td { color: var(--ink); }

.prose .fig { margin: 36px 0; }
.prose .fig img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: #0c0d18; }
.prose figcaption { margin-top: 12px; font-size: 12.5px; color: var(--faint); padding-left: 16px; border-left: 2px solid var(--line); }
.prose .datamine-clip { margin: 36px 0; clear: both; }
.prose .datamine-clip video { display: block; width: 100%; height: auto; min-width: 0; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #0c0d18; }
.prose details { margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; padding: 2px 18px; }
.prose summary { cursor: pointer; font-weight: 600; padding: 13px 0; font-family: var(--disp); }
.prose summary:hover { color: var(--accent); }
audio.track { display: block; width: 100%; max-width: 440px; margin: 10px 0 4px; height: 36px; }

.footnotes { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.footnotes hr { display: none; }
/* the footnote plugin's own separator would double the .footnotes border-top */
.prose hr.footnotes-sep { display: none; }
.footnotes ol { padding-left: 20px; }
.footnotes li { margin: 6px 0; overflow-wrap: anywhere; }
.footnote-ref a { border: 0; font-size: 0.78em; padding: 0 2px; color: var(--accent); }
.footnote-backref { border: 0; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 80px; }
.pg { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, background .2s; }
.pg:hover { border-color: var(--line-2); background: var(--panel); }
.pg span { font-family: var(--text); font-size: 11.5px; color: var(--faint); }
.pg b { font-family: var(--disp); font-weight: 800; font-size: 16px; line-height: 1.2; }
.pg-next { text-align: right; }

/* SECTION PAGES: key-art header, jump nav, floating figures */
.sec-hero { position: relative; min-height: clamp(520px, 62vh, 780px); display: flex; align-items: flex-end; }
/* key-art fades into the liquid background with a long vertical mask,
   same as the home hero */
.sec-hero-art { position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center 34%; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 98%); }
/* darken behind the title only + a soft top vignette; kept light so the
   key-art shows, faded out before the bottom edge */
.sec-hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(92% 90% at 20% 106%, rgba(6,8,11,0.64), transparent 58%),
  linear-gradient(180deg, rgba(6,8,11,0.28) 0%, transparent 44%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%); }
.sec-hero-inner { position: relative; z-index: 2; max-width: 64rem; width: 100%; margin: 0 auto; padding: 0 32px 34px; }
.sec-hero .kicker { margin-bottom: 12px; }
.sec-hero h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; max-width: 20ch; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }

.section-shell { max-width: 64rem; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 50px; align-items: start; }
.section-shell.no-aside { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.section-shell .prose { max-width: none; padding: 44px 0 120px; margin: 0; }
.jump-nav { position: sticky; top: calc(var(--chrome-h) + 28px); padding-top: 48px; max-height: calc(100vh - var(--chrome-h) - 56px); overflow-y: auto; overscroll-behavior: contain; }
.jump-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.jump-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.jump-list a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 12.5px; color: var(--dim); line-height: 1.35; transition: color .2s, border-color .2s; }
.jump-list a:hover { color: var(--ink); border-left-color: var(--accent); }
.jump-list a.active { color: var(--accent); border-left-color: var(--accent); }

/* floating figures: image on the side, text wraps beside it */
@media (min-width: 940px) {
  .prose .fig { float: right; width: 48%; margin: 6px 0 24px 34px; }
  .prose .fig.reveal-xl { float: left; margin: 6px 34px 24px 0; }
  .prose h2, .prose h3 { clear: both; }
}
.reveal-xl { transform: translateX(-38px); }
.reveal-xr { transform: translateX(38px); }
.reveal-xl.is-in, .reveal-xr.is-in { transform: none; }

/* custom inline marks (no emojis) */
.mk { display: inline-flex; width: 0.92em; height: 0.92em; vertical-align: -0.1em; margin: 0 0.08em; }
.mk svg { width: 100%; height: 100%; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-ok svg { stroke: #63c98a; }
.mk-warn svg { stroke: var(--accent); }
.mk-warn svg circle { fill: var(--accent); stroke: none; }
.mk-star svg { fill: var(--accent); stroke: none; }
.mk-no svg { stroke: #e2574c; }

/* GFM task-list checkboxes (rendered as inline SVG boxes by the build) */
.prose li.task { list-style: none; }
.task-box { display: inline-flex; width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 0.5em; }
.task-box svg { width: 100%; height: 100%; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
li.task-done .task-box svg { stroke: #63c98a; }

/* per-section search (scoped to the open section only) */
.sec-search { position: relative; margin: 0 0 34px; }
.sec-search-ico { position: absolute; left: 15px; top: 14px; width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
#sec-search-input { width: 100%; padding: 13px 16px 13px 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: var(--text); font-size: 14px; outline: none; transition: border-color .2s, background .2s; }
#sec-search-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.03); }
#sec-search-input::placeholder { color: var(--faint); }
.sec-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #0a0d13; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,0.45); max-height: 62vh; overflow: hidden auto; display: none; }
.sec-search-results.open { display: block; }
.ss-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 12px 16px; cursor: pointer; }
.ss-item:hover, .ss-item.sel { background: var(--panel); border-left-color: var(--accent); }
.ss-head { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.ss-snip { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.45; font-family: var(--text); }
.ss-snip mark, .sr-snip mark { background: rgba(255,106,43,0.24); color: #fff; border-radius: 2px; }
.ss-empty { padding: 16px; color: var(--faint); font-size: 13px; }

/* flash when the section-search jumps to a match */
.hit-flash { animation: hitflash 2.4s ease; border-radius: 5px; }
@keyframes hitflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,43,0); background: transparent; } 12%, 45% { box-shadow: 0 0 0 8px rgba(255,106,43,0.13); background: rgba(255,106,43,0.13); } }

/* support ("buy me an Ice Tea") */
.support { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 30px 34px; margin-top: 100px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.support-ico { flex: none; color: var(--accent); width: 42px; height: 42px; }
.support-ico svg { width: 100%; height: 100%; }
.support-text { flex: 1; min-width: 0; }
.support-text h3 { font-family: var(--disp); font-weight: 800; font-size: 21px; margin: 0 0 6px; }
.support-text p { font-size: 13.5px; color: var(--dim); line-height: 1.6; margin: 0; max-width: 54ch; }
.support-btn { flex: none; }
/* the "Are you Sure?" note in the Ice Tea card, shown on the first click */
.support-msg { flex-basis: 100%; width: 100%; margin: 4px 0 0; font-size: 17px; font-weight: 700; color: #ff5a5a; text-align: center; letter-spacing: 0.01em; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.support-msg.show { opacity: 1; visibility: visible; transform: none; }

/* screen shake for the support button's "Are you Sure?" step (the form
   cooldown fires it too); the second click opens Ko-fi normally */
@keyframes screenshake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, -4px); }
  20% { transform: translate(7px, 3px); }
  30% { transform: translate(-5px, 5px); }
  40% { transform: translate(6px, -6px); }
  50% { transform: translate(-7px, 2px); }
  60% { transform: translate(5px, 5px); }
  70% { transform: translate(-4px, -5px); }
  80% { transform: translate(6px, 3px); }
  90% { transform: translate(-3px, -2px); }
}
/* shake only the content wrapper, never body, so the fixed background canvas is
   not reparented (that caused the giant background stretch) */
#main.shake { animation: screenshake 0.6s cubic-bezier(.36,.07,.19,.97) both; will-change: transform; }

.maker { color: var(--accent); border-bottom: 1px solid rgba(255,106,43,0.32); transition: border-color .2s; }
.maker:hover { border-bottom-color: var(--accent); }
.foot-links { font-size: 12px; color: var(--faint); letter-spacing: 0.02em; margin-top: 10px; }
.foot-links a { color: var(--dim); }
.foot-links a:hover { color: var(--accent); }
/* machine-generated disclosure line in the footers */
.foot-ai { font-size: 12px; color: var(--faint); line-height: 1.6; margin-top: 10px; max-width: 74ch; }
.foot-ai a { color: var(--dim); border-bottom: 1px solid rgba(255,106,43,0.28); }
.foot-ai a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* reader contribution form */
.contribute { margin: 96px 0 0; padding: 40px 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); scroll-margin-top: 90px; }
.contribute-head { max-width: 48rem; }
.contribute-kick { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.contribute-head h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(23px, 3vw, 31px); line-height: 1.08; margin: 12px 0 12px; }
.contribute-head p { color: var(--dim); font-size: 14.5px; line-height: 1.7; margin: 0; }
.contribute-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cf-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.cf-field input, .cf-field select, .cf-field textarea { width: 100%; font-family: var(--text); font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line-2); border-radius: 9px; padding: 11px 13px; outline: none; transition: border-color .2s, background .2s; }
.cf-field textarea { resize: vertical; min-height: 112px; line-height: 1.55; }
.cf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { border-color: var(--accent); background: color-mix(in srgb, var(--bg) 38%, transparent); }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--faint); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.cf-status { font-size: 13px; font-weight: 600; }
.cf-status.cf-ok { color: #57d29a; }
.cf-status.cf-err, .cf-status.cf-warn { color: var(--accent); }
.cf-status.cf-sending { color: var(--dim); }
.cf-note { font-size: 12px; color: var(--faint); margin: 2px 0 0; }
@media (max-width: 720px) { .cf-row { grid-template-columns: 1fr; } .contribute { padding: 30px 22px; } }

/* essential-cookie notice: a small corner card that never blocks the page.
   Deliberately plain (white box, system font) so it reads as boring paperwork,
   not part of the show. Dismiss once, stays gone. */
.cookie-gate { position: fixed; right: 18px; bottom: 18px; z-index: 200; max-width: 380px; padding: 0; pointer-events: none; }
.cookie-gate[hidden] { display: none; }
.cookie-card { pointer-events: auto; padding: 18px 20px; background: #ffffff; color: #1b1b1b; border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,0.45); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.cookie-card h2 { font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0 0 8px; color: #1b1b1b; letter-spacing: 0; }
.cookie-card p { font-family: inherit; font-size: 12.5px; line-height: 1.55; color: #444; margin: 0 0 14px; }
.cookie-card a { color: #1a56db; text-decoration: underline; }
.cookie-btn { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; font-size: 13px; padding: 8px 18px; border-radius: 6px; border: 0; background: #1b1b1b; color: #fff; cursor: pointer; transition: background .2s; }
.cookie-btn:hover { background: #333; }
.cookie-gate a, .cookie-gate button { cursor: pointer; }
@media (max-width: 520px) { .cookie-gate { left: 14px; right: 14px; bottom: 14px; max-width: none; } }

/* click a content image to view it full-size */
.prose img { cursor: zoom-in; }
.prose a img { cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 190; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; background: rgba(3,5,8,0.93); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.65); }
.lightbox-cap { color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center; max-width: 74ch; }

.legal { padding-bottom: 100px; }
.legal .prose { padding-top: 40px; }

/* HOME */
/* hero: real RR key-art staged like the game's own loading screen */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--chrome-h) + 36px) 32px 84px; text-align: center; overflow-x: clip; }
/* machine-generated disclosure pinned to the top of the hero */
.hero-ai { position: absolute; top: calc(var(--chrome-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: flex-start; gap: 11px; width: max-content; max-width: min(93vw, 720px); padding: 9px 16px 9px 10px; text-align: left; background: rgba(6,8,11,0.55); border: 1px solid rgba(255,255,255,0.13); border-radius: 13px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0,0,0,0.42); }
.hero-ai-tag { flex: none; margin-top: 1px; font-family: var(--text); font-weight: 700; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #0a0b0e; background: var(--accent); padding: 4px 9px; border-radius: 999px; }
.hero-ai p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.hero-ai-link { color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(255,106,43,0.4); transition: border-color .2s; }
.hero-ai-link:hover { border-bottom-color: var(--accent); }
.hero-ai-motto { color: rgba(255,255,255,0.6); font-style: italic; }
@media (max-width: 640px) { .hero-ai { top: calc(var(--chrome-h) + 10px); gap: 9px; padding: 8px 13px 8px 9px; } .hero-ai p { font-size: 11.5px; } }
/* the clip wrapper carries the dissolve mask (straight fallback here, swapped
   for a generated noisy edge at runtime) and contains the ken-burns overdraw */
.hero-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 96%); }
.hero-art { position: absolute; inset: 0; background: url(media/hero-keyart.webp) center/cover no-repeat; opacity: 0; transition: opacity 1.6s ease; }
body.revealed .hero-art { opacity: 1; }
/* confetti canvas over the scene */
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* keep the middle readable but let the image live to its dissolve line; the
   scrim itself must dissolve too or it paints a straight seam at the boundary */
.hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(78% 60% at 50% 40%, rgba(6,8,11,0.24), rgba(6,8,11,0.44) 60%, transparent 82%),
  linear-gradient(180deg, rgba(6,8,11,0.55) 0%, transparent 30%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 76%); }
.hero-inner { position: relative; z-index: 3; max-width: 46rem; width: 100%; }
/* the wordmark with the LIVE DelMar loading wheel as the O of ROCKET */
.hero-logo-wrap { position: relative; width: clamp(240px, 32vw, 380px); margin: 0 auto 26px; filter: drop-shadow(0 6px 30px rgba(0,0,0,0.75)); }
.hero-logo { display: block; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
/* playful speech bubble that pops from the logo (de Blob squish, low-poly bob) */
.logo-bubble { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 6; pointer-events: none; }
.logo-bubble.show { animation: bubbleFloat 1.6s .55s steps(7) infinite; }
.lb-inner { display: inline-block; transform-origin: 50% 128%; transform: scale(0); opacity: 0; max-width: min(74vw, 250px); padding: 9px 15px; border-radius: 15px; background: #fbfbfb; color: #0d0f13; font-family: var(--text); font-weight: 700; font-size: 12.5px; line-height: 1.32; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.lb-inner::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fbfbfb; margin-top: -1px; }
.logo-bubble.show .lb-inner { animation: bubblePop .55s cubic-bezier(.34,1.7,.5,1) forwards; }
.logo-bubble.hide .lb-inner { animation: bubbleHide .34s ease-in forwards; }
@keyframes bubblePop {
  0% { transform: scale(0) rotate(-5deg); opacity: 0; }
  50% { transform: scale(1.16) rotate(3deg); opacity: 1; }
  68% { transform: scale(0.9) rotate(-2deg); }
  84% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes bubbleHide {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(0) rotate(4deg); opacity: 0; }
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.logo-full { display: none; }
/* the cut-out ellipse in the wordmark: center (94.5, 31.2), rx 32.2, ry 31.6 of 328x128 */
.hero-o { position: absolute; left: 19.0%; top: 0; width: 19.63%; height: 49.1%; }
#hero-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease .2s; }
body.revealed #hero-canvas { opacity: 1; }
/* no JS or no WebGPU: show the untouched original wordmark, its solid O is the fallback */
.no-js .hero-o, .hero-logo-wrap.no-webgpu .hero-o { display: none; }
.no-js .logo-cut, .hero-logo-wrap.no-webgpu .logo-cut { display: none; }
.no-js .logo-full, .hero-logo-wrap.no-webgpu .logo-full { display: block; }
.hero-tag { font-size: clamp(15px, 2.1vw, 19px); color: #fff; max-width: 38rem; margin: 0 auto 38px; text-shadow: 0 2px 22px rgba(0,0,0,0.65); }
.wide { max-width: 72rem; margin: 0 auto; padding: 0 32px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* the big hero search field */
.hero-search { position: relative; width: min(90vw, 440px); margin: 32px auto 0; }
.hs-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; height: 52px; padding: 0 12px 0 15px; border-radius: 13px; background: rgba(10,12,16,0.62); border: 1px solid rgba(255,190,110,0.28); box-shadow: 0 10px 34px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: text; transition: border-color .25s, box-shadow .25s; }
.hs-field:hover, .hs-field:focus-within { border-color: rgba(255,190,110,0.62); box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 28px rgba(255,150,50,0.2); }
.hs-ico { flex: none; width: 19px; height: 19px; color: rgba(255,205,140,0.85); }
.hs-field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-family: var(--text); font-size: 15px; color: var(--ink); }
.hs-field input::placeholder { color: rgba(255,255,255,0.44); }
.hs-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hs-kbd { flex: none; font-family: var(--text); font-size: 11px; color: var(--dim); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; }
/* pulse the contribution form when a reader jumps to it from a "contribute" link */
@keyframes cfPulse { 0% { border-color: var(--accent); box-shadow: 0 0 0 0 rgba(255,106,43,0.45); } 100% { border-color: var(--line); box-shadow: 0 0 0 22px rgba(255,106,43,0); } }
.contribute.cf-highlight { animation: cfPulse 1.7s ease; }
/* structured "island" buttons with a nested icon + a small hover zoom */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 13px 11px 24px; border-radius: 999px; font-family: var(--text); font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); color: var(--ink); transition: transform .25s var(--ease-out), border-color .2s, background .2s; }
.btn:hover { transform: scale(1.035); border-color: var(--dim); }
.btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 13px; transition: transform .25s var(--ease-out), background .2s; }
.btn:hover .btn-ico { transform: translateX(2px); background: rgba(255,255,255,0.15); }
.btn-primary { background: var(--accent); color: #0a0b0e; border-color: var(--accent); font-weight: 700; }
.btn-primary .btn-ico { background: rgba(0,0,0,0.18); }
.btn-primary:hover { background: #ff7d45; border-color: #ff7d45; }
.btn-primary:hover .btn-ico { background: rgba(0,0,0,0.24); }

/* image + text feature bands */
.features { padding-top: 104px; }
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; margin-bottom: 104px; }
.feature-rev .feature-media { order: 2; }
.feature-media { display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: #0c0d15; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.feature-media:hover img { transform: scale(1.045); }
.feature-kick { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.feature-title { font-family: var(--disp); font-weight: 900; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; letter-spacing: -0.01em; margin: 14px 0 16px; }
.feature-text p { color: var(--dim); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.feature-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; transition: gap .2s, color .2s; }
.feature-link:hover { color: var(--accent); gap: 12px; }
.fl-go { color: var(--accent); }

.provenance { font-size: 13.5px; color: var(--dim); padding: 22px 26px; margin: 72px 0 56px; border: 1px solid var(--line); border-radius: 10px; }
.provenance blockquote { margin: 0 0 12px; border-left-width: 2px; }
.provenance blockquote:last-of-type { margin-bottom: 0; }
.prologue { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; max-width: none; }
.prologue h2 { border-top: 0; padding-top: 0; font-family: var(--disp); font-weight: 900; font-size: clamp(27px, 4vw, 40px); margin: 0 0 24px; }

.index-title { display: flex; align-items: baseline; justify-content: space-between; margin: 112px 0 20px; }
.index-title h2 { font-family: var(--disp); font-weight: 800; font-size: 24px; margin: 0; }
.index-title span { font-size: 12px; color: var(--faint); }

/* bento mosaic: track key-art tiles + typographic tiles */
.sec-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); grid-auto-rows: 184px; grid-auto-flow: dense; gap: 14px; }
.sc { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; transition: transform .3s var(--ease-out), border-color .2s; }
.sc:hover { transform: translateY(-4px); border-color: var(--line-2); }
.sc-num { font-family: var(--text); font-weight: 600; font-size: 12px; color: var(--accent); letter-spacing: 0.05em; position: relative; z-index: 2; }
.sc-title { font-family: var(--disp); font-weight: 800; font-size: 18px; line-height: 1.14; margin-top: 8px; position: relative; z-index: 2; }
.sc-teaser { font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 9px; position: relative; z-index: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-go { position: absolute; top: 16px; right: 18px; color: #fff; font-size: 14px; opacity: 0; transform: translate(-3px, 3px); transition: opacity .25s, transform .25s var(--ease-out); z-index: 3; }
.sc:hover .sc-go { opacity: 0.9; transform: none; }
/* image tiles */
.sc-img { grid-column: span 2; border-color: transparent; }
.sc-img::before { content: ""; position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center; transition: transform .8s var(--ease-out); z-index: 0; }
.sc-img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,11,0.05) 18%, rgba(6,8,11,0.5) 52%, rgba(6,8,11,0.93)); }
.sc-img:hover::before { transform: scale(1.06); }
.sc-img .sc-num { color: #fff; opacity: 0.85; }
.sc-img .sc-title { font-size: clamp(19px, 2vw, 22px); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.sc-big { grid-row: span 2; }
.sc-big .sc-title { font-size: clamp(23px, 2.4vw, 32px); }
/* typographic tiles get a ghost number */
.sc-txt::before { content: attr(data-n); position: absolute; right: 12px; bottom: -20px; font-family: var(--disp); font-weight: 900; font-size: 96px; line-height: 1; color: rgba(255,255,255,0.035); z-index: 0; letter-spacing: -0.04em; transition: color .3s; }
.sc-txt:hover::before { color: rgba(255,106,43,0.09); }

/* companion cards */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.comp-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: transform .3s var(--ease-out), border-color .2s; }
.comp-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.comp-kick { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.comp-title { font-family: var(--disp); font-weight: 800; font-size: 21px; }
.comp-teaser { font-size: 13px; color: var(--dim); line-height: 1.6; flex: 1; }
.comp-go { font-family: var(--text); font-weight: 600; font-size: 13px; color: var(--ink); transition: color .2s; }
.comp-card:hover .comp-go { color: var(--accent); }

.site-foot { margin: 112px 0 48px; padding-top: 34px; border-top: 1px solid var(--line); }
/* slim footer on inner pages (sections, companions, terms) */
.slim-foot { max-width: 64rem; margin: 0 auto; padding: 30px 32px 48px; }
.slim-foot p { font-size: 12px; color: var(--faint); line-height: 1.7; margin: 0 0 6px; }
.slim-foot .foot-links { margin-top: 0; }

/* back to top */
#backtop { position: fixed; right: 22px; bottom: 22px; z-index: 85; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); color: var(--dim); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease-out), color .2s, border-color .2s; }
#backtop.show { opacity: 1; pointer-events: auto; transform: none; }
#backtop:hover { color: var(--accent); border-color: var(--dim); }
#backtop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-mark { font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--dim); margin-bottom: 16px; }
.site-foot p { font-size: 12px; color: var(--faint); line-height: 1.7; max-width: 54rem; margin: 0 0 8px; }
.foot-meta { letter-spacing: 0.04em; }

/* SEARCH */
#search-modal { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity .2s; }
#search-modal.open { opacity: 1; pointer-events: auto; }
.search-panel { width: min(640px, 92vw); background: #0a0d13; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.35); transform: translateY(-8px); transition: transform .2s var(--ease-out); }
#search-modal.open .search-panel { transform: translateY(0); }
#search-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-family: var(--text); font-size: 15.5px; padding: 18px 22px; outline: none; }
#search-input::placeholder { color: var(--faint); }
.search-results { max-height: 54vh; overflow-y: auto; }
.search-results:empty { display: none; }
.sr-item { display: flex; flex-direction: column; gap: 3px; padding: 13px 22px; border-left: 2px solid transparent; }
.sr-item:hover, .sr-item.sel { background: var(--panel); border-left-color: var(--accent); }
.sr-kick { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.sr-title { font-family: var(--disp); font-weight: 800; font-size: 15px; }
.sr-snip { font-size: 12.5px; color: var(--faint); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-snip mark { background: rgba(255,106,43,0.24); color: #fff; border-radius: 2px; }
.sr-empty { padding: 26px; color: var(--faint); text-align: center; }
.search-hint { display: flex; gap: 8px; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }

/* 404 */
.notfound { padding: 24vh 32px 30vh; text-align: center; }
.nf-code { font-family: var(--disp); font-weight: 900; font-size: clamp(64px, 12vw, 116px); color: var(--accent); line-height: 1; }
.notfound h1 { font-family: var(--disp); font-weight: 800; font-size: 28px; margin: 12px 0 16px; }
.notfound p { color: var(--dim); max-width: 34rem; margin: 0 auto 28px; }
.nf-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 30px; max-width: 56rem; margin: 48px auto 0; text-align: left; }
.nf-index a { display: flex; gap: 12px; padding: 9px 4px; font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--line); transition: color .2s; }
.nf-index a:hover { color: var(--accent); }
.nf-index a span { color: var(--faint); font-variant-numeric: tabular-nums; }

/* MOTION: quiet scroll reveals only */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* RESPONSIVE */
/* device band fixes, placed after base rules so they win on source order */
/* iPad portrait/landscape (721-1000px): the sticky 208px jump-nav squeezes the
   prose to a cramped column, so drop the aside and read single-column, centred.
   (Below 720px the mobile block that follows takes over.) */
@media (max-width: 1000px) {
  .section-shell { grid-template-columns: minmax(0, 46rem); justify-content: center; }
  .jump-nav { display: none; }
}
/* collapse the home feature bands to one column before they get cramped on tablet */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 24px; margin-bottom: 72px; }
  .feature-rev .feature-media { order: 0; }
  .features { padding-top: 72px; }
}
/* footer links: give each a tappable box on touch without changing the look */
@media (pointer: coarse) {
  .foot-links a { display: inline-block; padding: 6px 2px; }
}
/* inputs must be >=16px on touch or iOS Safari zooms the whole page on focus */
@media (max-width: 1024px) {
  #search-input, #sec-search-input, #index-filter, .hs-field input,
  .cf-field input, .cf-field select, .cf-field textarea { font-size: 16px; }
}
/* let the visual grid breathe on very large screens; reading column stays put */
@media (min-width: 2200px) {
  .wide, .features { max-width: 84rem; }
}

@media (max-width: 720px) {
  .chrome { padding: 0 18px; }
  .chrome-here { display: none; }
  .wrap, .prose { padding-left: 20px; padding-right: 20px; }
  .prose { padding-top: 56px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .pager { grid-template-columns: 1fr; }
  .section-shell { grid-template-columns: minmax(0, 1fr); padding: 0 20px; gap: 0; }
  .section-shell .prose { padding-top: 34px; }
  .jump-nav { display: none; }
  .sec-hero { min-height: 232px; }
  .sec-hero-inner { padding: 0 20px 26px; }
  .wide { padding-left: 20px; padding-right: 20px; }
  .features { padding-top: 64px; }
  .feature { grid-template-columns: 1fr; gap: 22px; margin-bottom: 64px; }
  .feature-rev .feature-media { order: 0; }
  .sec-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .sc-img { grid-column: span 2; }
  .sc-big { grid-row: span 1; }
  .index-title { margin-top: 80px; }
  .support { flex-direction: column; align-items: flex-start; padding: 24px 22px; margin-top: 60px; }
  /* trim the airy desktop spacing so phones do not scroll through empty gaps */
  .contribute { margin-top: 60px; }
  .provenance { margin: 44px 0 40px; }
  .site-foot { margin-top: 68px; }
  .index-title { margin-top: 64px; }
  .prose h2 { margin-top: 42px; padding-top: 22px; }
  .prose h3 { margin-top: 32px; }
  .prose hr { margin: 34px 0; }
}
@media (max-width: 440px) {
  .sec-mosaic { grid-template-columns: 1fr; }
  /* one-column grid: stop image tiles from spanning 2 and spawning a crushed column */
  .sc-img { grid-column: auto; }
}
@media (max-width: 480px) {
  .brand-name em { display: none; }
  .chrome-btn span { display: none; }
  /* the index button collapses to just the hamburger glyph: give it a real tap area */
  #index-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
}

/* device support: phones, tablets, laptops */
@media (max-width: 720px) {
  .hero-search { width: 100%; margin-top: 26px; }
  .hs-field { height: 50px; }
  .hero-ai { max-width: 94vw; }
}
@media (max-width: 480px) {
  /* the header search stays a readable affordance on touch (drop the kbd hint) */
  #search-btn { padding: 6px 11px; }
  #search-btn span { display: inline; }
  #search-btn kbd { display: none; }
  .hero-ai { gap: 8px; padding: 8px 12px 8px 8px; }
  .hero-ai p { font-size: 11px; line-height: 1.45; }
  .hero-ai-tag { font-size: 9px; padding: 3px 7px; letter-spacing: 0.1em; }
  .hs-field input { font-size: 16px; }   /* >=16px stops iOS zoom-on-focus */
}
/* short viewports (landscape phones): let the disclosure flow instead of
   overlapping the centered hero content */
/* short viewports (incl. common laptops maximized at ~660-732px tall): keep the
   disclosure in flow so it never overlaps the centred wordmark, and shrink the
   tall section hero so its title stays on-screen */
@media (max-height: 760px) {
  .hero-ai { position: static; transform: none; margin: 0 auto 14px; max-width: 100%; }
  .sec-hero { min-height: 60vh; }
}
/* very short (landscape phones): top-align the hero so everything fits */
@media (max-height: 620px) {
  .hero { padding-top: calc(var(--chrome-h) + 14px); justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  #hero-canvas { opacity: 1; }
  /* animations are off, so show the shown bubble statically */
  .logo-bubble.show .lb-inner { transform: none; opacity: 1; }
}


/* the 14.1 music pack vinyl: floats free like a pickup item, 3d idle tilt.
   perspective makes the receding edge shrink so the tilts read as depth.
   the three motions (rotateY, rotateX, bob) run on separate layers with
   different periods, so they drift in and out of phase and never all rest
   at once: continuous life instead of tick-pause-tick */
.prose .fig-3d { perspective: 640px; max-width: 232px; margin: 30px auto; }
.prose .fig-3d .i3a, .prose .fig-3d .i3b { display: block; transform-style: preserve-3d; will-change: transform; }
.prose .fig-3d .i3a { animation: idle-ry 7.3s ease-in-out -3.1s infinite alternate; }
.prose .fig-3d .i3b { animation: idle-rx 9.1s ease-in-out -1.4s infinite alternate; }
.prose .fig-3d img { border: 0; background: none; border-radius: 0; filter: drop-shadow(0 20px 24px rgba(0,0,0,0.55)); animation: idle-bob 5.2s ease-in-out -2.2s infinite alternate; will-change: transform; }
.prose .fig-3d figcaption { text-align: center; }
@media (min-width: 940px) {
  .prose .fig.fig-3d { width: 256px; max-width: 256px; }
}
@keyframes idle-ry { from { transform: rotateY(-7deg); } to { transform: rotateY(7deg); } }
@keyframes idle-rx { from { transform: rotateX(-5deg); } to { transform: rotateX(5.5deg); } }
@keyframes idle-bob { from { transform: translateY(-2px); } to { transform: translateY(-11px); } }