/* ============================================================================
   Achtbaan — "After-Dark Thrill Index"
   A cinematic, high-velocity design system: a deep warm near-black canvas lit
   by a molten coral→magenta accent and amber park-lights, an ultra-condensed
   marquee display face (Anton) over a clean grotesque (Hanken Grotesk),
   scoreboard-style thrill numerals, grain + glow for depth, and staggered
   load motion. One shared stylesheet drives every page.
   ========================================================================== */
:root {
  /* canvas — warm plum-black, layered surfaces */
  --color-bg: #140a10;
  --bg-deep: #0d060a;
  --color-surface: #201220;
  --color-surface-2: #2a1830;
  --color-line: #3a2233;
  --color-line-2: #4d2f42;
  --color-text: #f9eee9;
  --color-muted: #c0a3af;

  /* accents — molten thrill + amber lights */
  --flame-1: #ff7a3c;
  --flame-2: #ff2e6a;
  --amber: #ffc93f;
  --grad-flame: linear-gradient(105deg, var(--flame-1), var(--flame-2));
  --grad-flame-soft: linear-gradient(105deg, #ff7a3c22, #ff2e6a22);
  --color-accent: #ff477e;
  --color-accent-ink: #ff85a6;

  --text-sm: 0.9rem;
  --text-base: 1.05rem;
  --text-lg: 1.3rem;
  --text-xl: 2.1rem;
  --text-display: clamp(3rem, 8vw, 6.25rem);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 24px 60px -24px rgba(255, 46, 106, 0.45);
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;
  --font-brand: var(--font-display);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-wrap: break-word;
  position: relative;
}
/* atmosphere — fixed accent glows + a fine grain overlay for cinematic depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 45% at 12% -5%, rgba(255, 122, 60, 0.18), transparent 70%),
    radial-gradient(55% 45% at 100% 0%, rgba(255, 46, 106, 0.16), transparent 65%),
    radial-gradient(80% 60% at 50% 120%, rgba(120, 40, 90, 0.22), transparent 70%),
    var(--bg-deep);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--color-accent); text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-ink); }
h1, h2, h3 { font-family: var(--font-display); line-height: 0.98; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; }
img { max-width: 100%; }
::selection { background: var(--flame-2); color: #fff; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--flame-2); color: #fff; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { left: var(--space-md); top: var(--space-md); }

.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-lg); }

/* prose (legal / docs / about / contact) ----------------------------------- */
.prose { max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.prose h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin: 0 0 var(--space-md); }
.prose h2 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); color: var(--color-text); }
.prose h2::before { content: ""; display: inline-block; width: 0.7em; height: 0.18em; margin-right: 0.5em; vertical-align: 0.16em; border-radius: 2px; background: var(--grad-flame); }
.prose p, .prose li { color: #e7d7d3; }
.prose a { font-weight: 600; }
.prose .muted { color: var(--color-muted); font-size: var(--text-sm); }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--flame-2); }
.prose strong { color: #fff; }
.prose details { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; background: rgba(255, 255, 255, 0.02); }
.prose summary { cursor: pointer; font-weight: 700; color: var(--color-text); }
.prose summary:hover { color: var(--color-accent-ink); }
.prose code { font-family: var(--font-mono); background: rgba(255, 122, 60, 0.12); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; font-size: 0.9em; }

/* Guides / blog ------------------------------------------------------------ */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; margin: 0 0 var(--space-md); color: var(--color-muted); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; }
.tldr { border: 1px solid var(--color-line); border-left: 4px solid transparent; border-image: var(--grad-flame) 1; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
.tldr p { margin: 0; }
.prose figure { margin: var(--space-lg) 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-line); display: block; }
.prose figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: 0.78rem; }
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); list-style: none; padding: 0; margin: var(--space-lg) 0 0; }
.post-card { border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, var(--color-surface), var(--bg-deep)); display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.post-card:hover { transform: translateY(-4px); border-color: var(--color-line-2); box-shadow: var(--shadow), var(--shadow-glow); }
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card .post-body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.post-card h2 { margin: 0; font-size: 1.5rem; }
.post-card h2 a { color: #fff; text-decoration: none; }
.post-card h2 a:hover { color: var(--color-accent-ink); }
.post-card .post-excerpt { color: #d8c6c3; font-size: var(--text-sm); margin: 0; }
.post-card .post-meta { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; margin: 0; }
.share { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: var(--space-xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.share span { color: var(--color-muted); font-size: var(--text-sm); }
.share a, .share button { font-size: var(--text-sm); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: rgba(255, 255, 255, 0.05); color: var(--color-text); text-decoration: none; cursor: pointer; font: inherit; }
.share a:hover, .share button:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.10); }

/* header / nav ------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-deep) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--color-line); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-flame); opacity: 0.9; }
.topbar .container { display: flex; align-items: center; gap: var(--space-md); padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; color: var(--color-text); }
.nav { margin-left: auto; display: flex; gap: var(--space-lg); align-items: center; }
.nav a { text-decoration: none; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; position: relative; padding: 4px 0; transition: color 0.2s; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--grad-flame); transition: width 0.25s ease; }
.nav a:hover { color: var(--color-text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--color-text); }

/* hero --------------------------------------------------------------------- */
.hero { padding: clamp(var(--space-lg), 8vw, calc(var(--space-xl) * 1.6)) 0 var(--space-lg); position: relative; }
.hero h1 { font-size: var(--text-display); margin: 0 0 var(--space-md); max-width: 15ch; }
.hero h1 .flame, .hero h1 em { font-style: normal; background: var(--grad-flame); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--color-muted); max-width: 56ch; margin: 0 0 var(--space-lg); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-pill); background: var(--grad-flame); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; border: 0; cursor: pointer; font-size: 1.02rem; box-shadow: var(--shadow-glow); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 28px 70px -22px rgba(255, 46, 106, 0.6); color: #fff; }
.btn:active { transform: translateY(0); }
.btn.secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-line-2); box-shadow: none; }
.btn.secondary:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.08); }

