/* ---- Lou Rosenberg — editorial academic ---- */
:root {
  --ink:        #201f1d;
  --ink-soft:   #444141;
  --muted:      #605d5d;
  --rule:       #d7d3d3;
  --rule-soft:  #eae7e7;
  --paper:      #f3f2f2;
  --paper-warm: #f8f4f4;
  --paper-hero: #eae9e9;   /* warmer parchment tone for hero bands, so the
                              masthead + page title zone reads distinct
                              from the body content that follows */
  /* Subtle parchment texture layered onto hero backgrounds. SVG turbulence
     filter emulates the fiber grain of aged paper; tileable so it works at
     any hero size. Kept low-opacity so it reads as texture, not pattern. */
  --paper-hero-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.48  0 0 0 0 0.36  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --card:       #f8f4f4;
  --accent:     #1f4a7a;   /* deep academic blue */
  --accent-ink: #14325a;
  --accent-tint:#e8f0f9;
  --gold:       #4a7fb8;
  --display: "Cormorant Garamond", Garamond, Georgia, serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Lora", Georgia, serif;
  --mono:  "Lora", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Smooth-scroll for hash-link jumps (On This Page nav, footer links,
     back-to-top arrow, etc.) — respects the browser's prefers-reduced-
     motion setting automatically. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Never allow sideways panning. Off-canvas pieces (the TOC drawer) used to
   let phones drag the page left, making the whole site look off-center. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  font-size: 19px;
  line-height: 1.65;
  font-feature-settings: "kern","liga","onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Compensate for the fixed .masthead at the top of every page so the
     first-fold content sits below the nav rather than under it. Expanded
     masthead is ~110px on desktop (brand + nav on one row); when the
     viewport is too narrow to fit them side-by-side, the nav wraps to a
     second row and the masthead grows — see the narrow-viewport override
     below. */
  padding-top: 116px;
}
/* Anchor-target compensation — when a #hash link jumps to a section, land
   just below the compact sticky nav (~80px) so the heading isn't hidden. */
:target,
.chapter[id],
article[id],
section[id] {
  scroll-margin-top: 96px;
}
/* Narrow-viewport override: when the nav wraps under the brand, the
   expanded masthead grows to ~150px. Accommodate. */
@media (max-width: 960px) {
  :target, .chapter[id], article[id], section[id] { scroll-margin-top: 120px; }
}
@media (max-width: 900px) {
  /* Mobile masthead is a single slim row (~69px) — see "Mobile masthead". */
  body { padding-top: 70px; }
  :target, .chapter[id], article[id], section[id] { scroll-margin-top: 76px; }
}

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }
/* At narrower viewports the 40px gutter feels tight against the edge —
   the masthead in particular loses its left inset once the viewport
   drops below ~1100px because the fixed nav sits directly against
   the browser chrome. Bump the gutter a bit. */
@media (max-width: 1100px) {
  .wrap, .wrap-narrow { padding: 0 48px; }
}
@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 24px; }
}

/* ---------- Header / nav ---------- */
.masthead {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  /* Sticky top nav — stays visible as the user scrolls; shrinks when
     .is-compact is added by assets/nav.js past a small scroll threshold. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: box-shadow .2s ease, background .2s ease;
}
.masthead.is-compact {
  /* Slight elevation once the user has scrolled — makes the sticky bar feel
     detached from the page beneath it. */
  box-shadow: 0 4px 14px -10px rgba(45,43,43,0.25);
}
.masthead-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* Tight gap between brand and nav; when the row wraps because of a narrow
     viewport, this same gap becomes the vertical space between the two
     rows — kept small per the design brief. */
  gap: 12px 32px;
  /* Longhands only — the shorthand `padding` here used to zero out the
     .wrap's horizontal gutter, pushing the brand flush to the screen edge. */
  padding-top: 24px;
  padding-bottom: 20px;
  flex-wrap: wrap;
  transition: padding .18s ease;
}
.masthead.is-compact .masthead-inner {
  align-items: flex-end;
  padding-top: 14px;
  padding-bottom: 12px;
}
/* Desktop: the .wrap's side padding isn't needed inside the masthead row,
   and keeping it squeezes the nav onto a second line. Phones keep it. */
@media (min-width: 901px) {
  .masthead-inner { padding-left: 0; padding-right: 0; }
}
/* Menu toggle — hidden on desktop, shown on phones/small tablets */
.nav-toggle { display: none; }
.brand a {
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  transition: font-size .18s ease;
}
.masthead.is-compact .brand-name {
  font-size: 20px;
}
.brand-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  transition: font-size .18s ease, margin-top .18s ease;
}
/* Tagline stays visible in the compact state — the site's identity line
   ("English Composition · British & American Literature") is part of the
   brand, not decoration to be hidden on scroll. Shrinks slightly in sync
   with the brand name. */
