:root {
  --paper: #080808;
  --paper-2: #111111;
  --ink: #f3f3f3;
  --ink-soft: #9c9c9c;
  --rule: #2a2a2a;
  --accent: #f2f2f2;
  --accent-soft: #ffffff;
  --card: #101010;
  --card-hover: #181818;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, "Palatino Linotype", "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, 0.04), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.65;
  min-height: 100vh;
  /* Light text on a dark background renders heavier with subpixel smoothing. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-soft); }

.wrap {
  width: min(1080px, calc(100% - 2.4rem));
  margin: 0 auto;
}

header.site {
  padding: 1.15rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  background: rgba(8, 8, 8, 0.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 3px;
}

nav a {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 1rem;
}

nav a:hover, nav a.active { color: var(--accent); }

.hero {
  padding: 3.4rem 0 2.4rem;
  border-bottom: 1px solid var(--rule);
}

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.85rem;
}

h1 {
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.tagline {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: #bdbdbd;
  margin: -0.2rem 0 1.6rem;
}

.lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 1.4rem;
}

.meta-line {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #080808;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.65rem 1.05rem;
}

.btn:hover { color: #080808; background: var(--accent-soft); border-color: var(--accent-soft); }

.btn.ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--rule);
}

.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.point {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.15rem 1.2rem 1.2rem;
}

.point h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.point p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.after-tracks {
  margin: 1.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.95rem;
}

section { padding: 2.6rem 0; }

h2 {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}

.section-head p {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  max-width: 40rem;
}

/* Author carousel: two identical sets, the track slides by exactly one set width. */
.marquee {
  --dock-scale: 1.55; /* how much a hovered portrait grows */
  overflow: hidden;
  /* The extra top padding above is headroom for hovered portraits; pull the strip up partly
     into it to set where the portraits sit below the hero. */
  margin-top: -22px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 300s) linear infinite;
}
/* Without JavaScript, keyboard focus pauses the strip here. With it, public/marquee.js eases
   it to a stop instead: pausing in CSS on top of the script's rate change resets the strip's
   position in Chrome, which made a clicked portrait jump sideways. */
.marquee:not(.js-marquee):focus-within .marquee-track { animation-play-state: paused; }
/* Pointer hover slows the strip to a stop smoothly (public/marquee.js) and only over an
   author, not the empty room above the portraits. Without JavaScript, hovering an author
   pauses it outright. */