/* explorer toolbar --------------------------------------------------------- */
.toolbar { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-md); padding: var(--space-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.field { display: grid; gap: 5px; }
.field label { font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.field input, .field select, .field textarea { padding: 11px 13px; border: 1px solid var(--color-line-2); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.35); color: var(--color-text); font: inherit; font-size: var(--text-sm); width: 100%; transition: border-color 0.18s, box-shadow 0.18s; }
.field input::placeholder, .field textarea::placeholder { color: #8f7681; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--flame-2); box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.22); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff5470; box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.20); }
.field-error { color: #ff7a90; font-size: 0.8rem; font-weight: 600; margin: 2px 0 0; }
.field-error:empty { display: none; }
select option { background: var(--color-surface); color: var(--color-text); }

.results-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-md); flex-wrap: wrap; }
.results-meta h2 { font-size: var(--text-xl) !important; }
.results-meta .count { color: var(--color-muted); font-size: var(--text-sm); font-family: var(--font-mono); }

/* grid + cards ------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-md); }
.card { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-surface), var(--bg-deep)); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-flame); opacity: 0; transition: opacity 0.2s; }
.card:hover { transform: translateY(-4px); border-color: var(--color-line-2); box-shadow: var(--shadow), var(--shadow-glow); }
.card:hover::before { opacity: 1; }
.card .rank { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--amber); letter-spacing: 0.04em; }
.card h3 { margin: 0; font-size: 1.5rem; color: #fff; letter-spacing: 0.015em; }
.card .where { color: var(--color-muted); font-size: var(--text-sm); margin: 0; }
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.72rem; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; border: 1px solid var(--color-line); }
.tag.type { background: var(--grad-flame); color: #fff; border: 0; }
.thrill { display: flex; align-items: center; gap: var(--space-sm); }
.thrill .bar { flex: 1; display: flex; height: 8px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.4); overflow: hidden; border: 1px solid var(--color-line); }
.thrill .bar .seg { height: 100%; flex: 0 0 auto; min-width: 0; }
.thrill .val { font-family: var(--font-display); font-size: 1.5rem; color: #fff; min-width: 2.6ch; text-align: right; line-height: 1; }

/* Thrill-score breakdown: the four weighted contributions behind the score, so
   the number is legible at a glance (the product's transparency promise). */
.thrill-breakdown { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; font-size: 0.72rem; color: var(--color-muted); font-family: var(--font-mono); }
.thrill-breakdown .tb-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.thrill-breakdown .tb-item i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px var(--space-md); margin: 0; font-size: var(--text-sm); }
.stats div { display: flex; justify-content: space-between; gap: var(--space-sm); border-bottom: 1px dotted var(--color-line); padding-bottom: 3px; }
.stats dt { color: var(--color-muted); }
.stats dd { margin: 0; font-family: var(--font-mono); color: var(--color-text); }
.card .blurb { font-size: var(--text-sm); color: #d8c6c3; margin: 0; }
.card .compare-toggle { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); margin-top: auto; padding-top: var(--space-sm); }
.card .compare-toggle input { accent-color: var(--flame-2); width: 16px; height: 16px; }

