/* Hallmark · genre: atmospheric (light-paper) · macrostructure: bespoke «portal → playground →
 * live board → run a node → mechanics teaser → mast» · theme: studied-DNA (source: https://www.arc.fun/)
 * observed: bone paper rgb(240,239,234) · lowercase wordmark (Syne, Илья chose it over three live renders) · mono chrome · one acid mark
 * nav: N8 terminal row of destinations · footer: Ft1 mast-headed
 * enrichment: Tier C generated still (corridor) over a Tier A CSS fallback; Tier B SVG mark
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--color-paper); }
body { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 500; letter-spacing: -0.03em; overflow-wrap: anywhere; min-width: 0; }
a { color: var(--color-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-acid-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
button { font: inherit; }
.wrap { width: min(1200px, 100% - 2 * var(--space-md)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── announcement strip ─────────────────────────────────────────────────── */
.strip {
  position: relative; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em;
  background: var(--color-acid-wash); color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-line);
}
.strip a { text-decoration: underline; }

/* ── portal ─────────────────────────────────────────────────────────────── */
.portal {
  position: relative; min-height: 100svh; overflow: clip; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-md);
}
.void { position: absolute; inset: 0; z-index: -2; }
.void img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; filter: saturate(0.2) contrast(0.98); }
/* The endless corridor. One still cannot move, but a corridor is self-similar: zooming slowly into
   the vanishing point reads as walking forward. Two copies run the same zoom half a cycle apart
   and cross-fade, so the reset is never on screen and the walk never ends. */
.void .dolly { position: absolute; inset: 0; transform-origin: 50% 47%; will-change: transform, opacity; animation: dolly 16s linear infinite; }
.void .dolly.b { animation-delay: -8s; }
@keyframes dolly {
  0%   { transform: scale(1);    opacity: 0; }
  12%  { opacity: 1; }
  50%  { opacity: 1; }
  62%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .void .dolly { animation: none; } .void .dolly.b { display: none; } }
/* CSS fallback while the render loads or if it never does: the corridor as nested frames. */
.void::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-radial-gradient(ellipse 60% 62% at 50% 55%, transparent 0 7%, var(--color-line) 7% calc(7% + 1px)),
    linear-gradient(to bottom, var(--color-paper-2), var(--color-paper) 45%, var(--color-paper-3));
}
.void::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 55%, transparent 40%, var(--color-scrim) 100%);
}
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* The mark: one acid arc that does not fit the frame, and the amp taken out of it.
   Cropped on purpose — a whole ring reads as an icon, a cropped one reads as an object. */
.mark { position: absolute; z-index: -1; left: 50%; top: 44%; width: 118vmax; height: 118vmax; transform: translate(-50%, -50%); pointer-events: none; }
.mark circle { fill: none; stroke: var(--color-acid); }
/* three quarters of a ring, open at the top-right: the missing quarter is the amp sold */
.mark .arc { stroke-width: 4.6; stroke-dasharray: 750 250; stroke-dashoffset: 125; stroke-linecap: round; }
.mark .orbit { stroke-width: 0.6; stroke-dasharray: 1.2 5; opacity: 0.5; }
.mark .amp { fill: var(--color-acid); opacity: 0.1; }

/* N8 terminal row: destinations as a line of mono links, the way a prompt lists commands. */
.dests {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em;
}
.dests a { text-decoration: none; color: var(--color-ink-soft); }
.dests a:hover { color: var(--color-ink); text-decoration: underline; }
.dests .home { color: var(--color-ink); font-weight: 500; }

