/* ============================================================
   PORCHLIGHT — A Community Arts Collective
   2025 Annual Report · built on the One Eleven design system
   Brand layer: themeable signature color + dual type voice
   ============================================================ */

/* ---- Editorial serif companion (display + numerals) ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&display=swap');

/* ============================================================
   BRAND TOKENS — layered on top of the DS tokens
   ============================================================ */
:root {
  /* Ink + paper */
  --ink:        #3E83C4;   /* sky-blue — replaces navy as the foreground/heading ink.
                              Chosen to stay legible on BOTH cream paper and dark
                              panels/photos (navy vanished on dark areas). Pairs with amber. */
  --ink-soft:   #2B2E33;   /* darker charcoal — body text, high contrast */
  --ink-mute:   #545861;   /* darker muted — still clearly legible */
  --bg:         #FBFAF7;          /* warm paper — a hair warmer than DS paper */
  --bg-sunken:  #F4F1EA;          /* warm sunken */
  --bg-card:    #FFFFFF;
  --line-warm:  #E7E1D6;
  --navy-deep:  var(--navy-950);

  /* Signature (themeable) — default Porchlight Coral */
  --sig:        var(--coral-500);
  --sig-deep:   var(--coral-600);
  --sig-700:    var(--coral-700);
  --sig-soft:   var(--coral-100);
  --sig-tint:   var(--coral-50);
  --sig-glow:   rgba(255, 60, 29, 0.30);

  /* Secondary accents */
  --cool:       var(--teal-600);
  --cool-soft:  var(--teal-100);
  --gold:       var(--amber-500);
  --gold-soft:  var(--amber-100);

  /* Type voices (default = Editorial) */
  --display-font: "Newsreader", Georgia, "Times New Roman", serif;
  --num-font:     "Newsreader", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -0.018em;
  --display-italic: italic;     /* used on accent words */

  /* Scale for an editorial report (bigger than web defaults) */
  --d1: clamp(3.6rem, 11vw, 9.5rem);
  --d2: clamp(2.6rem, 6.2vw, 5.4rem);
  --d3: clamp(2rem, 4vw, 3.4rem);
  --num: clamp(3rem, 7vw, 6.5rem);

  --maxw: 1360px;
  --pad: clamp(1.4rem, 5.5vw, 6rem);
}

/* ---- Color themes (swap the signature) ---- */
[data-theme="amber"] {
  --sig: #E8A93C; --sig-deep: #C9871A; --sig-700: #9C6810;
  --sig-soft: #FAEFD6; --sig-tint: #FCF7EC; --sig-glow: rgba(232,169,60,.34);
}
[data-theme="teal"] {
  --sig: #2A7E90; --sig-deep: #1E6473; --sig-700: #154C58;
  --sig-soft: #DAF0F4; --sig-tint: #EEF8FA; --sig-glow: rgba(42,126,144,.28);
}

/* ---- Type voice: Modern (Brother for everything) ---- */
[data-type="modern"] {
  --display-font: "Brother 1816", system-ui, sans-serif;
  --num-font: "Brother 1816", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-italic: normal;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans-font, "Brother 1816", system-ui, sans-serif);
  overflow-x: hidden;
}

.report { position: relative; }

::selection { background: var(--sig); color: #fff; }

/* shared rhythm */
section { position: relative; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--text { max-width: 920px; }

.section-pad { padding-block: clamp(5rem, 12vh, 11rem); }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: var(--sans-font);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sig-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
}
.eyebrow::before { content:""; width: 28px; height: 2px; background: var(--sig); display:inline-block; }
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: var(--sig); }
.eyebrow--mute { color: var(--ink-mute); }
.eyebrow--mute::before { background: var(--ink-mute); }

/* ---- Display type ---- */
.display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 0.98;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.display em, .accent-word {
  font-style: var(--display-italic);
  color: var(--sig);
  font-weight: var(--display-weight);
}
.d1 { font-size: var(--d1); }
.d2 { font-size: var(--d2); }
.d3 { font-size: var(--d3); line-height: 1.04; }