.empty { padding: var(--space-xl); text-align: center; color: var(--color-muted); border: 1px dashed var(--color-line-2); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.empty p { margin: 0; }

/* Active-filter chips — visible, one-click-removable filters above the rankings. */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.active-filters-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-weight: 700; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 5px 8px 5px 13px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: rgba(255, 255, 255, 0.05); color: var(--color-text); transition: border-color 0.16s, background 0.16s; }
.filter-chip:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.10); }
.filter-chip:focus-visible { outline: none; border-color: var(--flame-2); box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.28); }
.filter-chip .chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.95rem; line-height: 1; color: var(--color-muted); }
.filter-chip:hover .chip-x { color: #fff; background: var(--flame-2); }
.filter-clear-all { font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; background: none; border: 0; color: var(--color-accent-ink); text-decoration: underline; padding: 5px 6px; border-radius: var(--radius-sm); }
.filter-clear-all:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 2px; }

/* compare ------------------------------------------------------------------ */
.compare-bar { position: sticky; bottom: var(--space-md); z-index: 950; background: color-mix(in srgb, var(--color-surface-2) 92%, transparent); backdrop-filter: blur(12px); color: var(--color-text); border: 1px solid var(--color-line-2); border-radius: var(--radius-pill); padding: 10px var(--space-md); display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); box-shadow: var(--shadow-glow); flex-wrap: wrap; }
.compare-bar .names { flex: 1; font-size: var(--text-sm); color: var(--color-muted); }
.compare-bar .btn { padding: 9px 18px; font-size: 0.9rem; }
.compare-bar .link { background: none; border: 0; color: var(--color-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--text-sm); }
.compare-bar .link:hover { color: var(--color-text); }
.compare-wrap { overflow-x: auto; margin: var(--space-lg) 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
table.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); }
table.compare th, table.compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-line); }
table.compare thead th { background: var(--color-surface-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; font-weight: 400; }
table.compare td.best { color: var(--amber); font-weight: 700; }
table.compare th[scope="row"] { color: var(--color-muted); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); font-size: 0.8rem; }

/* sections + features ------------------------------------------------------ */
.section { padding: var(--space-xl) 0; }
.section > h2, .section h2:first-child { font-size: var(--text-xl); margin: 0 0 var(--space-lg); }

/* Homepage FAQ disclosures (GEO answer-engine Q&A). Mirrors the .prose details
   styling so the native <details> read on-brand outside the prose/docs contexts. */
.faq details { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; background: rgba(255, 255, 255, 0.02); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--color-text); }
.faq summary:hover { color: var(--color-accent-ink); }
.faq details p { margin: var(--space-sm) 0 0; color: var(--color-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); }
.feature { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent); transition: transform 0.2s, border-color 0.2s; }
.feature:hover { transform: translateY(-3px); border-color: var(--color-line-2); }
.feature h3 { margin: 0 0 var(--space-sm); font-size: 1.3rem; color: #fff; }
.feature p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* footer ------------------------------------------------------------------- */
.site-footer { margin-top: var(--space-xl); border-top: 1px solid var(--color-line); background: linear-gradient(180deg, transparent, rgba(255, 46, 106, 0.04)); }
.site-footer .container { padding-top: var(--space-lg); padding-bottom: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; align-items: flex-start; color: var(--color-muted); font-size: var(--text-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer a { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); }
.site-footer .legal { max-width: 48ch; line-height: 1.6; }
.footer-brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-md); }
.footer-brand img { width: 30px; height: 30px; display: block; }