.masthead.is-compact .brand-tag {
  font-size: 10px;
  margin-top: 4px;
}
nav.primary {
  display: flex;
  /* Tighter link gap + smaller type so all five nav items fit alongside
     the brand on a single row at typical desktop widths (~1180px .wrap). */
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
nav.primary a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
nav.primary a:hover { color: var(--accent); border-bottom-color: var(--accent); }
nav.primary a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Mobile masthead (≤ 900px) ----------
   One slim row: brand on the left, a "Menu" button on the right. The five
   links live in a drop-down panel that opens under the bar when tapped. */
@media (max-width: 900px) {
  .masthead-inner,
  .masthead.is-compact .masthead-inner {
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 16px;
  }
  .brand { min-width: 0; }
  .brand-name,
  .masthead.is-compact .brand-name { font-size: 19px; }
  .brand-tag,
  .masthead.is-compact .brand-tag {
    font-size: 9px;
    letter-spacing: 0.1em;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 9px 12px;
    min-height: 40px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-toggle-bars { position: relative; width: 16px; height: 10px; display: inline-block; }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after,
  .nav-toggle-bars span {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
    background: currentColor; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle-bars::before { top: 0; }
  .nav-toggle-bars span { top: 4.25px; }
  .nav-toggle-bars::after { bottom: 0; }
  .masthead.is-open .nav-toggle-bars::before { transform: translateY(4.25px) rotate(45deg); }
  .masthead.is-open .nav-toggle-bars span { opacity: 0; }
  .masthead.is-open .nav-toggle-bars::after { transform: translateY(-4.25px) rotate(-45deg); }

  /* The link panel — slides down and fades in rather than snapping open.
     visibility keeps the closed panel's links out of the tab order. */
  nav.primary {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: clip-path .38s cubic-bezier(.2,.7,.2,1), opacity .28s ease, transform .38s cubic-bezier(.2,.7,.2,1), visibility 0s linear .38s;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 24px 12px;
    background: var(--paper-warm);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 24px -16px rgba(45,43,43,0.35);
  }
  .masthead.is-open nav.primary {
    visibility: visible;
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 -40px 0); /* leave room for the drop shadow */
    pointer-events: auto;
    transition-delay: 0s;
  }
  nav.primary a {
    font-size: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .masthead.is-open nav.primary a { opacity: 1; transform: none; }
  .masthead.is-open nav.primary a:nth-child(2) { transition-delay: .04s; }
  .masthead.is-open nav.primary a:nth-child(3) { transition-delay: .08s; }
  .masthead.is-open nav.primary a:nth-child(4) { transition-delay: .12s; }
  .masthead.is-open nav.primary a:nth-child(5) { transition-delay: .16s; }
  .masthead.is-open nav.primary a:nth-child(n+6) { transition-delay: .2s; }
  nav.primary a:last-child { border-bottom: none; }
  nav.primary a.active { border-bottom-color: var(--rule-soft); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  nav.primary, nav.primary a { transition: none !important; transform: none; }
}

/* ---------- Full-bleed hero showcase (edge-to-edge slideshow above the fold) ---------- */
.hero-showcase {
  position: relative;
  width: 100%;
  height: calc(100vh - 96px); /* fill the viewport minus the masthead */
  min-height: 520px;
  max-height: 820px;
  background: #1f1c1a;
  overflow: hidden;
}
.hero-showcase-slideshow {
  position: absolute;
  inset: 0;
}
/* Within the showcase, override the default framed slideshow chrome */
.hero-showcase .slideshow { height: 100%; gap: 0; }
.hero-showcase .slideshow-frame {
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  padding: 0;
  box-shadow: none;
  background: #1f1c1a;
}
.hero-showcase .slideshow-slide { inset: 0; }
.hero-showcase .slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-showcase .slideshow-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  margin: 0;
  align-items: center;
  gap: 10px;
}
.hero-showcase .slideshow-dot {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(2px);
}
.hero-showcase .slideshow-dot:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.35);
}
.hero-showcase .slideshow-dot.is-active {
  background: #fff;
  border-color: #fff;
}
/* Pause / play toggle — matches the dots' white/translucent aesthetic */
.hero-showcase .slideshow-toggle {
  appearance: none;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(2px);
  color: #fff;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hero-showcase .slideshow-toggle:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.35);
}
.hero-showcase .slideshow-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.hero-showcase .slideshow-toggle:active { transform: scale(0.95); }
.hero-showcase .slideshow-toggle .ss-icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
  display: block;
}
/* Show pause when playing, play when paused */
.hero-showcase .slideshow-toggle .ss-icon-play  { display: none; }
.hero-showcase .slideshow-toggle .ss-icon-pause { display: block; }
.hero-showcase .slideshow-toggle.is-paused .ss-icon-play  { display: block; }
.hero-showcase .slideshow-toggle.is-paused .ss-icon-pause { display: none; }

/* Scroll cue — a pronounced animated hint that there's more below */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  color: #fff;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 1;
  transition: opacity .3s ease, transform .3s ease;
}
/* The arrow lives in a filled circular pill so it reads on any photo */
.scroll-cue-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: scrollCueBob 1.6s ease-in-out infinite;
}
/* The chevron is drawn inside the circle via a pseudo-element */
.scroll-cue-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -4px;
}
.scroll-cue:hover .scroll-cue-arrow {
  background: var(--accent-ink);
  transform: translateY(3px);
}
.scroll-cue:focus-visible {
  outline: none;
}
.scroll-cue:focus-visible .scroll-cue-arrow {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@keyframes scrollCueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
/* Fade out once the reader has scrolled past the hero */
.scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow { animation: none; }
  .scroll-cue { transition: opacity .2s ease; }
}
/* On very short viewports pull it up so it doesn't crowd the dots */
@media (max-height: 640px) {
  .scroll-cue { bottom: 56px; gap: 10px; }
  .scroll-cue-arrow { width: 38px; height: 38px; }
  .scroll-cue-arrow::before { width: 10px; height: 10px; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 800px 240px at 20% 100%, rgba(125,84,17,0.05), transparent 60%),
    var(--paper);
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero .lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0 0 40px;
}

/* ---------- Section headings ---------- */
.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.section:last-of-type { border-bottom: none; }
.section-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
h2 + .kicker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 19px;
  margin: 0 0 40px;
  max-width: 60ch;
  text-wrap: pretty;
}
h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 32px 0 8px;
  letter-spacing: -0.005em;
}

/* ---------- Prose ---------- */
.prose p { margin: 0 0 18px; max-width: 68ch; text-wrap: pretty; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; color: var(--ink-soft); }

