/* ==========================================================================
   SPINE — "A Monograph in Four Chapters"
   Shared design system for all 5 pages. Loaded AFTER global.css.
   Theme engine: ~15 CSS custom properties, overridden per page via
   <html data-chapter="cover|counselling|technology|project|education">.
   ========================================================================== */

:root {
    --paper: #FAF7F2;
    --paper-soft: #F1ECE3;
    --ink: #16161A;
    --ink-soft: #4A4A52;
    --hairline: rgba(22, 22, 26, .14);
    --hairline-inv: rgba(250, 247, 242, .16);
    --accent: #B8965A;
    --accent-deep: #96793F;
    --accent-soft: rgba(184, 150, 90, .12);
    --gold: #B8965A;
    --gold-bright: #D4B274;
    --grain-opacity: .03;
    --measure: 66ch;
    --pad-section: clamp(28px, 3vw, 48px);
    --dur-enter: .9s;
    --dur-struct: .75s;
    --dur-micro: .3s;
}

/* Chapter inks — vivid legacy hue as atmosphere (--accent), deepened cut for
   body-size text (--accent-deep). Each chapter also re-tints its paper. */
html[data-chapter="counselling"] {
    --accent: #F97316; --accent-deep: #9A3D0C; --accent-soft: rgba(249, 115, 22, .10);
    --paper: #FAF6F1; --paper-soft: #F3EBE2;
}
html[data-chapter="technology"] {
    /* The Builder works at night — dark phosphor chapter */
    --paper: #0A0F0E; --paper-soft: #111917;
    --ink: #E9F4F1; --ink-soft: #93ACA6;
    --hairline: rgba(233, 244, 241, .14);
    --hairline-inv: rgba(10, 15, 14, .25);
    --accent: #2DD4BF; --accent-deep: #5EEAD4; --accent-soft: rgba(45, 212, 191, .10);
    --grain-opacity: .05;
}
html[data-chapter="project"] {
    --accent: #E11D48; --accent-deep: #9F1437; --accent-soft: rgba(225, 29, 72, .08);
    --paper: #F8FAFC; --paper-soft: #EEF2F6;
}
html[data-chapter="education"] {
    --accent: #10B981; --accent-deep: #1F6B4D; --accent-soft: rgba(16, 185, 129, .10);
    --paper: #FDFAF0; --paper-soft: #F6F0DD;
}
html[data-chapter="cover"]       { --accent: #B8965A; --accent-deep: #96793F; --accent-soft: rgba(184, 150, 90, .12); }

/* ---------------------------------------------------------------------------
   Chapter atmosphere — each chapter carries its own weather (fixed, behind
   content). Counselling breathes warm; project is a blueprint; education has
   emerald washes; technology glows phosphor.
--------------------------------------------------------------------------- */
html[data-chapter="counselling"] body::before,
html[data-chapter="project"] body::before,
html[data-chapter="education"] body::before,
html[data-chapter="technology"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
html[data-chapter="counselling"] body::before {
    background:
        radial-gradient(640px 520px at 82% 12%, rgba(249, 115, 22, .12), transparent 70%),
        radial-gradient(720px 560px at 8% 78%, rgba(214, 211, 209, .35), transparent 70%);
}
html[data-chapter="project"] body::before {
    background-image:
        radial-gradient(700px 520px at 88% 6%, rgba(225, 29, 72, .07), transparent 70%),
        linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}
html[data-chapter="education"] body::before {
    background:
        radial-gradient(640px 520px at 86% 10%, rgba(16, 185, 129, .12), transparent 70%),
        radial-gradient(720px 560px at 6% 84%, rgba(45, 212, 191, .08), transparent 70%);
}
html[data-chapter="technology"] body::before {
    background:
        radial-gradient(720px 560px at 80% 8%, rgba(45, 212, 191, .08), transparent 70%),
        radial-gradient(640px 520px at 10% 86%, rgba(128, 100, 162, .07), transparent 70%);
}

/* ---------------------------------------------------------------------------
   Base surfaces
--------------------------------------------------------------------------- */
html[data-chapter] body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(18px, 1.05vw, 20px);
    line-height: 1.65;
}
html[data-chapter="cover"] body {
    background: var(--ink);
    color: var(--paper);
}
html[data-chapter] ::selection {
    background: var(--accent);
    color: var(--paper);
}

/* Paper grain — one tiled base64 PNG, fixed overlay */
html[data-chapter] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/png;base64,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");
    background-size: 64px 64px;
}
html[data-chapter="cover"] body::after {
    opacity: .05;
    mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------------------- */
.spine-container {
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.spine-section {
    padding-block: var(--pad-section);
    position: relative;
    scroll-margin-top: 96px;
}
.prose-measure { max-width: var(--measure); }

.hairline { border: 0; border-top: 1px solid var(--hairline); }
html[data-chapter="cover"] .hairline { border-top-color: var(--hairline-inv); }

/* ---------------------------------------------------------------------------
   Typography
--------------------------------------------------------------------------- */
.display-xl, .display-l, .display-m, .chapter-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.display-xl { font-size: clamp(2.75rem, 9vw, 9rem); line-height: 1.02; }
.display-l  { font-size: clamp(2.25rem, 6vw, 5.5rem); line-height: 1.05; }
.display-m  { font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.1; }

.pullquote {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.6rem, 3.2vw, 2.75rem);
    line-height: 1.3;
}

.kicker {
    font-family: 'Space Grotesk', monospace;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
html[data-chapter="cover"] .kicker { color: rgba(250, 247, 242, .65); }
.kicker .tick { color: var(--accent); margin-right: .5em; }

.caption {
    font-family: 'Space Grotesk', monospace;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
}

html[data-chapter] .body-small { font-size: clamp(17px, 1vw, 19px); line-height: 1.65; }

.ink-soft { color: var(--ink-soft); }
.accent { color: var(--accent); }
.accent-deep { color: var(--accent-deep); }
.serif-italic { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; }

/* Ghost chapter numeral */
.ghost-numeral {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(8rem, 18vw, 22rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
    opacity: .35;
    pointer-events: none;
    user-select: none;
    position: absolute;
}

/* ---------------------------------------------------------------------------
   Section header assembly
--------------------------------------------------------------------------- */
.section-head { position: relative; margin-bottom: clamp(24px, 3.5vh, 40px); }
.section-head .section-rule {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 0 0 14px;
}
html[data-chapter="cover"] .section-head .section-rule { border-top-color: var(--hairline-inv); }
.section-head .kicker { display: block; margin-bottom: clamp(12px, 2vh, 20px); }
.standfirst {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: var(--measure);
    margin-top: 1.25rem;
}
html[data-chapter="cover"] .standfirst { color: rgba(250, 247, 242, .7); }

/* ---------------------------------------------------------------------------
   Plates (image / figure frames)
--------------------------------------------------------------------------- */
.plate {
    border: 1px solid var(--hairline);
    overflow: hidden;
    background: var(--paper-soft);
}
.plate.ratio-45 { aspect-ratio: 4 / 5; }
.plate.ratio-32 { aspect-ratio: 3 / 2; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-figure { margin: 0; }
.plate-figure figcaption { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Letter card (testimonials / impact stories)
--------------------------------------------------------------------------- */
.letter-card {
    background: var(--paper-soft);
    border: 1px solid var(--hairline);
    padding: clamp(24px, 3vw, 40px);
    position: relative;
}
html[data-chapter="cover"] .letter-card {
    background: rgba(250, 247, 242, .04);
    border-color: var(--hairline-inv);
}
.letter-card .letter-from {
    font-family: 'Space Grotesk', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--hairline);
}
html[data-chapter="cover"] .letter-card .letter-from {
    color: rgba(250, 247, 242, .6);
    border-bottom-color: var(--hairline-inv);
}
.letter-card .letter-excerpt {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.5;
}
.letter-card .letter-seal {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}
.letter-card .letter-avatar {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------------
   Ledger rows (timelines)
--------------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--hairline); }
.ledger-row {
    border-bottom: 1px solid var(--hairline);
    padding-block: clamp(20px, 3vh, 32px);
}
.ledger-row .ledger-year {
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    letter-spacing: .1em;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}
.ledger-row .ledger-role {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.2;
}
details.ledger-row > summary {
    cursor: pointer;
    list-style: none;
}
details.ledger-row > summary::-webkit-details-marker { display: none; }
details.ledger-row > summary .ledger-chevron {
    transition: transform var(--dur-micro) ease;
    color: var(--accent);
}
details.ledger-row[open] > summary .ledger-chevron { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   Editorial links / buttons (no pills)
--------------------------------------------------------------------------- */
.link-editorial {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: 'Space Grotesk', monospace;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    text-decoration: none;
    background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
    background-repeat: no-repeat;
    background-position: left calc(100% - 0px);
    background-size: 0% 1px;
    padding-bottom: 4px;
    transition: background-size var(--dur-micro) ease;
}
.link-editorial:hover, .link-editorial:focus-visible { background-size: 100% 1px; }
html[data-chapter="cover"] .link-editorial { color: var(--gold-bright); background-image: linear-gradient(var(--gold-bright), var(--gold-bright)); }

/* Accent bar (scrubbed scaleX) */
.accent-bar {
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
}

/* ---------------------------------------------------------------------------
   Counters
--------------------------------------------------------------------------- */
.stat-value {
    font-family: 'Space Grotesk', monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    color: var(--ink);
}
.stat-caption {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Navbar restyle layer (zero edits to navbar.js — CSS only)
--------------------------------------------------------------------------- */
html[data-chapter] #navbar { border-bottom: 1px solid transparent; }
html[data-chapter] #navbar.shadow-lg {
    box-shadow: none !important;
    border-bottom-color: var(--hairline);
    background-color: color-mix(in srgb, var(--paper) 94%, transparent) !important;
}
html[data-chapter="cover"] #navbar.shadow-lg {
    border-bottom-color: var(--hairline-inv);
    background-color: color-mix(in srgb, var(--ink) 94%, transparent) !important;
}
html[data-chapter] #navbar .navbar-inner > div > a:not(:first-child),
html[data-chapter] #navbar .navbar-inner a[href$=".html"]:not([href="index.html"]),
html[data-chapter] #navbar #mobile-menu a {
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html[data-chapter] #navbar .rounded-lg { border-radius: 0 !important; }

/* Running header (added per page above navbar, desktop only) */
.running-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    font-family: 'Space Grotesk', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
    padding-top: 4px;
    pointer-events: none;
    display: none;
}
@media (min-width: 1024px) { .running-header { display: block; } }
html[data-chapter="cover"] .running-header { color: rgba(250, 247, 242, .45); }

/* ---------------------------------------------------------------------------
   Colophon footer
--------------------------------------------------------------------------- */
.colophon {
    border-top: 1px solid var(--hairline);
    padding-block: clamp(56px, 8vh, 96px) 32px;
}
html[data-chapter="cover"] .colophon { border-top-color: var(--hairline-inv); }
.colophon .colophon-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.15;
}
.colophon .colophon-cols {
    display: grid;
    gap: clamp(28px, 4vw, 64px);
    grid-template-columns: 1fr;
    margin-top: clamp(32px, 5vh, 56px);
}
@media (min-width: 768px) { .colophon .colophon-cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.colophon .colophon-fine {
    margin-top: clamp(40px, 6vh, 64px);
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
    font-family: 'Space Grotesk', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
}
html[data-chapter="cover"] .colophon .colophon-fine { border-top-color: var(--hairline-inv); color: rgba(250,247,242,.55); }
.colophon a { color: inherit; }

/* ---------------------------------------------------------------------------
   Chapter dock (mobile, facet pages only)
--------------------------------------------------------------------------- */
.chapter-dock {
    position: fixed;
    right: 10px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
@media (min-width: 768px) { .chapter-dock { display: none; } }
.chapter-dock a {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
}
.chapter-dock a span {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--dock-ink, var(--accent));
    background: transparent;
    transition: background var(--dur-micro) ease;
}
.chapter-dock a[aria-current="page"] span { background: var(--dock-ink, var(--accent)); }
.chapter-dock a[data-ink="sienna"]  { --dock-ink: #C2571B; }
.chapter-dock a[data-ink="tealink"] { --dock-ink: #0F766E; }
.chapter-dock a[data-ink="oxblood"] { --dock-ink: #9F1F45; }
.chapter-dock a[data-ink="moss"]    { --dock-ink: #2F6B4F; }

/* ---------------------------------------------------------------------------
   Gadgets (injected by motion.js — zero per-page markup)
--------------------------------------------------------------------------- */
#spine-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 2147483500;
    pointer-events: none;
}
.hk-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hk-clock .clock-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: .5em;
    vertical-align: 1px;
    animation: clock-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hk-clock .clock-dot { animation: none; } }
@keyframes clock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.copy-email-btn {
    font-family: 'Space Grotesk', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    border: 1px solid var(--hairline);
    background: transparent;
    padding: 6px 12px;
    margin-left: 12px;
    cursor: pointer;
    transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease;
    min-height: 32px;
}
html[data-chapter="cover"] .copy-email-btn { border-color: var(--hairline-inv); color: var(--gold-bright); }
.copy-email-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.copy-email-btn.copied { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------------
   Chapter cursors (injected by cursor.js — fine pointers, motion-OK only)
--------------------------------------------------------------------------- */
#spine-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483520;
    opacity: 0;
    transition: opacity .25s ease, width .18s ease, height .18s ease, border-radius .18s ease;
    will-change: transform;
}
html[data-chapter="cover"] #spine-cursor { border-color: var(--gold-bright); }
#spine-cursor.bracketed {
    border-radius: 0;
    border: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top left / 12px 1.5px,
        linear-gradient(var(--accent), var(--accent)) top left / 1.5px 12px,
        linear-gradient(var(--accent), var(--accent)) top right / 12px 1.5px,
        linear-gradient(var(--accent), var(--accent)) top right / 1.5px 12px,
        linear-gradient(var(--accent), var(--accent)) bottom left / 12px 1.5px,
        linear-gradient(var(--accent), var(--accent)) bottom left / 1.5px 12px,
        linear-gradient(var(--accent), var(--accent)) bottom right / 12px 1.5px,
        linear-gradient(var(--accent), var(--accent)) bottom right / 1.5px 12px;
    background-repeat: no-repeat;
}
.cursor-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483510;
    opacity: 0;
    transition: opacity .3s ease;
}
canvas.cursor-layer { opacity: 1; }
.cursor-warmth {
    inset: auto;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(249, 115, 22, .13), rgba(249, 115, 22, 0) 65%);
    border-radius: 50%;
    mix-blend-mode: multiply;
    will-change: transform;
}
/* the zen garden canvas sits behind all content, above the paper */
canvas.cursor-sand {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
.crosshair-x, .crosshair-y {
    position: absolute;
    background: rgba(225, 29, 72, .25);
    will-change: transform;
}
.crosshair-x { left: 0; right: 0; top: 0; height: 1px; }
.crosshair-y { top: 0; bottom: 0; left: 0; width: 1px; }
.crosshair-readout {
    position: absolute;
    top: 0; left: 0;
    font-family: 'Space Grotesk', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--accent-deep);
    will-change: transform;
}

/* ---------------------------------------------------------------------------
   Focus + a11y
--------------------------------------------------------------------------- */
html[data-chapter] :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Reveal initial states (GSAP takes over; reduced-motion shows final state)
--------------------------------------------------------------------------- */
/* Content is visible by default. Only successful JS setup supplies reveal states. */
html main { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html[data-chapter] *, html[data-chapter] *::before, html[data-chapter] *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal-lines] { visibility: visible !important; }
    .plate-reveal { opacity: 1 !important; transform: none !important; }
}

