/* ==========================================================================
   Counsify — counsify.ai landing styles.

   IDENTITY: r3 "The Refined Catalog", ported 2026-08-23 (Phase 1, the landing
   surface). **EMBER IS RETIRED** — see docs/architecture/r3-token-map.md T-2.
   Primary is ink; gold has exactly one job (SADIE proposes); deep red is the
   route and destruction only.

   THIS FILE IS A TRANSLATION, NOT A COPY. The app's identity lives in
   frontend/src/index.css as OKLCH inside Tailwind's @theme. That file is the
   source of truth. counsify.ai is a static site with no build step and no
   bundle, so every token below is the sRGB equivalent of its OKLCH original,
   converted with the same instrument that measured the contrast table in the
   token map — never transcribed by eye. The OKLCH original is written beside
   each value, and an @supports block re-declares them in OKLCH so modern
   browsers get the exact colour rather than the 8-bit rounding.
   **If a token changes in index.css, it changes here in the same session.**

   CSP (deploy/nginx.conf.draft, the counsify.ai server block):
       default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self'
   So: no JavaScript anywhere on this site (default-src 'none' — not even a
   self-hosted file), no inline <style> or style="" (style-src has no
   'unsafe-inline'), no external anything. Fonts are self-hosted below.
   ⚠ A Google Fonts <link> fails SILENTLY here and drops the whole type system
   to Georgia — token map §3.5. There is none. Keep it that way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — self-hosted, latin subset, variable weight axis. Same three families
   the app loads via @fontsource, same files, so a visitor crossing
   counsify.ai → try.counsify.ai never sees the typeface change.
   No italic face is shipped: nothing on this page is set in italics, and the
   file would be 40KB for a synthesised slant nobody sees.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lora Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/lora-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/nunito-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens. Hex first so a browser without OKLCH still gets the right colour;
   the @supports block below hands modern browsers the exact original.
   Contrast ratios are measured, not estimated — the full table is in
   docs/architecture/r3-token-map.md §1.
   -------------------------------------------------------------------------- */
:root {
  --paper: #fcfaf7;          /* oklch(0.9858 0.0045 78.3)    page ground      */
  --paper-deep: #f5f1e9;     /* oklch(0.959 0.0115 84.58)    alternate ground */
  --sheet: #ffffff;          /* oklch(1 0 0)                 the sheet        */

  --ink: #1a1a1c;            /* oklch(0.2186 0.0039 286.08)  16.68:1 on paper */
  --ink-700: #3d3a36;        /* oklch(0.3501 0.008 75.3)     10.85:1          */
  --ink-500: #5c5850;        /* oklch(0.4616 0.0137 84.59)    6.79:1          */
  --ink-400: #736d60;        /* oklch(0.536 0.021 84.59)      4.93:1 / 4.56:1 */

  --hairline: #e8e2d4;       /* oklch(0.9137 0.0198 87.52)   rules and edges  */
  --hairline-soft: #f0ede6;  /* oklch(0.9465 0.0099 87.47)   the quietest     */

  /* Gold: SADIE proposes, and nothing else. 2.27:1 — border/decoration only. */
  --gold: #d4a03c;           /* oklch(0.7371 0.1293 80.32)                    */
  --gold-ink: #8b5600;       /* oklch(0.5 0.112 70)           5.88:1 as TEXT  */
  --gold-soft: #f6e8c8;      /* oklch(0.9339 0.0447 87.19)                    */

  /* Route: the route, emphasis, destruction. Never decoration. */
  --route: #9e1f27;          /* oklch(0.4577 0.162 23.66)     7.52:1 on paper */
  --satisfied: #2f6b45;      /* oklch(0.4769 0.0881 153.61)                   */
  --satisfied-soft: #e4eee6; /* oklch(0.9394 0.015 151.76)    5.34:1 pair     */
  --open: #b25105;           /* oklch(0.5493 0.1455 49)       5.16:1 on sheet */
  --open-soft: #fdf3e3;      /* oklch(0.9677 0.0237 79.74)    4.69:1 pair     */

  /* One focus indicator for the whole site. T-1: r3's gold ring measures
     2.10–2.36:1 and fails SC 1.4.11 on every ground in the system; ink is r3's
     own answer where it had to give one, and it keeps gold free for its job. */
  --focus: #1a1a1c;

  /* The ink band composites, resolved to solids so no alpha maths is trusted
     at render time. r3 sets its ink-band eyebrow in gold-ink — 2.84:1 on ink,
     a 1.4.3 failure we do not import (see the report). Muted paper instead:
     8.67:1, and it does not spend the proposal colour on a section label. */
  --on-ink: #fcfaf7;         /* 16.68:1 on ink                                */
  --on-ink-muted: #b8b7b5;   /* paper at 70% over ink — 8.67:1                */
  --on-ink-rule: #474748;    /* paper at 20% over ink — a rule, not text      */

  --display: "Lora Variable", ui-serif, Georgia, serif;
  --sans: "Nunito Sans Variable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --radius: 0.25rem;         /* r3's radius: nearly square. Paper, not plastic */
  --radius-card: 1rem;
  --touch: 2.75rem;          /* 44px — WCAG 2.2 AA target size                */
  --gutter: 1.5rem;
  --measure: 72rem;          /* the page container                            */

  --shadow-sheet: 0 1px 2px rgb(26 26 28 / 0.05),
    0 18px 40px -22px rgb(26 26 28 / 0.18);
}

