/* immersivefusion.academy — visual identity (general / adult tier)
 *
 * Sibling to kids.immersivefusion.academy, tuned one register up. The kids
 * site reaches for Khan-Academy-Kids warmth (Fredoka/Quicksand, mint meadow,
 * Mo Willems speech bubbles); this site is the grown-up room in the same
 * house. Same brand teal, same warm-cream page, same soft hill at the foot
 * of the viewport, same day/night pair, same footer pager and byline pill —
 * but the type is a New-York-Times-style editorial stack — Playfair Display
 * headlines over a Source Serif 4 body, with Inter as sans furniture only —
 * the reading column is essay-width, and the bounciest ornaments
 * (speech-bubble blockquotes, comic callouts) are dropped. The warmth stays;
 * the cute goes quiet.
 *
 * Posture (shared with the kids charter, SP-065): Mister Rogers / Bob Ross —
 * calm, unhurried, never selling. No CTAs beyond "read the essay." No
 * newsletter modal. No exit-intent overlay. No cookie banner. No "trusted by"
 * strip. No testimonials. No scroll animations.
 */

/* ---------- Palette ----------------------------------------------------- */

/* Brand colors shared across the academy tiers, bridged toward the
 * Immersive Fusion product brand. The kids site sits on a deep teal
 * (#0e6082); the IF docs/product brand sits on a neon cyan (#00E5FF).
 * The adult academy splits the difference: a brighter, cyan-leaning teal
 * for interactive accents, so the page reads as the same publication as
 * the kids site AND the same company as the product docs — without
 * copying the docs' neon glow (which would break the calm posture).
 *
 *   --ac-teal       deep brand teal (shared with kids; structural anchor)
 *   --ac-bridge     brighter cyan-leaning teal — the link/accent color
 *                   that nods to the product cyan
 *   --ac-wobble     mid-teal used on dark surfaces (shared with kids)
 *   --ac-cyan       the product-brand cyan itself, used sparingly as a
 *                   focus/hover highlight on dark surfaces only
 */
:root {
  --ac-teal:        #0e6082;
  --ac-teal-soft:   #4ab0bf;
  --ac-bridge:      #0e8aaf;   /* cyan-leaning teal — day accent */
  --ac-wobble:      #4ec5b8;
  --ac-cyan:        #00e5ff;   /* IF product cyan — dark-surface highlight */
}

/* Day scheme: warm PAPER page, navy ink, teal/cyan accents.
 *
 * The earlier #fdfbf6 was so close to white the page read as blank Material
 * light. This is a real cream/paper tone — present enough that the white
 * cards lift off it and the page feels like paper, not a void. Cards stay
 * near-white so panels and the byline pill have somewhere to rise to. */
[data-md-color-scheme="default"] {
  --ac-page:        #f6efe0;   /* warm paper cream — actually visible */
  --ac-card:        #fffdf8;   /* near-white card, warm — lifts off paper */
  --ac-panel:       #fbf6ea;   /* soft tinted panel ground (hero quote, rows) */
  --ac-ink:         #16293f;   /* deep navy ink — heading color */
  --ac-body:        #2e2c2a;
  --ac-body-soft:   #6a665e;
  --ac-rule:        #e3dcc9;   /* warmer hairline so dividers actually read */
  --ac-tint:        #efe7d3;

  --ac-button-primary-hover-bg: var(--ac-ink);
  --ac-pager-label: var(--ac-bridge);

  /* Card / drop-shadow color (RGB triplet; alpha set at each call site).
   * Day mode: navy ink — a soft warm shadow against the cream page. */
  --ac-shadow-rgb: 26, 47, 74;

  /* Soft wash at the bottom of the viewport. NOT the kids mint meadow —
   * this is a faint brand-teal tint, translucent so the cream page shows
   * through, reading as "a hint of brand at the foot of the page" rather
   * than a green hill. Low alpha + the thinner band geometry below keep it
   * a quiet horizon, not a meadow. */
  --ac-hill:        rgba(14, 138, 175, 0.08);
  --ac-hill-deep:   rgba(14, 138, 175, 0.05);

  --ac-sun:         #ffc94a;
  --ac-coral:       #d9744f;   /* muted coral — adult, not candy */

  /* Header / chrome */
  --ac-header-bg:        var(--ac-card);
  --ac-search-bg:        var(--ac-tint);
  --ac-button-secondary-bg:  var(--ac-tint);

  --md-primary-fg-color:        var(--ac-ink);
  --md-primary-fg-color--light:  var(--ac-teal-soft);
  --md-primary-fg-color--dark:   var(--ac-ink);
  --md-primary-bg-color:         var(--ac-card);
  --md-primary-bg-color--light:  var(--ac-body-soft);
  --md-accent-fg-color:          var(--ac-bridge);
  --md-accent-fg-color--transparent: rgba(14, 138, 175, 0.1);
  --md-default-bg-color:         var(--ac-page);
  --md-default-fg-color:         var(--ac-body);
  --md-default-fg-color--light:  var(--ac-body-soft);
  --md-default-fg-color--lighter: var(--ac-body-soft);
  --md-default-fg-color--lightest: var(--ac-rule);
  --md-typeset-color:            var(--ac-body);
  --md-typeset-a-color:          var(--ac-bridge);
  --md-footer-bg-color:          transparent;
  --md-footer-bg-color--dark:    transparent;
  --md-footer-fg-color:          var(--ac-body);
  --md-footer-fg-color--light:   var(--ac-body-soft);
  --md-footer-fg-color--lighter: var(--ac-body-soft);
}

