/* Johannes K. Schmidt
   Shared styles for every page on the site. Long-form pages use
   .article; landing sections use .section-head; banners use .page-hero.
   Font URLs resolve relative to this file.
*/

@layer reset, base, layout, utilities, blocks, exceptions;

/* Fonts */

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-600italic.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/noto-serif-v33-latin-700italic.woff2") format("woff2");
}

/* Design tokens */

:root {
  color-scheme: dark;

  --ink: oklch(15% 0.006 265);
  --ink-deep: oklch(10% 0.005 265);
  --ink-raised: oklch(20% 0.007 265);
  --ink-veil: oklch(15% 0.006 265 / 0.94);

  --paper: oklch(95% 0.008 95);
  --paper-dim: oklch(76% 0.012 95);
  --paper-faint: oklch(65% 0.012 95);

  --gold: oklch(74% 0.115 82);
  --gold-bright: oklch(84% 0.105 86);
  --gold-deep: oklch(48% 0.085 78);

  --hairline: oklch(100% 0 0 / 0.10);
  --hairline-strong: oklch(100% 0 0 / 0.18);
  --hairline-gold: oklch(74% 0.115 82 / 0.48);

  --serif: "Noto Serif", Cambria, Georgia, serif;

  --t-2xs: clamp(0.625rem, 0.60rem + 0.12vw, 0.6875rem);
  --t-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
  --t-s: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
  --t-m: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
  --t-l: clamp(1.125rem, 1.02rem + 0.40vw, 1.3125rem);
  --t-xl: clamp(1.25rem, 1.02rem + 1vw, 1.85rem);
  --t-2xl: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
  --t-3xl: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);

  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;

  --tracking-wide: 0.07em;
  --tracking-caps: 0.12em;

  --space-2xs: 0.35rem;
  --space-xs: 0.6rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 2rem + 5vw, 6rem);
  --measure: 70ch;
  --archive-width: 58rem;
  --max-width: 73.75rem;
  --nav-height: 7.25rem;
  --target-size: 2.75rem;
  --radius: 0.1875rem;

  /* Long-form reading */
  --paper-read: oklch(88% 0.010 95);
  --t-read: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --measure-read: 40rem;

  /* Washes */
  --hover-wash: oklch(100% 0 0 / 0.05);
  --hover-wash-soft: oklch(100% 0 0 / 0.025);
  --gold-wash: oklch(74% 0.115 82 / 0.08);

  --speed: 180ms;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
}

/* Reset */

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

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  figure,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding-inline-start: 1.5rem;
  }

  ul[class] {
    padding: 0;
    list-style: none;
  }

  img,
  picture,
  video,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

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

  button {
    margin: 0;
  }

  [hidden] {
    display: none !important;
  }
}

/* Base */

