@charset "UTF-8";

/* The home page shares one persistent sky; each chapter sits in front of it. */
.home-page {
  /* Share the header height with the content clipping boundary. */
  --header-unit: clamp(1px, min(calc(100vw / 1500), calc(100svh / 960)), 1.3px);
  --header-height: calc(80 * var(--header-unit));
  --chapter-signal: light-dark(#f06446, #f06446);
  --chapter-accent: var(--chapter-signal);
  --chapter-line: light-dark(#20202024, #d1d1d124);
  --chapter-panel: light-dark(rgb(234 235 237 / 88%), rgb(12 14 17 / 88%));
  /* A faint hairline, a top highlight and two registration corners give each
     surface an edge without drawing a frame around it. */
  --chapter-panel-tick: light-dark(rgb(25 31 36 / 34%), rgb(205 213 220 / 34%));
  --chapter-panel-frame:
    linear-gradient(var(--chapter-panel-tick) 0 0) left top / 14px 1px no-repeat,
    linear-gradient(var(--chapter-panel-tick) 0 0) left top / 1px 14px no-repeat,
    linear-gradient(var(--chapter-panel-tick) 0 0) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--chapter-panel-tick) 0 0) right bottom / 1px 14px no-repeat;
  --chapter-panel-shadow: inset 0 0 0 1px light-dark(rgb(15 20 24 / 5%), rgb(222 228 234 / 5%)), inset 0 1px 0 light-dark(rgb(9 11 14 / 4%), rgb(236 240 244 / 4%)), 0 9px 20px light-dark(rgb(0 0 0 / 10.8%), rgb(0 0 0 / 24%)), 0 0 9px light-dark(rgb(0 0 0 / 6.3%), rgb(0 0 0 / 14%));
  --chapter-mono: "Consolas", "SFMono-Regular", monospace;
  --chapter-text: light-dark(#0e1012, #e6e9ec);
  --chapter-muted: light-dark(#3e444b, #9da5ad);
  --chapter-rule: light-dark(rgb(24 28 32 / 18%), rgb(210 216 222 / 18%));
  --chapter-width: 78vw;
  --chapter-start: calc((100vw - var(--chapter-width)) / 2);
  --chapter-gap: 32px;
  /* Keep both dimensions proportional to the viewport, including when zoomed out. */
  --chapter-inset-top: max(100px, 14svh);
  --chapter-inset-bottom: max(126px, 17svh);
  --chapter-content-height: max(0px, calc(100svh - var(--chapter-inset-top) - var(--chapter-inset-bottom)));
}
.home-page .hero-stage {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 58%, light-dark(#c6d1da16, #14232e16), transparent 48%), var(--space);
}
html[data-black-hole-style="ink"] .home-page .hero-stage { background: light-dark(#f4f4f4, #080808); }
html.has-chapters {
  --chapter-progress: 0;
  --site-progress: 0;
  scroll-behavior: auto;
  scroll-padding-top: 0;
  overflow-anchor: none;
}
html.has-chapters .home-page .hero {
  --hero-height: 100svh;
  height: 100svh;
  min-height: 100svh;
  max-height: none;
  isolation: auto;
  overflow: visible;
  background: none;
}
html.has-chapters .home-page .hero::before { content: none; }
html.has-chapters .home-page .hero-stage {
  position: fixed;
  height: 100svh;
  z-index: 0;
}
html.has-chapters .home-page .black-hole-fallback {
  transform: translate(
    calc(var(--fallback-shift-x, 0px) * var(--chapter-progress, 0)),
    calc(var(--fallback-shift-y, 0px) * var(--chapter-progress, 0))
  ) rotate(calc(18deg * var(--chapter-progress, 0)))
    scale(calc(1 - var(--chapter-progress, 0) * 0.66));
  /* Like the live disk, chapters keep the hero's light; only the entrance
     accent adds a brief glow. */
  filter: drop-shadow(0 0 calc(10px * var(--chapter-entrance-glow, 0)) light-dark(rgb(24 24 22 / calc(0.08 * var(--chapter-entrance-glow, 0))), rgb(220 220 216 / calc(0.08 * var(--chapter-entrance-glow, 0)))));
}
html.has-chapters .home-page .hero-heading,
html.has-chapters .home-page .space-grid {
  opacity: clamp(0, calc(1 - var(--chapter-progress, 0) * 1.8), 1);
}
html.has-chapters.is-content .home-page .hero-heading { pointer-events: none; }

.home-page .site-header {
  --red: var(--chapter-signal);
  --header-control-size: calc(44 * var(--header-unit));
  --header-search-width: calc(300 * var(--header-unit));
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: 5.5%;
  gap: calc(24 * var(--header-unit));
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-page .site-header .site-brand { min-width: 44px; min-height: calc(46 * var(--header-unit)); gap: calc(11 * var(--header-unit)); }
.home-page .site-header .brand-logo { width: calc(46 * var(--header-unit)); height: calc(46 * var(--header-unit)); }
.home-page .header-brand-coordinate { display: grid; gap: calc(5 * var(--header-unit)); color: light-dark(#55555d, #8e8e97); font-family: "Consolas", "SFMono-Regular", monospace; font-size: min(10.5px, calc(9 * var(--header-unit))); line-height: 1; letter-spacing: 0.08em; white-space: nowrap; }
.home-page .header-brand-name { display: flex; align-items: center; gap: calc(8 * var(--header-unit)); font-family: var(--ui-sans); font-size: calc(14 * var(--header-unit)); letter-spacing: 0.12em; }
.home-page .header-brand-name > span:first-child { color: light-dark(#161619, #dedee3); font-weight: 600; }
.home-page .header-brand-slash { color: var(--chapter-signal); font-size: calc(11 * var(--header-unit)); letter-spacing: 0; opacity: 0.55; }
.home-page .header-brand-kind { color: light-dark(#404048, #a6a6af); font-size: calc(10.5 * var(--header-unit)); letter-spacing: 0.15em; }
.home-page .header-brand-calibration { position: relative; display: block; height: 3px; background: linear-gradient(light-dark(#48484e3d, #9d9da33d), light-dark(#48484e3d, #9d9da33d)) left 1px / 100% 1px no-repeat; }
.home-page .header-brand-calibration::before { content: ""; position: absolute; top: 1px; left: 0; width: calc(10 * var(--header-unit)); height: 1px; background: var(--chapter-signal); opacity: 0.8; transition: width 240ms ease, opacity 240ms ease; }
.home-page .header-brand-calibration::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 3px; background: light-dark(#48484e6b, #9d9da36b); }
.home-page .site-header .site-brand:is(:hover, :focus-visible) .header-brand-calibration::before { width: calc(18 * var(--header-unit)); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .home-page .header-brand-calibration::before { transition: none; }
}
.home-page .header-tools { --header-search-reserved: calc(156 * var(--header-unit)); display: flex; flex: 1; align-items: center; justify-content: flex-end; min-width: 0; max-width: calc(392 * var(--header-unit)); gap: calc(20 * var(--header-unit)); margin-left: auto; }
.home-page .header-tool { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: calc(9 * var(--header-unit)); min-width: calc(72 * var(--header-unit)); min-height: var(--header-control-size); padding: calc(8 * var(--header-unit)); color: light-dark(#45454e, #a0a0aa); font-size: min(13.5px, calc(11 * var(--header-unit))); line-height: 1.3; letter-spacing: 0.05em; transition: color 180ms ease; }
.home-page .header-tool svg { flex: none; width: min(21px, calc(17 * var(--header-unit))); height: min(21px, calc(17 * var(--header-unit))); stroke: currentColor; stroke-width: 1.35; }
.home-page .header-tool[href$="feed.xml"] svg circle { fill: var(--chapter-signal); stroke: var(--chapter-signal); }
.home-page .header-tool:hover, .home-page .header-tool:focus-visible { color: var(--chapter-signal); }
.home-page .header-theme { min-width: var(--header-control-size); margin-left: 0; }
.home-page .header-search { flex: 0 0 auto; justify-content: flex-end; width: var(--header-control-size); min-width: var(--header-control-size); max-width: var(--header-search-width); height: var(--header-control-size); margin: 0 0 0 auto; padding: 0; gap: 0; overflow: hidden; border: 0; border-bottom: 1px solid transparent; background: transparent; transition: width 240ms ease, border-color 180ms ease; }
.home-page .header-search.is-expanded { width: min(var(--header-search-width), calc(100% - var(--header-search-reserved))); border-bottom-color: light-dark(#0c0c0c30, #ededed30); }
.home-page .header-search.is-expanded:focus-within { border-bottom-color: var(--chapter-signal); }
.home-page .header-search-toggle { display: inline-flex; flex: 0 0 var(--header-control-size); order: 2; align-items: center; justify-content: center; width: var(--header-control-size); min-height: var(--header-control-size); padding: 0; border: 0; background: transparent; color: light-dark(#45454e, #a0a0aa); cursor: pointer; }
.home-page .header-search-toggle svg { width: min(21px, calc(17 * var(--header-unit))); height: min(21px, calc(17 * var(--header-unit))); stroke: currentColor; stroke-width: 1.35; }
.home-page .header-search-fields { display: flex; flex: 1 1 0; order: 1; align-items: center; min-width: 0; height: var(--header-control-size); gap: calc(8 * var(--header-unit)); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.home-page .header-search.is-expanded .header-search-fields { opacity: 1; pointer-events: auto; transition-delay: 60ms; }
.home-page .header-search input { flex: 1 1 0; width: 0; min-width: 0; height: var(--header-control-size); padding: calc(10 * var(--header-unit)) 0; color: light-dark(#0c0c0c, #ededed); caret-color: var(--chapter-signal); font-size: calc(12 * var(--header-unit)); }
.home-page .header-search input::placeholder { color: light-dark(#5e5e66, #85858e); }
.home-page .header-search input:focus-visible { outline: none; }
.home-page .header-search .clear-search { flex: none; min-width: var(--header-control-size); min-height: var(--header-control-size); padding: calc(8 * var(--header-unit)) calc(4 * var(--header-unit)); color: light-dark(#45454e, #a0a0aa); font-size: calc(10 * var(--header-unit)); }
.home-page .header-search button:hover,
.home-page .header-search button:focus-visible { color: var(--chapter-signal); }
.home-page .header-search button:focus-visible { outline: 1px solid var(--chapter-signal); outline-offset: -3px; }
html.has-chapters .home-page .site-header {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms ease, visibility 360ms;
}
/* On Hero, hide the parent immediately as its local animation rules detach. */
html.has-chapters:not(.is-content) .home-page .site-header { transition: none; }
html.has-chapters.is-content .home-page .site-header {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.home-page .chapter-section {
  --red: var(--chapter-signal);
  --muted: light-dark(#4f4f52, #96969a);
  --line: light-dark(#1b1b1e24, #d7d7dc24);
  position: relative;
  z-index: 1;
  width: min(1200px, 85%);
  min-height: 100svh;
  padding-block: clamp(116px, 14svh, 160px) clamp(116px, 14svh, 160px);
  border: 0;
}
.home-page .chapter-scroll { position: relative; z-index: 1; }
html.has-chapters .home-page .chapter-viewport {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  overflow: clip;
  clip-path: inset(calc(var(--header-height) + 8px) 0 118px);
  touch-action: pan-y pinch-zoom;
}
html.has-chapters:is(.is-content, .is-chapter-entering, .is-chapter-leaving) .home-page .chapter-viewport { visibility: visible; pointer-events: auto; }
html.has-chapters .home-page .chapter-track {
  display: flex;
  gap: var(--chapter-gap);
  width: max-content;
  height: 100%;
  padding-inline: var(--chapter-start) calc(100vw - var(--chapter-width) - var(--chapter-start));
  transform: translate3d(var(--chapter-x, 0px), 0, 0);
  will-change: transform;
}
html.has-chapters .home-page .chapter-section {
  flex: 0 0 var(--chapter-width);
  width: var(--chapter-width);
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: var(--chapter-inset-top) 12px var(--chapter-inset-bottom);
  scroll-padding-block: var(--chapter-inset-top) var(--chapter-inset-bottom);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  align-content: safe center;
}
html.has-chapters .home-page .chapter-section::-webkit-scrollbar { display: none; }
/* Fitting chapters are clipped by the viewport, not their unrotated column.
   Long chapters keep their native vertical scrollport. */
html.has-chapters .home-page .chapter-section:not(.is-chapter-scrollable) { overflow: visible; }
/* Give native scrollports room for projected corners. Matching negative
   margins and padding preserve the content width, positions and rail stride. */
html.has-chapters .home-page .chapter-section {
  --chapter-bleed: max(24px, 4vw);
  flex-basis: calc(var(--chapter-slot-width, var(--chapter-width)) + 2 * var(--chapter-bleed));
  width: calc(var(--chapter-slot-width, var(--chapter-width)) + 2 * var(--chapter-bleed));
  margin-inline: calc(-1 * var(--chapter-bleed));
  padding-inline: calc(12px + var(--chapter-bleed));
  pointer-events: none;
}
/* Transparent scrollport margins must not intercept a neighboring card. */
html.has-chapters .home-page .chapter-reveal-unit { pointer-events: auto; }
@media (min-width: 721px) {
  html.has-chapters .home-page .chapter-section { --chapter-bleed: max(48px, 4vw); }
}
html.has-chapters .home-page .journal-section { justify-content: safe center; }
html.has-chapters .home-page .journal-section > * { flex-shrink: 0; }
/* Chapter anchors receive programmatic focus after navigation. */
.home-page .chapter-section:focus,
.home-page .hero:focus { outline: none; }
.home-page .chapter-panel {
  border: 0;
  border-radius: 0;
  isolation: isolate;
  background: var(--chapter-panel-frame), var(--chapter-panel);
  box-shadow: var(--chapter-panel-shadow);
}
.home-page .chapter-panel > .chapter-panel-light { display: none; }
.home-page .chapter-section .accent,
.home-page .chapter-section .eyebrow > span,
.home-page .chapter-section .text-link span { color: var(--chapter-accent); }
.home-page .chapter-section .eyebrow { font-size: 10px; letter-spacing: 0.16em; color: var(--chapter-muted); }
.home-page .chapter-section .eyebrow > span { margin-right: 14px; }
/* Chapter titles share one weight and end with the Hero's orange square. */
.home-page .chapter-section :is(.category-heading, .section-heading, .archive-heading) h2 { font-weight: 600; letter-spacing: 0.02em; }
.home-page .chapter-section h2 > .accent {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.12em;
  overflow: hidden;
  color: transparent;
  background: var(--chapter-accent);
}

.home-page .about-section {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 0.9fr);
  align-content: center;
  align-items: stretch;
  gap: 32px;
}
.home-page .about-copy {
  display: flex;
  flex-direction: column;
  min-height: max(510px, var(--chapter-content-height));
  padding: clamp(30px, 3.7vw, 54px);
}
.home-page .about-panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; }
.home-page .about-panel-top .eyebrow { margin: 0; }
.home-page .about-signal { width: 4px; height: 4px; background: var(--chapter-accent); }
.home-page .about-body { --about-avatar-size: clamp(260px, 24vw, 340px); display: grid; flex: 1; grid-template-columns: var(--about-avatar-size) minmax(0, 1fr); align-items: stretch; gap: clamp(24px, 2.2vw, 32px); }
.home-page .about-profile { display: flex; flex-direction: column; min-width: 0; }
.home-page .about-text { display: flex; flex-direction: column; min-width: 0; }
.home-page .about-text h2 { margin: 0; }
.home-page .about-avatar { display: block; flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; object-fit: contain; border-radius: 0; outline: 1px solid light-dark(#04040414, #ffffff14); outline-offset: -1px; box-shadow: 0 8px 24px light-dark(#00000011, #00000026); }
.home-page .about-socials { display: flex; flex: none; flex-direction: column; margin-top: 16px; }
.home-page .about-socials a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 2px; border-bottom: 1px solid light-dark(#1b1b1e1a, #d7d7dc1a); color: light-dark(#363b42, #a9afb7); font-size: 12px; line-height: 1.5; transition: color 180ms ease, border-color 180ms ease; }
.home-page .about-socials a > span:last-child { color: light-dark(#656e79, #6f7883); transition: color 180ms ease; }
.home-page .about-socials a:is(:hover, :focus-visible) { color: light-dark(#0c0c0c, #ededed); border-bottom-color: light-dark(#1b1b1e50, #d7d7dc50); }
.home-page .about-socials a:is(:hover, :focus-visible) > span:last-child { color: var(--chapter-accent); }
.home-page .about-copy h2 { font-size: clamp(25px, 2.9vw, 38px); line-height: 1.5; font-weight: 500; letter-spacing: -0.035em; }
.home-page .about-name { display: inline-block; margin-top: 4px; font: 900 clamp(54px, 5.6vw, 76px)/1.03 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.005em; }
.home-page .about-name .accent { margin-left: 3px; }
.home-page .about-text > .about-lead { margin: 27px 0 19px; font-size: 17px; line-height: 1.9; color: light-dark(#1c1e21, #d1d4d8); }
.home-page .about-text > p:not(.about-lead) { margin: 0 0 28px; color: light-dark(#454d56, #929ba5); font-size: 12px; line-height: 2.2; max-width: 350px; }
.home-page .about-signature { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 23px; border-top: 1px solid light-dark(#f064462b, #f064462b); }
.home-page .about-signature-mark { color: var(--chapter-accent); font-size: 16px; }
.home-page .about-signature p { margin: 0; font-size: 10px; line-height: 1.8; color: light-dark(#393f46, #a4abb3); }
.home-page .about-connections { display: flex; flex-direction: column; min-width: 0; min-height: max(510px, var(--chapter-content-height)); }
.home-page .connection-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; font-size: 10px; letter-spacing: 0.1em; color: light-dark(#3e4349, #a0a6ad); }
.home-page .connection-card { display: flex; flex: 1; flex-direction: column; position: relative; padding: 25px 27px 22px; transition: box-shadow 220ms ease, background 220ms ease; }
.home-page .connection-card + .connection-card { margin-top: 12px; }
.home-page .connection-index { display: block; font: 8px "Consolas", "SFMono-Regular", monospace; color: light-dark(#575f6a, #7e8792); letter-spacing: 0.12em; }
.home-page .connection-card h3 { margin: 15px 0 8px; font-size: 19px; line-height: 1.4; font-weight: 400; letter-spacing: 0.01em; }
.home-page .connection-card p { margin: 0; color: light-dark(#4c545e, #8a939e); font-size: 10px; line-height: 1.8; }
.home-page .connection-action { display: flex; justify-content: space-between; margin-top: auto; padding-top: 16px; color: light-dark(#2f2f32, #bcbcc0); font-size: 9px; letter-spacing: 0.05em; }
.home-page .connection-action > span { color: var(--chapter-accent); }
.home-page .rss-label { display: inline-block; margin-left: 7px; vertical-align: 2px; color: var(--chapter-accent); font: 8px "Consolas", "SFMono-Regular", monospace; letter-spacing: 0.04em; }
.home-page .connection-card:hover { background-color: light-dark(rgb(225 225 227 / 84%), rgb(20 20 22 / 84%)); box-shadow: 0 10px 22px light-dark(rgb(0 0 0 / 14.4%), rgb(0 0 0 / 32%)); }
.home-page .connection-footnote { display: flex; align-items: center; gap: 9px; margin: 17px 0 0; color: light-dark(#5c6773, #74808c); font-size: 9px; letter-spacing: 0.08em; }
.home-page .connection-footnote > span { width: 3px; height: 3px; background: var(--chapter-signal); }

.home-page .journal-section { display: flex; flex-direction: column; justify-content: center; }
.home-page .journal-section .section-heading { margin-bottom: 33px; }
.home-page .journal-section .section-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; }
.home-page .journal-layout { flex: 1 0 auto; gap: 32px; grid-template-columns: minmax(0, 3fr) minmax(230px, 0.9fr); align-items: stretch; }
.home-page .journal-main { display: flex; flex-direction: column; padding: 30px; }
.home-page .journal-main .posts-list { display: flex; flex: 1; flex-direction: column; }
.home-page .journal-main .posts-list:empty { display: none; }
.home-page .journal-empty { flex: 1; background: none; border: 0; min-height: 410px; padding: 25px 20px; }
.home-page .journal-main .search-empty { flex: 1; }
.home-page .journal-empty .empty-orbit::after { background: var(--chapter-accent); box-shadow: none; }
.home-page .chapter-section .post-category { color: light-dark(#303030, #bcbcbc); }
.home-page .chapter-section .post-title a:is(:hover, :focus-visible),
.home-page .chapter-section .archive-item a:is(:hover, :focus-visible),
.home-page .chapter-section .archive-year li a:is(:hover, :focus-visible) { color: var(--chapter-signal); }
/* Filters read like the bottom stations: white when selected, marked by a short orange rule. */
.home-page .chapter-section .filter-list { gap: 4px 24px; }
.home-page .chapter-section .filter-button { position: relative; padding: 8px 0; border: 0; color: light-dark(#485157, #8f989f); transition: color 180ms ease; }
.home-page .chapter-section .filter-button::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 14px; height: 2px; background: var(--chapter-signal); opacity: 0; transform: scaleX(0.3); transform-origin: left; transition: opacity 180ms ease, transform 200ms ease; }
.home-page .chapter-section .filter-button:hover { color: var(--chapter-text); }
.home-page .chapter-section .filter-button[aria-pressed="true"] { color: var(--chapter-text); background: none; }
.home-page .chapter-section .filter-button[aria-pressed="true"]::after { opacity: 1; transform: none; }
.home-page .chapter-section .filter-button[aria-pressed="true"] .filter-count { color: var(--chapter-signal); opacity: 1; }
.home-page .journal-sidebar { padding: 0; border: 0; display: flex; flex-direction: column; gap: 16px; }
.home-page .journal-sidebar .chapter-panel { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 27px; }
.home-page .journal-sidebar .chapter-panel > .text-link { margin-top: auto; }
.home-page .journal-sidebar .small-orbit { display: none; }
.home-page .journal-sidebar h3 { font-size: 14px; }
.home-page .journal-sidebar p:not(.eyebrow) { font-size: 11px; }
.home-page .journal-sidebar .subscribe-note { margin: 0; }
.home-page .series-section { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr); align-items: stretch; align-content: center; gap: 32px; }
.home-page .series-main { display: flex; flex-direction: column; min-height: max(510px, var(--chapter-content-height)); padding: 44px; }
.home-page .series-main h2 { font-size: clamp(28px, 2.6vw, 37px); }
.home-page .series-main > .text-link { align-self: flex-start; margin-top: 30px; }
.home-page .series-empty { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 38px; }
.home-page .series-path-mark { position: relative; display: flex; justify-content: space-between; width: 116px; height: 12px; margin-bottom: 28px; }
.home-page .series-path-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: linear-gradient(90deg, light-dark(#f0644670, #f0644670) 0 26%, light-dark(#16161630, #dedede30) 26%); }
.home-page .series-path-mark > span { position: relative; top: 3px; width: 5px; height: 5px; background: light-dark(#757579, #6e6e72); }
.home-page .series-path-mark > span:first-child { background: var(--chapter-signal); }
.home-page .series-path-mark > span:last-child { background: light-dark(#a4a4aa, #424247); }
.home-page .series-empty-label { margin: 0 0 17px; color: light-dark(#717177, #717177); font: 8px "Consolas", "SFMono-Regular", monospace; letter-spacing: 0.17em; }
.home-page .series-empty h3 { margin: 0; color: light-dark(#171718, #dddddf); font-size: 23px; font-weight: 400; }
.home-page .series-empty h3 + p { margin: 17px 0 22px; color: light-dark(#505056, #94949a); font-size: 12px; line-height: 2; }
.home-page .series-empty-status { border-top: 1px solid light-dark(#16161619, #dedede19); padding-top: 14px; color: light-dark(#7b7b81, #68686e); font-size: 10px; }
.home-page .series-guide { padding: 34px; }
.home-page .series-guide > .eyebrow { font-size: 8px; margin-bottom: 24px; }
.home-page .series-guide h3 { margin: 0; color: light-dark(#212123, #cfcfd3); font-size: 23px; font-weight: 400; line-height: 1.7; }
.home-page .series-guide-intro { margin: 18px 0 27px; color: light-dark(#58585f, #8b8b92); font-size: 11px; line-height: 2; }
.home-page .series-reading-link { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid light-dark(#16161618, #dedede18); }
.home-page .series-reading-index { color: light-dark(#7c7c84, #66666d); font: 9px "Consolas", "SFMono-Regular", monospace; }
.home-page .series-reading-link strong { display: block; color: light-dark(#2f2f34, #bcbcc3); font-size: 12px; font-weight: 400; }
.home-page .series-reading-link small { display: block; margin-top: 8px; color: light-dark(#6e6e76, #74747c); font-size: 9px; }
.home-page .series-reading-link > span:last-child { margin-left: auto; color: light-dark(#313136, #b9b9c0); font-size: 13px; }
.home-page .series-reading-link:is(:hover, :focus-visible) strong { color: light-dark(#040404, #fff); }
.home-page .series-reading-link:is(:hover, :focus-visible) > :is(.series-reading-index, span:last-child) { color: var(--chapter-signal); }
.home-page .site-footer .footer-divider { color: var(--chapter-signal); }
.home-page .archive-section { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); align-items: start; align-content: center; gap: 32px; }
html.has-chapters .home-page .archive-section { grid-template-rows: minmax(min-content, 1fr) auto; align-items: stretch; align-content: stretch; }
.home-page .archive-heading { min-height: 300px; padding: 37px; }
.home-page .archive-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; }
.home-page .archive-list { padding: 37px; min-height: 300px; }
.home-page .archive-empty { margin-top: 14px; }
.home-page .archive-empty::before { background: var(--chapter-accent); }
.home-page .site-footer { position: relative; grid-column: 1 / -1; width: 100%; margin: 20px 0 0; padding-block: 26px 0; }

/* Small internal layers move against the track, then return to their exact
   reading positions. Individual translate leaves reveal/hover transforms intact. */
@media (prefers-reduced-motion: no-preference) {
  html.has-chapters .home-page :is(.series-section, .journal-section, .archive-section) .chapter-panel :is(
    .series-path-mark, .series-empty-label, .series-reading-index, .eyebrow,
    .empty-orbit, .empty-kicker, .post-number, .post-card-meta,
    .archive-year > h3, .archive-group > h3, .archive-year time, .archive-item time,
    .archive-empty, .subscribe-note > svg
  ) {
    translate: calc(var(--chapter-parallax-x, 0px) * var(--chapter-parallax-weight, 0.4)) 0;
  }
  .home-page .chapter-panel :is(.series-path-mark, .empty-orbit) { --chapter-parallax-weight: 1; }
  .home-page .chapter-panel :is(.series-empty-label, .series-reading-index, .empty-kicker, .archive-year > h3, .archive-group > h3) { --chapter-parallax-weight: 0.5; }
  .home-page .chapter-panel :is(.post-number, .subscribe-note > svg) { --chapter-parallax-weight: 0.65; }
  /* The archive's dot, vertical rule and empty copy remain one connected unit. */
  .home-page .chapter-panel :is(.post-card-meta, .archive-year time, .archive-item time, .archive-empty) { --chapter-parallax-weight: 0.25; }
  /* Keep labels inside a focused link in place while the keyboard reader moves. */
  html.has-chapters .home-page :is(.series-section, .journal-section, .archive-section) .chapter-panel :is(
    .series-reading-link:focus-within .series-reading-index,
    .archive-year a:focus-within time, .archive-item a:focus-within time
  ) { translate: none; }
}

/* Panel surfaces stay solid. Their text retains its own staggered entrance
   and exit, independently of perspective, spacing and material. */
@media (prefers-reduced-motion: no-preference) {
  html.has-chapters .home-page .chapter-section :is(.chapter-panel, .chapter-reveal-unit) {
    --chapter-reveal-open: 1;
    --chapter-reveal-duration: 0ms;
    --chapter-reveal-stagger: 0ms;
    --chapter-reveal-reverse: 0;
  }
  html.has-chapters .home-page .chapter-reveal-unit.has-chapter-reveal {
    --chapter-reveal-duration: 560ms;
    --chapter-reveal-stagger: 70ms;
  }
  html.has-chapters .home-page .chapter-reveal-unit.has-chapter-reveal:not(.is-chapter-revealed) {
    --chapter-reveal-open: 0;
  }
  /* Text withdraws in reverse order; the panel itself stays fully assembled. */
  html.has-chapters .home-page .chapter-reveal-unit.is-chapter-departing {
    --chapter-reveal-open: 0.6;
    --chapter-reveal-duration: 300ms;
    --chapter-reveal-stagger: 35ms;
    --chapter-reveal-reverse: 1;
  }
  html.has-chapters .home-page .chapter-reveal-unit.is-chapter-closing {
    --chapter-reveal-duration: 320ms;
    --chapter-reveal-stagger: 55ms;
    --chapter-reveal-reverse: 1;
  }
  html.has-chapters .home-page .chapter-section :is(.chapter-panel, .chapter-reveal-unit) {
    transform: translate3d(var(--chapter-camera-x, 0px), var(--chapter-camera-y, 0px), 0)
      perspective(var(--chapter-perspective, 1400px))
      rotateX(var(--chapter-view-pitch, 0deg))
      rotateY(var(--chapter-view-yaw, 0deg))
      translate3d(calc(-1 * var(--chapter-camera-x, 0px) + var(--chapter-depth-x, 0px)), calc(-1 * var(--chapter-camera-y, 0px)), var(--chapter-depth-z, 0px))
      rotateY(var(--chapter-depth-yaw, 0deg))
      scaleX(var(--chapter-depth-span, 1));
    transform-origin: var(--chapter-depth-origin-x, 50%) var(--chapter-depth-origin-y, 50%);
  }
  html.has-chapters .home-page .chapter-section .chapter-panel {
    position: relative;
    opacity: 1;
    translate: none;
    scale: 1;
    transition: box-shadow 220ms ease, background-color 220ms ease;
  }
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light::before,
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light::before {
    /* Light remains local to the upper-left edge. The gradient is static;
       only its opacity follows the surface normal, without washing out copy. */
    background: radial-gradient(ellipse 42% 72% at 0% 8%,
      light-dark(rgb(13 15 17 / 4%), rgb(232 234 237 / 4%)), light-dark(rgb(13 15 17 / 1.6%), rgb(232 234 237 / 1.6%)) 30%,
      light-dark(rgb(13 15 17 / 0.3%), rgb(232 234 237 / 0.3%)) 56%, transparent 82%);
    opacity: var(--chapter-light-left, 0);
  }
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light::after {
    background: radial-gradient(ellipse 48% 88% at 100% 85%,
      light-dark(rgb(0 0 0 / 4.1%), rgb(0 0 0 / 9%)), light-dark(rgb(0 0 0 / 1.8%), rgb(0 0 0 / 4%)) 32%, transparent 82%);
    opacity: var(--chapter-light-right, 0);
  }
  /* The Hero transition changes this opacity every frame. Separate layers
     blend it on the compositor instead of repainting each whole panel. */
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel > .chapter-panel-light::before,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel > .chapter-panel-light::after {
    will-change: opacity;
  }
  html.has-chapters .home-page .chapter-section :where(
    .about-panel-top, .about-socials, .about-text > p, .about-dossier, .about-signature,
    .connection-heading, .connection-footnote, .connection-card-head, .connection-action,
    .chapter-panel h2, .chapter-panel > :is(.eyebrow, h3, p, .text-link),
    .series-empty, .series-reading-link, .journal-heading-part, .category-heading,
    .category-index, .category-composition, .category-description, .category-bottom,
    .journal-toolbar, .journal-empty, .search-empty, .posts-list > .post-card,
    .archive-year > h3, .archive-year li, .archive-group > h3, .archive-item, .site-footer
  ) {
    --chapter-layer-stage: 1;
    --chapter-layer-polarity: 1;
    --chapter-layer-delay: calc((var(--chapter-layer-stage) * (1 - var(--chapter-reveal-reverse)) + (2 - var(--chapter-layer-stage)) * var(--chapter-reveal-reverse)) * var(--chapter-reveal-stagger) + 100ms * (1 - var(--chapter-reveal-reverse)));
    --chapter-layer-opacity: var(--chapter-reveal-open);
    --chapter-layer-distance: calc(35px + var(--chapter-layer-stage) * 7.5px);
    --chapter-layer-x: calc((1 - var(--chapter-reveal-open)) * var(--chapter-layer-distance) * var(--chapter-reveal-direction, 1) * var(--chapter-layer-polarity));
    opacity: var(--chapter-layer-opacity);
    transform: translateX(var(--chapter-layer-x));
    transition-property: var(--chapter-reveal-properties, opacity, transform);
    transition-duration: var(--chapter-reveal-duration);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--chapter-layer-delay);
  }
  /* Loose copy has no panel parent to supply perspective. Keep its reveal
     slide separate so text easing never delays the scroll-driven 3D pose. */
  html.has-chapters .home-page .chapter-section .chapter-reveal-unit:not(.chapter-panel) {
    translate: var(--chapter-layer-x, 0px) 0;
    transition-property: var(--chapter-reveal-properties, opacity, translate);
  }
  html.has-chapters .home-page .chapter-section :where(
    .about-panel-top, .connection-heading, .connection-card-head, .chapter-panel h2, .chapter-panel > :is(.eyebrow, h3),
    .journal-heading-part, .category-heading, .category-index, .archive-year > h3, .archive-group > h3
  ) { --chapter-layer-stage: 0; }
  html.has-chapters .home-page .chapter-section :where(
    .about-socials, .about-text > p, .about-dossier, .about-signature, .connection-card > p,
    .connection-action, .connection-footnote, .series-empty, .series-main > .text-link,
    .series-guide-intro, .journal-sidebar .chapter-panel > :is(p:not(.eyebrow), .text-link),
    .search-empty, .archive-empty, .site-footer, .category-description, .category-bottom
  ) { --chapter-layer-stage: 2; }
  html.has-chapters .home-page .chapter-section .series-reading-link:nth-of-type(1) { --chapter-layer-stage: 0; }
  html.has-chapters .home-page .chapter-section .series-reading-link:nth-of-type(2) { --chapter-layer-stage: 1; }
  html.has-chapters .home-page .chapter-section .series-reading-link:nth-of-type(3) { --chapter-layer-stage: 2; }

  /* Selectors also cover replaced search results and appended cards without setup. */
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item) { --chapter-layer-stage: 2; }
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item):nth-child(1) { --chapter-layer-stage: 0; }
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item):nth-child(2) { --chapter-layer-stage: 0.4; }
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item):nth-child(3) { --chapter-layer-stage: 0.8; }
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item):nth-child(4) { --chapter-layer-stage: 1.2; }
  html.has-chapters .home-page .chapter-section :is(.posts-list > .post-card, .archive-year li, .archive-item):nth-child(5) { --chapter-layer-stage: 1.6; }

  /* A focused link or control stays legible even while its chapter is at an edge. */
  html.has-chapters .home-page .chapter-section :where(
    .about-panel-top, .about-socials, .about-text > p, .about-dossier, .about-signature,
    .connection-heading, .connection-footnote, .connection-card-head, .connection-action,
    .chapter-panel h2, .chapter-panel > :is(.eyebrow, h3, p, .text-link),
    .series-empty, .series-reading-link, .journal-heading-part, .category-heading,
    .category-index, .category-composition, .category-description, .category-bottom,
    .journal-toolbar, .journal-empty, .search-empty, .posts-list > .post-card,
    .archive-year > h3, .archive-year li, .archive-group > h3, .archive-item, .site-footer
  ):focus-within { --chapter-layer-opacity: 1; --chapter-layer-x: 0px; transition: none; }
  html.has-chapters .home-page .category-column:focus-visible > *,
  html.has-chapters .home-page .category-column:focus-visible .category-description { --chapter-layer-opacity: 1; --chapter-layer-x: 0px; transition: none; }
  html.has-chapters .home-page .chapter-section .connection-card:focus-visible > :is(.connection-card-head, h3, p, .connection-action) { --chapter-layer-opacity: 1; --chapter-layer-x: 0px; transition: none; }

  /* Direct jumps and Hero travel suppress time-based reveal tails. The About
     sequence below follows the reversible Hero phase instead of a second clock. */
  html.has-chapters .home-page .chapter-reveal-unit.is-chapter-immediate,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-reveal-unit {
    --chapter-reveal-properties: none;
    --chapter-reveal-duration: 0ms;
    --chapter-reveal-stagger: 0ms;
  }

  /* Assemble the About content inside its already solid, moving surfaces.
     All layers finish before docking; interruption never leaves a queued fade. */
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-section.about-section :where(
    .about-panel-top, .about-calibration, .about-portrait, .about-socials > a,
    .about-text > h2, .about-pronunciation, .about-fact, .about-preference,
    .connection-heading, .connection-footnote, .connection-card-head,
    .connection-rule, .connection-card > h3, .connection-card > p, .connection-action
  ) {
    --about-arrival-progress: clamp(0, calc((var(--chapter-visual-phase) - var(--about-arrival-start, 0.5)) / var(--about-arrival-duration, 0.28)), 1);
    --about-arrival-ease: calc(var(--about-arrival-progress) * var(--about-arrival-progress) * (3 - 2 * var(--about-arrival-progress)));
    opacity: calc(var(--about-arrival-ease) * var(--chapter-reveal-open, 1));
    translate: calc(20px * (1 - var(--about-arrival-ease))) calc(5px * (1 - var(--about-arrival-ease)));
    transition: none;
    /* Own layers keep these per-frame values on the compositor. Otherwise every
       frame repaints and re-rasterizes the whole panel, avatar included. */
    will-change: opacity, translate, scale;
  }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-section.about-section :where(
    .about-panel-top, .about-socials, .about-text > h2, .about-pronunciation,
    .about-dossier, .about-preference, .connection-card-head,
    .connection-card > h3, .connection-card > p, .connection-action
  ) { transform: none; }
  /* The two layout wrappers stay readable: only their individual rows animate. */
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-section.about-section :is(.about-socials, .about-dossier) { opacity: 1; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-section.about-section .about-portrait {
    translate: calc(28px * (1 - var(--about-arrival-ease))) 0;
    scale: calc(0.98 + 0.02 * var(--about-arrival-ease));
  }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-section.about-section :is(.about-calibration, .connection-rule) {
    translate: none;
    scale: var(--about-arrival-ease) 1;
    transform-origin: left center;
  }
  .home-page .about-section .about-panel-top { --about-arrival-start: 0.32; --about-arrival-duration: 0.24; }
  .home-page .about-section .about-calibration { --about-arrival-start: 0.34; --about-arrival-duration: 0.3; }
  .home-page .about-section .about-portrait { --about-arrival-start: 0.4; --about-arrival-duration: 0.37; }
  .home-page .about-section .about-text > h2 { --about-arrival-start: 0.45; --about-arrival-duration: 0.32; }
  .home-page .about-section .about-pronunciation { --about-arrival-start: 0.5; --about-arrival-duration: 0.32; }
  .home-page .about-section .about-fact { --about-arrival-start: 0.55; --about-arrival-duration: 0.29; }
  .home-page .about-section .about-fact:nth-child(2) { --about-arrival-start: 0.58; }
  .home-page .about-section .about-fact:nth-child(3) { --about-arrival-start: 0.61; }
  .home-page .about-section .about-fact:nth-child(4) { --about-arrival-start: 0.64; }
  .home-page .about-section .about-socials > a { --about-arrival-start: 0.64; --about-arrival-duration: 0.27; }
  .home-page .about-section .about-socials > a:nth-child(2) { --about-arrival-start: 0.68; }
  .home-page .about-section .about-preference { --about-arrival-start: 0.7; --about-arrival-duration: 0.25; }
  .home-page .about-section .connection-card { --about-arrival-lane: 0; }
  .home-page .about-section .connection-card:nth-of-type(2) { --about-arrival-lane: 0.035; }
  .home-page .about-section .connection-card:nth-of-type(3) { --about-arrival-lane: 0.07; }
  .home-page .about-section .connection-card-head { --about-arrival-start: calc(0.53 + var(--about-arrival-lane)); --about-arrival-duration: 0.2; }
  .home-page .about-section .connection-rule { --about-arrival-start: calc(0.54 + var(--about-arrival-lane)); --about-arrival-duration: 0.27; }
  .home-page .about-section .connection-card > h3 { --about-arrival-start: calc(0.57 + var(--about-arrival-lane)); --about-arrival-duration: 0.25; }
  .home-page .about-section .connection-card > p { --about-arrival-start: calc(0.61 + var(--about-arrival-lane)); --about-arrival-duration: 0.24; }
  .home-page .about-section .connection-action { --about-arrival-start: calc(0.65 + var(--about-arrival-lane)); --about-arrival-duration: 0.22; }
  .home-page .about-section .connection-heading { --about-arrival-start: 0.51; --about-arrival-duration: 0.23; }
  .home-page .about-section .connection-footnote { --about-arrival-start: 0.73; --about-arrival-duration: 0.23; }

  /* These details only pulse once the individual panel has come to rest. */
  html.has-chapters .home-page .chapter-panel.has-chapter-reveal::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 24px;
    width: min(96px, 25%);
    height: 1px;
    background: linear-gradient(90deg, transparent, light-dark(#0a0a0ab3, #f1f1f1b3) 55%, transparent);
    opacity: 0;
    pointer-events: none;
  }
  html.has-chapters .home-page .chapter-panel.has-chapter-reveal::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 24px;
    width: 25px;
    height: 5px;
    background: repeating-linear-gradient(90deg, light-dark(#1d1d1d, #d5d5d5) 0 1px, transparent 1px 12px);
    opacity: 0;
    transform-origin: right center;
    pointer-events: none;
  }

  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-track {
    translate: var(--chapter-entrance-x, 0px) 0;
  }

  /* Immediate navigation and Hero motion suppress arrival decorations. */
  html.has-chapters .home-page .chapter-panel.is-chapter-immediate::before,
  html.has-chapters .home-page .chapter-panel.is-chapter-immediate::after,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel::before,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel::after { animation: none; opacity: 0; }

  /* Once a surface settles, only its registration details acknowledge arrival. */
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating::before {
    transform-origin: left center;
    animation: chapter-settle-rule 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating::after {
    animation: chapter-settle-register 200ms ease-out 80ms;
  }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .connection-rule)::before {
    transform-origin: left center;
    animation: chapter-settle-line 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating :is(.eyebrow > span, .connection-number) {
    animation: chapter-settle-mark 180ms ease-out 60ms;
  }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .series-path-mark) > span {
    animation: chapter-settle-mark 140ms ease-out 60ms;
  }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .series-path-mark) > span:nth-child(2) { animation-delay: 100ms; }
  html.has-chapters .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .series-path-mark) > span:nth-child(3) { animation-delay: 140ms; }

  /* A new Hero journey always owns the presentation, including interrupted settles. */
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel.is-chapter-calibrating::before,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel.is-chapter-calibrating::after,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .connection-rule)::before,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel.is-chapter-calibrating :is(.eyebrow > span, .connection-number),
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-panel.is-chapter-calibrating :is(.about-calibration, .series-path-mark) > span { animation: none; }
}
@keyframes chapter-settle-rule {
  0% { opacity: 0; transform: scaleX(0.18); }
  36% { opacity: 0.65; }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes chapter-settle-register {
  0% { opacity: 0; }
  35% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes chapter-settle-line {
  0% { opacity: 0.45; transform: scaleX(0.78); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes chapter-settle-mark {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.home-page .chapter-progress { display: none; }
html.has-chapters .home-page .chapter-progress {
  --chapter-signal: light-dark(#161616, #dedede);
  --chapter-accent: var(--chapter-signal);
  --red: var(--chapter-signal);
  /* Keep the labels and major stems fixed while adjusting the ruler's height. */
  --chapter-station-base: 32px;
  /* The 1px ruler leaves 5px to each label's line box. */
  --chapter-axis-bottom: calc(var(--chapter-station-base) + 4px);
  --chapter-station-stem: 36px;
  --chapter-tick-step: 1.5625%;
  --chapter-tick-mid-step: 6.25%;
  --chapter-response-radius: clamp(52px, 5vw, 96px);
  position: fixed;
  bottom: 19px;
  left: 0;
  right: 0;
  width: 89%;
  margin-inline: auto;
  z-index: 9;
  display: block;
  height: 86px;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms ease, visibility 360ms;
}
html.has-chapters.is-content .home-page .chapter-progress { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* Wide screens cut the same cells finer, so the ticks keep the spacing of a
   1440px screen (about 20px fine and 80px middle) and stay on the stations. */
@media (min-width: 1728px) {
  html.has-chapters .home-page .chapter-progress { --chapter-tick-step: calc(100% / 96); --chapter-tick-mid-step: calc(100% / 24); }
}
@media (min-width: 2400px) {
  html.has-chapters .home-page .chapter-progress { --chapter-tick-step: calc(100% / 128); --chapter-tick-mid-step: calc(100% / 32); }
}
.home-page .chapter-progress-track { --chapter-response-x: var(--chapter-marker-x, 0px); position: absolute; z-index: 2; bottom: var(--chapter-axis-bottom); left: 0; right: 0; height: 1px; background: light-dark(#3e3e3e43, #aaaaaa43); pointer-events: none; }
.home-page .chapter-progress-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 9px; background-image: repeating-linear-gradient(90deg, light-dark(#4e4e4e2e, #9898982e) 0 1px, transparent 1px var(--chapter-tick-step)), repeating-linear-gradient(90deg, light-dark(#45454548, #a2a2a248) 0 1px, transparent 1px var(--chapter-tick-mid-step)), repeating-linear-gradient(90deg, light-dark(#34343466, #b7b7b766) 0 1px, transparent 1px 12.5%); background-size: 100% 3px, 100% 5px, 100% 8px; background-position: left bottom; background-repeat: no-repeat; }
.home-page .chapter-progress-track::after { content: ""; position: absolute; right: 0; bottom: calc(var(--chapter-station-base) - var(--chapter-axis-bottom) - 5px); width: 1px; height: calc(var(--chapter-station-stem) + 5px); background: light-dark(#70707099, #74747499); }
.home-page .chapter-progress-rail { position: absolute; inset: -19.5px 0; pointer-events: none; cursor: pointer; touch-action: none; }
/* Fixed ticks brighten and extend only near the moving point; the axis stays unfilled. */
.home-page .chapter-progress-response {
  --chapter-response-mask: linear-gradient(90deg, transparent calc(var(--chapter-response-x) - var(--chapter-response-radius)), #000 calc(var(--chapter-response-x) - 8px), #000 calc(var(--chapter-response-x) + 8px), transparent calc(var(--chapter-response-x) + var(--chapter-response-radius)));
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 11px;
  background-image: repeating-linear-gradient(90deg, light-dark(#161616bb, #dededebb) 0 1px, transparent 1px var(--chapter-tick-step)), repeating-linear-gradient(90deg, light-dark(#101010bb, #e8e8e8bb) 0 1px, transparent 1px var(--chapter-tick-mid-step)), repeating-linear-gradient(90deg, light-dark(#080808aa, #f4f4f4aa) 0 1px, transparent 1px 12.5%);
  background-size: 100% 5px, 100% 7px, 100% 10px;
  background-position: left bottom;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--chapter-response-mask);
  mask-image: var(--chapter-response-mask);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 140ms ease;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .home-page .chapter-progress-response { display: block; }
}
.home-page .chapter-progress.is-chapter-moving .chapter-progress-response { opacity: 0.8; }
.home-page .chapter-progress.is-scrubbing .chapter-progress-response,
.home-page .chapter-progress-track:focus-within .chapter-progress-response { opacity: 1; }
/* A mouse over the axis gets the same tick response at the landing point of a
   click, plus a hairline. chapters.js settles the point near chapter centers. */
.home-page .chapter-progress-rail::before {
  --chapter-hover-mask: linear-gradient(90deg, transparent calc(var(--chapter-hover-x, -999px) - var(--chapter-response-radius)), #000 calc(var(--chapter-hover-x, -999px) - 6px), #000 calc(var(--chapter-hover-x, -999px) + 6px), transparent calc(var(--chapter-hover-x, -999px) + var(--chapter-response-radius)));
  content: "";
  position: absolute;
  inset: 0;
  /* Same ticks as the response layer, anchored to the axis inside the 40px hit band. */
  background-image: linear-gradient(light-dark(#080808, #f4f4f4), light-dark(#080808, #f4f4f4)), repeating-linear-gradient(90deg, light-dark(#161616bb, #dededebb) 0 1px, transparent 1px var(--chapter-tick-step)), repeating-linear-gradient(90deg, light-dark(#101010bb, #e8e8e8bb) 0 1px, transparent 1px var(--chapter-tick-mid-step)), repeating-linear-gradient(90deg, light-dark(#080808aa, #f4f4f4aa) 0 1px, transparent 1px 12.5%);
  background-size: 1px 13px, 100% 5px, 100% 7px, 100% 10px;
  background-position: calc(var(--chapter-hover-x, -999px) - 0.5px) 50%, left 0 bottom 17.5px, left 0 bottom 17.5px, left 0 bottom 17.5px;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--chapter-hover-mask);
  mask-image: var(--chapter-hover-mask);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
/* The controller caches the ruler width; cursor motion needs no layout reads or wide overflow box. */
/* The thicker stem stays centered; the triangle sits just above the axis. */
.home-page .chapter-progress-marker { position: absolute; z-index: 1; left: 0; top: -4px; width: 2px; height: 10px; background: light-dark(#f06446, #f06446); transform: translate3d(calc(var(--chapter-marker-x, 0px) - 1px), 0, 0); will-change: transform; pointer-events: none; cursor: grab; touch-action: none; user-select: none; }
html.has-chapters.is-content:not(.is-chapter-entering):not(.is-chapter-leaving) .home-page :is(.chapter-progress-marker, .chapter-progress-rail) { pointer-events: auto; }
.home-page .chapter-progress-handle { position: absolute; left: -21px; top: -17.5px; width: 44px; height: 44px; touch-action: none; }
.home-page .chapter-progress-marker:focus-visible { outline: none; }
.home-page .chapter-progress-marker:focus-visible:not(.is-pointer-focused) .chapter-progress-handle { outline: 1px solid light-dark(#26262680, #c9c9c980); outline-offset: -5px; }
.home-page .chapter-progress.is-scrubbing { user-select: none; }
.home-page .chapter-progress.is-scrubbing .chapter-progress-marker { cursor: grabbing; }
.home-page .chapter-progress-marker::before { content: ""; position: absolute; top: -4.5px; left: -4.5px; width: 11px; height: 6px; background: light-dark(#090909, #f2f2f2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.home-page .chapter-progress-marker::after { content: ""; position: absolute; left: 1px; top: 4.5px; width: 32px; height: 18px; background: radial-gradient(ellipse, light-dark(#0c0c0c40, #eeeeee40) 0, light-dark(#1a1a1a14, #d9d9d914) 32%, transparent 72%); opacity: 0; transform: translate(-50%, -50%); transition: opacity 180ms ease; pointer-events: none; }
.home-page .chapter-progress.is-chapter-moving .chapter-progress-marker::after,
.home-page .chapter-progress.is-scrubbing .chapter-progress-marker::after,
.home-page .chapter-progress-marker:is(:hover, :focus-visible)::after,
.home-page .chapter-progress-marker.is-arriving::after { opacity: 1; }
.home-page .chapter-progress-scan { position: absolute; left: calc(var(--chapter-active-index, 0) * 25%); bottom: -2px; width: 25%; height: 7px; color: transparent; background-image: linear-gradient(currentColor, currentColor); background-size: 1px 5px; background-position: 25% 100%; background-repeat: no-repeat; opacity: 0; pointer-events: none; }
.home-page .chapter-progress-scan::before,
.home-page .chapter-progress-scan::after { content: ""; position: absolute; bottom: 0; width: 1px; color: transparent; background: currentColor; box-shadow: 0 0 3px currentColor; }
.home-page .chapter-progress-scan::before { left: 50%; height: 7px; }
.home-page .chapter-progress-scan::after { left: 75%; height: 5px; }
.home-page .chapter-progress-links { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-page .chapter-progress-links a { position: relative; display: block; min-width: 0; color: light-dark(#656565, #7f7f7f); transition: color 160ms ease; }
.home-page .chapter-progress-links a::before { content: ""; position: absolute; left: 0; bottom: calc(var(--chapter-station-base) - 5px); width: 1px; height: calc(var(--chapter-station-stem) + 5px); background: currentColor; opacity: 0.6; transition: opacity 180ms ease; }
/* The current chapter's whole axis segment lights up, from its stem to the next one. */
.home-page .chapter-progress-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--chapter-axis-bottom); height: 1px; background: light-dark(#090909, #f3f3f3); opacity: 0; transform-origin: left; transition: opacity 180ms ease; }
.home-page .chapter-station-index { position: absolute; top: 1px; left: 15px; font: 8px "Consolas", "SFMono-Regular", monospace; color: light-dark(#797979, #6b6b6b); letter-spacing: 0.06em; }
.home-page .chapter-station-title { position: absolute; left: 15px; bottom: calc(var(--chapter-station-base) + 10px); font-size: 15px; line-height: 1.5; font-weight: 400; letter-spacing: 0.06em; transition: color 160ms ease; }
.home-page .chapter-station-subtitle { position: absolute; left: 15px; top: calc(100% - var(--chapter-station-base) + 1px); font: 8px "Consolas", "SFMono-Regular", monospace; letter-spacing: 0.13em; color: light-dark(#6a6a6a, #7a7a7a); white-space: nowrap; }
/* Keep the labels clickable above the rail without lifting their whole grid cells. */
.home-page :is(.chapter-station-index, .chapter-station-title, .chapter-station-subtitle) { z-index: 3; }
.home-page .chapter-progress-links a[aria-current],
.home-page .chapter-progress-links a.is-active { color: light-dark(#090909, #f3f3f3); }
.home-page .chapter-progress-links a[aria-current]::before,
.home-page .chapter-progress-links a.is-active::before { opacity: 0.8; }
.home-page .chapter-progress-links a[aria-current]::after,
.home-page .chapter-progress-links a.is-active::after { opacity: 0.5; }
.home-page .chapter-progress-links a[aria-current] .chapter-station-index,
.home-page .chapter-progress-links a.is-active .chapter-station-index { color: var(--chapter-signal); }
.home-page .chapter-progress-links a[aria-current] .chapter-station-subtitle,
.home-page .chapter-progress-links a.is-active .chapter-station-subtitle { color: light-dark(#424242, #a5a5a5); }
.home-page .chapter-progress-links a:focus-visible { outline: 1px solid light-dark(#434343, #a4a4a4); outline-offset: 4px; }
.home-page .chapter-progress-links a:not([aria-current]):not(.is-active):focus-visible .chapter-station-title { color: light-dark(#292929, #c5c5c5); }
.home-page .chapter-progress-links a:not([aria-current]):not(.is-active):focus-visible::after { opacity: 0.2; }
.home-page .chapter-progress-links a.is-arriving::after { animation: chapter-line-arrive 380ms ease-out; }
/* The crossed stem hands the light over: the new segment grows out of it while
   the old one retracts into it, mirrored when the cursor travels left. */
.home-page .chapter-progress-links a.is-departing::after { transform: scaleX(0); transform-origin: right; transition: opacity 220ms ease, transform 240ms ease; }
.home-page .chapter-progress.is-moving-back .chapter-progress-links a:is([aria-current], .is-active)::after { transform-origin: right; }
.home-page .chapter-progress.is-moving-back .chapter-progress-links a.is-departing::after { transform-origin: left; }
.home-page .chapter-progress-links a.is-arriving .chapter-station-title { animation: chapter-title-arrive 380ms ease-out; }

@media (hover: hover) {
  .home-page .chapter-progress-track:has(.chapter-progress-marker:hover) .chapter-progress-response { opacity: 1; }
  /* The ruler moves with fractional parallax offsets, which spread the 1px hairline
     across device pixels on dense screens; a stronger layer keeps it readable. */
  .home-page .chapter-progress:not(.is-scrubbing) .chapter-progress-rail:hover::before { opacity: 0.85; }
  .home-page .chapter-progress-links a:not([aria-current]):not(.is-active):hover .chapter-station-title { color: light-dark(#292929, #c5c5c5); }
  /* Kept apart: a browser without :has() drops only this rule, not the label hover above. */
  .home-page .chapter-progress:not(.is-scrubbing):has(.chapter-progress-rail:hover) .chapter-progress-links a.is-rail-target:not([aria-current]):not(.is-active) .chapter-station-title { color: light-dark(#292929, #c5c5c5); }
  .home-page .chapter-progress-links a:not([aria-current]):not(.is-active):hover::after { opacity: 0.2; }
}
@keyframes chapter-line-arrive {
  from { opacity: 0.15; transform: scaleX(0); }
  to { opacity: 0.5; transform: none; }
}
@keyframes chapter-title-arrive {
  from { color: light-dark(#353535, #b5b5b5); }
  to { color: light-dark(#090909, #f3f3f3); }
}
@keyframes chapter-marker-breathe {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.52; }
}
/* Three staggered ticks light for 0.76s altogether, then rest until the next 9s cycle. */
@keyframes chapter-tick-scan {
  0%, 91.1%, 95.1%, 100% { color: transparent; }
  92.2% { color: light-dark(#26262699, #c8c8c899); }
  93.1% { color: light-dark(#0b0b0bbf, #efefefbf); }
}
@media (prefers-reduced-motion: no-preference) {
  html.has-chapters.is-content:not(.is-chapter-entering):not(.is-chapter-leaving) .home-page .chapter-progress.is-chapter-idle:not(.is-chapter-moving):not(.is-scrubbing) .chapter-progress-marker:not(.is-arriving):not(:hover):not(:focus-visible)::after { animation: chapter-marker-breathe 4s ease-in-out infinite; transition: none; }
  html.has-chapters.is-content:not(.is-chapter-entering):not(.is-chapter-leaving) .home-page .chapter-progress.is-chapter-idle:not(.is-chapter-moving):not(.is-scrubbing) .chapter-progress-scan { opacity: 1; animation: chapter-tick-scan 9s linear infinite; }
  html.has-chapters.is-content:not(.is-chapter-entering):not(.is-chapter-leaving) .home-page .chapter-progress.is-chapter-idle:not(.is-chapter-moving):not(.is-scrubbing) .chapter-progress-scan::before { animation: chapter-tick-scan 9s linear 200ms infinite; }
  html.has-chapters.is-content:not(.is-chapter-entering):not(.is-chapter-leaving) .home-page .chapter-progress.is-chapter-idle:not(.is-chapter-moving):not(.is-scrubbing) .chapter-progress-scan::after { animation: chapter-tick-scan 9s linear 400ms infinite; }
}

/* One shared phase owns the hero boundary; removing its class restores the exact static layout. */
html.has-chapters.is-chapter-entering { --chapter-visual-phase: var(--chapter-transition-phase, 0); }
html.has-chapters.is-chapter-leaving { --chapter-visual-phase: calc(1 - var(--chapter-transition-phase, 0)); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) {
  --chapter-title-out: clamp(0, calc(var(--chapter-visual-phase) / 0.34), 1);
  --chapter-clock-out: clamp(0, calc((var(--chapter-visual-phase) - 0.08) / 0.34), 1);
  --chapter-bottom-out: clamp(0, calc((var(--chapter-visual-phase) - 0.15) / 0.34), 1);
  --chapter-grid-out: clamp(0, calc(var(--chapter-visual-phase) / 0.5), 1);
  --chapter-line-in: clamp(0, calc((var(--chapter-visual-phase) - 0.38) / 0.42), 1);
  --chapter-header-in: clamp(0, calc((var(--chapter-visual-phase) - 0.34) / 0.38), 1);
  --chapter-marker-in: clamp(0, calc((var(--chapter-visual-phase) - 0.43) / 0.42), 1);
  --chapter-terminal-in: clamp(0, calc((var(--chapter-visual-phase) - 0.6) / 0.29), 1);
}
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .hero-heading { opacity: 1; pointer-events: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page #hero-title { opacity: calc(1 - var(--chapter-title-out)); translate: 0 calc(-12px * var(--chapter-title-out)); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .live-clock { filter: opacity(calc(1 - var(--chapter-clock-out))); translate: 0 calc(-12px * var(--chapter-clock-out)); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .hero-bottom { opacity: calc(1 - var(--chapter-bottom-out)); translate: 0 calc(-12px * var(--chapter-bottom-out)); pointer-events: none; }
/* Opacity, unlike filter: opacity(), fades this full-screen layer without repainting it. */
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .space-grid { opacity: calc(1 - var(--chapter-grid-out)); will-change: opacity; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-viewport { pointer-events: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page :is(.site-header, .chapter-progress) { visibility: visible; transform: none; pointer-events: none; transition: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .site-header { opacity: var(--chapter-header-in); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress { opacity: clamp(0, calc(var(--chapter-visual-phase) / 0.2), 1); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track { --chapter-response-x: calc(var(--chapter-marker-x, 0px) * var(--chapter-marker-in)); background-color: transparent; background-image: linear-gradient(90deg, light-dark(#3e3e3e43, #aaaaaa43), light-dark(#3e3e3e43, #aaaaaa43)); background-size: calc(var(--chapter-line-in) * 100%) 100%; background-repeat: no-repeat; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-response { opacity: calc(var(--chapter-marker-in) * 0.45); transition: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track::before { clip-path: inset(0 calc((1 - var(--chapter-line-in)) * 100%) 0 0); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track::after { opacity: var(--chapter-terminal-in); transform: scaleY(var(--chapter-terminal-in)); transform-origin: bottom; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a { --chapter-station-in: clamp(0, calc((var(--chapter-visual-phase) - 0.42 - var(--chapter-station-step, 0) * 0.06) / 0.29), 1); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a:nth-child(2) { --chapter-station-step: 1; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a:nth-child(3) { --chapter-station-step: 2; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a:nth-child(4) { --chapter-station-step: 3; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a { opacity: var(--chapter-station-in); translate: 0 calc(2px * (1 - var(--chapter-station-in))); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a::before { transform: scaleY(var(--chapter-station-in)); transform-origin: bottom; transition: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a:is([aria-current], .is-active)::after { transform: scaleX(var(--chapter-station-in)); transition: none; animation: none; }
/* The axis draws in from the left around the Hero, so its active segment does too in either direction. */
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress .chapter-progress-links a::after { transform-origin: left; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-station-title { transition: none; animation: none; }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-marker { transform: translate3d(calc(var(--chapter-marker-x, 0px) * var(--chapter-marker-in) - 1px), 0, 0); opacity: var(--chapter-marker-in); }
html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-marker::after { opacity: var(--chapter-entrance-glow, 0); transition: none; }

/* Header instruments follow the same reversible Hero clock as the content.
   Only the individual parts fade; their transparent parent stays fully drawn. */
@media (prefers-reduced-motion: no-preference) {
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .site-header { opacity: 1; }
  /* The loader's legacy brand animation cannot run a second entrance clock. */
  html.has-chapters .home-page .site-header .site-brand { animation: none; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .site-header :is(
    .brand-logo, .header-brand-name, .header-brand-motto, .header-brand-calibration,
    .header-search, .header-tool[href$="feed.xml"], .header-theme
  ) {
    --header-part-progress: clamp(0, calc((var(--chapter-visual-phase) - var(--header-part-start)) / var(--header-part-duration)), 1);
    --header-part-ease: calc(var(--header-part-progress) * var(--header-part-progress) * (3 - 2 * var(--header-part-progress)));
    opacity: var(--header-part-ease);
    translate: calc(var(--header-part-offset, 0px) * (1 - var(--header-part-ease))) 0;
    transition: none;
  }
  .home-page .site-header .brand-logo { --header-part-start: 0.22; --header-part-duration: 0.25; --header-part-offset: -12px; }
  .home-page .header-brand-name { --header-part-start: 0.32; --header-part-duration: 0.27; --header-part-offset: -6px; }
  .home-page .header-brand-motto { --header-part-start: 0.4; --header-part-duration: 0.27; --header-part-offset: -4px; }
  .home-page .header-brand-calibration { --header-part-start: 0.4; --header-part-duration: 0.32; }
  .home-page .header-search { --header-part-start: 0.48; --header-part-duration: 0.25; --header-part-offset: 10px; }
  .home-page .header-tool[href$="feed.xml"] { --header-part-start: 0.55; --header-part-duration: 0.25; --header-part-offset: 10px; }
  .home-page .header-theme { --header-part-start: 0.6; --header-part-duration: 0.25; --header-part-offset: 10px; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page :is(.header-brand-name, .header-brand-motto) {
    clip-path: inset(0 calc((1 - var(--header-part-ease)) * 100%) 0 0);
  }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .header-brand-calibration {
    scale: var(--header-part-ease) 1;
    transform-origin: left center;
  }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .header-brand-calibration::before {
    --header-signal-pulse: clamp(0, min(calc((var(--chapter-visual-phase) - 0.48) / 0.12), calc((0.76 - var(--chapter-visual-phase)) / 0.16)), 1);
    width: calc(10 * var(--header-unit));
    opacity: calc(0.8 + 0.2 * var(--header-signal-pulse));
    scale: calc(1 + 0.35 * var(--header-signal-pulse)) 1;
    transform-origin: left center;
    transition: none;
  }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .header-rss-arc {
    --header-arc-progress: clamp(0, calc((var(--chapter-visual-phase) - var(--header-arc-start, 0.55)) / 0.2), 1);
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--header-arc-progress));
  }
  .home-page .header-rss-arc-outer { --header-arc-start: 0.6; }
}

/* Cap wide-screen panels and center the complete chapter, including its sidebar.
   The shared start inset follows this width and keeps both gutters equal. */
@media (min-width: 1201px) and (min-aspect-ratio: 2/1) {
  :where(html.has-chapters) .home-page {
    --chapter-width: min(78vw, max(1200px, calc(var(--chapter-content-height) * 2)));
  }
}
/* Scale desktop content within both available dimensions, including tall windows.
   Keep intrinsic content heights so compact chapters can still scroll naturally. */
@media (min-width: 1201px) {
  :where(html.has-chapters) .home-page {
    --chapter-content-unit: clamp(1px, min(calc(var(--chapter-content-height) / 640), calc(var(--chapter-width) / 1200)), 1.4px);
  }
  :where(html.has-chapters) .home-page .chapter-section .eyebrow { font-size: calc(10 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .chapter-section .text-link { font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-copy { padding: calc(46 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-panel-top { margin-bottom: calc(35 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-body {
    --about-avatar-size: clamp(260px, calc(var(--chapter-content-height) * 0.53), 480px);
    grid-template-columns: minmax(0, min(var(--about-avatar-size), 50%)) minmax(0, 1fr);
    grid-template-rows: max-content;
    align-content: safe center;
    align-items: start;
    gap: calc(32 * var(--chapter-content-unit));
  }
  :where(html.has-chapters) .home-page .about-copy h2 { font-size: calc(38 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-name { font-size: calc(76 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-text > .about-lead { margin: calc(27 * var(--chapter-content-unit)) 0 calc(19 * var(--chapter-content-unit)); font-size: calc(17 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-text > p:not(.about-lead) { max-width: calc(350 * var(--chapter-content-unit)); margin-bottom: 0; font-size: clamp(13px, calc(12 * var(--chapter-content-unit)), 16px); }
  :where(html.has-chapters) .home-page .about-socials { margin-top: calc(16 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-socials a { min-height: calc(44 * var(--chapter-content-unit)); padding-block: calc(12 * var(--chapter-content-unit)); font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-signature { max-width: calc(350 * var(--chapter-content-unit)); gap: calc(14 * var(--chapter-content-unit)); margin-top: clamp(24px, calc(var(--chapter-content-height) * 0.04), 40px); padding-top: calc(23 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .about-signature p { font-size: calc(10 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .connection-heading { font-size: calc(10 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .connection-card { justify-content: center; padding: calc(25 * var(--chapter-content-unit)) calc(27 * var(--chapter-content-unit)) calc(22 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .connection-card h3 { margin: calc(15 * var(--chapter-content-unit)) 0 calc(8 * var(--chapter-content-unit)); font-size: calc(19 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .connection-card p { font-size: clamp(11px, calc(10 * var(--chapter-content-unit)), 14px); }
  :where(html.has-chapters) .home-page .connection-action { margin-top: 0; padding-top: calc(20 * var(--chapter-content-unit)); font-size: clamp(10px, calc(9 * var(--chapter-content-unit)), 13px); }
  :where(html.has-chapters) .home-page .connection-index { font-size: calc(8 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-main { padding: calc(44 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-main h2 { font-size: calc(37 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-guide { padding: calc(34 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page :is(.series-guide h3, .series-empty h3) { font-size: calc(23 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page :is(.series-empty h3 + p, .series-reading-link strong) { font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-guide-intro { font-size: calc(11 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-reading-link { gap: calc(16 * var(--chapter-content-unit)); padding-block: calc(22 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .series-reading-link small { font-size: calc(9 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-section .section-heading h2 { font-size: calc(40 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-section .section-intro { font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-main { padding: calc(30 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-empty h3 { font-size: calc(21 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .search-empty h3 { font-size: calc(19 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page :is(.journal-empty > p:not(.empty-kicker), .search-empty p) { font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .post-title { font-size: calc(23 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .post-summary { max-width: 48em; font-size: calc(13 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-sidebar .chapter-panel { padding: calc(27 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-sidebar h3 { font-size: calc(14 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .journal-sidebar p:not(.eyebrow) { font-size: calc(11 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page :is(.archive-heading, .archive-list) { padding: calc(37 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .archive-heading h2 { font-size: calc(40 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .archive-heading > p:last-child { font-size: calc(12 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page :is(.archive-empty, .archive-year li a) { font-size: calc(13 * var(--chapter-content-unit)); }
  :where(html.has-chapters) .home-page .archive-empty span { font-size: calc(11 * var(--chapter-content-unit)); }
}
@media (max-width: 1200px) {
  .home-page .about-section { grid-template-columns: 1fr; grid-auto-rows: max-content; }
  .home-page .about-copy { min-height: var(--chapter-content-height); }
  .home-page .about-connections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
  .home-page .connection-heading, .home-page .connection-footnote { grid-column: 1 / -1; }
  .home-page .connection-heading { margin-bottom: 4px; }
  .home-page .connection-card + .connection-card { margin-top: 0; }
  .home-page .connection-footnote { margin-top: 5px; }
}
@media (max-width: 1000px) {
  .home-page .chapter-section { width: 87%; }
  .home-page .about-section { gap: 32px; }
  .home-page .about-copy { padding: 32px; }
  .home-page .connection-card { padding-inline: 23px; }
  .home-page .journal-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .home-page .journal-main { padding: 23px; }
  .home-page .journal-sidebar .chapter-panel { padding: 23px; }
  .home-page .archive-heading, .home-page .archive-list { padding: 28px; }
  .home-page .series-section { grid-template-columns: minmax(0, 1.3fr) minmax(230px, 0.9fr); }
  .home-page .series-main, .home-page .series-guide { padding: 30px; }
  .home-page .chapter-station-subtitle { letter-spacing: 0.06em; font-size: 7px; }
}
@media (max-width: 720px) {
  /* The compact phone ruler ends 62px above the bottom edge; the reading area and its clip stop just above it. */
  .home-page { --header-height: 70px; --chapter-width: 84vw; --chapter-gap: 12px; --chapter-inset-top: max(90px, 14svh); --chapter-inset-bottom: max(87px, 12.5svh); }
  .home-page .site-header { padding-inline: 6%; gap: 12px; }
  .home-page .site-header .brand-logo { width: 34px; height: 34px; }
  .home-page .header-brand-coordinate { display: none; }
  .home-page .header-tools { --header-search-reserved: 126px; gap: 8px; }
  .home-page .header-tool { min-width: 66px; gap: 8px; font-size: 10px; }
  .home-page .header-tool svg { width: 16px; height: 16px; }
  .home-page .header-search input { font-size: 16px; }
  .home-page .chapter-section { width: 88%; padding-block: 99px 105px; }
  html.has-chapters .home-page .chapter-viewport { clip-path: inset(78px 0 75px); }
  html.has-chapters .home-page .chapter-section { padding-inline: calc(8px + var(--chapter-bleed)); }
  /* Keep intrinsic row heights inside the fixed-height, scrollable chapter. */
  .home-page .about-section { grid-template-columns: 1fr; grid-auto-rows: max-content; align-items: start; gap: 20px; }
  .home-page .about-copy { min-height: max(500px, var(--chapter-content-height)); padding: 30px; }
  .home-page .about-connections { display: flex; gap: 0; min-height: 0; }
  .home-page .connection-card + .connection-card { margin-top: 12px; }
  .home-page .about-panel-top { margin-bottom: 28px; }
  .home-page .about-copy h2 { font-size: 27px; }
  .home-page .about-name { font-size: 62px; }
  .home-page .about-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-page .about-profile { width: min(100%, 320px); }
  .home-page .about-text > .about-lead { margin-top: 23px; }
  .home-page .about-signature { margin-top: 27px; padding-top: 20px; }
  .home-page .connection-heading { margin-bottom: 12px; }
  .home-page .connection-card { flex: none; padding: 22px 25px; }
  .home-page .connection-card h3 { margin-top: 13px; font-size: 18px; }
  .home-page .connection-action { margin-top: auto; padding-top: 15px; }
  .home-page .connection-footnote { margin-top: 16px; }
  /* Full-width and half-width faces meet different parts of the arc. */
  .home-page .journal-layout { grid-template-columns: 1fr; gap: 32px 16px; }
  .home-page .journal-main { padding: 24px 17px; }
  /* One swipeable filter row. Buttons cover it edge to edge, without gaps or
     padding, because chapters.js leaves gestures that start on buttons native. */
  .home-page .chapter-section .filter-list {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .home-page .chapter-section .filter-list::-webkit-scrollbar { display: none; }
  .home-page .chapter-section .filter-button { flex: none; padding-inline: 0 22px; }
  .home-page .journal-empty { min-height: 340px; padding-inline: 8px; }
  .home-page .journal-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .home-page .journal-sidebar .chapter-panel { padding: 20px; }
  .home-page .journal-sidebar h3 { font-size: 13px; line-height: 1.6; }
  .home-page .journal-sidebar .text-link { font-size: 10px; gap: 10px; }
  .home-page .journal-sidebar .subscribe-note { border: 0; }
  .home-page .series-section { grid-template-columns: 1fr; grid-auto-rows: max-content; align-items: start; gap: 20px; }
  .home-page .series-main { min-height: max(570px, var(--chapter-content-height)); padding: 30px; }
  .home-page .series-main h2 { font-size: 27px; }
  .home-page .series-main > .text-link { margin-top: 26px; }
  .home-page .series-guide { padding: 30px; }
  .home-page .series-guide h3 { font-size: 22px; }
  .home-page .archive-section { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 16px; }
  html.has-chapters .home-page .archive-section { grid-template-rows: repeat(2, minmax(min-content, 1fr)) auto; }
  .home-page .archive-heading, .home-page .archive-list { min-height: 230px; padding: 28px; }
  .home-page .site-footer { margin-top: 14px; margin-bottom: 0; }
  /* Phones keep the titles, axis and cursor. Numbers and English labels would be
     too small to read, and the centered cursor would cover the active label. */
  html.has-chapters .home-page .chapter-progress { --chapter-station-base: 12px; --chapter-station-stem: 26px; --chapter-tick-step: 3.125%; --chapter-response-radius: 36px; bottom: 14px; width: 92%; height: 48px; }
  .home-page :is(.chapter-station-index, .chapter-station-subtitle) { display: none; }
  /* 15px above the station base leaves the cursor triangle clear of long titles. */
  .home-page .chapter-station-title { left: 8px; bottom: calc(var(--chapter-station-base) + 15px); font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .home-page .header-tools { --header-search-reserved: 104px; gap: 8px; }
  .home-page .header-tool { min-width: 44px; }
  .home-page .header-tool > span { display: none; }
  .home-page .header-search-fields { gap: 4px; }
}
@media (max-width: 380px) {
  .home-page .about-copy { padding: 25px; }
  .home-page .journal-sidebar { grid-template-columns: 1fr; }
}
@media (max-height: 760px) and (min-width: 721px) {
  .home-page .chapter-section { padding-block: 104px 106px; }
  .home-page .about-section { gap: 32px; }
  .home-page .about-copy { padding-block: 31px; }
  .home-page .about-panel-top { margin-bottom: 24px; }
  .home-page .about-copy h2 { font-size: 29px; }
  .home-page .about-name { font-size: 60px; }
  .home-page .about-text > .about-lead { margin-top: 19px; margin-bottom: 13px; }
  .home-page .about-signature { margin-top: 24px; padding-top: 18px; }
  .home-page .connection-card { padding-top: 19px; padding-bottom: 17px; }
  .home-page .connection-card h3 { margin-top: 11px; font-size: 17px; }
  .home-page .connection-action { padding-top: 12px; }
  .home-page .connection-footnote { margin-top: 13px; }
  .home-page .series-main { padding-block: 30px; }
  .home-page .series-empty { padding-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  html.has-chapters .home-page .chapter-section :is(.chapter-panel, .chapter-reveal-unit) { translate: none; scale: none; transform: none; }
  html.has-chapters .home-page .chapter-panel > .chapter-panel-light { display: none; }
  .home-page .connection-card,
  .home-page .header-search, .home-page .header-search-fields,
  .home-page .chapter-progress-response,
  .home-page .chapter-progress-rail::before,
  .home-page .chapter-progress-links a,
  .home-page .chapter-progress-links a::before,
  .home-page .chapter-progress-links a::after,
  .home-page .chapter-station-title,
  html.has-chapters .home-page .site-header,
  html.has-chapters .home-page .chapter-progress { transition: none; }
  .home-page .chapter-progress-links a.is-arriving::after,
  .home-page .chapter-progress-links a.is-arriving .chapter-station-title { animation: none; }
  .home-page .chapter-progress-marker::after,
  .home-page .chapter-progress-scan { display: none; }
  html.has-chapters .home-page .black-hole-fallback { filter: none; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page :is(#hero-title, .live-clock, .hero-bottom, .chapter-panel, .chapter-panel > *, .connection-heading, .connection-footnote, .journal-heading-part, .site-footer, .chapter-progress-links a) { translate: none; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track { --chapter-response-x: var(--chapter-marker-x, 0px); background-size: 100% 100%; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track::before { clip-path: none; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a::before,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-track::after,
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-links a:is([aria-current], .is-active)::after { transform: none; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .chapter-progress-marker { transform: translate3d(calc(var(--chapter-marker-x, 0px) - 1px), 0, 0); }
}