/* Night scheme: COOL slate-indigo, deliberately differentiated from the
 * kids night.
 *
 * The kids night is a WARM near-black (#0a0d14 page, #161a26 cards) with
 * warm-CREAM ink (#f0e6d2) and a warm-teal accent — it reads cozy, like a
 * lamplit picture book. The adult night must not be a font-swap clone of
 * that. So this scheme goes the other temperature: a cool blue-slate page,
 * cooler lifted cards, a near-white COOL ink (no cream), and the product
 * CYAN as the live accent instead of the warm wobble-teal. Same dark-first
 * concept and same brand family, distinctly different color temperature —
 * the adult tier is the cool, cyan-lit room; the kids tier is the warm,
 * cream-lit one. This also pulls the night palette toward the IF product
 * docs (cyan on deep slate), which the day tier only hints at. */
[data-md-color-scheme="academy-night"] {
  --ac-page:        #0d1322;   /* cool deep slate-indigo (was warm #0a0d14) */
  --ac-card:        #182338;   /* cooler, bluer lifted card */
  --ac-panel:       #141d30;   /* soft tinted panel ground (hero quote, rows) */
  --ac-ink:         #eaf2f7;   /* cool near-white headings (NOT cream) */
  --ac-body:        #c2cdda;   /* cool light slate body */
  --ac-body-soft:   #7b8aa0;   /* cool muted slate */
  --ac-rule:        #243352;
  --ac-tint:        #131c30;

  /* Buttons / pager labels / accents all run COOL — cyan-leaning, not the
   * kids' warm wobble-teal. */
  --ac-button-primary-hover-bg: var(--ac-cyan);
  --ac-pager-label: var(--ac-cyan);
  --ac-shadow-rgb: 0, 0, 0;

  /* Horizon wash: a faint COOL cyan glow at the foot, not the kids' warm
   * near-black stripe. */
  --ac-hill:        rgba(0, 229, 255, 0.06);
  --ac-hill-deep:   rgba(0, 229, 255, 0.04);

  --ac-sun:         #ffc94a;
  --ac-coral:       #e08a63;

  --ac-header-bg:        #111a2e;   /* cool, slightly darker than the card */
  --ac-search-bg:        #1b2942;
  --ac-button-secondary-bg:  #1b2942;

  --md-primary-fg-color:        var(--ac-cyan);
  --md-primary-fg-color--light:  var(--ac-wobble);
  --md-primary-fg-color--dark:   var(--ac-teal);
  --md-primary-bg-color:         var(--ac-card);
  --md-primary-bg-color--light:  var(--ac-body-soft);
  --md-accent-fg-color:          var(--ac-cyan);
  --md-accent-fg-color--transparent: rgba(0, 229, 255, 0.18);
  --md-default-bg-color:         var(--ac-page);
  --md-default-fg-color:         var(--ac-body);
  --md-default-fg-color--light:  var(--ac-body-soft);
  --md-default-fg-color--lighter: var(--ac-body-soft);
  --md-default-fg-color--lightest: var(--ac-rule);
  --md-typeset-color:            var(--ac-body);
  --md-typeset-a-color:          var(--ac-cyan);
  --md-footer-bg-color:          transparent;
  --md-footer-bg-color--dark:    transparent;
  --md-footer-fg-color:          var(--ac-body);
  --md-footer-fg-color--light:   var(--ac-body-soft);
  --md-footer-fg-color--lighter: var(--ac-body-soft);
}

