/* fonts.css */
/* Generated by tools/fetch-fonts.mjs. Fonts: SIL Open Font License. */

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-100-900-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-italic-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-italic-100-900-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-normal-100-900-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  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.css */
/* Design tokens. Colors, type and spacing for light and dark.
   Every text color here passes WCAG AA (4.5:1) on --paper and --surface.
   --gold is a fill color only; put --on-gold text on it. */
:root {
  color-scheme: light;

  --paper: #F2F0E9;       /* prairie paper: the page */
  --surface: #FBFAF6;     /* raised cards and panels */
  --sunken: #E8E5DB;      /* wells, code, placeholders */
  --ink: #191611;         /* soil black: main text */
  --ink-2: #4A463D;       /* secondary text */
  --ink-3: #655F52;       /* captions, meta */
  --line: #D6D2C5;        /* section roads: borders and rules */
  --line-strong: #191611;
  --gold: #D9A12B;        /* corn gold: fills, marks, highlights */
  --gold-soft: #F3E3B8;   /* tints behind gold content */
  --gold-ink: #7A5A06;    /* gold that passes as text */
  --gold-on-soil: #E0AE3A; /* corn gold on soil-black grounds (the footer band), as in the brand's dark files */
  /* The logo's spark and name (brand.mjs inlines them as currentColor): soil on light grounds and brand paper
     on dark ones, as in the brand's -dark files. Dark mode's --ink is #EDE9DF, so the logo gets its own token. */
  --mark-ink: #191611;
  --mark-paper: #F2F0E9;  /* the logo on a dark band in either theme (the footer) */
  --on-gold: #191611;
  --sky: #2C5A86;         /* links */
  --husk: #4E6B45;        /* rare accent: success, "ready" */
  --error: #A3341F;       /* form errors: 6.0:1 on paper */
  --focus: #2C5A86;
  --shadow: 0 1px 0 rgb(25 22 17 / 0.04), 0 12px 32px -18px rgb(25 22 17 / 0.28);

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (320px to 1440px) */
  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.10rem + 0.40vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2.05rem);
  --step-3: clamp(1.95rem, 1.55rem + 2.00vw, 3.25rem);
  --step-4: clamp(2.60rem, 1.80rem + 4.40vw, 5.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --wrap: 74rem;
  --wrap-text: 42rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --radius: 4px;
  --radius-lg: 10px;
  --header-h: 64px;
  /* Room the floating "Ask Iowa AI" launcher needs at the bottom of the screen
     (16px offset + 48px pill + breathing room), so the last line of a page clears it. */
  --assistant-clear: 5.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14120E;
    --surface: #1D1A15;
    --sunken: #0F0D0A;
    --ink: #EDE9DF;
    --ink-2: #B9B3A5;
    --ink-3: #9A9384;
    --line: #2F2B23;
    --line-strong: #EDE9DF;
    --gold: #E0AE3A;
    --gold-soft: #3A2F16;
    /* Muted brass, not a second bright gold: labels stay labels (8.2:1 on paper, 7.6:1 on surface). */
    --gold-ink: #C4A96B;
    --mark-ink: #F2F0E9;
    --on-gold: #14120E;
    --sky: #8DB8E3;
    --husk: #9DB58F;
    --error: #F2937C;
    --focus: #8DB8E3;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 16px 40px -20px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14120E;
  --surface: #1D1A15;
  --sunken: #0F0D0A;
  --ink: #EDE9DF;
  --ink-2: #B9B3A5;
  --ink-3: #9A9384;
  --line: #2F2B23;
  --line-strong: #EDE9DF;
  --gold: #E0AE3A;
  --gold-soft: #3A2F16;
  --gold-ink: #C4A96B;
  --mark-ink: #F2F0E9;
  --on-gold: #14120E;
  --sky: #8DB8E3;
  --husk: #9DB58F;
  --error: #F2937C;
  --focus: #8DB8E3;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 16px 40px -20px rgb(0 0 0 / 0.7);
}

/* base.css */
/* Reset and page basics. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: var(--assistant-clear);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  line-height: 1;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

a { color: var(--sky); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--gold-soft); color: var(--ink); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: var(--radius);
}
.skip:focus { top: var(--space-2); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mono { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.02em; }
.muted { color: var(--ink-2); }
/* Short compounds ("T-series", "small-business") and dates ("Oct 23, 2026") that read wrong when split.
   inline() in templates/html.mjs adds it; see keepTogether() there. */
.nowrap { white-space: nowrap; }
.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-6); font-family: var(--f-body); font-weight: 650; line-height: 1.3; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* components.css */
/* Shared components. Page-specific layout lives in pages.css. */

/* ---------- Labels, eyebrows, small type ---------- */
.label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.label--ink { color: var(--ink-2); }

.coords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.coords > :first-child { color: var(--gold-ink); }

/* ---------- Headings ---------- */
.display {
  font-family: var(--f-display);
  font-size: var(--step-4);
  font-weight: 850;
  font-stretch: 70%;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
}
.display em { font-style: normal; color: var(--gold-ink); }
.h2 {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  line-height: 0.95;
}
.h3 {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.05;
}
.h4 {
  font-family: var(--f-body);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

/* ---------- Sections ---------- */
.section { border-bottom: 1px solid var(--line); }
.section > .wrap { padding-block: var(--space-8); }
.section--surface { background: var(--surface); }
.section--tight > .wrap { padding-block: var(--space-7); }

.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.section-head p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Flat hovers: no drop shadows, just a small lift and a color shift. */
.btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn--solid:hover { background: color-mix(in srgb, var(--gold) 88%, var(--ink)); border-color: color-mix(in srgb, var(--gold) 88%, var(--ink)); }
/* Soil-black button: strong without spending the page's one gold accent. */
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn--quiet { border-color: transparent; padding-inline: 0.4rem; text-decoration: underline; text-underline-offset: 0.2em; }
.btn--quiet:hover { transform: none; background: transparent; }
.btn--small { min-height: 36px; padding: 0.45rem 0.8rem; font-size: 0.92rem; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Solid paper: the system is flat, and a see-through header turns muddy over dark bands. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--mark-ink); /* the spark and the name: soil, or brand paper in dark mode (tokens.css) */
  text-decoration: none;
  flex: none;
}
.brand .brand-mark { width: 34px; height: 34px; flex: none; }
.brand .brand-word { height: 20px; width: auto; }
/* The Cob lockup (lockup-small.svg: 1564 units tall, caps 720). 34 px is the header on the board Alex picked:
   "Iowa AI" caps 15.7 px. The footer's 39.67 px keeps the header-to-footer ratio (caps 18.3 px). Both sit in
   lockup-small's 26-42 px band. */
.brand .brand-lockup { height: 34px; width: auto; }
.footer-brand .brand .brand-lockup { height: 39.67px; }
/* Gold parts of inlined logo SVGs (see templates/brand.mjs). */
.m-gold { fill: var(--gold); }
.m-gold-line { stroke: var(--gold); }
.brand-text {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 0.5rem + 1vw, 1.6rem); }
.site-nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.97rem;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--line); }
/* aria-current="page" on the page itself, "true" on its section (a lesson under Lessons). */
.site-nav a[aria-current] { border-bottom-color: var(--gold); }
.menu-toggle { display: none; }
/* site.js reveals the toggle; without JavaScript it stays hidden and the footer repeats every link. */
.menu-toggle[hidden] { display: none; }

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 600;
    cursor: pointer;
  }
  .menu-toggle svg { width: 18px; height: 18px; }
  /* The icon follows the state: three bars to open, a cross to close. */
  .menu-toggle .icon-close,
  .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-2) max(16px, env(safe-area-inset-left, 0px)) var(--space-5);
    /* A raised sheet, so it reads as its own layer over the page in both themes. */
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav a:not(.btn) { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .site-nav a[aria-current] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--gold); padding-left: 0.75rem; }
  .site-nav .btn { margin-top: var(--space-4); }
  /* Collapsed until the toggle opens it. Without JS, the footer repeats every link. */
  .site-nav[data-open="false"] { display: none; }
}

/* Windows High Contrast and other forced-color modes drop the gold bar, so mark the current page another way. */
@media (forced-colors: active) {
  .site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
}
@media (forced-colors: active) and (min-width: 861px) {
  .site-nav a:not(.btn) { border-bottom-color: Canvas; }
  .site-nav a[aria-current] { border-bottom-color: Highlight; }
}

/* ---------- Cards and parcels ---------- */
.card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card p { color: var(--ink-2); }
.card--link { text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.card--link:hover { border-color: var(--ink); }
.card--feature { border: 2px solid var(--gold); }

.grid { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Three columns separated by section-road rules, no boxes. */
.parcels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--line-strong); }
.parcels > * { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5) var(--space-5) var(--space-6) 0; min-width: 0; }
.parcels > * + * { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.parcels p { color: var(--ink-2); }
@media (max-width: 860px) {
  .parcels { grid-template-columns: 1fr; }
  .parcels > *, .parcels > * + * { padding: var(--space-5) 0; border-left: 0; }
  .parcels > * + * { border-top: 1px solid var(--line); }
}

/* Dash bullets. Quiet ink, not gold: a page gets one gold accent, and bullets aren't it. */
.ticks { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 1.25rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 2px; background: var(--ink-3); }

/* Small mono chips (kit contents, tags) */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  color: var(--ink);
  white-space: nowrap;
}
.chip--gold { border-color: var(--gold); background: var(--gold-soft); }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge--live { color: var(--husk); border-color: color-mix(in srgb, var(--husk) 45%, var(--line)); }
.badge--soon { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.badge--locked::before { display: none; }

/* ---------- The class ladder ---------- */
.ladder { display: grid; gap: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); counter-reset: rung; }
.rung {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.rung-step { display: grid; gap: 0.15rem; }
.rung-step .n {
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.4rem);
  line-height: 0.8;
  color: var(--ink-3);
}
/* Only the free intro's numeral is gold, as on Home and /lessons/: it's where to start.
   Numerals are aria-hidden and repeat the visible "Start here" / "Level N" label, so this
   gold is a decorative accent, not text that has to meet a contrast ratio. */
.rung--start .n,
.rung#level-intro .n { color: var(--gold); }
.rung-body { display: grid; gap: var(--space-3); min-width: 0; }
.rung-body p { color: var(--ink-2); }
.rung-meta { display: grid; gap: var(--space-2); align-content: start; font-size: 0.95rem; }
.rung-meta dl { display: grid; gap: 0.35rem; }
.rung-meta dl > div { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px dashed var(--line); padding-bottom: 0.3rem; }
.rung-meta dt { color: var(--ink-3); }
.rung-meta dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 900px) {
  .rung { grid-template-columns: 4rem minmax(0, 1fr); }
  .rung-meta { grid-column: 2; }
}
@media (max-width: 520px) {
  .rung { grid-template-columns: 1fr; gap: var(--space-3); }
  .rung-meta { grid-column: auto; }
  .rung-step { display: flex; align-items: baseline; gap: var(--space-3); }
}

/* ---------- Facts table (dl) ---------- */
.facts { display: grid; border-top: 2px solid var(--line-strong); margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr); gap: var(--space-4); padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 550; }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 2px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding-block: var(--space-4);
  font-weight: 650;
  font-size: var(--step-1);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--space-5); color: var(--ink-2); max-width: 62ch; display: grid; gap: var(--space-3); }