/* Modern browsers: take the OKLCH original, not the 8-bit rounding of it. */
@supports (color: oklch(0.5 0.1 90)) {
  :root {
    --paper: oklch(0.9858 0.0045 78.3);
    --paper-deep: oklch(0.959 0.0115 84.58);
    --sheet: oklch(1 0 0);
    --ink: oklch(0.2186 0.0039 286.08);
    --ink-700: oklch(0.3501 0.008 75.3);
    --ink-500: oklch(0.4616 0.0137 84.59);
    --ink-400: oklch(0.536 0.021 84.59);
    --hairline: oklch(0.9137 0.0198 87.52);
    --hairline-soft: oklch(0.9465 0.0099 87.47);
    --gold: oklch(0.7371 0.1293 80.32);
    --gold-ink: oklch(0.5 0.112 70);
    --gold-soft: oklch(0.9339 0.0447 87.19);
    --route: oklch(0.4577 0.162 23.66);
    --satisfied: oklch(0.4769 0.0881 153.61);
    --satisfied-soft: oklch(0.9394 0.015 151.76);
    --open: oklch(0.5493 0.1455 49);
    --open-soft: oklch(0.9677 0.0237 79.74);
    --focus: oklch(0.2186 0.0039 286.08);
    --shadow-sheet: 0 1px 2px oklch(0.2186 0.0039 286.08 / 0.05),
      0 18px 40px -22px oklch(0.2186 0.0039 286.08 / 0.18);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The page itself never scrolls sideways (WCAG 1.4.10 Reflow). `clip` rather
   than `hidden` so nothing silently becomes a scroll container. Any element
   wider than the viewport owns its own overflow-x — see .rail below. */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* One focus indicator for the whole site (T-1). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On an ink ground the ink ring is invisible, so the band flips it to paper.
   Same rule, inverted for its ground — not a second focus style. */
.band :focus-visible {
  outline-color: var(--on-ink);
}

/* Visually hidden, still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — one of the four accessibility guarantees r3 does not have and
   the port is forbidden from importing the absence of (protocol §4). */
.skip {
  position: absolute;
  left: 0.75rem;
  top: -100%;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 1.25rem;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip:focus {
  top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

/* Small-caps mono label above a section or a sheet. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-400);
}

/* A paper sheet on the desk: the one container primitive. */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sheet);
}

.mono {
  font-family: var(--mono);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* A page section. Tone alternates paper / paper-deep; hairlines do the
   separating, never a shadow and never a box. */
.section {
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}

.section--deep {
  background: var(--paper-deep);
}

/* The top bar is sticky, so an anchored section would otherwise land with its
   first line hidden underneath it. */
.section,
.band,
.hero {
  scroll-margin-top: 4.5rem;
}

.section > .wrap {
  padding-block: 4.5rem;
}

.section h2 {
  max-width: 34ch;
  font-size: clamp(1.625rem, 1.15rem + 2.1vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Reading paragraph. Never below 16px. */
.lede {
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-500);
}

.lede--strong {
  color: var(--ink-700);
}

/* Vertical rhythm. The reset sets `p { margin: 0 }`, so flow spacing between
   stacked blocks is restored here explicitly rather than inherited from the
   UA — one rule, one gap, everywhere a section stacks prose. */
.section .eyebrow + h2 {
  margin-top: 0.85rem;
}

h2 + .lede,
h2 + .note,
.lede + .lede,
.lede + .note,
.note + .lede {
  margin-top: 1rem;
}

.note {
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-400);
}

/* The one primary action: ink fill, generous target. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.75rem 1.75rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.btn:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
}

/* Quiet secondary action: hairline outline on paper. */
.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}

.btn--quiet:hover {
  background: var(--paper-deep);
  border-color: var(--ink-400);
  color: var(--ink);
}

/* On the ink band the fill inverts: paper on ink. */
.btn--invert {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}

.btn--invert:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink); /* 7.36:1 */
}

