/* GOYE AI design floor, Warm Scholar. Shared by every page on the site.
   Extracted from index.html on 2026-11-07 so interior pages inherit it. */

/* ===========================================================================
   GOYE AI, Warm Scholar
   Brand kit v1.0, 31 Oct 2026. Tokens are the brand's, not invented here.
   Grammar: chaptered editorial. Grounds hard-cut per chapter; there is no
   continuous drift anywhere on this page, by grammar.
   =========================================================================== */

:root {
  /* Warm Scholar palette, verbatim from the brand kit */
  --plum:     #640171;
  --midnight: #07002E;
  --crimson:  #C6273A;
  --ember:    #DA552F;
  --gold:     #EFA130;
  --paper:    #FBF6EF;
  --stone:    #625B6E;
  --sand:     #E8DCC8;
  --white:    #FFFFFF;
  /* Warm white. Pure #FFF reads cold beside Paper, so no ground on this page
     uses it; it is kept only as the fill under the instrument's controls. */
  --warmwhite: #FEFBF7;

  /* engine roles, light ground (the page's default) */
  --sc-canvas:     var(--paper);
  --sc-surface:    var(--white);
  --sc-ink:        var(--midnight);
  --sc-ink-soft:   var(--stone);
  --sc-accent:     var(--plum);
  --sc-accent-ink: var(--white);

  --sc-font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Lato", Arial, system-ui, sans-serif;

  --sc-measure: 64ch;
  --sc-maxw: 78rem;
  --sc-shadow-color: 268 60% 8%;

  /* one radius scale, held across the page */
  --sc-r-sm: 3px; --sc-r-md: 4px; --sc-r-lg: 6px;

  --folio-w: 13rem;
  --rule: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --rule-soft: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
}

/* --- Ground families -------------------------------------------------------
   taste.md: redefining --sc-ink on a subtree does NOT re-ink inherited text,
   because `color` resolves on <body> first. Every ground restates `color`. */
/* Three warm light grounds, no dark ground anywhere on the page. The ladder
   is Warm white -> Paper -> Sand, and chapters still hard-cut between them. */
.ch--paper { background: var(--paper);     --sc-ink: var(--midnight); --sc-ink-soft: var(--stone); --sc-accent: var(--plum); --sc-accent-ink: var(--white); color: var(--sc-ink); }
.ch--white { background: var(--warmwhite); --sc-ink: var(--midnight); --sc-ink-soft: var(--stone); --sc-accent: var(--plum); --sc-accent-ink: var(--white); color: var(--sc-ink); }
.ch--sand  { background: var(--sand);      --sc-ink: var(--midnight); --sc-ink-soft: #544D61; --sc-accent: var(--plum); --sc-accent-ink: var(--white); color: var(--sc-ink); }
/* Crimson is 4.13:1 on Sand, which fails AA for the small caps a label uses.
   Plum is 8.68:1 there, so the label role swaps colour on this ground only. */
.ch--sand .label { color: var(--plum); }
.ch--sand { --rule: 1px solid color-mix(in oklab, var(--midnight) 24%, transparent); --rule-soft: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent); }

html { background: var(--paper); }
body { font-family: var(--sc-font-text); color: var(--midnight); background: var(--paper); -webkit-font-smoothing: antialiased; }

::selection { background: color-mix(in oklab, var(--plum) 24%, transparent); }

h1, h2, h3, h4, .d { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight); text-wrap: balance; }
p { text-wrap: pretty; }

/* --- Shared editorial components ------------------------------------------ */
.wrap { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.chapter { padding-block: var(--sc-section); position: relative; }
.measure { max-width: var(--sc-measure); }

.label {
  font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-xs);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--crimson);
  margin: 0;
}


/* Chapter opener: the folio mark that makes this a printed feature */
.ch-head { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-8); }
.ch-num {
  font-family: var(--sc-font-display); font-weight: 400; font-style: italic;
  font-size: var(--sc-t-sm); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
}
.ch-title { font-size: var(--sc-t-2xl); margin: 0; color: var(--plum); }
.ch--sand .ch-title { color: var(--plum); }
.ch-lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 52ch; margin: 0; }

.hr { height: 2px; background: var(--ember); border: 0; margin: 0; }

.body-text { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); color: var(--sc-ink); max-width: var(--sc-measure); }

/* Running-text links: the grammar's CTA form. No button islands. */
.run {
  font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-base);
  color: var(--plum); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, var(--plum) 40%, transparent);
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.run:hover { text-decoration-color: var(--plum); }

.run:active { transform: translateY(1px); }
.run--lg { font-size: var(--sc-t-lg); }

