/* ==========================================================================
   The Life Manual — TLM Basic
   site.css (v2) — "One day, from dawn to night".

   The whole design system on screen: tokens, type, shell, the day page as one
   arc (dawn hero → daylight paper → dusk closing → night practice → notes by
   lamplight), every kit component, the glossary and notebook pages, dialogs,
   night reading and print. See DIRECTION.md (binding) and CONTRACT.md.

   Other stylesheets load after this one and own their internals:
   figures.css (figure entrances), reading.css (marginalia, rail sun marker,
   movement reveal, scroll cue motion), practice.css (inside .practice and the
   practice screen), home.css (the Road). This file gives them tokens and the
   base look of figure.fig, .figframe, figcaption, .margin and the bands.

   Contents
   1.  Fonts
   2.  Tokens: palette, type, space, motion, skies, night reading
   3.  Base
   4.  Buttons, chips, links
   5.  Shell: topbar, reading line, mobile nav, footer, view transitions
   6.  Day hero: the dawn
   7.  Day layout: rail · text · margin
   8.  Module: movements, openers, headings, prose, drop cap
   9.  Kit components
   10. Plates (figures)
   11. Ledgers (tables)
   12. Notebook fields and glossary terms
   13. Dusk, night and lamplight bands
   14. Practice (base only; practice.css owns the inside)
   15. Day navigation and resume notice
   16. Dialogs: search palette, lightbox, term popover
   17. Glossary page: the illuminated index
   18. Notebook page: the bound journal
   19. Motion
   20. Print
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/assets/fonts/Lora-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/assets/fonts/Lora-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/DMSans-VariableItalic.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }
/* Poppins is kept only for the SVG figures, whose diagram text names it by attribute. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }


/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Brand palette (fixed; never changes with the theme) */
  --navy: #14263F;
  --navy2: #26415F;
  --navy3: #46607F;
  --gold: #C4A05A;
  --gold2: #E3CF9E;          /* gold light: gold on navy */
  --gold3: #F1E6CB;          /* gold pale: soft boxes */
  --gold4: #9C7A3C;          /* gold deep: gold as text on paper */
  --gold-deep: var(--gold4);
  --gold-light: var(--gold2);
  --gold-pale: var(--gold3);
  --paper: #F7F6F1;
  --paper2: #ECEAE2;         /* stone */
  --paper3: #EFEBE1;         /* deep paper */
  --deep-paper: var(--paper3);
  --ink: #26313F;
  --ink2: #5E6875;
  --rule: #D8D4C8;
  --on-navy: #EEEBE2;
  --on-navy2: #C9C3B5;
  --on-navy-strong: #FAF8F2;
  --night: #0F1E33;

  /* Semantic tokens (light, "paper") */
  --bg: var(--paper);
  --bg2: var(--paper2);
  --bg3: var(--paper3);
  --fg: var(--ink);
  --fg2: var(--ink2);
  --line: var(--rule);
  --hair: rgba(20, 38, 63, 0.14);    /* hairline frames on paper */
  --accent: var(--gold);
  --accent-text: #7F6230;            /* gold deepened to read as text on paper (AA) */
  --panel: var(--navy);
  --panel-fg: var(--on-navy);
  --plate: var(--paper);             /* the paper plate a figure sits on */
  --plate-back: var(--paper3);       /* the deeper paper behind the plate */
  --plate-line: rgba(20, 38, 63, 0.16);

  /* Secondary semantic tokens */
  --heading: var(--navy);
  --heading2: var(--navy2);
  --label: var(--navy3);
  --numeral: #7D899A;                /* big light movement numerals (3:1, large) */
  --soft: var(--gold3);
  --soft-fg: var(--navy);
  --stone: var(--paper2);
  --dont-bg: var(--paper2);
  --dont-line: transparent;
  --panel-label: var(--gold2);
  --panel-fg2: var(--on-navy2);
  --bar-bg: rgba(247, 246, 241, 0.965);
  --scrim: rgba(20, 38, 63, 0.42);
  --mark: var(--gold3);
  --lamp: var(--paper3);             /* the reflection band */
  --lamp-glow: #F2E9D3;
  --ring: var(--gold4);              /* focus ring: gold deep, 3.7:1 on paper */

  /* Type */
  --display: "Fraunces", "Lora", Georgia, serif;
  --serif: "Lora", "Iowan Old Style", Georgia, serif;
  --ui: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --sans: var(--ui);                 /* v1 name, kept for other stylesheets */
  --svg-sans: "Poppins", "Segoe UI", system-ui, sans-serif;
  --display-vs: "opsz" 144, "SOFT" 100, "WONK" 0;
  --display-vs-text: "opsz" 36, "SOFT" 50, "WONK" 0;
  --ui-vs: "opsz" 14;
  --body-size: 1.0625rem;
  --body-lh: 1.72;

  /* Layout */
  --measure: 38rem;          /* ≈ 64ch of Lora at the body size */
  --gutter: 1.25rem;
  --topbar-h: 3.25rem;
  --railbar-h: 3rem;
  --rail-w: 14rem;
  --margin-w: 14rem;
  --col-gap: 3rem;
  --page-max: 80rem;
  --section-gap: clamp(5rem, 4rem + 5vw, 8.5rem);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --nb-lh: 2.25rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;
  --t: 240ms;
  --t-slow: 700ms;

  /* Skies (dawn by default). Each band redeclares the set it stands in. */
  --sky-a: #0F1B33;
  --sky-b: #2C3558;
  --sky-c: #7A5C6B;
  --sky-d: #C98A6B;
  --sky-e: #E8B86A;
  --sun-a: #F3E3B6;
  --sun-b: #D8B673;
  --sun-c: #B98F45;
  --horizon: rgba(196, 160, 90, 0.85);
  --star: #E3CF9E;

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1024px) {
  :root { --body-size: 1.125rem; --col-gap: clamp(3rem, 4.5vw, 4.5rem); --topbar-h: 3.5rem; }
}

/* The sky sets. The home page follows the reader's time via html[data-daypart];
   day pages always run dawn → night (hero dawn, closing dusk, practice night). */
:root[data-daypart="day"] {
  --sky-a: #14263F; --sky-b: #2B4A73; --sky-c: #6F8FB8; --sky-d: #B9C9DC; --sky-e: #D5DEE8;
  --sun-a: #FBF4E0; --sun-b: #F6EBCB; --sun-c: #E3CF9E;
}
:root[data-daypart="dusk"], :is(.closing, #closing) {
  --sky-a: #1A1830; --sky-b: #3A3556; --sky-c: #7A4A5E; --sky-d: #C4735A; --sky-e: #E3A868;
  --sun-a: #F6DDA8; --sun-b: #E0A35E; --sun-c: #B8733F;
}
:root[data-daypart="night"], .practice {
  --sky-a: #05091A; --sky-b: #0B1730; --sky-c: #14263F; --sky-d: #14263F; --sky-e: #14263F;
  --sun-a: #F3E3B6; --sun-b: #D8B673; --sun-c: #B98F45;
}
.dayhero {
  --sky-a: #0F1B33; --sky-b: #2C3558; --sky-c: #7A5C6B; --sky-d: #C98A6B; --sky-e: #E8B86A;
  --sun-a: #F3E3B6; --sun-b: #D8B673; --sun-c: #B98F45;
}

/* Night reading: paper becomes deep navy; plates keep their paper. */
:root[data-theme="night"] {
  --bg: #0F1E33; --bg2: #14263F; --bg3: #132540;
  --fg: #EEEBE2; --fg2: #C9C3B5; --line: #35506F; --hair: rgba(227, 207, 158, 0.16);
  --accent: var(--gold); --accent-text: var(--gold2);
  --panel: #1B3252; --panel-fg: #EEEBE2;
  --plate: var(--paper); --plate-back: #1B3252; --plate-line: rgba(20, 38, 63, 0.16);
  --heading: #F3F0E8; --heading2: #DCD6C8; --label: #A9B7C8; --numeral: #6F84A0;
  --soft: #22344C; --soft-fg: #EEEBE2; --stone: #162A45;
  --dont-bg: transparent; --dont-line: #35506F;
  --panel-label: var(--gold2); --panel-fg2: #C9C3B5;
  --bar-bg: rgba(15, 30, 51, 0.88); --scrim: rgba(4, 9, 20, 0.66); --mark: rgba(196, 160, 90, 0.32);
  --lamp: #14243A; --lamp-glow: #1F2C3C; --ring: var(--gold);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1E33; --bg2: #14263F; --bg3: #132540;
    --fg: #EEEBE2; --fg2: #C9C3B5; --line: #35506F; --hair: rgba(227, 207, 158, 0.16);
    --accent: var(--gold); --accent-text: var(--gold2);
    --panel: #1B3252; --panel-fg: #EEEBE2;
    --plate: var(--paper); --plate-back: #1B3252; --plate-line: rgba(20, 38, 63, 0.16);
    --heading: #F3F0E8; --heading2: #DCD6C8; --label: #A9B7C8; --numeral: #6F84A0;
    --soft: #22344C; --soft-fg: #EEEBE2; --stone: #162A45;
    --dont-bg: transparent; --dont-line: #35506F;
    --panel-label: var(--gold2); --panel-fg2: #C9C3B5;
    --bar-bg: rgba(15, 30, 51, 0.88); --scrim: rgba(4, 9, 20, 0.66); --mark: rgba(196, 160, 90, 0.32);
    --lamp: #14243A; --lamp-glow: #1F2C3C; --ring: var(--gold);
    color-scheme: dark;
  }
}


/* 3. Base ----------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 1.5rem);
}
@media (max-width: 1023.98px) {
  html:has(.rail) { scroll-padding-top: calc(var(--topbar-h) + var(--railbar-h) + 1.25rem); }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
main { display: block; overflow-x: clip; }

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

p { margin: 0 0 1.15em; }
strong, b { font-weight: 600; }
strong { color: var(--heading); }
em, i { font-style: italic; }
small { font-size: 0.85em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--gold3); color: var(--navy); }

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

.skip {
  position: absolute; left: var(--gutter); top: 0.6rem; z-index: 100;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--navy); color: var(--on-navy);
  font: 500 0.875rem/1.2 var(--ui); text-decoration: none;
  transform: translateY(-220%);
}
.skip:focus-visible { transform: none; }

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


/* 4. Buttons, chips, links ------------------------------------------------ */

a { color: var(--heading); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 1.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.7rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--heading);
  font: 500 0.9rem/1.2 var(--ui); font-variation-settings: var(--ui-vs); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #D2B26F; border-color: #D2B26F; }

.btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--gold) 80%, transparent); color: var(--heading); }
.btn-ghost:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }

.btn-small { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.84rem; }

.btn[aria-pressed="true"], .btn.is-done { background: var(--soft); border-color: var(--accent); color: var(--soft-fg); }
.btn[aria-pressed="true"]::before, .btn.is-done::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 40%, var(--gold2), var(--gold) 70%);
}

.chip {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.05rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg2);
  font: 450 0.84rem/1.2 var(--ui); font-variation-settings: var(--ui-vs);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--heading); }
.chip[aria-pressed="true"], .chip.active, .chip[aria-current] {
  background: var(--navy); border-color: var(--navy); color: var(--paper);
}
:root[data-theme="night"] .chip[aria-pressed="true"], :root[data-theme="night"] .chip.active { background: var(--gold2); border-color: var(--gold2); color: var(--navy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip.active { background: var(--gold2); border-color: var(--gold2); color: var(--navy); }
}


/* 5. Shell ---------------------------------------------------------------- */

@view-transition { navigation: auto; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  view-transition-name: topbar;
}
.topbar-inner {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--page-max); height: var(--topbar-h); margin: 0 auto; padding: 0 var(--gutter);
}

