/* =========================================================================
   schoolio.org — Design Tokens
   Drop this file into app/assets/stylesheets/ and @import "tokens";
   Canonical copy. Pairs with ../../../brandAssets/STYLE-GUIDE.md
   (sibling of Website/, at BuildingSchoolio/brandAssets/).
   v0.1 — April 2026
   ========================================================================= */

/* --- Box-sizing reset --------------------------------------------------- *
 * Universal border-box so `width` + `padding` no longer overflow. Without
 * this, .container (`width: min(100%, 1200px); padding-inline: var(--gutter)`)
 * was 48px wider than the viewport on mobile and pushed prose past the
 * right edge. Every modern stylesheet starts with this; we just hadn't.
 * ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* --- Fonts (self-host WOFF2 in app/assets/fonts; stubs below) ---------- */

/*  Educating body sans — Source Sans 3                                    */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSans3-VariableFont_wght.woff2")
       format("woff2-variations");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSans3-Italic-VariableFont_wght.woff2")
       format("woff2-variations");
}

/*  Learning body serif — Source Serif 4                                   */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-VariableFont_opsz,wght.woff2")
       format("woff2-variations");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-Italic-VariableFont_opsz,wght.woff2")
       format("woff2-variations");
}

/*  Utility mono — IBM Plex Mono                                           */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

/* --- Custom properties -------------------------------------------------- */

:root {
  /* Color — core */
  --ink: #1C1C1C;
  --paper: #FBF6EA;
  --paper-2: #EADFC2;
  --highlighter: #FFC107;
  --highlighter-soft: #FDE79A;
  --ink-blue: #1F3A63;
  --chalkboard: #2F4A3A;
  --chalk: #EDE9E2;
  --terracotta: #C46B5B;
  --terracotta-hover: #B05B4B;
  --rose: #F1D3CA;

  /* Color — semantic aliases */
  --bg: var(--paper);
  --fg: var(--ink);
  --link: var(--ink-blue);
  --link-underline: rgba(31, 58, 99, 0.35);
  --surface-card: var(--paper-2);
  --surface-chalkboard: var(--chalkboard);
  --cta-primary-bg: var(--terracotta);
  --cta-primary-fg: var(--paper);
  --cta-primary-bg-hover: var(--terracotta-hover);
  --focus-ring: var(--ink-blue);

  /* Typography — families */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-educating: "Source Sans 3", system-ui, -apple-system, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;
  --font-learning: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* Typography — scale (1.250 major third, anchored at 16px) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* Typography — leading */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Spacing scale (px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --prose-max: 65ch;
  --gutter: clamp(24px, 4vw, 48px);

  /* Strokes and radii */
  --hairline: 1px solid var(--ink);
  --rule-heavy: 2px solid var(--ink);
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shadows (paper, not digital) */
  --shadow-paper: 4px 4px 0 0 rgba(28, 28, 28, 0.12);

  /* Motion */
  --ease-paper: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
}

/* --- Baseline ------------------------------------------------------------ */

html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-educating);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Learning-column pages opt in by adding .col-learning to <body> or a section */
.col-learning {
  font-family: var(--font-learning);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
}

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  /* Let the variable serif set its contrast automatically by size, so
     hairline strokes (e.g. the crossbar of a capital H) stay solid. */
  font-optical-sizing: auto;
}

/* Opt-in: a deliberately line-broken heading keeps each line on one line at
   desktop widths, running past the right edge of its column into the gutter
   rather than wrapping. Below the breakpoint it wraps normally so it never
   overflows a narrow screen. */
@media (min-width: 52rem) {
  .display--nowrap-lg { white-space: nowrap; }
}

h1, .h1 { font-size: var(--fs-60); }
h2, .h2 { font-size: var(--fs-48); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-36); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-30); line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--fs-24); line-height: var(--lh-snug); }
h6, .h6 { font-size: var(--fs-20); line-height: var(--lh-snug); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-14); }

/* Hero */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

/* --- Prose -------------------------------------------------------------- */

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--prose-max);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--link-underline);
  transition: text-decoration-color var(--dur-fast) var(--ease-paper);
}
a:hover { text-decoration-color: var(--link); }