/* ---------- Typography -------------------------------------------------- */

/* Body copy: Source Serif 4 — a clean transitional serif, the New York
 * Times "read like a newspaper" register (Georgia is the system fallback,
 * and is itself the literal NYT-on-web body face). Inter is demoted to
 * FURNITURE only (kickers, meta labels, nav, footer, buttons) — it no
 * longer sets body copy. This serif body is the single biggest move in the
 * NYT typographic look. */
body, .md-typeset {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* Headlines: Playfair Display — a high-contrast editorial serif, the free
 * analogue of NYT's Cheltenham. Set a touch lighter and larger than a
 * docs heading would be: NYT headlines read as elegant display, not chunky
 * UI labels. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.ac-display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--ac-ink);
  letter-spacing: 0;
  line-height: 1.15;
}

.md-typeset h1 {
  font-size: 2.7rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
}
/* H2 gets a short brand-accent rule above it — a small bit of color and
 * structure that breaks the wall of navy headings and gives each section a
 * visible "start here" marker. Brighter cyan-leaning teal in day, cyan in
 * night (via --ac-bridge / the night override below). */
.md-typeset h2 {
  font-size: 1.7rem;
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  padding-top: 1rem;
  position: relative;
}
.md-typeset h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--ac-bridge);
}
[data-md-color-scheme="academy-night"] .md-typeset h2::before {
  background: var(--ac-cyan);
}
.md-typeset h3 { font-size: 1.3rem; margin-top: 1.75rem; font-weight: 600; }
.md-typeset h4 { font-size: 1.1rem; font-weight: 600; }

/* Essay-grade reading body. Sized for confident long-form prose: large
 * enough that the measure fills with words rather than thinning into a
 * ribbon, with a line-height open enough to breathe but not so tall the
 * paragraphs float apart. (Earlier 0.82rem/1.8 read as sparse — a dense
 * 1,500-word essay looked thin. 0.9rem/1.66 packs the column.) */
/* Source Serif 4 runs slightly small on the body and serif copy wants a
 * touch more leading than sans — 0.92rem / 1.72 gives the comfortable
 * newspaper-essay measure. */
.md-typeset { font-size: 0.92rem; line-height: 1.72; }
.md-typeset p { margin: 0 0 0.95em; }

/* Layout band width. Material lays out content as a centered band that ALSO
 * contains the left nav (~12rem) and right TOC (~12rem) sidebars; the prose
 * column is whatever is left after those, so a too-small band squeezes the
 * reading column into a narrow ribbon even when there is empty rail space on
 * either side. Widen the band so the prose column itself is comfortable. */
.md-grid { max-width: 68rem; }

/* Cap the prose measure itself so an ultra-wide window doesn't run lines to
 * 120+ characters. The band above gives the column room to exist; this keeps
 * the line length in the comfortable 70-85ch range for long-form reading. */
.md-content__inner { max-width: 44rem; }
/* On the home page (nav + toc hidden) the content can use the full band —
 * let the hero and essay list breathe across the wider measure. */
.md-typeset:has(.ac-hero) { max-width: none; }

/* No card chrome on content. The page is the canvas. */
.md-content {
  background-color: transparent;
  margin: 1rem 0 2rem;
  padding: 1rem 1.5rem 4rem;
}

/* Emphasis: italic stays the essayist's italic (body-colored), not the
 * kids site's teal character-voice. The general tier quotes and stresses;
 * it does not give lines to a cartoon robot. */