.lead {
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 34ch;
  text-wrap: pretty;
}
.body { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-soft); }
.body p { margin: 0 0 1.1em; }
.body--cols { columns: 2; column-gap: 3rem; }
@media (max-width: 720px){ .body--cols { columns: 1; } }
.muted { color: var(--ink-mute); }
.kicker-num {
  font-family: var(--num-font);
  font-weight: var(--display-weight);
  color: var(--sig);
}

/* numerals get tabular feel where used as data */
.num { font-family: var(--num-font); font-weight: var(--display-weight); font-feature-settings: "lnum" 1; letter-spacing: -0.01em; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), color .4s;
  color: var(--ink);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line-warm);
}
.nav.on-dark { color: #fff; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: -0.02em; font-size: 1.12rem; color: inherit; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.nav__right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a { color: inherit; opacity: .72; font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 880px){ .nav__links { display: none; } }

/* ---- Buttons ---- */
.btn {
  --_bg: var(--sig); --_fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans-font); font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.74rem 1.3rem; border-radius: 999px; border: none; cursor: pointer;
  background: var(--_bg); color: var(--_fg);
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background .2s;
  box-shadow: 0 8px 22px var(--sig-glow);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--sig-glow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-warm); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.nav.on-dark .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.nav.on-dark .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }
.btn .arrow { transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   SPARK MOTIF (4-point star) + decorative
   ============================================================ */
.spark { position: absolute; color: var(--sig); pointer-events: none; opacity: .9; }
.ring-deco { position: absolute; border-radius: 50%; border: 1.5px solid currentColor; pointer-events:none; }

/* ============================================================
   COVER / HERO
   ============================================================ */
.cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(2rem, 6vh, 5rem); overflow: hidden; }
.cover__bg { position: absolute; inset: 0; z-index: 0; }
.cover__year {
  position: absolute; right: var(--pad); top: 14vh; z-index: 1;
  font-family: var(--num-font); font-weight: var(--display-weight);
  font-size: clamp(8rem, 30vw, 32rem); line-height: .8; color: var(--sig);
  letter-spacing: -0.04em; opacity: .14; user-select: none;
}
.cover__inner { position: relative; z-index: 3; }
.cover__title { font-size: var(--d1); }
.cover__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: clamp(1.6rem,3vw,2.6rem); align-items: flex-end; justify-content: space-between; }
.cover__sub { max-width: 40ch; font-size: clamp(1.05rem,1.6vw,1.35rem); line-height: 1.5; font-weight: 300; color: var(--ink-soft); }
.scrollcue { display:inline-flex; align-items:center; gap:.7rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-mute); font-weight:600; }
.scrollcue__dot { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-warm); display: grid; place-items: center; color: var(--sig); }
.scrollcue__dot svg { animation: bob 1.8s var(--ease-in-out) infinite; }
@keyframes bob { 0%,100%{ transform: translateY(-3px);} 50%{ transform: translateY(3px);} }
@media (prefers-reduced-motion: reduce){ .scrollcue__dot svg { animation: none; } }

/* ============================================================
   DARK PANEL (navy feature sections)
   ============================================================ */
