/* =========================================================================
   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) ---------- */

/*  Display serif — Fraunces (variable)                                    */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2")
       format("woff2-variations");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff2")
       format("woff2-variations");
}

/*  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: #F3ECD6;
  --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-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 {
  background:
    radial-gradient(
      ellipse 110% 90% at 50% 60%,
      var(--highlighter) 55%,
      rgba(255, 193, 7, 0) 78%
    );
  padding: 0.15em 0.5em;
}

/* --- 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; }
}