.brand { display: inline-flex; align-items: baseline; gap: 0.6rem; min-height: 2.75rem; align-items: center; text-decoration: none; color: var(--heading); white-space: nowrap; }
.brand-name {
  font: 400 1.2rem/1 var(--display); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em;
}
.brand-sub {
  padding-left: 0.6rem; border-left: 1px solid var(--line);
  font: 500 0.72rem/1 var(--ui); font-variation-settings: var(--ui-vs); color: var(--accent-text); letter-spacing: 0.02em;
}

.topnav { display: none; gap: 0.25rem; margin-left: auto; }
.topnav a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem;
  font: 450 0.875rem/1.2 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.topnav a:hover { color: var(--heading); }
.topnav a[aria-current] { color: var(--heading); }
.topnav a[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 0.45rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem;
  border-radius: 50%; background: var(--gold);
}

.topbar-tools { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.tbtn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tbtn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--heading); }
.tbtn svg { width: 1.2rem; height: 1.2rem; display: block; }
.tbtn[aria-pressed="true"], .tbtn[aria-expanded="true"] { color: var(--heading); }

@media (min-width: 900px) {
  .topnav { display: flex; }
  .topbar-tools { margin-left: 0.75rem; }
  .tbtn-menu { display: none; }
}

/* The reading line: a gold hairline along the foot of the topbar. */
.readbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.readbar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, transparent), var(--gold));
  transition: width 120ms linear;
}
.readbar i::after {
  content: ""; float: right; width: 5px; height: 5px; margin: -1.5px -2.5px 0 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.readbar i[style*="width: 0"]::after, .readbar i:not([style])::after { display: none; }

.mobile-nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 49;
  max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 0.5rem var(--gutter) 2rem;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.mobile-nav a {
  display: flex; align-items: center; min-height: 3.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line);
  font: 350 1.35rem/1.25 var(--display); font-variation-settings: var(--display-vs-text);
  color: var(--heading); text-decoration: none;
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a[aria-current] { box-shadow: inset 2px 0 0 var(--gold); padding-left: 0.9rem; }
.mobile-nav p, .mobile-nav h2, .mobile-nav .mobile-nav-k {
  margin: 1.75rem 0 0.25rem; font: 500 0.75rem/1.3 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label);
}
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
body.menu-open { overflow: hidden; }

.sitefoot { margin-top: 0; border-top: 1px solid var(--line); color: var(--fg2); background: var(--bg); }
.sitefoot-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 3.5rem var(--gutter) 4rem;
  font: 400 0.84rem/1.65 var(--ui); font-variation-settings: var(--ui-vs);
}
.sitefoot-inner p { margin: 0 0 0.35rem; }
.sitefoot-brand {
  font: 350 1.35rem/1.35 var(--display) !important; font-variation-settings: var(--display-vs-text);
  color: var(--heading); margin-bottom: 0.75rem !important;
}
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-top: 1.25rem; margin-left: -0.6rem; }
.sitefoot nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem; }
.sitefoot a { color: var(--fg2); text-decoration: none; }
.sitefoot a:hover { color: var(--heading); text-decoration: underline; text-decoration-color: var(--gold); }
.page-day .sitefoot, .page-glossary .sitefoot, .page-notebook .sitefoot { margin-top: 0; }


/* 6. Day hero: the dawn --------------------------------------------------- */
/* Geometry. The hero is a container; the sky svg (viewBox 1200×520, sun at
   x 880, horizon at y 380) is sized so its sun lands on --sun-x and its horizon
   on the top of the paper ground (--ground above the hero's foot). The plate
   (the day's engraving) stands on that horizon, centred on the sun, which
   backlights it. The title sits in the high, dark sky to the left; on narrow
   screens the plate drops below the title and the sun moves to the centre. */

.dayhero {
  --ground: clamp(4rem, 2.5rem + 6cqw, 8.5rem);   /* paper below the horizon */
  --sky-w: 100cqw;                                /* the sky svg's width */
  --sun-x: 73.3333cqw;                            /* where the sun stands */
  --plate-w: min(46cqw, 48rem);
  --sink: 0.1;                                    /* share of the plate below the horizon */
  --hero-ground: var(--bg);
  --hero-fg: #F7F6F1;
  --hero-fg2: #F0E9DC;

  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  display: grid; align-items: center;
  min-height: clamp(36rem, calc(100svh - var(--topbar-h)), 62rem);
  background: var(--sky-a); color: var(--hero-fg);
}

.dayhero .sky {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    /* a thin gold horizon, full width */
    linear-gradient(to top, transparent calc(var(--ground) - 0.5px), var(--horizon) calc(var(--ground) - 0.5px), var(--horizon) calc(var(--ground) + 0.5px), transparent calc(var(--ground) + 0.5px)),
    /* the paper ground */
    linear-gradient(to top, var(--hero-ground) 0, var(--hero-ground) var(--ground), transparent var(--ground)),
    /* the sun's warmth spreading along the horizon */
    radial-gradient(ellipse 58cqw 30cqw at var(--sun-x) calc(100% - var(--ground)),
      color-mix(in srgb, var(--sun-a) 70%, transparent) 0%, color-mix(in srgb, var(--sky-e) 55%, transparent) 26%, color-mix(in srgb, var(--sky-d) 22%, transparent) 55%, transparent 78%),
    /* the sky itself, top → horizon */
    linear-gradient(to bottom,
      var(--sky-a) 0%,
      var(--sky-b) calc((100% - var(--ground)) * 0.42),
      var(--sky-c) calc((100% - var(--ground)) * 0.72),
      var(--sky-d) calc((100% - var(--ground)) * 0.9),
      var(--sky-e) calc(100% - var(--ground)));
}
/* Legacy (v1) sky svg, if a page still carries it. */
.dayhero-sky { display: none; }

.dayhero .sky-sun {
  position: absolute; display: block; max-width: none;
  width: var(--sky-w); height: auto; aspect-ratio: 1200 / 520;
  left: calc(var(--sun-x) - var(--sky-w) * 0.733333);
  bottom: calc(var(--ground) - var(--sky-w) * 0.116667);
  overflow: visible;
}
/* The svg's own sky fill gives way to the tokenised sky behind it. */
.dayhero .sky-sun > rect { fill: transparent; }

.dayhero .stars, .band-stars {
  position: absolute; inset: 0 0 42% 0; pointer-events: none;
  opacity: 0.75;
  background-image:
    radial-gradient(circle at 6% 14%, var(--star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 13% 38%, var(--star) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 21% 9%, var(--star) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 29% 27%, var(--star) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 37% 6%, var(--star) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 44% 33%, var(--star) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 52% 16%, var(--star) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 58% 42%, var(--star) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 64% 8%, var(--star) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 71% 24%, var(--star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 5%, var(--star) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 84% 31%, var(--star) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 91% 12%, var(--star) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 96% 36%, var(--star) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 3% 44%, var(--star) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 33% 48%, var(--star) 0 0.5px, transparent 1.1px),
    radial-gradient(circle at 48% 3%, var(--star) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 88% 46%, var(--star) 0 0.5px, transparent 1.1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}

.dayhero-inner {
  position: relative; z-index: 2;
  grid-area: 1 / 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 7rem) var(--gutter) calc(var(--ground) + clamp(3.5rem, 8vh, 6.5rem));
}
.dayhero-inner > * { max-width: min(38rem, calc(var(--sun-x) - var(--plate-w) / 2 - var(--gutter) - 1.5rem)); }

.dayhero-week {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.65rem;
  margin: 0 0 1.4rem;
  font: 500 0.84rem/1.3 var(--ui); font-variation-settings: var(--ui-vs); color: var(--gold2);
  letter-spacing: 0.01em;
}
.dayhero-week .dot { color: color-mix(in srgb, var(--gold2) 60%, transparent); }
.dayhero-title {
  margin: 0;
  font-family: var(--display); font-weight: 300; font-style: normal;
  font-size: clamp(3.1rem, 1.2rem + 6.4vw, 7rem); line-height: 0.96;
  font-variation-settings: var(--display-vs);
  letter-spacing: -0.028em; color: var(--hero-fg);
  text-wrap: balance;
  view-transition-name: day-title;
}
.dayhero-sub {
  margin: 1.35rem 0 0; max-width: 30rem;
  font: italic 300 clamp(1.2rem, 1rem + 0.8vw, 1.6rem)/1.35 var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
  color: var(--hero-fg2);
  text-wrap: pretty;
}
.dayhero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.4rem;
  margin-top: 2.1rem; padding-top: 1.15rem; max-width: 32rem;
  border-top: 1px solid rgba(227, 207, 158, 0.3);
  font: 400 0.84rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--hero-fg2);
}
.dayhero-value { color: var(--hero-fg); }
/* The stage dots and stage keep the first line; the value and the time share the second, so the
   time's hairline never opens a line on its own. */
.dayhero-stage { flex: 1 1 calc(100% - 7.2rem); }   /* the dots (5.6rem) + gap */
.dayhero-time::before { content: ""; display: inline-block; width: 0.8rem; height: 1px; margin: 0 0.6rem 0.28em 0; background: rgba(227, 207, 158, 0.5); vertical-align: middle; }
.stage-dots { display: inline-flex; gap: 0.35rem; align-items: center; }
.stage-dots i {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid rgba(227, 207, 158, 0.55); background: transparent;
}
.stage-dots i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196, 160, 90, 0.18); }
.stage-dots i.on.past { box-shadow: none; }   /* Version 4 covers: earlier stages stay lit */
.stage-dots i.emerging { border-color: var(--gold); box-shadow: inset 0 0 0 2px rgba(196, 160, 90, 0.32); }

.dayhero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.dayhero .btn-ghost { color: var(--hero-fg); border-color: rgba(227, 207, 158, 0.7); background: rgba(15, 27, 51, 0.18); }
.dayhero .btn-ghost:hover { background: rgba(196, 160, 90, 0.18); border-color: var(--gold2); }
.dayhero :focus-visible { outline-color: var(--gold2); }
/* The link to the course PDF's pages (/day/N/pages/), a quiet line under the buttons */
.dayhero-pdf { margin: 0.6rem 0 0; font: 400 0.9rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); }
.dayhero-pdf a {
  display: inline-block; padding: 0.55rem 0; color: var(--hero-fg2);
  text-decoration: underline; text-decoration-color: rgba(227, 207, 158, 0.5); text-underline-offset: 0.22em;
}
.dayhero-pdf a:hover { color: var(--hero-fg); text-decoration-color: var(--gold2); }

/* The plate: the day's engraving, standing on the horizon, backlit by the sun. */
.plate-hero {
  position: absolute; z-index: 1; margin: 0;
  width: var(--plate-w);
  left: calc(var(--sun-x) - var(--plate-w) / 2);
  bottom: calc(var(--ground) - var(--plate-w) / 1.5 * var(--sink));
  pointer-events: none;
}
.plate-hero::before {
  /* the morning light the figure stands in */
  content: ""; position: absolute; z-index: -1;
  left: -8%; right: -8%; top: -6%; bottom: 2%;
  background: radial-gradient(closest-side at 50% 58%,
    color-mix(in srgb, var(--sun-a) 92%, transparent) 0%,
    color-mix(in srgb, var(--sun-a) 70%, transparent) 38%,
    color-mix(in srgb, var(--sky-e) 30%, transparent) 70%,
    transparent 100%);
  border-radius: 50%;
}
.plate-hero img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
.dayhero[data-plate="sky-clouds-engraving"] { --sink: 0.02; }
.dayhero[data-plate="journey-engraving"] { --sink: 0.16; }

/* The scroll cue: retired in the v2 polish pass. On desktop it read as a stray gold pin below the
   horizon, and "Begin reading" already does its job; the markup stays for the DOM contract. */