/* ===== Margin folio ======================================================= */
.folio {
  position: fixed; top: 0; left: 0; width: var(--folio-w); height: 100vh;
  z-index: var(--sc-z-chrome); display: flex; flex-direction: column;
  padding: var(--sc-5) var(--sc-4) var(--sc-5) var(--sc-5);
  border-right: 1px solid color-mix(in oklab, var(--midnight) 12%, transparent);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(8px);
}
.folio__mark { display: block; margin-bottom: var(--sc-6); }
.folio__mark img { width: 118px; height: auto; display: block; }
.folio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.folio__link {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: var(--sc-2);
  align-items: baseline; padding: 5px 0;
  font-size: var(--sc-t-xs); line-height: 1.3; color: var(--stone);
  text-decoration: none; border: 0;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.folio__link i {
  font-family: var(--sc-font-display); font-style: italic; font-size: 0.72rem;
  letter-spacing: 0.06em; color: color-mix(in oklab, var(--stone) 70%, transparent);
}
.folio__link:hover { color: var(--plum); }
.folio__link[aria-current="true"] { color: var(--plum); font-weight: 700; }
.folio__link[aria-current="true"] i { color: var(--ember); }
.folio__foot { margin-top: auto; font-size: var(--sc-t-xs); color: var(--stone); line-height: 1.5; }
.folio__foot a { color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.folio__foot a:hover { color: var(--plum); }

.page { margin-left: var(--folio-w); }

/* progress hairline, under the folio */
[data-sc-progress] { background: var(--ember); height: 2px; }

/* ===== 0 · Title page =====================================================
   Grammar: type on the paper ground. No media above the fold. */
/* Title page. Centred at Dr. Brown's request (2026-11-07). Note this departs
   from the chaptered-editorial grammar, which asks for a lead-anchored title
   page; the frontispiece beneath it is what keeps the composition balanced. */
.title-pg { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sc-9) var(--sc-7); }
.title-pg__inner { display: grid; gap: var(--sc-5); max-width: 54rem; margin-inline: auto; justify-items: center; text-align: center; }
.title-pg h1 {
  font-size: var(--sc-t-4xl); font-weight: 900; letter-spacing: -0.045em;
  line-height: 0.92; margin: 0; color: var(--midnight);
}
.title-pg .tagline {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: var(--sc-t-xl); line-height: 1.25; color: var(--plum); margin: 0;
  max-width: 28ch;
}
.title-pg .lede { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--stone); max-width: 52ch; margin: 0; }
.title-pg .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-5) var(--sc-6); margin-top: var(--sc-3); }
.title-rule { display: flex; align-items: center; justify-content: center; gap: var(--sc-4); margin-top: var(--sc-5); }
.title-rule span { height: 3px; width: 5.5rem; background: var(--ember); flex: 0 0 auto; }
.title-rule small { font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }

/* ===== I · Our Approach =================================================== */
.principles { display: grid; gap: 0; margin-top: var(--sc-7); border-top: var(--rule); }
.principle {
  display: grid; grid-template-columns: 3.5rem minmax(0, 23ch) minmax(0, 1fr);
  gap: var(--sc-5); align-items: start;
  padding-block: var(--sc-6); border-bottom: var(--rule-soft);
}
.principle__n { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--ember); line-height: 1.1; }
.principle__t { font-size: var(--sc-t-lg); margin: 0; color: var(--midnight); line-height: 1.25; }
.principle__b { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); color: var(--stone); margin: 0; }

/* ===== II · The Shift (pinned, Midnight, the authored silence) ============ */
.shift-stage { display: grid; place-items: center; padding: var(--sc-8) var(--sc-gutter); overflow: hidden; }
.shift-inner { position: relative; z-index: 2; display: grid; gap: var(--sc-6); max-width: 54rem; justify-items: start; }
.shift-claim {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); line-height: 1.22; color: var(--midnight); margin: 0;
  max-width: 24ch;
}
.shift-claim b { color: var(--crimson); font-weight: 700; }
.shift-sub { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); margin: 0; max-width: 46ch; }
.shift-tm { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; letter-spacing: 0.02em; }

/* the drawn network motif: the one abstract register the brand sanctions.
   taste.md: mask the figure AWAY from the text rather than laying a scrim over
   it. The gradient keeps the network on the trailing side, where no copy sits. */
