/* =====================================================================
   BSA FUTURES - LAYOUT AND COMPONENTS
   Colors, fonts and spacing come from theme.css. To change the look,
   edit theme.css first. This file decides where things sit.
   ===================================================================== */

/* ---------- Fonts (self-hosted, no Google requests) ---------- */
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.05; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.1; }
h3, .h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-vpoc); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--color-accent); color: var(--color-accent-ink); padding: 10px 14px; border-radius: var(--radius-btn); }
.skip-link:focus { top: 12px; }
.noscript-nav { padding: 16px var(--gutter); color: var(--color-text-muted); font-size: var(--text-small); }
.noscript-nav a { margin-right: 14px; text-decoration: underline; }

.eyebrow, .tag {
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow { color: var(--color-accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem; letter-spacing: 0;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); }
.btn--secondary:hover { border-color: var(--color-text-muted); }
.btn--ghost { padding-inline: 8px; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--color-border); }
.btn--ghost:hover { color: var(--color-text); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { display: flex; width: 100%; }
.btn.is-disabled, .is-disabled { cursor: default; opacity: 0.55; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.site-header.is-solid, .menu-open .site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-5); }
.logo { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.18em; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 0.45em; }
.logo__mark { color: var(--color-accent); }
.logo__icon { width: 28px; height: 29px; flex: none; margin-right: 0.3em; }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; gap: var(--space-1); }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; font-size: 0.9375rem; color: var(--color-text-muted); border-radius: 8px; transition: color var(--dur-fast) var(--ease); }
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--color-text); }
.nav__caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 190px; padding: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.nav__item:hover > .dropdown, .nav__item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; color: var(--color-text-muted); }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--color-surface-2); color: var(--color-text); }
.site-header__cta { display: none; }

.menu-btn { margin-left: auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast); }
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -7px; }
.menu-btn__bars::after { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--color-bg); overflow-y: auto; padding: var(--space-5) var(--gutter) var(--space-7); }
.mobile-menu__list { margin-bottom: var(--space-6); }
.mobile-menu__list > li { border-bottom: 1px solid var(--color-border); }
.mobile-menu__link { display: flex; align-items: center; min-height: 56px; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; }
.mobile-menu__sub { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 12px; }
.mobile-menu__sub a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); font-size: 0.9375rem; }
.menu-open, .menu-open body { overflow: hidden; }