.panel-dark { background: var(--navy-deep); color: #fff; }
.panel-dark .display { color: var(--ink); }
.panel-dark .body, .panel-dark .lead { color: rgba(255,255,255,.88); }
.panel-dark .muted { color: rgba(255,255,255,.66); }
.panel-dark .eyebrow { color: var(--sig); }
.panel-dark .hr { border-color: rgba(255,255,255,.16); }

.sunken { background: var(--bg-sunken); }

.hr { border: none; border-top: 1px solid var(--line-warm); margin: 0; }

/* ============================================================
   STAT COUNTERS
   ============================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem,4vw,4rem); }
@media (max-width: 900px){ .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .stats-grid { grid-template-columns: 1fr; } }
.stat { border-top: 2px solid currentColor; padding-top: 1.1rem; color: var(--ink); }
.stat__num { font-family: var(--num-font); font-weight: var(--display-weight); font-size: var(--num); line-height: .9; color: var(--sig); letter-spacing: -0.02em; display: flex; align-items: baseline; }
.stat__suf { font-size: .5em; margin-left: .08em; }
.stat__label { margin-top: .7rem; font-size: 0.98rem; line-height: 1.4; color: var(--ink-soft); max-width: 24ch; font-weight: 400; }
.panel-dark .stat { color: rgba(255,255,255,.5); }
.panel-dark .stat__label { color: rgba(255,255,255,.72); }

/* ============================================================
   PROGRAM CARDS / STORIES
   ============================================================ */
.program { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.program--flip .program__media { order: 2; }
@media (max-width: 860px){ .program { grid-template-columns: 1fr; } .program--flip .program__media { order: 0; } }
.program + .program { margin-top: clamp(4rem, 9vh, 8rem); }
.program__media { position: relative; }
.program__index { font-family: var(--num-font); font-weight: var(--display-weight); font-size: clamp(1.2rem,2vw,1.6rem); color: var(--sig); }
.program__title { font-size: var(--d3); margin: .3rem 0 1rem; }
.program__stats { display: flex; gap: 2.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.mini-stat .num { font-size: 2rem; color: var(--sig); display:block; line-height:1; }
.mini-stat span { font-size: .85rem; color: var(--ink-mute); }

/* ---- Image slot duotone treatment ---- */
.shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-sunken); }
.shot img { display:block; width:100%; height:100%; object-fit:cover; }
image-slot {
  --slot-bg: transparent;
  background:
    radial-gradient(120% 90% at 18% 12%, color-mix(in srgb, var(--sig) 55%, transparent), transparent 60%),
    linear-gradient(145deg, var(--sig-deep), var(--navy-900) 92%);
  color: rgba(255,255,255,.86);
  font-family: var(--sans-font);
}
.shot image-slot::part(placeholder) { color: rgba(255,255,255,.7); }
.shot image-slot { display:block; }
.shot::after { /* subtle bottom scrim — keeps the corner tag legible without washing the photo */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, color-mix(in srgb, var(--navy-deep) 60%, transparent), transparent 42%);
  z-index: 2;
}
.shot--plain::after { display: none; }
.shot__tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; background: var(--sig); color:#fff; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .4rem .7rem; border-radius: 6px; }

/* ============================================================
   CHARTS
   ============================================================ */