.netfig {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.42;
  /* Horizontal, not angled: an angled mask is computed across the whole box,
     so it reaches back across the left-anchored copy. The copy column ends
     near 54% of the stage, so the network starts clear of it at 58%. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, #000 78%);
}
.netfig svg { width: 100%; height: 100%; }
.netfig .edge {
  stroke: var(--plum); stroke-width: 1; fill: none; opacity: 0.5;
  stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--draw, 0)));
}
.netfig .node { fill: var(--plum); opacity: calc(var(--draw, 0) * 0.75); }
.netfig .node--lg { fill: var(--ember); }

/* ===== III · What We Do =================================================== */
.practice {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sc-5); padding-block: var(--sc-6); border-bottom: var(--rule-soft);
}
.practice:first-of-type { border-top: var(--rule); }
.practice__n { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--ember); }
.practice__t { font-size: var(--sc-t-xl); margin: 0 0 var(--sc-3); color: var(--plum); }
.practice__b { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); color: var(--sc-ink); max-width: 60ch; margin: 0; }

/* Media in its own column with a caption. It never bleeds under type. */
.media-col { margin-top: var(--sc-8); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sc-7); align-items: center; }
.media-col figure { margin: 0; }
.media-frame { overflow: hidden; border-radius: var(--sc-r-lg); background: var(--sand); aspect-ratio: 4 / 3; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-col figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); line-height: 1.5; color: var(--stone); border-left: 2px solid var(--ember); padding-left: var(--sc-3); }
.partner-note h3 { font-size: var(--sc-t-xl); color: var(--plum); margin: 0 0 var(--sc-4); }

/* ===== IV · The Readiness Instrument (PEAK, signature move) =============== */
/* The instrument is PINNED, so it must fit inside one viewport or the last
   questions are unreachable. Every value below is sized against an 800px-tall
   viewport, which is the shortest desktop this is expected to meet. */
.inst-stage { display: flex; align-items: center; padding: var(--sc-6) var(--sc-gutter); }
.inst { width: 100%; max-width: 72rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
.inst .ch-head { gap: var(--sc-2); margin-bottom: var(--sc-4); }
.inst .ch-lede { font-size: var(--sc-t-base); line-height: 1.45; max-width: 58ch; }

.inst__q { border-bottom: var(--rule-soft); padding: 9px 0; border-width: 0 0 1px; margin: 0; }
.inst__q legend {
  font-size: 0.95rem; line-height: 1.38; color: var(--midnight);
  font-weight: 400; padding: 0; margin-bottom: 7px;
}
.inst__q legend b { font-family: var(--sc-font-display); font-weight: 700; color: var(--plum); }
.inst__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.inst__opt { position: relative; }
.inst__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.inst__opt span {
  display: block; padding: 5px 12px; font-size: 0.8rem; line-height: 1.25;
  border: 1px solid color-mix(in oklab, var(--midnight) 26%, transparent);
  border-radius: var(--sc-r-sm); color: var(--stone); background: var(--white);
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.inst__opt input:hover + span { border-color: var(--plum); color: var(--plum); }
.inst__opt input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 2px; }
.inst__opt input:checked + span { background: var(--plum); border-color: var(--plum); color: var(--white); font-weight: 700; }
.inst__opt input:active + span { transform: translateY(1px); }

/* the chart: brand chart order, and a value ramp so it survives grayscale */
.chart { position: sticky; top: var(--sc-5); background: var(--paper); border: var(--rule-soft); border-radius: var(--sc-r-lg); padding: var(--sc-4); }
.chart h3 { font-size: var(--sc-t-base); margin: 0 0 var(--sc-1); color: var(--midnight); }
.chart .hint { font-size: var(--sc-t-xs); color: var(--stone); margin: 0 0 var(--sc-4); line-height: 1.45; }
.bar { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sc-3); align-items: center; margin-bottom: 10px; }
.bar__k { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); color: var(--plum); }
/* These are <span>s, so they MUST be blocks: `height` does nothing on an
   inline box, and the fill would animate inside a zero-height track. */
.bar__track { display: block; height: 18px; background: color-mix(in oklab, var(--midnight) 8%, transparent); border-radius: 2px; overflow: hidden; position: relative; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--sand); border-radius: 2px; transition: width 420ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out); }
.bar__fill[data-v="3"] { background: var(--plum); }
.bar__fill[data-v="2"] { background: var(--ember); }
.bar__fill[data-v="1"] { background: var(--sand); }
.bar__name { display: block; margin-top: 3px; font-size: var(--sc-t-xs); color: var(--stone); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: var(--rule-soft); font-size: var(--sc-t-xs); color: var(--stone); }
.chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend i { width: 11px; height: 11px; border-radius: 2px; display: block; }
.chart__out { margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: var(--rule); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--midnight); }
.chart__out strong { font-family: var(--sc-font-display); color: var(--plum); }
.nums { font-variant-numeric: tabular-nums; }

/* ===== V · The Record ===================================================== */
.outcomes { display: grid; gap: 0; border-top: var(--rule); margin-top: var(--sc-6); }
/* 20ch broke "Professional learning ecosystems" onto three lines and made the
   row heights ragged. 27ch holds the longest term to two. */
