:root {
  --paper: #f2efe6;
  --paper-deep: #e6e0d1;
  --ink: #171714;
  --muted: #6e6b62;
  --line: rgba(23, 23, 20, 0.18);
  --red: #ed4b2f;
  --red-dark: #be321f;
  --acid: #dfff00;
  --blue: #a8d8e8;
  --violet: #c8b9e8;
  --violet-deep: #6b4a9e;
  --green: #b9d89b;
  --white: #fffdf7;
  --reader-dark-line: #55595d;
  --reader-dark-text: #eeeae0;
  --reader-dark-text-muted: #aaa9a3;
  --reader-dark-chrome: #171a1d;
  --reader-dark-panel: #22262a;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --content: min(1440px, calc(100vw - 64px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 32px;
  border-bottom: 1px solid transparent;
  transition: background 250ms ease, border-color 250ms ease, height 250ms ease;
}

.site-header.is-scrolled {
  height: 66px;
  background: rgba(242, 239, 230, 0.94);
  border-color: var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand > span > span {
  font-weight: 400;
}

.brand-mark {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.brand-mark circle:last-child {
  fill: var(--red);
  stroke: none;
}

.primary-nav {
  display: flex;
  gap: 30px;
}

.primary-nav a,
.footer-links a {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a::after,
.footer-links a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}

.primary-nav a:hover::after,
.footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
}

.header-cta span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  transition: transform 200ms var(--ease), background 200ms ease;
}

.header-cta:hover span {
  background: var(--red);
  transform: rotate(45deg);
}

/* The hero is split diagonally: paper on the left, a near-black knowledge-field panel on the right,
   with the header crossing both. Items sitting over the dark panel have to be cream, and items over
   the paper have to be ink, so the split is expressed here.
   Measured at the navigation's own y, the panel edge falls near 47% of the viewport width: at 1440
   the items sit at 513, 580, 651, 737, 824, 912 and the call to action at 1336, so the fourth item
   onward is over the panel. This rule previously began at the third, which put Premed in cream on
   the paper side at 1.13:1, and removing it altogether put the last three in ink on the panel at
   about the same. Below 1100 the navigation collapses into the menu and the split does not apply. */
@media (min-width: 1101px) {
  .site-header:not(.is-scrolled) .primary-nav a:nth-child(n + 4),
  .site-header:not(.is-scrolled) .header-cta {
    color: var(--white);
  }
}

.menu-button {
  display: none;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-button span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 180ms ease;
}

.section-pad {
  width: var(--content);
  margin-inline: auto;
}

.section-index {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.section-index::before {
  display: inline-block;
  width: 36px;
  height: 1px;
  margin: 0 10px 3px 0;
  background: currentColor;
  content: "";
}

.section-index-light {
  color: rgba(255, 253, 247, 0.55);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  padding: 5px 8px 4px;
  color: var(--white);
  background: var(--ink);
}

.eyebrow-dark {
  color: var(--white);
}

.eyebrow-dark span {
  color: var(--ink);
  background: var(--acid);
}

.hero {
  position: relative;
  min-height: 760px;
  height: min(940px, 100vh);
  display: grid;
  grid-template-columns: minmax(430px, 0.88fr) minmax(520px, 1.12fr);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23, 23, 20, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 23, 20, 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to right, black, transparent 72%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 112px 4vw 50px max(32px, calc((100vw - 1440px) / 2));
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(64px, 6.4vw, 116px);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

h1 em,
h2 em {
  font-family: var(--serif);
  font-weight: 400;
}

.hero h1 em {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  color: var(--red);
  font-size: 0.84em;
  letter-spacing: -0.055em;
}

.hero h1 em::after {
  position: absolute;
  right: -10px;
  bottom: -14px;
  left: 20px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 14'%3E%3Cpath d='M2 9c90-8 164 2 244-2 87-5 157-4 252 1' fill='none' stroke='%23ed4b2f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  content: "";
}

.hero-intro {
  max-width: 580px;
  margin: 46px 0 30px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.4;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  color: var(--white);
  background: var(--ink);
}

.button-primary:hover {
  background: var(--red);
  border-color: var(--red);
}

.button-secondary:hover {
  color: var(--white);
  background: var(--ink);
}

.hero-notes {
  display: flex;
  gap: 22px;
  margin: 30px 0 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  list-style: none;
  text-transform: uppercase;
}

.hero-notes li:not(:first-child)::before {
  margin-right: 22px;
  color: var(--red);
  content: "✦";
}

.hero-atlas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--white);
  background: var(--ink);
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}