.marquee:not(.js-marquee) .marquee-track:has(.author:hover) { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--marquee-copies, 2))); } }
.marquee-set {
  display: flex;
  gap: 41px;
  list-style: none;
  margin: 0;
  /* Trailing space equals the gap, and every size is a whole pixel, so one set is exactly
     half the track and the -50% loop point lands on a pixel boundary: no visible jump. */
  padding: 304px 41px 30px 0; /* headroom for the hover magnification, glow and quote */
}
.marquee .author { flex: 0 0 auto; width: 173px; text-align: center; }
.marquee .author a { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.marquee .author a:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* Portraits are transparent cut-outs that float on the page: no frame, no background. */
.marquee .author img,
.marquee .initials {
  display: block;
  width: 173px;
  height: 173px;
  object-fit: contain;
  object-position: center bottom;
}
.marquee .author img { filter: grayscale(1); }
/* Authors without a portrait yet: their initials float the same way. */
.marquee .initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 2.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.marquee .name {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Quote: hidden until the author is hovered or focused, then fades in above the head. */
.marquee .author { position: relative; }
.marquee .quote {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 320px;
  transform: translate(-50%, 6px) scale(calc(1 / var(--dock-scale)));
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: var(--serif);
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 6px #080808, 0 0 14px #080808;
}
.marquee .quote q { display: block; font-style: italic; }
.marquee .quote cite {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.marquee .author:hover .quote,
.marquee .author:focus-within .quote { opacity: 1; transform: translate(-50%, 0) scale(calc(1 / var(--dock-scale))); }

/* Hover: like the Mac Dock, the hovered author grows most and its neighbours a little,
   growing up from the baseline; the portrait and name glow like the cards. */
.marquee .author {
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.marquee .author:hover,
.marquee .author:focus-within { transform: scale(var(--dock-scale)); z-index: 1; }
/* Neighbours grow less and slide outward so the enlarged portrait never overlaps them. */
.marquee .author:has(+ .author:hover),
.marquee .author:has(+ .author:focus-within) { transform: translateX(-49px) scale(1.2); }
.marquee .author:hover + .author,
.marquee .author:focus-within + .author { transform: translateX(49px) scale(1.2); }
.marquee .author:has(+ .author + .author:hover),
.marquee .author:has(+ .author + .author:focus-within) { transform: translateX(-23px) scale(1.07); }
.marquee .author:hover + .author + .author,
.marquee .author:focus-within + .author + .author { transform: translateX(23px) scale(1.07); }
.marquee .author:hover img,
.marquee .author:hover .initials,
.marquee .author:focus-within img,
.marquee .author:focus-within .initials {
  color: var(--ink);
}
/* The glow follows the figure's own outline (drop-shadow respects transparency). */
.marquee .author:hover img,
.marquee .author:focus-within img {
  filter: grayscale(0) drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.15));
}
.marquee .author:hover .initials,
.marquee .author:focus-within .initials {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 28px rgba(255, 255, 255, 0.25);
}
.marquee .author img,
.marquee .initials { transition: filter 0.4s ease, color 0.3s ease, text-shadow 0.3s ease; }
.hero-art ~ section .marquee .author:hover .name,
.marquee .author:hover .name,
.marquee .author:focus-within .name {
  color: var(--ink);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee .author, .marquee .author:hover, .marquee .author:focus-within,
  .marquee .author:has(+ .author:hover), .marquee .author:hover + .author,
  .marquee .author:has(+ .author + .author:hover), .marquee .author:hover + .author + .author { transform: none; }
  .marquee-set[aria-hidden="true"] { display: none; }
}

/* Home page background object. Fixed, behind everything, never takes part in layout. */
.hero-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-art canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Dims as the page scrolls: set every frame from the scroll position, never animated, so it
     tracks fast scrolling exactly. The 1.2s transition above is only for the first fade-in. */
  opacity: var(--hero-scroll-fade, 1);
}
.hero-art { --hero-opacity: 0.75; }
.hero-art--ready { opacity: var(--hero-opacity); }
.hero-art--static canvas { display: none; }
.hero-art--static {
  opacity: var(--hero-opacity);
  /* Same size and position as the live scene: the still fills 90% of its square with the
     diamond, the live diamond fills 62% of the viewport height, centred at 50% / 55%. */
  background: url("assets/hero-static.webp") no-repeat;
  background-size: 68.9vh 68.9vh;
  background-position: calc(50vw - 34.45vh) calc(55vh - 34.45vh);
}
@media (min-width: 721px) and (max-width: 1099px) {
  .hero-art--static {
    background-size: 57.8vh 57.8vh;
    background-position: calc(50vw - 28.9vh) calc(55vh - 28.9vh);
  }
}
@media (max-width: 720px) {
  .hero-art canvas { display: none; }
  .hero-art, .hero-art--static {
    --hero-opacity: 0.5;
    opacity: var(--hero-opacity);
    background: url("assets/hero-static.webp") no-repeat 50% 60% / min(100vw, 62vh) auto;
  }
}

/* Home page text sits over the centred diamond: a soft dark halo behind each line keeps it
   readable where it crosses a lit face. */
.hero-art ~ .hero,
.hero-art ~ section {
  text-shadow: 0 0 2px #080808, 0 0 6px #080808, 0 0 14px rgba(8, 8, 8, 0.9), 0 0 28px rgba(8, 8, 8, 0.7);
}
.hero-art ~ .hero .btn:not(.ghost) { text-shadow: none; }
/* No rule under the home hero: it cut straight across the diamond. */
.hero-art ~ .hero { border-bottom: 0; }

ul.credits { padding-left: 1.2rem; }
ul.credits .title { font-weight: 600; }

/* Track cards: rows of three, the last row centred (5 tracks = three on top, two below). */
.tracks {
  --track-gap: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--track-gap);
}

.track {
  flex: 0 1 calc((100% - 2 * var(--track-gap)) / 3);
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.15rem 1.15rem 1.05rem;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--shadow);
  /* --px / --py: the small cursor drift set by public/tracks.js */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, background-color 0.35s ease;
  will-change: transform;
}

.track:hover,
.track:focus-visible {
  background: var(--card-hover);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 6px), 0) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 22px rgba(255, 255, 255, 0.3),
    0 0 64px rgba(255, 255, 255, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.45);
  outline: none;
}

