/* ============================================================
   State of Ministry — Story pages
   A separate visual language from the dashboard: editorial,
   dark, typographic, scroll-paced. Serif display type, one
   accent per story, generous negative space, data as image.
   ============================================================ */

:root {
  --ink:        #f4f1ec;
  --ink-2:      #b8b1a6;
  --ink-3:      #7d766c;
  --ink-4:      #514c45;
  --void:       #14120f;
  --void-2:     #1c1917;
  --void-3:     #26221e;
  --line:       rgba(244,241,236,0.13);
  --line-2:     rgba(244,241,236,0.07);
  --paper:      #f4f1ec;
  --paper-ink:  #1a1714;

  /* per-story accent, overridden by [data-story] */
  --accent:     #d9763f;
  --accent-2:   #f0a373;
  --accent-dim: rgba(217,118,63,0.16);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34rem;   /* reading column */
  --wide:    72rem;   /* full spread */
}

[data-story="solo"]     { --accent:#d9763f; --accent-2:#f2a878; --accent-dim:rgba(217,118,63,.16); }
[data-story="parttime"] { --accent:#c8563f; --accent-2:#e88f76; --accent-dim:rgba(200,86,63,.16); }
[data-story="room"]     { --accent:#3f9d8f; --accent-2:#6fc9ba; --accent-dim:rgba(63,157,143,.16); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Reading progress ---------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 100;
  background: var(--accent); width: 0;
  transition: width .1s linear;
}

/* ---------- Top bar ------------------------------------------- */
.storybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  font-size: 12.5px; letter-spacing: .3px;
  background: linear-gradient(to bottom, rgba(20,18,15,.94), rgba(20,18,15,0));
  transition: background .3s;
}
.storybar a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.storybar a:hover { color: var(--ink); }
.storybar .home { display: flex; align-items: center; gap: 8px; }
.storybar .home::before {
  content: "←"; font-size: 14px;
}
.storybar .sep { color: var(--ink-4); }
.storybar .crumb { color: var(--ink-3); }
.storybar .right { margin-left: auto; display: flex; gap: 16px; align-items: center; }

/* ---------- Layout rails -------------------------------------- */
.wrap    { width: min(var(--wide), calc(100% - 3rem)); margin-inline: auto; }
.measure { width: min(var(--measure), calc(100% - 3rem)); margin-inline: auto; }

section { position: relative; }

/* ---------- Opening ------------------------------------------- */
.opening {
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 12vh 0 10vh;
  position: relative; overflow: hidden;
}
.opening::after {
  /* subtle vignette + accent bloom, non-interactive */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 12%, var(--accent-dim), transparent 70%),
    radial-gradient(50% 40% at 88% 82%, rgba(244,241,236,.045), transparent 70%);
}
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent-2);
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.eyebrow::after { content:""; height:1px; flex:1; background: var(--line); max-width: 140px; }

.story-title {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 8.4vw, 6.6rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 26px;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  text-wrap: balance;
}
.story-title em {
  font-style: italic; color: var(--accent-2);
  font-variation-settings: 'SOFT' 8, 'WONK' 1;
}
.standfirst {
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  line-height: 1.55; color: var(--ink-2);
  max-width: 32rem; margin: 0 0 34px;
  text-wrap: pretty;
}
.byline {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .9px;
  color: var(--ink-3); text-transform: uppercase;
  padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-4);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.scroll-cue span::after {
  content: ""; display: block; width: 1px; height: 30px; margin: 0 auto;
  background: linear-gradient(to bottom, var(--ink-4), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100%{opacity:.25;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }
@media (prefers-reduced-motion: reduce) { .scroll-cue span::after { animation: none; } }

/* ---------- Prose --------------------------------------------- */
.prose { padding: 8vh 0; }
.prose p {
  font-size: 1.075rem; line-height: 1.72; margin: 0 0 1.5em;
  color: #ded8d0; text-wrap: pretty;
}
.prose p.lead {
  font-size: 1.32rem; line-height: 1.56; color: var(--ink);
  font-family: var(--serif); font-weight: 400;
}
.prose p strong { color: var(--ink); font-weight: 600; }
.prose h2 {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
  margin: 2.4em 0 .9em; text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px;
}

/* Drop cap on the first paragraph of a story */
.prose .dropcap::first-letter {
  font-family: var(--serif); font-size: 3.9em; line-height: .82;
  float: left; padding: .06em .1em 0 0; font-weight: 600;
  color: var(--accent-2);
}

/* ---------- Pull quote ---------------------------------------- */
.pullquote {
  margin: 9vh 0; padding: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 4.1vw, 2.7rem);
  line-height: 1.22; letter-spacing: -.022em;
  color: var(--ink); text-wrap: balance;
  position: relative; padding-left: 1.1em;
}
.pullquote::before {
  content: "“"; position: absolute; left: -.05em; top: -.12em;
  font-size: 2.4em; color: var(--accent); opacity: .5; line-height: 1;
}
.pullquote cite {
  display: block; margin-top: 20px;
  font-family: var(--mono); font-style: normal;
  font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Big number ---------------------------------------- */
.figure-block { padding: 10vh 0; }

.bignum {
  font-family: var(--serif);
  font-size: clamp(6rem, 24vw, 20rem);
  font-weight: 600; line-height: .82; letter-spacing: -.05em;
  color: var(--accent-2);
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
}
.bignum-sub {
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  font-family: var(--serif); color: var(--ink);
  max-width: 26rem; line-height: 1.4; margin-top: 18px;
}
.bignum-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--ink-3); margin-top: 14px; text-transform: uppercase;
}