.md-typeset em, .md-typeset i {
  font-style: italic;
  color: inherit;
}
.md-typeset strong, .md-typeset b {
  color: var(--ac-ink);
  font-weight: 700;
}

/* Blockquote: a calm pull-quote, NOT a speech bubble. A teal left rule, a
 * faint tinted ground, Playfair Display italic at display size. This is the single
 * largest divergence from the kids stylesheet — the kids bubble (yellow
 * fill, rounded pill, drop shadow, coral shouts) would read as juvenile in
 * an adult essay. Here a quote is a quote. */
.md-typeset blockquote {
  border-left: 3px solid var(--ac-teal);
  background: transparent;
  margin: 2rem 0 2rem 0.5rem;
  padding: 0.25rem 0 0.25rem 1.5rem;
  color: var(--ac-body);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.6;
}
/* Night: the deep --ac-teal left rule + teal italics go dark-on-dark
 * against the cool slate. Brighten both toward cyan so the quote reads. */
[data-md-color-scheme="academy-night"] .md-typeset blockquote {
  border-left-color: var(--ac-cyan);
}
[data-md-color-scheme="academy-night"] .md-typeset blockquote em,
[data-md-color-scheme="academy-night"] .md-typeset blockquote i {
  color: var(--ac-cyan);
}
.md-typeset blockquote p { margin: 0.4em 0; }
.md-typeset blockquote p:first-child { margin-top: 0; }
.md-typeset blockquote p:last-child { margin-bottom: 0; }
.md-typeset blockquote em, .md-typeset blockquote i { color: var(--ac-teal); }

/* Callout: a centered pull-quote moment for an essay's load-bearing line.
 * Quieter than the kids "kids-callout" (no 2.5rem candy display) — Playfair
 * Display italic, ink-colored, set off by space. */
.md-typeset .ac-callout,
.ac-callout {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ac-ink);
  text-align: center;
  line-height: 1.3;
  margin: 2.5rem auto;
  max-width: 32rem;
  letter-spacing: -0.005em;
}

/* Links: soft underline, brand teal, deepens to ink on hover. Same
 * affordance as the kids site. */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
  border-bottom: 1px solid var(--ac-teal-soft);
  transition: border-color 120ms ease, color 120ms ease;
}
.md-typeset a:hover,
.md-typeset a:focus {
  border-bottom-color: currentColor;
  color: var(--ac-ink);
}
/* Night mode: deepening toward "ink" means cream-on-dark, which loses the
 * accent. Brighten toward the product cyan on hover instead — the one
 * place the academy lets the docs' neon show through, kept subtle. */
[data-md-color-scheme="academy-night"] .md-typeset a:hover,
[data-md-color-scheme="academy-night"] .md-typeset a:focus {
  color: var(--ac-cyan);
}

/* glightbox wraps every <img> in <a class="glightbox">; strip the inherited
 * underline (the lightbox cursor carries the affordance). */
.md-typeset a.glightbox,
.md-typeset a.glightbox:hover,
.md-typeset a.glightbox:focus {
  border-bottom: none;
  display: inline-block;
}
.md-typeset a.glightbox img { transition: transform 200ms ease; }
.md-typeset a.glightbox:hover img,
.md-typeset a.glightbox:focus img { transform: scale(1.02); }

/* Inline code: a quiet nod to the product docs, where inline code carries
 * a cyan tint. Here it's dialed down — a faint teal-tinted chip in the
 * essay's body font's monospace companion (JetBrains Mono, the docs face),
 * teal text in day, cyan text in night. Essays rarely show code, but when
 * they name a function or a token it should look like it belongs to the
 * same company as docs.immersivefusion.com. */
.md-typeset code {
  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, monospace;
  font-size: 0.82em;
  border-radius: 5px;
}
.md-typeset :not(pre) > code {
  background: rgba(14, 138, 175, 0.08);
  color: var(--ac-bridge);
  padding: 0.12em 0.4em;
}
[data-md-color-scheme="academy-night"] .md-typeset :not(pre) > code {
  background: rgba(0, 229, 255, 0.1);
  color: var(--ac-cyan);
}