.scrollcue { display: none !important; }

/* Night reading: the ground turns to night water; the figure keeps its light. */
:root[data-theme="night"] .dayhero { --hero-ground: var(--bg); }

/* Between 720 and 1023: the title keeps the upper sky, the plate stands below it, centred. */
@media (max-width: 1023.98px) {
  .dayhero {
    --sun-x: 50cqw; --sky-w: 190cqw; --plate-w: min(88cqw, 40rem);
    --ground: clamp(3.5rem, 2rem + 6cqw, 6rem);
    align-items: stretch; align-content: start;
    min-height: 0;
  }
  .dayhero-inner { padding-bottom: 0; }

  .dayhero-inner > * { max-width: 36rem; }
  .plate-hero {
    position: relative; left: auto; bottom: auto; grid-area: 2 / 1;
    justify-self: center;
    margin: clamp(0.5rem, 3cqw, 2rem) 0 calc(var(--ground) - var(--plate-w) / 1.5 * var(--sink));
  }
}
@media (max-width: 639.98px) {
  .dayhero { --plate-w: min(96cqw, 30rem); }
  .dayhero-title { font-size: clamp(2.9rem, 1.4rem + 7.5vw, 4.25rem); line-height: 0.98; }
  .dayhero-week { margin-bottom: 1.1rem; }
  .dayhero-meta { margin-top: 1.6rem; gap: 0.45rem 1.1rem; }
  .dayhero-actions { margin-top: 1.6rem; }
  .dayhero-actions .btn { flex: 1 1 auto; }
}


/* 7. Day layout: rail · text · margin ------------------------------------ */

.daylayout { position: relative; overflow-x: clip; }
.module {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 3.25rem var(--gutter) 0;
  min-width: 0;
}
.margin { display: none; }

@media (min-width: 1024px) {
  .daylayout {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, var(--measure));
    column-gap: var(--col-gap);
    justify-content: center;
    align-items: start;
    padding: clamp(4.5rem, 7vw, 7rem) 2rem 0;
  }
  .module { max-width: none; margin: 0; padding: 0; }
}
@media (min-width: 1280px) {
  .daylayout {
    grid-template-columns: var(--rail-w) minmax(0, var(--measure)) var(--margin-w);
  }
  .margin {
    display: block; position: relative; align-self: stretch;
    min-height: 100%;
    font: 400 0.8125rem/1.55 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2);
  }
}

/* The rail */
.rail-title { margin: 0; padding: 0; border: 0; background: none; text-align: left; font: 500 0.75rem/1.3 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label); }
.rail-title > button {
  display: inline; margin: 0; padding: 0; border: 0; background: none; cursor: default;
  font: inherit; color: inherit; text-align: left;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; position: relative;
  padding: 0.55rem 0 0.55rem 1.35rem;
  text-decoration: none; color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}
.toc { --toc-sun-x: 0.3rem; }
.toc ol { position: relative; }
.toc ol::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0.9rem; width: 1px; background: var(--line); }
.toc a::before {
  /* the small gold sun on the active entry (reading.css may move a travelling one instead) */
  content: ""; position: absolute; left: calc(0.3rem - 3.5px); top: 1.05rem; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.toc-k { display: block; font: 450 0.72rem/1.35 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.toc-t { display: block; margin-top: 0.12rem; font: 400 0.95rem/1.3 var(--display); font-variation-settings: var(--display-vs-text); color: var(--fg); }
.toc a:hover .toc-t { color: var(--heading); }
.toc a.active::before, .toc a[aria-current]::before {
  background: radial-gradient(circle at 40% 40%, var(--gold2), var(--gold) 70%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
  transform: scale(1.15);
}
.rail:has(.toc-sun) .toc a::before { opacity: 0; }
.rail:has(.toc-path) .toc ol::before { display: none; }
.toc a.active .toc-t, .toc a[aria-current] .toc-t { color: var(--heading); font-weight: 500; }
.toc a.active .toc-k, .toc a[aria-current] .toc-k { color: var(--accent-text); }
.rail-actions { margin-top: 1.75rem; }
.rail-actions .btn { width: 100%; }

@media (min-width: 1024px) {
  .rail {
    position: sticky; top: calc(var(--topbar-h) + 2.5rem); align-self: start;
    transition: opacity var(--t) var(--ease), visibility 0s linear 0s;
  }
  /* While the dusk and night bands pass over the rail it bows out (reading.js sets the class),
     rather than being sliced by the band's edge. */
  .rail.is-under-band { opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility 0s linear var(--t); }
  /* The list scrolls on short screens; the "Mark complete" action stays whole beneath it. */
  .rail-inner {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--topbar-h) - 4rem);
  }
  .rail .toc { min-height: 0; overflow-y: auto; padding-right: 0.5rem; scrollbar-width: thin; overscroll-behavior: contain; }
  .rail-title, .rail-actions { flex: none; }
  .rail-actions { margin-top: 1.25rem; padding-right: 0.5rem; }
  .rail-title { margin-bottom: 0.7rem; padding-left: 1.35rem; }
  .rail-toggle { display: none; }
}

/* Below 1024px: a sticky collapsible bar under the topbar */
@media (max-width: 1023.98px) {
  .rail {
    position: sticky; top: var(--topbar-h); z-index: 40;
    background: var(--bar-bg); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }
  .rail-inner { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
  .rail-title, .rail-toggle, .rail-title > button {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: var(--railbar-h); margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer; text-align: left;
    font: 500 0.84rem/1.2 var(--ui); font-variation-settings: var(--ui-vs); color: var(--heading);
  }
  .rail-title::after, .rail-toggle::after, .rail-title > button::after {
    content: ""; width: 0.45rem; height: 0.45rem; margin-right: 0.3rem; flex: none;
    border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--t) var(--ease);
  }
  .rail-title:has(> button)::after { content: none; }
  .rail.open .rail-title::after, .rail.open .rail-toggle::after, .rail.open .rail-title > button::after { transform: translateY(20%) rotate(-135deg); }
  .rail-title > button:focus-visible { outline-offset: -2px; }
  .rail:has(.rail-toggle) .rail-title { display: none; }
  .rail .toc, .rail .rail-actions { display: none; }
  .rail.open .toc { display: block; max-height: min(60vh, 30rem); overflow-y: auto; padding: 0.25rem 0 0.5rem; overscroll-behavior: contain; }
  .rail.open .rail-actions { display: block; margin: 0.75rem 0 1rem; }
  .rail .toc a { min-height: 2.75rem; }
}


/* 8. Module: movements, openers, headings, prose ------------------------- */

.module > .section { margin-top: var(--section-gap); }
.module > .section:first-child, .module > .resume + .section { margin-top: 0; }
.module .section { scroll-margin-top: calc(var(--topbar-h) + 1.5rem); position: relative; }

/* Movement numerals: large, light, above the kicker; shown on a movement's first section only.
   reading.js inserts span.movement-num (with .is-continued on later parts); without it the
   numeral comes from the section's data-movement. */
.opener .movement-num, .section[data-movement]:not(:has(.movement-num))::before {
  display: block; margin: 0 0 1.15rem -0.04em;
  font: 250 clamp(3.75rem, 2.6rem + 3.4vw, 6rem)/0.8 var(--display);
  font-variation-settings: var(--display-vs);
  letter-spacing: 0.01em; color: var(--numeral);
}
.section[data-movement]:not(:has(.movement-num))::before { content: attr(data-movement); }
.opener .movement-num.is-continued { display: none; }
.section[data-movement="I"] ~ .section[data-movement="I"]::before,
.section[data-movement="II"] ~ .section[data-movement="II"]::before,
.section[data-movement="III"] ~ .section[data-movement="III"]::before,
.section[data-movement="IV"] ~ .section[data-movement="IV"]::before,
.section[data-movement="V"] ~ .section[data-movement="V"]::before,
.section[data-movement="VI"] ~ .section[data-movement="VI"]::before,
.section[data-movement="VII"] ~ .section[data-movement="VII"]::before { content: none; }
/* A later part of the same movement sits closer to the one before. */
.section[data-movement="II"] + .section[data-movement="II"] { margin-top: calc(var(--section-gap) * 0.75); }

.opener { margin: 0 0 2.4rem; }
.opener .kicker, .kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.65rem;
  margin: 0;
  font: 500 0.84rem/1.35 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label);
  letter-spacing: 0.005em;
}
.kicker::before {
  content: ""; flex: none; width: 0.95rem; height: 0.95rem; border: 1px solid var(--gold); border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 0.13rem, transparent 0.15rem);
}
.kicker .sep { color: var(--gold); font-weight: 300; }
.opener h2 {
  margin: 1rem 0 0.9rem;
  font-family: var(--display); font-weight: 380; font-style: normal;
  font-size: clamp(2.1rem, 1.5rem + 2.1vw, 3.1rem); line-height: 1.06;
  font-variation-settings: "opsz" 120, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.018em; color: var(--heading);
  text-wrap: balance;
}
.lede {
  margin: 0;
  font: italic 350 clamp(1.18rem, 1.05rem + 0.45vw, 1.38rem)/1.45 var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0;
  color: var(--fg2);
  text-wrap: pretty;
}
.lede strong { color: var(--heading); font-weight: 500; }
.opener .rule {
  width: 5.5rem; height: 1px; margin-top: 1.9rem;
  background: var(--gold); transform-origin: left center;
}
.opener.first .kicker { color: var(--accent-text); }

.module h3 {
  margin: 3rem 0 0.9rem;
  font-family: var(--display); font-weight: 450; font-style: normal;
  font-size: clamp(1.45rem, 1.3rem + 0.5vw, 1.7rem); line-height: 1.2;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 0;
  letter-spacing: -0.008em; color: var(--heading);
  text-wrap: balance;
}
.module h4 {
  margin: 2.3rem 0 0.6rem;
  font: 600 0.95rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--heading2);
  letter-spacing: 0.002em;
}
.module h3 + h4 { margin-top: 1rem; }
.module h5 { margin: 1.5rem 0 0.5rem; font: 600 0.84rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label); }
.module p { text-wrap: pretty; hanging-punctuation: first; }
:where(.module) :where(ul, ol):where(:not([class])) { margin: 0 0 1.15em; padding-left: 1.3rem; }
:where(.module) :where(ul, ol):where(:not([class])) > li { margin-bottom: 0.45em; padding-left: 0.3rem; }
:where(.module) li::marker { color: var(--accent); }

/* The drop cap: the Opening's first paragraph, three lines, navy Fraunces. */
.section[data-movement="I"] > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.09em 0 -0.02em;
  font-family: var(--display); font-weight: 350; font-style: normal;
  font-size: 5.05em; line-height: 0.82;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  color: var(--heading);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .section[data-movement="I"] > p:first-of-type::first-letter {
    float: none; margin: 0 0.1em 0 0; font-size: inherit; line-height: inherit;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}


/* 9. Kit components ------------------------------------------------------- */

/* Pull quote: Fraunces italic, a gold hairline, hung into the gutter on wide screens. */
.pull {
  margin: 2.5rem 0 2.75rem; padding: 0.15rem 0 0.15rem 1.6rem;
  border-left: 1px solid var(--gold);
  font: italic 350 clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem)/1.38 var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  color: var(--heading);
  text-wrap: pretty;
}
.pull strong { font-weight: 500; }
@media (min-width: 1024px) { .pull { margin-left: -1.6rem; } }