/* Reading density: larger supporting text and less unused section height. */
html[data-chapter]:not([data-chapter="cover"]) main > .spine-section:first-child {
    min-height: auto;
    padding-top: 112px;
}
html[data-chapter] :where(main, .colophon) .text-xs { font-size: 14px; line-height: 1.55; }
html[data-chapter] :where(main, .colophon) .text-sm { font-size: 16px; line-height: 1.6; }
html[data-chapter] :where(main, .colophon) .text-base { font-size: 18px; line-height: 1.6; }
html[data-chapter] main :is(.mt-16, .mt-20, .mt-24) { margin-top: 40px; }
html[data-chapter] main :is(.mb-16, .mb-20, .mb-24) { margin-bottom: 40px; }
html[data-chapter] #navbar .navbar-inner { width: 100%; max-width: 1680px; }
html[data-chapter] #navbar #mobile-menu a { font-size: 16px; min-height: 44px; display: flex; align-items: center; }
#dial-stage > .spine-container { min-height: 640px; }
@media (max-width: 767px) {
    html[data-chapter] main :is(.mt-16, .mt-20, .mt-24) { margin-top: 28px; }
    html[data-chapter] main :is(.mb-16, .mb-20, .mb-24) { margin-bottom: 28px; }
}

#ecosystem { scroll-margin-top: 96px; }

/* The header menu provides the same facet links without covering phone content. */
@media (max-width: 767px) { .chapter-dock { display: none; } }

/* Touch, short screens and reduced motion use the same readable workflow cards. */
#dial-stage { display: none; }
#workflow-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 700px) { #workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (min-height: 700px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .motion-ready #dial-stage { display: block; }
    .motion-ready #workflow-steps { display: none; }
}
#memoir-stage:not(.memoir-live) .memoir-beat + .memoir-beat { margin-top: 32px; }