/* Rules used only by /schools/, /schools/microsites/ and the article pages.
   Split out of home.css on 2026-09-11 so the home page loads less. */

/* ---------- Schools service (/schools/) and the writing pages ----------
   Added 2026-09-04. Everything here reuses the page's own vocabulary:
   the dark page head, hairline ledger rows, solid gold-deep serif numerals
   and the prose measure. No cards, no icons, no shadows, no new colours. */

/* Page head: the statement, its grounding line, the framing and one action */
.page-head-schools .section-title { max-width: 18ch; }
.page-head-frame {
  /* the offer in one line, at the lede's size so the statement above it
     stays the only headline */
  margin: 1.4rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--cream-on-dark);
  max-width: 34rem;
}
.page-head-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* Statement on the left, short paragraphs on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split-copy p { margin: 0 0 1.1rem; max-width: 40rem; }
.split-copy p:last-child { margin-bottom: 0; }
.split-copy .lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--ink); }
.split-copy .rule-list { margin-top: 1.6rem; }
.split-copy .rule-list + p { margin-top: 1.6rem; }
.split-copy .text-link { font-weight: 600; }

/* Hairline lists, the package list's dot one size up, ruled like the ledger */
.rule-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cream-edge); }
.rule-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-bottom: 1px solid var(--cream-edge);
  color: var(--ink);
  font-size: 0.98rem;
}
.rule-list li::before { content: "\00b7"; position: absolute; left: 0.2rem; color: var(--gold-deep); font-weight: 700; }
.rule-list-title { font-size: 1.35rem; margin: 0 0 0.9rem; }
/* Two columns of the same rows, sharing one top rule */
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }

/* The audit: what I show you beside what you get, the terms beneath */
.audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.audit-terms {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-edge);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.4rem 2.5rem;
}
.term-label {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
}
.term-value { margin: 0; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); line-height: 1.25; }
.audit-note { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; max-width: 46rem; color: var(--ink-soft); }
.audit-cta { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

/* Placeholder marker. Loud on purpose, so an unfinished line can never
   slip out by accident. Delete the span once the real words are in. */
.todo {
  display: inline-block;
  background: #FFE28A;
  color: #4A3600;
  padding: 0.12em 0.5em;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: baseline;
}

/* Statement band: one idea with room around it */
.statement .section-title { max-width: 26ch; }
.statement .section-intro { max-width: 40rem; }

/* The questions: numbered because the brief numbers them, the audit
   works through them in this order */
.q-list {
  list-style: none;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--cream-edge);
  counter-reset: q;
  max-width: 58rem;
}
.q-list li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.25rem 1.2rem;
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--cream-edge);
}
.q-list li::before {
  counter-increment: q;
  content: counter(q, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-deep);
  padding-top: 0.1rem;
}
.q-list h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); }
.q-list p { grid-column: 2; margin: 0; color: var(--ink-soft); font-size: 0.98rem; max-width: 40rem; }

/* Why me: the one photograph on the page is the person, not a classroom */
.why-portrait { max-width: 22rem; margin-top: 1.8rem; }
.why-lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.35; color: var(--ink); margin: 0 0 1.4rem; }
.split-copy .why-lead { max-width: 40rem; }
.split-copy .rule-list-title { margin-top: 2rem; }

/* Evidence (dark band): the anonymised audit extract. The same ruled
   lists as the cream sections, on the dark ground. */
.extract { margin: clamp(2.4rem, 5vw, 3.5rem) 0 0; padding-top: 1.6rem; border-top: 1px solid var(--hairline-dark); }
.extract-cap p { margin: 0; }
.extract-cap p + p { font-size: 0.95rem; max-width: 40rem; }
.extract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-top: 1.8rem;
}
.extract h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); margin-bottom: 0.9rem; }
.extract h3 + .extract-list + h3 { margin-top: 2rem; }
.extract-lead { margin: 0 0 1.2rem; color: var(--cream-on-dark); max-width: 36rem; }
.band-dark .rule-list { border-top-color: var(--hairline-dark); }
.band-dark .rule-list li { border-bottom-color: var(--hairline-dark); color: var(--soft-on-dark); }
.band-dark .rule-list li::before { color: var(--gold-bright); }
/* numbered where the order is a priority order */
ol.extract-list { counter-reset: x; }
ol.extract-list li { padding-left: 2.2rem; }
ol.extract-list li::before {
  counter-increment: x;
  content: counter(x, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.05rem;
  left: 0;
  top: 0.95rem;
}
/* Evidence (dark band): the case study entries */
/* One case study: the frame on the left, the reasoning on the right.
   The frame reuses the work card's screen, without the card around it. */
.case-list { margin-top: clamp(2.4rem, 5vw, 3.5rem); }
.case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.6rem clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-dark);
  align-items: start;
}
.case-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--hairline-dark-soft) inset;
}
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 0.7rem; }
.case p { margin: 0 0 1rem; max-width: 40rem; }
.case-now { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; border-top: 1px solid var(--hairline-dark); max-width: 46rem; }
.case-now p { margin: 0 0 0.8rem; }
.case-now .work-link { display: inline-block; margin-top: 0.2rem; }