/* ---------- Two-column contrast ------------------------------- */
.versus {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-2); margin: 8vh 0;
  border: 1px solid var(--line-2);
}
.versus > div { padding: 34px 30px; background: var(--void); }
.versus .side-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
.versus .side-num {
  font-family: var(--serif); font-size: clamp(3rem, 8vw, 5.4rem);
  font-weight: 600; line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.versus .lo .side-num { color: var(--ink-3); }
.versus .hi .side-num { color: var(--accent-2); }
.versus .side-desc { font-size: .94rem; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.versus .side-base { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); margin-top: 10px; }
@media (max-width: 640px) { .versus { grid-template-columns: 1fr; } }

/* ---------- Dot matrix (each dot = a person) ------------------ */
.matrix-block { padding: 9vh 0; }
.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9px, 1fr));
  gap: 4px; margin: 26px 0 20px;
}
.dot {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--ink-4); opacity: .38;
  transition: background .5s ease, opacity .5s ease, transform .5s ease;
}
.dot.on { background: var(--accent); opacity: 1; }
.revealed .dot { transition-delay: calc(var(--i) * 3.4ms); }
.matrix-caption {
  font-size: .93rem; color: var(--ink-2); max-width: 30rem; line-height: 1.55;
}
.matrix-legend {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}
.matrix-legend i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  margin-right: 7px; vertical-align: -1px;
}

/* ---------- Ranked bars (editorial, not dashboard) ------------ */
.rank { margin: 7vh 0; }
.rank-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--line-2);
  position: relative;
}
.rank-row:last-child { border-bottom: 1px solid var(--line-2); }
.rank-row .bg {
  position: absolute; left: 0; bottom: 0; top: 0;
  background: var(--accent-dim); z-index: 0;
  width: 0; transition: width 1.1s cubic-bezier(.2,.8,.25,1);
}
.revealed .rank-row .bg { width: var(--w); }
.rank-row .nm, .rank-row .vl { position: relative; z-index: 1; }
.rank-row .nm { font-size: 1.02rem; color: var(--ink); }
.rank-row .vl {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; color: var(--accent-2);
}
.rank-row.muted .nm { color: var(--ink-3); }
.rank-row.muted .vl { color: var(--ink-3); }
.rank-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.rank-note { font-size: .88rem; color: var(--ink-3); margin-top: 14px; }

/* ---------- Full-bleed statement ------------------------------ */
.statement {
  padding: 16vh 0; margin: 6vh 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background:
    radial-gradient(70% 60% at 50% 50%, var(--accent-dim), transparent 72%);
  text-align: center;
}
.statement p {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.6vw, 3.1rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -.025em;
  margin: 0 auto; max-width: 30rem; text-wrap: balance;
}

/* ---------- Inline data callout ------------------------------- */
.callout {
  margin: 6vh 0; padding: 26px 28px;
  border-left: 2px solid var(--accent);
  background: rgba(244,241,236,.028);
}
.callout .c-num {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 600;
  line-height: 1; color: var(--accent-2); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.callout .c-txt { font-size: .98rem; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }

/* ---------- Method / footer ----------------------------------- */
.method {
  padding: 9vh 0 4vh; border-top: 1px solid var(--line-2);
  font-size: .9rem; color: var(--ink-3); line-height: 1.66;
}
.method h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; font-weight: 600;
}
.method p { margin: 0 0 1em; max-width: 40rem; }
.method a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.method a:hover { border-bottom-color: var(--accent-2); }

.sample-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: #e8c05a;
  border: 1px solid rgba(232,192,90,.32); background: rgba(232,192,90,.07);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 22px;
}

/* ---------- Next story ---------------------------------------- */
.next {
  padding: 10vh 0 14vh; border-top: 1px solid var(--line-2);
}
.next-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px;
}
.next-link { display: block; text-decoration: none; group: none; }
.next-title {
  font-family: var(--serif); font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -.028em;
  color: var(--ink); transition: color .2s;
}
.next-link:hover .next-title { color: var(--accent-2); }
.next-sub { color: var(--ink-3); margin-top: 12px; font-size: 1rem; max-width: 30rem; }
.next-arrow { color: var(--accent); margin-left: .3em; display: inline-block; transition: transform .2s; }
.next-link:hover .next-arrow { transform: translateX(6px); }

/* ---------- Reveal on scroll ---------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.25,1); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .revealed .dot, .revealed .rank-row .bg { transition: none; }
}

/* ---------- Print --------------------------------------------- */
@media print {
  body { background: #fff; color: #111; }
  .storybar, .progress, .scroll-cue, .next { display: none; }
  .bignum, .versus .hi .side-num, .rank-row .vl, .callout .c-num { color: #000; }
  .reveal { opacity: 1; transform: none; }
  .statement { background: none; }
  .dot.on { background: #000; print-color-adjust: exact; }
}