/* Bulleted list — bookish, hanging bullets */
.prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  max-width: 68ch;
}
.prose ul > li {
  position: relative;
  padding: 0 0 18px 28px;
  text-wrap: pretty;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.prose ol {
  counter-reset: item;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  max-width: 68ch;
}
.prose ol > li {
  counter-increment: item;
  position: relative;
  padding: 0 0 18px 44px;
  text-wrap: pretty;
}
.prose ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 8px;
  border-radius: 3px;
}
.prose ul ul, .prose ol ul { margin-top: 12px; margin-bottom: 0; }

/* Pull quote / callout */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
  max-width: 60ch;
  text-wrap: balance;
}

/* Info box */
.callout {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 68ch;
}
.callout .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* ---------- Video grid ---------- */
.videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
  margin-top: 40px;
}
@media (max-width: 780px) {
  .videos { grid-template-columns: 1fr; }
}
.video-card h3 {
  margin: 16px 0 6px;
  font-size: 20px;
}
.video-card p {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Article-guide card — same 16:9 slot as .video-frame, different affordance */
.guide-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 55%, var(--accent-tint) 100%);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule);
  text-decoration: none;
  display: block;
  transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.guide-frame:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(45,43,43,0.35);
}
.guide-frame .guide-inner {
  position: absolute;
  inset: 0;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.guide-frame .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  background: rgba(255,255,255,0.6);
}
.guide-frame .badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.guide-frame .headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 22ch;
}
.guide-frame .foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.guide-frame .source {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.guide-frame .arrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-ink); }
.btn-ghost {
  color: var(--accent);
  background: transparent;
}
.btn-ghost:hover { background: var(--accent-tint); color: var(--accent-ink); }

/* ---------- Subpage tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 28px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
  min-height: 180px;
  position: relative;
}
.tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(45,43,43,0.35);
}
.tile-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.tile-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
}
.tile-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}
.tile-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 18px;
}

/* ---------- Chapter cards (home page section index) ---------- */
/* An editorial "chapter opener" for each subpage: roman numeral watermark,
   a small CSS-drawn vignette, and a hairline underline that sweeps on hover.
   A slim rail runs across the row to imply a semester-long arc. */
.chapters {
  --ch-gap: 18px;
  --ch-inset: 24px;               /* breathing room from the section edges */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ch-gap);
  margin-top: 48px;
  position: relative;
  padding: 26px var(--ch-inset) 0;
}
@media (max-width: 900px) { .chapters { --ch-inset: 12px; } }
@media (max-width: 520px) { .chapters { --ch-inset: 0px; } }
/* The row-spanning rail (the semester arc) */
.chapters::before {
  content: "";
  position: absolute;
  left: var(--ch-inset);
  right: var(--ch-inset);
  top: 10px;
  height: 1px;
  background: var(--rule);
}
/* Five tick marks aligned to each card, drawn as five 1px verticals at
   0 / 25 / 50 / 75 / 100 percent along the rail. */
.chapters::after {
  content: "";
  position: absolute;
  left: var(--ch-inset);
  right: var(--ch-inset);
  top: 6px;
  height: 9px;
  background:
    linear-gradient(to right, var(--muted) 0, var(--muted) 1px, transparent 1px) 0    0 / 20% 100% no-repeat,
    linear-gradient(to right, var(--muted) 0, var(--muted) 1px, transparent 1px) 25%  0 / 20% 100% no-repeat,
    linear-gradient(to right, var(--muted) 0, var(--muted) 1px, transparent 1px) 50%  0 / 20% 100% no-repeat,
    linear-gradient(to right, var(--muted) 0, var(--muted) 1px, transparent 1px) 75%  0 / 20% 100% no-repeat,
    linear-gradient(to right, transparent calc(100% - 1px), var(--muted) calc(100% - 1px)) 0 0 / 100% 100% no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 1100px) { .chapters { grid-template-columns: repeat(3, 1fr); } .chapters::after { display: none; } }
@media (max-width: 700px)  { .chapters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .chapters { grid-template-columns: 1fr; } .chapters::before { display: none; } }

/* Homepage chapter tiles — scoped to <a class="chapter"> inside the
   .chapters grid, so document-page <article class="chapter"> sections
   don't inherit the card visuals or hover reactions. */
a.chapter,
.chapters > .chapter {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 22px 20px 18px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  min-height: 260px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .3s ease, background .2s ease;
}
a.chapter:hover,
a.chapter:focus-visible,
.chapters > .chapter:hover,
.chapters > .chapter:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px rgba(45,43,43,0.4);
  background: #fff;
  outline: none;
}

/* Ribbon bookmark at the top edge — a slim navy strip that grows on hover */
.chapter-ribbon {
  position: absolute;
  top: 0;
  left: 26px;
  width: 22px;
  height: 0;
  background: var(--accent);
  transition: height .28s ease, background .2s ease;
}
.chapter-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.chapter:hover .chapter-ribbon,
.chapter:focus-visible .chapter-ribbon {
  height: 34px;
}

