/* Layout: chapters. Promoted from the approved prototype. */
body { background: #0c0c0f; color: #f1f0ec; }
.lay-chapters .nav { background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--ink); }
.chp { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 14vh var(--pad); overflow: hidden; }
.chp h1, .chp h2 { margin: 0; font: 900 clamp(48px, 12.5vw, 220px)/.82 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.055em; }
.chp-hero { padding-top: 16vh; }
.chp-hero .wl-wall { position: absolute; inset: 0; z-index: 0; margin: 0; border: 0; border-radius: 0; background: transparent; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; padding: 8px; opacity: .55; align-content: stretch; pointer-events: auto; }
.chp-hero .wl-tile:hover, .chp-hero .wl-tile[aria-current="true"] { transform: scale(1.6); box-shadow: 0 0 0 3px #fff; }
.chp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c0c0f 8%, transparent 70%), linear-gradient(0deg, #0c0c0f 0%, transparent 35%); pointer-events: none; z-index: 1; }
.chp-hero .in { position: relative; z-index: 2; pointer-events: none; } .chp-hero .in a { pointer-events: auto; }
.chp-hero em { font-style: normal; color: var(--accent); } .chp-hero p { max-width: 40ch; margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 21px); color: #b9bbc2; }
.chp-red { background: var(--accent-fill); color: #fff; }
.chp-red .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; } .chp-red b { display: block; font: 900 clamp(60px, 15vw, 260px)/.8 var(--display); font-stretch: 125%; letter-spacing: -.06em; font-variant-numeric: tabular-nums; } .chp-red span { display: block; margin-top: 14px; font: 500 clamp(12px, 1.2vw, 16px)/1.3 var(--mono); opacity: .85; max-width: 22ch; }
.chp-hs { position: relative; height: 420svh; } .chp-hs-in { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.chp-hs-track { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 8vw; will-change: transform; }
.chp-hs-lead { flex: none; width: min(46vw, 560px); } .chp-hs-lead h2 { font-size: clamp(40px, 7vw, 110px); } .chp-hs-lead p { color: #b9bbc2; max-width: 34ch; margin: 22px 0 0; }
.chp-hs-track figure { margin: 0; flex: none; width: clamp(190px, 21vw, 290px); } .chp-hs-track figcaption { margin-top: 12px; font-size: 14px; } .chp-hs-track figcaption b { display: block; font-size: 16px; } .chp-hs-track figcaption a { color: var(--brand-soft); } .chp-hs-track figcaption { color: #9a9ca5; }
.chp-hs-bar { position: absolute; left: 8vw; right: 8vw; bottom: 5vh; height: 2px; background: rgba(255,255,255,.14); } .chp-hs-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.chp-demo { background: #14151a; } .chp-demo .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, .9fr); gap: 4vw; align-items: center; } .chp-demo h2 { font-size: clamp(40px, 7vw, 120px); } .chp-demo .wl-phone { width: clamp(200px, 20vw, 280px); } .chp-demo .wl-code { font-size: 12px; } .chp-demo p { color: #b9bbc2; max-width: 36ch; margin: 22px 0 0; }
.chp-end { background: #f4f3ef; color: #141414; } .chp-end h2 { font-size: clamp(44px, 10vw, 170px); } .chp-end h2 em { font-style: normal; color: var(--accent); } .chp-end a.big { display: inline-block; margin-top: 4vh; font: 700 clamp(18px, 3vw, 44px)/1.1 var(--sans); color: inherit; text-underline-offset: 8px; }
@media (max-width: 860px) { .chp-red .row { grid-template-columns: 1fr; } .chp-demo .grid { grid-template-columns: 1fr; justify-items: start; } .chp-hs { height: auto; } .chp-hs-in { position: relative; height: auto; overflow-x: auto; padding: 8vh 0; } .chp-hs-lead { width: 80vw; } .chp-hs-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .chp-hs { height: auto; } .chp-hs-in { position: relative; height: auto; overflow-x: auto; padding: 8vh 0; } .chp-hs-bar { display: none; } }

/* slab kinds shared by the chapter pages */
.lay-chapters .lay-foot { background: #f4f3ef; margin: 0; max-width: none; padding-bottom: 12px; } .lay-chapters .lay-foot .foot { margin: 0 auto; max-width: var(--max); }
.lay-chapters .lay-main > .chp:first-child { padding-top: 18vh; }
.chp-plain { min-height: 92svh; background: radial-gradient(90% 70% at 85% 10%, #2a1614 0%, #0c0c0f 60%); }
.chp .crumbs { margin: 0 0 18px; color: #8d8f98; } .chp .crumbs a:hover { color: #fff; }
.chp-plain h1 { font-size: clamp(44px, 9.4vw, 160px); margin-top: 22px; } .chp-plain p { max-width: 46ch; margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 21px); color: #b9bbc2; }
.chp-red .row b { font-size: clamp(44px, 8.6vw, 150px); } .chp-red .row b i { font-style: normal; }
.chp-dark { background: #0c0c0f; } .chp-demo { background: #14151a; }
.chp .stack { display: grid; gap: clamp(22px, 4vw, 48px); } .chp .stack h2 { font-size: clamp(40px, 8vw, 130px); }
.chp-paper { background: #f4f3ef; color: #141414; }
.chp .cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.chp .cols h2 { font-size: clamp(36px, 6vw, 96px); position: sticky; top: 14vh; }
.chp .big { margin: 0 0 22px; font: 500 clamp(20px, 2.4vw, 34px)/1.3 var(--sans); letter-spacing: -.01em; }
.chp .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.chp .rows li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); font: 500 clamp(17px, 1.9vw, 26px)/1.35 var(--sans); }
.chp .rows li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.chp .rows li span { font: 500 13px/2.4 var(--mono); color: var(--accent); }
.chp .rows code { font-family: var(--mono); font-size: .86em; color: #e8c07a; }
.chp-code { background: #0c0c0f; } .chp-code pre.cmd { margin: 0; padding: clamp(18px, 3vw, 40px); background: #14151a; border: 1px solid rgba(255,255,255,.1); font-size: clamp(12.5px, 1.5vw, 19px); line-height: 1.9; border-radius: 16px; }
.chp-end .sub { margin: 22px 0 0; max-width: 46ch; color: #5b5a55; } .chp-end .sub a { color: inherit; }
.chp-end .more { margin-top: 6vh; border-top: 1px solid rgba(20,20,20,.18); } .chp-end .more a { color: #141414; }
.chp-demo .dm-cap { color: #8d8f98; }
@media (max-width: 860px) { .chp .cols { grid-template-columns: 1fr; } .chp .cols h2 { position: static; } .chp .rows li { grid-template-columns: 38px 1fr; } }
.chp-red { min-height: 72svh; }
.chp-red .row b { font-size: clamp(34px, 5.9vw, 104px); white-space: nowrap; }
.chp-red .row span { max-width: 30ch; }
.chp .dm-cap { max-width: 80ch; }

/* About */
.chp-paper .cols .sticky { position: sticky; top: 14vh; } .chp-paper .cols .sticky h2 { position: static; } .chp-paper .cols .sticky p { color: #5b5a55; margin-top: 18px; }
.chp-paper .rows li { border-color: rgba(20,20,20,.2); } .chp-paper .rows li:last-child { border-color: rgba(20,20,20,.2); } .chp .rows li b { display: block; margin-bottom: 6px; font-size: 1.12em; } .chp .rows li div { color: inherit; opacity: .92; font-weight: 400; font-size: .86em; line-height: 1.5; } .chp-paper .rows a { color: var(--accent); }
.chp .rows.ledger li { grid-template-columns: 150px 1fr; } .chp .rows.ledger li span { font: 500 13px/1.7 var(--mono); color: var(--accent); }
.chp-skills h2 { font-size: clamp(36px, 6vw, 96px); margin-bottom: 4vh; }
.chp .cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1em .5em; font: 900 clamp(26px, 5.4vw, 92px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.04em; }
.chp .cloud li::after { content: " /"; opacity: .45; }
.chp .cloud li:last-child::after { content: ""; }
.chp .langs { margin: 5vh 0 0; font: 500 clamp(13px, 1.4vw, 18px)/1.6 var(--mono); max-width: none; } .chp .langs i { font-style: normal; opacity: .5; margin: 0 .4em; }
.chp-demo .ab-photo { min-height: 360px; }
@media (max-width: 860px) { .chp-paper .cols .sticky { position: static; } .chp .rows.ledger li { grid-template-columns: 1fr; gap: 4px; } }
/* About hero: the route map along the bottom */
.chp-hero.chp-plain:has(.route) { padding-top: 14vh; padding-bottom: 0; min-height: 0; align-content: start; gap: 4vh; }
.route { position: relative; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
.route-cap { margin: 0; padding-top: 3vh; border-top: 1px solid rgba(255,255,255,.12); max-width: none; font: 500 13px/1.5 var(--mono); color: #b9bbc2; }
.rt-svg { display: block; width: 100%; height: auto; max-height: 38svh; margin-top: 6px; overflow: visible; }
.rt-grat line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.rt-arc { fill: none; stroke: url(#rtG); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 8; opacity: 1; animation: rt-flow 1.4s linear infinite; animation-delay: calc(var(--d) * -.3s); }
@keyframes rt-flow { to { stroke-dashoffset: -20; } }
.rt-pin circle { fill: #fff; } .rt-pin .ring { fill: none; stroke: rgba(241,240,236,.55); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: rt-ping 2.6s ease-out infinite; animation-delay: calc(var(--d, 0) * .45s); }
.rt-home circle:not(.ring) { fill: var(--brand-bright); } .rt-home .ring { stroke: var(--brand-bright); }
@keyframes rt-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.rt-lab { font: 500 13px var(--mono); fill: #d9dbe1; letter-spacing: .02em; } .rt-lab-home { fill: #fff; font-weight: 700; }
@media (max-width: 860px) { .rt-svg { max-height: none; } .rt-lab { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .rt-arc, .rt-pin .ring { animation: none; } .rt-pin .ring { opacity: .4; } }
.chp-plain::after { display: none; }

/* closing slab is always paper: its cards must not inherit the dark theme (they showed dark text on dark cards) */
.chp-end .more li a { background: #fbfaf7; border-color: rgba(20,20,20,.16); color: #141414; }
.chp-end .more li a:hover { border-color: #141414; }
.chp-end .more li span { color: #5b5a55; }

/* slabs that are always paper must carry light-theme tokens, whatever theme the visitor picked (fixes red numerals and footer links in dark mode) */
.chp-paper, .chp-end, .lay-chapters .lay-foot { --bg: #f4f3ef; --card: #fbfaf7; --ink: #141414; --muted: #5b5a55; --line: rgba(20,20,20,.14); --line-2: rgba(20,20,20,.28); --accent: var(--brand-text); color-scheme: light; }
.lay-chapters .lay-foot, .lay-chapters .lay-foot .foot, .lay-chapters .lay-foot .foot a { color: #4a4944; }
.lay-chapters .lay-foot .foot a:hover { color: #141414; }
.chp-paper .rows li span, .chp-paper .rows a { color: var(--brand-deep); }
/* always-dark slabs use the bright red; always-paper slabs use the deep red (set above) */
.chp-plain, .chp-dark, .chp-demo, .chp-code, .chp-hero { --accent: var(--brand-bright); }