/* imagery + attribution ---------------------------------------------------- */
.hero-media { margin: var(--space-lg) 0 0; }
.hero-media img { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--radius-lg); display: block; border: 1px solid var(--color-line); }
.credit { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 6px; }
.credit a { color: var(--color-muted); }
.cardfig { margin: 0 0 var(--space-sm); border-radius: var(--radius-md); overflow: hidden; }
.cardfig img { width: 100%; height: 170px; object-fit: cover; display: block; }
.galleryintro { max-width: 62ch; margin: 0 0 var(--space-md); }
.parklogo { display: flex; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-lg); flex-wrap: wrap; }
.parklogo img { height: 44px; width: auto; filter: brightness(0) invert(1) opacity(0.8); }
.parklogo span { font-size: var(--text-sm); color: var(--color-muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-md); }
.galleryitem { margin: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); transition: transform 0.2s, border-color 0.2s; }
.galleryitem:hover { transform: translateY(-3px); border-color: var(--color-line-2); }
.galleryitem img { width: 100%; height: 190px; object-fit: cover; display: block; }
.galleryitem figcaption { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.galleryitem figcaption strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; display: block; font-size: 1.05rem; }
.credits-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); margin: var(--space-lg) 0; }
table.credits { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); }
table.credits th, table.credits td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
table.credits thead th { background: var(--color-surface-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; font-weight: 400; }
.credit-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); display: block; }

/* brand logo (inline SVG: full lockup + icon mark) ------------------------- */
.brand { gap: 0; }
.brand .logo { display: block; }
.brand .logo-full { display: none; height: 30px; width: auto; }
.brand .logo-mark { display: block; height: 34px; width: 34px; }
/* Show the full wordmark only once the viewport is wide enough for it AND the
   inline nav to fit on one row. Below ~800px the compact mark keeps the header
   from overflowing (the 7-item homepage nav + full logo overflowed by up to 48px
   in the old 720–767px band). */
@media (min-width: 800px) {
  .brand .logo-full { display: block; }
  .brand .logo-mark { display: none; }
}
.logo .track { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo .rail { stroke: var(--color-line-2); fill: none; stroke-linecap: round; }
.logo .cart { fill: var(--amber); }
.logo .wordmark { fill: currentColor; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.5px; }

/* documentation page ------------------------------------------------------- */
.docs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-xl); align-items: start; padding-top: var(--space-lg); }
.docs-nav { position: sticky; top: 84px; align-self: start; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-md); background: rgba(255, 255, 255, 0.02); }
.docs-nav-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin: 0 0 var(--space-sm); font-family: var(--font-display); font-weight: 400; }
.docs-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.docs-nav a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; transition: background 0.15s, color 0.15s; }
.docs-nav a:hover { background: rgba(255, 46, 106, 0.12); color: var(--color-text); }
/* .prose sets `margin: 0 auto` to self-center in a plain container — but as a
   CSS Grid item (.docs-layout), an auto inline margin disables grid's default
   "stretch" sizing and makes the item shrink/grow to its own content width
   instead of the track's, which let a wide element inside it push past the
   track (and the viewport) rather than being clamped by it. Override back to
   a plain 0 margin so this item stretches to fill its grid column. */
.docs-content { max-width: 760px; margin: 0; }
.docs-content section { margin-top: var(--space-xl); scroll-margin-top: 90px; }
.docs-content section:first-of-type { margin-top: var(--space-lg); }
.codeblock { background: var(--bg-deep); color: #ffd7c9; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }
.docs-content details { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; background: rgba(255, 255, 255, 0.02); }
.docs-content summary { cursor: pointer; font-weight: 700; font-family: var(--font-body); }

/* motion — staggered entrance on load -------------------------------------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero h1, .hero .lead, .hero-actions, .hero-media, .toolbar { animation: riseIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .lead { animation-delay: 0.08s; }
.hero-actions { animation-delay: 0.16s; }
.hero-media { animation-delay: 0.24s; }
.toolbar { animation-delay: 0.1s; }

/* responsive --------------------------------------------------------------- */
@media (max-width: 760px) {
  .toolbar { grid-template-columns: 1fr 1fr; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; }
}
@media (max-width: 600px) {
  .topbar .container { flex-wrap: wrap; row-gap: var(--space-sm); }
  .nav { margin-left: 0; width: 100%; gap: var(--space-md); flex-wrap: wrap; }
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .prose { padding-left: var(--space-md); padding-right: var(--space-md); }
  .stats { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; transition: none !important; }
}

/* ============================================================================
   ⌘K Command palette (command-palette.js + palette-search.js)
   A dark, flame-accented overlay to search coasters, jump to pages, and run
   quick filter/sort deep-links. Scoped to `.palette*` / the floating pill so it
   never touches the rest of the site. Reuses the design tokens above.
   ========================================================================== */

/* overlay + dark blurred backdrop ------------------------------------------ */
.palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(var(--space-lg), 12vh, 140px) var(--space-md) var(--space-lg);
}
.palette[hidden] { display: none; }
.palette-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  backdrop-filter: blur(8px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.palette.is-open .palette-backdrop { opacity: 1; }
/* prevent background scroll while open */
.palette-lock, .palette-lock body { overflow: hidden; }

/* centred panel ------------------------------------------------------------ */
.palette-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--shadow-glow);
  overflow: hidden;
  opacity: 0;
}
/* flame top-accent, echoing .topbar / .card */
.palette-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-flame);
  opacity: 0.95;
}
.palette.is-open .palette-panel { opacity: 1; }