/* Big ghosted roman numeral in the corner */
.chapter-roman {
  position: absolute;
  right: 18px;
  top: 12px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 88px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.08;
  letter-spacing: -0.02em;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.chapter:hover .chapter-roman,
.chapter:focus-visible .chapter-roman {
  opacity: 0.16;
  transform: translateY(-2px);
}

/* Vignette container — a small CSS-drawn illustration in the top-left */
.chapter-vignette {
  position: relative;
  display: block;
  width: 100%;
  height: 78px;
  margin: 4px 0 16px;
}
.chapter-vignette > * { position: absolute; }

/* --- Vignette I: pen on ruled paper ---------------------------------- */
.v-paper {
  left: 6px; top: 8px;
  width: 78px; height: 82px;
  background: #fbfbf6;
  border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 -1px var(--rule-soft);
  transform: rotate(-3deg);
  transition: transform .35s ease;
}
.v-line {
  left: 14px;
  height: 1px;
  background: var(--rule);
  transform: rotate(-3deg);
  transform-origin: left center;
}
.v-line.l1 { top: 30px; width: 58px; }
.v-line.l2 { top: 42px; width: 52px; }
.v-line.l3 { top: 54px; width: 40px; }
.v-pen {
  left: 62px; top: 4px;
  width: 6px; height: 78px;
  background: linear-gradient(180deg, #b8823a 0%, #8a5b1e 55%, #14181f 55%, #14181f 100%);
  border-radius: 2px 2px 1px 1px;
  transform: rotate(28deg);
  transform-origin: 3px 100%;
  transition: transform .4s cubic-bezier(.5,.05,.2,1);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.12);
}
.v-pen::after { /* nib */
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid #14181f;
}
.chapter:hover .v-paper { transform: rotate(-1deg); }
.chapter:hover .v-pen   { transform: rotate(18deg) translateY(-2px); }

/* --- Vignette II: a stack of open pages with a red bookmark ---------- */
.v-page {
  background: #fbfbf6;
  border: 1px solid var(--rule);
  transition: transform .35s ease;
}
.v-page.p-back  { left: 14px; top: 18px; width: 68px; height: 62px; transform: rotate(-4deg); background: #f4f2ea; }
.v-page.p-mid   { left: 10px; top: 12px; width: 68px; height: 62px; transform: rotate(2deg); }
.v-page.p-front { left: 16px; top: 8px;  width: 68px; height: 62px; transform: rotate(-1deg); box-shadow: 2px 2px 0 -1px var(--rule-soft); }
.v-page.p-front::before,
.v-page.p-front::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 12px;
  height: 1px;
  background: var(--rule);
}
.v-page.p-front::before { top: 16px; }
.v-page.p-front::after  { top: 26px; right: 24px; }
.v-bookmark {
  left: 54px; top: -2px;
  width: 10px; height: 46px;
  background: #a03028;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  z-index: 2;
  transition: transform .35s ease, height .35s ease;
}
.chapter:hover .v-page.p-back  { transform: rotate(-6deg) translateX(-1px); }
.chapter:hover .v-page.p-mid   { transform: rotate(4deg); }
.chapter:hover .v-page.p-front { transform: rotate(-2deg) translateY(-2px); }
.chapter:hover .v-bookmark     { transform: translateY(-3px); height: 52px; }

/* --- Vignette III: two conversation marks + typing dots -------------- */
.v-bubble {
  border: 1.5px solid var(--accent);
  background: #fff;
  transition: transform .35s ease;
}
.v-bubble.b-a {
  left: 8px; top: 14px;
  width: 44px; height: 34px;
  border-radius: 4px 4px 4px 0;
}
.v-bubble.b-a::after {
  content: "";
  position: absolute;
  left: 4px; bottom: -8px;
  width: 8px; height: 8px;
  background: #fff;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: skewX(-20deg);
}
.v-bubble.b-b {
  left: 44px; top: 44px;
  width: 44px; height: 34px;
  border-radius: 4px 4px 0 4px;
  background: var(--accent);
}
.v-bubble.b-b::after {
  content: "";
  position: absolute;
  right: 4px; bottom: -8px;
  width: 8px; height: 8px;
  background: var(--accent);
  transform: skewX(20deg);
}
.v-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  top: 56px;
}
.v-dot.d1 { left: 54px; animation: dotBlink 1.4s ease-in-out infinite; }
.v-dot.d2 { left: 65px; animation: dotBlink 1.4s ease-in-out infinite .18s; }
.v-dot.d3 { left: 76px; animation: dotBlink 1.4s ease-in-out infinite .36s; }
@keyframes dotBlink {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}
.chapter:hover .v-bubble.b-a { transform: translate(-2px, -2px); }
.chapter:hover .v-bubble.b-b { transform: translate(2px, 2px); }