/* Text selection: a soft brand-teal wash (day) / cyan wash (night),
 * matching the product docs' branded ::selection. */
::selection {
  background: rgba(14, 138, 175, 0.22);
}
[data-md-color-scheme="academy-night"] ::selection {
  background: rgba(0, 229, 255, 0.28);
  color: #fff;
}

/* Horizontal rule: the kids site's wobble-dot ornament, kept — it's a
 * small shared signature between the tiers, and a centered teal dot on a
 * faint line is dignified enough for an essay break. */
.md-typeset hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--ac-rule) 20%,
    var(--ac-rule) 80%,
    transparent 100%);
  margin: 3rem auto;
  width: 80%;
  position: relative;
  overflow: visible;
}
.md-typeset hr::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ac-wobble);
  box-shadow: 0 0 0 4px var(--ac-page);
}

/* The signed byline at the foot of each essay (`*by Immersive Fusion*` /
 * `*— by Immersive Fusion, 2026-05-25*`). The closing em of an essay reads
 * as a signature: soft, centered, a touch of space above. */
.md-typeset > p:last-child > em:only-child {
  display: block;
  text-align: center;
  color: var(--ac-body-soft);
  margin-top: 2rem;
}

/* ---------- Page chrome: cream page + soft hill ------------------------- */

body {
  background: var(--ac-page);
  /* Soft hill pinned to the bottom of the viewport. Same two-layer radial
   * technique as the kids meadow, dialed down to a calmer horizon. Day:
   * a faint teal wash. Night: a faint darker stripe (see scheme below).
   * Thinner band than the kids meadow (4rem/3rem vs. 8rem/6rem) and fading
   * out earlier (40%/35% stops) so it's a quiet brand hint, not a hill. */
  background-image:
    radial-gradient(ellipse 110% 4rem at 50% 100%,
      var(--ac-hill) 0%,
      var(--ac-hill) 40%,
      transparent 100%),
    radial-gradient(ellipse 130% 3rem at 50% 100%,
      var(--ac-hill-deep) 0%,
      var(--ac-hill-deep) 35%,
      transparent 100%);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
}

/* Night: just the faint cool cyan horizon at the foot — NO star field.
 *
 * The kids night sky is sprinkled with stars (a picture-book sky). The
 * adult night deliberately drops them: the grown-up room is a quiet cool
 * slate with a single cyan glow at the horizon, not a starscape. This is
 * one of the main differentiators from the kids night. Geometry matches
 * the day wash (4rem/3rem band) so day and night feel like one site. */
[data-md-color-scheme="academy-night"] body {
  background-image:
    radial-gradient(ellipse 110% 4rem at 50% 100%,
      var(--ac-hill) 0%,
      var(--ac-hill) 40%,
      transparent 100%),
    radial-gradient(ellipse 130% 3rem at 50% 100%,
      var(--ac-hill-deep) 0%,
      var(--ac-hill-deep) 35%,
      transparent 100%);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
}

