@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* === Rubric Theme === */
/*
  A variable-only theme drawn from a printed antiphonal: a decorative letter D
  in vermilion and dense black on a warm parchment sheet, with ochre shadow
  where the page curls away from the light.

  Load this AFTER the base Xanthan CSS files in _includes/html/html-head.html.

  Why this reference, for a series about writing with AI: rubrication is the
  original two-ink system. The black carries the text; the red marks what the
  reader is supposed to notice — the start of a thing, the name of a thing, the
  instruction about how to proceed. That is exactly the division of labour this
  site argues for, so the palette is two inks and a sheet, and red is reserved
  for what matters rather than spent on decoration.

  The ink and parchment were sampled from the source image. The red was first
  sampled too, but the sampled pixel came out oxblood, which read as stern on
  screen, so it has been moved toward the orange of real vermilion (cinnabar)
  and kept at about 6:1 on the page. The ink is NOT neutral — it sits at
  hue ~38, a warm near-black, which is why a cool #222 looks wrong here.

  Type: headings and ledes are EB Garamond, a revival of the types cut for the
  same generation of printers as the Aldine and Amman images on the site. Sans
  is kept for body copy and interface text only.

  Every foreground/background pair below was checked; the ratios are recorded
  where they are close or where a later edit might break them.
*/