/* ---------- Photo slots ---------- */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
  aspect-ratio: 4 / 3;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--empty {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-3);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 25%;
  background-position: -1px -1px;
}
.photo--empty span { background: var(--sunken); padding: 0.3rem 0.6rem; font-family: var(--f-mono); font-size: var(--step--1); text-wrap: balance; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.75rem; font-size: var(--step--1); background: color-mix(in srgb, var(--surface) 88%, transparent); border-top: 1px solid var(--line); }

/* photo({ shape: "laptop" }) while the photo is missing: a drawn laptop on survey paper, not an
   empty box. The label is spoken through the figure's aria-label, so it is hidden from sight;
   the page puts a visible caption ("Photo coming") under the slot. Keeps the 4:3 frame.
   The column is minmax(0, 1fr) because the base's 24/1 ratio and 9px min-height give it a 216px
   minimum width, which would widen a narrow slot's track and push the laptop off-center. */
.photo--laptop.photo--empty { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0; }
.photo--laptop.photo--empty span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The screen... */
.photo--laptop.photo--empty::before {
  content: "";
  width: 40%;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--ink-3);
  border-radius: 5px 5px 2px 2px;
  background: var(--sunken);
}
/* ...and the base, which thickens a little in big slots. */
.photo--laptop.photo--empty::after {
  content: "";
  width: 52%;
  aspect-ratio: 24 / 1;
  min-height: 9px;
  margin-top: -1px;
  border: 2px solid var(--ink-3);
  border-radius: 1px 1px 8px 8px;
  background: var(--sunken);
}

/* ---------- Multi-sentence headings ---------- */
/* Each sentence on its own line (sectionHead, or lines() in templates/html.mjs). */
.line { display: block; }

/* ---------- Notices and callouts ---------- */
.note {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold-soft) 45%, transparent);
  color: var(--ink);
}
.pull {
  font-family: var(--f-display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.22;
  max-width: 34ch;
  text-wrap: balance;
}

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-3); padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line); }
.crumbs a { color: var(--ink-2); display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero > .wrap { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(2rem, 1.5rem + 3vw, 4rem); display: grid; gap: var(--space-4); }
.page-hero h1 { font-size: var(--step-4); font-weight: 850; font-stretch: 70%; text-transform: uppercase; line-height: 0.92; max-width: 16ch; }
.page-hero .lede { max-width: 52ch; }

/* ---------- Site footer ---------- */
/* Footer colors are local tokens, so dark mode flips them in one place below
   (paper/ink mixes would flip the wrong way when the theme swaps paper and ink). */
.site-footer {
  --footer-bg: var(--ink);
  --footer-fg: var(--paper);
  --footer-fg-2: color-mix(in srgb, var(--paper) 78%, var(--ink)); /* mission, column heads: 9.9:1 */
  --footer-fg-3: color-mix(in srgb, var(--paper) 70%, var(--ink)); /* the legal line: 8.2:1 */
  --footer-rule: color-mix(in srgb, var(--paper) 18%, var(--ink));
  /* Gold on this soil band is the brand's dark-ground gold (light theme too): the lockup's kernels and the motto. */
  --gold: var(--gold-on-soil);
  /* The site's blue focus ring is only 2.5:1 on soil black; gold is 8.8:1 (9.5:1 on the dark-mode footer). */
  --focus: var(--gold);
  background: var(--footer-bg);
  color: var(--footer-fg);
}
.site-footer a { color: inherit; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-7);
}
.footer-brand { display: grid; gap: var(--space-4); align-content: start; }
.footer-brand .brand { color: var(--mark-paper); } /* a dark band in both themes, so the brand's paper */
/* The footer's one gold accent (besides the mark itself). */
.footer-motto { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.footer-mission { color: var(--footer-fg-2); max-width: 40ch; }
.footer-col { display: grid; gap: var(--space-2); align-content: start; }
.footer-col h2 { font-family: var(--f-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--footer-fg-2); margin-bottom: var(--space-2); }
.footer-col a { text-decoration: none; padding-block: 0.2rem; }
.footer-col a:hover { text-decoration: underline; }
/* Sits inside .wrap (see layout.mjs), so the rule spans the content column, not the gutters. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  /* The bottom padding keeps the last line clear of the floating "Ask Iowa AI" launcher. */
  padding-block: var(--space-5) calc(var(--assistant-clear) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--footer-rule);
  color: var(--footer-fg-3);
  font-size: var(--step--1);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
/* In dark mode the footer becomes a sunken band so it still reads as a separate block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer {
    --footer-bg: var(--sunken);
    --footer-fg: var(--ink);
    --footer-fg-2: var(--ink-2);
    --footer-fg-3: var(--ink-2);
    --footer-rule: var(--line);
    border-top: 1px solid var(--line);
  }
}
:root[data-theme="dark"] .site-footer {
  --footer-bg: var(--sunken);
  --footer-fg: var(--ink);
  --footer-fg-2: var(--ink-2);
  --footer-fg-3: var(--ink-2);
  --footer-rule: var(--line);
  border-top: 1px solid var(--line);
}

/* explainer.css */
/* Explainer: the "Russian doll" lesson explorer.
   Markup: src/templates/explainer.mjs (the no-JS outline) and
   src/scripts/explainer.js (the Dolls and Chat views).
   The layout follows the component's own width through container queries,
   so it works full width or in a narrow column. Below 640px the dolls stack. */

/* ---------- Frame ---------- */
.explainer {
  /* Gold that still reads as a focus ring on paper (3:1 or better). */
  --ex-focus: color-mix(in srgb, var(--gold) 62%, var(--ink));
  --ex-ring: color-mix(in srgb, var(--ink) 20%, var(--paper));
  --ex-grid: color-mix(in srgb, var(--line) 55%, var(--paper));
  /* Each level down is a little warmer, ending at gold-soft. */
  --ex-fill-0: var(--surface);
  --ex-fill-1: color-mix(in srgb, var(--gold-soft) 30%, var(--surface));
  --ex-fill-2: color-mix(in srgb, var(--gold-soft) 55%, var(--surface));
  --ex-fill-3: color-mix(in srgb, var(--gold-soft) 80%, var(--surface));
  --ex-fill-4: var(--gold-soft);
  container: ex / inline-size;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.explainer [data-depth="0"] { --ex-fill: var(--ex-fill-0); }
.explainer [data-depth="1"] { --ex-fill: var(--ex-fill-1); }
.explainer [data-depth="2"] { --ex-fill: var(--ex-fill-2); }
.explainer [data-depth="3"] { --ex-fill: var(--ex-fill-3); }
.explainer [data-depth="4"] { --ex-fill: var(--ex-fill-4); }

.explainer :focus-visible { outline: 3px solid var(--ex-focus); outline-offset: 3px; }

/* ---------- Top bar: label and the Dolls | Chat switch ---------- */
.ex-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.ex-label {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.ex-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
}
.ex-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.15rem 0 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ex-tab svg { width: 18px; height: 18px; flex: none; }
.ex-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.explainer .ex-tab:focus-visible { outline-offset: 2px; }

/* ---------- Panel rows: the trail and Zoom out, or the chat note and Start over ---------- */
.ex-panel[hidden] { display: none; }
.ex-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: 3.75rem;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--line);
}
/* One line: ancestors shrink first (with an ellipsis), the current idea last. */
.ex-trail {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  font-family: var(--f-mono);
  font-size: var(--step--1);
}
.ex-trail li { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; }
.ex-trail li:last-child:not(:only-child) { flex-shrink: 0; max-width: 50%; }
.ex-trail li + li::before { content: "/"; flex: none; padding: 0 0.45rem 0 0.2rem; color: var(--ink-3); }
.ex-crumb {
  display: block;
  min-width: 2.5em;
  max-width: 100%;
  min-height: 44px;
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  line-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.ex-crumb.is-here { max-width: none; color: var(--ink); font-weight: 500; text-decoration: none; cursor: default; }

/* Zoom out and Start over */
.ex-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.05rem 0 0.85rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ex-btn svg { width: 18px; height: 18px; flex: none; }
.ex-btn:disabled { border-color: var(--line); background: transparent; color: var(--ink-3); cursor: default; }
.ex-note { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }

/* ---------- Dolls: the stage and the shell ---------- */
.ex-stage,
.ex-chat-stage {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--ex-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ex-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 50% -1px;
}
.ex-stage {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 2.25rem;
  min-height: 30rem;
  padding: clamp(2rem, 1rem + 4cqi, 3.5rem) clamp(0.25rem, 3cqi, 2.5rem) clamp(2.5rem, 1.5rem + 4cqi, 4rem);
  overflow: clip;
}

.ex-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  padding: 2.6rem clamp(1.25rem, 5cqi, 3.25rem) 3.6rem;
  border: 2px solid var(--ink);
  border-radius: 50% / 9.5rem;
  background: var(--ex-fill);
  text-align: center;
  box-shadow: var(--ex-rings, none);
}
/* Four or five dolls get the wide shell, so titles fit on two lines instead of four. */
.ex-shell[data-n="4"],
.ex-shell[data-n="5"] { width: min(100%, 46rem); }
.ex-shell[data-n="6"],
.ex-shell[data-n="7"],
.ex-shell[data-n="8"] { width: min(100%, 50rem); }
.ex-shell[data-leaf] { width: min(100%, 40rem); }
/* The previous shell, lifted out of the layout while it animates away. */
.ex-shell.is-ghost { position: absolute; z-index: 2; margin: 0; pointer-events: none; }

.ex-shell-inner { display: grid; justify-items: center; gap: 0.8rem; }

.ex-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ex-kind svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
/* The one gold mark: the idea you're on. */
.ex-kind-dot { flex: none; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--gold); }

.ex-title {
  max-width: 20ch;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.2rem + 2.4cqi, 2.75rem);
  font-weight: 820;
  font-stretch: 74%;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Focus lands here after a move (for screen readers); it isn't a control, so no ring. */
.explainer .ex-title:focus { outline: none; }
.explainer .ex-title:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--ex-focus);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.14em;
}
.ex-blurb { max-width: 42ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.5; }
.ex-body { display: grid; gap: 0.75rem; max-width: 36rem; text-align: left; font-size: 1.06rem; line-height: 1.65; }
.ex-body code {
  font-family: var(--f-mono);
  font-size: 0.86em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow-wrap: anywhere;
}