/* Writing: the articles as ledger rows */
.article-list { border-top: 1px solid var(--cream-edge); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.article-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  align-items: baseline;
  padding-block: clamp(1.2rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--cream-edge);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--ease);
}
.article-row:hover { background: rgba(201, 168, 76, 0.06); }
.article-meta { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.article-title { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); transition: color 0.3s var(--ease); }
.article-row:hover .article-title { color: var(--gold-deep); }
.article-row:hover .ledger-cue { transform: translateX(6px); }
/* Columns pinned: an item with an explicit row is placed before the
   automatic ones, so the arrow would otherwise take the first column */
.article-meta { grid-column: 1; grid-row: 1; }
.article-title { grid-column: 2; grid-row: 1; }
.article-summary { grid-column: 2; grid-row: 2; margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 40rem; }
.article-row .ledger-cue { grid-column: 3; grid-row: 1 / 3; align-self: center; }

/* The close, on the lifted ground the testimonials use, so it reads as
   its own room after the dark evidence band */
.close-band { background: var(--bg-surface); border-top: 1px solid var(--hairline-dark); text-align: center; }
.close-band .section-title { max-width: 20ch; margin-inline: auto; }
.close-band .section-intro { margin-inline: auto; }
.close-band .btn { margin-top: 2rem; }
.close-alt { margin: 1.6rem 0 0; font-size: 0.95rem; }
.close-alt a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.close-alt a:hover { color: var(--gold); }

/* ---------- Article pages (/schools/<slug>/) ----------
   Title, date and category in the dark head; the body on cream at the
   prose measure, with screenshots allowed to break out wider so they can
   actually be inspected on a desktop. */
.article-byline {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft-on-dark);
}
.article-byline time, .article-cat { color: var(--gold-bright); }
.article-body > * { max-width: 46rem; }
.article-body h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 2.8rem 0 0.8rem; }
.article-body > h2:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: 0.4rem; }
/* Screenshots: wide, ruled, captioned */
.shot { margin: clamp(2rem, 4vw, 3rem) 0; max-width: 68rem; }
.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-edge);
  background: var(--paper);
}
.shot figcaption { margin-top: 0.75rem; font-size: 0.88rem; color: var(--ink-soft); max-width: 46rem; }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.shot-pair figcaption { grid-column: 1 / -1; }
.shot-label { display: block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); margin-bottom: 0.5rem; }
/* A highlighted observation: the emphasis device, at pull size */
.pull {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--gold-deep);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
}
.pull p { margin: 0; font-size: inherit; }
/* gold-deep, not emphasis-warm: at pull size on a phone this is small text,
   and gold-deep is the gold that clears 4.5:1 on cream */
.pull em { font-style: italic; font-weight: 340; color: var(--gold-deep); }
/* Explanatory text beside the argument: set apart, quieter */
.aside-note {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.aside-note p { margin: 0; }
.aside-note p + p { margin-top: 0.7rem; }
.article-related { margin-top: clamp(3rem, 6vw, 4.5rem); }
.article-related h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }

@media (max-width: 880px) {
  .split, .audit-grid, .case, .rule-grid, .shot-pair, .extract-grid { grid-template-columns: 1fr; }
  .q-list li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .q-list li::before { font-size: 1.8rem; }
  .article-row { grid-template-columns: minmax(0, 1fr) auto; }
  .article-meta { grid-column: 1 / -1; grid-row: 1; }
  .article-title { grid-column: 1; grid-row: 2; }
  .article-summary { grid-column: 1; grid-row: 3; }
  .article-row .ledger-cue { grid-column: 2; grid-row: 2 / 4; align-self: center; }
  .page-head-actions .btn { width: 100%; }
  .why-portrait { max-width: 18rem; }
}

/* The schools entry row on the home page: one ledger row between the
   process and the work, tighter than a full section */
.entry-schools.section { padding-block: 0 var(--section-y); }
.entry-schools .ledger { border-top-color: var(--cream-edge); }

/* How the audit is done: the sequence Amy actually follows, so it is
   numbered. Sits inside the audit section above the two lists. */
.audit-method { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.audit-method .lead { margin: 0; max-width: 32rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
.method-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cream-edge);
  counter-reset: m;
}
.method-list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--cream-edge);
  font-size: 0.98rem;
}
.method-list li::before {
  counter-increment: m;
  content: counter(m, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-deep);
}
.method-note { grid-column: 2; margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 880px) {
  .method-note { grid-column: 1; }
}
.audit-method { row-gap: 0; }