.outcome { display: grid; grid-template-columns: minmax(0, 27ch) minmax(0, 1fr); gap: var(--sc-5); padding-block: var(--sc-5); border-bottom: var(--rule-soft); align-items: baseline; }
.outcome dt { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); color: var(--plum); }
.outcome dd { margin: 0; font-size: var(--sc-t-base); line-height: var(--sc-leading-body); color: var(--stone); }

.served { margin-top: var(--sc-9); }
.served__count { font-family: var(--sc-font-display); font-weight: 900; font-size: var(--sc-t-3xl); color: var(--plum); line-height: 1; letter-spacing: -0.03em; }
/* Pull quote, standing in the media column until real photography arrives. */
.pull { margin: 0; border-left: 2px solid var(--ember); padding-left: var(--sc-5); }
.pull p { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.3; color: var(--plum); margin: 0 0 var(--sc-3); }
.pull cite { font-style: normal; font-size: var(--sc-t-xs); letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: var(--crimson); }

/* The roster replaces the logo wall: names only, set as a printed list. */
.roster { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: var(--rule);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--sc-7); }
.roster li { padding-block: var(--sc-3); border-bottom: var(--rule-soft);
  font-size: var(--sc-t-base); line-height: 1.4; color: var(--sc-ink); }

/* ===== VI · Insights ===================================================== */
.contents { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: var(--rule); }
.contents li { border-bottom: var(--rule-soft); }
.contents a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-5); align-items: baseline; padding-block: var(--sc-5); text-decoration: none; color: var(--sc-ink); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.contents a:hover { color: var(--plum); }
.contents strong { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700; display: block; margin-bottom: 6px; }
.contents em { font-style: normal; font-size: var(--sc-t-base); color: var(--stone); }
.contents .go { font-size: var(--sc-t-sm); color: var(--plum); white-space: nowrap; font-weight: 700; }