.chart-card { background: var(--bg-card); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-sm); }
.panel-dark .chart-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow:none; }
.chart-head { display:flex; justify-content: space-between; align-items: flex-start; gap:1rem; margin-bottom: 1.6rem; }
.chart-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin:0; }
.panel-dark .chart-title { color:#fff; }
.chart-sub { font-size: .85rem; color: var(--ink-mute); margin:.2rem 0 0; }

/* bar/column */
.bars { display:flex; align-items:flex-end; gap: clamp(.6rem,2vw,1.6rem); height: 280px; }
.bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.7rem; }
.bar__track { width:100%; display:flex; align-items:flex-end; height:100%; }
.bar__fill { width:100%; background: var(--sig); border-radius: 8px 8px 0 0; height:0; transition: height 1.1s var(--ease-out); position:relative; }
.bar__fill.is-dim { background: color-mix(in srgb, var(--ink) 18%, var(--bg-sunken)); }
.bar:hover .bar__fill:not(.is-dim){ filter: brightness(1.06); }
.bar__val { position:absolute; top:-1.7rem; left:50%; transform:translateX(-50%); font-family:var(--num-font); font-weight:var(--display-weight); font-size:1.05rem; color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .4s ease .8s; }
.bar.in .bar__val { opacity:1; }
.bar__x { font-size:.82rem; color:var(--ink-mute); font-weight:500; }
.panel-dark .bar__val { color:#fff; }
.panel-dark .bar__fill.is-dim { background: rgba(255,255,255,.14); }

/* donut / ring */
.donut-wrap { display:flex; align-items:center; gap: clamp(1.5rem,4vw,3rem); flex-wrap:wrap; }
.donut { --p:0; width: 200px; height:200px; flex:none; }
.donut svg { transform: rotate(-90deg); overflow: visible; }
.donut .ring-bg { stroke: var(--line-warm); }
.panel-dark .donut .ring-bg { stroke: rgba(255,255,255,.14); }
.donut .ring-fg { stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease-out); }
.donut__center { font-family:var(--num-font); font-weight:var(--display-weight); }
.legend { display:flex; flex-direction:column; gap:.9rem; }
.legend li { display:flex; align-items:center; gap:.7rem; font-size:.95rem; list-style:none; }
.legend .sw { width:14px; height:14px; border-radius:4px; flex:none; }
.legend .lv { margin-left:auto; font-family:var(--num-font); font-weight:var(--display-weight); color:var(--ink); }
.panel-dark .legend .lv { color:#fff; }
.legend ul { margin:0; padding:0; }

/* line / trend */
.linechart { width:100%; height: 300px; overflow: visible; }
.linechart .grid-l { stroke: var(--line-warm); stroke-width:1; }
.panel-dark .linechart .grid-l { stroke: rgba(255,255,255,.1); }
.linechart .area { fill: var(--sig); opacity:.10; }
.linechart .line { fill:none; stroke: var(--sig); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition: stroke-dashoffset 1.8s var(--ease-out); }
.linechart .dot { fill:#fff; stroke: var(--sig); stroke-width:3; opacity:0; transition: opacity .3s; }
.linechart.in .dot { opacity:1; }
.linechart .lbl { font-family:var(--sans-font); font-size:12px; fill: var(--ink-mute); }
.panel-dark .linechart .lbl { fill: rgba(255,255,255,.55); }

/* where-the-money flow bar */
.flowbar { display:flex; height: 64px; border-radius: 12px; overflow:hidden; box-shadow: var(--shadow-sm); }
.flowbar__seg { height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.9rem; width:0; transition: width 1.2s var(--ease-out); overflow:hidden; white-space:nowrap; }
.flow-legend { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:1.2rem; margin-top:1.8rem; }
.flow-item { border-top:2px solid currentColor; padding-top:.7rem; }
.flow-item .num { font-size:1.7rem; display:block; line-height:1; }
.flow-item p { margin:.35rem 0 0; font-size:.9rem; color:var(--ink-mute); }

/* treemap */
.treemap { display:grid; gap:8px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 70px; }
.tm { border-radius:10px; padding:.85rem; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; opacity:0; transform: scale(.92); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.treemap.in .tm { opacity:1; transform:scale(1); }
.tm h4 { margin:0; font-size:.95rem; color:#fff; letter-spacing:-0.01em; }
.tm span { font-family:var(--num-font); font-weight:var(--display-weight); font-size:1.05rem; }
.tm:hover { filter: brightness(1.07); }

/* map */
.map-wrap { position:relative; }
.map svg { width:100%; height:auto; overflow:visible; }
.map .hood { fill: color-mix(in srgb, var(--sig) 16%, var(--bg-card)); stroke: var(--sig); stroke-width:1.2; transition: fill .3s; cursor: pointer; }
.map .hood:hover, .map .hood.active { fill: var(--sig); }
.map .pin { fill: var(--sig); opacity:0; transform-box: fill-box; transform-origin:center; transition: opacity .4s var(--ease-out); }
.map.in .pin { opacity:1; }
.map-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.map-list li { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line-warm); font-size:.98rem; cursor:default; transition: color .2s; }
.map-list li .num { color:var(--sig); }
.map-list li:hover { color: var(--ink); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pullquote { font-family: var(--display-font); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.18; color: var(--ink); letter-spacing: -0.015em; text-wrap: balance; }
.pullquote .accent-word { font-style: var(--display-italic); }
.panel-dark .pullquote { color:#fff; }
.quote-by { margin-top: 1.6rem; display:flex; align-items:center; gap:1rem; }
.quote-by__line { width:42px; height:1px; background: var(--sig); }
.quote-by__name { font-weight:600; color: var(--ink); }
.panel-dark .quote-by__name { color:#fff; }
.quote-by__role { color: var(--ink-mute); font-size:.9rem; }

/* signature script-ish */
.sign { font-family: var(--display-font); font-style: italic; font-size: 2rem; color: var(--sig); }

/* ============================================================
   VALUES
   ============================================================ */
.values { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.4rem); }
@media (max-width:820px){ .values { grid-template-columns:1fr; } }
.value { border-top: 2px solid var(--sig); padding-top: 1.3rem; }
.value__n { font-family:var(--num-font); font-weight:var(--display-weight); color: var(--sig); font-size:1.1rem; }
.value h3 { font-size: 1.5rem; margin:.5rem 0 .6rem; color:var(--ink); letter-spacing:-0.02em; }
.value p { font-size:1rem; color:var(--ink-soft); line-height:1.6; margin:0; }

/* ============================================================
   TIMELINE (looking ahead)
   ============================================================ */
.goals { display:grid; gap: 0; }
.goal { display:grid; grid-template-columns: 90px 1fr auto; gap: clamp(1rem,3vw,2.5rem); align-items:center; padding: clamp(1.4rem,3vw,2.2rem) 0; border-top:1px solid var(--line-warm); }
.panel-dark .goal { border-color: rgba(255,255,255,.14); }
.goal__yr { font-family:var(--num-font); font-weight:var(--display-weight); color: var(--sig); font-size:1.3rem; }
.goal__t { font-size: clamp(1.3rem,2.4vw,1.9rem); color: var(--ink); letter-spacing:-0.02em; margin:0; line-height:1.1; }
.panel-dark .goal__t { color:#fff; }
.goal__d { color: var(--ink-mute); max-width:40ch; font-size:.95rem; }
.panel-dark .goal__d { color: rgba(255,255,255,.6); }
@media (max-width:760px){ .goal { grid-template-columns: 60px 1fr; } .goal__d { grid-column: 2; } }

/* ============================================================
   CLOSING / FOOTER
   ============================================================ */
.give { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; margin-top:3rem; }
@media (max-width:820px){ .give { grid-template-columns:1fr; } }
.give-card { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding:1.8rem; transition: transform .25s var(--ease-out), background .25s; }
.give-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
.give-card .num { font-size:2.2rem; color: var(--sig); display:block; }
.give-card h4 { color:#fff; margin:.5rem 0 .4rem; font-size:1.2rem; }
.give-card p { color: rgba(255,255,255,.65); font-size:.92rem; margin:0; }

.foot { padding: clamp(2.5rem,5vw,4rem) var(--pad); color: rgba(255,255,255,.6); font-size:.9rem; }
.foot__top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; align-items:flex-end; }
.foot a { color: rgba(255,255,255,.8); }
.foot a:hover { color:#fff; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 1; transform: translateY(14px); transition: transform .55s var(--ease-out); }
.reveal.in { transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  .reveal { transform:none !important; }
}

/* progress bar */
.progress { position: fixed; top:0; left:0; height:3px; background: var(--sig); width:0; z-index: 70; transition: width .1s linear; }

/* chapter index marker */
.chapno { font-family: var(--num-font); font-weight: var(--display-weight); color: var(--sig); font-size: .95rem; letter-spacing: .04em; }

/* utility */
.stack > * + * { margin-top: var(--gap, 1.5rem); }
.flex { display:flex; }
.between { justify-content: space-between; }
.center { align-items:center; }
.gap-s { gap: .8rem; } .gap-m { gap: 1.6rem; } .gap-l { gap: 3rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,5rem); }
@media (max-width:820px){ .grid-2 { grid-template-columns:1fr; } }
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3.5rem}
.max-44{max-width:44ch}.max-34{max-width:34ch}