/* Monospace citation chip: the evidence, page-numbered. */
.cite {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

/* Status tag. Always a glyph AND a word — never colour alone (SC 1.4.1). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.tag--open {
  background: var(--open-soft);
  color: var(--open);
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.topbar > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

/* The brand slot carries the LOCKUP artifact, never a mark composed beside
   live text (ruled 2026-09-01). Two <img> elements, one shown at a time: the
   lockup's minimum width is 140px, and below ~28rem the topbar cannot give it
   that much without colliding with the "Try Counsify" button — measured, at
   320px the row needs ~333px and has 272px. Below the floor the bare mark
   shows instead, which is the rule's own fallback. Both images are alt="" and
   the accessible name lives on the <a>, so it does not change across the
   breakpoint. A media query rather than a class swap because this host runs no
   JavaScript at all (default-src 'none'). */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.brand__lockup {
  display: none;
  /* Well above the 140px floor: this is the page's primary brand moment and
     it should read as the wordmark, not as an icon with text attached. */
  width: 10rem;     /* 160px — sized to clear the nav + button at 48rem,
                       where the row is tightest: 160 + 346 + 127 + gaps = 665
                       against 704 available. Measured, not estimated. */
  height: auto;
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 28rem) {
  .brand__lockup {
    display: block;
  }

  .brand__mark {
    display: none;
  }
}

/* Above the nav's own breakpoint the row has room to spare, so the lockup
   takes its full size. Measured rather than guessed — see the fit check in
   STATUS: at 64rem the topbar row uses well under half its width. */
@media (min-width: 64rem) {
  .brand__lockup {
    width: 13rem;   /* 208px */
  }
}

.topnav {
  display: none;
  gap: 1.75rem;
}

.topnav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-500);
  text-decoration: none;
}

.topnav a:hover {
  color: var(--ink);
}

.topbar .btn {
  padding-inline: 1rem;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The hero (revamp 2026-09-05, landing doc §2): text left with the three
   figures under it, the exchange right. Below 64rem it stacks, text first,
   so a phone reads the claim and the figures before the proof. */
.hero > .wrap {
  padding-block: 2.5rem 3.5rem;
}

.hero h1 {
  margin-top: 0.75rem;
  font-size: clamp(2.375rem, 1.55rem + 3.3vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero .lede {
  margin: 1.1rem 0 0;
  max-width: 34rem;
}

/* The calls to action: one ink button, one text link, and the pilot badge
   beside them so "live at Saddleback" reads as traction rather than as a
   caveat at the end of the paragraph. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.3em;
}

.hero__link:hover {
  text-decoration-color: var(--ink);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The three clauses a dean needs before reading further. Mono and quiet,
   never uppercase: three sentences in small caps stop being sentences. */
.hero__micro {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-500);
}

.hero .exchange {
  margin-top: 2.25rem;
  text-align: left;
}

/* The three figures under the hero copy. Each is measured, and each names
   what it counts, because a number on a landing page without one is the
   thing we are here to not do. They sit under the micro line at the copy's
   own width with one hairline above (Jad's fold review, 2026-09-05: the
   full-width strip under both columns made the hero a screen and a half). */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 34rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.stats > div {
  min-width: 0;
}

.stats dt {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stats dd {
  margin: 0.3rem 0 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.6;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   The exchange sheet — SADIE, shown rather than described
   -------------------------------------------------------------------------- */
.exchange {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
}

.exchange__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

/* The card's title: SADIE's name in deep red (r3: the route, emphasis and
   destruction only; this is emphasis, and the hero's one use of red), the
   college in quiet ink beside it. Replaced the "An example exchange" eyebrow
   and the mono pill on 2026-09-05 (Jad): the reader should know at a glance
   that this is a chat with her. */
.exchange__who {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-500);
}

.exchange__who strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--route);
}

.exchange__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.1rem;
}