/* ===== Colophon ========================================================== */
.colophon { padding-block: var(--sc-9) var(--sc-7); }
.colophon__claim { font-size: var(--sc-t-3xl); font-weight: 900; letter-spacing: -0.035em; line-height: 1; color: var(--plum); margin: 0 0 var(--sc-5); max-width: 16ch; }
.colophon__ask { font-size: var(--sc-t-lg); line-height: 1.6; color: var(--sc-ink); max-width: 52ch; margin: 0 0 var(--sc-8); }
.masthead { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: var(--sc-6); padding-top: var(--sc-6); border-top: 2px solid var(--ember); font-size: var(--sc-t-xs); line-height: 1.7; color: var(--sc-ink-soft); }
.masthead img { width: 128px; height: auto; margin-bottom: var(--sc-3); }
.masthead h4 { font-size: var(--sc-t-xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--plum); margin: 0 0 var(--sc-2); font-family: var(--sc-font-text); font-weight: 700; }
.masthead ul { list-style: none; margin: 0; padding: 0; }
.masthead a { color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.masthead a:hover { color: var(--plum); }
.legal { margin-top: var(--sc-6); font-size: 0.72rem; color: var(--sc-ink-soft); line-height: 1.7; }

/* ===== Responsive ======================================================== */
@media (max-width: 1080px) {
  :root { --folio-w: 0rem; }
  .page { margin-left: 0; }
  .folio {
    position: sticky; top: 0; left: auto; width: auto; height: auto;
    flex-direction: row; align-items: center; gap: var(--sc-4);
    padding: var(--sc-3) var(--sc-gutter);
    border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent);
    overflow-x: auto; scrollbar-width: none;
    /* Opaque on phones: as a top bar, chapter text scrolls underneath it, and
       at 86% the type ghosts through. A left sidebar on desktop has nothing
       passing under it, so the translucency is only a problem here. */
    background: var(--paper);
  }
  .folio::-webkit-scrollbar { display: none; }
  .folio__mark { margin: 0; flex: 0 0 auto; }
  .folio__mark img { width: 92px; }
  .folio__list { display: flex; gap: var(--sc-4); flex: 1 1 auto; }
  .folio__link { grid-template-columns: auto; white-space: nowrap; padding: 2px 0; }
  .folio__link i { display: none; }
  .folio__foot { display: none; }
  /* A 104deg mask is computed across the box, so on a tall narrow viewport it
     sweeps straight through the centred copy instead of away from it. On
     phones the network is masked vertically to the top and bottom bands,
     leaving the band the headline occupies completely clear. */
  .netfig {
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 14%, transparent 25%, transparent 74%, #000 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 14%, transparent 25%, transparent 74%, #000 92%);
  }
  .inst { grid-template-columns: 1fr; gap: var(--sc-6); }
  .chart { position: static; }
  /* A pinned form cannot work on a phone: six questions plus a chart is ~1700px
     against an 844px viewport, so the last questions would be unreachable.
     Below 1080px the instrument becomes an ordinary flow section instead, and
     the page JS strips its act so the engine never pins it. */
  .no-pin .inst-stage { position: static; height: auto; min-height: 0; overflow: visible; display: block; padding-block: var(--sc-section); }
  .no-pin [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .media-col { grid-template-columns: 1fr; gap: var(--sc-6); }
  .masthead { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* taste.md: step the hero down one rung, or it wraps to six lines at 390px */
  .title-pg h1 { font-size: var(--sc-t-2xl); }
  .title-pg .tagline { font-size: var(--sc-t-lg); }
  .colophon__claim { font-size: var(--sc-t-2xl); }
  .shift-claim { font-size: var(--sc-t-xl); }
  .principle { grid-template-columns: 2.2rem 1fr; }
  .principle__b { grid-column: 2; }
  .outcome { grid-template-columns: 1fr; gap: var(--sc-2); }
  .practice { grid-template-columns: 2.2rem 1fr; }
  .contents a { grid-template-columns: 1fr; gap: var(--sc-2); }
  .masthead { grid-template-columns: 1fr; }
  .served__count { font-size: var(--sc-t-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; }
  .netfig .edge { stroke-dashoffset: 0; }
  .netfig .node { opacity: 0.9; }
}

/* Site-level links in the folio, under the in-page index. */
.folio__site { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: var(--rule-soft); }
@media (max-width: 1080px) { .folio__site { margin: 0; padding: 0; border: 0; } }

/* --- WCAG 2.2 SC 2.5.8, target size (minimum) ------------------------------
   Inline links inside a sentence are exempt by the "inline" exception, so the
   running-text CTAs are left alone. These are NOT inline: the folio is
   navigation, and the masthead lists put each link on its own line. */
@media (max-width: 1080px) {
  .folio__link { min-height: 24px; align-items: center; padding-block: 4px; }
}
.masthead ul li { margin-bottom: 2px; }
.masthead ul li a { display: inline-block; min-height: 24px; padding-block: 4px; }


/* --- Frontispiece: balances the centred title page, and is the slot for
       real photography once assets/photos/ is filled. ---------------------- */
.frontis { margin: var(--sc-8) auto 0; max-width: 72rem; width: 100%; }
.frontis__art { width: 100%; aspect-ratio: 24 / 7; background: var(--sand); border-radius: var(--sc-r-lg); overflow: hidden; }
.frontis__art svg { width: 100%; height: 100%; display: block; }
.frontis img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-lg); }
.frontis figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); line-height: 1.5; color: var(--stone); text-align: center; }
.frontis .edge { stroke: var(--plum); stroke-width: 1; fill: none; opacity: 0.45; }
.frontis .node { fill: var(--plum); opacity: 0.6; }
.frontis .node--lg { fill: var(--ember); opacity: 0.85; }
@media (max-width: 700px) {
  .frontis__art { aspect-ratio: 16 / 9; }
  .title-pg { padding-block: var(--sc-8) var(--sc-6); }
}

/* "In practice" line under each principle. Added 2026-11-07: the four
   principles are positioning, and a superintendent or policy reader scans for
   what will exist at the end that they can show a board. Every line below is
   recombined from GOYE AI's own existing material, not newly invented. */
.principle__w { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink);
  border-left: 2px solid var(--ember); padding-left: var(--sc-3); }
.principle__w b { display: block; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 3px; }

/* --- Skip link, WCAG 2.4.1 Bypass Blocks --------------------------------
   The margin folio puts 10 to 13 links before the content on every page, so
   a keyboard user otherwise tabs the whole index before reaching the article. */
