@font-face {
  font-family: 'New Computer Modern';
  src: url('./assets/fonts/NewCM10-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'New Computer Modern';
  src: url('./assets/fonts/NewCM10-BookItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'New Computer Modern';
  src: url('./assets/fonts/NewCM10-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'New CM Mono';
  src: url('./assets/fonts/NewCMMono10-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #fff;
  --ink: #222831;
  --muted: #66717d;
  --accent: #002147;
  --serif: 'New Computer Modern',Georgia,serif;
  --mono: 'New CM Mono',monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 35px;
}
body {
  margin: 0;
  background-color: #fff;
  background-image: radial-gradient(#d4dce4 .8px,transparent .8px);
  background-size: 22px 22px;
  background-position: 10px 10px;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.2;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
button {
  font: inherit;
  color: inherit;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
::selection {
  background: #dce6f2;
}
.wrap {
  width: calc(100% - 96px);
  max-width: 1000px;
  margin-inline: auto;
}
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-block: 35px 24px;
  border-bottom: 1px solid #00214730;
  background: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.logo-frame {
  position: relative;
  overflow: hidden;
  display: block;
  width: 80px;
  height: 33px;
  flex-shrink: 0;
}
.logo-frame img {
  position: absolute;
  width: 217.857px;
  height: 217.857px;
  max-width: none;
  left: -68.815px;
  top: -93.711px;
  filter: invert(1);
  mix-blend-mode: multiply;
}
.brand-byline {
  font-size: 17px;
  line-height: 1.25;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.brand-sub {
  font-size: 11px;
  font-family: var(--mono);
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
nav {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 16px;
}
nav a {
  color: var(--ink);
}
.header-link {
  font-size: 14px;
  white-space: nowrap;
}
.header-link span {
  margin-left: 7px;
}
.hero {
  text-align: center;
  padding-block: 58px 50px;
}
.hero-meta {
  color: var(--muted);
  font-size: 16px;
  font-style: italic;
}
.meta-dot {
  margin-inline: 9px;
  color: var(--accent);
}
.hero h1 {
  letter-spacing: -.035em;
  color: var(--accent);
  margin-top: 22px;
}
.hero h1>span {
  color: var(--accent);
}
.muted {
  color: var(--muted);
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: baseline;
}
.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: #00214755;
  text-underline-offset: 5px;
}
.text-link span {
  font-size: 16px;
}
.quiet-link {
  font-size: 16px;
}
.section {
  padding-block: 45px 52px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  scroll-margin-top: 25px;
}
.section-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 22px;
}
.section-label>span:last-child {
  font-size: 13px;
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none;
  padding: 19px 0;
}
summary::-webkit-details-marker {
  display: none;
}
summary>span:first-child {
  font: 11px var(--mono);
  color: #7b8794;
  min-width: 20px;
}
summary h3 {
  font-size: 20px;
  line-height: 1.35;
}
.plus {
  margin-left: auto;
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
}
details[open]>summary>.plus {
  transform: rotate(45deg);
}
.section-heading {
  max-width: 730px;
}
.section-heading h2 {
  font-size: 34px;
  letter-spacing: -.015em;
}
.section-heading>p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 15px;
  max-width: 650px;
}
.tracks {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  margin-top: 30px;
}
.track {
  padding: 11px 0 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  flex: 1;
  position: relative;
}
.track.active {
  border-bottom-color: var(--accent);
}
.eyebrow {
  font: 11px var(--mono);
  color: var(--muted);
  letter-spacing: .02em;
}
.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0 0 14px 35px;
}
.lesson-list li {
  display: flex;
  gap: 20px;
  padding: 7px 0;
  font-size: 16px;
}
.lesson-number {
  font: 11px var(--mono);
  color: #7b8794;
  min-width: 32px;
  padding-top: 6px;
}
.wip {
  color: var(--muted);
}
.approach {
  background: none;
}
.approach-grid {
  display: block;
  padding-left: 24px;
  background: rgba(255,255,255,.96);
}
.approach .section-label {
  font-size: 13px;
  margin-bottom: 10px;
}
.approach h2 {
  font-style: italic;
  color: var(--accent);
}
.approach h2 br {
  display: none;
}
.principles {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-top: 23px;
}
.principles p>span:first-child {
  display: none;
}
.principles .muted {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.community-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 65px;
}
.big-stat {
  font-size: 57px;
  line-height: 1.1;
  color: var(--accent);
  letter-spacing: -.025em;
}
.big-stat span {
  font-size: .6em;
  vertical-align: top;
}
.stat-caption {
  font-size: 16px;
  color: var(--muted);
  margin-top: 8px;
}
.community-grid h2 {
  font-size: 31px;
}
.body-copy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 15px;
  max-width: 550px;
}
.pending {
  border-top: 1px solid var(--line);
}
.pending .eyebrow {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
}
.pending p {
  font-size: 17px;
  margin-top: 7px;
}
.pending>.muted {
  font-size: 15px;
  display: block;
  margin-top: 4px;
}
.reading-list {
  margin-top: 23px;
}
.reading-list summary h3 {
  font-size: 21px;
}
.books {
  padding: 0 0 12px 35px;
}
.books article {
  display: grid;
  grid-template-columns: 50px 1fr 200px;
  gap: 20px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid #edf0f3;
}
.book-code {
  font: 11px var(--mono);
  color: var(--accent);
  padding-top: 4px;
}
h4 {
  font-size: 18px;
  line-height: 1.4;
}
.books p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 4px;
}
.chapters {
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.about-grid {
  grid-template-columns: 260px 1fr;
  gap: 65px;
}
.about-copy h3 {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.about-copy h3 br {
  display: none;
}
.about-copy>p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 17px;
}
.profile-links {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  font-size: 15px;
}
.closing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.closing>span {
  color: var(--muted);
  font-style: italic;
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding-block: 20px 30px;
  color: var(--muted);
}
.footer-name span {
  margin-left: 12px;
}
.skip {
  position: fixed;
  top: -100px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  padding: 8px 20px;
  z-index: 10;
}
.skip:focus {
  top: 10px;
}
@media(max-width:1000px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .masthead {
    gap: 20px;
  }
  .header-link {
    display: none;
  }
  nav {
    gap: 20px;
  }
  .community-grid,
    .about-grid {
    grid-template-columns: 225px 1fr;
    gap: 36px;
  }
  .books article {
    grid-template-columns: 45px 1fr;
  }
  .chapters {
    grid-column: 2;
    text-align: left;
  }
}
@media(max-width:700px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .masthead {
    flex-wrap: wrap;
    gap: 23px;
    padding-block: 25px 18px;
  }
  .brand {
    gap: 18px;
  }
  .brand-byline {
    font-size: 18px;
    padding-left: 18px;
  }
  .brand-sub {
    font-size: 10px;
  }
  nav {
    width: 100%;
    justify-content: space-between;
    font-size: 15px;
    gap: 12px;
  }
  .hero {
    padding-block: 39px 32px;
  }
  .hero-meta {
    font-size: 15px;
  }
  .hero h1 {
    line-height: 1.15;
    margin-top: 17px;
    margin-inline: auto;
  }
  .hero-actions {
    gap: 24px;
  }
  .hero-actions .text-link,
    .quiet-link {
    font-size: 15px;
  }
  .section {
    padding-block: 31px 36px;
  }
  .section-label {
    font-size: 13px;
    margin-bottom: 19px;
  }
  .section-label>span:last-child {
    font-size: 12px;
  }
  .section-label>span:nth-child(2) {
    display: none;
  }
  .community-grid,
    .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .section-heading>p {
    font-size: 16px;
    margin-top: 11px;
  }
  .tracks {
    gap: 22px;
    margin-top: 24px;
  }
  .eyebrow {
    font-size: 10px;
  }
  summary {
    gap: 12px;
    padding: 17px 0;
  }
  summary h3 {
    font-size: 18px;
  }
  .lesson-list {
    padding-left: 32px;
  }
  .lesson-list li {
    gap: 12px;
    font-size: 16px;
  }
  .lesson-number {
    font-size: 10px;
  }
  .approach {
    padding-block: 6px 25px;
  }
  .approach-grid {
    padding-left: 18px;
  }
  .approach h2 {
    font-size: 23px;
  }
  .principles {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
  .principles p {
    font-size: 16px;
  }
  .principles .muted {
    font-size: 15px;
  }
  .community-grid {
    gap: 22px;
  }
  .big-stat {
    font-size: 52px;
  }
  .stat-caption {
    font-size: 15px;
    margin-top: 5px;
  }
  .community-grid h2 {
    font-size: 28px;
  }
  .body-copy {
    font-size: 16px;
    margin-top: 11px;
  }
  .pending p {
    font-size: 16px;
  }
  .pending>.muted {
    font-size: 15px;
  }
  .reading-list summary h3 {
    font-size: 20px;
  }
  .books {
    padding-left: 0;
  }
  .books article {
    gap: 12px;
    grid-template-columns: 42px 1fr;
  }
  h4 {
    font-size: 17px;
  }
  .books p {
    font-size: 14px;
  }
  .chapters {
    font-size: 13px;
  }
  .about-copy h3 {
    font-size: 25px;
  }
  .about-copy>p {
    font-size: 16px;
    line-height: 1.75;
  }
  .profile-links {
    font-size: 15px;
    gap: 21px;
  }
  .closing {
    display: block;
    font-size: 16px;
    padding-block: 22px;
  }
  .closing>a {
    display: block;
    margin-top: 7px;
  }
  footer {
    flex-wrap: wrap;
    font-size: 12px;
    padding-bottom: 25px;
  }
  footer>span {
    order: 3;
    width: 100%;
  }
}
@media(max-width:370px) {
  nav {
    font-size: 14px;
    gap: 9px;
  }
  .hero-actions {
    gap: 18px;
  }
}
.hero-meta.eyebrow {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0;
}
@media(max-width:700px) {
  .hero-meta.eyebrow {
    font-size: 15px;
  }
}
/* Public work, presented as a reading index. */
.about-media>h3 {
  font-size: 25px;
  margin-bottom: 19px;
}
.views-note {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  text-align: right;
  margin-top: 12px;
}
@media(max-width:700px) {
  .about-media>h3 {
    font-size: 24px;
  }
  .views-note {
    text-align: left;
    font-size: 12px;
  }
}
.hero-actions {
  flex-wrap: wrap;
  row-gap: 10px;
}
/* IOIO library and independent public routes. */
.hero h1 {
  line-height: 1.12;
}
.route-kicker {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.course-programme {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.course-programme>summary {
  padding-block: 17px;
}
.course-programme>summary h3 {
  font-size: 19px;
  color: var(--accent);
}
.course-programme .tracks {
  margin-top: 5px;
}
@media(max-width:1000px) {
  .hero h1 {
    font-size: 53px;
  }
}
@media(max-width:700px) {
  .hero h1 {
    max-width: 390px;
  }
}
@media(max-width:370px) {
  .hero h1 {
    font-size: 33px;
  }
}
/* Book illustrations: a frontispiece and moving plates. */
.plate-number {
  white-space: nowrap;
}
.hero h1 {
  font-size: 55px;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 32px;
  margin-top: 28px;
  align-items: start;
}
.video-plate {
  min-width: 0;
}
.plate-frame {
  padding: 6px;
  border: 1px solid #00214755;
  background: #fff;
  outline: 1px solid #00214715;
  outline-offset: 3px;
}
.video-canvas {
  position: relative;
  width: 100%;
  background: #f3f5f6;
  overflow: hidden;
}
.video-preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #f3f5f6;
  color: #fff;
}
.video-preview[hidden] {
  display: none;
}
.video-preview>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(.87);
  transition: filter .25s;
}
.video-preview:hover>img {
  filter: grayscale(1) contrast(1);
}
.plate-watch {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: calc(100% - 24px);
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #00214745;
  background: #fff;
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.4;
  pointer-events: none;
  transition: background .18s,color .18s,border-color .18s;
}
.watch-arrow {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
.video-preview:hover .plate-watch,
.video-preview:focus-visible .plate-watch {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.video-preview:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.video-canvas iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.video-plate figcaption {
  font-size: 16px;
  line-height: 1.5;
  padding-top: 16px;
}
.plate-number {
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  margin-right: 6px;
}
.plate-title {
  color: var(--accent);
}
.plate-title>span {
  font-size: 13px;
}
.plate-source,
.plate-views {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.plate-source {
  font-style: italic;
  margin-top: 7px;
}
.plate-views {
  margin-top: 2px;
}
.about-media .views-note {
  margin-top: 21px;
}
@media(max-width:1000px) {
  .video-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 28px;
  }
}
@media(max-width:700px) {
  .hero h1 {
    font-size: 36px;
  }
  .video-grid {
    grid-template-columns: 1fr;
    gap: 31px;
    margin-top: 23px;
  }
  .video-canvas {
    aspect-ratio: 16/10;
    min-height: 200px;
  }
  .video-plate figcaption {
    font-size: 18px;
    padding-top: 14px;
  }
  .plate-number {
    font-size: 14px;
  }
  .plate-source,
    .plate-views {
    font-size: 14px;
  }
  .plate-watch {
    font-size: 16px;
  }
}
/* Typographic opening: no narrative hero scene. */
.hero-actions {
  margin-top: 23px;
}
@media(max-width:700px) {
  .hero-actions {
    margin-top: 20px;
  }
}
/* Mathematical plates: the structures themselves are the illustrations. */
.hero {
  padding-top: 44px;
  padding-bottom: 38px;
}
@media(max-width:700px) {
  .hero {
    padding-top: 32px;
    padding-bottom: 30px;
  }
}
/* Routes and teaching: media live with the subject they introduce. */
/* Personal academic page: the author, teaching, and individual work lead. */
.study-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #00214740;
}
.study-note {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  border-left: 1px solid #00214735;
  margin-top: 22px;
  max-width: 780px;
}
.personal-hero {
  padding-top: 48px;
  padding-bottom: 32px;
}
.profile-layout {
  display: block;
  max-width: 680px;
  margin-inline: auto;
}
.profile-copy {
  min-width: 0;
}
.profile-role {
  color: var(--accent);
}
.personal-hero .profile-links {
  flex-wrap: wrap;
}
.consultation-layout {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 65px;
}
.consultation-layout h2,
.author-note h2 {
  font-size: 34px;
  color: var(--accent);
  letter-spacing: -.015em;
}
.teaching-format-heading h3 {
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-top: 12px;
}
.teaching-format .consultation-copy>p {
  font-size: 17px;
}
.teaching-format .consultation-copy>p.muted {
  font-size: 15px;
}
@media(max-width:700px) {
  .teaching-format-heading h3 {
    font-size: 28px;
    margin-top: 9px;
  }
}
.consultation-copy>p {
  font-size: 18px;
  line-height: 1.75;
  max-width: 630px;
}
.consultation-copy>p.muted {
  font-size: 15px;
  margin-top: 13px;
}
.consultation-copy>.text-link {
  margin-top: 22px;
}
.author-note>p {
  margin-top: 18px;
}
.author-note>.text-link {
  margin-top: 24px;
}
@media(max-width:1000px) {
  .profile-layout {
    grid-template-columns: minmax(0,1fr) 185px;
    gap: 40px;
  }
  .personal-hero h1 {
    font-size: 56px;
  }
  .consultation-layout {
    grid-template-columns: 225px minmax(0,1fr);
    gap: 36px;
  }
}
@media(max-width:700px) {
  .personal-hero {
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .profile-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .profile-role {
    font-size: 19px;
    margin-top: 10px;
  }
  .profile-description {
    font-size: 17px;
    margin-top: 18px;
    line-height: 1.7;
  }
  .personal-hero .hero-actions {
    gap: 12px 22px;
    margin-top: 21px;
  }
  .personal-hero .profile-links {
    gap: 12px 20px;
    margin-top: 20px;
  }
  .consultation-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .consultation-layout h2,
    .author-note h2 {
    font-size: 30px;
  }
  .consultation-copy>p {
    font-size: 17px;
  }
  .consultation-copy>.text-link {
    margin-top: 17px;
  }
  .author-note>.text-link {
    margin-top: 14px;
  }
}
html {
  scroll-behavior: auto;
}
.teaching>.section-heading {
  max-width: 680px;
  margin-bottom: 32px;
}
.teaching>.section-heading h2 {
  color: var(--accent);
}
.teaching-entry {
  padding: 30px 0 32px;
  scroll-margin-top: 30px;
}
.teaching-entry:last-child {
  padding-bottom: 0;
}
.entry-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 50px;
  align-items: start;
}
.entry-copy h3 {
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-top: 12px;
}
.entry-copy>p {
  font-size: 17px;
  line-height: 1.7;
  color: #4e5b68;
  margin-top: 16px;
}
.entry-copy>.entry-note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-top: 15px;
}
.entry-copy>.text-link {
  margin-top: 20px;
  font-size: 15px;
}
.entry-layout .video-canvas {
  min-height: 0;
  aspect-ratio: 16/9;
}
.entry-layout .video-plate figcaption {
  font-size: 17px;
  padding-top: 14px;
}
.entry-layout .plate-source,
.entry-layout .plate-views {
  font-size: 12px;
}
.programme-toggle>summary>span:first-child {
  font: inherit;
  min-width: 0;
  color: var(--accent);
}
.teaching-entry .course-programme,
.course-bibliography {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.course-bibliography {
  margin-top: 0;
}
.programme-note {
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 14px;
}
.course-syllabus>details>summary h4 {
  font-size: 19px;
  line-height: 1.4;
}
.course-syllabus>details:last-child {
  border-bottom: 0;
}
.course-bibliography .reading-list {
  margin-top: 0;
}
@media(max-width:1000px) {
  .entry-layout {
    gap: 32px;
  }
  .entry-copy h3 {
    font-size: 28px;
  }
}
@media(max-width:700px) {
  .teaching>.section-heading {
    margin-bottom: 24px;
  }
  .entry-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .entry-copy h3 {
    font-size: 28px;
    margin-top: 9px;
  }
  .entry-copy>p {
    font-size: 16px;
    max-width: none;
    margin-top: 12px;
  }
  .entry-copy>.text-link {
    margin-top: 16px;
  }
  .entry-layout .video-plate figcaption {
    font-size: 18px;
  }
  .entry-layout .plate-source,
    .entry-layout .plate-views {
    font-size: 13px;
  }
  .course-syllabus>details>summary h4 {
    font-size: 18px;
  }
  .programme-note {
    font-size: 13px;
  }
  .masthead>nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}
/* База: all public learning directions are visible in one compact catalogue. */
.resource-catalog>.section-heading {
  max-width: 680px;
}
.resource-catalog>.section-heading h2 {
  color: var(--accent);
}
.resource-anchor {
  display: block;
  scroll-margin-top: 30px;
}
@media(min-width:701px) and (max-width:1000px) {
  .masthead {
    flex-wrap: wrap;
    row-gap: 18px;
  }
  .masthead>nav {
    width: 100%;
    justify-content: flex-start;
    gap: 30px;
  }
}
@media(max-width:700px) {
  .masthead>nav {
    display: flex;
    justify-content: flex-start;
    gap: 12px 26px;
  }
}
/* Shared subject guide, inspired by a university reading catalogue. */
.base-page {
  padding-block: 30px 45px;
  background: rgba(255,255,255,.98);
}
.base-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 45px;
  align-items: end;
  padding-block: 24px 32px;
  border-bottom: 1px solid var(--line);
}
.base-heading h1 {
  font-size: 53px;
  line-height: 1.1;
  color: var(--accent);
  margin-top: 12px;
  letter-spacing: -.025em;
}
.base-heading>div>p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 15px;
  max-width: 490px;
}
.base-search label {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 8px;
}
.base-search>div {
  position: relative;
}
.base-search input {
  display: block;
  width: 100%;
  font: 16px var(--serif);
  line-height: 1.5;
  color: var(--ink);
  padding: 11px 12px;
  border: 1px solid #00214755;
  background: #fff;
  border-radius: 0;
}
.base-search input:focus {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.base-search input::-webkit-search-cancel-button {
  display: none;
}
.base-search button {
  border: 0;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  padding: 5px 0;
  cursor: pointer;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.base-reader {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: 48px;
  margin-top: 31px;
  align-items: start;
}
.base-reader>aside {
  position: sticky;
  top: 25px;
  max-height: calc(100vh - 50px);
  overflow: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #c6cfd8 transparent;
}
.base-navigation {
  border: 0;
}
.base-navigation>summary {
  display: none;
}
.base-navigation>nav {
  display: block;
  font-size: 15px;
}
.base-home-link {
  display: block;
  padding-block: 9px;
  line-height: 1.55;
  color: var(--accent);
}
.base-tree-group>summary {
  font-size: 17px;
  line-height: 1.45;
  color: var(--accent);
  padding-block: 13px;
  gap: 12px;
}
.base-tree-group>summary>span {
  margin-left: auto;
  font: 16px var(--serif);
  min-width: 0;
  color: var(--accent);
}
.base-tree-group[open]>summary>span {
  transform: rotate(45deg);
}
.base-tree-group>div {
  padding-bottom: 13px;
}
.base-tree-group a {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  padding: 7px 0 7px 12px;
  border-left: 1px solid var(--line);
}
.base-tree-group a:hover,
.base-tree-group a[aria-current] {
  color: var(--accent);
  border-left-color: var(--accent);
}
.base-tree-group a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.base-tree-group .base-tree-overview {
  font-style: italic;
  color: var(--accent);
}
.base-tree-section {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin: 17px 0 7px;
}
.base-author-link {
  display: block;
  font-size: 13px;
  margin-top: 24px;
  color: var(--muted);
}
.base-content {
  min-width: 0;
  scroll-margin-top: 25px;
}
.base-search-status {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.base-search-status:not(:empty) {
  margin-bottom: 15px;
}
.base-index-note {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  padding-bottom: 19px;
}
.base-index-note a,
.base-related a,
.base-path-references a,
.base-material-topics a {
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
}
.base-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.base-group-title h2 {
  color: var(--accent);
  letter-spacing: -.015em;
}
.base-group-title>span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.base-group-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 13px;
  max-width: 630px;
}
.base-topic-section {
  margin-top: 20px;
}
.base-overview-topics {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.base-overview-topics>a {
  font-size: 16px;
  line-height: 1.55;
  padding-block: 8px;
}
.base-topic-group-overview {
  margin-bottom: 36px;
}
.base-section-title {
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 12px;
}
.base-topic-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 28px;
}
.base-topic-card {
  display: block;
  min-width: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.base-topic-card:hover {
  text-decoration: none;
}
.base-topic-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.base-topic-card>div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  color: var(--accent);
}
.base-topic-card :is(h3,h4) {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.base-topic-card>div>span {
  font-size: 15px;
  flex-shrink: 0;
}
.base-topic-card>p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 11px;
}
.base-topic-count {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 13px;
}
.base-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 19px;
}
.base-topic-heading h2 {
  letter-spacing: -.025em;
  color: var(--accent);
  overflow-wrap: break-word;
}
.base-topic-heading>p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 17px;
}
.base-related {
  margin-top: 24px;
  padding-block: 17px;
  border-block: 1px solid var(--line);
}
.base-related>span,
.base-path-references>span,
.base-material-topics>span {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 10px;
}
.base-related>div,
.base-path-references>div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
}
.base-material-list {
  margin-top: 9px;
}
.base-material {
  border-bottom: 1px solid var(--line);
}
.base-material :is(h3,h4) {
  font-size: 22px;
  line-height: 1.4;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.base-material :is(h3,h4)>a>span {
  font-size: 14px;
  white-space: nowrap;
}
.base-provider {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
  overflow-wrap: anywhere;
}
.base-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 21px;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 13px;
}
.base-source-links a {
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.base-source-links a span {
  font-size: 12px;
  white-space: nowrap;
}
.base-source-more {
  border: 0;
  margin-top: 13px;
}
.base-source-more>summary {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  padding: 0;
  line-height: 1.6;
}
.base-source-more>summary:hover {
  color: var(--accent);
}
.base-source-more[open]>.base-source-links {
  padding-bottom: 0;
}
.base-material-topics {
  margin-top: 25px;
  font-size: 15px;
  line-height: 1.7;
}
.base-material-topics>a {
  display: block;
  margin-top: 8px;
}
.base-material-full {
  padding-top: 10px;
}
.base-path-references {
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}
.base-teaching-note {
  border-left: 1px solid #00214735;
}
.base-teaching-note>p {
  color: var(--muted);
  margin-top: 8px;
}
.base-teaching-note a {
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
}
.base-search-topics,
.base-search-materials {
  margin-top: 24px;
}
.base-search-topics>h3,
.base-search-materials>h3 {
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 17px;
}
.base-empty {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 25px;
}
.base-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 13px 30px;
}
.about-media>summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-block: 19px;
}
.about-media>summary h3 {
  font-size: 25px;
  color: var(--accent);
  line-height: 1.3;
}
.about-media[open]>summary .plus {
  transform: rotate(45deg);
}
.about-media>.views-note {
  margin-bottom: 20px;
}
@media(max-width:700px) {
  .about-media {
    margin-top: 24px;
  }
  .about-media>summary h3 {
    font-size: 21px;
  }
  .base-entry-actions {
    gap: 13px 23px;
  }
}
.base-preview-groups {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.base-preview-groups>article {
  min-width: 0;
  border-top: 1px solid var(--line);
}
.base-preview-groups h3 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent);
}
.base-preview-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  margin-top: 20px;
}
.base-preview-links a>span {
  font-size: 12px;
}
.base-preview-all {
  display: inline-block;
  font-size: 13px;
  font-style: italic;
  margin-top: 22px;
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
}
.resource-catalog>.study-note {
  margin-top: 33px;
}
@media(max-width:1000px) {
  .base-heading {
    grid-template-columns: minmax(0,1fr) 235px;
    gap: 30px;
  }
  .base-reader {
    grid-template-columns: 180px minmax(0,1fr);
    gap: 30px;
  }
  .base-topic-card :is(h3,h4) {
    font-size: 20px;
  }
  .base-topic-grid {
    column-gap: 23px;
  }
  .base-topic-heading h2 {
    font-size: 33px;
  }
  .base-preview-groups {
    gap: 25px;
  }
  .base-preview-groups h3 {
    font-size: 24px;
  }
}
@media(max-width:700px) {
  .base-page {
    padding-block: 20px 30px;
  }
  .base-heading {
    display: block;
    padding-block: 18px 26px;
  }
  .base-heading h1 {
    font-size: 43px;
  }
  .base-heading>div>p {
    font-size: 16px;
    margin-top: 13px;
  }
  .base-search {
    margin-top: 24px;
  }
  .base-reader {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 22px;
  }
  .base-reader>aside {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .base-navigation {
    border-block: 1px solid var(--line);
  }
  .base-navigation>summary {
    display: flex;
    font-size: 16px;
    padding-block: 14px;
  }
  .base-navigation>nav {
    padding-bottom: 16px;
  }
  .base-author-link {
    margin-top: 12px;
    font-size: 13px;
  }
  .base-tree-group>summary {
    font-size: 18px;
  }
  .base-tree-group a {
    font-size: 15px;
    padding-block: 9px;
  }
  .base-tree-section {
    font-size: 12px;
  }
  .base-group-description {
    font-size: 16px;
  }
  .base-topic-grid {
    grid-template-columns: 1fr;
  }
  .base-topic-card :is(h3,h4) {
    font-size: 23px;
  }
  .base-topic-card>p {
    font-size: 16px;
  }
  .base-topic-heading h2 {
    font-size: 31px;
  }
  .base-topic-heading>p {
    font-size: 17px;
  }
  .base-related>div,
    .base-path-references>div {
    font-size: 15px;
    gap: 12px 20px;
  }
  .base-material :is(h3,h4) {
    font-size: 21px;
  }
  .base-source-links {
    font-size: 15px;
  }
  .base-source-more>summary {
    font-size: 14px;
  }
  .base-teaching-note>p {
    font-size: 15px;
  }
  .base-preview-groups {
    grid-template-columns: 1fr;
  }
  .base-preview-groups h3 {
    font-size: 26px;
  }
  .base-preview-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 22px;
    font-size: 16px;
    margin-top: 16px;
  }
  .base-preview-all {
    font-size: 14px;
    margin-top: 18px;
  }
}
@media(max-width:700px) {
  .base-overview-topics {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .base-overview-topics>a {
    font-size: 17px;
    padding-block: 10px;
  }
}

/* Shared visual hierarchy. Loaded last on the personal page, catalogue and paths. */
:root {
  --font-page: 48px;
  --font-section: 32px;
  --font-heading: 24px;
  --font-body: 18px;
  --font-ui: 16px;
  --font-meta: 14px;
  --line: #d7dfe7;
  --rule: #a7b7c8;
  --rule-strong: #768da5;
  --text-reading: #45515f;
  --section-space: 64px;
  --section-heading-space: 28px;
}
body {
  font-size: var(--font-body);
  line-height: 1.75;
}
h1,
h2,
h3,
h4 {
  color: var(--accent);
  font-weight: 400;
}
h1 {
  font-size: var(--font-page);
  line-height: 1.15;
  letter-spacing: -.025em;
}
h2 {
  font-size: var(--font-section);
  line-height: 1.25;
  letter-spacing: -.015em;
}
h3 {
  font-size: var(--font-heading);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.masthead {
  border-bottom-color: var(--rule-strong);
}
.masthead>nav,
.text-link,
.quiet-link,
.profile-links {
  font-size: var(--font-ui);
}
.route-kicker,
.hero-meta,
.section-label,
.section-label>span:last-child {
  font-size: var(--font-meta);
}
.route-kicker,
.hero-meta,
.section-label {
  line-height: 1.6;
}
/* Personal introduction and a featured conversation share the opening spread. */
.personal-hero {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 48px;
  align-items: start;
  text-align: left;
  padding-block: 40px var(--section-space);
}
.personal-hero .profile-layout {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.personal-hero h1 {
  font-size: var(--font-page);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0;
  max-width: none;
}
.profile-role {
  font-size: var(--font-heading);
  line-height: 1.4;
  margin-top: 12px;
}
.profile-description {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--text-reading);
  max-width: 620px;
  margin-top: 24px;
}
.personal-hero .hero-actions {
  justify-content: flex-start;
  font-size: var(--font-ui);
  gap: 16px 26px;
  margin-top: 24px;
}
.personal-hero .profile-links {
  font-size: var(--font-ui);
  gap: 16px 24px;
  margin-top: 24px;
}
.personal-hero .hero-video {
  width: 100%;
  margin: 0;
  align-self: center;
}
.hero-video .video-canvas {
  aspect-ratio: 16/9;
  min-height: 0;
}
.hero-video figcaption {
  text-align: left;
}
/* Major chapters have a stronger rule and a consistent opening rhythm. */
#main {
  counter-reset: chapter;
}
#main>.section {
  counter-increment: chapter;
  position: relative;
  border-top: 1px solid var(--rule-strong);
  padding-block: 48px var(--section-space);
  scroll-margin-top: 24px;
}
#main>.section::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 3px;
  background: var(--accent);
}
#main>.section>.section-label {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: var(--section-heading-space);
}
#main>.section>.section-label::before {
  content: counter(chapter,decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--font-meta);
  font-style: normal;
  color: var(--accent);
}
#main>.section>.section-label>span:nth-child(2) {
  margin-left: auto;
}
.section-heading h2,
.author-note h2,
.community-grid h2 {
  font-size: var(--font-section);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.section-heading>p,
.about-copy>p,
.entry-copy>p,
.consultation-copy>p,
.teaching-format .consultation-copy>p,
.body-copy {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 16px;
}
.resource-catalog>.section-heading,
.teaching>.section-heading {
  max-width: 740px;
  margin-bottom: 32px;
}
.about-grid {
  display: block;
}
.author-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.author-note>p {
  font-size: var(--font-meta);
  line-height: 1.6;
  margin: 0;
  color: var(--muted);
}
.author-note>.text-link {
  font-size: var(--font-meta);
  margin: 0 0 0 auto;
}
.about-copy {
  max-width: 740px;
  margin-top: 28px;
}
.about-copy h3,
.about-media>h3,
.base-preview-groups h3,
.entry-copy h3,
.teaching-format-heading h3 {
  font-size: var(--font-heading);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.about-copy>.profile-links {
  font-size: var(--font-ui);
  margin-top: 24px;
}
.about-media {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  margin-top: 32px;
  padding-top: 28px;
}
.about-media>.video-grid {
  margin-top: 24px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.base-entry-actions {
  margin-top: 24px;
}
.base-preview-groups {
  margin-top: 32px;
  gap: 32px;
}
.base-preview-groups>article {
  padding-top: 24px;
  border-top-color: var(--rule);
}
.base-preview-links {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.base-preview-all,
.study-note,
.entry-copy>.entry-note,
.consultation-copy>p.muted,
.teaching-format .consultation-copy>p.muted {
  font-size: var(--font-meta);
  line-height: 1.75;
}
.study-note {
  padding-left: 20px;
  border-left-color: var(--rule);
}
.teaching-entry {
  border-top: 1px solid var(--line);
  padding-block: 32px 40px;
}
.entry-copy h3,
.teaching-format-heading h3 {
  margin-top: 12px;
}
.entry-copy>.text-link,
.consultation-copy>.text-link {
  font-size: var(--font-ui);
  margin-top: 24px;
}
.entry-copy>p {
  max-width: 440px;
}
.consultation-copy>p:first-child {
  margin-top: 0;
}
.programme-toggle>summary {
  font-size: var(--font-ui);
  padding-block: 16px;
}
.programme-note,
.lesson-number,
.book-code {
  font-size: var(--font-meta);
}
.course-syllabus>details>summary h4,
.reading-list summary h3,
.books h4 {
  font-size: var(--font-body);
  line-height: 1.5;
}
.lesson-list li,
.books p {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.chapters {
  font-size: var(--font-meta);
}
.video-plate figcaption,
.entry-layout .video-plate figcaption {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.plate-number,
.plate-source,
.plate-views,
.entry-layout .plate-source,
.entry-layout .plate-views,
.views-note {
  font-size: var(--font-meta);
  line-height: 1.6;
}
.plate-watch {
  font-size: var(--font-meta);
}
.community-grid {
  align-items: start;
}
.stat-caption,
.pending p,
.pending>.muted {
  font-size: var(--font-ui);
  line-height: 1.75;
}
.pending {
  padding-top: 24px;
  margin-top: 24px;
}
.approach {
  padding: 0 0 var(--section-space);
}
.approach-grid {
  width: calc(100% - 96px);
  max-width: 1000px;
  padding: 24px 32px;
  border-left: 2px solid var(--rule);
}
.approach h2 {
  font-size: var(--font-heading);
  line-height: 1.5;
}
.approach .section-label,
.principles .muted {
  font-size: var(--font-meta);
}
.principles p {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.closing {
  font-size: var(--font-ui);
  border-top-color: var(--rule-strong);
  padding-block: 28px;
}
footer {
  font-size: var(--font-meta);
  border-top-color: var(--rule-strong);
  line-height: 1.6;
}
/* The same scale applies to the subject catalogue. */
.base-heading {
  border-bottom-color: var(--rule-strong);
}
.base-heading h1,
.base-topic-heading h2 {
  font-size: var(--font-page);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.base-heading>div>p,
.base-topic-heading>p,
.base-group-description,
.base-topic-card>p {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--text-reading);
}
.base-group-title h2 {
  font-size: var(--font-section);
  line-height: 1.25;
}
.base-topic-group {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin-bottom: 40px;
}
.base-topic-card :is(h3,h4),
.base-material :is(h3,h4) {
  font-size: var(--font-heading);
  line-height: 1.35;
}
.base-topic-card {
  border-top-color: var(--line);
  padding-block: 24px;
}
.base-tree-group>summary,
.base-tree-group a,
.base-home-link,
.base-overview-topics a,
.base-search input,
.base-source-links {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.base-section-title,
.base-search label,
.base-provider,
.base-topic-count,
.base-search-status,
.base-breadcrumb,
.base-material-topics,
.base-author-link {
  font-size: var(--font-meta);
  line-height: 1.6;
}
.base-material {
  border-top-color: var(--rule);
  padding-block: 24px;
}
.base-related,
.base-path-references {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 32px;
}
.base-related>div,
.base-path-references>div {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.base-teaching-note {
  margin-top: 32px;
  border-left-color: var(--rule);
  padding-left: 20px;
}
.base-teaching-note>p {
  font-size: var(--font-ui);
  line-height: 1.75;
}
/* Roadmap catalogue: a reading guide for each direction. */
.base-guide-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 12px 24px;
  width: 100%;
  font-size: var(--font-ui);
  line-height: 1.6;
  border-block: 1px solid var(--line);
  padding-block: 20px;
  margin-top: 28px;
}
.base-path-guides {
  margin-top: 36px;
}
.base-guide-card {
  border-top: 1px solid var(--rule-strong);
  padding-block: 30px 40px;
  scroll-margin-top: 24px;
}
.base-guide-heading h3 {
  margin-top: 12px;
}
.base-guide-heading h3 a>span {
  font-size: var(--font-ui);
}
.base-guide-heading>p {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 16px;
}
.base-guide-audience {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 20px;
}
.base-guide-audience>span {
  display: block;
  font-size: var(--font-meta);
  font-style: italic;
  color: var(--muted);
  margin-bottom: 6px;
}
.base-guide-label {
  font-size: var(--font-meta);
  line-height: 1.6;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 12px;
}
.base-guide-outcomes,
.base-guide-programme,
.base-guide-featured {
  margin-top: 28px;
}
.base-guide-outcomes ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
}
.base-guide-outcomes li+li {
  margin-top: 6px;
}
.base-guide-programme ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.base-guide-programme li {
  min-width: 0;
}
.base-guide-programme a {
  display: flex;
  gap: 12px;
  font-size: var(--font-ui);
  line-height: 1.6;
}
.base-guide-programme a>span {
  font: var(--font-meta)/1.8 var(--mono);
  color: var(--muted);
  min-width: 22px;
}
.base-guide-featured>div {
  border-top: 1px solid var(--line);
  padding-block: 15px;
}
.base-guide-featured>div>a {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.base-guide-featured>div>p {
  font-size: var(--font-meta);
  line-height: 1.75;
  color: var(--muted);
  margin-top: 6px;
}
.base-guide-project {
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 20px;
  margin-top: 24px;
}
.base-guide-project>p:last-child {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
}
.base-guide-connections {
  margin-top: 28px;
}
.base-guide-connections>p:not(.base-guide-label) {
  font-size: var(--font-meta);
  line-height: 1.75;
  color: var(--muted);
  margin-top: 10px;
}
.base-guide-connections a {
  font-size: var(--font-ui);
  margin-right: 6px;
}
.base-guide-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px 24px;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 24px;
  background: transparent;
  font-size: var(--font-meta);
  line-height: 1.6;
}
.base-guide-footer>span {
  font-size: var(--font-meta);
  color: var(--muted);
  order: initial;
  width: auto;
}
.base-guide-footer>.text-link {
  font-size: var(--font-ui);
}
/* Learning paths: distinct sections within the active stage. */
.path-route-intent {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 32px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 28px;
  margin-bottom: 32px;
}
.path-route-intent p {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 12px;
}
.path-route-intent ul {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  padding-left: 20px;
  margin: 16px 0 0;
}
.path-route-intent li+li {
  margin-top: 6px;
}
.path-route-structure {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 24px;
}
.path-route-structure h3 {
  font-size: var(--font-body);
  line-height: 1.4;
}
.path-route-structure>p {
  font-size: var(--font-meta);
  line-height: 1.75;
  color: var(--muted);
  margin-top: 12px;
}
.path-branch-note {
  margin-top: 20px;
}
.path-branch-note a {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.path-branch-note p {
  font-size: var(--font-meta);
  line-height: 1.75;
  color: var(--muted);
  margin-top: 7px;
}
.path-study {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin-top: 32px;
  scroll-margin-top: 24px;
}
.path-study h2 {
  font-size: var(--font-section);
  line-height: 1.25;
}
.path-study ul,
.path-deliverables ul {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin: 20px 0 0;
  padding-left: 22px;
}
.path-study li+li,
.path-deliverables li+li {
  margin-top: 10px;
}
.path-study li::marker,
.path-deliverables li::marker {
  color: var(--accent);
}
.path-deliverables {
  margin-top: 24px;
}
.path-deliverables ul {
  margin-top: 12px;
}
.path-heading h1,
.path-stage-heading h1 {
  font-size: var(--font-page);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.path-heading>p,
.path-stage-heading>p,
.path-practice p {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--text-reading);
}
.path-section-heading h2,
.path-stage-resources .path-section-heading h2,
.path-practice h2 {
  font-size: var(--font-section);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.path-step-card h3,
.path-start-note h2,
.path-material h3,
.path-companions .path-material h3,
.path-supplement-note h3 {
  font-size: var(--font-heading);
  line-height: 1.35;
}
.path-section-heading>p,
.path-stage-resources .path-section-heading>p,
.path-step-card p,
.path-start-note>p,
.path-supplement-note p {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
}
.path-start-note {
  border-color: var(--rule);
  padding: 24px;
}
.path-view-tabs {
  border-bottom-color: var(--rule-strong);
  margin-bottom: 32px;
}
.path-view-tabs>a strong {
  font-size: var(--font-body);
}
.path-view-tabs>a>span,
.path-facts,
.path-step-foot,
.path-study-note p,
.path-breadcrumb {
  font-size: var(--font-meta);
  line-height: 1.6;
}
.path-stage-outline>nav>a,
.path-back,
.path-stage-quicknav,
.path-companions>summary,
.path-topic-list {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.path-stage-outline>.route-kicker,
.path-stage-outline>nav>a>span {
  font-size: var(--font-meta);
  line-height: 1.6;
}
.path-stage-quicknav {
  border-top-color: var(--line);
  border-bottom: 0;
  margin-top: 28px;
  padding-block: 16px 0;
}
.path-stage-resources {
  border-top: 1px solid var(--rule);
  margin-top: 28px;
  padding-top: 28px;
}
.path-prerequisites {
  border-top: 1px solid var(--rule);
  margin-top: 28px;
  padding-top: 28px;
  scroll-margin-top: 24px;
}
.path-prerequisite-entry {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 16px;
}
.path-prerequisite-label {
  font-size: var(--font-meta);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin-top: 24px;
}
.path-prerequisite-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 20px;
}
.path-prerequisite-list>li {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.path-prerequisite-list>li>a {
  font-size: var(--font-ui);
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
}
.path-prerequisite-list>li>p {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 5px;
}
.path-prerequisite-condition {
  display: block;
  font-size: var(--font-meta);
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 5px;
}
.path-prerequisite-extra {
  border-block: 1px solid var(--line);
  margin-top: 24px;
}
.path-prerequisite-extra>summary {
  justify-content: space-between;
  padding-block: 16px;
  font-size: var(--font-ui);
  line-height: 1.6;
  color: var(--accent);
}
.path-prerequisite-extra>summary>span:first-child {
  font: inherit;
  min-width: 0;
  color: inherit;
}
.path-prerequisite-extra>summary>span:last-child {
  font-size: var(--font-meta);
  white-space: nowrap;
}
.path-prerequisite-extra>.path-prerequisite-list {
  margin-top: 4px;
  padding-bottom: 20px;
}
.path-preparatory-stages>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: var(--font-ui);
  line-height: 1.6;
}
.path-readiness {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 2px solid var(--rule);
  background: #00214703;
}
.path-readiness>.path-prerequisite-label {
  margin: 0;
  color: var(--accent);
}
.path-readiness>p:last-child {
  font-size: var(--font-ui);
  line-height: 1.75;
  color: var(--text-reading);
  margin-top: 8px;
}
.path-resource-role {
  font-size: var(--font-meta);
  margin-top: 24px;
  margin-bottom: 16px;
}
.path-material {
  padding: 22px 24px;
  border-color: var(--line);
  margin-top: 12px;
}
.path-material-meta,
.path-catalogue-link,
.path-material-links>summary,
.path-resource-status,
.path-resource-filters label {
  font-size: var(--font-meta);
  line-height: 1.6;
}
.path-material-links>div,
.path-resource-filters input,
.path-resource-filters select,
.path-resource-filters button {
  font-size: var(--font-ui);
  line-height: 1.6;
}
.path-companions {
  margin-top: 24px;
  border-color: var(--line);
}
.path-companions>summary {
  padding-block: 20px;
}
.path-companions>summary>span:last-child {
  font-size: var(--font-meta);
}
.path-practice {
  border-top: 1px solid var(--rule);
  border-left: 0;
  margin-top: 40px;
  padding: 28px 0 0;
}
.path-practice h2 {
  margin-top: 12px;
}
.path-practice p {
  margin-top: 16px;
}
.path-related-topics {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 24px;
}
.path-pagination {
  border-top-color: var(--rule);
  margin-top: 32px;
  padding-top: 24px;
}
.path-pagination strong {
  font-size: var(--font-body);
  line-height: 1.5;
}
.path-pagination span {
  font-size: var(--font-meta);
  line-height: 1.6;
}
@media(max-width:1000px) {
  .personal-hero {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 32px;
  }
  .approach-grid {
    width: calc(100% - 64px);
  }
  .path-stage-outline>nav>a {
    font-size: var(--font-meta);
  }
}
@media(max-width:700px) {
  :root {
    --font-page: 36px;
    --font-section: 28px;
    --font-heading: 22px;
    --font-body: 17px;
    --section-space: 40px;
    --section-heading-space: 24px;
  }
  .personal-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 24px 40px;
  }
  .personal-hero h1 {
    margin: 0;
    font-size: var(--font-page);
  }
  .personal-hero .hero-video {
    width: 100%;
    margin: 0;
  }
  .about-media>.video-grid {
    grid-template-columns: 1fr;
  }
  .personal-hero .hero-actions,
    .personal-hero .profile-links {
    gap: 14px 24px;
  }
  .personal-hero .hero-actions .text-link,
    .personal-hero .hero-actions .quiet-link {
    font-size: var(--font-ui);
  }
  #main>.section {
    padding-block: 32px 40px;
  }
  #main>.section::before {
    width: 48px;
  }
  .author-note {
    display: block;
  }
  .author-note>p {
    margin-top: 12px;
  }
  .author-note>.text-link {
    margin: 12px 0 0;
  }
  .about-copy {
    margin-top: 24px;
  }
  .base-preview-groups {
    gap: 28px;
    margin-top: 28px;
  }
  .base-preview-groups>article {
    padding-top: 24px;
  }
  .teaching-entry {
    padding-block: 28px 32px;
  }
  .approach-grid {
    width: calc(100% - 40px);
    padding: 20px;
  }
  .principles {
    gap: 20px;
  }
  .base-heading h1,
    .base-topic-heading h2 {
    font-size: var(--font-page);
  }
  .base-group-title h2 {
    font-size: var(--font-section);
  }
  .base-topic-group {
    padding-top: 24px;
    margin-bottom: 32px;
  }
  .base-heading>div>p,
    .base-topic-heading>p {
    font-size: var(--font-body);
  }
  .base-guide-jump {
    gap: 12px 20px;
    padding-block: 18px;
  }
  .base-guide-card {
    padding-block: 26px 32px;
  }
  .base-guide-programme ol {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .base-guide-footer>span {
    order: initial;
    width: auto;
  }
  .path-route-intent {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .path-study {
    padding-top: 24px;
    margin-top: 28px;
  }
  .path-route-structure {
    display: block;
  }
  .path-heading h1,
    .path-stage-heading h1 {
    font-size: var(--font-page);
  }
  .path-view-tabs>a strong {
    font-size: var(--font-ui);
  }
  .path-view-tabs>a>span {
    font-size: var(--font-meta);
  }
  .path-stage-quicknav {
    font-size: var(--font-meta);
    gap: 12px 20px;
  }
  .path-stage-jump,
    .path-stage-jump select {
    font-size: var(--font-meta);
  }
  .path-start-note {
    padding: 0 0 0 20px;
  }
  .path-step-card {
    padding: 20px 16px;
  }
  .path-step-foot {
    font-size: var(--font-meta);
  }
  .path-material {
    padding: 20px 18px;
  }
  .path-stage-resources,
    .path-practice,
    .path-prerequisites {
    padding-top: 24px;
    margin-top: 28px;
  }
  .path-prerequisite-list {
    gap: 18px;
  }
  .path-prerequisite-list>li {
    padding-left: 14px;
  }
  .path-readiness {
    padding: 16px 18px;
  }
  .path-material-meta {
    gap: 8px 16px;
  }
  .path-practice p {
    font-size: var(--font-body);
  }
}
/* Author introductions remain visible at both entrances to the Base. */
.base-intro-videos {
  margin-block: 32px 36px;
}
.base-intro-videos .video-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 32px;
  margin: 0;
}
.base-intro-videos .video-canvas {
  aspect-ratio: 16/9;
  min-height: 0;
}
.base-intro-videos .base-video-route {
  display: block;
  width: fit-content;
  font-size: var(--font-ui);
  line-height: 1.6;
  margin-top: 12px;
  text-decoration: underline;
  text-decoration-color: #00214740;
  text-underline-offset: 4px;
}
.base-intro-videos .plate-source {
  margin-top: 7px;
}
@media(max-width:700px) {
  .base-intro-videos {
    margin-block: 28px 32px;
  }
  .base-intro-videos .video-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* Interaction and reading defaults, shared by every page. */
[hidden] {
  display: none !important;
}
.nowrap {
  white-space: nowrap;
}
#base-view {
  outline: none;
  scroll-margin-top: 24px;
}
.base-topic-heading h2 {
  font-size: var(--font-section);
  line-height: 1.25;
}
.base-guide-heading h3 {
  font-size: var(--font-heading);
  line-height: 1.3;
}
.base-content, .profile-copy, .path-stage-reading {
  min-width: 0;
}
.base-guide-heading, .path-stage-heading, .books h4 {
  overflow-wrap: anywhere;
}
.masthead nav a {
  padding-block: 8px;
  text-underline-offset: 5px;
}
.masthead nav a[aria-current], .base-home-link[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
}
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.video-canvas {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.video-player-close {
  display: block;
  margin: 6px 0 0 auto;
  padding: 8px 4px;
  border: 0;
  background: #fff;
  color: var(--accent);
  font: var(--font-meta)/1.6 var(--serif);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.path-stage-outline {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
@media (max-width: 700px) {
  .hero-actions, .profile-links {
    flex-wrap: wrap;
  }
  .path-step-foot {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .path-view-tabs>a {
    padding-inline: 10px;
  }
  .path-pagination {
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition: none !important;
  }
}
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .wrap {
    width: 100%;
    max-width: none;
  }
  .masthead nav, .header-link, .hero-actions, .skip,
      .base-reader>aside, .base-search, .path-stage-outline,
      .path-view-tabs, .path-stage-quicknav, .path-pagination,
      .path-resource-filters, .video-player-close {
    display: none !important;
  }
  .base-reader, .path-stage-layout {
    display: block;
  }
  .plate-frame, .path-material, .path-readiness {
    break-inside: avoid;
  }
  h1, h2, h3, h4 {
    break-after: avoid;
  }
}

/* Personal copy, consolidated teaching and an unadorned footer. */
.students-copy p {
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--text-reading);
}
.students-copy p+p { margin-top: 22px; }
.appearances .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-footer { padding-block: 24px; }
.site-footer nav { width: auto; font-size: var(--font-ui); gap: 22px; flex-wrap: wrap; }
.site-footer nav a { color: var(--accent); }
.consultations { position: relative; }
#study-groups { position: absolute; top: 0; scroll-margin-top: 24px; }
@media (max-width:700px) {
  .appearances .video-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
  .site-footer nav { justify-content: flex-start; gap: 14px; }
}

.module-description {
  font-size: var(--font-meta);
  line-height: 1.6;
  color: var(--muted);
  padding-left: 35px;
  margin-bottom: 14px;
}
@media (max-width:700px) {
  .module-description { padding-left: 32px; }
}

/* Interviews continue the introduction without a separate display heading. */
.appearances { padding-bottom: var(--section-space); scroll-margin-top: 24px; }
.appearances .video-grid { margin-top: 0; }

.teaching-postscript {
  max-width: 740px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  color: var(--text-reading);
  font-size: var(--font-body);
  line-height: 1.75;
  scroll-margin-top: 24px;
}
.teaching-postscript p+p { margin-top: 20px; }

.teaching-postscript a {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
}

.text-emphasis {
  color: var(--accent);
  font-weight: 700;
}

/* Small reading aids use the same readable secondary ink as captions. */
.lesson-number,
.course-syllabus>details>summary>span:first-child,
.reading-list>details>summary>span:first-child {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--font-meta);
  line-height: 1.6;
}
.course-syllabus>details>summary,
.reading-list>details>summary { min-height: 48px; }
.base-overview-topics>a { min-height: 40px; }
.base-search button { font-size: var(--font-meta); min-height: 36px; }
@media (max-width: 700px) {
  .base-overview-topics>a { padding-block: 10px; }
  .site-footer nav a { padding-block: 8px; }
}

.profile-description a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
}

/* Compact interview project at the end of the page. */
.author-project { border-top: 1px solid var(--line); padding-block: 36px var(--section-space); scroll-margin-top: 24px; }
.project-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.project-copy h3 { font-size: var(--font-heading); line-height: 1.3; }
.project-copy>p { font-size: var(--font-body); line-height: 1.75; color: var(--text-reading); margin-top: 16px; }
.project-guest-links a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.project-copy>.text-link { display: inline-block; margin-top: 20px; }
.author-project .video-plate { margin: 0; }
@media(max-width:700px) { .project-layout { grid-template-columns: 1fr; gap: 28px; } }

.projects>.section-heading { margin-bottom: 28px; }
.projects>.appearances { padding-bottom: 36px; }
.projects>.author-project { padding-bottom: 0; }

/* Standalone courses retain the homepage type, video plates and programme rows. */
.course-page { padding-block: 32px var(--section-space); }
.course-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: var(--font-ui); line-height: 1.5; margin-bottom: 32px; }
.course-breadcrumb a { color: var(--accent); }
.course-page .teaching-entry { padding-top: 0; }
.course-page h1 { font-size: var(--font-page); line-height: 1.15; letter-spacing: -.025em; color: var(--accent); margin-top: 12px; }
.course-page .course-programme { margin-top: 40px; padding-top: 28px; }
.course-page .course-programme>h2 { font-size: var(--font-section); line-height: 1.3; margin-bottom: 16px; }
.course-page .course-syllabus>details>summary h3 { font-size: var(--font-body); line-height: 1.5; }
.course-page-end { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; }
@media(max-width:700px) { .course-page { padding-top: 24px; } .course-breadcrumb { margin-bottom: 24px; } }

.course-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 24px; margin-top: 20px; }
.course-actions .text-link { font-size: var(--font-ui); }