@media (max-width: 900px) {
  .track { flex-basis: calc((100% - var(--track-gap)) / 2); }
}
/* Library filter: compact track cards as toggle buttons. The selected one keeps the glow. */
.library-filter { padding: 2rem 0 0.4rem; }
.library-list { padding-top: 1.6rem; }
.track.filter-box {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.85rem 1.1rem 0.9rem;
}
.filter-box .n { display: block; }
.filter-box .name {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.track.filter-box.is-active {
  background: var(--card-hover);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 22px rgba(255, 255, 255, 0.3),
    0 0 64px rgba(255, 255, 255, 0.14);
}
.toc-track[hidden] { display: none; }

/* Home page mission: one centred card, styled and animated like the track cards. */
.track.mission-card {
  flex: 0 1 44rem;
  text-align: center;
  padding: 1.6rem 1.8rem 1.5rem;
}
.mission-card h2 { margin: 0 0 0.5rem; }
.mission-card p { margin: 0; color: var(--ink-soft); font-size: 1.12rem; }
.mission-card .more {
  white-space: nowrap;
  margin-left: 0.35rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .track { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .track, .track:hover, .track:focus-visible { transform: none; transition: box-shadow 0.35s ease, background-color 0.35s ease; }
}

.track .n {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.track h3 {
  margin: 0.35rem 0 0.35rem;
  font-size: 1.18rem;
  font-weight: 600;
}

.track p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.toc { border-top: 1px solid var(--rule); }
.toc-track { padding: 1.4rem 0 0.4rem; border-bottom: 1px solid var(--rule); }
.toc-track h2 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.toc-track h2 a { color: inherit; text-decoration: none; }
.toc-track h2 a:hover { color: var(--accent); }
.toc-track .desc { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { border-top: 1px solid var(--rule); }
.toc-list a, .toc-list .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.48rem 0;
  text-decoration: none;
  color: inherit;
}
.toc-list a:hover .title { color: var(--accent); }
.toc-list .title { font-weight: 600; }
.toc-list .who { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.topics { display: grid; gap: 1.6rem; }
.topic h3 { margin: 0 0 0.15rem; font-size: 1.12rem; }
.topic .desc { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }
.readings { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.readings li { border-bottom: 1px solid var(--rule); }
.readings a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  text-decoration: none;
  color: inherit;
}
.readings .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}
.readings a:hover .title { color: var(--accent); }
.toc-list .row .title, .readings .row .title { font-weight: 400; color: var(--ink-soft); }
.readings .title { font-weight: 600; }
.readings .who { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.level {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.35rem;
}
article.reading { max-width: 42rem; padding: 2.6rem 0 4rem; }
article.reading h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 0.2rem; }
.byline { color: var(--ink-soft); margin: 0 0 1.4rem; }
article.reading h2 { margin-top: 2rem; font-size: 1.22rem; }
article.reading p { margin: 0.85rem 0; }
article.reading ul, article.reading ol { padding-left: 1.2rem; }
article.reading li { margin: 0.3rem 0; }
.takeaways li { margin: 0.45rem 0; }
.concepts {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
  margin: 0 0 1.4rem;
}
.portrait-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.2rem;
  align-items: center;
  margin: 0 0 1.6rem;
}
.portrait-row img {
  width: 140px;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--rule);
  filter: grayscale(1);
}
.level a { color: inherit; text-decoration: none; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover, .level a:hover { text-decoration: underline; }
.guide-nav { margin-top: 3rem; border-top: 1px solid var(--rule); }
.guide-nav-row { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.guide-nav-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.guide-nav-links a:last-child { text-align: right; }
/* Guide pages: body text a touch lighter than regular, headings bold, so the headings stand apart. */
article.guide p,
article.guide li { font-weight: 360; color: #ededed; }
article.guide p.kicker,
article.guide p.byline { font-weight: 400; }
article.guide p.byline { color: var(--ink-soft); }
article.guide h2 { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
article.guide em { font-weight: inherit; }
footer.site {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0 2.2rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.note {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 1rem;
  margin: 1.3rem 0;
  font-size: 0.98rem;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) {
  .points { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  nav a { margin-left: 0.65rem; }
  .readings a, .readings .row, .toc-list a, .toc-list .row { grid-template-columns: 1fr; flex-direction: column; gap: 0.1rem; }
  .two-col { grid-template-columns: 1fr; }
  header.site .wrap { flex-direction: column; gap: 0.5rem; }
  .portrait-row { grid-template-columns: 1fr; }
}