.atlas-label {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.atlas-label-top {
  top: 100px;
  right: 42px;
}

.hero-network {
  width: min(90%, 760px);
  max-height: 76%;
  overflow: visible;
}

.hero-links path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.hero-node circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hero-node text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.hero-node .node-sub {
  font-size: 6.5px;
  font-weight: 500;
}

.hero-node.node-bio circle { fill: var(--acid); }
.hero-node.node-chem circle { fill: var(--red); }
.hero-node.node-physics circle { fill: var(--blue); }
.hero-node.node-quant circle { fill: var(--violet); }
.hero-node.node-method circle { fill: var(--paper); }
.hero-node.node-bridge circle { fill: var(--green); }

.hero-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-float 5s ease-in-out infinite alternate;
}

.hero-node:nth-child(2n) { animation-delay: -1.7s; }
.hero-node:nth-child(3n) { animation-delay: -3.2s; }

@keyframes node-float {
  to { translate: 0 -7px; }
}

.atlas-key {
  position: absolute;
  right: 42px;
  bottom: 42px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 15px;
  width: 280px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.atlas-key span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.atlas-key i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.key-bio { background: var(--acid); }
.key-chem { background: var(--red); }
.key-physics { background: var(--blue); }
.key-method { background: var(--paper); }

.atlas-card {
  position: absolute;
  bottom: 42px;
  left: 8%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  width: 244px;
  padding: 14px;
  color: var(--ink);
  background: var(--acid);
  transform: rotate(-2deg);
}

.atlas-card-index {
  font-family: var(--mono);
  font-size: 9px;
}

.atlas-card strong,
.atlas-card div span {
  display: block;
}

.atlas-card strong {
  font-size: 12px;
  text-transform: uppercase;
}

.atlas-card div span {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.25;
}

.principle-strip {
  overflow: hidden;
  color: var(--ink);
  background: var(--red);
  border-bottom: 1px solid var(--ink);
}

.principle-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: marquee 28s linear infinite;
}

