*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(37,99,255,.3); color: #fff; }

h1,h2,h3,p,figure,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.hero { font-size: var(--t-hero); font-weight: 800; letter-spacing: var(--track-tight); line-height: .97; }
.xl   { font-size: var(--t-xl);   font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.lg   { font-size: var(--t-lg);   font-weight: 700; letter-spacing: -.03em;  line-height: 1.1; }
.md   { font-size: var(--t-md);   font-weight: 700; letter-spacing: -.02em; }
.read { font-size: var(--t-read); line-height: 1.72; max-width: var(--read); color: var(--ink); }
.body { font-size: var(--t-body); color: var(--ink-2); }
.sm   { font-size: var(--t-sm);   color: var(--ink-2); }
.xs   { font-size: var(--t-xs);   color: var(--ink-3); }

/* the small tracked label. used sparingly — it is the only "chrome" type. */
.tag {
  font-size: var(--t-tag); font-weight: 700;
  letter-spacing: var(--track-tag); text-transform: uppercase;
  color: var(--ink-3);
}

.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dim  { color: var(--ink-2); }
.faint{ color: var(--ink-3); }
.num  { font-variant-numeric: tabular-nums; }

/* ── Motion primitives ────────────────────────────────────────────────────── */
@keyframes rise   { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fade   { from { opacity:0; } to { opacity:1; } }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes widen  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rise  { animation: rise var(--dur-slow) var(--ease-out) both; }
.rise-1{ animation-delay: 70ms; }
.rise-2{ animation-delay: 150ms; }
.rise-3{ animation-delay: 240ms; }
.rise-4{ animation-delay: 340ms; }
.rise-5{ animation-delay: 450ms; }

/* ── The rule. Fllowly's only divider. ────────────────────────────────────── */
.rule { height: 1px; background: var(--line); border: 0; transform-origin: left; animation: widen var(--dur-slow) var(--ease-out) both; }

/* ── Spatial frame ────────────────────────────────────────────────────────── */
.stage {
  min-height: 100vh;
  padding: calc(var(--s8) + 40px) var(--gutter) var(--s9);
  animation: fade 380ms var(--ease-out) both;
}
.stage--full { display: grid; place-items: center; padding-block: 0; min-height: 100vh; }

/* An asymmetric two-track layout: a narrow left rail for meta, wide right for
   content. Replaces the sidebar+cards dashboard shell entirely. */
.tracks {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.track-meta { position: sticky; top: 116px; }

@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto and
     refuses to shrink below its content, which is how a wide diagram
     pushes the whole page sideways instead of scrolling inside itself. */
  .tracks { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .track-meta { position: static; }
}