/* The student's bubble, as the app draws it (chat-view.tsx STUDENT_BUBBLE):
   ink fill, paper text, the card radius with the bottom-right corner
   tightened, at most 85% of the column. */
.ask {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.625rem 1rem;
  background: var(--ink);
  border-radius: var(--radius-card);
  border-bottom-right-radius: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-ink);
}

.reply {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 38rem;
}

.reply p {
  font-size: 0.9375rem;
  line-height: 1.6; /* the app's bubbles run at 1.5; 1.7 cost the fold */
  color: var(--ink-700);
}

/* The chip strip at the foot of a reply, as the app draws it
   (chat-view.tsx CitationChips): a hairline rule above, then pills on the
   muted ground in mono. The en dash in the year is the app's own
   (citations.py `_printed_year`), so it stays. */
.cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline-soft);
}

.exchange .cite {
  padding: 0.125rem 0.5rem;
  background: var(--paper-deep);
  border: 0;
  border-radius: 9999px;
  font-size: 0.75rem;
}

/* Gold, spent here and only here: SADIE is proposing something. The card is
   the app's (element-card.tsx): gold-soft fill, gold border, the card
   radius, and the three answers deliberately unequal in dress — Yes acts,
   No declines quietly, "Talk about it more" reads as speech. */
.proposal {
  padding: 1rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
}

.proposal .eyebrow {
  color: var(--ink); /* the app sets the eyebrow in ink on this card */
}

.proposal p {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.proposal .choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
}

.proposal .choices li {
  padding: 0.375rem 1rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--ink);
}

.proposal .choices li:first-child {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}

.proposal .choices li:last-child {
  padding-inline: 0.75rem;
  background: transparent;
  border-color: transparent;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The Start-My-Plan widget, as the app draws it (element-card.tsx): a sheet
   with a 4px ink left rail. Never gold — the app reserves gold for the
   proposal above. Hidden under 400px so the fold stays honest on a phone. */
.widget {
  padding: 1rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-card);
}

.widget__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.widget__line {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  color: var(--ink);
}

.widget__btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding: 0.375rem 1rem;
  background: var(--ink);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-ink);
}

@media (max-width: 24.99rem) {
  .widget {
    display: none;
  }
}

.exchange__foot {
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Two-column section layout
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}

.split > * {
  min-width: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   How it works — the numbered walk
   -------------------------------------------------------------------------- */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.steps li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

/* r3 sets the step counters in gold-ink. Ours are ink-400: gold's one job on
   this site is the proposal card in the hero, and a step number is not SADIE
   proposing anything. 4.56:1 on paper-deep, which is the ground they sit on. */
.steps .n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}

.steps h3 {
  margin-top: 0.6rem;
  font-size: 1.2rem;
}

.steps p {
  max-width: 36rem;
  margin-top: 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-500);
}

.dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--sheet);
}

.is-chosen .dot {
  border: 2px solid var(--satisfied);
}

.is-chosen .dot::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--satisfied);
}

/* --------------------------------------------------------------------------
   Spec list — a label/value sheet ("what it reads", the Context Center)
   -------------------------------------------------------------------------- */
.spec {
  padding: 1.5rem;
  border-radius: var(--radius);
  align-self: start;
}

.spec ul {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.spec li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--hairline);
}

.spec li:first-child {
  border-top: 0;
  padding-top: 0.35rem;
}

.spec .k {
  font-size: 0.9375rem;
  color: var(--ink-700);
}

