/* Hallmark custom: Depthbyte’s sequential dives as a typographic descent; system sans and monospace; bundled curriculum facts only; committed dark field. */
/* Critique: A decorative depth scale could imply unexplained milestones, so the scale uses only the supplied first increment and total depth. */
:root{--color-field:oklch(18% 0.018 225);--color-field-deep:oklch(14% 0.016 225);--color-surface:oklch(23% 0.02 225);--color-ink:oklch(94% 0.012 90);--color-muted:oklch(80% 0.014 90);--color-rule:oklch(49% 0.023 225);--color-accent:oklch(83% 0.14 85);--color-accent-ink:oklch(19% 0.025 85);--color-focus:oklch(85% 0.16 85);--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-measure:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:9rem;--measure:74rem;--reading:68ch;--radius:0.25rem;--text-display:clamp(3.4rem,7vw,6.5rem);--text-section:clamp(2rem,4vw,3.75rem)}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--color-field);color:var(--color-ink);font-family:var(--font-body);font-synthesis:none}
body{margin:0;font-size:1rem;line-height:1.6}
a{color:inherit;text-decoration-thickness:0.08em;text-underline-offset:0.2em}
a:hover{color:var(--color-accent)}
a:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.container{width:min(calc(100% - 2 * var(--space-lg)),var(--measure));margin-inline:auto}
.site-header{border-bottom:1px solid var(--color-rule)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-lg)}
.brand{font-size:1.25rem;font-weight:700;letter-spacing:-0.03em;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);font-size:0.9375rem}
nav a{display:inline-flex;align-items:center;min-height:2.75rem}
main{display:block}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-0.03em;text-wrap:balance;overflow-wrap:break-word;min-width:0}
h1{max-width:13ch;font-size:var(--text-display)}
h2{max-width:20ch;font-size:var(--text-section)}
h3{font-size:1.35rem;line-height:1.2}
p{max-width:var(--reading);margin:0;text-wrap:pretty}
p+p{margin-top:var(--space-md)}
.hero{padding-block:var(--space-3xl) var(--space-4xl)}
.hero p{max-width:42ch;margin-top:var(--space-lg);font-size:clamp(1.125rem,2vw,1.375rem);color:var(--color-muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;margin-top:var(--space-xl);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius);background:var(--color-accent);color:var(--color-accent-ink);font-weight:700;text-decoration:none}
.button:hover{background:var(--color-ink);color:var(--color-accent-ink)}
.depth-band{background:var(--color-surface);color:var(--color-ink)}
.depth-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:end;padding-block:var(--space-2xl)}
.depth-figure{font-family:var(--font-measure);font-size:clamp(3rem,8vw,7rem);font-weight:700;letter-spacing:-0.04em;line-height:1;white-space:nowrap}
.depth-copy{max-width:35ch;color:var(--color-ink)}
.depth-copy p+p{margin-top:var(--space-sm)}
.section{padding-block:var(--space-3xl)}
.section-heading{margin-bottom:var(--space-2xl)}
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl)}
.lesson-layout>p{font-size:1.2rem;color:var(--color-muted)}
.lesson-list{list-style:none;padding:0;margin:0}
.lesson-list li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-lg);border-top:1px solid var(--color-rule)}
.lesson-list li:last-child{border-bottom:1px solid var(--color-rule)}
.lesson-number{font-family:var(--font-measure);color:var(--color-accent)}
.lesson-list p{margin-top:var(--space-xs);color:var(--color-muted)}
.chart-section{background:var(--color-field-deep);color:var(--color-ink)}
.chart-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-3xl);align-items:start}
.chart-grid h2{max-width:13ch}
.chart-details{display:grid;gap:var(--space-xl)}
.chart-details p{margin-top:var(--space-sm);color:var(--color-muted)}
.closing{display:flex;justify-content:space-between;align-items:end;gap:var(--space-xl)}
.closing h2{max-width:16ch}
.closing p{margin-top:var(--space-lg);color:var(--color-muted)}
.closing .button{flex-shrink:0}
.document{padding-block:var(--space-3xl)}
.document h1{font-size:clamp(3rem,6vw,5rem);max-width:18ch}
.document-intro{margin-top:var(--space-lg);font-size:1.125rem;color:var(--color-muted)}
.document-body{max-width:var(--reading);margin-top:var(--space-2xl)}
.document-body section+section{margin-top:var(--space-xl)}
.document-body h2{font-size:1.5rem;line-height:1.2;letter-spacing:-0.02em;margin-bottom:var(--space-sm)}
.document-body p,.document-body li{color:var(--color-ink)}
.document-body ul{padding-left:var(--space-lg)}
.document-body li+li{margin-top:var(--space-xs)}
.site-footer{border-top:1px solid var(--color-rule);padding-block:var(--space-xl)}
.footer-inner{display:flex;justify-content:space-between;gap:var(--space-xl);align-items:start}
.footer-inner p{color:var(--color-muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg)}
.footer-links a{display:inline-flex;align-items:center;min-height:2.75rem}
@media(max-width:700px){.header-inner,.footer-inner,.closing{align-items:flex-start;flex-direction:column}.header-inner{gap:var(--space-sm)}nav{gap:var(--space-xs) var(--space-md)}.hero{padding-block:var(--space-2xl) var(--space-3xl)}.depth-inner,.lesson-layout,.chart-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.section,.document{padding-block:var(--space-2xl)}.section-heading{margin-bottom:var(--space-xl)}.closing .button{margin-top:0}.depth-figure{font-size:clamp(2.75rem,12vw,5rem)}}