/* --- Vignette IV: diploma with wax seal and ribbon ties -------------- */
.v-diploma {
  left: 6px; top: 22px;
  width: 92px; height: 56px;
  background:
    linear-gradient(180deg, #fbfbf6 0%, #f2ede0 100%);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: inset 0 0 0 4px #fff, 3px 3px 0 -1px var(--rule-soft);
  transform: rotate(-2deg);
  transition: transform .35s ease;
}
.v-diploma::before,
.v-diploma::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 30px;
  height: 1px;
  background: var(--rule);
}
.v-diploma::before { top: 20px; }
.v-diploma::after  { top: 30px; right: 40px; }
.v-seal {
  left: 66px; top: 44px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b8382e, #7a1e17);
  box-shadow: 0 2px 6px -1px rgba(122,30,23,0.5), inset 0 0 0 2px rgba(255,255,255,0.15);
  z-index: 3;
  transition: transform .35s ease;
}
.v-seal::before {
  content: "★";
  position: absolute;
  inset: 0;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  font-family: var(--serif);
}
.v-tie {
  width: 8px; height: 18px;
  background: #a03028;
  top: 60px;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.v-tie.t1 { left: 62px; transform: rotate(-8deg); }
.v-tie.t2 { left: 74px; transform: rotate(8deg); }
.chapter:hover .v-diploma { transform: rotate(0deg) translateY(-2px); }
.chapter:hover .v-seal    { transform: rotate(-10deg) scale(1.06); }

/* --- Vignette V: stack of index cards with a tab -------------------- */
.v-card {
  width: 74px;
  height: 46px;
  background: #fbfbf6;
  border: 1px solid var(--rule);
  border-radius: 1px;
  box-shadow: 1px 1px 0 -0.5px var(--rule-soft);
  transition: transform .35s ease;
}
.v-card.c-back  { left: 4px;  top: 32px; transform: rotate(-5deg); background: #f2ede0; }
.v-card.c-mid   { left: 10px; top: 26px; transform: rotate(2deg);  background: #f7f3e8; }
.v-card.c-front { left: 16px; top: 20px; transform: rotate(-1deg); z-index: 2; }
.v-card.c-front::before,
.v-card.c-front::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 20px;
  height: 1px;
  background: var(--rule);
}
.v-card.c-front::before { top: 16px; }
.v-card.c-front::after  { top: 26px; right: 32px; }
.v-tab {
  left: 68px; top: 12px;
  width: 16px; height: 10px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  z-index: 3;
  transition: transform .35s ease;
}
.chapter:hover .v-card.c-back  { transform: rotate(-8deg) translate(-2px, 1px); }
.chapter:hover .v-card.c-mid   { transform: rotate(4deg); }
.chapter:hover .v-card.c-front { transform: rotate(-2deg) translateY(-2px); }
.chapter:hover .v-tab          { transform: translateY(-2px); }

/* --- Chapter body typography ---------------------------------------- */
.chapter-body { position: relative; z-index: 1; }
.chapter-num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 10px;
  font-weight: 600;
}
.chapter-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  text-wrap: balance;
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  padding-bottom: 3px;
  transition: background-size .4s ease;
}
.chapter:hover .chapter-title,
.chapter:focus-visible .chapter-title {
  background-size: 100% 1px;
  color: var(--accent-ink);
}
.chapter-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 8px 0 16px;
  text-wrap: pretty;
}
.chapter-cta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  transition: color .2s ease, border-color .2s ease;
}
.chapter:hover .chapter-cta,
.chapter:focus-visible .chapter-cta {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.chapter-cta .c-arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.chapter:hover .chapter-cta .c-arrow,
.chapter:focus-visible .chapter-cta .c-arrow {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .chapter, .chapter-ribbon, .chapter-roman, .chapter-title,
  .chapter-cta, .chapter-cta .c-arrow, .v-paper, .v-pen,
  .v-page, .v-bookmark, .v-bubble, .v-diploma, .v-seal,
  .v-card, .v-tab {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Subpage chapter article — content inset ----------
   The subpage <article class="chapter"> elements sit inside .wrap and had
   their content butted right against the wrap's left padding. This adds a
   generous inner inset so titles and copy breathe from the panel edge.
   Scoped to <article> so the homepage <a class="chapter"> tiles are unaffected.
*/
section.section > .wrap > article.chapter,
section.section > .wrap-narrow > article.chapter {
  padding-left: 64px;
  padding-right: 40px;
}
@media (max-width: 900px) {
  section.section > .wrap > article.chapter,
  section.section > .wrap-narrow > article.chapter {
    padding-left: 32px;
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  /* The .wrap already supplies an even 24px gutter on each side. */
  section.section > .wrap > article.chapter,
  section.section > .wrap-narrow > article.chapter,
  body .doc-grid .chapter {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Phones: equal left/right gutters on every hero (pages set 40px right). */
@media (max-width: 720px) {
  body .photo-hero .wrap,
  body .paper-hero .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
  body .photo-hero .plate,
  body .paper-hero .plate { max-width: 100%; }
}

/* ---------- Placeholder (for stubbed subpages) ---------- */
.placeholder {
  border: 1px dashed var(--rule);
  padding: 60px 40px;
  text-align: center;
  background: var(--card);
  margin: 40px 0;
}
.placeholder .label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.placeholder h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
}
.placeholder p {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Footer ---------- */
footer.site-foot {
  background: #10151d;
  color: #b8bfcc;
  padding: 56px 0 40px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.6;
}
footer.site-foot .wrap { max-width: 900px; }
footer.site-foot .foot-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid #232a37;
}
footer.site-foot .foot-links a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8cfdb;
  text-decoration: none;
  transition: color .15s ease;
}
footer.site-foot .foot-links a:hover { color: #ffffff; }
footer.site-foot .foot-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: #c8cfdb;
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #232a37;
  text-wrap: pretty;
}
footer.site-foot .foot-copy {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #8b95a6;
  line-height: 1.7;
}
footer.site-foot .foot-copy strong {
  color: #e2e7ef;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
}

/* ---------- Hero backgrounds: parchment texture ----------
   Every hero band on the site gets the same subtle paper-fiber texture
   over its warm-parchment ground color, plus a soft radial vignette to
   give the edges an aged/warmer cast. Applied to every hero variant:
   .photo-hero (split photo hero), .paper-hero (Taking Your Course &
   After the Semester), .subpage-hero (Contact & Recommendation),
   .doc-hero (older subpages). The color stays exactly the same
   flat #f2ede0; the texture rides on top at very low opacity so it
   reads as grain, not pattern. */
.photo-hero,
.paper-hero,
.subpage-hero,
.doc-hero {
  background-color: var(--paper-hero);
  background-image:
    /* soft warmer vignette at the top */
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(160, 130, 70, 0.08), transparent 60%),
    /* SVG fiber texture */
    var(--paper-hero-texture);
  background-repeat: no-repeat, repeat;
  background-size: auto, 320px 320px;
}

/* ---------- Hero photographic plate ----------
   The plate is the framed photograph that sits on the right side of the
   split hero on every chapter page. Rules are defined once here so tuning
   is centralized. Key behaviors:

   1. SIZE — clamp(320px, 34vw, 480px). Small on narrow desktops, scales
      up modestly on wide screens, capped so it never dominates the hero.
      Roughly a third of the viewport width at typical desktop sizes.

   2. POSITION — always flush to the right edge of the visible content
      area. On TOC pages the .photo-hero section has padding-right: 316px
      (from the body.has-toc site-wide rule), so `right: 16px` places the
      plate 16px inside the TOC sidebar's left edge. On non-TOC pages
      the section has no reserved gutter and `right: 24px` gives a small
      viewport gutter. The overrides below handle both.

   3. VIEWPORT-ADAPTIVE — every value uses clamps and viewport units so
      the plate morphs with the screen instead of jumping between fixed
      breakpoints.

   4. NARROW VIEWPORTS — the plate falls out of absolute positioning and
      stacks below the hero text at its natural size.
*/
.photo-hero .plate,
.paper-hero .plate {
  position: absolute;
  top: 50%;
  /* Plate is positioned relative to .wrap (which is position: relative).
     Default `right: 16px` from wrap works for non-TOC pages where the
     wrap is centered in the viewport with a natural gutter on both sides.
     On TOC pages the wrap is shrunk by the section's right-padding
     (which reserves space for the sidebar), so we override below to
     push the plate PAST the wrap's right edge into the reserved zone. */
  right: 16px;
  transform: translateY(-50%);
  /* Sized to sit tight against the right edge of the content area — the
     right edge is pinned by the `right:` value below; the width dictates
     how far LEFT the plate extends. Narrower here = plate stays compact
     on the right side of the hero instead of spilling toward center. */
  width: clamp(260px, 26vw, 420px);
  background: var(--card);
  border: 1px solid var(--rule);
  /* Extra bottom padding reserves space for the caption which sits
     INSIDE the plate (rather than dangling below it, where hero
     overflow:hidden would clip it — see .plate figcaption below).
     Sized to accommodate up to two lines of caption text. */
  padding: 12px 12px 52px;
  box-shadow: 0 20px 40px -24px rgba(45,43,43,0.35);
  margin: 0;
  z-index: 1;
}
/* TOC pages: the section has padding-right: 316px reserving space for
   the sidebar (starts at right:32px, width 260 = occupies right 292px of
   viewport). Push the plate past the wrap's right edge so it sits ~16px
   inside the sidebar's left edge, giving a small visual gutter between
   the two. Math: sidebar-left = viewport-292. Plate should end at
   viewport-292 - 16 = viewport-308. Wrap ends at viewport-316. So plate
   overshoots wrap by 8px → right: -8px. Actually a bit more for a nicer
   visual gap: right: -20px (plate ends at viewport-296, 4px from
   sidebar's shadow-region — visually flush without touching). */
body.has-toc .photo-hero .plate,
body.has-toc .paper-hero .plate {
  right: -20px;
}
.photo-hero .plate img,
.paper-hero .plate img {
  display: block;
  width: 100%;
  height: auto;
}
/* The hero grows to fit the plate: each per-page .wrap declares its own
   min-height (roughly plate width × 1.25 to accommodate portrait ratios).
   Since the plate is absolutely-positioned relative to the wrap, growing
   the wrap grows the visible hero band correspondingly. */
.photo-hero .plate figcaption,
.paper-hero .plate figcaption {
  /* Caption sits INSIDE the plate at the bottom of the reserved padding
     zone (see .plate padding-bottom above). This keeps it visible even
     when the hero has overflow:hidden — a common case that would clip
     an externally-positioned caption. */
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
/* Non-TOC pages: no TOC gutter to sit inside, so use a real viewport
   gutter of 24px. */
body:not(.has-toc) .photo-hero .plate,
body:not(.has-toc) .paper-hero .plate {
  right: 24px;
}
/* On viewports where the TOC has been hidden (≤1100px) but the split
   layout is still active (>900px), the section's padding-right is gone,
   so use the viewport gutter here too. */
@media (max-width: 1100px) {
  .photo-hero .plate,
  .paper-hero .plate {
    right: 24px;
  }
}
/* Narrow viewports: plate stacks below the hero text at natural size. */
@media (max-width: 900px) {
  .photo-hero .plate,
  .paper-hero .plate {
    position: static;
    transform: none;
    width: 100%;
    max-width: 480px;
    justify-self: start;
  }
}

/* ---------- Subpage hero ---------- */
.subpage-hero {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--rule);
}
.subpage-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 22ch;
  text-wrap: balance;
}
.subpage-hero .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.subpage-body { padding: 56px 0 80px; }

/* ---------- Utilities ---------- */
.divider {
  height: 1px;
  background: var(--rule);
  margin: 48px 0;
  border: 0;
}
.small { font-size: 15px; color: var(--muted); }

/* ---------- Float TOC (desktop) — always-visible sidebar panel ----------
   Injected by assets/float-toc.js when the page has a <script id="page-toc">.
   Styled to match the flat aside.toc boxes on course-policy.html and
   technology-policy.html, so the site's document pages share one TOC
   vocabulary. Pinned to the upper-right edge of the viewport, sticky.
*/
.float-toc {
  position: fixed;
  /* Sit below the fixed masthead. On initial page load the nav is expanded
     (~110px on desktop); after scroll it shrinks to ~80px. TOC's top
     tracks the expanded state with a small buffer so the sidebar never
     visually overlaps the nav. */
  top: 128px;
  right: 32px;
  z-index: 40;
  width: 260px;
  max-height: calc(100vh - 148px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  /* Right + bottom padding sized to leave room for the .toc-back-top
     arrow positioned in the lower-right corner. */
  padding: 22px 24px 44px;
  font-family: var(--serif);
  box-shadow: 0 8px 24px -18px rgba(45,43,43,0.25);
}

/* Reserve right-edge space on pages that host the sidebar TOC so the
   floating panel doesn't overlap main content.

   Approach: on TOC pages, add right padding directly to every full-bleed
   <section> (and the nav/footer wrappers). This shifts each section's
   inner .wrap toward the left within the section — while the section
   background itself still spans edge-to-edge of the viewport. The result:
   colored hero bands, banners, and footers stay full-width; the text
   inside them re-centers safely away from the sidebar.

   Sidebar occupies right:32px + 260px + small buffer ≈ 316px.

   Body class .has-toc is added by assets/float-toc.js. The media query
   gates by viewport width so mobile pages don't inherit a gutter.
*/
@media (min-width: 1101px) {
  body.has-toc > #site-nav,
  body.has-toc > #site-footer,
  body.has-toc > nav,
  body.has-toc > footer,
  body.has-toc > section {
    padding-right: 316px;
  }
  /* Full-bleed hero sections should extend edge-to-edge under the sidebar
     rather than losing 316px on the right. The sidebar has its own opaque
     background, so it reads cleanly floating over hero imagery. */
  body.has-toc > .hero-showcase {
    padding-right: 0;
  }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  /* Sidebar narrows to 240px on tighter widths; ease the gutter. */
  body.has-toc > #site-nav,
  body.has-toc > #site-footer,
  body.has-toc > nav,
  body.has-toc > footer,
  body.has-toc > section {
    padding-right: 284px;
  }
  body.has-toc > .hero-showcase { padding-right: 0; }
}
.float-toc.is-hidden { display: none; }

.float-toc-head {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.float-toc-list {
  list-style: none;
  counter-reset: t;
  margin: 0;
  padding: 0;
}
.float-toc-list li {
  counter-increment: t;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule);
  margin: 0;
}
.float-toc-list li:last-child { border-bottom: none; }
.float-toc-list a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}
.float-toc-list a:hover { color: var(--accent); }
.float-toc-list a.is-active { color: var(--accent); font-weight: 500; }
.float-toc-list .ft-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}
.float-toc-list .ft-title {
  text-wrap: pretty;
}

/* Back-to-top arrow — sits in the lower-right corner of both the desktop
   sidebar panel and the mobile drawer. Small, understated, in the muted
   palette; hover lifts it into the accent color. */
.toc-back-top {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.toc-back-top svg {
  width: 14px;
  height: 14px;
  display: block;
}
.toc-back-top:hover,
.toc-back-top:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--card);
  outline: none;
}
.toc-back-top:active { transform: translateY(1px); }
.toc-back-top--drawer {
  right: 18px;
  bottom: 18px;
}