.skip {
  position: absolute; left: var(--sc-4); top: -4rem; z-index: 999;
  background: var(--plum); color: var(--white); font-family: var(--sc-font-text);
  font-weight: 700; font-size: var(--sc-t-sm); padding: 10px 16px;
  border-radius: var(--sc-r-sm); text-decoration: none;
  transition: top var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus { top: var(--sc-4); }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* ===========================================================================
   NAVIGATION, rebuilt 2026-11-07 after the second-developer review.
   Findings addressed: the Readiness Hub carried zero site-level links; the
   folio mixed in-page anchors with site links so the site structure was not
   discoverable; mobile had a horizontally-scrolling strip rather than a menu.
   Site nav now comes FIRST on every page, in plain language, with the in-page
   contents beneath it as a clearly separate list.
   =========================================================================== */
.folio__h {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 var(--sc-2); padding-top: var(--sc-4);
  border-top: 1px solid color-mix(in oklab, var(--midnight) 12%, transparent);
}
.folio__h:first-of-type { padding-top: 0; border-top: 0; }
.folio__site { margin: 0 0 var(--sc-2); padding: 0; border: 0; }
.folio__sub { list-style: none; margin: 0 0 0 var(--sc-4); padding: 0; }
.folio__sub .folio__link { font-size: 0.72rem; }
.folio__link[aria-current="page"] { color: var(--plum); font-weight: 700; }
.folio__link[aria-current="page"] i { color: var(--ember); }
.folio nav, .folio > ul, .folio > ol { width: 100%; }
.folio__scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* the mobile menu button: hidden on desktop, where the folio is always open */
.navtoggle { display: none; }

@media (max-width: 1080px) {
  .navtoggle {
    display: inline-flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: calc(var(--sc-z-chrome) + 1);
    width: 100%; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent);
    background: var(--paper); color: var(--midnight);
    font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-sm);
    padding: 12px var(--sc-gutter); cursor: pointer; min-height: 48px; text-align: left;
  }
  .navtoggle:focus-visible { outline: 2px solid var(--plum); outline-offset: -3px; }
  .navtoggle__bars { display: inline-block; width: 17px; height: 2px; background: var(--plum); position: relative; }
  .navtoggle__bars::before, .navtoggle__bars::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: var(--plum);
    transition: transform var(--sc-d-fast) var(--sc-ease-out);
  }
  .navtoggle__bars::before { top: -5px; } .navtoggle__bars::after { top: 5px; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(5px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
  .navtoggle__mark { margin-left: auto; height: 22px; width: auto; }

  /* the folio becomes a conventional collapsible menu */
  .folio {
    position: sticky; top: 48px; left: auto; width: auto; height: auto; max-height: calc(100vh - 48px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sc-4) var(--sc-gutter) var(--sc-5);
    border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent);
    background: var(--paper); overflow-y: auto;
  }
  .folio[hidden] { display: none; }
  .folio__mark { display: none; }
  .folio__list { display: grid !important; gap: 0; }
  .folio__link { grid-template-columns: 1.9rem 1fr; white-space: normal; padding: 9px 0; min-height: 24px; }
  .folio__link i { display: inline; }
  .folio__foot { display: block; margin-top: var(--sc-4); padding-top: var(--sc-4);
    border-top: 1px solid color-mix(in oklab, var(--midnight) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .navtoggle__bars::before, .navtoggle__bars::after { transition: none; }
}

/* Provenance caveat under a claim that is counted but not yet qualified. */
.provenance { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); line-height: 1.6; color: var(--stone);
  border-left: 2px solid var(--ember); padding-left: var(--sc-3); max-width: 62ch; }

/* ===========================================================================
   EDITORIAL DEVICES, added 2026-11-07 after reviewing rand.org.
   The pages were dense and uniform: heading, paragraph, heading, paragraph.
   RAND breaks that with four things, adapted here to Warm Scholar:
     1. a full-bleed tinted STATEMENT BAND carrying one short line
     2. a tick-mark SECTION DIVIDER with a long rule
     3. inline PULL QUOTES that lift a sentence out of the body
     4. a big-numeral FIGURE block (real numbers only, per the brand rules)
   All four buy whitespace, which is what the density problem actually needs.
   =========================================================================== */

/* 1 · statement band ----------------------------------------------------- */
.band { padding-block: var(--sc-9); position: relative; overflow: hidden; }
.band--sand  { background: var(--sand); }
.band--paper { background: var(--paper); }
.band__inner { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); position: relative; z-index: 2; }
.band p.say {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--midnight); margin: 0; max-width: 20ch;
}
.band p.say em { font-style: italic; font-weight: 400; color: var(--plum); }
.band p.under { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); margin: var(--sc-5) 0 0; max-width: 34ch; }
.band .more { display: inline-block; margin-top: var(--sc-6); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.band .more:hover { text-decoration-thickness: 2px; }
/* the drawn network, used as a corner graphic the way RAND uses a halftone */
.band__art { position: absolute; inset: 0 -4% -30% 48%; z-index: 1; opacity: 0.3; pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(115deg, transparent 0%, #000 55%); }
.band__art svg { width: 100%; height: 100%; }
.band__art .edge { stroke: var(--plum); stroke-width: 1; fill: none; opacity: 0.5; }
.band__art .node { fill: var(--plum); opacity: 0.6; }
.band__art .node--lg { fill: var(--ember); opacity: 0.9; }

/* 2 · section divider ---------------------------------------------------- */
.divider { display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: var(--sc-3); margin-bottom: var(--sc-6); }
.divider::before { content: ""; width: 5px; height: 17px; background: var(--ember); display: block; }
.divider span { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--midnight); white-space: nowrap; }
.divider::after { content: ""; height: 1px; background: color-mix(in oklab, var(--midnight) 22%, transparent); display: block; }

/* 3 · pull quote --------------------------------------------------------- */
.pullq { margin: var(--sc-7) 0; padding-left: var(--sc-6); border-left: 3px solid var(--ember); max-width: 34ch; }
.pullq p { font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: var(--sc-t-xl); line-height: 1.32; color: var(--plum); margin: 0; }
.pullq cite { display: block; margin-top: var(--sc-3); font-style: normal; font-size: var(--sc-t-xs);
  font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stone); }
/* floated variant, so body text wraps around it instead of being interrupted */
@media (min-width: 1000px) {
  .pullq--side { float: right; width: 21rem; margin: var(--sc-2) 0 var(--sc-5) var(--sc-8); }
}

/* 4 · figure block. REAL numbers only. ----------------------------------- */
.figblock { max-width: 22ch; }
.figblock .lead-in, .figblock .trail { font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink); margin: 0; }
.figblock .num { font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem);
  line-height: 0.9; letter-spacing: -0.04em; color: var(--plum); margin: var(--sc-2) 0; font-variant-numeric: tabular-nums; }