@media (min-width: 1180px) {
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-btn, .mobile-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; background: var(--color-bg); overflow: hidden; }
.hero__chart { position: relative; height: 48svh; min-height: 320px; max-height: 480px; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* swiping left / right on the chart changes scene; up / down still scrolls the page and pinch still zooms */
.hero__chart { touch-action: pan-y pinch-zoom; }
.hero__scrim { display: none; }
.hero__controls { position: absolute; left: 8px; right: var(--gutter); bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero__dots { display: flex; align-items: center; }
.hero__dot { width: 36px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.hero__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.hero__dot[aria-current="true"]::before { background: var(--color-accent); transform: scale(1.25); }
.hero__toggle { min-height: 44px; padding: 0 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.hero__toggle:hover { color: var(--color-text); }
.hero__caption { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); text-align: right; white-space: nowrap; }

.hero__content { position: relative; z-index: 2; padding-block: var(--space-5) var(--space-7); }
.hero__text .eyebrow { margin-bottom: var(--space-3); }
.hero__sub { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 46ch; }
.hero__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }

/* Phones and tablets: the chart takes all the height the text does not need, so the
   animation, headline and buttons fit on one screen where the screen is tall enough.
   On short screens the chart keeps its minimum height and the page simply scrolls. */
@media (max-width: 959px) {
  .hero__chart { flex: 1 1 auto; height: auto; min-height: 340px; max-height: 660px; }
  .hero__content { padding-block: var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
  .hero h1 { font-size: clamp(1.625rem, 1rem + 3.2vw, 2.5rem); }
  .hero__text .eyebrow { margin-bottom: var(--space-2); }
  .hero__sub { margin-top: var(--space-2); font-size: 0.9375rem; line-height: 1.5; }
  .hero__actions { margin-top: var(--space-4); gap: var(--space-2) var(--space-3); }
  .hero__actions .btn { min-height: 48px; }
  .hero__actions .btn--primary { padding: 0 20px; }  /* both actions fit on one row on most phones */
}
@media (max-width: 359px) {
  .hero__controls { gap: 6px; }
  .hero__caption { letter-spacing: 0.03em; }
}

/* The main hero button breathes very gently: it only ever gets slightly SMALLER (never
   bigger than normal), slowly. It rests while hovered, focused or pressed, and is off
   for people who ask for reduced motion. */
@keyframes hero-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.93); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__cta { animation: hero-cta-pulse 2.4s ease-in-out infinite; transform-origin: center; }
  .hero__cta:focus-visible, .hero__cta:active { animation: none; }
  /* rest while the mouse is over it (not on touch screens, where "hover" sticks after a tap) */
  @media (hover: hover) { .hero__cta:hover { animation: none; } }
}

/* Play / Pause. Playing: plain "Pause" text. Paused: "Play" on a small light-green
   button that pulses gently, so resuming is obvious. Same width in both states. */
.hero__toggle { position: relative; isolation: isolate; min-width: 62px; text-align: center; }
.hero__toggle::before { content: ""; position: absolute; z-index: -1; inset: 9px 0; border-radius: 6px; background: transparent; transition: background var(--dur-fast) var(--ease); }
.hero__toggle.is-paused { color: var(--color-accent-ink); font-weight: 600; }
.hero__toggle.is-paused:hover { color: var(--color-accent-ink); }
.hero__toggle.is-paused::before { background: #A9E5C0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__toggle.is-paused { animation: hero-cta-pulse 2.4s ease-in-out infinite; }
}

/* Timeline under the animation (phones and desktop). The line is thin; the area that
   reacts to a finger or the mouse is taller. On phones it sits above the dots with a clear gap. */
.hero__seek { display: block; position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 46px;
  height: 28px; cursor: pointer; touch-action: none; --p: 0%; }
.hero__seek[hidden] { display: none; }
.hero__seek-track { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.13); }
.hero__seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 2px; background: rgba(255, 255, 255, 0.5); }
.hero__seek-thumb { position: absolute; left: var(--p); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--color-text); transition: transform 0.15s ease; }
.hero__seek:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 960px) {
  .hero__seek { left: var(--hero-split, 38%); right: var(--gutter); bottom: 58px; height: 20px; }
  .hero__seek-thumb { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .hero__seek:hover .hero__seek-thumb, .hero__seek:focus-visible .hero__seek-thumb { transform: scale(1.35); }
}

/* Desktop hero: chart fills the whole hero, text sits on the left */
@media (min-width: 960px) {
  .hero { justify-content: center; min-height: max(100svh, 680px); }
  .hero__chart { position: absolute; inset: 0; height: auto; max-height: none; }
  /* --hero-split = where the animation area starts. The script (hero/engine.js) sets it to
     just right of the text block, so the animation gets all the width the text does not use. */
  .hero__scrim { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) calc(var(--hero-split, 38%) - 90px), transparent calc(var(--hero-split, 38%) + 16px)),
                radial-gradient(120% 90% at 70% 50%, transparent 55%, var(--color-bg-deep) 130%); }
  .hero__controls { left: var(--hero-split, 38%); right: var(--gutter); bottom: 24px; z-index: 2; }
  /* the hero text sits close to the left edge (it does not line up with the header logo on purpose) */
  .hero .hero__content { max-width: none; padding-block: var(--header-h) 0; padding-left: clamp(28px, 3.2vw, 64px); pointer-events: none; }
  .hero__text { max-width: min(32vw, 28rem); pointer-events: auto; }
  .hero__sub { font-size: 1.125rem; margin-top: var(--space-5); }
  .hero__actions { margin-top: var(--space-6); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); }
.section--deep { background: var(--color-bg-deep); border-block: 1px solid var(--color-border); }
.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head p:last-child { margin-top: var(--space-4); color: var(--color-text-muted); }