strong { font-weight: 700; }
em { font-style: italic; }

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--highlighter-soft);
  border-left: 4px solid var(--highlighter);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* --- The signature highlight mark --------------------------------------- */
/*
 * Draws a hand-shaped yellow oval behind a run of inline text.
 * Use: <span class="highlight-mark">…</span>
 */
.highlight-mark {
  background:
    radial-gradient(
      ellipse 110% 85% at 50% 55%,
      var(--highlighter) 60%,
      rgba(255, 193, 7, 0.85) 72%,
      rgba(255, 193, 7, 0) 78%
    );
  padding: 0.08em 0.35em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Reduced-motion users get a plain fill instead of animated stroke */
@media (prefers-reduced-motion: reduce) {
  .highlight-mark { background: var(--highlighter-soft); }
}

/* --- Layout primitives -------------------------------------------------- */

.container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--prose-max);
  margin-inline: auto;
}

.paper {
  background: var(--paper);
  border-top: var(--hairline);
  padding: var(--sp-6) 0;
}

.paper-card {
  background: var(--paper-2);
  padding: var(--sp-6);
  box-shadow: var(--shadow-paper);
  border-radius: var(--radius-md);
}

.chalkboard-panel {
  background: var(--chalkboard);
  color: var(--chalk);
  padding: var(--sp-7) var(--sp-6);
}
.chalkboard-panel a { color: var(--highlighter); }

/* --- Two-Column signature block ----------------------------------------- */

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.two-column > .col-educating {
  background: var(--rose);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
}
.two-column > .col-learning {
  background: var(--chalkboard);
  color: var(--chalk);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  font-family: var(--font-learning);
}
.two-column .col-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}
@media (max-width: 720px) {
  .two-column { grid-template-columns: 1fr; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-educating);
  font-size: var(--fs-16);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-paper),
              color var(--dur-fast) var(--ease-paper),
              border-color var(--dur-fast) var(--ease-paper);
}

.btn-hope {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-fg);
}
.btn-hope:hover { background: var(--cta-primary-bg-hover); }

.btn-blue {
  background: var(--ink-blue);
  color: var(--paper);
}
.btn-blue:hover { background: #172C4B; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--highlighter-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink-blue);
  padding-inline: 0;
}

/* --- Nav ---------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--gutter);
  background: var(--paper);
  border-bottom: var(--hairline);
}
.nav a { text-decoration: none; color: var(--ink); font-size: var(--fs-16); }
.nav a.is-active {
  /* Selected-page indicator: ink-blue (the logo's "organisation" colour).
     A true text underline — so it hugs the label's own width rather than the
     item's full box — lifted well clear of the nav's bottom hairline so it
     reads as "this item" and not as part of the divider. text-decoration
     adds no box height, so there's no layout shift vs inactive items, and
     the yellow highlighter stays reserved as the rarer spark accent. */
  color: var(--ink-blue);
  text-decoration: underline;
  text-decoration-color: var(--ink-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Current-SECTION indicator. When the active page is a link buried inside a
   dropdown, that link is hidden at rest, so the top bar would show nothing.
   :has() lets the always-visible parent label carry the same underline
   whenever the current page lives anywhere in its dropdown. The label text is
   wrapped in .nav-group__label-text so the underline hugs the words and skips
   the caret (▾), which sits in a sibling span. */
.nav-group:has(.is-active) > .nav-group__label .nav-group__label-text,
.nav-group--linked:has(.is-active) > .nav-group__label .nav-group__label-text {
  color: var(--ink-blue);
  text-decoration: underline;
  text-decoration-color: var(--ink-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* --- Forms (pen-and-paper) --------------------------------------------- */

.field {
  display: block;
  margin-bottom: var(--sp-5);
}
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
.field-input,
.field-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  padding: var(--sp-2) 0;
  font-family: var(--font-educating);
  font-size: var(--fs-18);
  color: var(--ink);
  outline: none;
}
.field-input::placeholder,
.field-textarea::placeholder { color: rgba(28, 28, 28, 0.5); }
.field-input:focus,
.field-textarea:focus {
  border-bottom: 2.5px solid var(--ink-blue);
}

/* --- Cards, captions, labels ------------------------------------------- */

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Eva Fugitt & Marva Collins: the mono labels that head the outcome
   statement ("THE OUTCOME", "HOW? SOLVE THE BEAUTIFUL PROBLEM") read a
   touch small against the h5 lines beneath them. Size them up a step,
   scoped to the narrow outcome block so other mono labels are untouched. */
.lead-statement--narrow .mono-label {
  font-size: var(--fs-16);
  letter-spacing: 0.06em;
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--ink);
  opacity: 0.8;
  margin-top: var(--sp-2);
}

/* --- Oval portrait frame (for historical figures and team) ------------- */

.oval-frame {
  width: 160px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.oval-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Video embed block -------------------------------------------------- */

.video-embed {
  position: relative;
  background: var(--paper-2);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}
.video-embed::before,
.video-embed::after {
  /* paper "tabs" — two short vertical strokes on the left edge */
  content: "";
  position: absolute;
  left: -2px;
  width: 4px;
  background: var(--ink);
  border-radius: 0 2px 2px 0;
}
.video-embed::before { top: 24px; height: 28px; }
.video-embed::after  { top: 64px; height: 28px; }

.video-embed__frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-embed__frame iframe,
.video-embed__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-embed__caption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--ink);
}

