/* ═══════════════════════════════════════════════════════════════════════
   She Be The Change — the read, after the ball comes to rest.
   Style guide: the VOW master deck (black · cream · gold, refined serif,
   hairline rules, boxed cards, a running head and a page foot on every
   page). Loads after site.css and only re-tokens what sits below the ride:
   .read, .beat, .dockline, .menu, .foot and the docked mast.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --vow-black: #0A0908; --vow-black-deep: #050404;
  --vow-cream: #F7F3EA; --vow-cream-deep: #EFE9DC;
  --vow-gold: #AC8036;  --vow-gold-lit: #C49A48; --vow-gold-dim: #5C4A2C;
  --vow-serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --vow-text:  "Newsreader", Georgia, "Times New Roman", serif;
  --vow-label: "Space Grotesk", system-ui, sans-serif;
}

/* ── the two pages: black and cream, alternating ─────────────────────── */
.read { background: var(--vow-black); counter-reset: vowpage; }

.read .band,
.beat,
.foot {
  --bg: var(--vow-black); --bg-deep: var(--vow-black-deep);
  --surface: #12100D; --surface-2: #1A1713;
  --line: var(--vow-gold-dim); --line-soft: #2A2419;
  --ink: var(--vow-cream); --ink-2: #D8D0C0; --muted: #A79C88; --faint: #8B816E;
  --accent: var(--vow-gold-lit); --accent-deep: #8A6528; --accent-wash: #221B10;
  --gold: var(--vow-gold-lit); --gold-wash: #221B10;
  --draft: #A79C88; --review: #D0A64A; --verified: #8FBF9A;
  --draft-wash: #1B1815; --review-wash: #2A2113; --verified-wash: #15241A;
  background: var(--bg); color: var(--ink);
}
.read .band:nth-of-type(odd) {
  --bg: var(--vow-cream); --bg-deep: var(--vow-cream-deep);
  --surface: #FBF9F4; --surface-2: #F0EAE0;
  --line: #C9B58F; --line-soft: #E4DCCB;
  --ink: var(--vow-black); --ink-2: #2E2A24; --muted: #6B6259; --faint: #6F675E;
  --accent: #85642A; --accent-deep: #6E5220; --accent-wash: #F1E6CF;   /* the deck's gold, deepened to 4.6:1 on cream for small labels */
  --gold: #85642A; --gold-wash: #F1E6CF;
  --draft: #6B6259; --review: #85642A; --verified: #2F6A45;
  --draft-wash: #ECE9E3; --review-wash: #F3E7CF; --verified-wash: #E3EEE4;
}
.read .band--dark { background: var(--bg); }

/* ── type: refined serif, gold bold labels ───────────────────────────── */
.read, .foot, .beat, .dockline, .menu {
  --font-display: var(--vow-serif);
  --font-body: var(--vow-text);
  --r-sm: 0; --r-md: 0; --r-lg: 0;
  font-family: var(--vow-text); font-weight: 400;
}
.read .callout, .read h2, .read h3, .foot h2, .foot h3 {
  font-family: var(--vow-serif); font-weight: 400; letter-spacing: -.01em;
}
.read .callout { line-height: 1.08; text-shadow: none; }
.read .lede { font-style: normal; font-weight: 300; color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5; }
/* the count's items, listed under the headline before the copy */
.read .keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 0; margin: calc(-1 * var(--s-3)) 0 var(--s-6); font-family: "Fraunces", var(--vow-serif); font-weight: 700; font-variation-settings: "opsz" 9, "SOFT" 30; font-size: clamp(17px, 2vw, 22px); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.read .keys span + span::before { content: "\00b7"; margin: 0 .7em; color: var(--muted); font-weight: 400; }
@media (max-width: 600px) {
  .read .keys { flex-direction: column; align-items: center; gap: 4px; letter-spacing: .14em; }
  .read .keys span + span::before { content: none; }
}
.read .crumb em { color: var(--accent); font-style: italic; }
.read .rail, .read .eyebrow, .read .cap__k, .read .path__n, .read .pipe__n, .read .step__n, .read .follow__lbl,
.foot .foot__h, .beat small, .dockline small, .menu small {
  font-family: var(--vow-label); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.read .rail { margin-bottom: var(--s-6); }
.read .legal { font-family: var(--vow-label); font-weight: 400; }
.read p, .read li { font-family: var(--vow-text); }

/* ── filigree: a running head and a page foot on every page ─────────── */
.read .band { position: relative; counter-increment: vowpage; padding-top: max(var(--s-9), 104px); padding-bottom: max(var(--s-9), 112px); }
.read .band::before, .read .band::after {
  position: absolute; left: var(--gutter); right: var(--gutter);
  font-family: var(--vow-label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); pointer-events: none; line-height: 1; text-align: left;
}
.read .band::before {
  content: "She Be The Change"; top: 30px;
  background: linear-gradient(var(--vow-gold), var(--vow-gold)) no-repeat right center / calc(100% - 15.5em) 1px;
}
.read .band:nth-of-type(even)::before { background-image: linear-gradient(var(--vow-gold-lit), var(--vow-gold-lit)); }
.read .band::after {
  content: counter(vowpage, decimal-leading-zero) "\2003 She Be The Change \2014 Global Goals Action Network"; bottom: 30px;
  color: var(--muted); letter-spacing: .06em; text-transform: none; font-size: 11px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat right center / 26% 1px;
  padding-right: 30%; white-space: normal;
}
@media (max-width: 700px) {
  .read .band::before { background-size: calc(100% - 13em) 1px; letter-spacing: .12em; }
  .read .band::after { background: none; padding-right: 0; }
}

/* ── cards and controls: hairline gold boxes, square corners ─────────── */
.read .role, .read .state, .read .rec, .read .cap, .read .sdg, .read .prog, .read .gate, .read .callout-box, .read .form input, .read .form textarea, .read .form select {
  border-radius: 0;
}
.read .role, .read .state, .read .rec, .read .cap { border: 1px solid var(--accent); background: transparent; }
.read .role:hover, .read .state:hover { transform: none; border-color: var(--accent); }
.read .pillars li { border-top-color: var(--accent); }
.read .btn {
  border-radius: 0; background: var(--ink); color: var(--bg); border-color: var(--ink);
  font-family: var(--vow-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: var(--t-xs);
}
.read .btn:hover { transform: none; background: var(--accent); border-color: var(--accent); color: var(--vow-black); }
.read .btn--ghost { background: transparent; color: var(--ink); border-color: var(--accent); }
.read .btn--ghost:hover { background: var(--accent); color: var(--vow-black); }
.read .chip { border-radius: 999px; font-family: var(--vow-label); }

/* ── emblems: original marks, drawn large, in a double gold ring ─────── */
.read .ico--emblem {
  width: 108px; height: 108px; border-radius: 50%; position: relative;
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent);
  margin: 0 auto var(--s-2);
}
.read .ico--emblem::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: .45;
}
.read .ico--emblem svg { width: 58px; height: 58px; }

