/* ═══════════════════════════════════════════════════════════════
   FLOORSHEET — reset, typefaces, type scale, layout primitives
   ═══════════════════════════════════════════════════════════════ */

/* ── Typefaces. Self-hosted woff2 so the course works offline. ──
   Mukta carries a unicode-range for the Devanagari block only, so it is
   fetched on demand rather than blocking first paint. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../assets/fonts/martian.woff2') format('woff2-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mukta';
  src: url('../assets/fonts/mukta-400.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F;
}

/* ── reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100vh;
  /* The grotesque carries the interface. The serif is reserved for lesson
     prose only — letting it leak into lists and labels is what made the
     first pass look mismatched. */
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--paper);
  /* One warm wash from the top. No texture tile: at low opacity it read as
     dirt rather than as a survey map, and it muddied every surface above it. */
  background:
    linear-gradient(180deg, #17150F 0%, var(--ink-900) 620px),
    var(--ink-900);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 900px) { body { background-attachment: scroll; } }

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ── focus: always visible, never removed ──────────────────── */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.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;
}
.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 100;
  background: var(--signal); color: var(--ink-900);
  padding: var(--s3) var(--s5); font-family: var(--f-data);
  font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.14em;
  transition: top 180ms var(--ease);
}
.skip:focus { top: var(--s4); }

/* ── type ──────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--t-md); letter-spacing: 0; }

strong, b { font-weight: 650; color: var(--paper); }
em, i { font-style: italic; }

/* Every number the learner reads. Tabular so figures never jitter. */
.num, .data, td.num, th.num {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

.kicker, .cap {
  font-family: var(--f-data);
  font-size: var(--t-cap);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-3);
  font-weight: 500;
}

.np { font-family: var(--f-np); font-size: 1.06em; line-height: 1.4; }

.deva {
  font-family: var(--f-np);
  font-variant-numeric: normal;
}

/* ── layout primitives ─────────────────────────────────────── */
.wrap   { width: min(1240px, 100% - var(--s6)); margin-inline: auto; }
.prose  { max-width: var(--measure); }
.bleed  { width: 100%; }
.split  { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--s7); align-items: start; }
/* minmax(0, …) rather than a bare fr: an fr track has a min-content floor,
   so one long lesson title would push the column wider than the viewport. */
.split > * { min-width: 0; }
.rule   { border: 0; border-top: var(--hairline); margin: var(--s7) 0; }
.stack > * + * { margin-top: var(--s4); }
.row    { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .wrap  { width: min(1240px, 100% - var(--s4)); }
}

/* ── prose rhythm inside a lesson ──────────────────────────── */
.prose > * + * { margin-top: var(--s4); }
.prose p { color: var(--paper-2); }
.prose h3 { margin-top: var(--s6); color: var(--paper); }
.prose ul, .prose ol { margin-left: var(--s5); }
.prose li { color: var(--paper-2); margin-top: var(--s2); position: relative; }
.prose ul > li::before {
  content: '—'; position: absolute; left: calc(var(--s5) * -1);
  color: var(--paper-4); font-family: var(--f-data);
}
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n); position: absolute; left: calc(var(--s5) * -1);
  color: var(--signal-dim); font-family: var(--f-data); font-size: var(--t-xs);
}
.prose a:not(.btn) {
  color: var(--paper); border-bottom: 1px solid var(--gold-dim);
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.prose a:not(.btn):hover { color: var(--gold-soft); border-bottom-color: var(--gold); }

/* ── the one radius rule ───────────────────────────────────── */
.pill {
  border-radius: 999px;
  padding: 2px var(--s3);
  font-family: var(--f-data);
  font-size: var(--t-cap);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--ink-600);
  color: var(--paper-3);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.pill--bull   { border-color: var(--bull-dim);   color: var(--bull);   background: var(--bull-wash); }
.pill--bear   { border-color: var(--bear-dim);   color: var(--bear);   background: var(--bear-wash); }
.pill--signal { border-color: var(--signal-dim); color: var(--signal); background: var(--signal-wash); }
.pill--nepse  { border-color: var(--crimson);    color: var(--crimson); }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: 1px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--paper);
  font-family: var(--f-data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  min-height: 44px;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover:not(:disabled) { background: var(--ink-750); border-color: var(--paper-4); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primary {
  background: var(--signal); border-color: var(--signal); color: var(--ink-900); font-weight: 600;
}
.btn--primary:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--bull { border-color: var(--bull-dim); color: var(--bull); }
.btn--bull:hover:not(:disabled) { background: var(--bull-wash); border-color: var(--bull); }
.btn--bear { border-color: var(--bear-dim); color: var(--bear); }
.btn--bear:hover:not(:disabled) { background: var(--bear-wash); border-color: var(--bear); }
.btn--ghost { background: transparent; }
.btn--sm { min-height: 34px; padding: var(--s2) var(--s3); font-size: var(--t-cap); }

/* ── entry stagger: animation #1 of exactly three ──────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.stagger > * {
  animation: rise var(--dur) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* ── surfaces ──────────────────────────────────────────────── */
.panel {
  background: var(--ink-800);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
}
.panel--deep { background: var(--ink-850); }
.panel--flush { padding: 0; overflow: hidden; }

/* ── tables: aligned to the decimal, like a floorsheet ─────── */
.table { font-size: var(--t-sm); }
.table th, .table td { padding: var(--s2) var(--s3); text-align: left; border-bottom: var(--hairline); }
.table thead th {
  font-family: var(--f-data); font-size: var(--t-cap); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--paper-3); font-weight: 500;
  border-bottom: 1px solid var(--ink-600); white-space: nowrap;
}
.table td.n, .table th.n {
  text-align: right; font-family: var(--f-data);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.table tbody tr:hover { background: var(--ink-750); }
.table tbody tr:last-child td { border-bottom: 0; }
.table caption {
  caption-side: bottom; text-align: left; padding-top: var(--s3);
  font-size: var(--t-xs); color: var(--paper-3); font-family: var(--f-data);
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.up   { color: var(--bull); }
.down { color: var(--bear); }
.dim  { color: var(--paper-3); }
.hi   { color: var(--signal); }