/*****************************************************
CSS VARIABLE OVERRIDES
*****************************************************/
:root {
  /* ===== Rubric Color Palette ===== */
  --rubric-red: #a8321c;          /* Vermilion — 5.9:1 on the page */
  --rubric-red-dark: #7e2412;     /* Ink pooled in the stroke */
  --rubric-red-light: #c0412a;    /* Lifted, for hover states — 4.9:1 under white text */
  --ink-black: #1c1710;           /* Text ink — warm, not neutral */
  --parchment: #e9dcc8;           /* The sheet */
  --parchment-pale: #f8f2e7;      /* The sheet where the light hits it */
  --ochre: #7a5a33;               /* Warm shadow at the curl of the page */
  --ochre-light: #b3946a;         /* Aged edge, reserved for warnings */
  --gilt: #c9973f;                /* Faded gold leaf — washes only, never text */
  --bistre: #2d1f12;              /* Soot-brown ink, for the nav bar — 14.3:1 under parchment */

  /* ===== Override Base Theme Variables ===== */
  /* Backgrounds */
  --bg-page: var(--parchment-pale);
  --bg-card: color-mix(in srgb, var(--parchment-pale) 94%, var(--parchment));
  /* Callout wash: faded gilt, not grey. Ochre tints at low strength went
     muddy against the cream; the gold keeps the box warm. */
  --bg-accent: color-mix(in srgb, var(--gilt) 15%, var(--bg-page));
  --bg-code: color-mix(in srgb, var(--parchment) 68%, var(--bg-page));
  --bg-code-block: var(--ink-black);
  --text-code-block: var(--parchment-pale);
  /* Prompt slab, one step off full ink. A session page carries 29 of these,
     and at --ink-black they read as a column of black holes down the page.
     Mixed toward ochre they stay clearly dark, and clearly not the paper of a
     demo block, without the weight. Resolves to #3d2e1c; parchment on it is 11.7:1.
     --bg-code-block stays at full ink for real code and for the slides. */
  --bg-prompt: color-mix(in srgb, var(--ochre) 35%, var(--ink-black));
  /* Nav is a bar of bistre on every page, hero included: one fixed dark edge
     at the top of the sheet. A red hairline (below) separates it from the
     content. Bistre rather than --ink-black so the bar reads as brown next to
     the black of the body text and the footer.  */
  --bg-nav: var(--bistre);
  --page-header-nav-text: var(--parchment-pale);
  --bg-footer: var(--ink-black);
  --bg-footer-bottom: var(--ink-black);

  /* Homepage sections */
  --bg-section-alt: linear-gradient(180deg, color-mix(in srgb, var(--parchment) 70%, var(--parchment-pale)), color-mix(in srgb, var(--parchment) 46%, var(--parchment-pale)));
  --bg-section-alt-flat: color-mix(in srgb, var(--parchment) 58%, var(--parchment-pale));
  --border-section-alt: color-mix(in srgb, var(--rubric-red) 18%, var(--parchment-pale));
  --text-section-alt-heading: var(--rubric-red-dark);
  /* The source has no cool hue at all — two inks and a sheet. So the "cool"
     band is a cooler, greyer parchment rather than an invented blue-green,
     and it is distinguished from the "alt" band by tone, not by temperature. */
  --text-section-cool-heading: var(--ochre);
  --bg-section-cool: linear-gradient(180deg, color-mix(in srgb, var(--ochre) 14%, var(--parchment-pale)), color-mix(in srgb, var(--ochre) 7%, var(--parchment-pale)));
  --border-section-cool: color-mix(in srgb, var(--ochre) 26%, var(--parchment-pale));
  /* The one dark band on the page: ink, because on this sheet the only thing
     darker than the text is more of the same ink. Parchment on ink is 15.3:1;
     the link lightens to ochre-light, which is 6.2:1 on ink. */
  --bg-section-warm: var(--ink-black);
  --text-section-warm: var(--parchment-pale);
  --text-section-warm-heading: color-mix(in srgb, var(--ochre-light) 42%, var(--parchment-pale));
  --text-section-warm-link: var(--ochre-light);
  --text-section-warm-link-hover: var(--parchment-pale);
  --border-section-warm: var(--rubric-red);
  --border-section-accent: var(--rubric-red);
  --hero-tagline-color: color-mix(in srgb, var(--ink-black) 74%, var(--bg-page));

  --bg-feature-card: var(--ink-black);
  --text-feature-card: var(--parchment-pale);
  --text-feature-card-muted: color-mix(in srgb, var(--parchment-pale) 74%, transparent);
  --border-feature-card: color-mix(in srgb, var(--rubric-red) 72%, var(--ink-black));
  --border-feature-card-hover: var(--ochre-light);
  --bg-feature-band: var(--ink-black);
  --text-feature-band: var(--parchment-pale);
  --text-feature-band-muted: color-mix(in srgb, var(--parchment-pale) 74%, transparent);
  --text-feature-band-link: var(--ochre-light);
  --text-feature-band-link-hover: var(--parchment-pale);
  --bg-editorial-note: color-mix(in srgb, var(--ochre) 12%, var(--parchment-pale));
  --border-editorial-note: var(--rubric-red);
  --text-lede: color-mix(in srgb, var(--ink-black) 84%, var(--rubric-red));
  --text-kicker: var(--rubric-red-dark);
  --metadata-border: color-mix(in srgb, var(--rubric-red) 30%, transparent);

  /* Text */
  --text-body: var(--ink-black);
  --text-on-dark: var(--parchment-pale);
  --text-muted: color-mix(in srgb, var(--ink-black) 64%, var(--bg-page));
  --text-footer-link: var(--parchment-pale);
  --text-footer-bottom: color-mix(in srgb, var(--parchment-pale) 70%, transparent);

  /* Accents & Interactive — red is the rubric: it marks, it does not decorate.
     7.3:1 on the page, so it can carry a link as well as an ornament. */
  --accent-primary: var(--rubric-red);
  --accent-border: var(--rubric-red);
  --interactive-hover: var(--rubric-red-light);
  --interactive-hover-bg: var(--rubric-red-light);
  --interactive-subtle: color-mix(in srgb, var(--ochre) 12%, transparent);
  --interactive-subtle-hover: color-mix(in srgb, var(--rubric-red) 14%, transparent);
  --accent-primary-dark: var(--rubric-red-dark);

  /* Heading hierarchy */
  --text-h1: var(--ink-black);
  --text-h2: var(--ink-black);
  --text-h3: var(--ink-black);
  --text-h4: var(--ink-black);
  --text-h5: var(--ink-black);

  /* ===== Type ===== */
  --font-heading: 'EB Garamond', Georgia, serif;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-lede: 'EB Garamond', Georgia, serif;

  /* Status colors tuned to the palette. There is no green in the source, so
     success borrows the ochre end rather than importing a hue from nowhere. */
  --success: var(--ochre);
  --warning: var(--ochre-light);
  --warning-bg: color-mix(in srgb, var(--ochre-light) 22%, var(--bg-page));
  --error: var(--rubric-red-dark);
  --info: color-mix(in srgb, var(--ochre) 70%, var(--parchment-pale));

  /* Page headers — the sheet, not the framework's default near-black, so the
     header band reads as more of the same page rather than a dark panel laid
     over it. Title and supporting text are ink on paper. */
  --bg-page-header: color-mix(in srgb, var(--parchment) 55%, var(--parchment-pale));

  /* Header ink: the text ink warmed toward the ochre shadow, so a title set on
     a brown-printed woodcut belongs to the image instead of sitting on top of
     it. Resolves to about #463520 — 7.8:1 on parchment. */
  --page-header-ink: color-mix(in srgb, var(--ochre) 25%, var(--ink-black));
  --page-header-title: var(--page-header-ink);
  --page-header-grid-line: var(--ink-black);
  --page-header-divider-line: color-mix(in srgb, var(--ink-black) 22%, transparent);
  --page-header-divider-text: color-mix(in srgb, var(--ink-black) 50%, transparent);
  --page-header-subtitle: color-mix(in srgb, var(--page-header-ink) 88%, transparent);
  --page-header-caption: color-mix(in srgb, var(--ink-black) 62%, transparent);
  --page-header-caption-hover: var(--rubric-red);
  --page-header-title-shadow: none;
  --page-header-subtitle-shadow: none;
  --page-header-section-title-shadow: none;
  --page-header-top-scrim: transparent;
  /* Parchment, near-opaque: this header is light and its ink is dark, so the
     scrim fades the line art back toward the sheet rather than darkening it. */
  --page-header-text-scrim: color-mix(in srgb, var(--parchment) 88%, transparent);
  --page-header-caption-scrim: color-mix(in srgb, var(--parchment) 85%, transparent);
  /* Ink on paper: take the colour out, then warm it to a brown-black, and
     multiply so the lines print onto the sheet without tinting the sheet. */
  --page-header-tint-filter: grayscale(1) sepia(0.35) contrast(1.15);
  --page-header-tint-blend: multiply;
}