/* Nudge the panel out of the way on narrower desktop viewports so it doesn't
   overlap main content. Below 1180px, the body is 1180 - padding = ~1100px
   wide centered; the panel needs room on the right side of the visible area. */
@media (max-width: 1240px) {
  .float-toc { right: 20px; width: 240px; padding: 20px 20px 42px; }
  .float-toc-list a { font-size: 14px; }
}
@media (max-width: 1100px) {
  /* On tight desktop widths, hide the sidebar and let the mobile drawer show. */
  .float-toc { display: none; }
}

/* ---------- Mobile drawer — FAB + slide-in panel + backdrop ----------
   Below 720px, JS hides .float-toc and shows the .toc-fab button. Tapping it
   opens .toc-drawer, which flies in from the right over .toc-backdrop.
*/

/* Floating action button (bottom-right) */
.toc-fab {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 60;
  display: none; /* JS toggles via .is-hidden on desktop */
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(45,43,43,0.5);
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.toc-fab:hover, .toc-fab:focus-visible {
  background: var(--accent-ink);
  outline: none;
}
.toc-fab:active { transform: translateY(1px); }
.toc-fab.is-hidden { display: none; }
.toc-fab-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 14px;
  height: 10px;
}
.toc-fab-icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.toc-fab-icon span:nth-child(1) { width: 100%; }
.toc-fab-icon span:nth-child(2) { width: 70%; }
.toc-fab-icon span:nth-child(3) { width: 85%; }
.toc-fab-label { line-height: 1; }