/* --- FAQ accordion ------------------------------------------------------ */

.faq-item {
  border-bottom: var(--hairline);
  padding: var(--sp-5) 0;
}
.faq-q {
  font-family: var(--font-learning);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 400;
  transition: transform var(--dur-med) var(--ease-paper);
}
.faq-item[open] .faq-q::after { content: "×"; }
.faq-a {
  font-family: var(--font-learning);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-top: var(--sp-3);
  max-width: var(--prose-max);
}

/* --- Evidence strip ----------------------------------------------------- */

.evidence-strip {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  padding: var(--sp-5) 0;
}
.evidence-strip .item {
  flex: 0 0 auto;
  text-align: center;
  width: 180px;
}
.evidence-strip .item .caption { margin-top: var(--sp-3); }

/* --- Focus ring (accessibility) ---------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Utility: paper page container for long-form reading --------------- */

.page-paper {
  background: var(--paper);
  padding-block: var(--sp-8);
}
.page-paper .prose p { margin-bottom: var(--sp-5); }
.page-paper h2 { margin-top: var(--sp-7); }

/* --- Inline media inside prose ----------------------------------------- */

/* Utility: extra top spacing for a heading or block that needs to feel
   like a fresh beat — e.g. an inline subheading just before a figure.
   Use sparingly; section-level rhythm should come from the parts list,
   not from utility classes. */
.prose .pad-top,
.prose-pad-top { margin-top: var(--sp-7); }

/* Opt-in extra breathing room between bullets in a prose list. */
.prose ul.spaced-list > li + li { margin-top: var(--sp-3); }

/* Utility: collapse top spacing so a follow-up heading/block sits
   flush against the one above it — e.g. a color-2 follow-up line that
   should read as a continuation rather than a new beat. */
.prose .tight-top,
.prose-tight-top { margin-top: 0; }

.prose figure {
  margin: var(--sp-5) 0;
}
.prose figure video,
.prose video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
}

/* A single, centered book-cover figure sitting on a paper mat — used to
   showcase a book jacket (e.g. GRIT on the Angela Duckworth page). */
.prose figure.book-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.prose figure.book-cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 340px;
  background: var(--paper-2);
  padding: .75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}
.prose figure.book-cover figcaption {
  margin-top: var(--sp-2);
  font-size: .9rem;
  color: var(--ink);
  opacity: .75;
}

/* --- Print: make it actually print like paper -------------------------- */

@media print {
  body { background: white; color: black; font-size: 11pt; }
  .nav, .btn, .video-embed { display: none; }
  a { color: black; text-decoration: underline; }
}