/* Night callout: a small night sky with a gold horizon. */
.callout {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 2.5rem 0; padding: 2rem 2.4rem 2.1rem;
  background:
    radial-gradient(ellipse 60% 55% at 88% 110%, rgba(196, 160, 90, 0.16), transparent 70%),
    linear-gradient(170deg, #0B1730 0%, var(--navy) 60%, #1B3252 100%);
  color: var(--on-navy); border-radius: var(--radius);
  line-height: 1.6;
  box-shadow: inset 0 -1px 0 rgba(196, 160, 90, 0.55);
}
.callout::before {
  content: ""; position: absolute; inset: 0 0 45% 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 22%, var(--star) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 34% 12%, var(--star) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 57% 30%, var(--star) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 76% 10%, var(--star) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 93% 26%, var(--star) 0 0.7px, transparent 1.2px);
}
:root[data-theme="night"] .callout { box-shadow: inset 0 0 0 1px rgba(227, 207, 158, 0.14), inset 0 -1px 0 rgba(196, 160, 90, 0.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout { box-shadow: inset 0 0 0 1px rgba(227, 207, 158, 0.14), inset 0 -1px 0 rgba(196, 160, 90, 0.55); } }
.callout .label {
  display: block; margin-bottom: 0.85rem; padding-right: 3.25rem;
  font: 500 0.8125rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); color: var(--gold2);
}
.callout .q {
  display: block; padding-right: 3.25rem;
  font: italic 350 clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem)/1.4 var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  color: var(--on-navy-strong);
  text-wrap: pretty;
}
.callout .after { display: block; margin-top: 1rem; font-size: 0.94em; color: var(--on-navy2); }
.callout strong { color: inherit; }
.callout .ring {
  position: absolute; right: 2.4rem; top: 2rem; width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--gold); border-radius: 50%;
}
.callout .ring::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 5px rgba(196, 160, 90, 0.14);
}
.callout a { color: inherit; }
.callout p:last-child { margin-bottom: 0; }
.callout :focus-visible { outline-color: var(--gold2); }
.reflection-principle .q { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.85rem); }
.reflection-principle .maxims { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.reflection-principle .maxims li { padding: 0.5rem 0; border-top: 1px solid rgba(227, 207, 158, 0.18); }
.reflection-principle .maxims li:first-child { border-top: 0; }
.reflection-principle .maxims strong { font-weight: 600; color: var(--on-navy); }
.callout.definition-card .q { font-style: normal; font-size: 1.2em; line-height: 1.55; }
.workbook .callout { margin: 1rem 0 1.25rem; }

@media (max-width: 479.98px) {
  .callout { padding: 1.5rem 1.35rem 1.6rem; }
  .callout .ring { right: 1.35rem; top: 1.5rem; width: 1.6rem; height: 1.6rem; }
  .callout .label, .callout .q { padding-right: 2.4rem; }
  .soft, .soft.recap, .recap, .card { padding: 1.35rem 1.35rem 1.4rem; }
  .dodont .col { padding: 1.35rem 1.35rem; }
}

/* Paper fold: the soft gold box, a leaf of gold-pale paper with a turned corner. */
.soft {
  --fold: 1.35rem;
  position: relative;
  margin: 2.25rem 0 2.5rem; padding: 1.65rem 2rem 1.7rem;
  background:
    linear-gradient(225deg, transparent calc(var(--fold) * 0.7071 - 0.5px), color-mix(in srgb, var(--gold) 26%, var(--soft)) calc(var(--fold) * 0.7071)) top right / calc(var(--fold) * 1) calc(var(--fold) * 1) no-repeat,
    var(--soft);
  color: var(--soft-fg);
  border-radius: var(--radius-sm);
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
.soft .label {
  display: block; margin-bottom: 0.7rem;
  font: 600 0.8125rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label);
}
:root[data-theme="night"] .soft .label { color: var(--gold2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .soft .label { color: var(--gold2); } }
.soft p:last-child { margin-bottom: 0; }
.soft ul { margin: 0; padding-left: 1.2rem; }
.soft li { margin-bottom: 0.5rem; line-height: 1.6; padding-left: 0.2rem; }
.soft li:last-child { margin-bottom: 0; }
.soft li::marker { color: var(--gold4); }
.soft strong { color: inherit; }
.soft.recap, .recap { padding: 1.65rem 2rem 1.7rem; }
.soft.science-brief { --fold: 1rem; }

/* Numbered steps: light Fraunces numerals hung in a gold ring. */
ol.steps { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; counter-reset: s; }
ol.steps li { position: relative; padding-left: 3.4rem; margin-bottom: 1.25rem; counter-increment: s; min-height: 2.3rem; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -0.05rem;
  width: 2.3rem; height: 2.3rem; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center;
  font: 350 1.1rem/1 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; color: var(--heading);
  font-variant-numeric: lining-nums;
}
ol.steps li .t { font-weight: 600; color: var(--heading); }
ol.steps p { margin: 0; }

/* The shape of today: a small itinerary with a gold beginning. */
ol.flow { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: f; }
ol.flow li { position: relative; padding: 0 0 1.4rem 3.4rem; counter-increment: f; }
ol.flow li::before {
  content: counter(f); position: absolute; left: 0; top: 0; z-index: 1;
  width: 2.3rem; height: 2.3rem; border: 1px solid var(--gold); border-radius: 50%;
  background: var(--bg); display: grid; place-items: center;
  font: 350 1.05rem/1 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; color: var(--heading);
  font-variant-numeric: lining-nums;
}
ol.flow li:first-child::before { background: var(--gold); color: var(--navy); }
ol.flow li::after {
  content: ""; position: absolute; left: calc(1.15rem - 0.5px); top: 2.55rem; bottom: 0.2rem;
  width: 1px; background: linear-gradient(to bottom, var(--gold), var(--line) 40%);
}
ol.flow li:last-child { padding-bottom: 0; }
ol.flow li:last-child::after { display: none; }
ol.flow .t {
  display: block; padding-top: 0.2rem;
  font: 450 1.12rem/1.35 var(--display); font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0; color: var(--heading);
}
ol.flow .d { display: block; margin-top: 0.2rem; font-size: 0.94em; line-height: 1.55; color: var(--fg2); }

/* Do / do not: a night leaf and a stone leaf. */
.dodont { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2.25rem 0 2.75rem; }
@media (min-width: 640px) { .dodont { grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.dodont .col { padding: 1.6rem 1.8rem 1.55rem; border-radius: var(--radius); }
.dodont .do {
  background: linear-gradient(170deg, #0B1730, var(--navy) 70%); color: var(--on-navy);
  box-shadow: inset 0 -1px 0 rgba(196, 160, 90, 0.55);
}
.dodont .dont { background: var(--dont-bg); box-shadow: inset 0 0 0 1px var(--dont-line); color: var(--fg); }
.dodont h4, .dodont h5 { margin: 0 0 0.95rem; font: 600 0.875rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); }
.dodont .do h4, .dodont .do h5 { color: var(--gold2); }
.dodont .dont h4, .dodont .dont h5 { color: var(--label); }
.dodont ul { list-style: none; margin: 0; padding: 0; }
.dodont li { position: relative; padding-left: 1.55rem; margin-bottom: 0.65rem; font-size: 0.97em; line-height: 1.55; }
.dodont li:last-child { margin-bottom: 0; }
.dodont .do li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(196, 160, 90, 0.16);
}
.dodont .dont li::before {
  content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7rem; height: 1px; background: var(--label);
}
.dodont .do strong { color: inherit; }
.dodont .do :focus-visible { outline-color: var(--gold2); }
.dodont.ena { margin-top: 1rem; }
.dodont.ena li { font-size: 0.94em; margin-bottom: 0.8rem; }
.dodont.ena li:last-child { margin-bottom: 0; }

/* Definition: large Fraunces, a gold hairline. */
.definition { margin: 2.5rem 0; padding: 0.3rem 0 0.35rem 1.6rem; border-left: 1px solid var(--gold); }
.definition h3, .definition h4 { margin: 0 0 0.7rem; }
.definition p {
  margin: 0;
  font: 380 clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem)/1.42 var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
  color: var(--heading);
}
.definition p + p { margin-top: 0.7rem; }
.definition strong { font-weight: 550; }

/* Card */
.card {
  margin: 2.25rem 0 2.5rem; padding: 1.6rem 2rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.card .label { display: block; margin-bottom: 0.65rem; font: 600 0.8125rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label); }
.card p:last-child { margin-bottom: 0; }

/* Sequence: a line of words between hairlines, gold arrows between. */
.sequence {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  margin: 1.75rem 0 2rem; padding: 1.2rem 1rem;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--soft) 55%, transparent), transparent);
  color: var(--heading);
  font: 380 clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem)/1.4 var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
  text-align: center;
}
.sequence span.arrow, .sequence .arrow { color: var(--gold); font-family: var(--ui); font-weight: 300; }

/* Traditions: a ruled register, the name in Fraunces italic. */
.traditions { margin: 1.75rem 0 2rem; border-top: 1px solid var(--gold); }
.tradition {
  display: grid; grid-template-columns: 1fr; gap: 0.2rem;
  padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .tradition { grid-template-columns: 10.5rem 1fr; gap: 1.5rem; align-items: baseline; } }
.tradition .name {
  font: italic 400 1.2rem/1.3 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0;
  color: var(--heading);
}
.tradition p { margin: 0; }