.centre { display: grid; align-content: center; justify-items: center; text-align: center; padding: var(--space-xl) 0; }
.centre h1 {
  margin: 0; font-size: var(--text-display); line-height: 0.85; letter-spacing: -0.06em; font-weight: 500;
  color: var(--color-acid); white-space: nowrap;
  text-shadow: 0 1px 0 var(--color-paper);
}
.debris { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
.debris span { position: absolute; }
.enter {
  margin-top: var(--space-md);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.02em;
  color: var(--color-ink); text-decoration: none;
  border: 0; background: transparent; cursor: pointer; padding: var(--space-2xs) var(--space-xs);
}
.enter:hover { color: var(--color-acid-ink); }
.enter .k { display: inline-block; width: 0.9em; height: 0.9em; background: var(--color-acid); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.corners { display: flex; justify-content: space-between; align-items: end; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
.corners a { text-decoration: none; color: var(--color-ink-faint); }
.corners a:hover { color: var(--color-ink); }
.corners .right { display: flex; gap: var(--space-sm); }
.status { display: inline-flex; gap: var(--space-2xs); align-items: center; }
.status .b { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-faint); }
body.live .status .b { background: var(--color-acid-ink); }

/* ── sections ───────────────────────────────────────────────────────────── */
section { padding: var(--space-2xl) 0; border-top: var(--rule-hair) solid var(--color-line); }
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.head h2 { margin: 0; font-size: var(--text-3xl); }
.head .k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }

/* playground */
.play { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-lg); align-items: start; }
.chat { display: grid; gap: var(--space-sm); }
.chat textarea {
  width: 100%; min-height: 128px; resize: vertical;
  padding: var(--space-sm); font: inherit; font-size: var(--text-base); line-height: 1.5;
  color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm);
}
.chat textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[data-state="loading"] { color: var(--color-ink-faint); border-color: var(--color-line); }
.btn--acid { background: var(--color-acid); border-color: var(--color-acid); }
.btn--acid:hover { background: var(--color-ink); border-color: var(--color-ink); }
select.model {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-line);
  border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm);
}
.answer {
  min-height: 128px; padding: var(--space-sm);
  border-left: 2px solid var(--color-acid);
  background: var(--color-paper-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--text-base);
}
.answer[data-state="empty"] { color: var(--color-ink-faint); font-family: var(--font-mono); font-size: var(--text-sm); }
.answer[data-state="error"] { border-left-color: var(--color-ink-faint); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: var(--text-sm); }
.receipt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.aside p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); }
/* the path of one request: label on the left, what happens on the right */
.flow { list-style: none; margin: 0 0 var(--space-md); padding: 0; border-top: var(--rule-hair) solid var(--color-line); }
.flow li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink-soft); }
.flow li > span:first-child { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-acid-ink); padding-top: 2px; }
.flow code { color: var(--color-ink); }
.aside .fine { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }

/* live board: ticker + feed + nodes */
/* Hairlines live on the cells, not on the grid background: slots the cells do not fill would
   otherwise show the line colour as a solid block. */
/* The measurement is the heading: one display-size number with its sentence, then the five
   secondary counters as a hairline row. No h2 here — a section that opens with a live figure
   should not also open with a word. */
.livehead { margin-bottom: var(--space-lg); }
.livehead .k { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); margin-bottom: var(--space-sm); }
.stat { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-md); }
.stat .num { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7.5rem); line-height: 0.85; letter-spacing: -0.06em; color: var(--color-acid-ink); }
.stat .cap { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.03em; color: var(--color-ink); max-width: 14ch; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); background: transparent; }
.cell { min-width: 0; padding: var(--space-sm); box-shadow: 0 0 0 1px var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); }
.num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.02em; }
.num.flash { animation: flash var(--dur-slow) var(--ease-out); }
.cap { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-soft); line-height: 1.3; }
.measured { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); margin: var(--space-sm) 0 var(--space-lg); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.two h3 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); }
th, td { text-align: left; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-line); white-space: nowrap; }
th { font-weight: 500; color: var(--color-ink-faint); }
td.on::before { content: "●"; color: var(--color-acid-ink); margin-right: 6px; }
td.off::before { content: "○"; color: var(--color-ink-faint); margin-right: 6px; }
.empty { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); padding: var(--space-sm) 0; }
.tablewrap { overflow-x: auto; }

/* run a node — a ledger: numeral, what it does, the command. Three rows under hairlines, not
   three columns of equal cards; the command gets the width a shell line actually needs. */
.head.stack { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-line); }
.step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-md) var(--space-lg); align-items: start; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-line); }
.step .n { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.04em; color: var(--color-acid-ink); font-variant-numeric: tabular-nums; }
.step h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-xl); }
.step p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }
.cmdwrap { position: relative; min-width: 0; }
.cmdwrap .copy { position: absolute; top: var(--space-2xs); right: var(--space-2xs); padding: 2px 6px; background: var(--color-paper-2); }
pre.cmd {
  margin: 0; padding: var(--space-sm); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6;
  color: var(--color-ink); background: var(--color-paper-2);
  border-left: 2px solid var(--color-ink); border-radius: var(--radius-sm);
}
.copy { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-ink-faint); background: transparent; border: 0; cursor: pointer; padding: var(--space-2xs) 0; }
.copy:hover { color: var(--color-acid-ink); }

/* mechanics teaser */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.teaser .lede { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; margin: 0; max-width: 20ch; }
.teaser ul { margin: 0 0 var(--space-md); padding-left: 1.1em; color: var(--color-ink-soft); }
.teaser li { margin-bottom: var(--space-2xs); }
.teaser li::marker { color: var(--color-acid-ink); }

/* Ft1 mast */
footer { border-top: var(--rule-hair) solid var(--color-line); padding: var(--space-lg) 0 var(--space-xl); display: grid; gap: var(--space-sm); }
footer .mast { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-acid-ink); letter-spacing: -0.04em; }
footer .rows { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }

/* mechanics page */
.doc { padding: var(--space-2xl) 0 var(--space-xl); max-width: 68ch; }
.doc h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-sm); }
.doc h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-2xs); }
.doc .lede { font-size: var(--text-xl); margin: 0 0 var(--space-lg); }
.doc p, .doc li { color: var(--color-ink-soft); }
.doc li::marker { color: var(--color-acid-ink); }
.doc code { color: var(--color-acid-ink); }
.back { display: inline-block; margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-xs); }
.topbar { display: flex; justify-content: space-between; padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); }
.topbar a { text-decoration: none; color: var(--color-ink-soft); margin-left: var(--space-md); }

@keyframes flash { from { color: var(--color-acid-ink); } }
@media (prefers-reduced-motion: reduce) { .num.flash { animation: none; } * { transition-duration: 1ms !important; } }

@media (max-width: 960px) {
  .play, .two, .teaser { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .num { font-size: clamp(3.5rem, 22vw, 6rem); }
  .stat .cap { font-size: var(--text-xl); }
  .flow li { grid-template-columns: 5rem minmax(0, 1fr); }
  .debris { display: none; }
  .corners .right { gap: var(--space-xs); }
}

/* ── hook line ──────────────────────────────────────────────────────────── */
.hook { margin: var(--space-sm) auto 0; max-width: 40ch; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.5; }

/* ── get a key ──────────────────────────────────────────────────────────── */
.keybox { display: grid; gap: var(--space-sm); padding: var(--space-md); box-shadow: 0 0 0 1px var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); }
.keybox h3 { margin: 0; font-size: var(--text-xl); }
.keybox p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }
.keyout { display: none; }
.keyout[data-state="ready"] { display: grid; gap: var(--space-2xs); }
.keyout .key { font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; color: var(--color-acid-ink); }
.keyerr { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }

/* ── $AMPERE ────────────────────────────────────────────────────────────── */
.token { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.token .pair { font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: -0.04em; margin: 0 0 var(--space-sm); }
.token .pair .acid { color: var(--color-acid-ink); }
.split { display: grid; grid-template-columns: 4fr 4fr 2fr; gap: 3px; margin: var(--space-md) 0 var(--space-2xs); height: 10px; }
.split span { display: block; background: var(--color-paper-3); }
.split .a { background: var(--color-acid); }
.split .b { background: var(--color-ink-soft); }
.split .c { background: var(--color-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); margin: 0 0 var(--space-md); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.legend .a { background: var(--color-acid); } .legend .b { background: var(--color-ink-soft); } .legend .c { background: var(--color-ink); }
.why { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.why li { padding-left: var(--space-md); position: relative; color: var(--color-ink-soft); }
.why li::before { content: "→"; position: absolute; left: 0; color: var(--color-acid-ink); font-family: var(--font-mono); }
.why strong { color: var(--color-ink); }
.warn { margin-top: var(--space-md); padding: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); background: var(--color-acid-wash); border-left: 2px solid var(--color-acid-ink); }

/* ── roadmap — a rail with three stops, not three cards ─────────────────── */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.phase { position: relative; min-width: 0; padding: var(--space-md) 0 0; border-top: 2px solid var(--color-line); }
.phase::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-paper); box-shadow: 0 0 0 2px var(--color-line); }
.phase.now { border-top-color: var(--color-acid-ink); }
.phase.now::before { background: var(--color-acid); box-shadow: 0 0 0 2px var(--color-acid-ink); }
.phase .tag { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); }
.phase.now .tag { color: var(--color-acid-ink); }
.phase h3 { margin: var(--space-2xs) 0; font-size: var(--text-xl); }
.phase ul { margin: 0; padding-left: 1.1em; color: var(--color-ink-soft); font-size: var(--text-sm); }
.phase li::marker { color: var(--color-acid-ink); }
td.founding { color: var(--color-acid-ink); }

@media (max-width: 960px) {
  .token { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step .cmdwrap { grid-column: 1 / -1; }
  .cmdwrap .copy { position: static; padding: var(--space-2xs) 0; background: transparent; }
}

/* The real walk: two copies of the 8 s dolly clip, offset by half, cross-faded by JS on the
   clip's own clock so the loop seam is always under the hidden layer. Desktop only — the clip is
   2.8 MB and a phone gets the still with the CSS dolly instead. */
.void video.dolly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(0.2) contrast(0.98); opacity: 0; animation: none; transition: opacity var(--dur-slow) var(--ease-out); }
body.video .void video.dolly { opacity: 1; }
body.video .void img.dolly { animation: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }

/* the idea in one glance, and example prompts as chips */
.what { margin: var(--space-md) auto 0; max-width: 46ch; font-family: var(--font-body); font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); text-wrap: balance; }
.hook { margin-top: var(--space-sm); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.chip {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-line); border-radius: var(--radius-pill);
  padding: 6px var(--space-xs); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink); background: var(--color-paper); }
.chip:active { transform: translateY(1px); }
.chip[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 560px) { .what { font-size: var(--text-base); } }

.classes { margin-top: var(--space-lg); }
.classes h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-xl); }