.principle-track i {
  color: var(--acid);
  font-style: normal;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.manifesto {
  display: grid;
  grid-template-columns: 0.25fr 1.25fr 0.5fr;
  gap: 40px;
  padding-top: 140px;
  padding-bottom: 150px;
}

.manifesto h2,
.course-copy h2,
.method h2,
.mastery h2 {
  margin: 0;
  font-size: clamp(50px, 6vw, 96px);
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.manifesto h2 em,
.method h2 em {
  color: var(--red);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.45;
}

.manifesto-copy .lede {
  max-width: 720px;
  margin: 45px 0 0 15%;
}

.margin-note {
  align-self: end;
  position: relative;
  padding-top: 50px;
  border-top: 1px solid var(--ink);
}

.margin-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
}

.margin-note strong {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.scribble {
  position: absolute;
  top: 4px;
  left: -13px;
  color: var(--red);
  font-family: var(--serif);
  font-size: 40px;
  transform: rotate(20deg);
}

.course-intro {
  display: grid;
  grid-template-columns: minmax(390px, 0.84fr) 1.16fr;
  gap: 8vw;
  padding-bottom: 160px;
}

.course-poster {
  position: relative;
  /* The poster is a grid child next to a copy column, so without this it stretches to whichever
     column is taller and the two books end up different sizes. A book cover has a fixed shape. */
  align-self: start;
  aspect-ratio: 2 / 3;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  overflow: hidden;
  /* Each book owns its colour. The tokens default to book 01's so nothing else has to change,
     and a third book is one declaration rather than a fork of this rule. */
  color: var(--book-ink, var(--white));
  background: var(--book-bg, var(--red));
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}

.library-feature {
  padding-top: clamp(90px, 11vw, 160px);
}

.book-link {
  text-decoration: none;
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}

.book-link:hover {
  box-shadow: 18px 20px 0 var(--ink);
  transform: translate(-4px, -4px);
}

.library-open {
  margin-top: 34px;
}

.poster-topline,
.poster-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.poster-topline,
.poster-footer,
.poster-title span {
  color: var(--book-small-ink, var(--ink));
}

.poster-orbit {
  position: absolute;
  inset: 5% -22%;
  z-index: 0;
  display: grid;
  place-items: center;
}

.orbit {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
}

.orbit-a { transform: rotate(0deg) scaleX(0.38); }
.orbit-b { transform: rotate(60deg) scaleX(0.38); }
.orbit-c { transform: rotate(120deg) scaleX(0.38); }

.poster-cross {
  font-family: var(--serif);
  font-size: 96px;
  font-weight: 300;
  /* Centred in the orbit, the glyph lands exactly behind the wordmark and shows through the gaps
     between letters. Lift it into the empty band above the title instead. */
  transform: translateY(-118%);
  opacity: 0.72;
}

.poster-title {
  position: relative;
  z-index: 2;
  text-align: center;
  /* The orbit lines are near-white; behind a near-white wordmark they read as crossing the letters.
     A hairline of the poster's own red around each glyph keeps the letterforms whole. */
  text-shadow:
    0 0 6px var(--red), 0 0 6px var(--red),
    0 0 14px var(--red);
}

.poster-title span,
.poster-title strong {
  display: block;
}

.poster-title span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.poster-title strong {
  margin: -3px 0 -9px;
  font-size: clamp(72px, 8vw, 140px);
  letter-spacing: -0.09em;
  line-height: 0.92;
}

.course-copy {
  align-self: center;
}

.course-copy h2 {
  max-width: 780px;
}

.course-copy > .lede {
  max-width: 700px;
  margin: 35px 0 45px;
}

.course-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  list-style: none;
}

.course-facts li {
  min-height: 140px;
  padding: 22px 20px 18px 0;
}

.course-facts li + li {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.course-facts strong,
.course-facts span {
  display: block;
}

.course-facts strong {
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.course-facts span {
  max-width: 120px;
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

.course-promise {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  margin-top: 34px;
}

.course-promise > span {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.course-promise p {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}

.learning-loop {
  color: var(--white);
  background: var(--ink);
}

.loop-heading {
  display: grid;
  grid-template-columns: 0.25fr 1.75fr;
  gap: 40px;
  padding-top: 100px;
  padding-bottom: 70px;
}

.loop-heading h2 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.loop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  list-style: none;
}

.loop-grid li {
  position: relative;
  min-height: 470px;
  padding: 32px max(32px, calc((100vw - 1440px) / 6));
}

.loop-grid li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.loop-number {
  font-family: var(--mono);
  font-size: 10px;
}

.loop-grid svg {
  width: 120px;
  margin: 55px auto;
  fill: none;
  stroke: var(--acid);
  stroke-width: 1.4;
}

.loop-grid h3 {
  margin: 0 0 10px;
  font-size: 21px;
  letter-spacing: -0.025em;
}

.loop-grid p {
  max-width: 320px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--serif);
  font-size: 16px;
}

.method {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9vw;
  padding-top: 150px;
  padding-bottom: 150px;
}

.method-heading {
  position: sticky;
  top: 110px;
  align-self: start;
}

/* The heading column is sticky, so anything auto-placed beneath it in the same column scrolls up
   underneath the pinned text. The review-boundary note belongs beside the evidence it qualifies
   anyway, so it is placed in the second column rather than left to fall into the first. */
.method > .course-boundary {
  grid-column: 2;
  margin-top: 48px;
}

@media (max-width: 900px) {
  .method > .course-boundary {
    grid-column: 1;
    margin-top: 32px;
  }
}

.method-heading h2 {
  margin-top: 42px;
}

.method-heading .lede {
  max-width: 570px;
  margin-top: 38px;
}

.evidence-stack {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-stack li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--ink);
}

.evidence-stack li:last-child { border-bottom: 1px solid var(--ink); }

.evidence-stack > li > span {
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
}

.evidence-stack h3 {
  margin: 5px 0 10px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.evidence-stack p {
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 16px;
}

.evidence-stack i {
  padding: 4px 7px;
  color: var(--red-dark);
  border: 1px solid var(--red-dark);
  font-family: var(--mono);
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mastery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 130px;
  color: var(--ink);
  background: var(--red);
  box-shadow: 0 0 0 100vmax var(--red);
  clip-path: inset(0 -100vmax);
}

.mastery-visual {
  position: relative;
  min-height: 580px;
  display: grid;
  place-items: center;
}

.mastery-ring {
  width: min(380px, 75%);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.mastery-ring::before,
.mastery-ring::after {
  position: absolute;
  width: min(530px, 95%);
  aspect-ratio: 1;
  border: 1px solid rgba(23, 23, 20, 0.35);
  border-radius: 50%;
  content: "";
}

.mastery-ring::after {
  width: min(250px, 55%);
}

.mastery-ring span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.mastery-ring strong {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.8;
  text-align: center;
}

.signal {
  position: absolute;
  min-width: 130px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--acid);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.signal b {
  margin-right: 16px;
  font-weight: 400;
}

.signal-a { top: 12%; left: 4%; transform: rotate(-5deg); }
.signal-b { top: 20%; right: 0; transform: rotate(4deg); }
.signal-c { bottom: 19%; left: 1%; transform: rotate(3deg); }
.signal-d { right: 3%; bottom: 10%; transform: rotate(-4deg); }

.mastery h2 {
  margin-top: 40px;
}

.mastery-copy .lede {
  max-width: 630px;
  margin: 36px 0;
  color: var(--ink);
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  padding: 13px 0;
  border-top: 1px solid rgba(23, 23, 20, 0.32);
  font-size: 13px;
}

.check-list li:last-child { border-bottom: 1px solid rgba(23, 23, 20, 0.32); }

.mastery .section-index-light {
  color: var(--ink);
}

.check-list span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  color: var(--red);
  background: var(--acid);
  border-radius: 50%;
  font-size: 11px;
}

.closing {
  position: relative;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 30px;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  text-align: center;
}

.closing-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(980px, 110vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.closing-orbit::before,
.closing-orbit::after {
  position: absolute;
  inset: 14%;
  border: inherit;
  border-radius: inherit;
  content: "";
}

.closing-orbit::after { inset: 30%; }

.closing > *:not(.closing-orbit) {
  position: relative;
  z-index: 1;
}

.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(54px, 7.4vw, 120px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.closing > p:not(.eyebrow) {
  max-width: 650px;
  margin: 35px 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--serif);
  font-size: 19px;
}

.button-row-center { justify-content: center; }

.button-light {
  color: var(--ink);
  background: var(--acid);
  border-color: var(--acid);
}

.button-light:hover { background: var(--white); border-color: var(--white); }

.button-outline-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.button-outline-light:hover { color: var(--ink); background: var(--white); }

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
  padding: 70px max(32px, calc((100vw - 1440px) / 2)) 34px;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}

.footer-mission {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
}

.footer-links {
  justify-self: end;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.footer-smallprint {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 70px;
  padding-top: 20px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.footer-smallprint p { margin: 0; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-complete .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal-delay { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }

@media (max-height: 820px) and (min-width: 1121px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
  }

  .hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 88px;
    padding-bottom: 24px;
  }

  .eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: clamp(62px, 5.75vw, 82px); }
  .hero h1 em { margin-top: 10px; }
  .hero-intro { margin: 26px 0 20px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; }
  .button { min-height: 46px; }
  .hero-notes { margin-top: 18px; }
  .atlas-label-top { top: 88px; }
  .hero-network { max-height: min(590px, calc(100svh - 70px)); }
}

@media (max-width: 1120px) {
  :root { --content: min(100% - 44px, 1060px); }

  .site-header { grid-template-columns: 1fr auto; padding-inline: 22px; }
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .menu-button { display: block; }

  .primary-nav.is-open {
    position: fixed;
    z-index: 150;
    inset: 66px 0 auto;
    height: calc(100dvh - 66px);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 40px 22px;
    color: var(--ink);
    background: var(--paper);
    border-top: 1px solid var(--ink);
    isolation: isolate;
  }

  .primary-nav.is-open a {
    padding: 22px 0;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    text-transform: none;
  }

  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .reader-dark .primary-nav.is-open {
    color: var(--reader-dark-text);
    background: var(--reader-dark-chrome);
    border-color: var(--reader-dark-line);
  }

  .reader-dark .primary-nav.is-open a {
    color: var(--reader-dark-text) !important;
    border-color: var(--reader-dark-line);
  }

  .hero {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 40px 80px;
  }

  .hero h1 { font-size: clamp(72px, 11vw, 112px); }
  .hero-atlas { min-height: 720px; clip-path: none; }
  .hero-network { max-height: 620px; }

  .manifesto { grid-template-columns: 0.22fr 1.15fr 0.63fr; }
  .course-intro { gap: 6vw; }
  .course-poster { min-height: 600px; }
  .poster-title strong { font-size: clamp(70px, 10vw, 105px); }
}

@media (max-width: 820px) {
  .manifesto,
  .course-intro,
  .method,
  .mastery {
    grid-template-columns: 1fr;
  }

  .manifesto { gap: 55px; padding-block: 100px; }
  .manifesto .section-index { margin-bottom: -25px; }
  .manifesto-copy .lede { margin-left: 0; }
  .margin-note { max-width: 460px; margin-left: auto; }

  .course-intro { padding-bottom: 110px; }
  .course-poster { width: min(100%, 600px); min-height: 720px; margin: 0 auto; }
  .course-copy { padding-top: 60px; }

  .loop-heading { grid-template-columns: 1fr; }
  .loop-grid { grid-template-columns: 1fr; }
  .loop-grid li { min-height: 380px; padding: 32px 8vw; }
  .loop-grid li + li { border-top: 1px solid rgba(255, 255, 255, 0.2); border-left: 0; }
  .loop-grid svg { margin: 30px auto; }

  .method { padding-block: 100px; }
  .method-heading { position: static; }
  .evidence-stack { margin-top: 40px; }
  .mastery { gap: 30px; }
  .mastery-visual { order: 2; }

  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-mission { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --content: calc(100% - 30px); }

  .site-header { height: 64px; padding-inline: 15px; }
  .primary-nav.is-open {
    top: 64px;
    height: calc(100dvh - 64px);
  }
  .brand { font-size: 12px; }
  .brand-mark { width: 29px; height: 29px; }

  .hero-copy { min-height: 710px; padding: 110px 16px 60px; }
  .hero h1 { font-size: clamp(55px, 17vw, 79px); }
  .hero-intro { margin-top: 42px; }
  .button-row { flex-direction: column; }
  .button { width: 100%; }
  .hero-notes { flex-wrap: wrap; gap: 7px 15px; }
  .hero-notes li:not(:first-child)::before { margin-right: 15px; }
  .hero-atlas { min-height: 590px; }
  .hero-network { width: 110%; transform: translateX(-3%); }
  .atlas-label-top { top: 25px; right: 18px; }
  .atlas-card { bottom: 22px; left: 16px; }
  .atlas-key { right: 16px; bottom: 112px; width: 210px; }

  .manifesto h2,
  .course-copy h2,
  .method h2,
  .mastery h2 { font-size: clamp(45px, 14vw, 66px); }

  .course-poster { min-height: 560px; padding: 18px; box-shadow: 7px 7px 0 var(--ink); }
  .poster-title strong { font-size: clamp(72px, 25vw, 108px); }
  .course-facts { grid-template-columns: 1fr; }
  .course-facts li { min-height: 104px; display: grid; grid-template-columns: 120px 1fr; align-items: center; padding: 15px 0; }
  .course-facts li + li { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .course-facts strong { font-size: 44px; }
  .course-facts span { margin-top: 0; }
  .course-promise { grid-template-columns: 1fr; gap: 8px; }

  .loop-heading { padding-block: 75px 50px; }
  .loop-heading h2 { font-size: 48px; }
  .loop-grid li { min-height: 350px; padding-inline: 25px; }

  .evidence-stack li { grid-template-columns: 40px 1fr; gap: 14px; }
  .evidence-stack i { grid-column: 2; justify-self: start; }

  .mastery { padding-block: 90px; }
  .mastery-visual { min-height: 430px; }
  .mastery-ring strong { font-size: 44px; }
  .signal { min-width: 110px; padding-inline: 8px; font-size: 8px; }

  .closing { min-height: 640px; padding-inline: 16px; }
  .closing h2 { font-size: clamp(51px, 15vw, 72px); }

  .site-footer { grid-template-columns: 1fr; padding-inline: 20px; }
  .footer-links { justify-self: start; }
  .footer-smallprint { flex-direction: column; margin-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Book 02. Dark small text reads at 2.65:1 on this ground and fails, so the whole cover inverts to
   cream, which reads at 6.66:1. Book 01 keeps its dark small text on the lighter orange at 4.83:1. */
.book-psychiatry {
  --book-bg: var(--violet-deep);
  --book-ink: var(--white);
  --book-small-ink: var(--white);
}