.spec .v {
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.spec .foot {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Where the data comes from (2026-09-08): six source tiles in the honest
   part's hairline grid, each closing on a mono figure line measured against
   counsify_dev; a slim "what she knows about you" row; and the three checks
   the retired counselor section used to carry, set in a row on desktop.
   -------------------------------------------------------------------------- */
.honest--sources li {
  display: flex;
  flex-direction: column;
}

.honest--sources .fig {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
}

.reads {
  display: grid;
  gap: 0.35rem 2rem;
  margin-top: 1.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.reads__label {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

.reads p:not(.reads__label) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.reads b {
  font-weight: 600;
  color: var(--ink);
}

/* A checked list of guarantees. */
.checks {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem 2rem;
}

.checks li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.check {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
}

.check::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0.2rem;
  width: 0.36rem;
  height: 0.68rem;
  border: solid var(--satisfied);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   The hairline tile grid. Born as "The honest part" (the truthful launch
   draft's answer to v5's fabricated review JSON-LD and false FERPA/stateless
   claims); that section was retired 2026-09-08 once every one of its facts
   had a home elsewhere on the page (hero micro line, the sources checks, the
   ask band's disclaimer, the footer). The grid now carries the six source
   tiles on the landing and the two grids on the colleges page.
   -------------------------------------------------------------------------- */
.honest {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 2.25rem;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.honest li {
  padding: 1.4rem 1.5rem;
  background: var(--sheet);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-500);
}

.honest b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

.honest a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.honest a:hover {
  text-decoration-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Why we built it (2026-09-08): a letter. One centered column, a small
   portrait as the letterhead, the story at the essay's body size, and the
   quote set large in Lora as the signature. No card, no columns.
   -------------------------------------------------------------------------- */
.letter {
  max-width: 58rem;
  margin-inline: auto;
}

/* The portrait sits on a sheet-white mat with the page's hairline rule: a
   printed photo laid on the paper, not a floating image. */
.letter__portrait {
  display: block;
  width: 6.5rem;
  margin-bottom: 1.5rem;
  padding: 0.3rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.letter__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.letter__text {
  max-width: 40rem;
}

.letter__body {
  margin-top: 1.5rem;
}

.letter__body p {
  margin-top: 1.125rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.letter__body p:first-child {
  margin-top: 0;
}

.letter__quote {
  margin: 2.25rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--hairline);
}

.letter__quote p {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ink);
}

.letter__quote footer {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   The closing band — the page's one ink ground
   -------------------------------------------------------------------------- */
.band {
  border-top: 1px solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.band > .wrap {
  max-width: 46rem;
  padding-block: 5rem;
  text-align: center;
}

.band .eyebrow {
  color: var(--on-ink-muted); /* 8.67:1 — see the token note above */
}

.band h2 {
  max-width: none;
  margin-top: 1.25rem;
  font-size: clamp(1.875rem, 1.2rem + 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.band p {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--on-ink-muted);
}

.band .btn {
  margin-top: 2rem;
}

/* The three example questions, as static chips: mono, paper on ink, one per
   line, never interactive (the app's chat home offers the same three). */
.band .chips {
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 1.75rem auto 0;
  padding: 0;
  list-style: none;
}

.band .chips li {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--on-ink-muted);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
  color: var(--on-ink);
}

.band .fine {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--on-ink-muted);
}

.band .fine--disclaimer {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.site {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

footer.site > .wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 2.75rem;
}

footer.site .about {
  max-width: 26rem;
}

footer.site .about .name {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
}

footer.site .about p {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-500);
}

footer.site .about .contact {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
}

footer.site .about .contact a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

footer.site .about .contact a:hover {
  text-decoration-color: var(--ink);
}

.footlinks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.footlinks a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--ink-500);
  text-decoration: none;
}

.footlinks a:hover {
  color: var(--ink);
}

.colophon {
  border-top: 1px solid var(--hairline);
}

.colophon .wrap {
  padding-block: 1.25rem;
}

.colophon p {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   Legal pages (privacy.html, terms.html) and 404.html.
   These selectors are kept working across the identity change: privacy.html
   belongs to the legal port and this stylesheet must not break it mid-flight.
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.75rem;
}

/* The lockup, at its own minimum. `flex: none` so a flex row can never shrink
   it under 140px — the one way this surface could violate the floor silently.
   `.wordmark` is gone: brand-with-text is the lockup artifact and nothing
   else. */
.top img {
  flex: none;
  width: 8.75rem;
  height: auto;
}

.legal h1 {
  margin: 2.5rem 0 0.25rem;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.legal .effective {
  margin: 0 0 2rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-400);
}

.legal h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  color: var(--ink-700);
}

.legal p + p,
.legal ul {
  margin-top: 0.75rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.4rem;
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal main {
  padding-bottom: 1rem;
}

/* The plain footer used by 404.html and the legal pages. */
.shell > footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--ink-500);
}

.shell > footer a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shell > footer .fine {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   The plan (revamp 2026-09-06, landing doc §3): a centered intro, the board
   at full width, three notes. The board is the app's own board restated —
   term-column.tsx, course-card.tsx, plan-rail.tsx, plan-board-view.tsx and
   the route hero — token for token, so what a student sees here is what they
   get. Colours the app spends on the board and nowhere else on this page: the
   four course-type bars, gold on "Print or save" (the page's second gold),
   deep red on the route (the page's one red).
   -------------------------------------------------------------------------- */
.intro {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.intro h2 {
  margin-inline: auto;
}

.intro .lede {
  margin-inline: auto;
  text-align: left;
}

.board {
  margin-top: 2.5rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  text-align: left;
}

.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

.board__id {
  min-width: 0;
}

.board__name {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

/* Both years, side by side, exactly as boardProvenance() composes them. */
.board__provenance {
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-500);
}

/* The app's one gold button (plan-board-view.tsx): gold fill, ink text,
   the field radius, the printer glyph. Static here, as the whole board is. */
.board__print {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding-inline: 0.875rem;
  background: var(--gold);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
}

/* Cautions are ink wells (T-11): the app's overrun sentence, verbatim. */
.board__notice {
  padding: 0.7rem 0.85rem;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
}

.board__notice {
  margin-top: 1rem;
}

/* The route hero (plan-document-view.tsx RouteHero): origin dot, a station per
   semester, the dashed tail, the destination pill. Deep red is spent here and
   nowhere else on the page. */
.route {
  margin-top: 1.25rem;
}

.route__track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.route__origin {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-radius: 9999px;
  background: var(--route);
}

.route__seg {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.route__line {
  flex: 1 1 0;
  height: 2px;
  background: var(--route);
}

.route__station {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border: 2px solid var(--route);
  border-radius: 9999px;
  background: var(--sheet);
}

.route__tail {
  flex: 1 1 0;
  height: 0;
  border-top: 2px dashed var(--route);
}

.route__dest {
  flex: none;
  padding: 0.15rem 0.5rem;
  background: var(--route);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-ink);
}

.route__labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The columns: the app's term-column.tsx. They scroll sideways with CSS
   only; three fit a desktop wrap, the phone shows one and a sliver. */
.board__terms {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.col {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 86vw;
  max-width: 20rem;
  scroll-snap-align: start;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.col__head {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.col__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.col__pos {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 0.125rem;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-700);
}

.col__term {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}

.col__units {
  flex: none;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  background: var(--sheet);
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-700);
}

.col__split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-500);
}

.split-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.split-dot i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
}

/* The app's course-type tokens (index.css --color-type-*), converted to sRGB
   with the same instrument as every token above. */
.split-dot--major i,
.card--major .card__bar { background: #2b5c97; }
.split-dot--ge i,
.card--ge .card__bar { background: #1a6b48; }
.split-dot--elective i,
.card--elective .card__bar { background: #664893; }
.split-dot--prerequisite i { background: #8c5500; }

.col__cards {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem;
  list-style: none;
}

/* course-card.tsx: sheet, hairline, the card radius, a 4px type bar on the
   left, code and units on one line, the title beneath. */
.card {
  position: relative;
  overflow: hidden;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.card__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
}

/* The prerequisite's tell: the graph added it, the student did not choose
   it, and the dashes say so without spending a line (the app's bar-dashed). */
.card--prerequisite .card__bar {
  color: #8c5500;
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0 0.375rem,
    transparent 0.375rem 0.625rem
  );
}

.card__line {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.card__code {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.card__units {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-500);
}

.card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--ink-700);
}

/* The destination, drawn as the printed timeline's own marker (an ink
   outline, not the board's gold-soft cap) so gold stays at two on the page. */
.dest {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 70vw;
  max-width: 14rem;
  padding: 1.5rem 1rem;
  scroll-snap-align: start;
  border: 1px dashed var(--hairline);
  border-radius: 1rem;
  text-align: center;
}

.dest__mark {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0 auto 0.25rem;
  border: 2px solid var(--ink);
  border-radius: 9999px;
  background: var(--sheet);
}

.dest__name {
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
}

.dest__term {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-700);
}

/* The rail's figure (plan-rail.tsx Figure), units still ahead, sits in the
   header beside Print or save (Jad, 2026-09-06); the board has no foot. */
.board__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.figure {
  min-width: 11rem;
  padding: 0.75rem 0.875rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.figure__value {
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}

.figure__note {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-500);
}

.board__caption {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: center;
  color: var(--ink-500);
}

/* Three short notes: small sans headings, no eyebrows, no cards. */
.notes {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin: 2.5rem auto 0;
}

.notes h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.notes p {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-700);
}

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

/* --------------------------------------------------------------------------
   The problem (revamp 2026-09-06, landing doc §4): one 40rem column, the
   page's one place body type runs to 19px, no graphic. Centered on the page,
   left-aligned inside, so it reads as an essay and not as a card.
   -------------------------------------------------------------------------- */
.essay {
  max-width: 58rem;
  margin-inline: auto;
}

.essay h2 {
  max-width: 34ch;
}

.essay__body {
  margin-top: 1.5rem;
}

.essay__body p {
  margin-top: 1.125rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.essay__body p:first-child {
  margin-top: 0;
}

.essay .essay__pivot {
  font-weight: 600;
  color: var(--ink);
}

.essay__cta {
  margin-top: 2rem;
}

.essay__cta .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   The counselors-and-colleges page (colleges.html, 2026-09-06): a text-only
   hero in one column, and the eight-tile student grid (`.honest--four`).
   -------------------------------------------------------------------------- */
.page-hero > .wrap {
  max-width: 44rem;
  padding-block: 3rem 3.5rem;
}

.page-hero h1 {
  margin-top: 0.75rem;
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-hero .lede {
  margin-top: 1.1rem;
  max-width: 38rem;
}

.page-hero .lede--strong {
  margin-top: 0.75rem;
}


.section__note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-700);
}

.section__note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------------------
   How it works (revamp 2026-09-06, landing doc §5): the builder's courses
   step restated — step-frame.tsx's header and requirement-walk.tsx's focus
   card, option cells and walk footer. Radii are the app's `rounded-md`
   (0.25rem here, `--radius`), the satisfied green is r3's status token.
   -------------------------------------------------------------------------- */
.desk__frame {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

.desk__progress {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.desk__plan {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.desk__step {
  margin-top: 0.125rem;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
}

.desk__question {
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.focus {
  margin-top: 1rem;
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.focus.is-satisfied {
  border-color: var(--satisfied);
}

.focus__head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hairline);
}

.focus__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.focus__count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.focus__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: var(--satisfied-soft);
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--satisfied);
}

.focus__title {
  margin-top: 0.125rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.focus__rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  color: var(--ink);
}

.focus__verbatim {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ink-500);
}

/* The option cells (OptionCell): a chip per course, the picked one on the
   deep ground with an ink ring and the ink check. */
.opts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
}

.opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.5rem 0.75rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.opt.is-picked {
  background: var(--paper-deep);
  border-color: var(--ink);
}

.opt__main {
  min-width: 0;
}

.opt__line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

.opt__code {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.opt__meta {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.opt__meta + .opt__meta {
  color: var(--ink-500);
}

.opt__check {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--on-ink);
}

.opt.is-picked .opt__check {
  background: var(--ink);
  border-color: var(--ink);
}

/* The walk footer: Previous · the chosen tray and the counter · Next. */
.focus__foot {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--hairline);
}

.focus__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--ink-700);
}

.focus__tray {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.focus__chosen {
  display: inline-flex;
  align-self: start;
  padding: 0.125rem 0.5rem;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
}

.focus__counter {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--ink-400);
}

.focus__counter b {
  font-family: var(--mono);
  font-weight: 500;
}

.desk .note {
  margin-top: 0.875rem;
}

/* --------------------------------------------------------------------------
   One per campus (revamp 2026-09-06, landing doc §7): the roster. The
   directory card is the app's (counselors-view.tsx: card radius, hairline
   ring, Lora name, the satisfied "Live pilot" pill, mono facts, the ink
   button); the second slot is dashed and empty on purpose.
   -------------------------------------------------------------------------- */
.roster {
  display: grid;
  gap: 1rem;
  align-self: start;
}

.dir {
  padding: 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.dir__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dir__name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

.dir__pill {
  padding: 0.25rem 0.625rem;
  background: var(--satisfied-soft);
  border: 1px solid var(--satisfied);
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.dir__college {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--ink-700);
}

.dir__facts {
  display: grid;
  gap: 0.375rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.dir__facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.dir__facts dt {
  color: var(--ink-500);
}

.dir__facts dd {
  margin: 0;
  font-family: var(--mono);
  color: var(--ink);
}

.dir__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--touch);
  margin-top: 1.25rem;
  padding-inline: 1rem;
  white-space: nowrap;
  background: var(--ink);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-ink);
  text-decoration: none;
}

.dir--slot {
  display: grid;
  place-content: center;
  gap: 0.375rem;
  min-height: 9rem;
  background: transparent;
  border: 1px dashed var(--hairline);
  text-align: center;
}

.dir--slot p:not(.eyebrow) {
  max-width: 18rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Your context (revamp 2026-09-06, landing doc §8): the About me page as the
   app draws it (context-center-view.tsx, field-card.tsx): the sharing bar,
   the field cards with chip values and the mono freshness line.
   -------------------------------------------------------------------------- */
.aboutme {
  align-self: start;
}

.share {
  padding: 1rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.share__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.share__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.share__check {
  color: var(--satisfied);
}

.share__btn,
.fieldcard__btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-700);
}

.share__line {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-500);
}