/* Workbook */
.workbook { margin: 2.5rem 0 2.75rem; padding-top: 0.6rem; border-top: 1px solid var(--gold); }
.workbook > h3, .workbook > h4 { margin-top: 1.1rem; }
.workbook .prompt { margin-top: 1.5rem; font: 500 0.9rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label); }
.workbook .prompt + .notebook-field { margin-top: 0.1rem; }
.workbook .object, .workbook .field { margin: 1.25rem 0 1.5rem; font: 400 0.9rem/1.45 var(--ui); color: var(--label); }
.workbook .object span, .workbook .field span {
  display: inline-block; width: min(25rem, 60%); margin-left: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.workbook h5 { margin: 0; font: 600 0.875rem/1.4 var(--ui); color: var(--label); }
.workbook .grid, .workbook .two { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .workbook .grid, .workbook .two { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.two { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.gap { height: 1rem; }

/* Lists */
ul.plain, .science-list { margin: 0.5rem 0 1.5rem; padding-left: 1.3rem; }
ul.plain li, .science-list li { margin-bottom: 0.5rem; padding-left: 0.35rem; }
ul.plain li::marker, .science-list li::marker { color: var(--accent); }

.inline-arrow { display: inline-block; white-space: nowrap; }
.inline-arrow svg { display: inline-block; vertical-align: -0.1em; }

.scientific-takeaway { margin: 0; }
.scientific-takeaway > h3:first-child, .scientific-takeaway > h4:first-child { margin-top: 2.25rem; }


/* 10. Plates (figures) ---------------------------------------------------- */
/* A figure is a plate: a paper plate with a hairline inner frame, set on a
   leaf of deeper paper that extends a little beyond the text column. */

figure { margin: 2.5rem 0 2.75rem; }
figure.fig, .module figure.fig {
  --plate-pad: clamp(0.6rem, 1.6vw, 1rem);
  position: relative;
  margin: 3rem calc(-1 * var(--plate-pad)) 3.25rem;
  padding: var(--plate-pad) var(--plate-pad) calc(var(--plate-pad) * 0.4);
  background: var(--plate-back);
  border-radius: var(--radius);
}
@media (max-width: 639.98px) {
  figure.fig, .module figure.fig { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; padding-left: 0.6rem; padding-right: 0.6rem; }
  /* the Journey scene's phone layout was set for the whole screen width (360–390 px): no plate inset there */
  figure.fig.fig-jol { padding-left: 0; padding-right: 0; }
  .fig-jol .figframe { padding: 0; }
  .fig-jol .figframe::after { display: none; }
  .fig-jol figcaption { padding-left: 0.6rem; padding-right: 0.6rem; }
  .lentry figure.fig.fig-jol { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
}
figure > svg, .figframe > svg, .figframe > img { display: block; width: 100%; height: auto; }
.figframe {
  position: relative;
  padding: clamp(0.85rem, 2.4vw, 1.6rem);
  background: var(--plate);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.figframe::after {
  /* the hairline inner frame */
  content: ""; position: absolute; inset: 0.45rem; pointer-events: none;
  border: 1px solid var(--plate-line); border-radius: 2px;
}
.fig .figframe {
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(156, 122, 60, 0.05) 100%),
    var(--plate);
}
.figframe svg text { font-kerning: normal; }
.brain-figure { margin-top: 1.25rem; margin-bottom: 1.75rem; }

figcaption {
  display: flex; gap: 0.75rem; align-items: baseline;
  margin: 0; padding: 0.85rem 0.25rem 0.5rem; max-width: 38rem;
  font: 400 0.84rem/1.55 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2);
}
figcaption b {
  flex: none; white-space: nowrap;
  font: italic 400 1rem/1.2 var(--display); font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0; color: var(--heading);
}
figcaption b::after { content: ""; display: inline-block; width: 0.9rem; height: 1px; margin: 0 0 0.3em 0.7rem; background: var(--gold); vertical-align: middle; }
figcaption span { min-width: 0; }

/* The plate number in the margin (≥1280). */
@media (min-width: 1280px) {
  figure.fig[data-plate]::before {
    content: "Plate " attr(data-plate);
    position: absolute; bottom: calc(var(--plate-pad) * 0.4 + 0.55rem);
    left: calc(100% + var(--col-gap) - var(--plate-pad));
    width: calc(var(--margin-w) - 1rem);
    padding-top: 0.55rem; border-top: 1px solid var(--gold);
    font: italic 350 1.05rem/1.2 var(--display); font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0;
    color: var(--fg2);
  }
  figure.fig[data-plate]::before { width: 2.25rem; white-space: nowrap; }
}

.fig-enlarge {
  position: absolute; right: 0.85rem; bottom: 0.85rem; z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(196, 160, 90, 0.75); border-radius: 50%;
  background: rgba(247, 246, 241, 0.94); color: var(--navy);
  font: 400 1.05rem/1 var(--ui);
  opacity: 0; transform: scale(0.94);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background-color var(--t-fast) var(--ease);
}
.fig-enlarge:hover { background: var(--gold3); }
.figframe:hover .fig-enlarge, .fig-enlarge:focus-visible { opacity: 1; transform: none; }
.fig-enlarge:focus-visible { outline-color: var(--gold4); }
@media (hover: none) { .fig-enlarge { opacity: 1; transform: none; } }


/* 11. Ledgers (tables) ---------------------------------------------------- */

.tablewrap {
  margin: 1.5rem 0 2.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.tablewrap:focus-visible { outline-offset: 4px; }
@media (max-width: 639.98px) {
  .tablewrap { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); max-width: none; width: auto; }
}
.tablewrap > table { margin: 0; }

.module table, main table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  margin: 1.5rem 0 2.5rem;
  font-size: 0.94em; line-height: 1.55;
}
@media (max-width: 639.98px) {
  .tablewrap > table { min-width: 36rem; }
}
.module th, main th {
  padding: 0.85rem 0.8rem 0.7rem; vertical-align: bottom; text-align: left;
  font: 600 0.8rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--heading);
  letter-spacing: 0.005em;
}
.module td, main td { padding: 0.95rem 0.8rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.module tbody tr:last-child td, main tbody tr:last-child td { border-bottom: 1px solid var(--heading); }
.module tbody tr:nth-child(even), main tbody tr:nth-child(even) { background: color-mix(in srgb, var(--stone) 70%, transparent); }
.module td strong { font-weight: 600; }
.module td:first-child { color: var(--heading); }
.effects td:first-child {
  font: 450 1.02rem/1.35 var(--display); font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0; color: var(--heading);
}
.effects td:first-child strong { color: inherit; font-weight: 550; }
.effects th:nth-child(1) { width: 17%; }
.effects th:nth-child(2) { width: 41%; }
.effects th:nth-child(3) { width: 42%; }
.module th, .module td:first-child { overflow-wrap: normal; hyphens: manual; }

/* Source tables: no zebra, flush edges */
.module table.source-table { font-size: 0.93em; }
.module .source-table tbody tr:nth-child(even) { background: transparent; }
.source-table th, .source-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
.source-table td { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.source-table td:first-child {
  font-family: var(--display); font-weight: 450; font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0; color: var(--heading);
}
.source-table th:first-child, .source-table td:first-child { padding-left: 0; }
.source-table th:last-child, .source-table td:last-child { padding-right: 0; }
.source-table col:nth-child(1) { width: 30%; }
.source-table col:nth-child(2) { width: 34%; }
.source-table col:nth-child(3) { width: 36%; }
.source-table.levels col:nth-child(1) { width: 16%; }
.source-table.levels col:nth-child(2) { width: 42%; }
.source-table.levels col:nth-child(3) { width: 42%; }
.source-table.two-col col:nth-child(1) { width: 36%; }
.source-table.two-col col:nth-child(2) { width: 64%; }
.source-table tr.group td {
  padding: 0.6rem 0.7rem; background: var(--stone);
  font: 600 0.8rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label);
}
.source-table tr.group td:first-child { padding-left: 0.7rem; }
.module h3.table-title, .module h4.table-title { margin-top: 3rem; }
@media (max-width: 639.98px) {
  .tablewrap > .source-table.two-col { min-width: 26rem; }
}


/* 12. Notebook fields and glossary terms --------------------------------- */
/* Ruled fields: a leaf of paper with feint lines and a gold margin rule. */

.notebook-field {
  position: relative; margin: 0.7rem 0 2.25rem;
  padding: 0.4rem 1rem 0.35rem 2.1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow var(--t) var(--ease);
}
.notebook-field::before {
  /* the margin rule */
  content: ""; position: absolute; left: 1.2rem; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  transition: background-color var(--t) var(--ease);
}
.notebook-field:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.notebook-field:focus-within::before { background: var(--gold); }
.nb-label {
  display: block; margin: 0.6rem 0 0.3rem;
  font: 600 0.9rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--heading2);
}
.nb-text {
  display: block; width: 100%;
  min-height: calc(var(--nb-lh) * 3);
  margin: 0; padding: 0 0.1rem;
  border: 0; border-radius: 0; outline: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--nb-lh) - 1px),
    var(--line) calc(var(--nb-lh) - 1px), var(--line) var(--nb-lh));
  background-attachment: local;
  color: var(--fg);
  font: 400 1.0625rem/var(--nb-lh) var(--serif);
  resize: vertical;
  field-sizing: content;
  caret-color: var(--gold);
}
textarea.nb-text[rows="4"] { min-height: calc(var(--nb-lh) * 4); }
textarea.nb-text[rows="5"] { min-height: calc(var(--nb-lh) * 5); }
textarea.nb-text[rows="6"] { min-height: calc(var(--nb-lh) * 6); }
.nb-text::placeholder { color: var(--fg2); opacity: 0.6; font-style: italic; }
.nb-text:focus, .nb-text:focus-visible { outline: none; }
.nb-status {
  position: absolute; right: 0.25rem; bottom: -1.5rem;
  font: 500 0.75rem/1.2 var(--ui); font-variation-settings: var(--ui-vs); color: var(--accent-text);
  transition: opacity var(--t) var(--ease);
}
.nb-status:empty { opacity: 0; }

.nb-inline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem;
  margin: 1.25rem 0 1.75rem;
}
.nb-inline label { font: 500 0.9rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--label); }
.nb-inline .nb-line, input.nb-line {
  flex: 1 1 14rem; max-width: 26rem; min-height: 2.75rem;
  padding: 0.4rem 0.1rem 0.25rem;
  background: transparent; background-image: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font: 400 1.0625rem/1.5 var(--serif); color: var(--fg);
  caret-color: var(--gold);
}
.nb-inline .nb-line:focus-visible, input.nb-line:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }

a.term {
  color: inherit; text-decoration: underline dotted var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  border-radius: 2px;
  transition: background-color var(--t-fast) var(--ease);
}
a.term:hover, a.term[aria-expanded="true"] { background: var(--soft); text-decoration-style: solid; }
strong a.term, a.term strong { color: var(--heading); }
.callout a.term:hover, .practice a.term:hover, .dodont .do a.term:hover, :is(.closing, #closing) a.term:hover { background: rgba(196, 160, 90, 0.22); }


/* 13. Dusk, night and lamplight bands ------------------------------------ */
/* Bands run full-bleed from inside the text column with an absolutely placed
   pseudo-element (the .daylayout clips horizontal overflow). The closing is a
   positioned stacking context laid after the rail, so the rail slips under the
   dusk as the reader passes: at night the page keeps only the practice. */

.module > .section:is(.closing, #closing) {
  position: relative; isolation: isolate;
  margin-top: var(--section-gap);
  padding: 0 0 clamp(4.5rem, 8vw, 7rem);
  color: var(--on-navy);
  --heading: #F6F2E8; --heading2: #E6DDCC; --fg: var(--on-navy); --fg2: #CFC8BA; --label: #D9CBAE;
  --numeral: rgba(246, 242, 232, 0.62); --accent-text: var(--gold2); --line: rgba(227, 207, 158, 0.22);
  --soft: rgba(227, 207, 158, 0.1); --soft-fg: var(--on-navy); --bg: #0E1B30;
  --dusk-sun-x: min(26rem, 58vw);
}
/* the night water below the dusk horizon, deepening toward the practice */
.module > .section:is(.closing, #closing)::before {
  content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: -100vmax; right: -100vmax;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--horizon) 0 1px, transparent 1px),
    linear-gradient(to bottom, #1C2A47 0, var(--navy) 22rem, #0B1730 70%, #0B1730 100%);
}
/* the dusk sky, top → horizon, behind the opener */
.module > .section:is(.closing, #closing) > .opener {
  position: relative; margin: 0 0 3rem;
  padding: var(--section-gap) 0 clamp(7rem, 9vw, 9rem);
}
.module > .section:is(.closing, #closing) > .opener::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vmax; right: -100vmax;
  pointer-events: none;
  background:
    /* a gold horizon line */
    linear-gradient(to top, var(--horizon) 0 1px, transparent 1px),
    /* the setting sun, half below the horizon */
    radial-gradient(circle 3.4rem at calc(100vmax + var(--dusk-sun-x)) 100%, var(--sun-a) 0%, var(--sun-b) 62%, var(--sun-c) 98%, transparent 100%),
    radial-gradient(ellipse 34rem 11rem at calc(100vmax + var(--dusk-sun-x)) 100%, color-mix(in srgb, var(--sun-a) 55%, transparent), color-mix(in srgb, var(--sky-e) 30%, transparent) 45%, transparent 80%),
    linear-gradient(to bottom,
      var(--sky-a) 0, var(--sky-a) calc(var(--section-gap) * 0.5),
      var(--sky-b) 48%, var(--sky-c) 72%, var(--sky-d) 90%, var(--sky-e) 100%);
}
/* the sun's broken reflection on the water */
.module > .section:is(.closing, #closing) > .opener::after {
  content: ""; position: absolute; top: 100%; height: 5.5rem;
  left: calc(var(--dusk-sun-x) - 6rem); width: 12rem;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(227, 168, 104, 0.75) 0 1px, transparent 1px 0.85rem);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 100%);
}
:is(.closing, #closing) .opener .kicker::before { border-color: var(--gold2); background: radial-gradient(circle, var(--gold2) 0 0.13rem, transparent 0.15rem); }
:is(.closing, #closing) .opener .rule { background: var(--gold2); }
:is(.closing, #closing) .opener h2 { color: #FAF6EC; }
:is(.closing, #closing) .opener .lede { color: #EDE3D2; }
.module > .section:is(.closing, #closing)::before, :is(.closing, #closing) .opener::before { transform: none; }
:is(.closing, #closing) :focus-visible { outline-color: var(--gold2); }
:is(.closing, #closing) a { color: inherit; }
:is(.closing, #closing) strong { color: #FAF6EC; }
:is(.closing, #closing) .opener .kicker { color: #EDE3D2; }

/* Notes by lamplight: the reflection page, deep paper, a lamp's warmth above. */
.module > .section:is(.reflection, #reflection) {
  margin-top: 0;
  padding: var(--section-gap) 0 clamp(4.5rem, 8vw, 7rem);
  /* border-image paints full-bleed without positioning, so the rail stays above the band */
  position: static;
  border-image: linear-gradient(to bottom, var(--lamp-glow), var(--lamp) 28rem) fill 0 / / 0 100vmax;
  --bg-field: var(--paper);
}
:is(.reflection, #reflection) .notebook-field { background: var(--bg-field); }
:root[data-theme="night"] :is(.reflection, #reflection) { --bg-field: #0F1E33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.reflection, #reflection) { --bg-field: #0F1E33; } }
.module :is(.reflection, #reflection) h4 { margin-top: 2.75rem; }
.module :is(.reflection, #reflection) h4:first-of-type, .module :is(.reflection, #reflection) .opener + h4 { margin-top: 0; }


/* 14. Practice (base only) ----------------------------------------------- */
/* practice.css owns everything inside .practice and the practice screen; it
   reads --sky-a/b/c and --sun-a/b/c, which are the night set here. These
   zero-specificity rules only keep the block presentable if it loads late. */

.practice { margin: clamp(3rem, 6vw, 4.5rem) 0 0; color: var(--on-navy); }
:where(.practice) {
  overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, var(--sky-a), var(--sky-b) 55%, var(--sky-c));
  box-shadow: inset 0 0 0 1px rgba(227, 207, 158, 0.12), inset 0 -1px 0 var(--horizon);
  text-align: center;
}
:where(.practice-sky) { display: block; width: 100%; height: clamp(7rem, 20vw, 10rem); }
:where(.practice-body) { padding: 0.5rem clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 2.75rem); }
:where(.practice-label) { margin: 0 0 0.6rem; font: 500 0.8125rem/1.4 var(--ui); color: var(--gold2); }
:where(.practice-names) { margin: 0 auto 1.1rem; max-width: 30rem; font: 350 1.6rem/1.3 var(--display); color: var(--paper); text-wrap: balance; }
:where(.practice-names .amp) { font-style: italic; color: var(--gold2); }
:where(.practice-q) { margin: 0 auto 0.9rem; max-width: 30rem; font: italic 400 1.3em/1.45 var(--serif); color: var(--on-navy-strong); }
:where(.practice-after) { margin: 0 auto; max-width: 32rem; font-size: 0.95em; color: var(--on-navy2); }
:where(.practice-note) { margin: 1.5rem auto 0; max-width: 30rem; font: 400 0.8rem/1.55 var(--ui); color: var(--on-navy2); }
:where(.practice-body > .btn) { margin-top: 1.5rem; }
:where(.practice) :focus-visible { outline-color: var(--gold2); }


/* 15. Day navigation and resume notice ----------------------------------- */

.daynav {
  display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
@media (min-width: 640px) { .daynav { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 1024px) {
  .daynav {
    max-width: calc(var(--rail-w) + var(--col-gap) + var(--measure) + 4rem);
    padding-left: calc(2rem + var(--rail-w) + var(--col-gap)); padding-right: 2rem;
  }
}
@media (min-width: 1280px) {
  .daynav { max-width: calc(var(--rail-w) + var(--col-gap) * 2 + var(--measure) + var(--margin-w) + 4rem); padding-right: calc(2rem + var(--margin-w) + var(--col-gap)); }
}
.daynav-link {
  display: block; padding: 1.2rem 0 1.1rem; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--heading);
}
.daynav-spacer { display: none; }
@media (min-width: 640px) { .daynav-spacer { display: block; } }
.daynav-next, .daynav-soon { text-align: right; }
@media (max-width: 639.98px) { .daynav-next, .daynav-soon { text-align: left; } }
.daynav-k { display: block; margin-bottom: 0.45rem; font: 500 0.78rem/1.3 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.daynav-t {
  display: block;
  font: 330 clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem)/1.2 var(--display); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em; color: var(--heading); text-wrap: balance;
}
a.daynav-link { transition: border-color var(--t-fast) var(--ease); }
a.daynav-link:hover { border-top-color: var(--gold); }
a.daynav-link:hover .daynav-t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.daynav-next .daynav-k::after { content: " →"; color: var(--gold); }
.daynav-prev .daynav-k::before { content: "← "; color: var(--gold); }
.daynav-soon { font: italic 350 1.2rem/1.4 var(--display); color: var(--fg2); padding: 1.2rem 0; border-top: 1px solid var(--line); }
.daynav-prev:only-child { grid-column: 1; }

/* Resume notice (JS inserts it at the top of the module) */
.resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin: 0 0 3rem; padding: 0.75rem 0.75rem 0.75rem 1.15rem;
  border-left: 1px solid var(--gold); background: var(--bg3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: 400 0.9rem/1.5 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg);
}
.resume > span { flex: 1 1 16rem; min-width: 0; }
.resume b { font: italic 450 1.02rem/1.3 var(--display); color: var(--heading); }
.resume a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--heading); text-decoration-color: var(--gold); }
.resume button {
  min-height: 2.75rem; padding: 0.3rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; font: 500 0.8rem/1.2 var(--ui); color: var(--fg2);
}
.resume button:hover { color: var(--heading); border-color: var(--accent); }


/* 16. Dialogs ------------------------------------------------------------- */

dialog { color: var(--fg); }
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Search palette */
dialog.palette {
  width: min(42rem, calc(100vw - 2rem)); max-width: none; max-height: min(36rem, calc(100dvh - 4rem));
  margin: min(12vh, 6.5rem) auto auto; padding: 0;
  border: 1px solid var(--line); border-top: 1px solid var(--gold); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
  flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 36, 0.45);
}
dialog.palette[open] { display: flex; }
.palette-form {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1.4rem; border-bottom: 1px solid var(--line);
}
.palette-input {
  flex: 1; min-width: 0; height: 3.5rem; padding: 0;
  border: 0; background: transparent; outline: none;
  font: 350 1.4rem/1.3 var(--display); font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; color: var(--heading);
  -webkit-appearance: none; appearance: none;
}
.palette-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.palette-input::placeholder { color: var(--fg2); opacity: 0.7; font-style: italic; }
.palette-close {
  flex: none; min-height: 2.75rem; min-width: 2.75rem; padding: 0.3rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; font: 500 0.75rem/1.2 var(--ui); color: var(--fg2);
}
.palette-close:hover { color: var(--heading); border-color: var(--accent); }
.palette-results { overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem 0 0.8rem; }
.palette-results:empty { display: none; }
.pr-group > .pr-day, p.pr-group, .palette-results h2, .palette-results h3 {
  display: block; margin: 1rem 1.4rem 0.35rem; padding: 0; border: 0;
  font: 600 0.75rem/1.3 var(--ui); font-variation-settings: var(--ui-vs); color: var(--accent-text);
}
.pr {
  position: relative; display: block; margin: 0 0.5rem; padding: 0.75rem 0.9rem 0.8rem 1rem;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--fg);
}
.pr::before {
  content: ""; position: absolute; left: 0; top: 0.85rem; bottom: 0.85rem; width: 1.5px;
  background: var(--gold); opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.pr:hover { background: var(--bg2); }
.pr.active, .pr[aria-selected="true"] { background: var(--bg2); }
.pr.active::before, .pr[aria-selected="true"]::before { opacity: 1; }
.pr .pr-day, .pr .tag, .pr-tag {
  display: inline-block; margin-right: 0.55rem; padding: 0.05rem 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  font: 500 0.6875rem/1.4 var(--ui); color: var(--label); vertical-align: 0.1em;
}
.pr-title, .pr-s, .pr .t { display: block; font: 450 1.08rem/1.35 var(--display); font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0; color: var(--heading); }
.pr-snippet, .pr-x, .pr .x, .pr .snippet {
  display: block; margin-top: 0.25rem;
  font-size: 0.9rem; line-height: 1.5; color: var(--fg2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.palette mark, .pr mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 0.1em; }
.palette-empty, .pr-empty, .pr-hint { margin: 1.1rem 1.4rem; font: italic 400 1rem/1.5 var(--display); color: var(--fg2); }
.palette-hint { margin: 0; padding: 0.6rem 1.4rem; border-top: 1px solid var(--line); font: 400 0.75rem/1.3 var(--ui); color: var(--fg2); }

/* Lightbox: the plate, full screen, on deep paper. */
dialog.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(0.75rem, 3vw, 2.5rem);
  border: 0; background: transparent;
  place-items: center;
}
dialog.lightbox[open] { display: grid; }
dialog.lightbox::backdrop { background: rgba(239, 235, 225, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="night"] dialog.lightbox::backdrop { background: rgba(10, 20, 36, 0.96); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.lightbox::backdrop { background: rgba(10, 20, 36, 0.96); } }
.lightbox-body {
  position: relative;
  width: min(100%, 78rem); max-height: 100%; overflow: auto;
  padding: clamp(1.25rem, 3.5vw, 3rem);
  background: var(--paper); border-radius: var(--radius-sm);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 38, 63, 0.1), 0 40px 80px -50px rgba(20, 38, 63, 0.5);
}
.lightbox-body::before {
  content: ""; position: absolute; inset: 0.6rem; pointer-events: none;
  border: 1px solid rgba(20, 38, 63, 0.14); border-radius: 2px;
}
.lightbox-body svg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 15rem); margin: 0 auto; }
@media (max-width: 639.98px) {
  .lightbox-body { padding: 1rem; }
  .lightbox-body svg { width: 170%; max-width: none; max-height: none; }
}
.lightbox-caption, .lightbox-body figcaption {
  display: flex; gap: 0.75rem; align-items: baseline; max-width: 42rem; margin: 1.25rem auto 0; padding: 0;
  font: 400 0.84rem/1.55 var(--ui); color: var(--ink2);
}
.lightbox-caption b, .lightbox-body figcaption b { flex: none; font: italic 400 1rem/1.2 var(--display); color: var(--navy); }
.lightbox-caption b::after { content: ""; display: inline-block; width: 0.9rem; height: 1px; margin: 0 0 0.3em 0.7rem; background: var(--gold); vertical-align: middle; }
.lightbox-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 1;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(196, 160, 90, 0.7); border-radius: 50%;
  background: var(--navy); color: var(--paper);
  font: 300 1.5rem/1 var(--ui);
}
.lightbox-close:hover { background: var(--navy2); }
/* Phones: the slip that says an enlarged drawing is wider than the screen, with "Fit to screen". */
.lightbox-pan {
  position: fixed; left: 50%; bottom: 1rem; z-index: 1; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100vw - 2rem);
  padding: 0.3rem;
  border: 1px solid rgba(196, 160, 90, 0.7); border-radius: 999px;
  background: var(--navy); color: var(--on-navy);
  font: 400 0.8125rem/1.3 var(--ui); font-variation-settings: var(--ui-vs);
  box-shadow: 0 12px 30px -18px rgba(4, 9, 20, 0.7);
}
.lightbox-pan[hidden] { display: none; }
.lightbox-pan-hint { padding-left: 0.75rem; }
.lightbox-pan-hint::before { content: "↔"; margin-right: 0.45rem; color: var(--gold2); }
.lightbox-pan-hint[hidden] { display: none; }
.lightbox-fit {
  flex: none; min-height: 2.75rem; padding: 0 1rem;
  border: 0; border-radius: 999px;
  background: var(--gold2); color: var(--navy);
  font: 500 0.8125rem/1 var(--ui); font-variation-settings: var(--ui-vs);
}
.lightbox-fit:hover { background: var(--gold3); }
dialog.lightbox.has-pan { padding-bottom: 4.5rem; }   /* the plate ends above the slip */

/* Term popover: a slip of paper with a gold top edge. */
.termpop {
  position: absolute; z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.2rem 1.35rem 1.1rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-top: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 48px -28px rgba(10, 20, 36, 0.45);
}
.termpop-inner > :last-child { margin-bottom: 0; }
.termpop .termpop-label, .termpop .tp-label, .termpop .tp-k {
  margin: 0 0 0.5rem; font: 500 0.75rem/1.35 var(--ui); font-variation-settings: var(--ui-vs); color: var(--accent-text);
}
.termpop .termpop-term, .termpop .tp-term, .termpop h2, .termpop h3 {
  margin: 0 0 0.2rem;
  font: 380 1.6rem/1.15 var(--display); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em; color: var(--heading);
}
.termpop .termpop-short, .termpop .tp-short {
  margin: 0 0 0.6rem;
  font: italic 350 1.02rem/1.45 var(--display); font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0; color: var(--fg2);
}
.termpop p { margin: 0 0 0.7rem; font-size: 0.94rem; line-height: 1.58; }
.termpop-def, .termpop .tp-def { font-size: 0.94rem; line-height: 1.58; }
.termpop a {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0;
  font: 600 0.84rem/1.3 var(--ui); color: var(--heading);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.25em;
}
.termpop .termpop-close, .termpop button[data-action="close"] {
  position: absolute; top: 0.35rem; right: 0.35rem; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg2); font: 300 1.3rem/1 var(--ui);
}
.termpop .termpop-close:hover, .termpop button[data-action="close"]:hover { background: var(--bg2); }
.termpop.sheet {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-left: 0; border-right: 0; border-bottom: 0;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 40px -24px rgba(10, 20, 36, 0.5);
  max-height: 70vh; overflow-y: auto;
}
.termpop.sheet::after {
  content: ""; position: absolute; top: 0.5rem; left: 50%; width: 2.5rem; height: 3px; margin-left: -1.25rem;
  border-radius: 2px; background: var(--line);
}
.termpop-arrow, .termpop::before { content: ""; display: none; }


/* 404: the same page head as the glossary and notebook, on the measure */
.lost {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto; padding: clamp(4.5rem, 12vw, 9rem) var(--gutter) clamp(5rem, 10vw, 8rem);
}
.lost .pagehead { margin-bottom: 2.25rem; }
.lost-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* About, pricing, contact and policy pages (src/pages/): plain text on the measure */
main > .policy {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.policy .pagehead { margin-bottom: 1.5rem; }
.policy-date { font: 400 0.84rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.policy h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--display); font-weight: 330; font-style: normal;
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); line-height: 1.15;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.012em; color: var(--heading);
}
.policy ul { margin: 0 0 1.15em; padding-left: 1.3rem; }
.policy li { margin-bottom: 0.5rem; padding-left: 0.35rem; }
.policy li::marker { color: var(--accent); }
.policy .tbc {
  padding: 0.05em 0.3em; border-radius: 2px; background: var(--soft); color: var(--soft-fg); font: 500 0.85em/1.5 var(--ui);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sitefoot nav + nav { margin-top: 0; }


/* The course PDF, page by page (/day/N/pages/): images of the pages only, never the file; nothing to download,
   and the pages are left out when printing. The images ignore pointer events, so there is no "Save image" menu. */
.pdfview {
  max-width: calc(56rem + 2 * var(--gutter));
  margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.pdfview .pagehead { margin-bottom: 1.5rem; }
.pdfview .pagehead h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.25rem); }
.pdfview-back { margin: 0 0 2rem; }
.pdfpages { display: grid; gap: clamp(1rem, 3vw, 1.75rem); margin: 0 0 2.5rem; padding: 0; list-style: none; }
.pdfpages img {
  display: block; width: 100%; height: auto; background: #F7F6F1; border: 1px solid var(--line);
  pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pdfview-noprint { display: none; }
@media (max-width: 639.98px) {
  .pdfpages { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .pdfpages img { border-left: 0; border-right: 0; }
}
@media print {
  .pdfpages, .pdfview-back, .dayhero-pdf { display: none !important; }
  .pdfview-noprint { display: block; }
}


/* 17. Glossary page: the illuminated index -------------------------------- */

main.glossary, main.notebook, main > .glossary, main > .notebook {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
main > .glossary, main.glossary { max-width: calc(64rem + 2 * var(--gutter)); }

.pagehead { margin: 0 0 3rem; }
.pagehead .kicker { margin: 0 0 1.25rem; }
.pagehead h1, main.glossary > h1, main.notebook > h1 {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 300; font-style: normal;
  font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.5rem); line-height: 0.98;
  font-variation-settings: var(--display-vs);
  letter-spacing: -0.026em; color: var(--heading);
  text-wrap: balance;
}
.pagehead .lede, main.glossary > h1 + p, main.notebook > h1 + p, .glossary-intro, .notebook-intro {
  margin: 0; max-width: 34rem;
}
.pagehead::after, main.glossary > h1 + p::after, main.notebook > h1 + p::after {
  content: ""; display: block; width: 5.5rem; height: 1px; margin-top: 2rem; background: var(--gold);
}
.pagehead:has(.nbactions)::after { display: none; }

.glossary-tools, .glossary .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.glossary-tools {
  position: sticky; top: var(--topbar-h); z-index: 5;
  gap: 0.75rem 1.5rem; margin: 0 calc(-1 * var(--gutter)) 1rem; padding: 0.75rem var(--gutter);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (max-width: 639.98px) { .glossary-tools { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.glossary-search {
  flex: 1 1 14rem; min-width: 0; height: 2.75rem; padding: 0 0.1rem;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  font: italic 350 1.2rem/1.3 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; color: var(--heading);
  -webkit-appearance: none; appearance: none;
}
.glossary-search:not(:placeholder-shown) { font-style: normal; }
.glossary-search::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
.glossary-search::placeholder { color: var(--fg2); opacity: 0.75; }
.glossary-search:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }

.gentries { counter-reset: gentry; }
.gentry {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 0.25rem 3rem;
  padding: 2.25rem 0 2.1rem; border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 5.5rem);
}
.gentry:last-child { border-bottom: 1px solid var(--line); }
.gentry h2 {
  margin: 0 0 0.35rem;
  font-family: var(--display); font-weight: 320; font-style: normal;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.02;
  font-variation-settings: var(--display-vs);
  letter-spacing: -0.02em; color: var(--heading);
  text-wrap: balance;
}
.gentry h2::first-letter { color: var(--heading); }
.gshort {
  margin: 0 0 0.9rem;
  font: italic 350 1.2rem/1.45 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; color: var(--fg2);
}
.gdef { margin: 0 0 0.9rem; }
.gmeta { margin: 0; font: 400 0.84rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.gmeta a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--heading); font-weight: 500; }
@media (min-width: 860px) {
  .gentry { grid-template-columns: minmax(0, 20rem) minmax(0, 38rem); }
  .gentry h2 { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .gentry > :not(h2) { grid-column: 2; }
}
.gentry:target, .gentry.flash, .gentry.active { background: linear-gradient(to right, color-mix(in srgb, var(--soft) 80%, transparent), transparent 70%); }
.gentry:target::before, .gentry.flash::before, .gentry.active::before {
  content: ""; position: absolute; left: -1rem; top: 2.4rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
@media (max-width: 639.98px) { .gentry:target::before, .gentry.flash::before, .gentry.active::before { left: -0.85rem; } }
.gempty, .glossary-empty { margin: 2rem 0; font: italic 350 1.2rem/1.5 var(--display); color: var(--fg2); }

/* 17b. Reference library: the glossary's index, by theme, with the course's own plates ---- */
.library .libgroup { margin: 0; scroll-margin-top: calc(var(--topbar-h) + 5.5rem); }
.library .libgroup > h2 {
  margin: 3.5rem 0 0.6rem;
  font-family: var(--display); font-weight: 300; font-style: normal;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1;
  font-variation-settings: var(--display-vs);
  letter-spacing: -0.024em; color: var(--heading);
  text-wrap: balance;
}
.library .libgroup:first-of-type > h2 { margin-top: 1.25rem; }
.library .liblede {
  margin: 0 0 1.5rem; max-width: 40rem;
  font: italic 350 1.15rem/1.5 var(--display); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0; color: var(--fg2);
}
.library .libgroup > figure.fig { margin: 0 0 1.5rem; }
.library .libsub {
  position: relative; margin: 2.75rem 0 0; padding: 0 0 0.6rem 1.1rem; border-bottom: 1px solid var(--line);
  font: 500 0.95rem/1.4 var(--ui); font-variation-settings: var(--ui-vs); color: var(--heading);
}
.library .libsub::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.library .libsub + .lsub-empty { padding-top: 1rem; margin-bottom: 0; }
.library .libgroup.searching > .liblede, .library .libgroup.searching > figure.fig, .library .libgroup.searching .lsub-empty { display: none; }
.gentry.lentry > .lbody { min-width: 0; }
.lentry > :is(h3, h4) {
  margin: 0 0 0.35rem;
  font-family: var(--display); font-weight: 320; font-style: normal;
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.05;
  font-variation-settings: var(--display-vs);
  letter-spacing: -0.018em; color: var(--heading);
  text-wrap: balance;
}
.lkicker { margin: -0.2rem 0 0.8rem; font: 400 0.84rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.lentry figure.fig, .lentry .tablewrap { margin: 0.75rem 0 1.25rem; }
.lentry .tablewrap + .tablewrap { margin-top: 0; }
.lrow { margin: 0 0 0.45rem; font-size: 0.97em; }
.lrow .lk { display: inline-block; min-width: 6.5rem; font: 500 0.78rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.lorigin, .lnote { margin: 0.2rem 0 0.9rem; font: 400 0.9rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
.lorigin b { font-weight: 500; color: var(--heading); margin-right: 0.35rem; }
.lstages { margin: 0 0 1rem; padding-left: 1.3rem; }
.lstages li { margin-bottom: 0.3rem; }
.lstages li span { margin-left: 0.4rem; font: 400 0.84rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); }
@media (min-width: 860px) {
  .gentry.lentry > :is(h3, h4) { grid-column: 1; grid-row: 1; align-self: start; }
  .gentry.lentry > .lbody { grid-column: 2; grid-row: 1; }
}
/* A plate keeps its paper in night reading, so the words on it keep their paper colours too: HTML-composed plates
   (the ENA and do/don't cards, Day 4's definition, the text cards) take the day tokens, on the page and enlarged */
:root[data-theme="night"] :is(.figframe, .lightbox-body) {
  --bg: var(--paper); --bg2: var(--paper2); --bg3: var(--paper3); --fg: var(--ink); --fg2: var(--ink2);
  --line: var(--rule); --hair: rgba(20, 38, 63, 0.14); --accent-text: #7F6230;
  --heading: var(--navy); --heading2: var(--navy2); --label: var(--navy3); --numeral: #7D899A;
  --soft: var(--gold3); --soft-fg: var(--navy); --stone: var(--paper2); --dont-bg: var(--paper2); --dont-line: transparent;
  --mark: var(--gold3); --ring: var(--gold4);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.figframe, .lightbox-body) {
    --bg: var(--paper); --bg2: var(--paper2); --bg3: var(--paper3); --fg: var(--ink); --fg2: var(--ink2);
    --line: var(--rule); --hair: rgba(20, 38, 63, 0.14); --accent-text: #7F6230;
    --heading: var(--navy); --heading2: var(--navy2); --label: var(--navy3); --numeral: #7D899A;
    --soft: var(--gold3); --soft-fg: var(--navy); --stone: var(--paper2); --dont-bg: var(--paper2); --dont-line: transparent;
    --mark: var(--gold3); --ring: var(--gold4);
    color-scheme: light;
  }
}

/* The way back: a reader who followed a Library link into a day sees this at the section they landed on */
.returnbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem;
  margin: 0 0 1.75rem; padding: 0.7rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  font: 400 0.9rem/1.5 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2);
}
.returnbar a { color: var(--heading); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.closing .returnbar { margin-top: 1.5rem; }
:is(.closing, #closing) .returnbar a { color: var(--gold2); }   /* outranks the closing band's `a { color: inherit }` */


/* 18. Notebook page: the bound journal ------------------------------------ */

.page-notebook main { background: var(--bg3); }
main > .notebook, main.notebook { max-width: calc(46rem + 2 * var(--gutter)); }
.nbnote { margin: 1.4rem 0 0; font: 400 0.84rem/1.6 var(--ui); font-variation-settings: var(--ui-vs); color: var(--fg2); max-width: 34rem; }
.nbactions, .notebook-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.notebook-actions { margin-bottom: 2.75rem; }

.nbday {
  position: relative;
  margin: 0 0 2.5rem; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.35rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem) clamp(2.25rem, 6vw, 4.25rem);
  background: var(--bg);
  border-radius: 2px var(--radius) var(--radius) 2px;
  box-shadow: 0 0 0 1px var(--hair);
}
.nbday::before {
  /* the binding: a soft gutter shade and a stitched margin rule */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(1.1rem, 3vw, 2rem);
  background: linear-gradient(to right, color-mix(in srgb, var(--navy) 9%, transparent), transparent);
  border-right: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  pointer-events: none;
}
.nbday > h2 {
  margin: 0 0 1.75rem;
  font-family: var(--display); font-weight: 330; font-style: normal;
  font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.3rem); line-height: 1.1;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.015em; color: var(--heading);
}
.nbentry { margin: 0 0 1.9rem; }
.nbprompt { margin: 0 0 0.35rem; font: 600 0.9rem/1.45 var(--ui); font-variation-settings: var(--ui-vs); color: var(--heading2); }
.nbjump {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: 0.45rem; padding: 0;
  font: 400 0.78rem/1.4 var(--ui); color: var(--fg2);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.25em;
}
.nbjump:hover { color: var(--heading); }
.nbvalue {
  white-space: pre-wrap;
  font: 400 1.0625rem/var(--nb-lh) var(--serif);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--nb-lh) - 1px),
    var(--line) calc(var(--nb-lh) - 1px), var(--line) var(--nb-lh));
  min-height: var(--nb-lh);
}
.nbvalue:empty { display: none; }
.nbempty, .nbday .empty { margin: 0; font: italic 350 1.1rem/1.5 var(--display); color: var(--fg2); }
.nbempty a { display: inline-block; margin-top: 0.35rem; font: 500 0.875rem/1.4 var(--ui); font-style: normal; font-variation-settings: var(--ui-vs); color: var(--heading); }
.page-notebook .sitefoot { background: var(--bg3); }


/* 19. Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  dialog.palette[open], .termpop:not([hidden]) { animation: tlm-rise var(--t) var(--ease); }
  dialog.lightbox[open] .lightbox-body { animation: tlm-settle 520ms var(--ease); }
  .mobile-nav:not([hidden]) { animation: tlm-drop var(--t) var(--ease); }

  /* The day title settles into the dawn once. */
  .dayhero-title, .dayhero-sub { animation: tlm-dawn-text 900ms var(--ease) both; }
  .dayhero-sub { animation-delay: 120ms; }
  .plate-hero { animation: tlm-plate 1200ms var(--ease) 150ms both; }
  /* when arriving by a view transition, the title morphs instead */
  html:active-view-transition .dayhero-title { animation: none; }

  /* The opener's hairline drawing itself on enter is reading.css's (scroll-driven, with an .in-view fallback). */
}
@keyframes tlm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tlm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tlm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlm-settle { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tlm-dawn-text { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: none; } }
@keyframes tlm-plate { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

::view-transition-old(day-title), ::view-transition-new(day-title) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}


/* 20. Print --------------------------------------------------------------- */

@media print {
  @page { size: A4; margin: 22mm 24mm; }
  :root, :root[data-theme="night"], :root:not([data-theme="light"]) {
    --bg: #F7F6F1; --bg2: #ECEAE2; --bg3: #EFEBE1; --fg: #26313F; --fg2: #5E6875; --line: #D8D4C8;
    --panel: #14263F; --panel-fg: #EEEBE2; --plate: transparent; --plate-back: transparent;
    --heading: #14263F; --heading2: #26415F; --label: #46607F; --numeral: #7D899A; --accent-text: #7F6230;
    --soft: #F1E6CB; --soft-fg: #14263F; --stone: #ECEAE2; --mark: #F1E6CB; --lamp: transparent;
    --body-size: 10.8pt;
    color-scheme: light;
  }
  html, body { background: #F7F6F1 !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10.8pt; line-height: 1.66; }
  main, .daylayout { overflow: visible; }

  .skip, .topbar, .mobile-nav, .rail, .margin, .daynav, .sitefoot, dialog, .termpop,
  .fig-enlarge, .timer, .practice-note, .dayhero-actions, .dayhero .sky, .dayhero-sky, .scrollcue, .readbar,
  .notebook-actions, .nbactions, .resume, .glossary-tools, .nb-status, .rail-actions,
  .practice [data-action="practice-open"] { display: none !important; }

  .dayhero { display: block; min-height: 0; background: none; color: var(--navy); overflow: visible; }
  .dayhero-inner { max-width: none; padding: 0 0 8mm; }
  .dayhero-inner > * { max-width: none; }
  .dayhero-week { color: var(--navy3); }
  .dayhero-title { color: var(--navy); font-size: 34pt; }
  .dayhero-sub { color: var(--ink2); }
  .dayhero-meta { color: var(--ink2); border-top-color: var(--rule); }
  .dayhero-value { color: var(--navy); }
  .stage-dots i { border-color: var(--gold); }
  .plate-hero { position: static; width: 60%; margin: 0 auto 8mm; animation: none; }
  .plate-hero::before { display: none; }
  .plate-hero img { -webkit-mask-image: none; mask-image: none; }

  .daylayout { display: block; padding: 0; }
  .module, main.glossary, main.notebook, main > .glossary, main > .notebook { max-width: none; margin: 0; padding: 0; }
  .module > .section { margin-top: 12mm; }
  .section[data-movement]::before { font-size: 30pt; }
  .opener { break-inside: avoid; break-after: avoid; }
  .opener h2 { font-size: 22pt; }
  .opener .rule { animation: none; transform: none; }
  .module h3, .module h4 { break-after: avoid; }
  figure, .callout, .soft, .dodont, .definition, .card, .sequence, .tradition, .practice, tr, .gentry, .nbentry { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  figure.fig { margin: 6mm 0; padding: 0; background: none; }
  figure.fig::before { display: none; }
  .figframe { padding: 0 !important; background: none !important; }
  .figframe::after { display: none; }
  .tablewrap { overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .tablewrap > table { min-width: 0 !important; }
  thead { display: table-header-group; }

  .module > .section:is(.closing, #closing), .module > .section:is(.reflection, #reflection) { padding: 0; color: var(--ink); border-image: none; --heading: #14263F; --fg: #26313F; --fg2: #5E6875; --label: #46607F; --numeral: #7D899A; }
  .module > .section:is(.closing, #closing)::before, .module > .section:is(.closing, #closing) > .opener::before, .module > .section:is(.closing, #closing) > .opener::after { display: none; }
  .module > .section:is(.closing, #closing) > .opener { padding: 0; }
  :is(.closing, #closing) .opener h2, :is(.closing, #closing) strong { color: var(--navy); }
  :is(.closing, #closing) .opener .lede, :is(.closing, #closing) .opener .kicker { color: var(--ink2); }
  .practice { background: var(--navy) !important; color: var(--on-navy); }
  .nbday { box-shadow: none; padding: 0; }
  .nbday::before { display: none; }
  .notebook-field { box-shadow: none; padding-left: 0; }
  .notebook-field::before { display: none; }
  .nb-text { resize: none; field-sizing: content; }
  a.term { text-decoration: none; }
  a { color: inherit; }
}

/* ---------------------------------------------------------------- Hindi pages (/hi/) and the language switch
   Devanagari joins the Latin faces through unicode-range, so English pages never download it: Lora and Fraunces
   fall back to Noto Serif Devanagari, DM Sans to the Devanagari in Poppins (already the figures' face). */
@font-face { font-family: "Lora"; src: url("/assets/fonts/NotoSerifDevanagari.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/NotoSerifDevanagari.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A8E0-A8FF; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/Poppins-Light.woff2") format("woff2"); font-weight: 100 350; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 351 450; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 451 1000; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }

.tbtn.tbtn-lang { width: auto; padding: 0 0.7rem; border-radius: 1.375rem; font: 500 0.86rem/1 var(--ui); text-decoration: none; white-space: nowrap; }
.tbtn.tbtn-lang:lang(hi) { font-size: 0.95rem; }

/* Devanagari needs room above and below the line for its vowel signs, and no letter-spacing between its letters. */
:root:lang(hi) { --body-lh: 1.85; }
:root:lang(hi) :is(h1, h2, h3, h4, h5, h6, .dayhero-title, .dayhero-sub, .kicker, .lede, .toc-t, .daynav-t, .btn, .chip, figcaption, .mobile-nav a, .topnav a) { line-height: 1.4; }
:root:lang(hi) *, :root:lang(hi) *::before, :root:lang(hi) *::after { letter-spacing: normal !important; }
/* Devanagari has no italic: emphasis stays upright and a little heavier. */
:root:lang(hi) body * { font-style: normal !important; }
:root:lang(hi) :is(em, i) { font-weight: 600; }
/* No drop cap in Hindi. */
:root:lang(hi) .section[data-movement="I"] > p:first-of-type::first-letter,
:root:lang(hi) p.dropcap::first-letter {
  float: none; margin: 0; font: inherit; color: inherit; -webkit-initial-letter: normal; initial-letter: normal;
}
/* Phones: the language switch is the first line of the menu, so the top bar keeps its room. */
@media (max-width: 899px) { .topbar-tools .tbtn-lang { display: none; } }
.mobile-nav a.mobile-nav-lang { font: 500 1.05rem/1.25 var(--ui); color: var(--accent-text); }
@media (max-width: 420px) { .topbar-inner { gap: 0.5rem; } }
/* Under 380 px the brand and three buttons need more than the screen: "TLM Basic" gives way, so ☰ (and the switch in it) stays on screen. */
@media (max-width: 379.98px) { .brand-sub { display: none; } }
/* The plate number in the margin (≥1280) says चित्र, as the caption beside it does. */
@media (min-width: 1280px) { :root:lang(hi) figure.fig[data-plate]::before { content: "चित्र " attr(data-plate); font-style: normal; } }
/* 900–1099 px: the full menu, the language switch and the account button share the bar; tighter menu links. */
@media (min-width: 900px) and (max-width: 1099px) { .topnav a { padding: 0 0.5rem; } .topbar-inner { gap: 1rem; } }
@media (min-width: 900px) and (max-width: 1023px) { .brand-sub { display: none; } }
/* Day 20's mandala sets its stage names on arcs drawn for Latin; Devanagari stands taller, so a little smaller. */
:root:lang(hi) #d20-fig-7 textPath { font-size: 0.93em; }