/* Section headers: a light fade plus a parchment glow around the type,
   in place of page-header.css's near-opaque scrim (full strength to 28%,
   gone by 62%), which washed out the left half of every print. The glow
   keeps the dark ink legible over hatching while the image shows around
   the words. It is kept tight and partly transparent so it reads as clean
   paper behind the letters rather than as a visible halo; the medium-weight
   subtitle below does the rest. The home page's hero keeps the full scrim: its image is a
   printed page whose own lines of type would run behind the title.

   page-header.css loads after this file, so the fade needs the extra class
   to win; the shadows are set as variables on the header, which wins
   wherever it loads. */
.page-header--section {
  --page-header-section-title-shadow:
    0 0 1px var(--parchment-pale),
    0 0 7px color-mix(in srgb, var(--parchment-pale) 70%, transparent),
    0 0 16px color-mix(in srgb, var(--parchment-pale) 40%, transparent);
  --page-header-subtitle-shadow:
    0 0 1px var(--parchment-pale),
    0 0 4px color-mix(in srgb, var(--parchment-pale) 80%, transparent),
    0 0 10px color-mix(in srgb, var(--parchment-pale) 45%, transparent);
}

/* The subtitle carries the page's argument, over the busiest part of the
   print. page-header.css sets it at weight 300 with wide tracking, but only
   400, 500 and 700 of Source Sans 3 are loaded, so it rendered as a thin 400
   at 1.08rem. Medium weight, a size up and normal tracking hold up against
   hatching. The selector has to outrank page-header.css, which loads later,
   and the .page-wrap .page-header p rule further down this file. */
.page-wrap .page-header.page-header--section p {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.page-header.page-header--section::after {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--parchment) 55%, transparent) 0%,
    color-mix(in srgb, var(--parchment) 30%, transparent) 30%,
    transparent 52%
  );
}

/* nav.css floats the nav transparently over a hero header and drops it out of
   the sticky flow. This site wants one nav everywhere, so the hero case is
   folded back into the ordinary bar: same bistre, same hairline, still sticky.
   The colour variables below are what nav.css's hero rules read. */