.figblock .src { margin-top: var(--sc-4); font-size: var(--sc-t-xs); line-height: 1.6; color: var(--stone); }

/* more air between blocks, which is the actual fix for "pushed together" */
.sec, .mod { padding-block: clamp(4.5rem, 7.5vw, 8.5rem); }
.ch-head { margin-bottom: var(--sc-7); }
.ch-lede { font-size: var(--sc-t-lg); line-height: 1.6; max-width: 46ch; }
.body-text { max-width: 58ch; }

@media (max-width: 760px) {
  .band { padding-block: var(--sc-8); }
  .band__art { display: none; }
  .pullq { margin: var(--sc-6) 0; padding-left: var(--sc-4); }
}

/* --- Advisor roster. One person, one entry ------------------------------
   The page was organised by practice, so four people appeared twice or three
   times: 9 people across 14 entries, and two of the repeats carried identical
   role text. Inverting it (person as the row, practice as a tag) removes every
   repeat and makes cross-practice work visible at a glance. */
.advisors { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: var(--rule); }
.adv { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sc-5);
  padding-block: var(--sc-5); border-bottom: var(--rule-soft); align-items: baseline; }
.adv__id b { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg);
  color: var(--plum); display: block; line-height: 1.2; }
.adv__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--sc-2) 0 0; }
.adv__tags span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); border: 1px solid color-mix(in oklab, var(--crimson) 32%, transparent);
  border-radius: var(--sc-r-sm); padding: 3px 7px; white-space: nowrap; }
.adv__role { font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink); margin: 0; max-width: 54ch; }
@media (max-width: 760px) { .adv { grid-template-columns: 1fr; gap: var(--sc-3); } }

/* --- Tenets strip. The four principles, one line each, following the
       thesis they belong to. The longer "In practice" lines moved to
       services.html so the homepage carries the claim and the detail page
       carries the proof. -------------------------------------------------- */
/* sits on the same Sand ground as the Shift, so the two read as one
   movement: the claim, then the four commitments that follow from it. */
.sec--tight { padding-block: 0 clamp(4rem, 6vw, 7rem) !important; border-top: 0; }
.sec--tight .tenets { margin-top: 0; padding-top: var(--sc-6); }

.tenets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sc-5) var(--sc-6); margin-top: var(--sc-8); padding-top: var(--sc-6);
  border-top: 1px solid color-mix(in oklab, var(--midnight) 20%, transparent); }
.tenets > div { border-top: 2px solid var(--ember); padding-top: var(--sc-3); }
.tenets b { display: block; font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-base); color: var(--plum); line-height: 1.25; margin-bottom: 6px; }
.tenets p { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink); margin: 0; }
.tenets__more { grid-column: 1 / -1; margin: var(--sc-2) 0 0; }

/* One solid primary action per page. Everything else stays running text, so
   the chaptered-editorial voice holds and the primary step is unmistakable. */
.cta {
  display: inline-block; font-family: var(--sc-font-text); font-weight: 700;
  font-size: var(--sc-t-base); color: var(--white); background: var(--plum);
  border: 1px solid var(--plum); border-radius: var(--sc-r-sm);
  padding: 13px 22px; text-decoration: none; min-height: 24px;
  transition: background var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { background: #4d0157; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.title-pg .acts { align-items: center; }

/* --- Frameworks accordion ------------------------------------------------
   "Frameworks" was a grey, unclickable label with its two children always
   open, which read as dead text. It is now a real disclosure button: the
   group collapses, and it starts open when you are already on one of its
   pages. Matches the "Frameworks" dropdown the previous site had. */
.folio__grp { display: block; }
.folio__toggle {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); line-height: 1.3;
  color: var(--stone); display: grid; grid-template-columns: 2.1rem 1fr auto;
  gap: var(--sc-2); align-items: center; padding: 5px 0; min-height: 24px;
}
.folio__toggle:hover { color: var(--plum); }
.folio__toggle:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: var(--sc-r-sm); }
.folio__toggle .chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-right: 3px; transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.folio__toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.folio__toggle[aria-expanded="true"] { color: var(--plum); font-weight: 700; }
.folio__sub[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .folio__toggle .chev { transition: none; } }