/* Header: matches the page surface, no shadow, hairline rule. */
.md-header,
.md-header--shadow,
.md-header--lifted {
  background-color: var(--ac-header-bg) !important;
  color: var(--ac-ink);
  box-shadow: none !important;
  border-bottom: 1px solid var(--ac-rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.md-header[data-md-state="shadow"] { box-shadow: none !important; }

.md-header__inner { align-items: center; padding-left: 0.5rem; }
.md-logo { padding: 0.4rem; }
.md-logo img, .md-logo svg { width: 1.5rem; height: 1.5rem; }

.md-header__title {
  color: var(--ac-ink);
  font-size: 1.25rem;
  font-weight: 600;
  margin-left: 0;
  display: flex;
  align-items: center;
}
.md-header__ellipsis { display: flex; align-items: center; height: 100%; }
.md-header__topic { display: flex; align-items: center; }

/* Site title lockup: IF(academy) { }
 *
 * The general / adult tier's approved lockup per the brand grammar doc
 * (brand-grammar-if-predicate.md): empty scope reads "the academy, open to
 * all readers." Implemented purely in CSS so Material's stock header runs
 * unmodified — search and palette-toggle JS hooks keep working. We hide the
 * first header-topic's original site_name text and inject the lockup via
 * ::after; the second topic (current page title on scroll) is left alone.
 *
 * Sibling of the kids site's `IF(academy) { kids }` CSS lockup. Monospace
 * per the grammar's typography rules; never placed in <title>/og:title
 * (those stay plain-English — see the grammar doc's accessibility section). */
.md-header__topic:first-child .md-ellipsis {
  font-size: 0;
  letter-spacing: 0;
  position: relative;
}
.md-header__topic:first-child .md-ellipsis::after {
  content: "IF(academy) { }";
  /* JetBrains Mono first — the Immersive Fusion product-docs code face —
   * so the lockup is set in the same monospace the docs use. Fira Code /
   * system mono fall back when the webfont is unavailable. */
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ac-ink);
  letter-spacing: 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.md-header__button,
.md-header__source { color: var(--ac-ink); }

/* Tabs are disabled at the config level (navigation.tabs removed from
 * mkdocs.yml), same as the kids tier, so there is no .md-tabs strip to hide
 * here and no risk of the strip swallowing the Home nav entry. */

/* Sidebar nav. Structure matches the kids tier exactly (kids.css) — stock
 * Material nav, no mobile-drawer overrides, no TOC-rail hiding. The kids
 * site lives with Material's default drawer and on-page TOC; the general
 * tier does the same for parity. Only divergence: the nav title uses Inter
 * (the general tier's sans furniture face) where kids uses Fredoka. */
.md-sidebar__scrollwrap { background: transparent; }
.md-nav__title {
  font-family: 'Inter', system-ui, sans-serif;   /* furniture: sans */
  color: var(--ac-ink);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}
.md-nav__link { color: var(--ac-body); }
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover { color: var(--ac-teal); }

/* Search */
.md-search__form {
  background-color: var(--ac-search-bg);
  border-radius: 999px;
}
.md-search__input,
.md-search__input::placeholder { color: var(--ac-body-soft); }

/* ---------- Footer: next/prev pager + institutional byline -------------- */

.md-footer { background: transparent; margin-top: 3rem; }

/* Next/prev pager cards (navigation.footer). For an essay publication these
 * walk the reader between pieces. Soft rounded cards that don't fight the
 * page — same treatment as the kids booklet pager. */
.md-footer__inner.md-grid {
  display: flex;
  background: transparent;
  padding: 1rem 0.8rem 0.5rem;
  gap: 1rem;
  max-width: 50rem;
  margin: 0 auto;
}

.md-footer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--ac-card);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 2px 4px rgba(var(--ac-shadow-rgb), 0.05),
              0 6px 16px rgba(var(--ac-shadow-rgb), 0.08);
  color: var(--ac-ink) !important;
  opacity: 1;
  transition: transform 140ms ease, box-shadow 140ms ease;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
.md-footer__link:hover,
.md-footer__link:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(var(--ac-shadow-rgb), 0.08),
              0 10px 22px rgba(var(--ac-shadow-rgb), 0.14);
}

.md-footer__link--prev .md-footer__title { text-align: left; }
.md-footer__link--next { flex-direction: row; }
.md-footer__link--next .md-footer__title { text-align: right; margin-left: auto; }