.page-wrap:has(.page-header--hero) {
  --page-header-nav-text: var(--parchment-pale);
  --page-header-nav-dropdown-bg: var(--bistre);
  --page-header-nav-dropdown-border: color-mix(in srgb, var(--parchment-pale) 20%, transparent);
  --page-header-nav-dropdown-text: var(--parchment-pale);
  --page-header-nav-focus-ring: color-mix(in srgb, var(--parchment-pale) 40%, transparent);
}

.page-wrap:has(.page-header--hero) .top-nav {
  position: sticky;
  background-color: var(--bg-nav);
}

/* nav.css also gives hero links an underlined hover, on the assumption the bar
   is transparent. Ours isn't, so hover is the plain colour change used on every
   other page. */
.page-wrap:has(.page-header--hero) .top-nav-link:hover,
.page-wrap:has(.page-header--hero) .top-nav-link:focus {
  color: var(--ochre-light);
  box-shadow: none;
}


/*****************************************************
COMPONENT OVERRIDES
*****************************************************/

/* ===== Nav: a bar of bistre ===== */
/* Parchment on bistre is 14.3:1; the hover lightens to ochre-light, 5.6:1 on
   the same bar. Same pattern as the dark --bg-section-warm band above. */
.top-nav {
  color: var(--parchment-pale);
  /* Solid, not nav.css's 92%: page content showed through the bar when
     scrolled underneath it. */
  background-color: var(--bg-nav);
  border-bottom: 1px solid color-mix(in srgb, var(--rubric-red) 45%, transparent);
}

.top-nav-brand,
.top-nav-brand:hover,
.top-nav-link {
  color: var(--parchment-pale);
}

.top-nav-brand {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
}

.top-nav-link:hover,
.top-nav-link:focus,
.top-nav a:visited:hover,
.top-nav a:visited:focus {
  color: var(--ochre-light);
}

/* search.css loads after this file, hence the extra .top-nav. */
.top-nav .search-toggle {
  color: var(--parchment-pale);
}

.top-nav .search-toggle:hover,
.top-nav .search-toggle:focus {
  color: var(--ochre-light);
}

.top-nav-dropdown {
  background-color: var(--bistre);
  border-color: color-mix(in srgb, var(--parchment-pale) 20%, transparent);
}

.top-nav-dropdown-item {
  color: var(--parchment-pale);
}

.top-nav-dropdown-item:hover,
.top-nav-dropdown-item:focus {
  color: var(--ochre-light);
}

/* ===== Headings ===== */
/* Garamond has a small x-height and thin strokes: set it at 500–600 rather
   than the grotesk's 700, and a touch larger so it holds its size. */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.005em;
}

h2 {
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
}

h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
}

/* ===== Prompt blocks ===== */
/* prompt.css paints the slab with --bg-code-block; this site sends it to the
   lighter --bg-prompt instead. See the token for why. */
.prompt-text {
  background: var(--bg-prompt);
}

/* ===== Session rows ===== */
/* toc.css draws a row as a left stripe over --bg-card, and on this theme
   --bg-card is 94% of the page colour, so there was no box: with a single
   session listed, the entry read as loose text under the lede and was easy to
   scroll past. This gives it a real edge on all four sides. The ground is
   pulled further toward --parchment so the card separates from the sheet, and
   the left rule goes to the full vermilion, since a session is exactly the
   kind of thing the rubric is meant to mark. */
.toc-row {
  background: color-mix(in srgb, var(--parchment) 38%, var(--parchment-pale));
  /* 50% ink puts the hairline at 3.1:1 against the card, the non-text
     contrast threshold. At the 22% this started on it measured 1.48:1 and
     the edge was there without being visible. */
  border: 1px solid color-mix(in srgb, var(--ink-black) 50%, transparent);
  border-left: 5px solid var(--rubric-red);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-black) 8%, transparent);
  margin-bottom: var(--spacing-md);
}

/* The whole row is a link, so the hover has to look like one: the card lifts
   off the sheet rather than just recolouring its stripe. */
.toc-row:hover {
  background: var(--parchment-pale);
  border-color: color-mix(in srgb, var(--ink-black) 68%, transparent);
  border-left-color: var(--rubric-red-light);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--ink-black) 14%, transparent);
}

