/* about page: typographic poster. Type is the imagery. Shared tokens come from /css/site.css. */

/* ---------- hero: the name at composition scale ---------- */
.a-hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, var(--s-10)); background: var(--canvas); overflow: clip; }
.a-hero h1 { display: grid; justify-items: start; font-weight: 800; line-height: .86; margin: 0; }
.a-hero__pre { font-size: var(--t-2xl); letter-spacing: -.01em; color: var(--accent-2); margin-block-end: clamp(4px, 1vw, 14px); }
.a-hero__name { font-size: clamp(88px, 21vw, 300px); letter-spacing: -.055em; color: var(--ink); margin-inline-start: -.04em; }
.a-hero__lede { margin-block-start: clamp(28px, 4vw, 56px); font-size: var(--t-lg); line-height: 1.65; color: var(--ink-soft); max-width: 38em; text-wrap: pretty; }

/* ---------- why ---------- */
.a-why { padding-block: var(--chapter-pad); background: var(--ground-2); border-block-start: 1px solid var(--line); }
.a-why__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7) clamp(32px, 6vw, 96px); align-items: start; }
.a-why h2 { font-size: var(--t-sm); font-weight: 700; color: var(--accent-2); letter-spacing: .01em; padding-block-start: 10px; }
/* the pool: the chapter's own image, drawn from its sentence about learning to swim with floats */
.a-why__side { position: sticky; inset-block-start: 96px; }
.pool { margin: var(--s-7) 0 0; inline-size: min(100%, 300px); }
.pool svg { inline-size: 100%; block-size: auto; overflow: visible; }
.pool image { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); }
.pool__water { fill: var(--ground-2); opacity: .9; }
.pool .buoy { fill: none; stroke: var(--accent); stroke-width: 15; stroke-linecap: round; }
.pool .buoy__stripe { fill: none; stroke: var(--stop); stroke-width: 15; stroke-dasharray: 14 22; }
.pool .buoy--back { opacity: .82; }
.pool .wave { fill: none; stroke: var(--accent-2); stroke-linecap: round; }
.pool .w1 { stroke-width: 1.6; opacity: .6; }
.pool .w2 { stroke-width: 1.1; opacity: .3; }
.pool .w3 { stroke-width: 1.3; opacity: .3; }
.pool .w4 { stroke-width: 1.1; opacity: .18; }
.motion .pool__float { transform: translateY(calc(var(--bob, 0) * 1px)); }
.a-why__text p { color: var(--ink-soft); font-size: var(--t-lg); line-height: 1.7; max-width: 34em; margin-block-end: var(--s-6); text-wrap: pretty; overflow-wrap: anywhere; }
.a-why__text .say { display: block; margin-block: var(--s-8) var(--s-5); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: var(--track-tight); color: var(--ink); max-width: 14em; text-wrap: balance; }