@layer base {
  html {
    font-family: var(--serif, Georgia, serif);
    color: var(--paper, #f2efe9);
    background: var(--ink, #0d0d10);
    scroll-padding-block-start: calc(var(--nav-height, 7.25rem) + 1rem);
    -webkit-font-smoothing: antialiased;
  }

  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100vh;
    min-block-size: 100svh;
    font-size: var(--t-m, 1rem);
    line-height: 1.65;
  }

  main {
    min-inline-size: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--w-semibold, 600);
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  p,
  blockquote,
  figcaption {
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  a {
    color: var(--gold, #c39b4e);
    overflow-wrap: anywhere;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color var(--speed, 180ms) var(--ease, ease);
  }

  a:focus-visible {
    color: var(--gold-bright, #e0bf7d);
  }

  :focus-visible {
    outline: 2px solid var(--gold-bright, #e0bf7d);
    outline-offset: 3px;
  }

  ::selection {
    color: var(--ink-deep, #08080a);
    background: var(--gold-bright, #e0bf7d);
  }

  blockquote {
    font-style: italic;
  }

  cite {
    font-style: normal;
  }

  @media (hover: hover) {
    a:hover {
      color: var(--gold-bright, #e0bf7d);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
}

/* Layout */

@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--max-width, 73.75rem);
    margin-inline: auto;
    padding-inline: var(--gutter, 1.25rem);
  }

  .content-section {
    padding-block: var(--section-pad, 4rem);
    background: var(--ink, #0d0d10);
    container-type: inline-size;
  }

  .content-section + .content-section {
    border-block-start: 1px solid var(--hairline, #29292d);
  }

  .content-section .content-section {
    padding-block: 0;
    border: 0;
    container-type: normal;
  }

  /*
    A section immediately followed by a hero image should sit close
    to it, so the hero's top fade-gradient reads as a continuation
    rather than a second gap on top of the section padding.
  */
  .content-section:has(+ .hero-carousel) {
    padding-block-end: 1rem;
  }

  .content-section .content-section > .container {
    max-inline-size: none;
    padding-inline: 0;
  }

  /* Headings are aligned by their block (.section-head, .article), not here. */

  .content-section > .container > p,
  .split-panel__text p {
    font-size: var(--t-m, 1rem);
    line-height: 1.8;
    text-align: start;
    color: var(--paper-dim, #bdb8ad);
  }

  .content-section > .container > p {
    inline-size: 100%;
    max-inline-size: var(--measure, 70ch);
    margin-inline: auto;
  }

  .content-section > .container > p + p,
  .split-panel__text p + p {
    margin-block-start: var(--space-s, 1rem);
  }

  .footer {
    padding-block: var(--space-l, 2.5rem);
    border-block-start: 1px solid var(--hairline, #29292d);
    background: var(--ink, #0d0d10);
    text-align: center;
  }

  .footer p {
    text-align:center;
    max-width: 78ch;
    font-size: var(--t-xs, 0.75rem);
    letter-spacing: var(--tracking-wide, 0.07em);
    color: var(--paper-faint, #97918a);
  }

  .footer p + p {
    margin-block-start: var(--space-xs, 0.6rem);
  }

  /* Noto Serif has no cuneiform; fall back to system fonts that do. */
  .footer .footer__mark {
    font-family: "Segoe UI Historic", "Noto Sans Cuneiform", var(--serif);
    font-size: var(--t-2xl, 2rem);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold, #c39b4e);
  }

  .footer .footer__caption {
    margin-block-start: var(--space-xs, 0.6rem);
    margin-inline: auto;
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-2xs, 0.75rem);
    letter-spacing: var(--tracking-wide, 0.07em);
    text-align: center;
    color: var(--paper-faint, #97918a);
  }

  .footer .footer__end {
    margin-block-start: var(--space-xs, 0.6rem);
    margin-inline: auto;
    font-family: var(--serif);
    font-size: var(--t-xs, 0.75rem);
    text-align: center;
    color: var(--paper-faint, #97918a);
    padding-top:1rem;
  }
}

/* Utilities */

@layer utilities {
  .eyebrow {
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--gold, #c39b4e);
  }

  .eyebrow a {
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--gold, #c39b4e);
    margin-top:1rem;
  }

a.eyebrow::after {
    content: "\2192";
    transition: transform var(--speed, 180ms) var(--ease, ease);
  }

a.eyebrow:hover::after {
      transform: translateX(0.2rem);
    }

  .measure {
    max-inline-size: var(--measure, 70ch);
    margin-inline: auto;
  }

  .text-start {
    text-align: start !important;
  }

  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 200;
    padding: 0.75rem 1rem;
    font-weight: var(--w-semibold, 600);
    color: var(--ink-deep, #08080a);
    background: var(--gold-bright, #e0bf7d);
    transform: translateY(-200%);
  }

  .skip-link:focus {
    color: var(--ink-deep, #08080a);
    transform: none;
  }

  main:focus {
    outline: none;
  }

  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Components */

@layer blocks {
  /* Navigation */

  .navbar-container {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    border-block-end: 1px solid var(--hairline, #29292d);
    background: var(--ink-veil, rgba(13, 13, 16, 0.94));
    container: masthead / inline-size;
  }

  .navbar {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: var(--space-2xs, 0.35rem);
    max-inline-size: var(--max-width, 73.75rem);
    margin-inline: auto;
    padding: 0.875rem var(--gutter, 1.25rem);
  }

  .logo {
    max-inline-size: 100%;
    font-size: var(--t-xl, 1.5rem);
    font-weight: var(--w-semibold, 600);
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold, #c39b4e);
  }

  .nav-links {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem clamp(0.5rem, 2cqi, 1.75rem);
    inline-size: 100%;
  }

  .nav-links > li {
    min-inline-size: 0;
  }

  .nav-links a,
  .nav-links .dropbtn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    min-block-size: var(--target-size, 2.75rem);
    padding: 0.5rem 0.25rem;
    font-size: var(--t-s, 0.8125rem);
    font-weight: var(--w-medium, 500);
    line-height: 1.45;
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--paper-dim, #bdb8ad);
  }

  .nav-links .dropbtn {
    inline-size: 100%;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .nav-links > li > :is(a, .dropbtn) {
    position: relative;
    justify-content: center;
    text-align: center;
  }

  .nav-links > li > :is(a, .dropbtn)::after {
    content: "";
    position: absolute;
    inset-inline: 0.25rem;
    inset-block-end: 0.25rem;
    block-size: 1px;
    background: var(--gold, #c39b4e);
    transform: scaleX(0);
    transition: transform var(--speed, 180ms) var(--ease, ease);
  }

  .nav-links :is(a, .dropbtn):focus-visible,
  .nav-links a[aria-current="page"],
  .nav-links .dropbtn.is-section,
  .nav-links .dropbtn[aria-expanded="true"] {
    color: var(--paper, #f2efe9);
  }

  .nav-links > li:focus-within > :is(a, .dropbtn)::after,
  .nav-links > li > a[aria-current="page"]::after,
  .nav-links > li > .dropbtn.is-section::after {
    transform: scaleX(1);
  }

  .dropdown-menu a[aria-current="page"] {
    color: var(--gold, #c39b4e);
  }

  /* Menus are bounded by the complete navigation row. */

  .dropdown {
    position: static;
  }

  .dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 10;
    inline-size: min(26rem, 100%);
    max-block-size: 60vh;
    max-block-size: min(60svh, 28rem);
    margin-inline: auto;
    padding-block: var(--space-2xs, 0.35rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-raised, #1c1c21);
    box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.65);
    text-align: start;
    transition:
      opacity var(--speed, 180ms) var(--ease, ease),
      visibility var(--speed, 180ms);
  }

  .dropdown-menu a {
    padding: 0.65rem 1.1rem;
    letter-spacing: 0.02em;
    white-space: normal;
    text-transform: none;
  }

  .dropdown-menu a:focus-visible {
    outline-offset: -3px;
    color: var(--gold-bright, #e0bf7d);
    background: var(--hover-wash);
  }

  .dropbtn[aria-expanded="true"] + .dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

/* ==========================================================================
   Nested dropdowns / submenus
   ========================================================================== */

.dropdown-menu .submenu {
  position: relative;
}

/* Nested-menu button should visually behave like a normal dropdown link */
.dropdown-menu .submenu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  inline-size: 100%;
  min-block-size: var(--target-size, 2.75rem);

  padding: 0.65rem 1.1rem;

  border: 0;
  background: none;

  font: inherit;
  font-size: var(--t-s, 0.8125rem);
  font-weight: var(--w-medium, 500);
  line-height: 1.45;
  letter-spacing: 0.02em;

  text-align: start;
  text-transform: none;

  color: var(--paper-dim, #bdb8ad);

  cursor: pointer;
}

.dropdown-menu .submenu-btn:hover,
.dropdown-menu .submenu-btn:focus-visible,
.dropdown-menu .submenu-btn[aria-expanded="true"] {
  color: var(--gold-bright, #e0bf7d);
  background: var(--hover-wash);
}

.dropdown-menu .submenu-btn:focus-visible {
  outline-offset: -3px;
}


/* Arrow */

.submenu-arrow {
  flex: 0 0 auto;

  font-size: 1.15em;
  line-height: 1;

  transition: transform var(--speed, 180ms) var(--ease, ease);
}

.submenu-btn[aria-expanded="true"] .submenu-arrow {
  transform: rotate(90deg);
}


/* Nested menu */

.submenu-menu {
  display: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.12);
}

.submenu-btn[aria-expanded="true"] + .submenu-menu {
  display: block;
}


/* Indent second-level links */

.submenu-menu a {
  padding-inline-start: 2rem;
  font-size: 0.95em;
  color: var(--paper-dim, #bdb8ad);
}

.submenu-menu a::before {
  content: "—";
  margin-inline-end: 0.55rem;
  color: var(--gold, #c39b4e);
  opacity: 0.65;
}

.submenu-menu a:hover,
.submenu-menu a:focus-visible {
  color: var(--gold-bright, #e0bf7d);
  background: var(--hover-wash);
}

  /* Embedded video */

  .embed {
    inline-size: 100%;
    max-inline-size: 60rem;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--hairline, #29292d);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-deep, #08080a);
  }

  .embed iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  /* Sung text beside its translation */

  .lyrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
    /* Reduced the column gap from 4rem to 1.5rem (or 2rem) */
    gap: var(--space-m, 1.5rem) var(--space-s, 1.5rem);
    max-inline-size: 70rem;
    margin-block-start: var(--space-l, 2.5rem);
    margin-inline: auto;
    justify-items: center;
    text-align: center;
    font-size: var(--t-l, 1.125rem);
    font-style: italic;
    line-height: 1.75;
    color: var(--paper, #f2efe9);
  }

  .lyrics__col[lang="en"] {
    color: var(--paper-dim, #bdb8ad);
  }

  .lyrics p + p {
    margin-block-start: 1.25em;
  }

  .lyrics__source {
    inline-size: fit-content;
    margin-block-start: var(--space-l, 2.5rem);
    margin-inline: auto;
    padding-block-start: var(--space-xs, 0.6rem);
    border-block-start: 1px solid var(--hairline-gold, #756039);
    font-size: var(--t-xs, 0.75rem);
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--gold, #c39b4e);
  }

  @supports (backdrop-filter: blur(1px)) {
    .navbar-container {
      backdrop-filter: blur(10px);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-links :is(a, .dropbtn):hover {
      color: var(--paper, #f2efe9);
    }

    .nav-links > li > :is(a, .dropbtn):hover::after {
      transform: scaleX(1);
    }

    .dropdown:hover > .dropdown-menu {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .dropdown-menu a:hover {
      color: var(--gold-bright, #e0bf7d);
      background: var(--hover-wash);
    }
  }

  @container masthead (max-width: 36rem) {
    .navbar {
      padding-block: 0.75rem;
    }

    .nav-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.125rem 0.5rem;
    }

    .nav-links a,
    .nav-links .dropbtn {
      font-size: 0.8125rem;
    }

    .dropdown-menu {
      inline-size: 100%;
    }
  }

  /* Hero images and quotations */

  .hero-carousel,
  .page-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
    background: var(--ink-deep, #08080a);
    container-type: inline-size;
  }

  .hero-carousel {
    min-block-size: 25rem;
  }

.page-hero {
  min-block-size: clamp(14.67rem, 26.67vw, 26.67rem);
}

  /*
    Every slide contributes its quotation height to the shared row.
    Images are positioned separately so their native dimensions do
    not determine the hero height.
  */

  .photo-hero-fluid {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    min-inline-size: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 600ms var(--ease, ease),
      visibility 0s linear 600ms;
  }

  .photo-hero-fluid.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .photo-fluid-img,
  .page-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--hero-position, 100% center);
  }

  .photo-hero-fluid::after,
  .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 10, 0.94),
        rgba(8, 8, 10, 0.48) 45%,
        rgba(8, 8, 10, 0.18)
      ),
      linear-gradient(
        to right,
        rgba(8, 8, 10, 0.82),
        rgba(8, 8, 10, 0.48) 45%,
        transparent 80%
      );
  }

  /*
    photo-fluid-img sits in a fixed ~400px-tall row, so object-fit: cover
    crops to a wider slice and upscales lower-res webps more than before.
    Widen the black fade so the softened/stretched edges sit under it.
  */
  .photo-hero-fluid::after {
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 10, 0.94),
        rgba(8, 8, 10, 0.48) 45%,
        rgba(8, 8, 10, 0.18)
      ),
      linear-gradient(
        to right,
        rgba(8, 8, 10, 0.88),
        rgba(8, 8, 10, 0.55) 55%,
        transparent 95%
      );
  }

  .photo-hero-fluid--fade-top::after {
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 10, 0.94),
        rgba(8, 8, 10, 0.48) 45%,
        rgba(8, 8, 10, 0.18)
      ),
      linear-gradient(
        to bottom,
        var(--ink, oklch(15% 0.006 265)),
        oklch(15% 0.006 265 / 0.9) 12%,
        oklch(15% 0.006 265 / 0.5) 40%,
        transparent 72%
      ),
      linear-gradient(
        to right,
        rgba(8, 8, 10, 0.88),
        rgba(8, 8, 10, 0.55) 55%,
        transparent 95%
      );
  }

  .hero-quote,
  .page-hero-quote {
    position: relative;
    z-index: 2;
    align-self: end;
    inline-size: 100%;
    max-inline-size: var(--max-width, 73.75rem);
    min-inline-size: 0;
    margin-inline: auto;
    padding: clamp(2rem, 4cqi, 3.5rem) var(--gutter, 1.25rem);
    text-align: start;
  }

  .hero-quote {
    padding-block-end: 5rem;
  }

  .hero-quote :is(p, blockquote) {
    max-inline-size: 24ch;
    font-size: clamp(1.15rem, 0.8rem + 1.7cqi, 2.25rem);
    font-style: italic;
    font-weight: var(--w-medium, 500);
    line-height: 1.4;
    color: var(--paper, #f2efe9);
    text-shadow: 0 1px 1.5rem rgba(0, 0, 0, 0.6);
  }

  .hero-quote :is(p, blockquote) + :is(p, blockquote) {
    margin-block-start: var(--space-s, 1rem);
  }

  .page-hero-quote :is(p, h1) {
    max-inline-size: 46ch;
    font-size: clamp(1.125rem, 0.85rem + 1cqi, 1.6rem);
    font-style: italic;
    font-weight: var(--w-medium, 500);
    line-height: 1.5;
    color: var(--paper, #f2efe9);
    text-shadow: 0 1px 1.5rem rgba(0, 0, 0, 0.6);
  }

  .hero-quote :is(cite, figcaption, .hero-quote__source),
  .page-hero-quote cite {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block-start: var(--space-m, 1.5rem);
    padding-block-start: var(--space-xs, 0.6rem);
    border-block-start: 1px solid var(--hairline-gold, #756039);
    font-size: var(--t-xs, 0.75rem);
    font-style: normal;
    line-height: 1.6;
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--gold, #c39b4e);
  }

  .hero-quote--center {
    align-self: center;
    text-align: center;
  }

  .hero-quote--center :is(p, blockquote) {
    max-inline-size: 30ch;
    margin-inline: auto;
  }

  .hero-quote--center :is(cite, figcaption, .hero-quote__source) {
    margin-inline: auto;
  }

  .hero-carousel__dots {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    padding-inline: var(--gutter, 1.25rem);
  }

  .hero-carousel__dot {
    display: grid;
    place-items: center;
    flex: 0 0 var(--target-size, 2.75rem);
    inline-size: var(--target-size, 2.75rem);
    block-size: var(--target-size, 2.75rem);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .hero-carousel__dot::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition:
      background-color var(--speed, 180ms),
      border-color var(--speed, 180ms);
  }

  .hero-carousel__dot.is-active::before,
  .hero-carousel__dot[aria-current="true"]::before {
    border-color: var(--gold-bright, #e0bf7d);
    background: var(--gold, #c39b4e);
  }

  .hero-carousel__dot:focus-visible::before {
    border-color: var(--paper, #f2efe9);
  }

  .hero-carousel__toggle {
    display: grid;
    place-items: center;
    flex: 0 0 var(--target-size, 2.75rem);
    inline-size: var(--target-size, 2.75rem);
    block-size: var(--target-size, 2.75rem);
    margin-inline-start: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }

  /* Pause bars while playing; a play triangle once paused. */
  .hero-carousel__toggle::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.75rem;
    border-inline: 3px solid currentColor;
  }

  .hero-carousel__toggle[aria-pressed="true"]::before {
    border: 0;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .hero-quote--long p {
    max-inline-size: 36ch;
    font-size: var(--t-m);
    font-weight: var(--w-normal);
    line-height: 1.5;
  }

  .hero-quote--longer p {
    max-inline-size: 60ch;
    font-size: var(--t-m);
    font-weight: var(--w-normal);
    line-height: 1.5;
  }

  @media (max-width: 36rem) {
    .hero-quote {
      text-align: center;
    }

    .hero-quote :is(p, blockquote),
    .hero-quote :is(cite, figcaption, .hero-quote__source) {
      margin-inline: auto;
    }
  }

  @media (hover: hover) {
    .hero-carousel__toggle:hover {
      color: var(--gold-bright, #e0bf7d);
    }

    .hero-carousel__dot:hover::before {
      border-color: var(--gold-bright, #e0bf7d);
      background: var(--gold-bright, #e0bf7d);
    }
  }

  /* In-flow quotation */

  .pull-quote {
    max-inline-size: var(--measure, 70ch);
    margin-block: var(--space-l, 2.5rem);
    margin-inline: auto;
    padding-inline-start: clamp(1rem, 3cqi, 2rem);
    border-inline-start: 2px solid var(--gold-deep, #6f5a20);
    text-align: start;
  }

  .pull-quote p {
    font-size: var(--t-l, 1.125rem);
    line-height: 1.6;
    color: var(--paper, #f2efe9);
  }

  .pull-quote p + p {
    margin-block-start: var(--space-s, 1rem);
  }

  .pull-quote :is(cite, footer, .pull-quote__source) {
    display: block;
    margin-block-start: var(--space-s, 1rem);
    font-size: var(--t-xs, 0.75rem);
    font-style: normal;
    line-height: 1.6;
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  /* Photographs */

  .photo-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 1rem);
    inline-size: 100%;
    max-inline-size: 20rem;
    min-inline-size: 0;
  }

  .photo-item,
  .split-panel__media {
    overflow: hidden;
    border: 1px solid var(--hairline, #29292d);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-raised, #1c1c21);
  }

  .photo-item img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 339 / 260;
    object-fit: cover;
    object-position: var(--photo-position, center);
  }

  /* Biography */

  .split-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-l, 2.5rem);
  }

  .split-panel__grid:has(.photo-column) {
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    align-items: start;
  }

  .split-panel__text,
  .split-panel__media {
    min-inline-size: 0;
  }

  .split-panel__text {
    text-align: start;
  }

  .split-panel__text :is(h1, h2, h3) {
    margin-block-end: var(--space-s, 1rem);
    text-align: start;
    color: var(--paper, #f2efe9);
  }

  .split-panel__text :is(p) {
    font-size: var(--t-s);
  }

  .split-panel__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: var(--portrait-position, center);
  }

  @media (max-width: 48rem) {
    .split-panel__grid,
    .split-panel__grid:has(.photo-column) {
      grid-template-columns: minmax(0, 1fr);
    }

    .photo-column {
      max-inline-size: 26rem;
      margin-inline: auto;
    }

    .split-panel__text {
      text-align: center;
    }

    .split-panel__text :is(h1, h2, h3) {
      text-align: center;
    }
  }

  /* Publication cards and biography gallery */

  .card-grid-4,
  .card-grid-2 {
    display: grid;
    gap: clamp(1rem, 2.5cqi, 2rem);
    margin-block-start: var(--space-l, 2.5rem);
    text-align: start;
  }

  /*
    Publication carousel: a horizontal scroll-snap track.
    Four cards per view on wide containers, three on medium,
    fewer on phones. Arrow buttons page through it (site.js);
    touch users can also swipe.
  */

  .card-grid-4 {
    --per-view: 1.15;
    --carousel-gap: clamp(1rem, 2.5cqi, 2rem);
    display: flex;
    gap: var(--carousel-gap);
    margin-block-start: var(--space-s, 1rem);
    /* Room for card focus outlines inside the scroll area. */
    padding: 4px;
    margin-inline: -4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    --card-image-fit: contain;
    --card-image-ratio: 4 / 3;
  }

  .card-grid-4::-webkit-scrollbar {
    display: none;
  }

  .card-grid-4 > * {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view));
    scroll-snap-align: start;
  }

  @container (min-width: 30rem) {
    .card-grid-4 { --per-view: 2; }
  }

  @container (min-width: 44rem) {
    .card-grid-4 { --per-view: 3; }
  }

  @container (min-width: 64rem) {
    .card-grid-4 { --per-view: 4; }
  }

  .card-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .card-carousel__nav[hidden] {
    display: none;
  }

  .card-carousel__btn {
    display: grid;
    place-items: center;
    inline-size: var(--target-size, 2.75rem);
    block-size: var(--target-size, 2.75rem);
    padding: 0;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: 50%;
    background: transparent;
    font-size: var(--t-m, 1rem);
    line-height: 1;
    color: var(--gold, #c39b4e);
    cursor: pointer;
    transition:
      border-color var(--speed, 180ms) var(--ease, ease),
      color var(--speed, 180ms) var(--ease, ease);
  }

  .card-carousel__btn:disabled {
    color: var(--paper-faint, #97918a);
    opacity: 0.4;
    cursor: default;
  }

  @media (hover: hover) and (pointer: fine) {
    .card-carousel__btn:not(:disabled):hover {
      border-color: var(--hairline-gold, #756039);
      color: var(--gold-bright, #e0bf7d);
    }
  }

  @media (forced-colors: active) {
    .card-carousel__btn {
      border-color: ButtonText;
      color: ButtonText;
    }
  }

  /*
    Image scroller: pages sit flush edge-to-edge, like a continuous
    newspaper scroll, each keeping its own aspect ratio at a shared
    row height. Paged by the same arrow buttons as .card-grid-4
    (site.js targets any .card-carousel__nav generically).
  */

  .img-scroller-frame {
    position: relative;
    margin-block-start: var(--space-s, 1rem);
  }

  .img-scroller {
    display: flex;
    block-size: clamp(17.5rem, 53cqi, 33rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius, 0.1875rem);
  }

  .card-carousel__nav--overlay {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem;
    gap: 0;
    pointer-events: none;
  }

  .card-carousel__nav--overlay .card-carousel__btn {
    pointer-events: auto;
    background: var(--ink-raised, #1c1c21);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }

  .img-scroller::-webkit-scrollbar {
    display: none;
  }

  .img-scroller:focus-visible {
    outline: 2px solid var(--hairline-gold, #756039);
    outline-offset: 2px;
  }

  .img-scroller img {
    flex: 0 0 auto;
    block-size: 100%;
    inline-size: auto;
    object-fit: cover;
    scroll-snap-align: start;
  }

  .img-scroller img + img {
    border-inline-start: 1px solid var(--hairline, #29292d);
  }

  .card-grid-2 {
    grid-template-columns:
      repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    --card-image-fit: cover;
  }

  .photo-card {
    position: relative;
    display: flex;
    flex-flow: column wrap;
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--hairline, #29292d);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-raised, #1c1c21);
    transition: border-color var(--speed, 180ms) var(--ease, ease);
  }

  .photo-card:focus-within {
    border-color: var(--hairline-gold, #756039);
  }

  .card-image-wrap {
    position: relative;
    inline-size: 100%;
    aspect-ratio: var(--card-image-ratio, 3 / 2);
    overflow: hidden;
    border-block-end: 1px solid var(--hairline, #29292d);
    background: var(--ink-deep, #08080a);
  }

  .card-image-wrap img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--card-image-fit, cover);
    object-position: var(--card-image-position, center);
  }

  .photo-card--contain {
    --card-image-fit: contain;
  }

  .card-body {
    display: flex;
    flex-flow: column wrap;
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: clamp(1rem, 2cqi, 1.4rem);
  }

  /* Source label: publication name, then date. */

  /* Stacked so a long publication name never strands the separator. */
  .card-source {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-block-end: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    line-height: 1.6;
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  .card-source > :first-child {
    color: var(--gold, #c39b4e);
  }

  .card-title {
    margin: 0;
    font-size: var(--t-l, 1.125rem);
    font-weight: var(--w-medium, 500);
    line-height: 1.4;
    text-wrap: pretty;
  }

  .card-title a {
    text-decoration: none;
    color: var(--paper, #f2efe9);
  }

  /* The title link covers the whole card. */
  .card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card-title a:focus-visible {
    outline: none;
    text-decoration: underline;
    color: var(--gold-bright, #e0bf7d);
  }

  .photo-card:has(.card-title a:focus-visible) {
    outline: 2px solid var(--gold-bright, #e0bf7d);
    outline-offset: 3px;
  }

  .card-caption {
    font-size: var(--t-s, 0.8125rem);
    line-height: 1.6;
    color: var(--paper-dim, #bdb8ad);
  }

  .card-note {
    padding-top: 1rem;
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--paper-dim);
  }

  @media (hover: hover) and (pointer: fine) {
    .photo-card:has(a):hover {
      border-color: var(--hairline-gold, #756039);
    }

    .photo-card:hover .card-title a {
      text-decoration: underline;
      color: var(--gold-bright, #e0bf7d);
    }
  }

  /* Section heading groups */

  .section-head {
    display: grid;
    justify-items: center;
    gap: var(--space-s, 1rem);
    margin-block-end: var(--space-l, 2.5rem);
    text-align: center;
  }

  .section-head :is(h1, h2) {
    margin: 0;
    max-inline-size: 34ch;
    font-size: var(--t-2xl, 2rem);
    color: var(--paper, #f2efe9);
  }

  .section-head p:not(.eyebrow) {
    max-inline-size: var(--measure, 70ch);
    font-size: var(--t-m, 1rem);
    line-height: 1.7;
    color: var(--paper-dim, #bdb8ad);
  }

  .section-head + :is(.article-list, .card-grid-4, .card-grid-2),
  .container > :is(.article-list, .card-grid-4, .card-grid-2):first-child {
    margin-block-start: 0;
  }

  .section-link {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-l, 2.5rem);
  }

  .section-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: var(--target-size, 2.75rem);
    font-size: var(--t-s, 0.8125rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
  }

  .section-link a::after {
    content: "\2192";
    transition: transform var(--speed, 180ms) var(--ease, ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .section-link a:hover::after {
      transform: translateX(0.2rem);
    }
  }

  /* Publication index */

  .article-list {
    inline-size: 100%;
    max-inline-size: var(--archive-width, 58rem);
    margin-inline: auto;
    margin-block-start: var(--space-l, 2.5rem);
    border-block-start: 1px solid var(--hairline, #29292d);
    container: publications / inline-size;
  }

  .article-item {
    min-inline-size: 0;
    padding-block: clamp(1.25rem, 2.5cqi, 1.85rem);
    border-block-end: 1px solid var(--hairline, #29292d);
    text-align: start;
    transition: border-color var(--speed, 180ms) var(--ease, ease);
  }

  .article-item:focus-within {
    border-block-end-color: var(--hairline-gold, #756039);
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
    margin-block-end: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    line-height: 1.6;
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  .article-meta > * {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .article-meta > :first-child {
    color: var(--gold, #c39b4e);
  }

  .article-meta > * + *::before {
    content: "\00b7";
    margin-inline-end: 0.8rem;
    color: var(--paper-faint, #97918a);
  }

  .article-item :is(h2, h3) {
    max-inline-size: 65ch;
    margin: 0;
    font-size: clamp(1.125rem, 1.02rem + 0.5cqi, 1.3125rem);
    font-weight: var(--w-medium, 500);
    line-height: 1.45;
    letter-spacing: -0.01em;
    text-align: start;
    text-wrap: pretty;
  }

  .article-item :is(h2, h3) a {
    text-decoration: none;
    color: var(--paper, #f2efe9);
  }

  .article-item :is(h2, h3) a:focus-visible {
    text-decoration: underline;
    color: var(--gold-bright, #e0bf7d);
  }

  .article-note {
    max-inline-size: 65ch;
    margin-block-start: 0.35rem;
    font-size: var(--t-s, 0.8125rem);
    font-style: italic;
    color: var(--paper-dim, #bdb8ad);
  }

  .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: var(--space-s, 1rem);
  }

  .keyword {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: 999px;
    background: transparent;
    font-size: var(--t-xs, 0.75rem);
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--paper-dim, #bdb8ad);
  }

  /* Topic filter above the publication index */

  .topic-filter {
    inline-size: 100%;
    max-inline-size: var(--archive-width, 58rem);
    margin-inline: auto;
    margin-block-end: var(--space-m, 1.5rem);
    text-align: center;
  }

  .topic-filter ~ .article-list {
    margin-block-start: 0;
  }

  .topic-filter__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .topic-pill {
    min-block-size: var(--target-size, 2.75rem);
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: 999px;
    background: transparent;
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    line-height: 1.4;
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-dim, #bdb8ad);
    cursor: pointer;
    transition:
      border-color var(--speed, 180ms) var(--ease, ease),
      background-color var(--speed, 180ms) var(--ease, ease),
      color var(--speed, 180ms) var(--ease, ease);
  }

  .topic-pill[aria-pressed="true"] {
    border-color: var(--gold, #c39b4e);
    background: var(--gold, #c39b4e);
    color: var(--ink-deep, #08080a);
  }

  .topic-filter__status {
    margin-block-start: var(--space-s, 1rem);
    font-size: var(--t-xs, 0.75rem);
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  @media (hover: hover) and (pointer: fine) {
    .topic-pill:not([aria-pressed="true"]):hover {
      border-color: var(--hairline-gold, #756039);
      color: var(--gold-bright, #e0bf7d);
    }
  }

  @media (forced-colors: active) {
    .topic-pill {
      border-color: ButtonText;
    }

    .topic-pill[aria-pressed="true"] {
      background: Highlight;
      color: HighlightText;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .article-item:hover {
      border-block-end-color: var(--hairline-gold, #756039);
    }

    .article-item :is(h2, h3) a:hover {
      text-decoration: underline;
      color: var(--gold-bright, #e0bf7d);
    }
  }

  @container publications (max-width: 32rem) {
    .article-item {
      padding-block: 1.25rem;
    }

    .article-meta {
      gap: 0.25rem 0.55rem;
    }

    .article-meta > * + *::before {
      margin-inline-end: 0.55rem;
    }

    .keywords {
      gap: 0.35rem;
      margin-block-start: 0.8rem;
    }
  }

  /*
    Long-form reading: essays and papers.
    One column at a reading measure; every element, headings included,
    shares its left edge. The essay h1 stays smaller than section h1s.
  */

  .article {
    inline-size: 100%;
    max-inline-size: var(--measure-read, 40rem);
    margin-inline: auto;
    font-size: var(--t-read, 1.125rem);
    line-height: 1.7;
    color: var(--paper-read, #ddd9d0);
    text-align: start;
  }

  .article > * + * {
    margin-block-start: 1.1em;
  }

  .article__header {
    margin-block-end: var(--space-l, 2.5rem);
    padding-block-end: var(--space-m, 1.5rem);
    border-block-end: 1px solid var(--hairline-gold, #756039);
  }

  .article__header .eyebrow {
    margin-block-end: var(--space-xs, 0.6rem);
  }

  .article__header h1 {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    line-height: 1.22;
    color: var(--paper, #f2efe9);
  }

  .article__header img {
    text-align:center;
    max-inline-size: 60%;
    border-radius: 6px;
  }

  .article__dek {
    margin-block-start: var(--space-s, 1rem);
    font-size: var(--t-s, 0.9375rem);
    font-style: italic;
    line-height: 1.7;
    color: var(--paper-dim, #bdb8ad);
    padding-bottom: 2rem;
  }

  .article > h2 {
    margin-block: 2.75em 0.75em;
    font-size: var(--t-xl, 1.5rem);
    color: var(--paper, #f2efe9);
  }

  .article > h2::before {
    content: "";
    display: block;
    inline-size: 2.5rem;
    block-size: 1px;
    margin-block-end: 0.9rem;
    background: var(--gold, #c39b4e);
  }

  .article > h3 {
    margin-block: 2em 0.5em;
    font-size: var(--t-l, 1.125rem);
    color: var(--paper, #f2efe9);
  }

  .article > h4 {
    margin-block: 1.75em 0.35em;
    font-size: var(--t-s, 0.8125rem);
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-dim, #bdb8ad);
  }

  .article > :is(h2, h3, h4) + * {
    margin-block-start: 0;
  }

  .article > .catalog-meta {
    margin-block-end: 0.5em;
    font-size: var(--t-s, 0.8125rem);
    font-style: italic;
    color: var(--paper-faint, #97918a);
  }

  /* Extended source quotations */

  .article > blockquote {
    margin-block: 1.75em;
    padding-inline-start: 1.25em;
    border-inline-start: 1px solid var(--hairline-gold, #756039);
    font-size: 0.9em;
    font-style: normal;
    line-height: 1.75;
    color: var(--paper-dim, #bdb8ad);
  }

  .article > blockquote + * {
    margin-block-start: 0;
  }

  .article > blockquote p + p {
    margin-block-start: 1em;
  }

  .article > blockquote cite {
    display: block;
    margin-block-start: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    letter-spacing: var(--tracking-wide, 0.07em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  /* Figures */

  .article > figure {
    margin-block: 2.25em;
  }

  .article > figure + * {
    margin-block-start: 0;
  }

  .article figure img {
    inline-size: 100%;
    max-inline-size: max-content;
    block-size: auto;
    border-radius: var(--radius, 0.1875rem);
    margin-inline: auto;
  }

  .article figcaption {
    margin-block-start: 0.75rem;
    font-size: var(--t-xs, 0.8125rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--paper-faint, #97918a);
    text-align: center;
  }

.article figcaption .figcaption--author {
  display: block; /* or inline-block */
  font: inherit;
  color: var(--gold);
  text-align: inherit;
  text-transform: uppercase;
}

  .article__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-s, 1rem);
  }

  .article__pair img {
    aspect-ratio: 1;
    object-fit: cover;
  }

  /* Lists, including the appendix catalogs */

  .article > :is(ol, ul) {
    padding-inline-start: 1.4em;
  }

  .article li + li {
    margin-block-start: 0.5em;
  }

  .article li::marker {
    color: var(--gold, #c39b4e);
  }

  /* Footnote markers and notes */

  .article sup.fnref {
    font-size: 0.7em;
    line-height: 0;
  }

  .article sup.fnref a {
    padding-inline: 0.1em;
    text-decoration: none;
  }

  .article sup.fnref a:is(:hover, :focus-visible) {
    text-decoration: underline;
    color: var(--gold-bright, #e0bf7d);
  }

  .article > .footnotes-list {
    padding-inline-start: 2em;
    font-size: var(--t-s, 0.8125rem);
    line-height: 1.65;
    color: var(--paper-faint, #97918a);
  }

  .footnotes-list li {
    scroll-margin-block-start: calc(var(--nav-height, 7.25rem) + 2rem);
    padding-inline-start: 0.35em;
  }

  .footnotes-list li::marker {
    font-variant-numeric: tabular-nums;
    color: var(--gold-deep, #6f5a20);
  }

  .footnotes-list li:target {
    color: var(--paper, #f2efe9);
    background: var(--gold-wash);
    outline: 0.35em solid var(--gold-wash);
  }

  .footnote-back {
    margin-inline-start: 0.35em;
    text-decoration: none;
  }

  /* Closing links */

  .article__footer {
    margin-block-start: var(--space-xl, 4rem);
    padding-block-start: var(--space-m, 1.5rem);
    border-block-start: 1px solid var(--hairline, #29292d);
  }

  .article__footer .section-link {
    justify-content: flex-start;
    margin-block-start: 0;
  }

  /*
    Contents list for long papers: above the text on narrow screens,
    a sticky left margin beside the column on wide ones.
  */

  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l, 2.5rem);
  }

  .toc {
    inline-size: 100%;
    max-inline-size: var(--measure-read, 40rem);
    margin-inline: auto;
    padding-block-end: var(--space-m, 1.5rem);
    border-block-end: 1px solid var(--hairline, #29292d);
    font-size: var(--t-s, 0.8125rem);
  }

  .toc__title {
    margin-block-end: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--paper-faint, #97918a);
  }

  .toc ol {
    padding: 0;
    list-style: none;
  }

  .toc a {
    display: block;
    padding-block: 0.3rem;
    padding-inline-start: 0.85rem;
    border-inline-start: 1px solid var(--hairline-strong, #36363a);
    line-height: 1.45;
    text-decoration: none;
    color: var(--paper-dim, #bdb8ad);
  }

  .toc a:focus-visible {
    border-inline-start-color: var(--gold, #c39b4e);
    color: var(--gold-bright, #e0bf7d);
  }

  @media (hover: hover) and (pointer: fine) {
    .toc a:hover {
      border-inline-start-color: var(--gold, #c39b4e);
      color: var(--gold-bright, #e0bf7d);
    }
  }

  @media (min-width: 72rem) {
    .article-layout {
      grid-template-columns:
        minmax(0, 1fr) minmax(0, var(--measure-read, 40rem)) minmax(0, 1fr);
      column-gap: var(--space-l, 2.5rem);
    }

    .article-layout > .article {
      grid-column: 2;
      grid-row: 1;
    }

    .article-layout > .toc {
      position: sticky;
      inset-block-start: calc(var(--nav-height, 7.25rem) + 1.5rem);
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      justify-self: end;
      max-inline-size: 15rem;
      padding: 0;
      border: 0;
    }
  }

  /* Podcast: sticky player beside a synchronized transcript */

  .podcast-intro {
    margin-block-end: var(--space-l, 2.5rem);
    text-align: center;
  }

  .podcast-intro p {
    max-inline-size: 64ch;
    margin-inline: auto;
    font-size: var(--t-s, 0.875rem);
    line-height: 1.75;
    color: var(--paper-dim, #bdb8ad);
  }

  .podcast-intro img {
    max-inline-size: 50%;
    margin-inline: auto;
    border-radius: 6px;
    padding-bottom: 2rem;
  }

  .podcast-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s, 1rem);
    margin-block: 0 var(--space-l, 2.5rem);
  }

  .podcast-quote {
    display: flex;
    align-items: center;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--hairline, #29292d);
    border-block-start-color: var(--gold, #c39b4e);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-raised, #1c1c21);
  }

  .podcast-quote p {
    font-size: var(--t-s, 0.875rem);
    line-height: 1.65;
    color: var(--paper-dim, #bdb8ad);
  }

  /* Author directory: framed cards like podcast-quote, one author per row */

  .article > .author-directory {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s, 1rem);
    margin-block: 0 var(--space-l, 2.5rem);
    list-style: none;
    padding-inline-start: 0;
  }

  .author-directory .author-card + .author-card {
    margin-block-start: 0;
  }

  .author-card {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--hairline, #29292d);
    border-block-start-color: var(--gold, #c39b4e);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-raised, #1c1c21);
  }

  .author-card__name {
    display: block;
    margin-block-end: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    font-weight: var(--w-semibold, 600);
    letter-spacing: var(--tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--gold, #c39b4e);
  }

  .author-card p {
    margin: 0;
    font-size: var(--t-s, 0.875rem);
    line-height: 1.65;
    color: var(--paper-dim, #bdb8ad);
  }

.author-card .bookname {
  font-size: var(--t-s, 0.95rem);
  color: var(--gold);
  letter-spacing: 0.01em;
}

.author-card .context {
  font-size: var(--t-xs, 0.875rem);
  font-weight: var(--w-medium);
  color: var(--paper-faint);
  letter-spacing: 0.01em;
}

  .author-card ul {
    margin-top: var(--t-s)/1.25;
    font-size: var(--t-s, 0.875rem);
    line-height: 1.65;
    color: var(--paper-dim, #bdb8ad);
  }

  .author-card ul.no-bullets {
  list-style-type: none;
  padding-left: 1.5rem; /* Preserves indentation */
  margin-top: calc(var(--t-s) / 1.25);
  font-size: var(--t-s, 0.875rem);
  line-height: 1.65;
  color: var(--paper-dim, #bdb8ad);
}

  .podcast-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  .podcast-player-column,
  .transcript-panel {
    min-inline-size: 0;
  }

  .podcast-player {
    position: sticky;
    inset-block-start: calc(var(--nav-height, 7.25rem) + 0.75rem);
    z-index: 20;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid var(--hairline-strong, #36363a);
    border-radius: var(--radius, 0.1875rem);
    background: var(--ink-veil, rgba(13, 13, 16, 0.94));
    box-shadow: 0 0.8rem 2rem -1rem oklch(0% 0 0 / 0.7);
  }

  .podcast-player audio {
    display: block;
    inline-size: 100%;
  }

  .podcast-player__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin-block-start: var(--space-xs, 0.6rem);
    font-size: var(--t-xs, 0.75rem);
    font-variant-numeric: tabular-nums;
    color: var(--paper-faint, #97918a);
  }

  .podcast-player__meta span:first-child {
    color: var(--gold, #c39b4e);
  }

  .transcript-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs, 0.6rem) var(--space-s, 1rem);
    margin-block-end: var(--space-s, 1rem);
    padding-block-end: var(--space-xs, 0.6rem);
    border-block-end: 1px solid var(--hairline, #29292d);
  }

  .transcript-heading h2 {
    font-size: var(--t-l, 1.125rem);
    color: var(--paper, #f2efe9);
  }

  .transcript-heading p {
    font-size: var(--t-xs, 0.75rem);
    color: var(--paper-faint, #97918a);
  }

  .transcript {
    display: grid;
    gap: 0.45rem;
    max-block-size: min(68vh, 46rem);
    padding-inline-end: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: var(--hairline-strong, #36363a) transparent;
  }

  .transcript-block {
    position: relative;
    display: grid;
    grid-template-columns: minmax(4.3rem, auto) minmax(0, 1fr);
    gap: 0.25rem 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius, 0.1875rem);
    cursor: pointer;
    transition:
      border-color var(--speed, 180ms) var(--ease, ease),
      background-color var(--speed, 180ms) var(--ease, ease);
  }

  .transcript-block::before {
    content: "";
    position: absolute;
    inset-block: 0.65rem;
    inset-inline-start: 0;
    inline-size: 1px;
    transition: background-color var(--speed, 180ms) var(--ease, ease);
  }

  .transcript-block:is(:hover, :focus-visible) {
    border-color: var(--hairline, #29292d);
    background: var(--hover-wash-soft);
  }

  .transcript-block.is-active {
    border-color: var(--hairline-gold, #756039);
    background: var(--gold-wash);
  }

  .transcript-block.is-active::before {
    background: var(--gold, #c39b4e);
  }

  .transcript-block.is-active .transcript-text {
    color: var(--paper, #f2efe9);
  }

  .transcript-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-inline-size: 0;
  }

  .transcript-time {
    font-size: var(--t-xs, 0.75rem);
    font-variant-numeric: tabular-nums;
    color: var(--gold, #c39b4e);
  }

  .transcript-speaker {
    font-size: var(--t-xs, 0.75rem);
    line-height: 1.35;
    color: var(--paper-faint, #97918a);
  }

  .transcript-text {
    align-self: center;
    font-size: var(--t-s, 0.875rem);
    line-height: 1.7;
    color: var(--paper-dim, #bdb8ad);
    transition: color var(--speed, 180ms) var(--ease, ease);
  }

  .transcript-block[data-cue="true"] .transcript-text {
    font-style: italic;
    color: var(--paper-faint, #97918a);
  }

  .transcript-status {
    padding-block: var(--space-m, 1.5rem);
    font-size: var(--t-s, 0.875rem);
    text-align: center;
    color: var(--paper-faint, #97918a);
  }

  @media (max-width: 52rem) {
    .podcast-quotes,
    .podcast-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .podcast-player {
      position: static;
    }

    .transcript {
      max-block-size: none;
      overflow: visible;
    }
  }

  @media (max-width: 42rem) {
    .transcript-block {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.35rem;
    }

    .transcript-meta {
      flex-flow: row wrap;
      align-items: baseline;
      gap: 0.35rem 0.75rem;
    }
  }
}

/* Responsive and accessibility adjustments */

@layer exceptions {
  @media (max-width: 36rem) {
    :root {
      --nav-height: 0rem;
    }

    .navbar-container {
      position: relative;
    }
  }

  /*
    Reduced motion governs CSS effects.
    Carousel rotation and pause behavior belong to JavaScript.
  */

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

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0ms !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }

    .section-link a::after {
      transform: none !important;
    }
  }

  @media (forced-colors: active) {
    .navbar-container,
    .dropdown-menu,
    .photo-card,
    .keyword {
      border-color: CanvasText;
    }

    :focus-visible {
      outline-color: Highlight;
    }

    .hero-carousel__dot::before {
      border-color: ButtonText;
      background: Canvas;
    }

    .hero-carousel__dot.is-active::before,
    .hero-carousel__dot[aria-current="true"]::before {
      background: ButtonText;
    }

    .photo-hero-fluid::after,
    .page-hero::after {
      background: Canvas;
      opacity: 0.9;
    }

    .hero-quote :is(p, blockquote, cite),
    .page-hero-quote :is(p, cite) {
      color: CanvasText;
      text-shadow: none;
    }
  }
}