/* Who I am, under the landing (M), 2026-10-09 (he: "now we need to build the about section").
   His own words, word for word (he: "use my version", 2026-10-07); nothing added to them, no photo.
   The idea: the landing says "I build websites, teams, systems, what's next"; his story is where those
   words come from. Read it down and they light up inside it, each in its landing colour and its own motion
   (web development blue, teams tan, systems sky mono, next chapter green). m-about.js drives it. */
.about { position: relative; z-index: 2; margin-top: 100vh; margin-top: 100svh; padding: 15vh 32px 12vh; overflow-x: clip; color: var(--white); }

/* the first line, sized like "I build", its words drop in the same way */
.a-lead { margin: 0; max-width: 12.6em; font-weight: 800; font-size: clamp(40px, 7.1vw, 132px); line-height: .98; letter-spacing: -.035em; font-variation-settings: 'opsz' 96; font-kerning: none; }
.a-lead .lw { display: inline-block; transform-origin: 50% 100%; }

/* the story, big enough to read across the screen, set to the right of the first line */
.a-story { margin: 20vh 0 0 auto; width: min(66vw, 1100px); font-weight: 500; font-size: clamp(22px, 2.85vw, 50px); line-height: 1.2; letter-spacing: -.02em; font-variation-settings: 'opsz' 48; }
.a-story p { margin: 0 0 .9em; }
.a-story p:last-child { margin-bottom: 0; }

/* the last line, back to the left, larger */
.a-coda { margin: 24vh 0 0; max-width: 16.5em; font-weight: 700; font-size: clamp(30px, 4.7vw, 88px); line-height: 1.03; letter-spacing: -.03em; font-variation-settings: 'opsz' 96; }

/* the landing's words inside the story: their fonts are set from the start so nothing reflows when they light */
.kw { display: inline-block; white-space: nowrap; }
.kw .ch { display: inline-block; transform-origin: 50% 100%; }
.kw[data-k="web"], .kw[data-k="teams"] { font-weight: 800; }
.kw[data-k="systems"] { font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: .84em; letter-spacing: -.03em; }
.kw[data-k="next"] { font-family: 'Saira', sans-serif; font-weight: 800; font-stretch: 108%; }
.num { display: inline-block; text-align: center; }
.nw { white-space: nowrap; }

/* dim until read (only once the script runs: without it everything reads at full strength) */
.ab-on .about .wd, .ab-on .about .kw, .ab-on .about .num, .ab-on .about .ico { opacity: .16; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phones, one column: the gaps halved (he, 2026-10-10: "it has empty spaces for no need, on pc they look good but on
   phone its bad"); the desktop's gaps sit beside the other column, on a phone they were holes of 80 to 130 px */
@media (max-width: 760px) {
  .about { padding: 13vh 18px 4vh; }
  .a-story { margin-top: 6vh; width: 100%; }
  .a-coda { margin-top: 8vh; }
}

/* icons in the type (glyphs.js, after gsap.com, he: "use them as letters also"; 2026-10-09) */
.a-lead .lc { display: inline-block; position: relative; }
.a-lead .lt { display: inline-block; position: relative; z-index: 0; transform-origin: 50% 80%; }
.a-lead .stand { position: absolute; left: 50%; top: 50%; width: .62em; height: .62em; margin: -.36em 0 0 -.31em; pointer-events: none; visibility: hidden; }
.a-lead .crown { position: absolute; z-index: -1; width: .9em; height: .9em; pointer-events: none; transform-origin: 50% 70%; }
.stand svg, .crown svg, .ico svg, .spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ico { display: inline-block; width: .82em; height: .82em; vertical-align: -.1em; transform-origin: 50% 50%; }
.di { display: inline-block; position: relative; }
.a-coda { position: relative; }
.spark-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spark-trail path { fill: none; stroke: #ec0b8d; stroke-width: 3; stroke-linecap: round; }
.spark { position: absolute; left: 0; top: 0; pointer-events: none; }