/* ── everything centred below the ride ───────────────────────────────── */
.read .pillars, .read .roles, .read .capital, .read .pipe, .read .progs, .read .states, .read .paths, .read .cap2 { text-align: center; }
.read .role, .read .cap, .read .state { align-items: center; }
.read .row--wrap { justify-content: center; }
.read .pillars li { border-top: 0; padding-top: 0; }
.read .pillars h3::after, .read .role h3::after {
  content: ""; display: block; width: 28px; height: 1px; margin: 12px auto 0; background: var(--accent);
}
.read .pillars h3 { margin-top: var(--s-4); }
.read .pillars p { color: var(--ink-2); }

/* ── the ball's beats: a boxed card, deck style ──────────────────────── */
.beat { border-top: 0; padding: var(--s-7) var(--gutter); }
.beat h3 { font: italic 400 clamp(22px, 2.4vw, 30px)/1.15 var(--vow-serif); letter-spacing: 0; }
.beat em { border-color: var(--accent); color: var(--accent); border-radius: 0; font-family: var(--vow-label); font-weight: 700; }
.beat p { font-family: var(--vow-text); font-size: var(--t-base); }

/* ── the bridge line as the ball tucks away ──────────────────────────── */
.dockline { color: var(--vow-cream); }
.dockline small { color: var(--vow-gold-lit); }
.dockline h2 { font: 400 clamp(30px, 4.2vw, 58px)/1.06 var(--vow-serif); letter-spacing: -.01em; }
.dockline p { font-family: var(--vow-text); font-size: 17px; color: rgba(247, 243, 234, .8); }

/* ── the docked mast: legible on black and on cream ──────────────────── */
body.docked .wordmark, body.docked .mast nav {
  background: rgba(10, 9, 8, .92); color: var(--vow-cream);
  border: 1px solid var(--vow-gold-dim); border-radius: 999px; padding: 7px 16px;
}
body.docked .wordmark { padding-left: 11px; margin: 0 -16px 0 -11px; }
body.docked .wordmark i { background: var(--vow-cream); border-color: var(--vow-black); }
body.docked .mast nav a { opacity: .85; }
/* the slot never covers the ball: a gold ring around it, no dot, nothing filled */
body.docked .slot { color: var(--vow-gold-lit); border-style: solid; opacity: 1; background: none; }
body.docked .slot::after { opacity: 0; }
body.docked.away .slot { border-style: dashed; opacity: .55; }
body.docked.away .slot::after { opacity: .3; }

/* ── the menu: a cream page with gold rules ──────────────────────────── */
.menu::backdrop { background: rgba(10, 9, 8, .74); }
.menu .in { background: var(--vow-cream); border-radius: 0; border: 1px solid var(--vow-gold); color: var(--vow-black); box-shadow: 0 60px 90px -40px rgba(0, 0, 0, .9); }
.menu header b { font: 400 24px/1 var(--vow-serif); }
.menu .close { border-radius: 0; border-color: var(--vow-gold); }
.menu small { color: var(--vow-gold); }
.menu li a { font: 400 16px/1.3 var(--vow-text); border-bottom-color: #E4DCCB; }
.menu li a:hover { color: var(--vow-gold); }
.menu .rbtn, .menu #again { border-radius: 0; background: var(--vow-black); color: var(--vow-cream); font-family: var(--vow-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── the foot ────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--vow-gold-dim); }
.foot .foot__brand { font-family: var(--vow-serif); }