/* The kicker is the session number and date. It carries the ochre so the row
   has a warm line above a black title, matching the eyebrow in the home
   page's next-session bar. */
.toc-row .toc-kicker {
  color: var(--ochre);
}

.toc-row h3 {
  color: var(--ink-black);
}

/* The home page's teaser boxes (prompt.css) get the same treatment, scaled
   down: a real edge instead of melting into --bg-card at 94% of the page
   colour, and the same vermilion marking that a session is worth noticing. */
.session-box {
  background: color-mix(in srgb, var(--parchment) 38%, var(--parchment-pale));
  border: 1px solid color-mix(in srgb, var(--ink-black) 50%, transparent);
  border-left: 4px solid var(--rubric-red);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-black) 8%, transparent);
}

.session-box:hover {
  background: var(--parchment-pale);
  border-color: color-mix(in srgb, var(--ink-black) 68%, transparent);
  border-left-color: var(--rubric-red-light);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--ink-black) 14%, transparent);
}

.session-box-kicker {
  color: var(--ochre);
}

.session-box-title {
  color: var(--ink-black);
}

/* ===== Page headers ===== */
/* page-header.css loads after this file, so these rules carry an extra
   .page-wrap to win on specificity. */
.page-wrap .page-header h1 {
  font-weight: 500;
  letter-spacing: -0.01em;
  text-indent: 0;
}

.page-wrap .page-header p {
  font-weight: 400;
  letter-spacing: 0;
}

/* The eyebrow, divider and caption were set in spaced monospace, which read as
   a terminal. Letterspaced small caps in the text face do the same job. */
.page-wrap .page-header-eyebrow,
.page-wrap .page-header-divider span {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.page-wrap .page-header-divider span {
  font-size: 0.8rem;
}

.page-wrap .page-header-caption {
  font-family: var(--font-lede);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0;
}

/* Garamond sets narrower than the grotesk did, so the hero title fit on one
   line and ran across the woodcut. Cap the measure so it breaks in two. */
.page-wrap .page-header--hero h1 {
  max-width: 16ch;
  text-wrap: balance;
}

/* The red bar down the left edge read as a rendering glitch, not a rule. */
.page-wrap .page-header-bar {
  display: none;
}

/* Let the woodcut print a little darker now that it is not tinted. */
.page-wrap .page-header--hero .page-header-bg--botanical {
  opacity: 0.4;
}

/* ===== Buttons ===== */
/* Primary is the filled red; secondary is the same red as an outline, so the
   page's main action is obvious when the two sit side by side. */
.btn-secondary,
.btn-secondary:visited {
  color: var(--rubric-red);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rubric-red);
}

.btn-secondary:hover,
.btn-secondary:visited:hover {
  color: var(--parchment-pale);
  background: var(--rubric-red);
}