/* --- Advisor portraits ---------------------------------------------------
   Real photographs, carried over from the previous GOYE AI collaborators
   page. One advisor has no photograph on record and gets a monogram rather
   than a stock face: inventing a likeness for a named person is not an
   option the brand rules allow. */
.adv { grid-template-columns: 64px minmax(0, 19rem) minmax(0, 1fr); align-items: start; }
.adv__pic {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--sand); border: 1px solid color-mix(in oklab, var(--midnight) 12%, transparent);
}
.adv__pic--mono {
  display: grid; place-items: center; font-family: var(--sc-font-display);
  font-weight: 700; font-size: 1.15rem; color: var(--plum); letter-spacing: 0.02em;
}
.adv__id { padding-top: 2px; }
.adv__role { padding-top: 2px; }
@media (max-width: 760px) {
  .adv { grid-template-columns: 56px 1fr; gap: var(--sc-4) var(--sc-4); }
  .adv__pic { width: 56px; height: 56px; }
  .adv__role { grid-column: 2; }
}

/* ===========================================================================
   COLLAPSIBLE NAVIGATION (desktop)
   The folio was a permanently fixed 208px column with no way to dismiss it.
   It now slides off-screen on request at every width, and the choice is
   remembered across pages, since a sidebar that reopens on every click is
   worse than one that never closes.
   =========================================================================== */
@media (min-width: 1081px) {
  .navtoggle {
    display: inline-flex; align-items: center; gap: 9px;
    position: fixed; top: var(--sc-4); left: var(--sc-4); z-index: calc(var(--sc-z-chrome) + 2);
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in oklab, var(--midnight) 16%, transparent);
    border-radius: var(--sc-r-sm); cursor: pointer;
    font-family: var(--sc-font-text); font-weight: 700; font-size: 0.74rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum);
    padding: 9px 13px; min-height: 24px;
    transform: translateX(var(--folio-w));
    transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
  }
  .navtoggle:hover { background: var(--paper); }
  .navtoggle:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
  .navtoggle__mark { display: none; }
  /* the bars are styled in the narrow block; repeat them here so the desktop
     pill reads as a control rather than a stray word */
  .navtoggle__bars { display: inline-block; width: 15px; height: 2px; background: var(--plum); position: relative; }
  .navtoggle__bars::before, .navtoggle__bars::after {
    content: ""; position: absolute; left: 0; width: 15px; height: 2px; background: var(--plum);
    transition: transform var(--sc-d-fast) var(--sc-ease-out);
  }
  .navtoggle__bars::before { top: -5px; } .navtoggle__bars::after { top: 5px; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(5px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

  .folio { transition: transform var(--sc-d-base) var(--sc-ease-out), visibility 0s 0s; }
  .page  { transition: margin-left var(--sc-d-base) var(--sc-ease-out); }

  /* collapsed: slide out, then drop out of the tab order */
  html.nav-closed .folio { transform: translateX(-100%); visibility: hidden;
    transition: transform var(--sc-d-base) var(--sc-ease-out), visibility 0s var(--sc-d-base); }
  html.nav-closed .page { margin-left: 0; }
  html.nav-closed .navtoggle { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .folio, .page, .navtoggle { transition: none !important; }
}

/* An advisor name that links out to their own site. Reads as a hyperlink at
   rest, and changes colour plus gains a highlight on hover, so there is no
   doubt it is clickable. */
.adv__link {
  color: var(--plum); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--plum);
  border-radius: 3px; padding: 1px 4px; margin-left: -4px;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out),
              text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.adv__link::after {
  content: "\2197"; font-family: var(--sc-font-text); font-weight: 400;
  font-size: 0.62em; margin-left: 5px; vertical-align: 0.28em;
  text-decoration: none; display: inline-block; color: var(--ember);
}
.adv__link:hover, .adv__link:focus-visible {
  color: var(--crimson);
  text-decoration-color: var(--crimson);
  text-decoration-thickness: 3px;
  background-color: color-mix(in oklab, var(--sand) 72%, transparent);
}
.adv__link:hover::after, .adv__link:focus-visible::after { color: var(--crimson); }
.adv__link:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 2px; }