.md-footer__direction {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ac-pager-label) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 0.15rem;
}
.md-footer__title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ac-ink) !important;
  flex: 1;
  min-width: 0;
  padding: 0;
  min-height: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.md-footer__title .md-ellipsis {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ac-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.md-footer__button.md-icon { color: var(--ac-teal) !important; flex-shrink: 0; }
.md-footer__button.md-icon svg {
  fill: var(--ac-teal);
  width: 1.25rem;
  height: 1.25rem;
}

/* Institutional byline + license line under the pager. */
.md-footer-meta {
  background-color: transparent;
  color: var(--ac-ink);
  border-top: none;
}
.md-footer-meta__inner {
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 0.8rem 2rem;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}
.md-copyright {
  color: var(--ac-body-soft) !important;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1.7;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}
.md-copyright a {
  color: var(--ac-body-soft) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.md-copyright a:hover {
  color: var(--ac-teal) !important;
  border-bottom-color: var(--ac-teal-soft);
}

/* Byline pill: a quieter "third card" under the pager, same surface family. */
.md-copyright__highlight {
  background-color: var(--ac-card);
  border-radius: 16px;
  padding: 0.7rem 1.5rem;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--ac-ink) !important;
  margin: 0 auto 0.6rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(var(--ac-shadow-rgb), 0.04),
              0 4px 10px rgba(var(--ac-shadow-rgb), 0.06);
  max-width: 100%;
  width: 100%;
}
[data-md-color-scheme="default"] .md-copyright__highlight {
  background-color: rgba(255, 255, 255, 0.9);
}
.md-copyright__highlight em {
  color: var(--ac-ink) !important;
  font-weight: 600;
  font-style: italic;
}
.md-copyright__sep {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--ac-body-soft);
  opacity: 0.7;
}
.md-copyright__highlight a {
  color: var(--ac-ink) !important;
  font-weight: 500;
  border-bottom: 1px solid var(--ac-teal);
}
.md-copyright__highlight a:hover {
  color: var(--ac-teal) !important;
  border-bottom-color: var(--ac-ink);
}
.md-footer-meta em,
.md-footer-meta__inner em {
  color: var(--ac-ink) !important;
  font-weight: 600;
  font-style: italic;
}
.md-footer .md-footer-meta a,
.md-footer-meta__inner a,
.md-footer-meta__inner > p a {
  color: var(--ac-teal) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--ac-teal-soft);
  font-weight: 500;
  opacity: 1;
}
.md-footer .md-footer-meta a:hover,
.md-footer-meta__inner a:hover,
.md-footer-meta__inner > p a:hover {
  color: var(--ac-ink) !important;
  border-bottom-color: var(--ac-ink);
}

/* Pager stacks on narrow screens — show BOTH directions named (a reader
 * walking essay-to-essay needs to know which way is back). */
@media (max-width: 600px) {
  .md-footer__inner.md-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .md-footer__link { width: 100%; padding: 0.65rem 1rem; }
  .md-footer__link--prev .md-footer__title {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- Hero (asymmetric, sibling of the kids home hero) ------------ */

.ac-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0 2.5rem;
  margin-bottom: 1.5rem;
}
.ac-hero-text { padding-right: 0.5rem; }
.ac-hero-text h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.9rem;
  font-weight: 600;
  color: var(--ac-ink);
  line-height: 1.08;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}
.ac-hero-text p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ac-body);
  margin-bottom: 1.5rem;
}
.ac-hero-art { text-align: center; }
.ac-hero-illustration {
  max-width: 100%;
  width: 100%;
  max-height: 20rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(var(--ac-shadow-rgb), 0.12));
}

/* When the hero "art" column is a pull-quote (no illustration yet), give it
 * real weight so the right side isn't a floating line in empty space: a
 * soft tinted panel with a thick brand-accent left edge and the load-bearing
 * sentence set large in Playfair Display italic. This is the home page's visual
 * anchor and the main bit of day-mode color. */
.ac-hero-art blockquote {
  border: 0;
  border-left: 5px solid var(--ac-bridge);
  background: var(--ac-panel);
  border-radius: 0 14px 14px 0;
  margin: 0;
  padding: 1.5rem 1.75rem;
  text-align: left;
  font-size: 1.5em;
  line-height: 1.35;
  color: var(--ac-ink);
  box-shadow: 0 2px 4px rgba(var(--ac-shadow-rgb), 0.05),
              0 10px 24px rgba(var(--ac-shadow-rgb), 0.08);
}
.ac-hero-art blockquote em,
.ac-hero-art blockquote i { color: var(--ac-bridge); }
[data-md-color-scheme="academy-night"] .ac-hero-art blockquote {
  border-left-color: var(--ac-cyan);
}
[data-md-color-scheme="academy-night"] .ac-hero-art blockquote em,
[data-md-color-scheme="academy-night"] .ac-hero-art blockquote i {
  color: var(--ac-cyan);
}