/* ---------- the line (peak) ---------- */
.a-line { background: var(--ground-night); }
.a-line__stage { padding-block: var(--chapter-pad); }
.line { font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.line__a, .line__b { display: block; font-size: clamp(40px, 9.4vw, 136px); white-space: nowrap; }
.line__a { color: var(--ink-mute); }
.line__b { color: var(--accent); margin-block-start: .08em; }
@media (prefers-reduced-motion: no-preference) {
  .motion .a-line { block-size: 220vh; }
  .motion .a-line__stage { position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100svh; display: grid; align-items: center; padding-block: var(--s-7); overflow: clip; }
  .motion .line__a { transform-origin: 100% 100%; transform: translateY(calc(var(--k, 0) * 6%)) scale(calc(1 - var(--k, 0) * .58)); opacity: calc(1 - var(--k, 0) * .55); color: var(--ink); }
  .motion .line__b { transform-origin: 100% 0; transform: translateY(calc((1 - var(--k, 0)) * 10%)) scale(calc(.42 + var(--k, 0) * .58)); opacity: calc(.42 + var(--k, 0) * .58); }
}

/* ---------- how a lesson is built ---------- */
.a-build { padding-block: var(--chapter-pad); background: var(--canvas); }
.a-build__h { font-size: var(--t-3xl); font-weight: 800; line-height: 1.02; letter-spacing: -.024em; margin-block-end: var(--s-8); max-width: 10em; }
.a-build__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8) clamp(32px, 6vw, 96px); align-items: start; }
.a-build__intro { font-size: var(--t-lg); line-height: 1.65; color: var(--ink-soft); max-width: 34em; }
.lenses { list-style: none; padding: 0; margin: var(--s-7) 0; counter-reset: lens; border-block-start: 1px solid var(--line); }
.lenses li { counter-increment: lens; position: relative; padding-block: var(--s-5); padding-inline-start: 3em; border-block-end: 1px solid var(--line); color: var(--ink-soft); overflow-wrap: anywhere; transition: color 240ms var(--ease-out); }
.lenses li::before { content: counter(lens); position: absolute; inset-inline-start: 0; inset-block-start: var(--s-5); font-weight: 800; font-size: var(--t-lg); line-height: 1.2; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.lenses b { display: block; font-size: var(--t-xl); line-height: 1.25; color: var(--ink); margin-block-end: 2px; }
.a-build__gate { font-size: var(--t-xl); font-weight: 800; line-height: 1.3; color: var(--ink); max-width: 22em; text-wrap: balance; transition: color 300ms var(--ease-out); }
.a-build__after { margin-block-start: var(--s-5); color: var(--ink-mute); max-width: 36em; }
.rings { position: sticky; inset-block-start: 96px; margin: 0; inline-size: 100%; max-inline-size: 380px; justify-self: center; aspect-ratio: 1; }
.rings svg { inline-size: 100%; block-size: auto; overflow: visible; transform: rotate(-90deg); }
.ring { fill: none; stroke: var(--accent-2); stroke-width: 2.2; }
.ring:nth-child(odd) { stroke: var(--accent); }
.rings__mark { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 56px; block-size: auto; transform: translate(50%, -50%); transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
.sc-ready.motion .ring { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.sc-ready.motion .ring:not(.closed) { stroke: var(--line-strong); }
.sc-ready.motion .rings:not(.done) .rings__mark { opacity: 0; transform: translate(50%, -50%) scale(.9); }
.sc-ready.motion .a-build__grid:not(.done) .a-build__gate { color: var(--ink-soft); }
.sc-ready.motion .lenses li.lit b { color: var(--accent); }

/* ---------- principles: large leads, small bodies ---------- */
.a-principles { padding-block: var(--chapter-pad); background: var(--ground-2); border-block-start: 1px solid var(--line); }
.a-principles__h { font-size: var(--t-sm); font-weight: 700; color: var(--accent-2); margin-block-end: var(--s-7); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) clamp(32px, 6vw, 96px); }
.principles p { color: var(--ink-soft); max-width: 30em; overflow-wrap: anywhere; }
.principles p:first-child { grid-column: 1 / -1; max-width: 40em; }
.principles b { display: block; font-size: var(--t-2xl); font-weight: 800; line-height: 1.08; letter-spacing: var(--track-tight); color: var(--ink); margin-block-end: var(--s-3); }

/* ---------- contact + documents ---------- */
.a-contact { padding-block: var(--s-10); background: var(--canvas); }
.a-contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8) clamp(32px, 6vw, 96px); }
.a-contact h2 { font-size: var(--t-xl); font-weight: 800; margin-block-end: var(--s-4); }
.a-contact ul { padding-inline-start: 1.2em; color: var(--ink-soft); }
.a-contact li { margin-block-end: var(--s-2); overflow-wrap: anywhere; }
.a-contact li::marker { color: var(--accent-2); }
.a-contact p { color: var(--ink-soft); }

/* ---------- close: the quietest setting on the page ---------- */
.a-close { padding-block: var(--s-9) var(--s-8); background: var(--canvas); border-block-start: 1px solid var(--line); }
.a-close__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.a-close__av { inline-size: 88px; block-size: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.a-close__links { font-size: var(--t-sm); color: var(--ink-mute); }
.a-close__links a { color: var(--accent); text-decoration: underline; font-weight: 700; display: inline-block; padding-block: 10px; }
.a-close .fine { margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--ink-mute); max-width: 44em; }

@media (max-width: 899.98px) {
  .a-why__grid, .a-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .a-why__side { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
  .a-why__side h2 { padding-block-end: var(--s-2); }
  .pool { margin: 0; inline-size: 132px; flex: none; }
  .a-build__grid { grid-template-columns: minmax(0, 1fr) 84px; gap: var(--s-4); }
  .rings { inset-block-start: 16px; max-inline-size: 84px; grid-column: 2; grid-row: 1; }
  .rings__mark { inline-size: 18px; }
  .ring { stroke-width: 6; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .principles b { font-size: var(--t-xl); }
}
@media (max-width: 600px) {
  .line__a, .line__b { font-size: 17vw; white-space: normal; }
}