/* ===== Callouts ===== */
.rule {
  border-left-color: var(--rubric-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Markdown wraps the callout text in a <p>, whose bottom margin left the box
   visibly heavier at the bottom than the top. */
.rule > :last-child {
  margin-bottom: 0;
}


/*****************************************************
VERTICAL RHYTHM
*****************************************************/
/* .container is a CSS grid, and margins between grid items never collapse,
   so every gap on the page was the sum of two unrelated margins: a heading
   sat 18px above a paragraph but 53px above a callout, and the space before
   an h2 ran anywhere from 60 to 88px depending on what preceded it.

   One rule instead: blocks space themselves with margin-bottom only, and
   headings own the space above them. Framed blocks (callouts, prompts,
   quotations, tables) get a little more air on both sides than prose does. */
:root {
  --flow: 1.5rem;          /* between paragraphs, lists, and the like */
  --flow-framed: 2rem;     /* around boxed or indented blocks */
}

/* Room under the page header and above the footer. The first paragraph was
   sitting flush against the header image. */
main > .container {
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

.container > * {
  margin-top: 0;
  margin-bottom: var(--flow);
}

.container > :is(.rule, .keypoint, .takeaways, .reminder, .prompt, .demo, .next-session, blockquote, table, details, .highlight, pre, .evidence-note) {
  margin-bottom: var(--flow-framed);
}

/* Prose above a framed block leaves only --flow, so top it up to match the
   space below. Framed after framed already has the full gap. */
.container > :is(p:not(.lead), ul, ol) + :is(.rule, .keypoint, .takeaways, .reminder, .prompt, .demo, .next-session, blockquote, table, details, .highlight, pre, .evidence-note) {
  margin-top: calc(var(--flow-framed) - var(--flow));
}

/* A paragraph that introduces a list stays with it. */
.container > p:has(+ :is(ul, ol)) {
  margin-bottom: 0.75rem;
}

.container > .lead {
  margin-bottom: 2rem;
}

.container > h2 {
  /* --space-above is what the heading adds on top of the preceding block's
     own margin-bottom, because .container is a grid and margins don't
     collapse. So the rendered gap is --flow + --space-above (3rem above an h2
     after a paragraph), and the calc() rules below keep that same total after
     framed blocks and the lede. */
  --space-above: 1.5rem;
  margin-top: var(--space-above);
  margin-bottom: 1rem;
}

.container > h3 {
  --space-above: 1rem;
  margin-top: var(--space-above);
  margin-bottom: 0.75rem;
}

.container > h4 {
  --space-above: 0.5rem;
  margin-top: var(--space-above);
  margin-bottom: 0.5rem;
}

/* A heading after a framed block or the lede would otherwise inherit their
   larger bottom margin on top of its own. */
.container > :is(.rule, .keypoint, .takeaways, .reminder, .prompt, .demo, .next-session, blockquote, table, details, .highlight, pre, .evidence-note) + :is(h2, h3, h4) {
  margin-top: calc(var(--space-above) - (var(--flow-framed) - var(--flow)));
}

.container > .lead + :is(h2, h3, h4) {
  margin-top: calc(var(--space-above) - (2rem - var(--flow)));
}

/* Whatever follows a heading belongs to it: no extra space of its own. */
.container > :is(h2, h3, h4) + * {
  margin-top: 0;
}

/* Consecutive headings (a section title straight into its first subsection)
   shouldn't open a full section gap between them. */
.container > h2 + :is(h3, h4) {
  margin-top: 0.5rem;
}

.container > hr {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

/* The rule already marks the section break; the heading after it doesn't
   need its own gap stacked on top. */
.container > hr + :is(h2, h3, h4) {
  margin-top: 0;
}

.container > :first-child {
  margin-top: 0;
}

.container > :last-child {
  margin-bottom: 0;
}


/*****************************************************
COMPONENT SPACING
*****************************************************/

/* Blockquotes carry the practice texts and the sample policy: documents a
   reader will paste, so they should read like a printed page. typography.css
   set them as 120% italic sans, 80% wide and centred, with the last
   paragraph's margin left inside the rule — long italic runs were hard to
   read and each quote ended in a band of empty space. */
.container > blockquote {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: var(--font-lede);
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1.55;
  border-left: 3px solid var(--ochre-light);
}

.container > blockquote > :last-child {
  margin-bottom: 0;
}

.container > blockquote p {
  margin-bottom: 0.9rem;
}

/* Session cards: the title was forced to capitals, which Garamond doesn't
   wear well at this size. */
.toc-row h3 {
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: none;
  margin-bottom: 0.35rem;
}

.toc-kicker + h3 {
  margin-top: 0.2rem;
}

/* Header text on the content column. page-header.css insets the title a
   fixed 5–8rem from the viewport edge, so on a wide screen "About" sat
   150px left of the paragraph below it. Line the two up instead: same
   width and centring as .container's content track. Phones keep the
   stylesheet's own padding. */
@media (min-width: 769px) {
  .page-wrap .page-header .page-header-content {
    width: min(48rem, 100% - 2rem);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Session pages add a 190px + 3rem sidebar column to the grid, which moves
   the content track left of centre (see nav/scrollspy-toc.html). Follow it. */
@media (min-width: 1100px) {
  .page-wrap:has(.scrollspy-toc) .page-header .page-header-content {
    margin-left: max(1rem, (100% - (48rem + 190px + 3rem)) / 2);
  }
}

/* Phones: the same edge as the text below, which .container sets at 1rem. */
@media (max-width: 768px) {
  .page-wrap .page-header .page-header-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}