@media (max-width: 720px) {
  .ac-hero {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
    padding: 1rem 0 2rem;
  }
  .ac-hero-art { order: -1; }
  .ac-hero-text { padding-right: 0; }
  .ac-hero-text h1 { font-size: 2.2rem; }
  .ac-hero-illustration { max-height: 14rem; }
}

/* Hide MkDocs-rendered H1 and tag chips on pages that carry a .ac-hero. */
.md-typeset:has(.ac-hero) > h1:first-of-type { display: none; }
.md-typeset:has(.ac-hero) ~ .md-tags,
.md-typeset:has(.ac-hero) .md-tags,
article.md-typeset:has(.ac-hero) > .md-tags { display: none; }
article:has(.ac-hero) > .md-tags { display: none; }

/* ---------- Buttons (rounded pills, sibling of the kids buttons) -------- */

.ac-button {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  letter-spacing: 0.005em;
  margin: 0.25rem 0.35rem 0.25rem 0;
}
.ac-button:hover, .ac-button:focus { transform: translateY(-1px); }

.ac-button--primary {
  background-color: var(--ac-teal);
  color: #ffffff !important;
  box-shadow: 0 2px 0 var(--ac-ink), 0 6px 14px rgba(14, 96, 130, 0.25);
}
.ac-button--primary:hover,
.ac-button--primary:focus {
  background-color: var(--ac-button-primary-hover-bg);
  box-shadow: 0 2px 0 var(--ac-ink), 0 8px 18px rgba(14, 96, 130, 0.35);
}

.ac-button--secondary {
  background-color: var(--ac-tint);
  color: var(--ac-ink) !important;
  box-shadow: inset 0 0 0 2px var(--ac-rule);
}
.ac-button--secondary:hover,
.ac-button--secondary:focus {
  background-color: var(--ac-card);
  box-shadow: inset 0 0 0 2px var(--ac-teal-soft);
}

/* ---------- Essay list (the home / index list of essays) ---------------- */

/* Each essay is a row sitting directly on the page — no card chrome, a hair-
 * line rule between entries. Sibling of the kids booklet-list rows, minus
 * the cover-art column (essays lead with a title and a standfirst, not a
 * picture-book cover). */
.ac-essay-list { margin: 2rem 0 3rem; }

/* Each essay is now a soft tinted card with a brand-accent left edge and a
 * gentle hover lift, instead of a bare hairline-separated row. Gives the
 * (currently short) essay list real presence and a clear click target, and
 * adds another panel of warmth/color to the page. */
.ac-essay-row {
  background: var(--ac-panel);
  border-left: 4px solid var(--ac-bridge);
  border-radius: 0 14px 14px 0;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 4px rgba(var(--ac-shadow-rgb), 0.04),
              0 6px 16px rgba(var(--ac-shadow-rgb), 0.07);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.ac-essay-row + .ac-essay-row { margin-top: 1rem; }
.ac-essay-row:hover,
.ac-essay-row:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(var(--ac-shadow-rgb), 0.07),
              0 10px 24px rgba(var(--ac-shadow-rgb), 0.12);
}
[data-md-color-scheme="academy-night"] .ac-essay-row { border-left-color: var(--ac-cyan); }
.ac-essay-row h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
}
.ac-essay-row h3 a {
  border-bottom: none;
  color: var(--ac-ink) !important;
}
.ac-essay-row h3 a:hover,
.ac-essay-row h3 a:focus { color: var(--ac-bridge) !important; }
[data-md-color-scheme="academy-night"] .ac-essay-row h3 a:hover,
[data-md-color-scheme="academy-night"] .ac-essay-row h3 a:focus { color: var(--ac-cyan) !important; }
.ac-essay-row p { margin: 0.4rem 0 0; color: var(--ac-body-soft); }
.ac-essay-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ac-bridge);
  margin-bottom: 0.35rem;
}
[data-md-color-scheme="academy-night"] .ac-essay-meta { color: var(--ac-cyan); }

/* ---------- Print-friendly --------------------------------------------- */

@media print {
  .md-header, .md-sidebar, .md-tabs, .md-footer { display: none; }
  body { color: #000; background: #fff; background-image: none; }
  .md-content { background: #fff; padding: 0; margin: 0; }
  .ac-button { display: none; }
}