/* search row --------------------------------------------------------------- */
.palette-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.palette-search-icon { display: flex; color: var(--flame-2); flex: none; }
.palette-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.4;
  padding: 2px 0;
}
.palette-input::placeholder { color: #8f7681; }
.palette-esc-hint {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.3);
}

/* results listbox ---------------------------------------------------------- */
.palette-list {
  list-style: none;
  margin: 0;
  padding: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}
.palette-group {
  padding: var(--space-sm) var(--space-sm) 4px;
  margin-top: 2px;
}
.palette-group:first-child { margin-top: 0; }
.palette-group-label {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--color-muted);
}

.palette-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  border: 1px solid transparent;
  scroll-margin: 8px;
}
.palette-option-icon {
  display: flex;
  flex: none;
  color: var(--color-muted);
  transition: color 0.15s;
}
.palette-option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.palette-option-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.palette-option-meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-family: var(--font-mono);
}
.palette-option-go {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--flame-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
/* active (keyboard or hover) — flame accent */
.palette-option.is-active {
  background: rgba(255, 46, 106, 0.12);
  border-color: var(--color-line-2);
}
.palette-option.is-active .palette-option-icon { color: var(--flame-2); }
.palette-option.is-active .palette-option-go { opacity: 1; transform: translateX(0); }

/* fuzzy-match highlight — bold flame */
.palette-hl {
  background: transparent;
  color: var(--color-accent-ink);
  font-weight: 800;
}

/* empty state -------------------------------------------------------------- */
.palette-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-muted);
}
.palette-empty-icon { color: var(--flame-2); opacity: 0.8; }
.palette-empty-text { font-size: var(--text-sm); max-width: 34ch; }

/* footer legend ------------------------------------------------------------ */
.palette-foot {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: 10px var(--space-md);
  border-top: 1px solid var(--color-line);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.72rem;
  color: var(--color-muted);
}
.palette-foot kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  border: 1px solid var(--color-line-2);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text);
}

/* floating pill (first-time hint) ------------------------------------------ */
.palette-pill {
  position: fixed;
  right: clamp(var(--space-md), 4vw, var(--space-lg));
  bottom: clamp(var(--space-md), 4vw, var(--space-lg));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-flame);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s;
}
.palette-pill[hidden] { display: none; }
.palette-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 28px 70px -22px rgba(255, 46, 106, 0.6);
}
.palette-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.35), var(--shadow-glow);
}
.palette-pill-spark { font-size: 1rem; line-height: 1; }
.palette-pill-kbd { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0; }

/* motion — entrance/exit, gated behind reduced-motion --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .palette-panel {
    transform: scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .palette.is-open .palette-panel { transform: scale(1); }
  @keyframes palettePillIn {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .palette-pill { animation: palettePillIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}

/* SEO "records at a glance" */
.quickanswers { padding-top: var(--space-lg); }
.ataglance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-md) 0; padding: 0; }
.ataglance > div { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent); }
.ataglance dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); font-weight: 700; margin-bottom: 4px; }
.ataglance dd { margin: 0; color: var(--color-text); }

/* ============================================================================
   My Coaster Count — personal ride tracker (see track.js / app.js).
   Reuses the site tokens: warm surfaces, flame accent, mono scoreboard numerals.
   ========================================================================== */