/* ---------- Dolls inside the shell ---------- */
.ex-kids-wrap { position: relative; z-index: 0; width: 100%; margin-top: 0.4rem; padding-top: 2.75rem; }
.ex-wires { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ex-wire { fill: none; stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.ex-hub { fill: var(--ink); }

.ex-kids {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.9rem clamp(0.6rem, 1.5cqi, 1.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-kid { flex: 0 1 9rem; min-width: 6.25rem; }
.ex-kids-wrap[data-many] .ex-kids { flex-wrap: wrap; }
.ex-kids-wrap[data-many] .ex-wires { display: none; }

/* A doll: a tall capsule tinted for the level it opens into. */
.ex-doll {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 11.25rem;
  padding: 1.5rem 0.6rem 1.8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ex-fill);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.15s ease;
}
.ex-doll:active { transform: translateY(-1px) scale(0.98); }
.ex-doll-mark { display: grid; place-items: center; color: var(--ink); }
.ex-doll-mark svg { width: 22px; height: 22px; }
.ex-doll-text { display: grid; justify-items: center; gap: 0.3rem; min-width: 0; }
.ex-doll-kind,
.ex-doll-count {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-2);
  text-wrap: balance;
}
.ex-doll-count { margin-top: 0.15rem; }
.ex-doll-title {
  font-family: var(--f-display);
  font-size: 1.04rem;
  font-weight: 720;
  font-stretch: 85%;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ex-doll-seen { position: absolute; bottom: 0.7rem; left: 50%; translate: -50% 0; display: grid; color: var(--ink-2); }
.ex-doll-seen svg { width: 16px; height: 16px; }

/* ---------- See also, and the other parts of the same idea ---------- */
.ex-more { display: grid; justify-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.ex-more + .ex-more { margin-top: 0.2rem; }
.ex-more-label {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ex-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.ex-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ex-pill svg { width: 16px; height: 16px; flex: none; }
.ex-pill.is-here { border-color: var(--gold); background: var(--gold); color: var(--on-gold); cursor: default; }
/* The shelf sits on the stage under a leaf's shell. */
.ex-shelf { position: relative; z-index: 1; max-width: 46rem; margin-top: 0; }

/* ---------- Wide: dolls on a gentle arc under a hub, with wires ---------- */
@container ex (min-width: 640px) {
  .ex-kid { margin-top: calc(var(--lift, 0) * 2.6rem); }
  .ex-kids[data-n="3"] > :nth-child(2),
  .ex-kids[data-n="4"] > :nth-child(2),
  .ex-kids[data-n="4"] > :nth-child(3) { --lift: 0.8; }
  .ex-kids[data-n="5"] > :nth-child(2),
  .ex-kids[data-n="5"] > :nth-child(4) { --lift: 0.65; }
  .ex-kids[data-n="5"] > :nth-child(3) { --lift: 0.9; }
}

/* A ring around the shell for each level you're inside. They need room at the
   sides, so they only appear when the component is wide enough. */
@container ex (min-width: 760px) {
  .ex-shell[data-depth="1"] { --ex-rings: 0 0 0 9px var(--paper), 0 0 0 10.5px var(--ex-ring); }
  .ex-shell[data-depth="2"] {
    --ex-rings: 0 0 0 9px var(--paper), 0 0 0 10.5px var(--ex-ring), 0 0 0 19px var(--paper), 0 0 0 20.5px var(--ex-ring);
  }
  .ex-shell[data-depth="3"],
  .ex-shell[data-depth="4"] {
    --ex-rings: 0 0 0 9px var(--paper), 0 0 0 10.5px var(--ex-ring), 0 0 0 19px var(--paper), 0 0 0 20.5px var(--ex-ring), 0 0 0 29px var(--paper), 0 0 0 30.5px var(--ex-ring);
  }
}

/* ---------- Narrow: the dolls stack into a list ---------- */
@container ex (max-width: 639.98px) {
  .ex-stage { min-height: 0; row-gap: 1.5rem; padding-inline: 0.5rem; }
  .ex-shell { width: 100%; padding: 2.1rem 1rem 2.6rem; border-radius: 50% / 5rem; }
  .ex-shell[data-leaf] { padding-inline: clamp(1.25rem, 5cqi, 2.25rem); }
  /* The heading right below already names the current idea. */
  .ex-trail li:last-child:not(:first-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Wide enough for three lines, not five ("How does research / become a knowledge / base?"). */
  .ex-title { max-width: 22ch; }
  .ex-kids-wrap { margin-top: 0.3rem; padding-top: 0.2rem; }
  .ex-wires { display: none; }
  .ex-kids { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.55rem; }
  .ex-kid { flex: none; min-width: 0; }
  .ex-doll {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.65rem 1.25rem 0.65rem 0.9rem;
    text-align: left;
  }
  .ex-doll-mark { justify-self: center; }
  .ex-doll-text { justify-items: start; gap: 0.1rem; }
  .ex-doll-kind,
  .ex-doll-count { text-wrap: wrap; }
  .ex-doll-count { margin-top: 0; }
  .ex-doll-seen { position: static; translate: none; }
  /* Room is short here: Zoom out keeps its name for screen readers and as a tooltip. */
  .ex-out { width: 44px; padding: 0; justify-content: center; }
  .ex-out span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Chat ---------- */
.ex-chat-stage { padding: clamp(1rem, 0.5rem + 2cqi, 2rem) 0 clamp(1.25rem, 0.75rem + 2cqi, 2.25rem); }
.ex-chat-body { display: grid; gap: 1rem; width: min(100%, 46rem); margin-inline: auto; }
/* The log grows with the conversation, then scrolls. */
.ex-log {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 12rem;
  max-height: clamp(22rem, 62vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem clamp(0.75rem, 3cqi, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.ex-log > :first-child { margin-top: auto; }
.ex-msg { max-width: min(36rem, 90%); }
.ex-msg--bot {
  align-self: flex-start;
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding: 0.95rem 1.2rem 1.05rem;
  border: 2px solid var(--ink);
  border-radius: 24px 24px 24px 6px;
  background: var(--ex-fill);
}
.ex-msg--bot .ex-kind-dot { border-color: var(--ink-3); background: transparent; }
.ex-msg--bot:last-child .ex-kind-dot { border-color: var(--ink); background: var(--gold); }
.ex-msg-title { font-family: var(--f-display); font-size: var(--step-1); font-weight: 780; font-stretch: 80%; line-height: 1.1; }
.ex-msg--bot .ex-blurb,
.ex-msg--bot .ex-body { max-width: none; font-size: 1rem; }
.ex-msg--you {
  align-self: flex-end;
  padding: 0.6rem 1.05rem;
  border-radius: 24px 24px 6px 24px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 550;
  line-height: 1.4;
}

.ex-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; scroll-margin-bottom: 5.5rem; }
.ex-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ex-chip svg { width: 18px; height: 18px; flex: none; margin-left: -0.1rem; }
.ex-chip[data-type="related"] { border-style: dashed; }
.ex-chip[data-type="back"],
.ex-chip[data-seen] { border-color: var(--line); color: var(--ink-2); }
.ex-chip[data-type="back"] { background: transparent; }

@container ex (max-width: 639.98px) {
  .ex-log { max-height: clamp(20rem, 58vh, 30rem); padding-inline: 0.75rem; }
  .ex-msg { max-width: 94%; }
}

/* Hover only where there is a pointer that hovers, so a tap on a phone doesn't leave a doll lifted. */
@media (hover: hover) {
  .ex-tab:hover { background: var(--sunken); }
  .ex-tab[aria-selected="true"]:hover { background: var(--ink); }
  .ex-crumb:hover { color: var(--ink); text-decoration-color: currentColor; }
  .ex-btn:not(:disabled):hover { border-color: var(--ex-focus); background: var(--surface); }
  .ex-doll:hover { transform: translateY(-4px); border-color: var(--ex-focus); }
  .ex-doll:hover:active { transform: translateY(-1px) scale(0.98); }
  .ex-pill:not(.is-here):hover,
  .ex-chip:hover { border-color: var(--ex-focus); transform: translateY(-2px); }
}

/* Forced colors (Windows High Contrast) drop the ink and gold fills that mark the chosen view
   and the facet you're reading, so paint those two states in system highlight colors. */
@media (forced-colors: active) {
  .ex-tab[aria-selected="true"],
  .ex-tab[aria-selected="true"]:hover,
  .ex-pill.is-here {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* ---------- Without JavaScript: the whole tree as a folding outline ---------- */
.ex-fallback { display: grid; gap: 1.25rem; padding-block: 1.1rem 1.5rem; }
.ex-o-label {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.ex-o-head { display: grid; gap: 0.5rem; max-width: 46rem; }
.ex-o-kind {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ex-o-title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
}
.ex-o-blurb { max-width: 62ch; color: var(--ink-2); }
.ex-o-body { display: grid; gap: 0.5rem; max-width: 62ch; }
.ex-o-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ex-o-item { border-bottom: 1px solid var(--line); }
.ex-o-item:last-child { border-bottom: 0; }
.ex-o-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.85rem;
  min-height: 44px;
  padding-block: 0.75rem;
  font-weight: 650;
  line-height: 1.35;
}
.ex-o-name .ex-o-kind { flex: 0 0 9.5rem; }
summary.ex-o-name { position: relative; padding-right: 2rem; cursor: pointer; list-style: none; }
summary.ex-o-name::-webkit-details-marker { display: none; }
summary.ex-o-name::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 1.15rem;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat;
}
details[open] > summary.ex-o-name::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat; }
.ex-o-inner { display: grid; gap: 0.6rem; margin: 0 0 1rem 0.35rem; padding-left: 1.15rem; border-left: 1px solid var(--line); }
.ex-o-leaf { display: grid; gap: 0.35rem; padding-bottom: 0.9rem; }
.ex-o-leaf .ex-o-name { min-height: 0; padding-bottom: 0; }
.ex-o-see { font-size: var(--step--1); color: var(--ink-2); }
.ex-o-see-label {
  margin-right: 0.35rem;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@container ex (max-width: 639.98px) {
  .ex-o-name .ex-o-kind { flex-basis: 100%; }
}

/* pages/about.css */
/* /about/: the mission, the motto, values, giving, Alex's story and facts.
   Scoped to body.page-about. The closing band is styled in work.css. */

/* Two-part sections: heading on the left, content on the right. */
.page-about .motto,
.page-about .giving,
.page-about .story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.page-about .motto > .section-head,
.page-about .giving > .section-head { margin-bottom: 0; }
@media (max-width: 860px) {
  .page-about .giving,
  .page-about .story { grid-template-columns: minmax(0, 1fr); }
}
/* The motto's own term/definition columns need the full width sooner. */
@media (max-width: 1079px) {
  .page-about .motto { grid-template-columns: minmax(0, 1fr); }
  .page-about .motto > .section-head { max-width: 40rem; }
}

/* ---------- Hero: the mission, set big (same spacing as every top-level page) ---------- */
.page-about .about-hero h1 {
  max-width: 25ch;
  font-size: clamp(2.3rem, 1.3rem + 4.3vw, 5.25rem);
  line-height: 0.93;
}

/* ---------- What the motto means ---------- */
.page-about .motto-lines { border-top: 2px solid var(--line-strong); }
.page-about .motto-lines > div {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.page-about .motto-lines dt {
  padding-top: 0.12em;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1.15;
  text-transform: uppercase;
}
.page-about .motto-lines dd { margin: 0; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 520px) {
  .page-about .motto-lines > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Values: a 2 x 2 of parcels ---------- */
.page-about .value-n { font-family: var(--f-mono); font-size: var(--step--1); color: var(--gold-ink); }
.page-about .values p { max-width: 46ch; }
@media (min-width: 861px) {
  .page-about .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .values > * { padding: var(--space-6) var(--space-7) var(--space-6) 0; }
  .page-about .values > :nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-about .values > :nth-child(even) { padding-right: 0; padding-left: var(--space-7); border-left: 1px solid var(--line); }
  .page-about .values > :nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- Giving ---------- */
.page-about .giving-body {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--line-strong);
}
.page-about .giving-body > p:first-child { max-width: 52ch; font-size: var(--step-1); line-height: 1.5; }
.page-about .giving-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--ink-2);
}

/* ---------- Alex's story and the facts ---------- */
.page-about .story {
  grid-template-areas: "photo head" "photo text";
  grid-template-rows: auto 1fr;
  row-gap: var(--space-5);
}
.page-about .story > .section-head { grid-area: head; margin-bottom: 0; }
.page-about .story-photo { grid-area: photo; }
.page-about .story-photo .photo { max-width: 28rem; }
.page-about .story-text { grid-area: text; display: grid; gap: var(--space-5); align-content: start; max-width: 42rem; }
.page-about .story-body { display: grid; gap: var(--space-4); }
.page-about .story-body p:first-child { font-size: var(--step-1); line-height: 1.5; }
.page-about .story-sign { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-2); }
.page-about .story-facts { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
/* Why the address is on censai.app: a quiet second line under it. */
.page-about .story-fact-note { display: block; font-size: var(--step--1); font-weight: 400; color: var(--ink-3); }
@media (min-width: 861px) {
  .page-about .story-photo { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
@media (max-width: 860px) {
  .page-about .story { grid-template-areas: "head" "photo" "text"; grid-template-rows: auto; }
  .page-about .story-photo .photo { max-width: 20rem; }
}
/* No portrait yet: heading and story in one column, with no empty frame beside them. */
.page-about .story.story--solo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "text";
  grid-template-rows: auto;
}

/* pages/classes.css */
/* Classes page (/classes/) and the sign-up result pages.
   Every page stylesheet is bundled into one file, so everything here is
   scoped to .page-classes (the body class) or to cl-* class names. */

.page-classes {
  /* The form needs an error color; there is no shared token for one yet. */
  --cl-error: #A3341F;
  /* Input borders need 3:1 against the panel (WCAG 1.4.11). --line is lighter. */
  --cl-field-line: color-mix(in srgb, var(--ink) 55%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-classes { --cl-error: #F2937C; }
}
:root[data-theme="dark"] .page-classes { --cl-error: #F2937C; }

/* Components here set display, which would beat the hidden attribute. */
.page-classes [hidden] { display: none !important; }

/* ---------- 1. Hero ---------- */
.page-classes .cl-hero-grid { gap: var(--space-7); }
.cl-hero-main { display: grid; gap: var(--space-4); justify-items: start; min-width: 0; }
.cl-hero-main h1 { max-width: 13ch; }
.cl-hero-main .lede { max-width: 46ch; }
.cl-hero-main .btn-row { margin-top: var(--space-2); }
.cl-schedule {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 50ch;
  color: var(--ink);
  font-weight: 550;
}
.cl-schedule svg { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.15em; color: var(--gold-ink); }
.page-classes .cl-format { align-self: start; min-width: 0; }
.page-classes .cl-format > div { grid-template-columns: 6.75rem minmax(0, 1fr); padding-block: 0.85rem; }
.page-classes .cl-format dt {
  padding-top: 0.2em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-classes .cl-format dd { font-weight: 500; }
@media (min-width: 1000px) {
  .page-classes .cl-hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    /* Top-aligned, so the H1 sits where it does on every top-level page. */
    align-items: start;
  }
}

/* ---------- 2. The ladder ---------- */
.cl-levels .section-head { margin-bottom: var(--space-6); }

/* Levels at a glance: five steps that rise like stairs. */
.cl-route { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cl-route ol {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-route li { display: grid; min-width: 0; }
.cl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.7rem 0.85rem 0.75rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cl-step:hover { border-color: var(--line-strong); }
/* Minimum heights, so text can never spill out of a step on an odd screen width. */
.cl-route li:nth-child(1) .cl-step { min-height: 8.25rem; }
.cl-route li:nth-child(2) .cl-step { min-height: 9.75rem; }
.cl-route li:nth-child(3) .cl-step { min-height: 11.25rem; }
.cl-route li:nth-child(4) .cl-step { min-height: 12.75rem; }
.cl-route li:nth-child(5) .cl-step { min-height: 14.25rem; }
.cl-route li:nth-child(n + 6) .cl-step { min-height: 15.75rem; }
.cl-step-n {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.8;
}
.cl-step-text { display: grid; gap: 0.2rem; }
.cl-step-kicker {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cl-step-name { font-size: 0.95rem; font-weight: 650; line-height: 1.25; }
.cl-step-meta {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  color: var(--ink-2);
}
/* Narrower steps: keep the name, drop the length and price (the rungs below repeat them). */
@media (max-width: 1099px) {
  .cl-step-meta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.cl-step--start { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.cl-step--start:hover { border-color: var(--line-strong); }
.cl-step--start .cl-step-kicker,
.cl-step--start .cl-step-meta { color: var(--on-gold); }

/* The rungs. The step column carries a dashed trail from one number to the next. */
.page-classes .cl-rung {
  --n-size: clamp(3.2rem, 2.6rem + 2vw, 4.6rem);
  grid-template-columns: 5.25rem minmax(0, 1fr) minmax(0, 15.5rem);
  grid-template-areas:
    "step head meta"
    "step more meta";
  column-gap: clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
  row-gap: var(--space-5);
  padding-block: var(--space-7);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.page-classes .cl-rung > .rung-step { grid-area: step; position: relative; align-self: stretch; display: block; }
.page-classes .cl-rung > .cl-rung-head { grid-area: head; }
.page-classes .cl-rung > .rung-meta { grid-area: meta; grid-column: auto; }
.page-classes .cl-rung > .cl-rung-more { grid-area: more; }
.page-classes .cl-rung .n {
  display: block;
  width: 3.5rem;
  font-size: var(--n-size);
  text-align: center;
}
.page-classes .cl-rung .rung-step::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: calc(var(--n-size) * 0.8 + 0.85rem);
  bottom: calc(-2 * var(--space-7) + 0.85rem);
  border-left: 1px dashed var(--ink-3);
}
.page-classes .cl-rung:last-child .rung-step::after { display: none; }

.cl-rung-head { display: grid; gap: var(--space-3); }
.cl-rung-name { display: grid; gap: 0.5rem; justify-items: start; }
.cl-rung-title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  text-transform: uppercase;
}
.page-classes .cl-rung-summary { max-width: 62ch; color: var(--ink-2); }

.cl-rung-more { display: grid; gap: var(--space-5); }
.cl-learn,
.cl-leave {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding-top: 0.8rem;
  border-top: 2px solid var(--line-strong);
}
.cl-mini {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.page-classes .cl-leave-text { color: var(--ink); font-weight: 600; line-height: 1.45; }
@media (min-width: 1180px) {
  .cl-rung-more { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--space-6); }
}

.page-classes .cl-rung .rung-meta { gap: var(--space-3); }
.page-classes .cl-rung .rung-meta dl { gap: 0.4rem; }
.page-classes .cl-rung .rung-meta dl > div { padding-bottom: 0.4rem; }
.cl-rung-links { display: grid; justify-items: start; }
.cl-rung-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
}
.cl-rung-links svg { width: 1.05em; height: 1.05em; flex: none; }

/* Tablets: the details drop under the title. */
@media (max-width: 999px) {
  .page-classes .cl-rung {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "step head"
      "step meta"
      "step more";
  }
  .page-classes .cl-rung .rung-meta { max-width: 26rem; }
  .cl-rung-links { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
}

/* Phones: a slimmer trail, and the staircase shows numbers only. */
@media (max-width: 719px) {
  .page-classes .cl-rung {
    --n-size: 2.5rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    padding-block: var(--space-6);
  }
  .page-classes .cl-rung .n { width: 2.25rem; }
  .page-classes .cl-rung .rung-step::after {
    left: 1.125rem;
    top: calc(var(--n-size) * 0.8 + 0.7rem);
    bottom: calc(-2 * var(--space-6) + 0.7rem);
  }
  .cl-route ol { gap: 4px; }
  .cl-step { align-items: center; justify-content: flex-start; padding: 0.6rem 0.25rem; }
  .cl-route li:nth-child(1) .cl-step { min-height: 3.5rem; }
  .cl-route li:nth-child(2) .cl-step { min-height: 4.5rem; }
  .cl-route li:nth-child(3) .cl-step { min-height: 5.5rem; }
  .cl-route li:nth-child(4) .cl-step { min-height: 6.5rem; }
  .cl-route li:nth-child(5) .cl-step { min-height: 7.5rem; }
  .cl-route li:nth-child(n + 6) .cl-step { min-height: 8.5rem; }
  .cl-step-n { font-size: 1.9rem; }
  .cl-step-text,
  .cl-step-meta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- 3. Teams ---------- */
.cl-teams-grid { display: grid; gap: var(--space-5); }
.cl-teams-head { display: grid; gap: var(--space-3); align-content: start; }
.cl-teams-body { display: grid; gap: var(--space-5); min-width: 0; }
.cl-teams-copy { max-width: 52ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.cl-teams-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px solid var(--line-strong);
}
.cl-teams-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-weight: 600; }
@media (min-width: 1000px) {
  .cl-teams-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    align-items: start;
  }
  /* Line the copy up with the heading, not the label above it. */
  .cl-teams-body { padding-top: 1.75rem; }
}

/* ---------- 4. Pricing ---------- */
.cl-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-classes .cl-price { display: flex; flex-direction: column; gap: var(--space-4); }
.cl-price-top { display: flex; align-items: center; gap: 1rem; }
.cl-price-name { font-family: var(--f-body); font-size: var(--step-1); font-weight: 650; line-height: 1.25; }
/* The tag sits on the card's top edge like a tab, so every card's rows line up. */
.cl-price-tag {
  position: absolute;
  top: 0;
  left: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  transform: translateY(-50%);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-price-amount {
  display: grid;
  gap: 0.45rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.cl-amount {
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 2.6rem + 2vw, 4.4rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.85;
  color: var(--ink);
}
.cl-per { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-2); }
/* Side by side, keep each card's text starting at the same height. */
@media (min-width: 1000px) {
  .cl-per { min-height: 2.8em; }
}
.page-classes .cl-price-body { color: var(--ink-2); }
.page-classes .cl-price-cta { margin-top: auto; align-self: flex-start; }
.cl-price-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 70ch;
  margin-top: var(--space-6);
  color: var(--ink-2);
}
.cl-price-note svg { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.15em; color: var(--husk); }

/* ---------- 5. The ThinkPad kit ---------- */
.cl-kit-top { display: grid; gap: var(--space-7); }
.cl-kit-intro .section-head { margin-bottom: var(--space-6); }
@media (min-width: 1000px) {
  .cl-kit-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(3rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
}
.cl-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-shot { display: grid; gap: 0.55rem; align-content: start; min-width: 0; }
.cl-shot-cap {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink);
}
.cl-shot-n { margin-right: 0.35rem; color: var(--gold-ink); }
.cl-shot-pending { display: block; color: var(--ink-3); }

.cl-kit-details { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-classes .cl-kit-details .chips { margin-top: 0.15rem; }

/* ---------- 6. Recordings ---------- */
.cl-rec-grid { display: grid; gap: var(--space-5); }
.cl-rec-head { display: grid; gap: var(--space-3); align-content: start; }
.cl-rec-copy { display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
.cl-rec-copy p { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
/* What's recorded and who can watch: the fine print, under its own rule. */
.cl-rec-copy .cl-rec-privacy {
  max-width: 52ch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.55;
}
@media (min-width: 1000px) {
  /* The heading column gets the larger share, so each sentence of the title fits on one line. */
  .cl-rec-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; }
  .cl-rec-copy { padding-top: 1.75rem; }
}

/* ---------- 7. FAQ ---------- */
.cl-faq-grid { display: grid; gap: var(--space-6); }
.cl-faq-head .section-head { margin-bottom: var(--space-5); }
.cl-mail { overflow-wrap: anywhere; }
@media (min-width: 1000px) {
  .cl-faq-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; }
  .cl-faq-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- 8. Join the class list ---------- */
.cl-join-grid { display: grid; gap: var(--space-6); }
.cl-join-intro .section-head { margin-bottom: var(--space-5); }
.cl-join-alt { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 550; }
.cl-join-alt svg { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.2em; color: var(--ink-3); }
.cl-join-privacy { margin-top: var(--space-3); max-width: 44ch; font-size: var(--step--1); color: var(--ink-3); }
.cl-join-privacy a { color: var(--sky); }
@media (min-width: 1000px) {
  .cl-join-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; }
  .cl-join-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.cl-join-panel {
  min-width: 0;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cl-form { display: grid; gap: var(--space-5); }
.cl-form-pair { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .cl-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
.cl-field { display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.cl-field > label,
.cl-group > legend { font-weight: 650; line-height: 1.35; }
.cl-optional {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cl-input {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--cl-field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease;
}
textarea.cl-input { min-height: 7.5rem; resize: vertical; }
.cl-input:hover { border-color: var(--ink-2); }
.cl-input:focus { border-color: var(--ink); }
.cl-input[aria-invalid="true"] { border-color: var(--cl-error); box-shadow: inset 0 0 0 1px var(--cl-error); }
.cl-hint { font-size: var(--step--1); color: var(--ink-3); }
.cl-error { font-size: var(--step--1); font-weight: 600; color: var(--cl-error); }
.cl-error:empty { display: none; }

.cl-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-group > legend { padding: 0; }
.cl-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.cl-choices--3 { grid-template-columns: minmax(0, 1fr); }
.cl-choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cl-choice:hover { border-color: var(--ink-3); }
.cl-choice:has(input:checked) { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cl-choice input,
.cl-check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--ink);
}
.cl-consent { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.cl-check { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 550; line-height: 1.45; cursor: pointer; }
.cl-check input { margin-top: 0.18rem; }

/* Bots fill every field. People never see this one. */
.cl-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cl-alert-box {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cl-error);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.cl-alert-box p:first-child { font-weight: 650; }
.cl-form-foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.cl-submit { min-width: 13rem; }
.cl-submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }

.cl-done { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-4); }
.cl-done svg { width: 2.5rem; height: 2.5rem; color: var(--husk); }
.cl-done-text {
  max-width: 24ch;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.2;
}
.cl-done-text:focus { outline: none; }
.cl-done-next { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; }
.cl-done-next svg { width: 1.05em; height: 1.05em; color: currentColor; }

/* ---------- Result pages (/classes/joined/, /classes/join-error/) ---------- */
.cl-result > .wrap { justify-items: start; padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.cl-result h1 { max-width: 14ch; }
.cl-result .btn-row { margin-top: var(--space-3); }
.cl-result-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--husk);
  border-radius: 50%;
  color: var(--husk);
}
.cl-result-mark svg { width: 1.6rem; height: 1.6rem; }

/* pages/home.css */
/* Home page ("/"). Every class here starts with home- so nothing leaks into other pages. */

/* ---------- Hero: the survey grid of the Cedar Valley ---------- */
.home-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* Canvas colors, read by scripts/hero-grid.js, so light and dark both work. */
  --grid-road: var(--line);
  --grid-rows: var(--line);
  --grid-rows-alpha: 0.75;
  --grid-pulse: var(--gold);
  --grid-mark: var(--gold);
  --grid-label: var(--ink-3);
  --grid-paper: var(--paper);
  /* The beacon is the brand mark: the spark in --mark-ink (soil, or brand paper in dark mode), the kernels in --grid-mark. */
  --grid-ink: var(--mark-ink);
}
.home-hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-hero > .wrap {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 4.5vw, 5rem) clamp(4rem, 2.5rem + 4vw, 6rem);
}
.home-hero-text {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  max-width: 38rem;
}
.home-hero-text .display { max-width: 12ch; }
.home-hero-text .lede { max-width: 38ch; }
/* Above 760px the map sits beside the text, so the text never takes more than
   62% of the row (hero-grid.js needs three road cells to draw the map there).
   At 760px and below the map becomes a strip under the text. */
@media (min-width: 761px) {
  .home-hero-text { max-width: min(38rem, 62%); }
}
@media (max-width: 760px) {
  .home-hero > .wrap { padding-bottom: 12.5rem; }
}

/* A quiet text link with an arrow. The negative margin (padding + 2px border)
   lines its text up with the copy above. */
.home-more { margin-left: calc(-0.4rem - 2px); justify-self: start; }

/* ---------- Mission band ---------- */
.home-mission {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.home-mission > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.home-mission-text {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.02;
  letter-spacing: -0.005em;
  max-width: 24ch;
}
.home-mission-plain {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .home-mission > .wrap { grid-template-columns: 1fr; }
}

/* ---------- Three ways we help ---------- */
.home-ways > .home-way { justify-items: start; }
.home-verb {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 850;
  font-stretch: 70%;
  text-transform: uppercase;
  line-height: 0.9;
}
.home-ways .home-way-what {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}

/* ---------- Two-column sections: heading on the left, content on the right ---------- */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-6) clamp(2rem, 0.5rem + 5vw, 6rem);
  align-items: start;
}
.home-split-head { display: grid; gap: var(--space-3); justify-items: start; }
.home-split-head .section-head { margin-bottom: 0; }
@media (max-width: 900px) {
  .home-split { grid-template-columns: 1fr; }
}

/* ---------- Class ladder, compact ---------- */
.home-ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}
.home-rung {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  padding-block: var(--space-4) calc(var(--space-4) + 2px);
  border-bottom: 1px solid var(--line);
}
.home-rung-n {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.9rem + 1vw, 2.8rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.8;
  color: var(--ink-3);
}
.home-rung--start .home-rung-n { color: var(--gold); }
.home-rung-body { display: grid; gap: 0.2rem; min-width: 0; }
.home-rung-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  font-family: var(--f-body);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}
.home-rung-name a { position: relative; color: inherit; text-decoration: none; }
/* Grows the tap target to about 44px without moving text or the focus ring. */
.home-rung-name a::after { content: ""; position: absolute; inset: -0.65rem -0.25rem; }
.home-rung-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.home-rung-body p { color: var(--ink-2); }
.home-rung-meta {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  white-space: nowrap;
}
.home-rung-meta span + span { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .home-rung { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .home-rung-meta { grid-column: 2; display: flex; gap: var(--space-3); }
}

/* The ThinkPad-included offer, set like a price tag under the ladder. */
.home-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.home-price-amount {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 850;
  font-stretch: 70%;
  line-height: 1;
}
.home-price-what {
  display: grid;
  padding-left: var(--space-5);
  border-left: 1px solid var(--line);
  font-size: var(--step-1);
  line-height: 1.3;
}
.home-price-what span { color: var(--ink-2); }
.home-price-note { max-width: 62ch; margin-top: var(--space-3); font-size: var(--step--1); color: var(--ink-3); }
@media (max-width: 420px) {
  .home-price { grid-template-columns: 1fr; }
  .home-price-what { padding-left: 0; border-left: 0; }
}

/* ---------- ThinkPad kit ---------- */
.home-kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) clamp(2rem, 0.5rem + 5vw, 6rem);
  align-items: start;
}
.home-kit-text { display: grid; gap: var(--space-4); justify-items: start; }
.home-kit-lede { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
/* The laptop's photo, or the drawn laptop until there is one, with a caption like /classes/. */
.home-kit-shot { display: grid; gap: 0.55rem; min-width: 0; }
.home-kit-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink);
}
.home-kit-pending { color: var(--ink-3); }
@media (max-width: 900px) {
  .home-kit { grid-template-columns: 1fr; }
  /* Stacked, the picture shouldn't outweigh the text it introduces. */
  .home-kit-shot { max-width: 28rem; }
}

/* ---------- No favorite vendor ---------- */
.home-promise {
  --band-bg: var(--ink);
  --band-fg: var(--paper);
  --band-muted: color-mix(in srgb, var(--paper) 72%, var(--ink));
  background: var(--band-bg);
  color: var(--band-fg);
}
.home-promise > .wrap {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  padding-block: var(--space-8);
}
.home-promise .label { color: var(--band-muted); }
.home-promise-title {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
  font-weight: 850;
  font-stretch: 70%;
  text-transform: uppercase;
  line-height: 0.92;
}
/* One sentence per line; the second one, the turn, carries the gold. */
.home-promise-title > span { display: block; }
.home-promise-turn { color: var(--gold); }
/* Provider names as a map legend: a small square before each, so wrapped lines start clean. */
.home-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--band-muted);
}
.home-providers li { display: inline-flex; align-items: center; gap: 0.6em; }
.home-providers li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: currentColor;
}
.home-promise .home-more { color: var(--band-fg); }
.home-promise :focus-visible { outline-color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-promise {
    --band-bg: var(--surface);
    --band-fg: var(--ink);
    --band-muted: var(--ink-2);
    border-bottom: 1px solid var(--line);
  }
}
:root[data-theme="dark"] .home-promise {
  --band-bg: var(--surface);
  --band-fg: var(--ink);
  --band-muted: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

/* ---------- Work: the current client and our products ---------- */
.home-work {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-top: 2px solid var(--line-strong);
}
/* Columns are flex stacks of equal height, so their closing links share a baseline. */
.home-client,
.home-products {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  padding-top: var(--space-5);
}
.home-client > .home-more,
.home-products > .home-more { margin-top: auto; }
.home-client { padding-right: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); }
.home-products { padding-left: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); border-left: 1px solid var(--line); }
.home-client-meta {
  display: grid;
  gap: 0.15rem;
  margin-top: calc(var(--space-2) * -1);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.home-client-meta > p:first-child { display: flex; flex-wrap: wrap; }
.home-client-meta span { display: inline-flex; align-items: center; }
.home-client-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 0.7em;
  border-radius: 50%;
  background: currentColor;
}
.home-client-org { color: var(--ink); font-weight: 500; }
.home-client-since { color: var(--ink-3); }
@media (max-width: 560px) {
  /* Stacked on phones, so no separator dangles at a line end. */
  .home-client-meta > p:first-child { display: grid; }
  .home-client-meta span + span::before { display: none; }
}
.home-client-summary { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
/* An h3 styled as a label: give it the same line box as the p.label beside it. */
.home-products > .label { line-height: 1.6; }
.home-product-list { width: 100%; margin: 0; padding: 0; list-style: none; }
.home-product-list > li {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  padding-block: var(--space-4) calc(var(--space-4) + 2px);
  border-bottom: 1px solid var(--line);
}
.home-product-list > li:first-child { padding-top: var(--space-1); }
.home-product-status { margin-bottom: 0.15rem; }
.home-product-name {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
}
.home-product-list p { color: var(--ink-2); }
.home-products .badge { white-space: normal; }
@media (max-width: 900px) {
  .home-work { grid-template-columns: 1fr; }
  .home-client { padding-right: 0; padding-bottom: var(--space-6); }
  .home-products { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* The client's own words, full width under both columns. Renders only when work.json has a quote. */
.home-quote {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line);
}
.home-quote blockquote { margin: 0; padding-left: var(--space-5); border-left: 2px solid var(--gold); }
.home-quote p {
  max-width: 36ch;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.22;
  text-wrap: balance;
}
.home-quote figcaption { padding-left: calc(var(--space-5) + 2px); font-size: var(--step--1); color: var(--ink-3); }

/* ---------- About ---------- */
.home-about {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6) clamp(2rem, 0.5rem + 5vw, 6rem);
  align-items: start;
}
/* No portrait yet: the text runs in one column, with no empty frame beside it. */
.home-about--solo { grid-template-columns: minmax(0, 1fr); }
.home-about .photo { width: 100%; max-width: 20rem; }
.home-about-text { display: grid; gap: var(--space-4); justify-items: start; max-width: 42rem; }
.home-about-story { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.home-pledge {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 2px solid var(--line-strong);
}
.home-pledge-status { font-size: var(--step--1); color: var(--ink-3); }
@media (max-width: 760px) {
  .home-about { grid-template-columns: 1fr; }
  .home-about .photo { max-width: 11rem; }
}

/* ---------- Closing band ---------- */
.home-closing { background: var(--surface); }
.home-closing-grid > * { justify-items: start; }
.home-closing-grid .home-closing-mail { margin-top: var(--space-2); font-size: var(--step--1); color: var(--ink-3); }
.home-closing-mail a { position: relative; }
.home-closing-mail a::after { content: ""; position: absolute; inset: -0.9rem -0.25rem; }
@media (min-width: 861px) {
  .home-closing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* pages/lessons.css */
/* Lessons: /lessons/ (body.page-lessons) and one page per lesson
   (/lessons/<slug>/, body.page-lesson-<slug>). Every page stylesheet is
   bundled into one file, so everything here uses ls-* class names. */

/* ---------- Shared bits ---------- */
.ls-mini {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* A text link with an arrow, tall enough to tap. */
.ls-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
}
.ls-arrow svg { width: 1.05em; height: 1.05em; flex: none; }
/* The last word of a link and the icon after it: they wrap together. */
.ls-glue { white-space: nowrap; }

/* Two-part sections: heading on the left, content on the right. */
.ls-split { display: grid; gap: var(--space-5) clamp(2rem, 1rem + 4vw, 5rem); }
.ls-split > .section-head { margin-bottom: 0; align-content: start; }
@media (min-width: 1000px) {
  .ls-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* ======================================================================
   /lessons/
   ====================================================================== */

/* ---------- Hero, with a legend of what each lesson holds ---------- */
.ls-hero > .wrap { gap: var(--space-7); }
.ls-hero-main { display: grid; gap: var(--space-4); justify-items: start; min-width: 0; }
.ls-hero-main h1 { max-width: 14ch; }
.ls-hero-main .lede { max-width: 46ch; }
.ls-legend { display: grid; gap: 0.75rem; align-self: start; min-width: 0; }
.ls-legend-list > div { grid-template-columns: 6.75rem minmax(0, 1fr); padding-block: 0.85rem; }
.ls-legend-list dt {
  padding-top: 0.2em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ls-legend-list dd { font-weight: 500; }
@media (min-width: 1000px) {
  .ls-hero > .wrap {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    /* Top-aligned, so the H1 sits where it does on every top-level page. */
    align-items: start;
  }
}

/* ---------- The lessons, as a ladder ---------- */
.ls-lessons .section-head { margin-bottom: var(--space-6); }

/* The step column carries a dashed trail from one number to the next, as on /classes/.
   Only the free intro's number is gold: it's where to start. */
.ls-rung {
  --n-size: clamp(3.2rem, 2.6rem + 2vw, 4.6rem);
  grid-template-columns: 5.25rem minmax(0, 1fr) minmax(0, 17.5rem);
  column-gap: clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
  row-gap: var(--space-5);
  padding-block: var(--space-7);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.ls-rung > .rung-step { position: relative; align-self: stretch; display: block; }
.ls-rung .n {
  display: block;
  width: 3.5rem;
  font-size: var(--n-size);
  text-align: center;
  color: var(--ink-3);
}
.ls-rung--start .n { color: var(--gold); }
.ls-rung .rung-step::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: calc(var(--n-size) * 0.8 + 0.85rem);
  bottom: calc(-2 * var(--space-7) + 0.85rem);
  border-left: 1px dashed var(--ink-3);
}
.ls-rung:last-child .rung-step::after { display: none; }

.ls-rung-body { gap: var(--space-3); }
.ls-rung-name { display: grid; gap: 0.5rem; justify-items: start; }
.ls-rung-title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.ls-rung .ls-rung-summary { max-width: 62ch; }
.ls-rung-promise {
  display: grid;
  gap: 0.6rem;
  max-width: 62ch;
  margin-top: var(--space-3);
  padding-top: 0.8rem;
  border-top: 2px solid var(--line-strong);
}
.ls-rung .ls-rung-promise-text { color: var(--ink); font-weight: 600; line-height: 1.45; }

.ls-rung .ls-rung-meta { gap: var(--space-3); }
.ls-rung-meta dl { gap: 0.4rem; }
.ls-rung-meta dl > div { padding-bottom: 0.4rem; }
.ls-rec { padding-top: var(--space-1); line-height: 1; }
.ls-badge { max-width: 100%; padding-block: 0.3rem; }
.ls-badge svg { width: 0.95rem; height: 0.95rem; flex: none; margin-left: -0.1rem; }
.ls-rung-meta .ls-arrow { justify-self: start; }

/* Tablets: the details drop under the title. */
@media (max-width: 999px) {
  .ls-rung { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .ls-rung > .rung-step { grid-row: span 2; }
  .ls-rung .ls-rung-meta { grid-column: 2; max-width: 26rem; }
}
/* Phones: a slimmer trail. */
@media (max-width: 719px) {
  .ls-rung {
    --n-size: 2.5rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    padding-block: var(--space-6);
  }
  .ls-rung .n { width: 2.25rem; }
  .ls-rung .rung-step::after {
    left: 1.125rem;
    top: calc(var(--n-size) * 0.8 + 0.7rem);
    bottom: calc(-2 * var(--space-6) + 0.7rem);
  }
}
/* Very narrow phones: a long badge may wrap. */
@media (max-width: 349px) {
  .ls-badge { white-space: normal; border-radius: var(--radius); }
}

/* ---------- How the recordings work ---------- */
.ls-recs-grid { display: grid; gap: var(--space-5); }
.ls-recs-head { display: grid; gap: var(--space-3); align-content: start; }
.ls-recs-body { display: grid; gap: var(--space-5); align-content: start; max-width: 40rem; min-width: 0; }
.ls-recs-lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
/* What's recorded and who can watch. */
.ls-recs-privacy { max-width: 52ch; line-height: 1.55; color: var(--ink-2); }
.ls-define { border-top: 2px solid var(--line-strong); }
.ls-define > div {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.ls-define dt {
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1.25;
  text-transform: uppercase;
}
.ls-define dd { margin: 0; color: var(--ink); }
.ls-now { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--ink-2); }
.ls-now svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.2em; color: var(--ink); }
.ls-now strong { color: var(--ink); font-weight: 650; }
@media (min-width: 1000px) {
  /* The heading column gets the larger share, so each sentence of the title fits on one line. */
  .ls-recs-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    align-items: start;
  }
  /* Line the copy up with the heading, not the label above it. */
  .ls-recs-body { padding-top: 1.75rem; }
}
@media (max-width: 520px) {
  .ls-define > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Featured explainer and the closing band ---------- */
.ls-featured-more { margin-top: var(--space-4); }
.ls-cta .section-head { margin-bottom: var(--space-5); }

/* ======================================================================
   /lessons/<slug>/
   ====================================================================== */

/* ---------- Hero: the lesson on the left; who it's for and its promise on the right,
   each under its own strong rule, like the legend on /lessons/ ---------- */
.ls-lhero-grid { display: grid; gap: var(--space-5); min-width: 0; }
.ls-lhero-main { display: grid; gap: var(--space-4); justify-items: start; min-width: 0; }
.ls-lhero-main h1 { max-width: 15ch; }
.ls-lhero-main .lede { max-width: 46ch; }
.ls-chips { margin-top: calc(var(--space-1) * -1); }
.ls-chip svg { width: 13px; height: 13px; flex: none; }
.ls-side { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.ls-who,
.ls-promise {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-width: 0;
  padding-top: 0.9rem;
  border-top: 2px solid var(--line-strong);
}
.ls-who-text { max-width: 56ch; color: var(--ink-2); }
.ls-promise-text {
  max-width: 36ch;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.32;
  color: var(--ink);
}
@media (min-width: 1000px) {
  .ls-lhero-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "main side"
      "cta side";
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
  }
  .ls-lhero-main { grid-area: main; }
  .ls-side { grid-area: side; align-self: end; }
  .ls-lhero-cta { grid-area: cta; }
}

/* ---------- Recording: a framed 16:9 placeholder, not a player ---------- */
.ls-video-grid { display: grid; gap: var(--space-6); }
.ls-video-text { display: grid; gap: var(--space-3); justify-items: start; align-content: start; min-width: 0; }
.ls-video-text p { max-width: 44ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.ls-video-text .ls-video-privacy { max-width: 52ch; font-size: var(--step-0); line-height: 1.55; }
.ls-video-text .ls-arrow { margin-top: var(--space-1); }
.ls-video {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--sunken);
  /* Survey paper: an 8 by 4.5 grid of squares. */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 12.5% 22.2222%;
  background-position: -1px -1px;
}
.ls-video-card {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 25rem;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}
.ls-video-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.15rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}
.ls-video-mark svg { width: 1.35rem; height: 1.35rem; }
.ls-video-status {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.ls-video-copy { color: var(--ink-2); line-height: 1.5; }
@media (min-width: 900px) {
  .ls-video-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
  }
}
@media (max-width: 599px) {
  .ls-video { padding: var(--space-3); }
  .ls-video-card { gap: 0.4rem; padding: var(--space-3) var(--space-4); }
  .ls-video-mark { width: 2.4rem; height: 2.4rem; }
  .ls-video-mark svg { width: 1.1rem; height: 1.1rem; }
  .ls-video-copy { font-size: var(--step--1); }
}

/* ---------- You'll be able to ---------- */
.ls-ticks { gap: 0; border-top: 2px solid var(--line-strong); }
.ls-ticks li { padding-block: 0.85rem; border-bottom: 1px solid var(--line); }
.ls-ticks li::before { top: calc(0.85rem + 0.78em); }

/* ---------- Outline: a road with a marker at every stop ----------
   The time, the marker and a title's first line share one line box
   (--ls-line), so they stay lined up at every screen size. */
.ls-timeline,
.ls-total {
  --ls-line: calc(var(--step-1) * 1.3);
  --ls-mark: calc(var(--space-4) + var(--ls-line) / 2);
  --ls-road: 1.6rem;
}
.ls-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}
.ls-seg {
  position: relative;
  display: grid;
  grid-template-columns: 8.75rem minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas: "time title detail";
  gap: var(--space-2) var(--space-5);
  align-items: start;
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.ls-seg:last-child { border-bottom: 0; }
/* The marker, and the dashed road down to the next one. */
.ls-seg::before,
.ls-total::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--ls-mark) - 4.5px);
  width: 9px;
  height: 9px;
  background: var(--ink);
}
.ls-seg::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(var(--ls-mark) + 4.5px);
  bottom: calc(-1 * (var(--ls-mark) - 4.5px));
  border-left: 1px dashed var(--ink-3);
}
.ls-seg--break::before { background: var(--paper); border: 1.5px solid var(--ink-3); }
.ls-seg-title {
  grid-area: title;
  font-family: var(--f-body);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}
.ls-seg-time {
  grid-area: time;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.7rem;
  padding-left: var(--ls-road);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  line-height: var(--ls-line);
  color: var(--ink-3);
  white-space: nowrap;
}
.ls-seg-at { color: var(--ink); font-weight: 500; font-family: var(--f-mono); }
.ls-seg-detail {
  grid-area: detail;
  max-width: 62ch;
  /* Centers its first line on the title's first line. */
  padding-top: calc((var(--ls-line) - 1.6em) / 2);
  color: var(--ink-2);
}
.ls-seg--break .ls-seg-title { color: var(--ink-2); font-weight: 550; }
.ls-seg--break .ls-seg-detail { color: var(--ink-3); }

/* The sum line: where the road ends, on a gold marker. */
.ls-total {
  position: relative;
  display: grid;
  grid-template-columns: 8.75rem auto minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong);
  line-height: var(--ls-line);
}
.ls-total::before { background: var(--gold); outline: 1.5px solid var(--ink); }
.ls-total > .ls-seg-at { padding-left: var(--ls-road); font-size: var(--step--1); }
.ls-total-label {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ls-total-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.9rem;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 78%;
  text-transform: uppercase;
}
.ls-total-min {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  font-weight: 400;
  text-transform: none;
  color: var(--ink-3);
}
@media (max-width: 999px) {
  .ls-seg {
    grid-template-columns: 8.75rem minmax(0, 1fr);
    grid-template-areas:
      "time title"
      ". detail";
  }
}
/* Phones: the time sits above each title, along the road. */
@media (max-width: 639px) {
  .ls-seg {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "time" "title" "detail";
    row-gap: 0.15rem;
    padding-left: var(--ls-road);
  }
  .ls-seg-time { padding-left: 0; }
  .ls-seg-detail { padding-top: 0.2rem; }
  .ls-total { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--space-4); }
}

/* ---------- Tools: a ledger ---------- */
.ls-tool-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); }
.ls-tool {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  grid-template-areas: "head cost why";
  gap: var(--space-3) clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.ls-tool-head { grid-area: head; display: grid; gap: var(--space-2); justify-items: start; align-content: start; min-width: 0; }
.ls-tool-name { font-family: var(--f-body); font-size: var(--step-1); font-weight: 650; line-height: 1.3; }
.ls-type svg { width: 14px; height: 14px; flex: none; }
.ls-tool-cost { grid-area: cost; display: grid; gap: 0.3rem; align-content: start; font-size: var(--step--1); line-height: 1.5; color: var(--ink); }
.ls-tool-why { grid-area: why; max-width: 60ch; color: var(--ink-2); }
@media (max-width: 999px) {
  .ls-tool {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas:
      "head why"
      "cost why";
  }
}
@media (max-width: 639px) {
  .ls-tool {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "cost" "why";
    padding-block: var(--space-5);
  }
}

/* ---------- Plans: a table from 1100px up; below that each plan stacks into its own block ----------
   Six columns need the room: under 1100px the provider names and prices squeeze into
   slivers. At 1100px the provider column holds 0.11 x 1044 - 16 = 99px; "Perplexity" needs 86. */
.ls-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--step--1);
  line-height: 1.5;
}
.ls-table caption {
  caption-side: top;
  padding-bottom: var(--space-4);
  text-align: left;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.ls-table caption time { color: var(--ink); font-weight: 650; }
.ls-col-provider { width: 11%; }
.ls-col-plan { width: 14%; }
.ls-col-price { width: 16%; }
.ls-col-best { width: 21%; }
.ls-col-watch { width: 24%; }
.ls-col-link { width: 14%; }
.ls-table thead th {
  padding: 0.75rem var(--space-4) 0.75rem 0;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ls-table tbody th,
.ls-table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px dashed var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
/* A solid rule where the provider changes, dashed ones inside a provider's plans,
   and a solid one to close the table. */
.ls-plan--first > * { border-top: 1px solid var(--line); }
.ls-plan:last-child > * { border-bottom-style: solid; }
.ls-table tbody th { font-weight: 650; color: var(--ink); }
.ls-table td { color: var(--ink-2); }
/* Names wrap between words, never inside one ("Perplexit / y"). */
.ls-plan-provider { font-family: var(--f-mono); color: var(--ink); overflow-wrap: normal; }
.ls-plan-price .ls-v { color: var(--ink); font-weight: 600; }
.ls-k { display: none; }
/* Inline, so the icon follows the last line of a long host name.
   The padding makes the tap area 44px or more each way (even "x.ai") without moving the text. */
.ls-plan-link a { padding-block: 0.875rem; padding-right: 0.3rem; font-weight: 600; }
.ls-plan-link svg {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
}
@media (min-width: 1100px) {
  /* Each provider's name shows once, on its first plan. Screen readers still hear it on every row. */
  .ls-plan-provider.is-same .ls-v {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 1099px) {
  .ls-table,
  .ls-table caption,
  .ls-table tbody,
  .ls-table tr,
  .ls-table tbody th,
  .ls-table td { display: block; }
  .ls-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ls-table tbody { border-top: 2px solid var(--line-strong); }
  .ls-table tr {
    display: grid;
    gap: 0.6rem;
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
  }
  .ls-table tbody th,
  .ls-table td { padding: 0; border: 0; }
  .ls-plan-provider {
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ls-plan-name {
    font-family: var(--f-display);
    font-size: var(--step-1);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 1.15;
  }
  /* Each value under its own small label, full width, easy to read on a phone. */
  .ls-k {
    display: block;
    margin-bottom: 0.1rem;
    font-family: var(--f-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ls-plan-link { padding-top: 0.2rem; }
}
/* Tablets: under each plan's name, its four values sit two by two, so lines stay a readable length. */
@media (min-width: 640px) and (max-width: 1099px) {
  .ls-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  }
  .ls-plan-provider,
  .ls-plan-name { grid-column: 1 / -1; }
  .ls-plan-name { margin-top: -0.15rem; }
  .ls-plan-link { padding-top: 0; }
}

/* ---------- Take-home steps ---------- */
.ls-steps { counter-reset: ls-step; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); }
.ls-steps li {
  counter-increment: ls-step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.ls-steps li::before {
  content: counter(ls-step, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--gold-ink);
}
.ls-step-time {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 639px) {
  .ls-steps li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ls-step-time { grid-column: 2; text-align: left; white-space: normal; }
}

/* ---------- Glossary and resources, side by side ---------- */
.ls-ref-grid { display: grid; gap: var(--space-8) clamp(2rem, 1rem + 4vw, 5rem); }
.ls-ref-col { min-width: 0; }
.ls-ref-col .section-head { margin-bottom: var(--space-5); }
@media (min-width: 1000px) {
  .ls-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.ls-glossary { margin: 0; border-top: 2px solid var(--line-strong); }
.ls-glossary > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: 0.25rem var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.ls-glossary dt { font-weight: 650; line-height: 1.45; }
.ls-glossary dd { margin: 0; color: var(--ink-2); }
@media (max-width: 559px) {
  .ls-glossary > div { grid-template-columns: minmax(0, 1fr); }
}
.ls-res-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); }
.ls-res { display: grid; justify-items: start; gap: 0.15rem; padding-block: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
/* Text, not a flex row: a title that wraps keeps its icon right after the last word.
   The padding makes the tap area 44px or more. */
.ls-res-link { display: block; padding-block: 0.75rem; font-weight: 600; line-height: 1.35; }
.ls-res-link svg {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.35em;
  vertical-align: -0.1em;
}
.ls-res-host { margin-top: -0.5rem; font-family: var(--f-mono); font-size: var(--step--2); color: var(--ink-3); }
.ls-res-note { max-width: 60ch; color: var(--ink-2); }

/* ---------- Lesson footer: last updated, then previous and next ---------- */
.ls-foot { border-bottom: 1px solid var(--line); }
.ls-foot > .wrap { display: grid; gap: var(--space-4); padding-block: var(--space-7); }
.ls-updated { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-3); }
.ls-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--line-strong); }
/* Bottom-aligned, so both titles share a baseline even when only one side has a kicker line. */
.ls-pager-link {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.5rem;
  min-height: 44px;
  padding: var(--space-5) var(--space-5) var(--space-4) 0;
  color: var(--ink);
  text-decoration: none;
}
.ls-pager-next { justify-items: end; padding: var(--space-5) 0 var(--space-4) var(--space-5); border-left: 1px solid var(--line); text-align: right; }
.ls-pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ls-pager-dir svg { width: 1rem; height: 1rem; flex: none; }
.ls-pager-prev .ls-pager-dir svg { transform: scaleX(-1); }
.ls-pager-kicker {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.ls-pager-title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  text-transform: uppercase;
}
.ls-pager-link:hover .ls-pager-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
@media (max-width: 639px) {
  .ls-pager { grid-template-columns: minmax(0, 1fr); }
  .ls-pager-next { justify-items: start; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; }
}

/* pages/misc.css */
/* /privacy/ (body.page-privacy) and the 404 page (body.page-not-found). */

/* ---------- Privacy: a ledger of short answers ---------- */
.page-privacy .privacy-hero .updated { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-3); }
.page-privacy .policy { border-top: 2px solid var(--line-strong); }
.page-privacy .policy-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-3) clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.page-privacy .policy-body { display: grid; gap: var(--space-4); max-width: 40rem; }
/* The summary table sits inside a row that already has a rule above it. */
.page-privacy .policy-body .facts { border-top: 0; margin-top: -0.75rem; }
.page-privacy .policy-body .facts > div:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .page-privacy .policy-row { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); }
  .page-privacy .policy-body .facts { margin-top: 0; }
}

/* ---------- 404 ---------- */
.page-not-found .nf > .wrap { padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.page-not-found .nf-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
}
.page-not-found .nf-text { display: grid; gap: var(--space-4); }
.page-not-found .nf-text .display { max-width: 12ch; }

.page-not-found .nf-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4);
  border-top: 2px solid var(--line-strong);
}
.page-not-found .nf-links li { min-width: 0; }
.page-not-found .nf-links li + li { border-left: 1px solid var(--line); }
.page-not-found .nf-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.page-not-found .nf-links li + li a { padding-left: var(--space-5); }
.page-not-found .nf-links a svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--gold-ink); transition: transform 0.15s ease; }
.page-not-found .nf-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.page-not-found .nf-links a:hover svg { transform: translateX(3px); }
.page-not-found .nf-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  color: var(--ink-2);
}