/* ---------- Level picker ---------- */
.levels { display: grid; gap: var(--space-4); }
.level-card {
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%;
  padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
/* Each level has its own accent colour (--lv): bronze, silver, gold, diamond. The four
   colours are set in theme.css. The accent is used for the top edge, the number badge, the
   tier name, the progress pips, the topic chips and the link. Titles and descriptions keep
   the normal light text colours so they stay easy to read. */
.level-card { --lv: var(--color-accent); border-top: 2px solid var(--lv); }
.level-card--bronze { --lv: var(--level-bronze); }
.level-card--silver { --lv: var(--level-silver); }
.level-card--gold { --lv: var(--level-gold); }
.level-card--diamond { --lv: var(--level-diamond); }
.level-card:hover { border-color: var(--lv); background: var(--color-surface-2); transform: translateY(-2px); }
.level-card__head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-small); }
.level-card__num { padding: 2px 7px; border-radius: 5px; background: var(--lv); color: var(--color-accent-ink); font-weight: 600; }
.level-card__tier { color: var(--lv); }
.level-card__pips { display: flex; gap: 4px; margin-left: auto; }
.level-card__pips i { width: 13px; height: 4px; border-radius: 2px; background: var(--color-border); }
.level-card__pips i.on { background: var(--lv); }
.level-card .chip { color: var(--lv); }
.level-card .level-card__go, .level-card .level-card__go::after { color: var(--lv); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .level-card { border-color: color-mix(in srgb, var(--lv) 28%, var(--color-border)); border-top-color: var(--lv); }
  .level-card .chip, .level-card:hover .chip { border-color: color-mix(in srgb, var(--lv) 40%, var(--color-border)); background: color-mix(in srgb, var(--lv) 12%, var(--color-surface)); }
}
.level-card p { color: var(--color-text-muted); font-size: var(--text-small); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.chip { font-size: 0.75rem; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.level-card:hover .chip { background: var(--color-surface); }
.level-card__go, .link-card__go { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-small); color: var(--color-text); }
.level-card__go::after, .link-card__go::after { content: " \2192"; color: var(--color-accent); }
.levels__hint { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--text-small); }
@media (min-width: 640px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .levels { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Cards (lessons, links) ---------- */
.cards-3 { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.lesson-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.lesson-card__body { padding: var(--space-5); display: grid; gap: var(--space-2); }
.lesson-card__body p:last-child { color: var(--color-text-muted); font-size: var(--text-small); }

.thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: 100% 25%, 12.5% 100%; border-bottom: 1px solid var(--color-border); }
.thumb::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-vpoc); opacity: 0.6; }
.thumb--1::before { top: 62%; }
.thumb--2::before { top: 45%; }
.thumb--3::before { top: 70%; }
.thumb__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); transition: transform var(--dur-med) var(--ease), background var(--dur-fast); }
.thumb__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 16px solid var(--color-accent-ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.thumb:hover .thumb__play { background: var(--color-accent-hover); transform: scale(1.05); }
.thumb__soon { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--font-mono); font-size: var(--text-tiny); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); opacity: 0; transition: opacity var(--dur-med) var(--ease); }
.thumb.is-soon .thumb__soon { opacity: 1; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.link-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); min-height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease); }
.link-card:hover { border-color: var(--color-text-muted); background: var(--color-surface-2); }
.link-card p:not(.tag) { color: var(--color-text-muted); font-size: var(--text-small); }
.link-card.is-disabled { opacity: 1; }
.link-card.is-disabled .link-card__go { opacity: 0.5; }