.mycount { padding-top: var(--space-lg); }
.mycount-head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.mycount-head h2 { margin: 0; font-size: var(--text-xl); }
.mycount-head .muted { margin: 0; font-size: var(--text-sm); }
.mycount-panel { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); box-shadow: var(--shadow); padding: var(--space-lg); }
.count-empty p { margin: 0; color: var(--color-muted); font-size: var(--text-base); max-width: 68ch; }
.count-kbd { display: inline-block; font-family: var(--font-mono); font-size: 0.85em; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--grad-flame); color: #fff; white-space: nowrap; }
.count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin: 0; padding: 0; }
.count-tile { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); background: rgba(0, 0, 0, 0.25); }
.count-tile dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); font-weight: 700; margin-bottom: 6px; }
.count-tile dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.count-num { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: #fff; letter-spacing: 0.01em; }
.count-sub { font-size: 0.8rem; color: var(--color-muted); }
.count-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.count-note { margin: 0; font-size: 0.8rem; }

/* Per-card "Mark ridden" toggle + ridden state */
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); flex-wrap: wrap; }
.personal-toggles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card .card-actions .compare-toggle { margin-top: 0; padding-top: 0; }
.ride-toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: rgba(255, 255, 255, 0.05); color: var(--color-text); transition: border-color 0.18s, background 0.18s, transform 0.12s; }
.ride-toggle:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.10); }
.ride-toggle:active { transform: translateY(1px); }
.ride-toggle:focus-visible { outline: none; border-color: var(--flame-2); box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.28); }
.ride-toggle .ride-ico { font-weight: 700; line-height: 1; }
.ride-toggle[aria-pressed="true"] { background: var(--grad-flame); border-color: transparent; color: #fff; box-shadow: 0 0 18px -4px rgba(255, 46, 106, 0.55); }
.ridden-flag { display: none; margin-left: 8px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); }
.new-flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--grad-flame); color: #fff; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; }
.card.is-ridden { border-color: var(--color-line-2); }
.card.is-ridden::before { opacity: 1; }
.card.is-ridden .ridden-flag { display: inline; }

/* Per-card "Want to ride" wishlist toggle — mirrors the ride toggle, amber accent */
.wish-toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: rgba(255, 255, 255, 0.05); color: var(--color-text); transition: border-color 0.18s, background 0.18s, transform 0.12s; }
.wish-toggle:hover { border-color: var(--amber); background: rgba(255, 179, 71, 0.12); }
.wish-toggle:active { transform: translateY(1px); }
.wish-toggle:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.30); }
.wish-toggle .wish-ico { line-height: 1; color: var(--amber); }
.wish-toggle[aria-pressed="true"] { background: var(--amber); border-color: transparent; color: #241300; box-shadow: 0 0 18px -5px rgba(255, 179, 71, 0.6); }
.wish-toggle[aria-pressed="true"] .wish-ico { color: #241300; }

/* "Want to ride" bucket-list panel */
.wish-summary { margin: 0 0 var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.wish-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); }
.wish-thrill { flex: 0 0 auto; min-width: 2.4em; text-align: center; font-family: var(--font-display); font-size: 1.15rem; color: var(--amber); }
.wish-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wish-name { font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.wish-where { font-size: 0.8rem; color: var(--color-muted); }
.wish-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-sm); }
.wish-ride-btn { font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: rgba(255, 255, 255, 0.05); color: var(--color-text); transition: border-color 0.18s, background 0.18s; }
.wish-ride-btn:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.10); }
.wish-ride-btn:focus-visible { outline: none; border-color: var(--flame-2); box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.28); }
.wish-remove { font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: transparent; color: var(--color-muted); transition: color 0.18s, border-color 0.18s, background 0.18s; }
.wish-remove:hover { color: var(--color-text); border-color: var(--flame-2); background: rgba(255, 46, 106, 0.10); }
.wish-remove:focus-visible { outline: none; border-color: var(--flame-2); box-shadow: 0 0 0 3px rgba(255, 46, 106, 0.28); }
@media (max-width: 520px) { .wish-row { flex-wrap: wrap; } .wish-row-actions { width: 100%; justify-content: flex-end; } }

/* ============================================================================
   Thrill Score Explorer (thrill-score.html + thrill-score.js)
   An interactive breakdown of the 0-100 score: a picker, a segmented score bar
   reused from the cards, per-factor rows in the THRILL_PARTS colours, a
   constants-driven explainer and a real leaderboard. Reuses the site tokens —
   no new palette. Everything reflows for narrow screens (no horizontal scroll).
   ========================================================================== */
.ts-hero { padding-bottom: var(--space-md); }
.ts-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--amber); margin: 0 0 var(--space-sm); }
.ts-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); max-width: 18ch; }

.ts-explorer { padding-top: var(--space-lg); }
.ts-explorer > h2 { font-size: var(--text-xl); margin: 0 0 var(--space-md); }
.ts-picker { max-width: 460px; margin: 0 0 var(--space-lg); }
.ts-picker-help { margin: 0; font-size: 0.8rem; }