/* The survey patch with one parcel missing. */
.page-not-found .nf-map { justify-self: end; width: 100%; max-width: 30rem; height: auto; }
.page-not-found .nf-roads,
.page-not-found .nf-furrows { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* The missing parcel: its roads are erased, then outlined in dashes. */
.page-not-found .nf-gap-erase { fill: var(--paper); stroke: var(--paper); stroke-width: 4; vector-effect: non-scaling-stroke; }
.page-not-found .nf-gap { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.page-not-found .nf-gap-label { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; fill: var(--gold-ink); }

@media (max-width: 860px) {
  .page-not-found .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .page-not-found .nf-map { justify-self: start; max-width: 20rem; }
}
@media (max-width: 560px) {
  .page-not-found .nf-links { grid-template-columns: minmax(0, 1fr); }
  .page-not-found .nf-links li + li { border-left: 0; border-top: 1px solid var(--line); }
  .page-not-found .nf-links a,
  .page-not-found .nf-links li + li a { min-height: 56px; padding: var(--space-3) 0; }
}

/* pages/work.css */
/* /work/: clients, projects and our own software. Scoped to body.page-work.
   The closing band (.closing) is shared with /about/ and styled at the end. */

/* ---------- Hero: the page's sections as a short legend ---------- */
.page-work .work-index { margin-top: var(--space-4); }
.page-work .work-index-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--line-strong);
}
.page-work .work-index li { min-width: 0; }
.page-work .work-index li + li { border-left: 1px solid var(--line); }
.page-work .work-index a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 44px;
  padding: var(--space-4) var(--space-4) var(--space-1) 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.page-work .work-index li + li a { padding-left: var(--space-5); }