/* ---------- Inner pages (Community, Journal) ---------- */
.page-hero { padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8); border-bottom: 1px solid var(--color-border); }
.page-hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem); max-width: 16ch; }
.page-hero .eyebrow { margin-bottom: var(--space-3); }
.page-hero__sub { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 56ch; font-size: 1.125rem; }
.page-hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.grid-4 { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.card p:not(.tag) { color: var(--color-text-muted); font-size: var(--text-small); }
.card__num { font-family: var(--font-mono); font-size: var(--text-small); color: var(--color-accent); }
.callout { padding: var(--space-6); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-surface); display: grid; gap: var(--space-3); max-width: 760px; }
.callout p { color: var(--color-text-muted); }
.fineprint { margin-top: var(--space-5); color: var(--color-text-faint); font-size: 0.8125rem; max-width: 70ch; }
.fineprint a, .prose a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 4px; }
.crumb { margin-bottom: var(--space-5); font-size: var(--text-small); }
.crumb a { color: var(--color-text-muted); } .crumb a:hover { color: var(--color-text); }
.muted { color: var(--color-text-muted); }
.stack { display: grid; gap: var(--space-3); align-content: start; }
.stack h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.grid-2, .grid-3 { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* an honest "nothing here yet" block */
.empty { display: grid; gap: var(--space-2); justify-items: start; max-width: 760px; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-card); }
.empty p:not(.tag) { color: var(--color-text-muted); }
/* previous / next level */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-7); }
.pager__link { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.pager__link span { font-size: 0.8125rem; color: var(--color-text-faint); }
.pager__link strong { font-family: var(--font-heading); font-weight: 600; }
.pager__link--next { text-align: right; }
.pager__link:hover { border-color: var(--color-text-muted); }
/* long text (legal pages) */
.prose { max-width: 68ch; display: grid; gap: var(--space-3); }
.prose h2 { font-size: 1.375rem; margin-top: var(--space-5); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--color-text-muted); }

/* ---------- Trade recaps ---------- */
.recap-grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 640px) { .recap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .recap-grid { grid-template-columns: repeat(3, 1fr); } }
.recap-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.recap-card:hover { border-color: var(--color-text-muted); }
.recap-card__thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--color-surface-2); display: block; }
.recap-card__body { display: grid; gap: var(--space-2); padding: var(--space-5); }
.recap-card__meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--color-text-faint); }
.recap-card h3 { font-size: 1.125rem; }
.recap__body { display: grid; gap: var(--space-6); }
.recap__body > * { max-width: 860px; }
.recap__body h2 { font-size: 1.5rem; margin-bottom: var(--space-3); }
.recap__body p { color: var(--color-text-muted); max-width: 70ch; }
.keylevels { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; max-width: 520px; }
.keylevels li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 12px var(--space-4); background: var(--color-surface); }
.keylevels strong { font-weight: 500; } .keylevels span { font-family: var(--font-mono); color: var(--color-text-muted); }
.shot { display: grid; gap: var(--space-2); }
.shot img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.shot figcaption { font-size: 0.8125rem; color: var(--color-text-faint); }
.shot__placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--color-border); border-radius: var(--radius-card); color: var(--color-text-faint); font-family: var(--font-mono); font-size: 0.8125rem; }
.template-banner { margin-top: var(--header-h); padding: 10px var(--gutter); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-small); font-weight: 600; text-align: center; }
.template-banner + .page-hero { padding-top: var(--space-7); }

/* ---------- Newsletter + Discord ---------- */
.cta-pair { display: grid; gap: var(--space-8); }
.cta-block { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.cta-block h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.cta-block p:not(.eyebrow) { color: var(--color-text-muted); max-width: 44ch; }
.cta-block .btn { margin-top: var(--space-2); }
@media (min-width: 800px) { .cta-pair { grid-template-columns: 1fr 1fr; gap: var(--space-9); } }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-8) var(--space-6); font-size: var(--text-small); color: var(--color-text-muted); }
.footer__top { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.footer__brand .logo { color: var(--color-text); }
.footer__title { font-family: var(--font-mono); font-size: var(--text-tiny); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.footer__col a { display: inline-flex; align-items: center; min-height: 40px; }
.footer__col a:hover { color: var(--color-text); }
.footer__risk { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); max-width: 90ch; font-size: 0.8125rem; line-height: 1.6; }
.footer__copy { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--color-text-faint); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer__brand { grid-column: auto; max-width: 30ch; }
}

/* ---------- Scroll reveal (only when JavaScript is running) ---------- */
.js-ready .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js-ready .reveal.is-in { opacity: 1; transform: none; }

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