/* the breakdown card — echoes .card (flame top-accent, layered surface) */
.ts-card { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-surface), var(--bg-deep)); box-shadow: var(--shadow); padding: var(--space-lg); overflow: hidden; }
.ts-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-flame); }
.ts-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.ts-card-head h3 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.3rem); color: #fff; }
.ts-where { margin: 5px 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.ts-card-head .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-score { display: flex; align-items: baseline; gap: 6px; flex: none; }
.ts-score-num { font-family: var(--font-display); font-size: clamp(3.2rem, 11vw, 4.6rem); line-height: 0.85; color: #fff; }
.ts-score-of { font-family: var(--font-mono); color: var(--color-muted); font-size: var(--text-sm); }
.ts-card .thrill { margin: var(--space-lg) 0; }
.ts-card .thrill .bar { height: 16px; }

.ts-comps { display: grid; gap: var(--space-lg); }
.ts-comp { display: grid; gap: 7px; }
.ts-comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.ts-comp-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--color-text); }
.ts-comp-label i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.ts-comp-pts { font-family: var(--font-display); font-size: 1.35rem; color: #fff; white-space: nowrap; }
.ts-comp-max { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-muted); }
.ts-comp-bar { height: 11px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--color-line); overflow: hidden; }
.ts-comp-bar span { display: block; height: 100%; border-radius: var(--radius-pill); min-width: 2px; transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ts-comp-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.ts-comp-stat { font-family: var(--font-mono); color: var(--color-text); font-size: var(--text-sm); }
.ts-comp-ref { color: var(--color-muted); font-size: 0.74rem; font-family: var(--font-mono); }
.ts-note { margin: var(--space-lg) 0 0; font-size: var(--text-sm); }

/* explainer — formula + weights, rendered from thrill.js constants */
.ts-formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-lg); }
.ts-formula code { font-family: var(--font-mono); background: rgba(255, 122, 60, 0.12); padding: 10px 14px; border-radius: var(--radius-md); color: #ffd7c9; font-size: 0.9rem; line-height: 1.7; max-width: 100%; overflow-wrap: anywhere; }
.ts-formula-note { color: var(--color-muted); font-size: var(--text-sm); max-width: 46ch; }
.ts-sub { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-sm); color: var(--color-text); }
.ts-how .ataglance { margin-top: var(--space-sm); }
.ts-how .ataglance dt { display: flex; align-items: center; gap: 9px; text-transform: none; letter-spacing: 0; color: var(--color-text); font-size: var(--text-base); font-weight: 700; }
.ts-how .ataglance dt i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.ts-how .ataglance dd { color: var(--color-muted); font-size: 0.82rem; font-family: var(--font-mono); }

/* leaderboard */
.ts-board { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.ts-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); transition: border-color 0.18s, background 0.18s; }
.ts-row:hover { border-color: var(--color-line-2); background: rgba(255, 46, 106, 0.06); }
.ts-rank { flex: none; min-width: 2.2ch; text-align: right; font-family: var(--font-mono); color: var(--amber); font-size: 0.95rem; }
.ts-row-btn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; color: var(--color-text); }
.ts-row-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.15rem; color: #fff; overflow-wrap: anywhere; }
.ts-row-btn:hover .ts-row-name { color: var(--color-accent-ink); }
.ts-row-btn:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 3px; border-radius: var(--radius-sm); }
.ts-row-where { font-size: 0.78rem; color: var(--color-muted); }
.ts-row-score { flex: none; font-family: var(--font-display); font-size: 1.7rem; color: var(--amber); min-width: 2.4ch; text-align: right; }
.ts-board-foot { margin: var(--space-lg) 0 0; }

@media (max-width: 520px) {
  .ts-card { padding: var(--space-md); }
  .ts-card-head { flex-direction: column; }
  .ts-score { align-self: flex-start; }
}

/* ============================================================================
   Per-coaster detail pages (/coaster/<slug>.html — generated in build.mjs)
   A focused ride page: photo + stat sheet + the transparent thrill breakdown +
   a "similar coasters" rail. Reuses the card / stats / thrill / tag primitives
   above; only the hero layout and score display are new. No new palette.
   ========================================================================== */
.coaster-detail { padding: var(--space-lg) 0 var(--space-xl); }
.breadcrumb { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-muted); margin: 0 0 var(--space-lg); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb span[aria-hidden] { color: var(--color-line-2); }