.page-work .work-index a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.page-work .work-index .n {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--gold-ink);
}
@media (max-width: 640px) {
  .page-work .work-index-list { grid-template-columns: 1fr; }
  .page-work .work-index li + li { border-left: 0; border-top: 1px solid var(--line); }
  .page-work .work-index a,
  .page-work .work-index li + li a { padding: var(--space-3) 0; }
}

/* ---------- Current client ---------- */
.page-work .client-meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-1);
  color: var(--ink-2);
}
.page-work .client-meta li { display: inline-flex; align-items: center; }
.page-work .client-meta li + li::before {
  content: "";
  width: 1px;
  height: 1.1em;
  margin-inline: var(--space-4);
  background: var(--line);
}
.page-work .client-org { color: var(--ink); font-weight: 650; }
.page-work .client-since {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.page-work .client-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.page-work .client-summary { display: grid; gap: var(--space-6); }
.page-work .client-summary .lede { color: var(--ink); max-width: 32ch; }
.page-work .client-built { display: grid; gap: var(--space-4); }

.page-work .built { counter-reset: built; border-top: 2px solid var(--line-strong); }
/* Each item's text sits in one <span>: inline() may wrap words in spans of their own,
   and loose children of a grid would each become a cell. */
.page-work .built li {
  counter-increment: built;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.page-work .built li::before {
  content: counter(built, decimal-leading-zero);
  padding-top: 0.2em;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  color: var(--gold-ink);
}

/* Only rendered when the client has given a quote. */
.page-work .client-quote {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold);
}
.page-work .client-quote figcaption { font-size: var(--step--1); color: var(--ink-2); }

@media (max-width: 860px) {
  .page-work .client-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-work .client-meta { flex-direction: column; }
  .page-work .client-meta li + li::before { display: none; }
}

/* ---------- Projects: a ledger ---------- */
.page-work .projects { border-top: 2px solid var(--line-strong); }
.page-work .project {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.6fr);
  grid-template-areas: "head what status";
  gap: var(--space-3) clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.page-work .project-head { grid-area: head; display: grid; gap: var(--space-1); }
.page-work .project-for { font-size: var(--step--1); color: var(--ink-3); }
.page-work .project-what { grid-area: what; max-width: 58ch; color: var(--ink-2); }
.page-work .project-status {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
}
.page-work .project-year { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-3); }
/* In the hero, under the lede: where the Censai Systems name comes from. */
.page-work .work-note { max-width: 60ch; font-size: var(--step--1); color: var(--ink-3); }

