/* learn.css: THE STANDARD (1.18, PR 4). The learn hub and the lesson
   archetype: the masthead, the track chips, the plate cards, the lesson's
   rail, prose and marginalia, the Formula instrument, the guess-first block.
   Linked after sections.css by the hub and the 32 lessons (the `learn` head
   flag) and by the comps; the home never loads it. */
/* ── the learn pages: the hub, the lesson archetype, the plates ───────── */
.learn-hub > .wrap { padding-top: var(--s5); }
.mast { display: grid; gap: var(--s5); align-items: end; padding: var(--sec-y-minor) 0 var(--s7); }
@media (min-width: 900px) { .mast { grid-template-columns: 1fr auto; } }
.mast .t-data-xl { color: var(--gold-lt); }
.mast .t-data-xl small { display: block; font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; color: var(--ink-mute); margin-top: var(--s2); }
.tracks { position: sticky; top: var(--site-head-h); z-index: 5; display: flex; gap: var(--s2); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter); background: rgba(var(--void-rgb), 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); scrollbar-width: none; }
.tracks::-webkit-scrollbar { display: none; }
.tracks a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink2); font: 600 13px/1 var(--mono); letter-spacing: 0.1em; text-decoration: none !important; }
.tracks a.is-on, .tracks a:hover { color: var(--ink); border-color: var(--hair-strong); }
.tracks a.is-on { color: var(--gold-lt); border-color: rgba(var(--gold-rgb), 0.5); }
.track { padding: var(--s8) 0 0; scroll-margin-top: calc(var(--site-head-h) + 56px); }
.track__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.track__head .t-h2 { font-size: clamp(28px, 3vw, 40px); }
.track__head small { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; color: var(--ink-mute); }
.plates { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plate-card { display: grid; gap: var(--s3); color: inherit; text-decoration: none !important; }
.plate-card .plate { aspect-ratio: 8 / 3; }
.plate-card .ge { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.plate-card .gt { font: 600 clamp(19px, 1.6vw, 22px)/1.25 var(--num); color: var(--ink); letter-spacing: -0.015em; }
.plate-card .gd { font: 400 15px/1.5 var(--sans); color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plate-card:hover .gt { color: #fff; }
.plate { position: relative; overflow: hidden; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 var(--rim); }
.plate { aspect-ratio: 8 / 3; }
/* the plate's image fills its box exactly: the labels are placed in percent
   of this box. Its class is "hero" (probe-seo's contract for the lesson's
   anchor image), so site.css's legacy img.hero rules (the old lesson pages'
   bordered picture) and the home hero's .hero padding both reach it and
   must be undone here */
.plate img, .plate img.hero, .plate svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; isolation: auto; object-fit: contain; display: block; }
/* a plate's labels: HTML at 12 px placed in percent of the drawing (the
   generators record them in labels.json); a card never shows them, the
   lesson's own plate shows them from 600 px and a
   phone reads the legend under the plate instead */
.plate__labs { position: absolute; inset: 0; pointer-events: none; }
.plate .lab { position: absolute; display: none; transform: translate(0, -100%); font: 600 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-mute); white-space: nowrap; }
.plate .lab[data-a="middle"] { transform: translate(-50%, -100%); }
.plate .lab[data-a="end"] { transform: translate(-100%, -100%); }
.lab--ink { color: var(--ink); }
.lab--gold { color: var(--gold-lt); }
.lab--up { color: var(--up); }
.lab--down { color: var(--down); }
.lab--mute { color: var(--ink-mute); }
@media (min-width: 600px) { .plate--hero .lab { display: block; } }
.legend { display: none; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; padding: 0; list-style: none; font: 600 12px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ink-mute); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
@media (max-width: 599px) { .lesson__plate .legend { display: flex; } }
/* the lesson */
.lesson { display: grid; gap: var(--s6); max-width: var(--w-page); margin: 0 auto; padding: var(--sec-y-minor) var(--gutter) 0; }
.lesson__top { display: grid; gap: var(--s4); max-width: 760px; }
.lesson__top h1 { font-size: clamp(36px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.035em; max-width: 20ch; }
.lesson__plate { display: grid; gap: 0; }
.lesson__body { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .lesson__body { grid-template-columns: 3fr 6fr 3fr; column-gap: var(--s5); } .lesson__rail, .lesson__margin { position: sticky; top: calc(var(--site-head-h) + var(--s5)); align-self: start; } }
.lesson__rail { display: grid; gap: var(--s3); }
.progress { height: 1.5px; background: var(--hair); position: relative; }
.progress::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--read, 0.42) * 100%); background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6); }
.lesson__rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lesson__rail li a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; min-height: 36px; align-items: center; color: var(--ink-mute); font: 400 14px/1.3 var(--sans); text-decoration: none !important; }
.lesson__rail li a b { font: 600 12px/1 var(--mono); letter-spacing: 0.1em; }
.lesson__rail li a.is-on { color: var(--ink); }
.lesson__rail li a.is-on b { color: var(--gold); }
.lesson__prose { max-width: 64ch; }
.lesson__prose h2 { margin: var(--s7) 0 var(--s3); }
.lesson__prose h2:first-child { margin-top: 0; }
.lesson__margin { display: grid; gap: var(--s4); }
.margin-card__t { margin: 0; font: 600 18px/1.3 var(--num); letter-spacing: -0.01em; color: var(--ink); }
.margin-card .t-small { margin: 0; color: var(--ink2); }
.margin-card .btn { justify-self: start; }
.margin-card__list { list-style: none; margin: 0; padding: 0; display: grid; }
.margin-card__list a { display: grid; gap: 2px; min-height: 44px; padding: var(--s3) 0; border-top: 1px solid var(--hair); text-decoration: none !important; }
.margin-card__list b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.margin-card__list span { font: 600 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.lesson__qa { margin-top: var(--s8); }
.inst { padding: var(--s4); display: grid; gap: var(--s3); }
.inst .t-label { color: var(--ink-mute); display: flex; justify-content: space-between; gap: 8px; }
.inst .t-label small { color: var(--pearl); font: inherit; letter-spacing: inherit; }
.inst__expr { font: 600 15px/1.4 var(--mono); color: var(--ink2); }
.inst__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font: 400 14px/1.3 var(--sans); color: var(--ink2); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--hair-strong); border-radius: 10px; overflow: hidden; }
.stepper button { appearance: none; border: 0; width: 36px; height: 36px; background: transparent; color: var(--ink); font: 600 18px/1 var(--num); cursor: pointer; }
.stepper button:active { background: rgba(255, 255, 255, 0.06); }
.stepper b { min-width: 64px; text-align: center; font: 700 15px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.inst__out { display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid var(--hair); }
.inst__out b { font: 700 clamp(28px, 2.4vw, 34px)/1 var(--num); letter-spacing: -0.03em; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.inst__out span { font: 600 12px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--ink-mute); }
.guess { display: grid; gap: var(--s4); padding: var(--s5); margin: var(--s7) 0; }
.guess .t-label { color: var(--gold); }
.guess__hook { margin: 0; font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--num); letter-spacing: -0.02em; color: var(--ink); }
.guess__setup { margin: 0; max-width: 56ch; }
.guess__slider { display: grid; gap: var(--s2); }
.guess__slider input { width: 100%; accent-color: var(--gold); }
.guess__slider .row { display: flex; justify-content: space-between; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-mute); }
.guess__slider b { font: 700 24px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
/* with script the reveal waits for the lock; without it the answer is there */
.guess__commit { display: none; justify-self: start; margin-top: var(--s2); }
.guess.is-armed .guess__commit { display: inline-flex; }
.guess.is-armed .guess__reveal { display: none; }
.guess.is-revealed .guess__reveal { display: grid; }
.guess__reveal .gm { stroke: var(--up); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: 0.8; }
.guess__reveal .al--2 { stroke: var(--pearl); stroke-width: 2; }
.guess__bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); height: 240px; }
.guess__bars .bar { position: relative; display: grid; align-content: end; gap: 2px; text-align: center; }
.guess__bars .bar::before { content: ''; position: absolute; left: 0; right: 0; top: 24%; height: 1px; background: var(--hair-strong); }
.guess__bars .bar i { position: absolute; left: 18%; right: 18%; border-radius: 4px; background: var(--down); }
.guess__bars .bar--down i { top: 24%; height: calc(var(--h, 0%) * 0.6); }
.guess__bars .bar--up i { bottom: 76%; height: calc(var(--h, 0%) * 0.6); background: var(--up); }
.guess__bars .bar--acc i { background: var(--pearl); }
.guess__bars .bar--guess i { background: var(--gold); }
.guess__bars .bar span { font: 600 12px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--ink-mute); overflow-wrap: anywhere; }
.guess__bars .bar b { font: 700 15px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.guess__bars .bar--guess b { color: var(--gold-lt); }
.guess__reveal { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.guess__reveal svg { width: 100%; height: auto; display: block; overflow: visible; }
.guess__reveal .gl { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 6; }
.guess__reveal .al { fill: none; stroke: var(--up); stroke-width: 2.5; stroke-linecap: round; }
.guess__reveal .ax { stroke: var(--hair-strong); stroke-width: 1; }
/* sections.css sets .formula as a wrapping flex row for the stakes' parts; a
   guess's formula is one sentence with an exponent in it */
.guess__reveal .formula { display: block; font-size: 13px; line-height: 1.5; }
.guess__nums { display: flex; flex-wrap: wrap; gap: var(--s5); }
.guess__nums div b { display: block; font: 700 clamp(24px, 2.2vw, 32px)/1 var(--num); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.guess__nums div b.acc { color: var(--up); }
.guess__nums div span { font: 600 12px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--ink-mute); }
.keepgoing { padding: var(--s8) 0 0; }
.keepgoing .t-h3 { margin-bottom: var(--s5); }
.lesson .cta { margin: var(--s8) 0 0; }

/* ── LEARN BY DOING (ONE PATH, 1.20): the six stations on the hub, the one
   door to every way Kurus teaches; rows on a phone, 2 by 3, then 3 by 2 ── */
.ways { display: grid; gap: var(--s4); margin: 0 0 var(--s8); }
.ways__list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .ways__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ways__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: flex; align-items: center; gap: var(--s4); min-height: 44px; height: 100%; padding: var(--s4); border: 1px solid var(--hair); border-radius: 14px; color: var(--ink2); text-decoration: none !important; transition: border-color var(--d-ui) var(--ease); }
.way:hover, .way:focus-visible { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.way__orb { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--acc); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 70%), var(--panel); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--hair); }
.way__orb .ico { width: 20px; height: 20px; }
.way__txt { display: grid; gap: 2px; font: 400 15px/1.45 var(--sans); }
.way__txt b { font: 600 17px/1.3 var(--num); color: var(--ink); letter-spacing: -0.01em; }