.fields {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.fieldcard {
  padding: 0.875rem 1rem;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.fieldcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.fieldcard__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.fieldcard__chip {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0.25rem 0.75rem;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-size: 0.9375rem;
  color: var(--ink);
}

.fieldcard__empty {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--ink-400);
}

.fieldcard__fresh {
  margin-top: 0.375rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.aboutme .note {
  margin-top: 0.875rem;
}

.context-note {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Reflow and breakpoints. Mobile-first: everything above is the 320px layout,
   which is the one that has to survive. WCAG 1.4.10.
   -------------------------------------------------------------------------- */
/* The three figures go three-across as soon as a phone can hold them
   (360px and up): stacked, they cost 180px of fold before the exchange card;
   three-up they cost 90. Only a 320px screen stacks them. */
@media (min-width: 22.5rem) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }
}

@media (min-width: 34rem) {
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .honest--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats {
    gap: 1.5rem 1.25rem;
  }

  .honest--sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .opts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus__foot {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .focus__foot .focus__btn:last-child {
    justify-self: end;
  }

  /* Two columns of prose, balanced, no paragraph split across them. */
  .essay__body {
    columns: 2;
    column-gap: 3rem;
  }

  .essay__body p {
    break-inside: avoid;
  }

  .essay__cta .btn {
    width: auto;
  }

  .col {
    width: 300px;
    max-width: none;
  }

  .dest {
    width: 210px;
    max-width: none;
  }

  .board {
    padding: 1.5rem;
  }

  .notes {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  :root {
    --gutter: 2rem;
  }

  .section > .wrap {
    padding-block: 6.5rem;
  }

  .hero > .wrap {
    padding-block: 5rem 5.5rem;
  }

  .topnav {
    display: flex;
  }


  .reads {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
  }

  .checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .letter {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .letter__portrait {
    width: auto;
    margin-bottom: 0;
  }

  .honest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .honest--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  footer.site > .wrap {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
  }
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .letter {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
  }

  .split--wide-first {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }

  /* The hero's two columns: copy and figures on the left (a hair narrower),
     the exchange on the right. */
  .split--card-first > .desk,
  .split--card-first > .aboutme {
    order: -1;
  }

  /* In the left column the desk is about 440px wide, which is the app's
     narrow layout: one option per row so no title truncates. */
  .split--card-first .opts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    column-gap: 4rem;
    /* Top-aligned, deliberately: the card runs taller than the copy at every
       desktop width, and centring the copy against it pushed the H1 to the
       middle of a 735px viewport (measured 2026-09-05). The headline belongs
       at the top of the fold; the paper beneath the copy is the price. */
    align-items: start;
  }

  .hero__copy {
    padding-top: 0.75rem;
  }

  .hero .exchange {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Motion. There is no JavaScript on this site, so nothing here animates on
   scroll — the only motion is hover/focus feedback, which is a
   micro-interaction under the app's motion budget (<=150ms). Everything is
   opt-in behind no-preference, so a reduced-motion visitor gets a page that
   never moves at all rather than one that moves less.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .topnav a,
  .footlinks a,
  .honest a,
  .shell > footer a {
    transition:
      background-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
      border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
      color 140ms cubic-bezier(0.4, 0, 0.2, 1),
      text-decoration-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

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

/* Printing the landing page is not a use case, but a student handing a page to
   someone shouldn't waste ink on the sticky bar or the ink band. */
@media print {
  .topbar,
  .skip {
    display: none;
  }

  .band {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline);
  }

  .band .eyebrow,
  .band p,
  .band .fine {
    color: var(--ink-700);
  }

  .sheet {
    box-shadow: none;
  }
}