@media (max-width: 860px) {
  .page-work .project { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "status" "what"; }
  .page-work .project-status { justify-content: flex-start; }
}

/* ---------- Our own software ---------- */
.page-work .products > * { row-gap: var(--space-4); }
.page-work .product-id,
.page-work .product-body { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.page-work .product-status { line-height: 1; }
/* When rows are shared across products, keep each list's items together at the top of its row. */
.page-work .product .ticks { align-content: start; }
.page-work .product-name {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.page-work .product-tagline {
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.2;
  color: var(--ink);
}
.page-work .product-cta { padding-top: var(--space-2); }

/* Wide: three parcels whose rows line up across (status, name, tagline, text, list, button). */
@media (min-width: 1180px) {
  .page-work .products { grid-template-rows: repeat(6, auto); }
  .page-work .products > .product { grid-row: span 6; grid-template-rows: subgrid; }
  .page-work .product-id,
  .page-work .product-body { display: contents; }
}
/* Narrower: one product per row, like the projects ledger above. */
@media (max-width: 1179px) {
  .page-work .products { grid-template-columns: minmax(0, 1fr); }
  .page-work .products > .product,
  .page-work .products > .product + .product { padding: var(--space-6) 0; border-left: 0; }
  .page-work .products > .product + .product { border-top: 1px solid var(--line); }
}
/* The left column is never narrower than the longest status pill (about 300px). */
@media (min-width: 720px) and (max-width: 1179px) {
  .page-work .products > .product {
    grid-template-columns: minmax(19rem, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  }
}

/* ---------- Closing band (also used on /about/) ---------- */
:is(.page-work, .page-about) .closing .section-head { margin-bottom: var(--space-5); }
@media (min-width: 640px) {
  :is(.page-work, .page-about) .closing-line { display: block; }
}
@media (max-width: 480px) {
  :is(.page-work, .page-about) .closing .btn { flex: 1 1 100%; }
}

/* assistant.css */
/* "Ask Iowa AI" launcher and chat panel. */
.assistant {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: var(--space-3);
  /* The box can be bigger than what shows in it (on phones it spans the screen),
     so only the launcher and the panel take taps; the page under the rest stays usable. */
  pointer-events: none;
}
.assistant-launch,
.assistant-panel { pointer-events: auto; }

.assistant[hidden] { display: none; }

.assistant-launch {
  --launch-bg: var(--ink);
  --launch-fg: var(--paper);
  /* A hairline keeps the pill visible over the footer. */
  --launch-line: color-mix(in srgb, var(--paper) 28%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.65rem 1.05rem 0.65rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--launch-bg);
  color: var(--launch-fg);
  font-weight: 650;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease;
  outline: 1px solid var(--launch-line);
  outline-offset: -1px;
}
/* Dark mode keeps a dark pill: a cream one would be the loudest thing on every page,
   and the gold glyph on it would drop to 1.7:1. On surface it is 8.5:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .assistant-launch {
    --launch-bg: var(--surface);
    --launch-fg: var(--ink);
    --launch-line: color-mix(in srgb, var(--ink) 30%, transparent);
  }
}
:root[data-theme="dark"] .assistant-launch {
  --launch-bg: var(--surface);
  --launch-fg: var(--ink);
  --launch-line: color-mix(in srgb, var(--ink) 30%, transparent);
}
.assistant-launch:hover { transform: translateY(-2px); }
/* The paper halo fills the gap inside the ring, so the ring reads over any background, the footer included. */
.assistant-launch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: var(--shadow), 0 0 0 3px var(--paper); }
.assistant-launch svg { width: 20px; height: 20px; color: var(--gold); }
.assistant.is-open .assistant-launch { display: none; }
/* While the reader scrolls down, the launcher slides out of the way so it doesn't sit on
   the ends of lines; scrolling up, reaching the end of the page or tabbing to it brings it back. */
.assistant.is-tucked .assistant-launch:not(:focus-visible) {
  transform: translateY(calc(100% + max(16px, env(safe-area-inset-bottom, 0px)) + 12px));
}

/* While the panel covers a small screen it is modal (assistant.js makes the page behind it inert),
   and a scrim says so. Tapping the scrim closes the panel. */
.assistant.is-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(25 22 17 / 0.42);
  pointer-events: auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .assistant.is-modal::before { background: rgb(0 0 0 / 0.6); }
}
:root[data-theme="dark"] .assistant.is-modal::before { background: rgb(0 0 0 / 0.6); }

.assistant-panel {
  width: min(400px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), 0 30px 60px -30px rgb(25 22 17 / 0.45);
  overflow: hidden;
}
.assistant-panel[hidden] { display: none; }
/* On touch screens the panel itself takes focus when it opens (so the keyboard doesn't cover the
   suggestions); it isn't a control, so no ring. */
.assistant-panel:focus { outline: none; }

.assistant-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.assistant-head h2 {
  font-family: var(--f-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.assistant-sub { margin-top: 0.3rem; font-size: var(--step--1); color: var(--ink-3); }
.assistant-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.assistant-close:hover { border-color: var(--line); }
.assistant-close svg { width: 20px; height: 20px; }

.assistant-log {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-5);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  font-size: 0.97rem;
}
.msg { display: grid; gap: 0.6rem; max-width: 100%; }
.msg p, .msg li { line-height: 1.5; }
.msg ul, .msg ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.msg--user {
  justify-self: end;
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  background: var(--gold-soft);
  border-radius: 12px 12px 3px 12px;
}
.msg--bot { color: var(--ink); }
.msg--error { color: var(--ink-2); padding: 0.6rem 0.8rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.msg.is-typing::after {
  content: "";
  width: 34px;
  height: 10px;
  background:
    radial-gradient(circle, var(--ink-3) 45%, transparent 50%) 0 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--ink-3) 45%, transparent 50%) 12px 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--ink-3) 45%, transparent 50%) 24px 50% / 10px 10px no-repeat;
  animation: typing 1s infinite ease-in-out;
}
@keyframes typing { 50% { opacity: 0.35; } }

.ask-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ask-chips[hidden] { display: none; }
.ask-chip {
  min-height: 36px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.ask-chip:hover { border-color: var(--ink); }

.assistant-form {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.assistant-form textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  resize: none;
  line-height: 1.4;
}
/* The placeholder is the field's only visible prompt, so it needs text contrast (the browser grey is about 4:1). */
.assistant-form textarea::placeholder { color: var(--ink-3); opacity: 1; }
.assistant-form textarea:focus-visible { outline-offset: 0; }
.assistant-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--on-gold);
  cursor: pointer;
}
.assistant-send:disabled { opacity: 0.5; cursor: progress; }
.assistant-send svg { width: 20px; height: 20px; }
.assistant-fine { padding: 0 var(--space-4) var(--space-3); font-size: var(--step--2); color: var(--ink-3); }

@media (max-width: 520px) {
  .assistant { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .assistant-panel { width: 100%; max-height: calc(100dvh - 24px); }
  /* On phones the launcher shrinks to a round icon so it covers less of the page. */
  .assistant-launch { width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; }
  .assistant-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assistant-launch svg { width: 22px; height: 22px; }
}