/* Show the FAB only on narrow viewports */
@media (max-width: 720px) {
  .toc-fab { display: inline-flex; }
}

/* Backdrop */
.toc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 37, 67, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.toc-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility 0s;
}

/* Drawer — slides in from the right */
.toc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(360px, 88vw);
  background: var(--card);
  border-left: 1px solid var(--rule);
  box-shadow: -20px 0 40px -20px rgba(45,43,43,0.45);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear .28s;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
}
.toc-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}
.toc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--rule);
}
.toc-drawer-head-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.toc-drawer-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color .12s ease, background .12s ease;
}
.toc-drawer-close:hover, .toc-drawer-close:focus-visible {
  color: var(--accent);
  background: var(--accent-tint);
  outline: none;
}
.toc-drawer-list {
  list-style: none;
  counter-reset: td;
  margin: 0;
  /* Extra bottom padding so long lists can scroll past the .toc-back-top
     button in the lower-right corner without the last item hiding under it. */
  padding: 8px 0 60px;
  overflow-y: auto;
  flex: 1;
}
.toc-drawer-list li {
  counter-increment: td;
  margin: 0;
  border-bottom: 1px dotted var(--rule);
}
.toc-drawer-list li:last-child { border-bottom: none; }
.toc-drawer-list a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 16px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: background .12s ease, color .12s ease;
}
.toc-drawer-list a:hover, .toc-drawer-list a:focus-visible {
  background: var(--accent-tint);
  color: var(--accent);
  outline: none;
}
.toc-drawer-list .td-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}
.toc-drawer-list .td-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Print — hide the TOC entirely */
@media print {
  .float-toc, .toc-fab, .toc-drawer, .toc-backdrop { display: none !important; }
}