.coaster-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; animation: riseIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (max-width: 860px) { .coaster-hero { grid-template-columns: 1fr; gap: var(--space-lg); } }
.coaster-head .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-sm); }
.coaster-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 0 0 var(--space-xs); color: #fff; }
.coaster-where { color: var(--color-muted); font-size: var(--text-lg); margin: 0 0 var(--space-md); }
.coaster-score { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-sm); flex-wrap: wrap; }
.coaster-score .num { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 4.6rem); line-height: 0.85; color: #fff; }
.coaster-score .of { font-family: var(--font-mono); color: var(--color-muted); font-size: var(--text-sm); }
.coaster-score .crank { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--amber); margin-left: auto; }
.coaster-detail .thrill { margin: var(--space-md) 0 var(--space-sm); }
.coaster-detail .thrill .bar { height: 14px; }
/* the big hero score already shows the number — drop the bar's duplicate val */
.coaster-detail .thrill .val { display: none; }
.coaster-blurb { color: #e7d7d3; margin: var(--space-md) 0 var(--space-lg); max-width: 58ch; }
.coaster-detail .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.coaster-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow), var(--shadow-glow); }
.coaster-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.coaster-photo figcaption { padding: var(--space-sm) var(--space-md); font-size: 0.72rem; color: var(--color-muted); background: rgba(0, 0, 0, 0.3); margin: 0; }
.coaster-photo figcaption a { color: var(--color-muted); }
.coaster-photo figcaption a:hover { color: var(--color-text); }

.coaster-section { margin-top: var(--space-xl); }
.coaster-section > h2 { font-size: var(--text-xl); margin: 0 0 var(--space-md); }
.coaster-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .coaster-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .coaster-stats { grid-template-columns: 1fr; } }

.similar-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.similar-card { text-decoration: none; }
.similar-card h3 { font-size: 1.35rem; }
.similar-card:hover h3 { color: var(--color-accent-ink); }

/* Explorer card titles link to the coaster's detail page (app.js) */
.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { color: var(--color-accent-ink); }
.card-title-link:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 3px; border-radius: var(--radius-sm); }

/* No-JS fallback: a static, crawlable index of every coaster detail page, shown
   only when the interactive grid can't render (rare no-JS visitors + plain-HTML
   crawlers). Kept simple and readable. */
.noscript-index { margin-top: var(--space-lg); }
.noscript-coaster-list { margin: 0; padding-left: 1.25rem; display: grid; gap: .35rem; line-height: 1.5; }
.noscript-coaster-list a { color: var(--color-accent-ink); font-weight: 600; }

/* "Copy link" shareable-view affordance in the rankings header (activation +
   virality: share the exact filtered/sorted ranking you built). Compact, on-brand
   ghost button reusing the flame accent + display face. */
.results-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-2); background: transparent; color: var(--color-text); font-family: var(--font-display); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; }
.share-btn:hover { border-color: var(--flame-2); background: rgba(255, 46, 106, 0.08); transform: translateY(-1px); }
.share-btn:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 2px; }
.share-btn svg { display: block; }
.share-status { color: var(--flame-2); font-size: var(--text-sm); font-weight: 600; font-family: var(--font-mono); }

/* ── Stat-range sliders (height / speed / year) — dual-handle over the real data
   range. Two overlapping native range inputs (min + max); only the thumbs take
   pointer events so both are draggable, with a shared visual track behind them. */
.stat-filters { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg) var(--space-sm); margin: 0 0 var(--space-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm) var(--space-lg); }
.stat-filters legend { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); padding: 0 6px; }
.stat-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin-bottom: 4px; }
.stat-range-label { font-weight: 600; font-size: var(--text-sm); }
.stat-range-val { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-accent-ink); white-space: nowrap; }
.dual-range { position: relative; height: 26px; }
.dual-range::before { content: ""; position: absolute; left: 2px; right: 2px; top: 11px; height: 4px; border-radius: 2px; background: var(--color-line-2); }
.dual-range input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-range input[type="range"]::-webkit-slider-runnable-track { background: none; border: none; height: 26px; }
.dual-range input[type="range"]::-moz-range-track { background: none; border: none; height: 26px; }
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-line-2); cursor: pointer; }
.dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-line-2); cursor: pointer; }
.dual-range input[type="range"]:focus-visible { outline: none; }
.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--flame-2); outline-offset: 2px; }
.dual-range input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--flame-2); }
.filter-status { grid-column: 1 / -1; margin: 0; min-height: 1.1em; font-size: var(--text-sm); color: var(--color-muted); }