/* ---------- Slideshow ---------- */
.slideshow {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.slideshow-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 12px;
  box-shadow: 0 20px 40px -24px rgba(45,43,43,0.35);
  overflow: hidden;
}
.slideshow-slide {
  position: absolute;
  inset: 12px;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.slideshow-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.slideshow-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Visually hide the caption but keep it in the DOM for screen readers */
.slideshow-slide figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.slideshow-dot {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.slideshow-dot:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.slideshow-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
.slideshow-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow-slide { transition: none; }
}


/* ---------- Classical retheme (October 2026) ----------
   Cormorant Garamond display over Lora text, warm paper ground, gold used
   as stroke. Buttons are outlined rather than filled. */
h1, h2, h3, h4,
.hero h1, .subpage-hero h1, .brand-name, .pullquote, .tile-title,
.chapter-title, .guide-frame .headline, .placeholder h3,
footer.site-foot .foot-copy strong {
  font-family: var(--display);
}
h1, .hero h1, .subpage-hero h1 { font-weight: 400; letter-spacing: -0.01em; }
h2 { font-weight: 500; font-size: clamp(34px, 3.8vw, 46px); }
h3 { font-weight: 600; font-size: 24px; }
.brand-name { font-weight: 600; font-size: 28px; }
.masthead.is-compact .brand-name { font-size: 22px; }
.brand-tag { text-transform: none; letter-spacing: 0.02em; font-size: 13px; font-style: italic; }
.masthead.is-compact .brand-tag { font-size: 12px; }
nav.primary a { font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
nav.primary a:hover, nav.primary a.active { border-bottom-color: var(--gold); }
.eyebrow, .section-num, .chapter-num, .tile-num, .float-toc-head, .toc-drawer-head-label { letter-spacing: 0.14em; }
.section-num, .eyebrow { color: var(--accent); }
.pullquote { font-size: 30px; border-left-color: var(--gold); }
.prose ul > li::before { background: var(--gold); }
.prose ol > li::before { background: transparent; border: 1px solid var(--gold); color: var(--accent); font-feature-settings: "tnum"; }
.callout { border-left: 0; border: 1px solid var(--gold); border-radius: 4px; background: var(--accent-tint); }
.btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--gold);
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 16px;
  font-weight: 500;
}
.btn:hover { background: var(--accent-tint); color: var(--accent-ink); }
.btn:active { background: #ffe3bf; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-ghost { border-color: var(--rule); }
.hero { background: var(--paper); }
.video-frame, .guide-frame, .tile, a.chapter { border-radius: 4px; }
.guide-frame { background: var(--card); }
.guide-frame .badge { border-color: var(--gold); background: transparent; }
.toc-fab { background: var(--card); color: var(--accent); border: 1px solid var(--gold); }
.toc-fab:hover, .toc-fab:focus-visible { background: var(--accent-tint); color: var(--accent-ink); }
.scroll-cue-arrow { background: rgba(31,28,26,.55); border-color: #f3f2f2; }
.scroll-cue:hover .scroll-cue-arrow { background: rgba(31,28,26,.8); }
.photo-hero .plate img, .paper-hero .plate img, .subpage-hero .plate img { filter: sepia(0.18) saturate(0.85) contrast(1.04); }
footer.site-foot { background: #1f1c1a; color: #d7d3d3; }
footer.site-foot .foot-links, footer.site-foot .foot-body { border-color: #3a3632; }
footer.site-foot .foot-links a:hover { color: #e1ad66; }
::selection { background: #ffe3bf; }

/* ---------- TOC groups: parts stacked like pages in a book ---------- */
.toc-group-head {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  display: grid; grid-template-columns: 30px 1fr 16px; gap: 4px; align-items: baseline;
  font-size: 15px; line-height: 1.35; transition: color .15s ease;
}
.toc-drawer-list .toc-group-head { grid-template-columns: 36px 1fr 16px; gap: 8px; padding: 16px 22px; font-size: 17px; }
.toc-group-head:hover, .toc-group.has-active > .toc-group-head { color: var(--accent); }
.toc-group-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.toc-group-head .ft-num, .toc-group-head .td-num { color: var(--accent); font-size: 11px; letter-spacing: .06em; }
.toc-group-chev { width: 14px; height: 14px; align-self: center; color: var(--muted); transition: transform .3s ease; }
.toc-group.is-open .toc-group-chev { transform: rotate(180deg); }
.toc-parts-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
.toc-group.is-open .toc-parts-wrap { grid-template-rows: 1fr; }
.toc-parts {
  overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 34px;
  display: flex; flex-direction: column;
}
.toc-drawer-list .toc-parts { padding-left: 66px; padding-right: 22px; }
.toc-parts li { margin: 0; padding: 0; border: 0 !important; }
.toc-parts li:first-child { margin-top: 10px; }
.toc-parts li:last-child { margin-bottom: 4px; }
/* each part is a "page": a thin leaf with a gold spine, stacked and slightly offset */
.toc-parts a,
.float-toc-list .toc-parts a,
.toc-drawer-list .toc-parts a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px 7px 12px;
  margin-top: -1px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  background: var(--paper-warm);
  color: var(--ink); text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.toc-parts a:hover { transform: translateX(3px); background: var(--accent-tint); }
.toc-parts a.is-active { background: var(--accent-tint); border-color: var(--gold); box-shadow: 0 4px 10px -8px rgba(45,43,43,.5); }
.toc-part-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.toc-part-title { font-size: 14px; line-height: 1.3; }
.toc-parts a.is-active .toc-part-title { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .toc-parts-wrap, .toc-group-chev, .toc-parts a { transition: none; } }

/* ---------- Subheads ----------
   Site-wide subheading style: italic display serif in the accent blue,
   between a short leading rule and a longer, fainter trailing one. Add
   class="subhead" to any subheading. The html/body prefix lets it win over
   the per-page heading rules (.chapter h3, .faq-group h3, etc.) while each
   context keeps its own margins. */
html body .subhead {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  padding: 0;
  border: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--accent);
  text-wrap: balance;
}
html body .subhead::before,
html body .subhead::after { content: ""; height: 1px; background: var(--gold); }
html body .subhead::before { flex: 0 0 36px; }
html body .subhead::after { flex: 1 1 40px; min-width: 40px; opacity: .5; }
@media (max-width: 520px) { html body .subhead { gap: 14px; } html body .subhead::before { flex-basis: 24px; } }