@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial');
  ascent-override: 100.18%;
  descent-override: 26.05%;
  line-gap-override: 0%;
  size-adjust: 99.82%;
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-baskerville-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville Fallback';
  src: local('Times New Roman');
  ascent-override: 76.22%;
  descent-override: 21.22%;
  line-gap-override: 0%;
  size-adjust: 127.26%;
}
:root {
  --font-outfit: 'Outfit', 'Outfit Fallback';
  --font-libre-baskerville: 'Libre Baskerville', 'Libre Baskerville Fallback';
  --bg: #eef2f5;
  --surface: #e0e6ec;
  --surface-card: rgba(255, 255, 255, 0.4);
  --surface-card-strong: rgba(255, 255, 255, 0.65);
  --surface-card-solid: #f7f9fa;
  --accent: #7e5071;
  --accent-light: #e8d5e0;
  --button: #4e6fa3;
  --button-hover: #2f4d78;
  --button-text: #ffffff;
  --link: #365c8a;
  --text-dark: #1c1c1a;
  --text-mid: #5c5b56;
  --text-light: #68675f;
  --border: #d8dee4;
  --header-bg: rgba(252, 252, 250, 0.82);
  --menu-bg: rgba(252, 252, 250, 0.98);
  --soft-shadow: rgba(28, 28, 26, 0.12);
  --field-bg: rgba(255, 255, 255, 0.48);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  color: var(--text-dark);
  background: var(--bg);
  font-family: var(--font-outfit), system-ui, sans-serif;
}

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text-dark);
    background: var(--bg);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
  }

  body,
  button {
    font-family: var(--font-outfit), system-ui, sans-serif;
  }

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

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

  button {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img,
  svg {
    display: block;
  }

  img {
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  p,
  ul {
    margin: 0;
  }

  /* Long technical terms and headings must never force horizontal scrolling:
     a word that cannot fit wraps mid-word instead of spilling past the viewport. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ul {
    padding: 0;
    list-style: none;
  }
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.section {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 16px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: white;
  background: var(--text-dark);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

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

/* Visually hidden but still announced by assistive technology. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  z-index: 200;
  top: 16px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  min-height: 54px;
  padding: 8px 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-xl);
  background: rgba(252, 252, 250, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  user-select: none;
  touch-action: manipulation;
}

.brand img {
  width: 140px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
}

.desktop-nav--primary {
  gap: 2px;
}

.desktop-nav--secondary {
  flex-shrink: 0;
  justify-self: end;
  gap: 4px;
}

.desktop-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link,
.nav-link-muted {
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  transition:
    color 150ms ease,
    background 150ms ease;
}

.nav-link {
  padding: 6px 14px;
  letter-spacing: 0.01em;
}

.nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.nav-link[aria-current='page'] {
  background: rgba(78, 111, 163, 0.08);
}

.nav-link-muted {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  color: var(--text-mid);
}

.nav-link-muted:hover {
  color: var(--text-dark);
}

.menu-button {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  color: var(--text-dark);
  background: transparent;
  cursor: pointer;
}

.menu-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-menu {
  position: fixed;
  z-index: 100;
  inset: 0;
  visibility: hidden;
  padding: 96px 32px 40px;
  background: rgba(252, 252, 250, 0.98);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    visibility 0s linear 180ms,
    opacity 180ms ease,
    transform 180ms ease;
}

.mobile-menu--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-menu__inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-menu__primary,
.mobile-menu__secondary {
  display: flex;
  flex-direction: column;
}

.mobile-menu__primary a {
  padding-block: 10px;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}

.mobile-menu__secondary {
  gap: 10px;
  color: var(--text-mid);
  font-size: 16px;
  font-weight: 400;
}

.nav-spacer {
  height: 46px;
}

.hero {
  padding-top: 180px;
  padding-bottom: 140px;
}

.hero__stage {
  position: relative;
  height: 495.16px;
}

.hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__eyebrow {
  min-height: 24px;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__eyebrow strong {
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.hero__title {
  display: block;
  width: 100%;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.hero-highlight {
  display: inline;
  background-image: linear-gradient(
    180deg,
    transparent 68%,
    var(--accent-light) 68%,
    var(--accent-light) 90%,
    transparent 90%
  );
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: nowrap;
}

.hero__description {
  max-width: 580px;
  margin-top: 32px;
  color: var(--text-mid);
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
}

.availability-pill {
  display: inline-flex;
  margin-top: 40px;
  padding: 8px 14px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
  letter-spacing: 0.01em;
}

.availability-pill__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(126, 80, 113, 0.15);
}

.hero__actions,
.footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__actions {
  margin-top: 28px;
}

.button {
  display: inline-flex;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.02em;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.button--primary {
  color: white;
  background: var(--button);
  font-weight: 500;
}

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

.button--secondary {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--text-mid);
  font-weight: 400;
  background: transparent;
}

.button--secondary:hover {
  border-color: rgba(0, 0, 0, 0.35);
  color: var(--text-dark);
}

.cta-arrow {
  display: inline-block;
  letter-spacing: 0.27px;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.external-arrow {
  font-family: system-ui, sans-serif;
  line-height: normal;
}

a:hover .cta-arrow,
button:hover .cta-arrow {
  transform: translateX(4px);
}

.hero__portrait {
  position: absolute;
  top: -100px;
  right: 0;
  width: 480px;
  height: auto;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 110px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.reference-page .proof-strip {
  display: flex;
  width: auto;
  min-height: 0;
  margin-inline: 0;
  padding-top: 0;
  border-top: 0;
}

.proof-item {
  display: flex;
  min-width: 0;
  padding: 8px 32px;
  align-items: flex-start;
  gap: 14px;
}

.proof-item + .proof-item {
  border-left: 1px solid var(--border);
}

.proof-item__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-light);
}

.section-heading {
  display: flex;
  min-height: 67.2px;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.section-heading h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.section-heading > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.02em;
}

.work-list {
  display: flex;
  margin-top: 56px;
  flex-direction: column;
  gap: 56px;
}

.work-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  transition:
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.work-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: var(--surface-card-strong);
  box-shadow: 0 12px 40px -16px rgba(28, 28, 26, 0.12);
  transform: translateY(-2px);
}

.work-card__media {
  min-width: 0;
  overflow: hidden;
}

.work-card--image-right .work-card__media {
  order: 2;
}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-card:hover .work-card__media img {
  transform: scale(1.012);
}

.work-card__content {
  display: flex;
  min-width: 0;
  padding: 56px 52px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-card);
}

.work-card__content::before {
  display: block;
  content: '';
}

.work-card__intro {
  display: block;
}

.work-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}

.work-card__eyebrow span {
  color: var(--accent);
  font-weight: 500;
}

.work-card h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.work-card__description {
  color: var(--text-mid);
  font-size: 15px;
  font-weight: 400;
  line-height: 25.5px;
}

.work-card__footer {
  display: block;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.tag-list li {
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
}

.work-card__link {
  display: inline;
  width: fit-content;
  color: var(--link);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.02em;
}

.videos-section {
  min-height: 883.33px;
}

.videos-section__intro {
  max-width: 620px;
  margin-top: 20px;
  color: var(--text-mid);
  font-size: 15px;
  font-weight: 300;
  line-height: 25.5px;
}

.videos-section__intro a {
  font-weight: 500;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 56px;
  gap: 20px;
}

.video-card {
  display: flex;
  height: 497.145px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--text-dark) 16%, transparent);
  border-radius: var(--radius-lg);
  color: var(--text-dark);
  background: var(--surface-card);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.video-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: var(--surface-card-strong);
  box-shadow: 0 12px 40px -16px rgba(28, 28, 26, 0.12);
  transform: translateY(-2px);
}

.video-card__thumbnail {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #d7d8db;
}

.video-card__thumbnail::after {
  position: absolute;
  inset: 0;
  content: '';
  background: transparent;
  transition: background 160ms ease;
}

.video-card:hover .video-card__thumbnail::after {
  background: rgba(28, 28, 26, 0.16);
}

.video-card__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-card__play svg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  transition: transform 160ms ease;
}

.video-card:hover .video-card__play svg {
  transform: scale(1.08);
}

.video-card__title {
  display: block;
  min-height: 80px;
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.59375px;
}

.video-card__title-short {
  display: none;
}

.video-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  padding: 5vh 24px;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 19, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade 160ms ease-out;
}

.video-modal__panel {
  width: min(440px, 43.875vh);
  max-width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  animation: modal-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-modal__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 9 / 16;
  background: black;
  box-shadow: 0 24px 80px -16px rgba(0, 0, 0, 0.6);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, 0.14);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.video-modal__close:hover {
  background: rgba(255, 255, 255, 0.26);
}

.video-modal__caption {
  display: flex;
  margin-top: 16px;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.video-modal__caption a {
  flex: 0 0 auto;
  color: white;
  font-size: 13px;
  font-weight: 500;
}

/* Collapsible text alternative under a video (RGAA 4.1). */
.video-transcript {
  margin-top: 16px;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.65;
}

.video-transcript summary {
  color: var(--text-dark);
  font-weight: 500;
  cursor: pointer;
}

.video-transcript p {
  margin-top: 8px;
}

.video-modal .video-transcript {
  color: rgba(255, 255, 255, 0.82);
}

.video-modal .video-transcript summary {
  color: white;
}

.video-transcript-link {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  gap: 5px;
  color: var(--link);
  font-size: 13px;
  font-weight: 500;
}

.video-transcript-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.video-modal .video-transcript-link {
  color: white;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.writing-section {
  min-height: 1312.19px;
}

.article-list {
  margin-top: 56px;
}

.article-row {
  display: grid;
  min-height: 249px;
  padding-block: 32px;
  grid-template-columns: 48px minmax(0, 1fr) 280px;
  align-items: start;
  gap: 40px;
  border-top: 1px solid var(--border);
  transition: color 160ms ease;
}

.article-row:last-child {
  min-height: 250px;
  border-bottom: 1px solid var(--border);
}

.article-row:hover .article-row__title {
  color: var(--link);
}

.article-row__number {
  padding-top: 4px;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
}

.article-row__copy {
  display: flex;
  max-width: 760px;
  flex-direction: column;
  gap: 8px;
}

.article-row__category {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  line-height: 17.6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-row__title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.02em;
  transition: color 160ms ease;
}

.article-row__description {
  max-width: 560px;
  margin-top: 2px;
  color: var(--text-mid);
  font-size: 15px;
  font-weight: 300;
  line-height: 24.75px;
}

.article-row__image {
  display: block;
  width: 280px;
  height: 184px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.article-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}

.article-row:hover .article-row__image img {
  transform: scale(1.02);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-cta {
  display: grid;
  height: 313.8px;
  padding-top: 80px;
  padding-bottom: 64px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  border-bottom: 1px solid var(--border);
}

.section-label {
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading > .section-label {
  margin-bottom: 22px;
}

.footer-cta h2 {
  max-width: 780px;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.footer-cta__title-short {
  display: none;
}

.footer-cta__actions {
  gap: 10px;
  justify-content: flex-end;
}

.footer-cta__actions .button--secondary {
  min-width: 240.3125px;
}

.footer-links {
  display: grid;
  height: 241.16px;
  padding-top: 40px;
  padding-bottom: 48px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: start;
  gap: 40px;
}

.footer-brand img {
  width: 120px;
  height: auto;
  opacity: 0.65;
}

.footer-brand p {
  max-width: 260px;
  margin-top: 12px;
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 300;
  line-height: 20.8px;
}

.footer-group h3 {
  margin-bottom: 16px;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
  line-height: 17.6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-group--columns {
  grid-column: span 2;
}

.footer-group--columns ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
}

.footer-group a {
  display: block;
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 400;
  line-height: 22.39px;
  transition: color 150ms ease;
}

.footer-group a:hover {
  color: var(--text-dark);
}

.footer-legal {
  display: flex;
  padding-top: 18px;
  padding-bottom: 28px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-light);
  font-size: 12px;
}

.footer-legal a {
  color: var(--text-mid);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal a:hover {
  color: var(--text-dark);
}

.footer-legal span::before {
  margin-right: 8px;
  content: '·';
}

@media (max-width: 1100px) and (min-width: 769px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .desktop-nav--primary {
    justify-self: center;
  }

  .hero__portrait {
    top: -64px;
    width: 380px;
  }

  .hero__copy {
    width: 650px;
  }

  .hero__title {
    font-size: clamp(50px, 6vw, 64px);
  }

  .proof-item {
    padding-inline: 20px;
  }

  .work-card__content {
    padding: 44px 36px;
  }
}

@media (max-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .videos-section,
  .writing-section {
    min-height: 0;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .desktop-nav--secondary {
    display: none;
  }

  .site-header__inner {
    grid-template-columns: auto 1fr;
  }

  .desktop-nav--primary {
    justify-self: end;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 88px;
  }

  .site-header__inner {
    display: flex;
    min-height: 56px;
    padding: 8px 24px;
    justify-content: space-between;
  }

  .site-header__inner .brand {
    margin-left: 0;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .nav-spacer {
    height: 56px;
  }

  .hero {
    padding: 72px 32px 140px;
  }

  .hero__stage {
    display: flex;
    height: auto;
    flex-direction: column;
  }

  .hero__copy {
    width: 100%;
    text-align: center;
  }

  .hero__eyebrow {
    white-space: normal;
    text-wrap: balance;
  }

  .hero__title {
    width: 100%;
    align-items: center;
    font-size: 40px;
    line-height: 1.06;
    letter-spacing: -0.03em;
  }

  .hero-highlight {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }

  .hero__description {
    margin-inline: auto;
  }

  .availability-pill {
    width: 100%;
    min-height: 57px;
    justify-content: center;
    text-align: left;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__portrait {
    position: static;
    order: 1;
    width: 100%;
    max-width: 360px;
    margin: 32px auto 0;
  }

  .proof-strip {
    display: flex;
    width: calc(100% + 40px);
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-inline: -20px;
    padding-top: 32px;
    flex-direction: column;
  }

  .proof-item {
    padding: 20px 24px;
  }

  .proof-item + .proof-item {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .section-heading {
    min-height: 48px;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .section-heading h2 {
    font-size: 30px;
    line-height: 48px;
  }

  .work-list,
  .article-list {
    margin-top: 32px;
  }

  .work-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .work-card:nth-child(1) .work-card__media {
    aspect-ratio: 1.77127;
  }

  .work-card:nth-child(2) .work-card__media {
    aspect-ratio: 2 / 1;
  }

  .work-card:nth-child(3) .work-card__media {
    aspect-ratio: 1.21519;
  }

  .work-card--image-right .work-card__media {
    order: 0;
  }

  .work-card__content {
    min-height: 356px;
    padding: 32px 24px;
    gap: 24px;
  }

  .tag-list li {
    line-height: 19.19px;
  }

  .videos-section__intro {
    margin-top: 32px;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
    gap: 12px;
  }

  .video-card__title {
    min-height: 0;
    padding: 16px 16px 20px;
  }

  .video-card {
    height: auto;
  }

  .article-row {
    min-height: 0;
    padding-block: 24px;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 24px;
  }

  .article-row__number {
    display: none;
  }

  .article-row__title {
    font-size: 20px;
    line-height: 25px;
  }

  .article-row__image {
    width: 96px;
    height: 72px;
    border-radius: var(--radius-md);
  }

  .footer-cta {
    height: auto;
    padding: 60px 24px 48px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }

  .footer-cta .section-label {
    margin-bottom: 16px;
  }

  .footer-cta h2 {
    font-size: 36px;
  }

  .footer-cta__actions {
    width: 100%;
    gap: 10px;
    justify-content: flex-start;
  }

  .footer-links {
    height: auto;
    padding: 40px 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .footer-group--columns {
    grid-column: auto;
  }

  .footer-group--columns ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 500px) {
  .hero__actions {
    flex-wrap: nowrap;
  }

}

@media (max-width: 400px) {
  .article-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .article-row__image {
    width: 100%;
    height: 160px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .hero {
    padding-inline: 20px;
  }

  .hero__eyebrow {
    white-space: normal;
  }

  .proof-strip {
    width: calc(100% + 40px);
    margin-inline: -20px;
  }

  .hero__title {
    font-size: 36px;
  }

  .hero__actions {
    flex-wrap: wrap;
  }

  .hero__actions .button {
    width: 100%;
  }
}

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

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

.reference-page {
  min-height: 1px;
}

.reference-page [hidden] {
  display: none !important;
}

.route-error {
  text-align: center;
}

.route-error button {
  margin-top: 16px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  background: var(--surface-card-solid);
  cursor: pointer;
}

.not-found-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 160px 32px;
  text-align: center;
}

.not-found-page h1 {
  margin-bottom: 20px;
  color: var(--text-dark);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.not-found-page > p:not(.section-label) {
  max-width: 440px;
  margin: 0 auto 40px;
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1.6;
}

.not-found-page nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  color: var(--text-light);
  font-size: 16px;
}

.not-found-page nav > span {
  margin-right: 8px;
}

.contact-form-status {
  margin: 0;
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text-mid);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.5;
}

.contact-form-status.is-success {
  color: #27583c;
  background: #dcecdf;
}

.contact-form-status.is-error {
  color: #7a3035;
  background: #f2dfe1;
}

@media (max-width: 600px) {
  .not-found-page {
    padding: 120px 20px;
  }
}

/* Semantic portfolio shell ------------------------------------------------ */

::selection {
  color: var(--text-dark);
  background: var(--accent-light);
}

body,
.site-header__inner,
.mobile-menu,
.site-footer,
.work-card,
.video-card,
.resource-grid > a,
.contact-form,
.coming-soon-card {
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

main:focus {
  outline: none;
}

figure {
  margin: 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  border-color: color-mix(in srgb, var(--text-dark) 10%, transparent);
  background: var(--header-bg);
  box-shadow: 0 10px 32px -28px var(--text-dark);
}

.brand {
  gap: 11px;
  justify-self: start;
  color: var(--text-dark);
}

.brand-symbol {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--button-text);
  background: var(--text-dark);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.08em;
}

.brand-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.desktop-nav--primary {
  justify-self: center;
}

.nav-link:hover,
.menu-button:hover,
.theme-toggle:hover,
.language-toggle:hover {
  background: color-mix(in srgb, var(--text-dark) 6%, transparent) !important;
}

.nav-link[aria-current='page'] {
  color: var(--text-dark);
  background: color-mix(in srgb, var(--button) 11%, transparent);
}

.nav-link-muted[aria-current='page'] {
  color: var(--text-dark);
}

.mobile-menu {
  background: var(--menu-bg);
}

.mobile-menu__primary a[aria-current='page'] {
  color: var(--accent);
}

.theme-toggle {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    transform 180ms ease !important;
}

.theme-toggle:hover svg {
  transform: rotate(8deg);
}

.theme-toggle svg {
  transition: transform 180ms ease;
}

.theme-toggle--mobile {
  display: none !important;
}

.language-toggle {
  transition: background-color 150ms ease !important;
}

.language-toggle--mobile {
  display: none !important;
}

.button {
  cursor: pointer;
}

.button--primary {
  color: var(--button-text);
}

.button--secondary {
  border-color: color-mix(in srgb, var(--text-dark) 20%, transparent);
}

.button--secondary:hover {
  border-color: color-mix(in srgb, var(--text-dark) 38%, transparent);
}

.button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.home-section {
  padding-top: 96px;
  padding-bottom: 112px;
}

.home-section + .home-section {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.writing-section {
  min-height: 0;
}

.section-intro {
  max-width: 700px;
  margin-top: 20px;
  color: var(--text-mid);
  font-size: 17px;
  line-height: 1.65;
}

.proof-item h2 {
  margin-bottom: 3px;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.proof-item p {
  max-width: 270px;
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 500;
}

.footer-wordmark > span {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 24px;
  letter-spacing: -0.08em;
}

/* Interior page heroes ---------------------------------------------------- */

.page-hero {
  display: grid;
  min-height: 480px;
  padding-top: 132px;
  padding-bottom: 112px;
  align-items: center;
}

.page-hero--with-art {
  --hero-art-max: 430px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(48px, 7vw, 104px);
}

/* Landscape art gets a wider column and a taller cap: the default 0.65fr track
   and 430px cap are sized for a portrait, which leaves a wide photo as a
   letterboxed sliver. */
.page-hero--with-landscape-art {
  --hero-art-max: 560px;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
}

.page-hero__copy {
  max-width: 880px;
}

.page-hero h1,
.detail-hero h1,
.article-hero h1 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.page-hero__intro {
  max-width: 690px;
  margin-top: 28px;
  color: var(--text-mid);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
}

.page-hero__actions {
  display: flex;
  margin-top: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hero__art {
  width: 100%;
  max-width: var(--hero-art-max, 430px);
  aspect-ratio: var(--hero-art-ratio, auto);
  object-fit: cover;
  justify-self: end;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -42px var(--text-dark);
}

/* Where the hero art is zoomable the button becomes the grid item, so it takes
   over the alignment and the width cap the image used to own. The button itself
   is borderless: the art keeps the frame it has on the pages where it is not
   interactive, and only the focus ring is added. */
.page-hero .figure-zoom {
  width: 100%;
  max-width: var(--hero-art-max, 430px);
  justify-self: end;
}

.page-hero .figure-zoom .page-hero__art {
  max-width: none;
}

/* Research pages --------------------------------------------------------- */

.detail-hero {
  display: grid;
  min-height: 620px;
  padding-top: 128px;
  padding-bottom: 112px;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}

.detail-hero__copy > p:not(.section-label) {
  max-width: 650px;
  margin-top: 28px;
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1.65;
}

.detail-hero__copy .tag-list {
  margin-top: 32px;
  margin-bottom: 0;
}

.detail-hero__art {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card-solid);
  box-shadow: 0 28px 70px -48px var(--text-dark);
}

.detail-body {
  display: grid;
  padding-top: 104px;
  padding-bottom: 120px;
  grid-template-columns: 230px minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(56px, 9vw, 140px);
  border-top: 1px solid var(--border);
}

.detail-aside {
  position: sticky;
  top: 104px;
  height: fit-content;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.detail-aside p {
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.65;
}

.detail-aside__label {
  margin-bottom: 12px;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-aside a {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  gap: 5px;
  color: var(--link);
  font-size: 13px;
  font-weight: 500;
}

.detail-prose > section + section,
.detail-prose > figure + section {
  margin-top: 80px;
}

.detail-prose h2 {
  margin-bottom: 24px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.detail-prose section > p:not(.section-label) {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 17px;
  line-height: 1.9;
}

.detail-prose section > p:not(.section-label) + p {
  margin-top: 20px;
}

.detail-prose section > .button {
  margin-top: 28px;
  font-family: var(--font-outfit), system-ui, sans-serif;
}

.detail-figure {
  margin-top: 80px;
}

.detail-figure img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card-solid);
}

.detail-figure figcaption,
.article-media figcaption {
  margin-top: 12px;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.55;
}

.detail-pagination {
  display: grid;
  padding-top: 48px;
  padding-bottom: 112px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.detail-pagination a {
  display: flex;
  min-width: 0;
  padding: 8px 40px;
  flex-direction: column;
  gap: 8px;
}

.detail-pagination a:first-child {
  padding-left: 0;
}

.detail-pagination a:last-child {
  padding-right: 0;
  border-left: 1px solid var(--border);
  text-align: right;
}

.detail-pagination span {
  color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-pagination strong {
  overflow: hidden;
  color: var(--text-dark);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.detail-pagination a:hover strong {
  color: var(--link);
}

/* Writing --------------------------------------------------------------- */

.article-hero {
  max-width: 1010px;
  padding-top: 132px;
  padding-bottom: 72px;
  text-align: center;
}

.article-hero > p:last-child {
  max-width: 720px;
  margin: 28px auto 0;
  color: var(--text-mid);
  font-size: 19px;
  line-height: 1.65;
}

.article-cover {
  padding-bottom: 88px;
}

.article-cover img {
  width: 100%;
  max-height: 680px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card-solid);
  object-fit: cover;
}

/* The reading time sits under the cover, in the label style the article hero
   already uses for its category and date. The section keeps its own bottom
   padding, so the line reads as a caption rather than a new block. */
.prerendered__label--cover {
  text-align: center;
}

.article-cover__meta {
  margin-top: 16px;
  margin-bottom: 0;
  text-align: center;
}

.article-prose {
  max-width: 800px;
  padding-bottom: 112px;
}

.article-prose > p:not(.article-source) {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 18px;
  line-height: 1.95;
}

.article-prose > p + p {
  margin-top: 28px;
}

.article-prose h2 {
  margin-top: 56px;
  margin-bottom: 20px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.article-prose h3 {
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--text-dark);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
}

.article-prose ul,
.article-prose ol {
  margin: 24px 0;
  padding-left: 24px;
}

.article-prose li {
  margin-top: 12px;
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 18px;
  line-height: 1.9;
}

.article-prose ul > li::marker {
  color: var(--accent);
}

.article-prose ol > li::marker {
  color: var(--text-light);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-weight: 500;
}

.article-prose ol > li[id^='ref-'] {
  margin-top: 16px;
  scroll-margin-top: 120px;
  font-size: 15px;
  line-height: 1.7;
}

.article-prose :is(p, li) > a[href^='#ref-'] {
  color: var(--link);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: 0.15em;
}

.article-prose :is(p, li) > a[href^='#ref-']:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-prose strong {
  color: var(--text-dark);
  font-weight: 600;
}

.article-prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-prose a:hover {
  text-decoration-color: var(--accent);
}

.article-figure {
  margin-top: 48px;
  margin-bottom: 48px;
}

.article-figure img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card-solid);
}

.article-figure figcaption {
  margin-top: 12px;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.55;
}

.figure-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.figure-zoom:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.figure-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  padding: 5vh 24px;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 19, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade 160ms ease-out;
}

.figure-lightbox__figure {
  display: flex;
  max-width: min(1040px, 100%);
  max-height: 90vh;
  margin: 0;
  flex-direction: column;
  gap: 12px;
  animation: modal-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.figure-lightbox__figure img {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--surface-card-solid);
  object-fit: contain;
}

.figure-lightbox__figure figcaption {
  max-width: 720px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.figure-lightbox__close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, 0.14);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.figure-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.26);
}

.article-source {
  margin-top: 40px;
}

.article-source a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--link);
  font-size: 14px;
  font-weight: 500;
}

.article-media {
  margin-top: 48px;
}

.article-media iframe,
.article-media video {
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  background: #000;
}

.coming-soon-card {
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.coming-soon-card h2 {
  max-width: 600px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.coming-soon-card > p:not(.section-label) {
  max-width: 620px;
  margin-top: 22px;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.7;
}

.coming-soon-card .button {
  margin-top: 30px;
}

.related-writing {
  display: grid;
  padding-top: 64px;
  padding-bottom: 112px;
  grid-template-columns: 160px repeat(2, minmax(0, 1fr));
  gap: 32px;
  border-top: 1px solid var(--border);
}

.related-writing > a {
  display: flex;
  min-width: 0;
  padding-left: 32px;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--border);
}

.related-writing > a span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.related-writing > a strong {
  color: var(--text-dark);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
}

.related-writing > a:hover strong {
  color: var(--link);
}

/* About and research profile ------------------------------------------- */

.profile-story {
  display: grid;
  padding-top: 112px;
  padding-bottom: 112px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(56px, 9vw, 140px);
  border-top: 1px solid var(--border);
}

.profile-story h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.profile-story__copy {
  padding-top: 2px;
}

.profile-story__copy p {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 16px;
  line-height: 1.9;
}

.profile-story__copy p + p {
  margin-top: 22px;
}

.profile-story__copy a {
  display: inline-flex;
  margin-top: 30px;
  align-items: center;
  gap: 5px;
  color: var(--link);
  font-size: 14px;
  font-weight: 500;
}

.accessibility-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accessibility-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 16px;
  line-height: 1.85;
}

.accessibility-list li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: '';
}

.profile-section {
  padding-top: 104px;
  padding-bottom: 112px;
}

.profile-section--surface {
  max-width: none;
  background: var(--surface);
}

.profile-timeline {
  display: grid;
  margin-top: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.profile-timeline article {
  min-height: 220px;
  padding: 32px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.profile-timeline h3 {
  margin-bottom: 12px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
}

.profile-timeline article > p:last-child {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.65;
}

.expertise-grid {
  display: grid;
  margin-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.expertise-grid li {
  min-height: 112px;
  padding: 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
}

.principles {
  padding-top: 112px;
  padding-bottom: 128px;
}

.principles__grid {
  display: grid;
  margin-top: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.principles__grid article {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.principles__grid span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.principles__grid h2 {
  margin-top: 24px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.principles__grid p {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.7;
}

/* Resume --------------------------------------------------------------- */

.resume-layout {
  display: grid;
  padding-top: 24px;
  padding-bottom: 128px;
  grid-template-columns: 260px minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(56px, 9vw, 140px);
}

.resume-layout > aside {
  position: sticky;
  top: 112px;
  height: fit-content;
}

.resume-layout > aside section {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.resume-layout > aside section:last-child {
  border-bottom: 1px solid var(--border);
}

.resume-layout > aside h2 {
  margin-bottom: 14px;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resume-layout > aside a,
.resume-layout > aside p,
.resume-layout > aside li {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.7;
}

.resume-layout > aside a:hover {
  color: var(--link);
}

.resume-layout > aside ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resume-content > section {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.resume-content > section:first-child {
  padding-top: 24px;
}

.resume-content > section:last-child {
  border-bottom: 1px solid var(--border);
}

.resume-content > section > h2 {
  max-width: 680px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.resume-content > section > h2 + p {
  max-width: 650px;
  margin-top: 18px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}

.resume-entry {
  display: grid;
  padding: 24px 0;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.resume-entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.resume-entry > p:first-child {
  grid-row: 1 / span 3;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.55;
}

.resume-entry h3 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.resume-entry h3 + p,
.resume-entry h3 + p + a {
  margin-top: 7px;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.6;
}

.resume-entry a {
  width: fit-content;
  color: var(--link) !important;
  font-weight: 500;
}

/* Resources and archive ------------------------------------------------ */

.resource-grid {
  display: grid;
  padding-top: 24px;
  padding-bottom: 128px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.resource-grid > a {
  display: flex;
  min-height: 360px;
  padding: 32px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.resource-grid > a:hover,
.resource-grid > a:focus-visible {
  border-color: color-mix(in srgb, var(--text-dark) 18%, transparent);
  background: var(--surface-card-strong);
  box-shadow: 0 12px 40px -16px var(--soft-shadow);
  transform: translateY(-2px);
}

.resource-grid > a > span {
  margin-bottom: auto;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.resource-grid .section-label {
  margin: 42px 0 12px;
}

.resource-grid h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.resource-grid h2 + p {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.65;
}

.resource-grid strong {
  display: inline-flex;
  margin-top: 24px;
  align-items: center;
  gap: 5px;
  color: var(--link);
  font-size: 13px;
  font-weight: 500;
}

.resource-list,
.archive-list {
  padding-top: 16px;
  padding-bottom: 128px;
}

.resource-list > a {
  display: grid;
  min-height: 220px;
  padding: 36px 0;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  align-items: start;
  gap: 32px;
  border-top: 1px solid var(--border);
}

.resource-list > a:last-child {
  border-bottom: 1px solid var(--border);
}

.resource-list > a > span,
.resource-list > a > strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.resource-list > a > strong {
  justify-self: end;
  font-size: 20px;
}

.resource-list h2 {
  max-width: 780px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.resource-list h2 + p {
  max-width: 700px;
  margin-top: 12px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.65;
}

.resource-list > a:hover h2 {
  color: var(--link);
}

.archive-list article {
  display: grid;
  min-height: 130px;
  padding: 32px 0;
  grid-template-columns: 180px minmax(0, 1fr) 260px;
  align-items: baseline;
  gap: 32px;
  border-top: 1px solid var(--border);
}

.archive-list article:last-child {
  border-bottom: 1px solid var(--border);
}

.archive-list time,
.archive-list p {
  color: var(--text-light);
  font-size: 13px;
  line-height: 1.5;
}

.archive-list h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
}

/* Contact -------------------------------------------------------------- */

.contact-layout {
  display: grid;
  padding-top: 24px;
  padding-bottom: 128px;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(56px, 9vw, 140px);
}

.contact-details {
  padding-top: 32px;
}

.contact-details h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.contact-details > p:not(.section-label) {
  max-width: 430px;
  margin: 20px 0 30px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}

.contact-details > a {
  display: flex;
  width: fit-content;
  margin-top: 12px;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-size: 15px;
  font-weight: 500;
}

.contact-form {
  display: flex;
  padding: clamp(28px, 4vw, 48px);
  flex-direction: column;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field > label {
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 500;
}

.contact-form__required {
  color: var(--accent);
}

.contact-form__error {
  color: #7a3035;
  font-size: 13px;
  line-height: 1.45;
}

:root[data-theme='dark'] .contact-form__error {
  color: #efc6ca;
}

.contact-form__note {
  color: var(--text-light);
  font-size: 12px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--text-dark) 50%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  background: var(--field-bg);
  outline: 0;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.contact-form input {
  height: 48px;
  padding: 0 14px;
}

.contact-form textarea {
  min-height: 176px;
  padding: 12px 14px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--link);
  background: var(--surface-card-solid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 14%, transparent);
}

.contact-form .button {
  width: fit-content;
}

/* Honeypot: off-screen and out of the tab order, so only a bot ever fills it. */
.contact-form .contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-status a {
  display: inline-flex;
  margin-top: 6px;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card {
  display: none;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 16px;
}

.contact-card h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.contact-card__intro {
  max-width: 560px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}

.contact-card__frame {
  width: min(100%, 620px);
  margin-top: 10px;
}

@supports (container-type: inline-size) {
  .contact-card__frame {
    container-type: inline-size;
  }
}

/* The business card -------------------------------------------------------
   Drawn at the exact proportions of an 85 x 55 mm card. Every measurement is a
   multiple of --u, which is one percent of the card width on screen (1cqw) and
   0.85 mm — one percent of 85 mm — once printed. The screen and print versions
   therefore keep the same geometry, and the print block below only has to add
   the bleed. */

.business-card {
  --u: 4.6px;
  /* A card is a printed object, so it keeps its own palette instead of simply
     following the theme tokens. The dark theme overrides these below, on screen
     only, and the print and share renders stay white on purpose. */
  --card-accent: #7e5071;
  --card-ink: #1c1c1a;
  --card-link: #365c8a;
  --card-muted: #5c5b56;
  --card-plate: #ffffff;
  display: grid;
  width: calc(100 * var(--u));
  height: calc(64.71 * var(--u));
  padding: calc(6 * var(--u));
  grid-template-areas:
    'identity portrait'
    'identity code';
  grid-template-columns: minmax(0, 1fr) calc(30 * var(--u));
  /* The portrait keeps its full band: 28u in the grid plus the 6u it bleeds
     into the top margin, so it spans 0 to 34u from the card's top edge. The
     code below it then gets 64.71u − 34u − 24u = 6.71u of free height, split
     evenly: 3.355u above it and 3.355u down to the bottom edge. */
  grid-template-rows: calc(28 * var(--u)) minmax(0, 1fr);
  gap: calc(3.355 * var(--u)) calc(4 * var(--u));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--card-ink);
  background: var(--card-plate);
  box-shadow: 0 30px 70px -50px var(--soft-shadow);
  font-family: var(--font-outfit), system-ui, sans-serif;
}

@supports (container-type: inline-size) {
  .business-card {
    --u: 1cqw;
  }
}

/* The panel bleeds to the top and right edges of the card, and multiply lets
   the sketch keep a transparent, tinted background everywhere. */
/* The portrait sits on the card's own white: its sketch background is
   transparent at the top and opaque white below, so a tinted panel behind it
   would print as a two tone patch with a visible edge. Keeping the panel white
   also means the paper edge holds nothing but the card's background, which is
   what a print shop wants in the bleed — and it means the drawing needs no
   bleed of its own. */
.business-card__portrait {
  width: calc(36 * var(--u));
  height: calc(34 * var(--u));
  margin: calc(-6 * var(--u)) calc(-6 * var(--u)) 0 0;
  grid-area: portrait;
  /* The card sizes this image itself: the site-wide `img { max-width: 100% }`
     would otherwise clamp it to its grid column. */
  max-width: none;
  /* The whole sketch, exactly as the home page shows it: `contain` never cuts
     the head or the torso, and the white card hides the leftover width. */
  object-fit: contain;
  object-position: 50% 0%;
}

.business-card__identity {
  display: flex;
  grid-area: identity;
  flex-direction: column;
}

.business-card__name {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: calc(6.0 * var(--u));
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.business-card__role {
  margin-top: calc(1.3 * var(--u));
  color: var(--card-muted);
  font-size: calc(2.4 * var(--u));
  line-height: 1.45;
}

.business-card__rule {
  width: calc(11 * var(--u));
  height: calc(0.5 * var(--u));
  margin: calc(3.4 * var(--u)) 0 calc(3 * var(--u));
  background: var(--card-accent);
}

.business-card__tagline {
  max-width: calc(46 * var(--u));
  font-size: calc(3 * var(--u));
  line-height: 1.4;
}

.business-card__contacts {
  display: flex;
  margin-top: auto;
  padding-top: calc(4 * var(--u));
  flex-direction: column;
  gap: calc(1 * var(--u));
  font-size: calc(2.35 * var(--u));
  line-height: 1.5;
}

.business-card__contacts a {
  color: var(--card-muted);
  transition: color 140ms ease;
}

.business-card__contacts a:hover {
  color: var(--card-link);
}

.business-card__code {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  /* Down into the card's bottom margin, which is what makes the space above the
     code equal to the space below it. The black modules still sit 5.05 mm from
     the trim once printed: 2.85 mm of margin plus the code's own quiet zone. */
  margin-bottom: calc(-2.645 * var(--u));
  grid-area: code;
  place-self: end end;
}

/* The share variant: the same card at the 1200 x 630 shape link previews render
   (1.905:1), with the QR dropped and the contacts trimmed to the domain. It is
   hidden on the page — it exists so `pnpm social:png` can render it — and shows
   only while the capture runs. Its portrait panel is 48u x 52.5u, which is the
   sketch's own 0.914 ratio, so nothing is cropped at either size. */
.share-card {
  display: none;
}

.business-card--share {
  --u: 12px;
  width: calc(100 * var(--u));
  height: calc(52.5 * var(--u));
  grid-template-areas: 'identity portrait';
  grid-template-columns: minmax(0, 1fr) calc(48 * var(--u));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.business-card--share .business-card__portrait {
  width: calc(48 * var(--u));
  height: calc(52.5 * var(--u));
  margin: calc(-6 * var(--u)) calc(-6 * var(--u)) calc(-6 * var(--u)) 0;
  object-fit: contain;
}

.business-card--share .business-card__name {
  font-size: calc(5.2 * var(--u));
}

.business-card--share .business-card__role {
  margin-top: calc(1.4 * var(--u));
  font-size: calc(2.1 * var(--u));
}

.business-card--share .business-card__rule {
  width: calc(12 * var(--u));
  height: calc(0.6 * var(--u));
  margin: calc(2.6 * var(--u)) 0 calc(2 * var(--u));
}

.business-card--share .business-card__tagline {
  max-width: calc(40 * var(--u));
  font-size: calc(2.4 * var(--u));
}

.business-card--share .business-card__contacts {
  padding-top: calc(1.5 * var(--u));
  font-size: calc(2.2 * var(--u));
}

/* While the share capture runs, nothing but the share card is on screen. */
.share-capture .site-header,
.share-capture .nav-spacer,
.share-capture .site-footer,
.share-capture main > *:not(.contact-layout),
.share-capture .contact-layout > *:not(.contact-card),
.share-capture .contact-card > *:not(.share-card) {
  display: none !important;
}

.share-capture .contact-card {
  display: block !important;
}

.share-capture .share-card {
  display: block;
}

/* The static fallback inside #root, before React takes over. It is styled as a
   plain reading view of the page so the first paint is the page's own text
   rather than an unstyled flash. */
.prerendered {
  max-width: 960px;
  margin-inline: auto;
  padding: 180px 32px 120px;
  color: var(--text-dark);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}

.prerendered h1 {
  margin-top: 18px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(38px, 5.5vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.prerendered h2 {
  margin-top: 56px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.prerendered h3 {
  margin-top: 26px;
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.prerendered p {
  margin-top: 16px;
  color: var(--text-mid);
}

.prerendered__label {
  margin-top: 22px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prerendered__meta {
  color: var(--text-light);
  font-size: 15px;
}

.prerendered ul,
.prerendered ol {
  margin-top: 16px;
  padding-left: 1.15em;
  color: var(--text-mid);
}

.prerendered ul {
  list-style: disc;
}

.prerendered ol {
  list-style: decimal;
}

.prerendered li {
  margin-top: 12px;
}

.prerendered a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* In the dark theme the card becomes a dark panel rather than a bright plate on
   the page: the sketch inverts into white chalk on it, and the QR keeps its own
   white plate because scanners read dark modules on a light ground.
   The share variant is excluded — link previews have no theme — and the whole
   rule is scoped to the screen, so printing in dark mode still yields the white
   card a print shop expects. */
@media screen {
  :root[data-theme='dark'] .business-card:not(.business-card--share) {
    --card-accent: #d5a6c6;
    --card-ink: #f2efe9;
    --card-link: #94b9ed;
    --card-muted: #c2c0ba;
    --card-plate: #20252b;
  }

  :root[data-theme='dark'] .business-card:not(.business-card--share) .business-card__portrait {
    /* Same treatment as the home page's portrait: the sketch keeps its
       transparent ground, so the panel shows through and the pencil reads as
       light strokes on it, dimmed so it does not glare. */
    background: transparent;
    filter: brightness(0.86) saturate(0.9);
  }
}

/* Printing /contact yields the card alone: 85 x 55 mm of card inside 91 x 61 mm
   of paper, which leaves the 3 mm of bleed a print shop asks for. The named page
   keeps that paper size scoped to the card, so printing another page of the site
   still uses the visitor's own format. */
@page card {
  size: 91mm 61mm;
  margin: 0;
}

@media print {
  html,
  body,
  body * {
    /* Everything that survives printing belongs to the card's page. Without a
       single page name, the export emits an extra empty default-sized page. */
    page: card;
  }

  html,
  body {
    background: #ffffff;
  }

  body > :not(#root),
  #root > div > :not(main),
  main > :not(.contact-layout),
  .contact-layout > :not(.contact-card) {
    display: none !important;
  }

  .contact-layout {
    display: block;
    padding: 0;
  }

  .contact-card {
    display: block;
  }

  .contact-card > .section-label,
  .contact-card > h2,
  .contact-card__intro {
    display: none;
  }

  .contact-card__frame {
    /* Out of flow: nothing can push the card onto a second page. */
    position: absolute;
    top: 0;
    left: 0;
    width: 91mm;
    height: 61mm;
    padding: 3mm;
    margin: 0;
    page: card;
  }

  .business-card {
    --u: 0.85mm;
    /* The printed card is white whatever theme the visitor prints from. */
    --card-accent: #7e5071;
    --card-ink: #1c1c1a;
    --card-link: #365c8a;
    --card-muted: #5c5b56;
    --card-plate: #ffffff;
    page: card;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Video collection and player ----------------------------------------- */

.video-grid--research {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.video-grid--research .video-card {
  height: auto;
}

.video-grid--research .video-card__title {
  min-height: 76px;
  font-size: 14px;
  line-height: 1.5;
}

.video-card:focus-visible,
.work-card:focus-visible,
.article-row:focus-visible,
.resource-grid > a:focus-visible,
.resource-list > a:focus-visible,
.related-writing > a:focus-visible,
.detail-pagination a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.video-modal__panel--landscape {
  width: min(1040px, calc(100vw - 48px));
  max-width: 100%;
}

.video-modal__frame--landscape {
  aspect-ratio: 16 / 9;
}

.video-modal__frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-modal__caption > div {
  min-width: 0;
}

.video-modal__caption small {
  display: block;
  max-width: 760px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.5;
}

/* Whiteboard ----------------------------------------------------------- */

/* Dark mode ------------------------------------------------------------ */

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #15181c;
  --surface: #20252b;
  --surface-card: rgba(255, 255, 255, 0.045);
  --surface-card-strong: rgba(255, 255, 255, 0.085);
  --surface-card-solid: #252a31;
  --accent: #d5a6c6;
  --accent-light: #3a2937;
  --button: #779dd4;
  --button-hover: #91b2df;
  --button-text: #10151d;
  --link: #94b9ed;
  --text-dark: #f2efe9;
  --text-mid: #c2c0ba;
  --text-light: #aaa8a2;
  --border: #3b424b;
  --header-bg: rgba(31, 35, 41, 0.86);
  --menu-bg: rgba(21, 24, 28, 0.985);
  --soft-shadow: rgba(0, 0, 0, 0.45);
  --field-bg: rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] .skip-link {
  color: #15181c;
  background: #f2efe9;
}

:root[data-theme='dark'] .site-header__inner {
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 14px 36px -28px #000;
}

:root[data-theme='dark'] .brand-symbol {
  color: #15181c;
  background: #f2efe9;
}

:root[data-theme='dark'] .work-card:hover,
:root[data-theme='dark'] .video-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 44px -20px rgba(0, 0, 0, 0.72);
}

:root[data-theme='dark'] .availability-pill {
  background: rgba(255, 255, 255, 0.045);
}

:root[data-theme='dark'] .availability-pill__dot {
  box-shadow: 0 0 0 3px rgba(213, 166, 198, 0.16);
}

:root[data-theme='dark'] .contact-form-status.is-success {
  color: #c6e7d1;
  background: #213b2c;
}

:root[data-theme='dark'] .contact-form-status.is-error {
  color: #efc6ca;
  background: #472a2f;
}

:root[data-theme='dark'] .page-hero__art,
:root[data-theme='dark'] .detail-hero__art,
:root[data-theme='dark'] .detail-figure img,
:root[data-theme='dark'] .article-cover img,
:root[data-theme='dark'] .article-figure img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 74px -50px #000;
}

:root[data-theme='dark'] .hero__portrait,
:root[data-theme='dark'] .page-hero__art,
:root[data-theme='dark'] .detail-hero__art,
:root[data-theme='dark'] .detail-figure img,
:root[data-theme='dark'] .article-cover img,
:root[data-theme='dark'] .article-figure img {
  filter: brightness(0.86) saturate(0.9);
}

/* Research narrative ----------------------------------------------------- */

.research-thesis {
  display: flex;
  padding-top: 48px;
  padding-bottom: 48px;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 6px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.research-thesis .section-label {
  margin-bottom: 0;
}

.research-thesis__meta {
  color: var(--text-light);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.research-thesis .tag-list {
  width: 100%;
  margin-top: 22px;
  margin-bottom: 0;
}

.research-story {
  display: flex;
  padding-top: 104px;
  padding-bottom: 112px;
  flex-direction: column;
  gap: 32px;
  border-top: 1px solid var(--border);
}

.research-story h2 {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.research-story__copy {
  max-width: 40rem;
}

.research-story__copy p {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 17px;
  line-height: 1.85;
}

.research-story__copy p + p {
  margin-top: 24px;
}

.research-story__copy a {
  display: inline-flex;
  margin-top: 32px;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

/* The InPEx reference is a sentence with two sources inside it, not a
   call-to-action: it keeps the paragraph's own type and flow. */
.research-story__copy .research-story__talk {
  margin-top: 24px;
}

.research-story__copy .research-story__talk a {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  font-weight: 500;
}

.research-figures {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.research-figures__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.research-figures__list li {
  display: flex;
  padding: 48px 40px 52px;
  flex-direction: column;
  gap: 12px;
}

.research-figures__list li + li {
  border-left: 1px solid var(--border);
}

.research-figures__list strong {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.research-figures__list span {
  max-width: 30ch;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.6;
}

.research-section {
  padding-top: 104px;
  padding-bottom: 112px;
}

.research-section--surface {
  max-width: none;
  padding-inline: max(32px, calc((100vw - 1280px) / 2 + 32px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.research-section .section-heading h2 {
  max-width: 20ch;
}

.research-perspectives {
  display: grid;
  margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 40px 48px;
}

.research-perspectives article {
  display: flex;
  padding-top: 26px;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.research-perspectives span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.research-perspectives h3 {
  margin-top: 22px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.research-perspectives p {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.75;
}

.research-methods {
  display: grid;
  margin-top: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}

.research-chain {
  list-style: none;
}

.research-chain li {
  position: relative;
  padding: 26px 0 26px 74px;
  border-top: 1px solid var(--border);
}

.research-chain li::before {
  position: absolute;
  top: 26px;
  left: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-card-solid);
  color: var(--accent);
  content: counter(list-item, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
}

.research-chain__role {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.research-chain h3 {
  margin-top: 8px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.research-chain li > p:last-child {
  margin-top: 10px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.7;
}

.research-methods__copy p {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 17px;
  line-height: 1.85;
}

.research-methods__copy p + p {
  margin-top: 24px;
}

.research-section .detail-figure {
  margin-top: 72px;
}

.research-contribution {
  display: grid;
  padding-top: 104px;
  padding-bottom: 112px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(48px, 8vw, 120px);
  border-top: 1px solid var(--border);
}

.research-contribution h2 {
  max-width: 16ch;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.research-contribution__list ol {
  margin-top: 44px;
  border-top: 1px solid var(--border);
  list-style: none;
}

.research-contribution__list li {
  position: relative;
  padding: 26px 0 26px 52px;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 16px;
  line-height: 1.8;
}

.research-contribution__list li::before {
  position: absolute;
  top: 30px;
  left: 0;
  color: var(--accent);
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.research-contribution__aside {
  height: fit-content;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card-strong);
}

.research-contribution__aside h3 {
  margin-bottom: 20px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.research-contribution__aside p {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.75;
}

.research-contribution__aside p + p {
  margin-top: 18px;
}

.research-contribution__aside a {
  display: inline-flex;
  margin-top: 26px;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-size: 14px;
  font-weight: 500;
}

.research-next {
  padding-top: 96px;
  padding-bottom: 128px;
  border-top: 1px solid var(--border);
}

.research-next h2 {
  max-width: 22ch;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.research-next__actions {
  display: flex;
  margin-top: 36px;
  flex-wrap: wrap;
  gap: 12px;
}

.research-next__actions .button {
  font-family: var(--font-outfit), system-ui, sans-serif;
}

/* Research teaser on the home page --------------------------------------- */

.research-feature {
  scroll-margin-top: 120px;
}

.research-feature__body {
  display: grid;
  margin-top: 12px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}

.research-feature__title {
  max-width: 20ch;
  margin-bottom: 28px;
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.research-feature__lead {
  color: var(--text-mid);
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 16px;
  line-height: 1.85;
}

.research-feature__lead + .research-feature__lead {
  margin-top: 22px;
}

.research-feature__body .button {
  margin-top: 32px;
}

.research-feature__facts {
  display: grid;
  border-top: 1px solid var(--border);
}

.research-feature__facts li {
  display: flex;
  padding: 24px 0;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.research-feature__facts strong {
  font-family: var(--font-libre-baskerville), Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.research-feature__facts span {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.65;
}

.research-feature__context strong {
  color: var(--accent);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

:root[data-theme='dark'] .research-chain li::before {
  background: var(--surface);
}

/* Responsive geometry -------------------------------------------------- */

@media (max-width: 1180px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    padding-inline: 18px;
  }

  .nav-link,
  .nav-link-muted {
    padding-inline: 10px;
  }

  .page-hero--with-art {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 48px;
  }

  .page-hero--with-landscape-art {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  }

  .detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  }
}

@media (max-width: 1024px) {
  .page-hero,
  .detail-hero {
    min-height: 0;
  }

  .page-hero--with-art {
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  }

  .page-hero--with-landscape-art {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }

  .detail-body,
  .resume-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 56px;
  }

  .detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 40px;
  }

  .profile-story {
    gap: 56px;
  }

  .research-methods,
  .research-contribution,
  .research-feature__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .research-contribution__aside {
    padding: 28px;
  }

  .resource-grid {
    gap: 14px;
  }

  .resource-grid > a {
    min-height: 340px;
    padding: 26px;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 0.7fr) minmax(380px, 1.3fr);
    gap: 56px;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .theme-toggle--desktop,
  .language-toggle--desktop {
    display: none !important;
  }

  .theme-toggle--mobile,
  .language-toggle--mobile {
    display: inline-flex !important;
    justify-self: end;
  }

  .theme-toggle--mobile {
    margin-left: 8px;
  }

  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }
}

@media (max-width: 768px) {
  .section {
    padding-inline: 20px;
  }

  .site-header {
    top: 10px;
    padding-inline: 10px;
  }

  .site-header__inner {
    padding-inline: 14px;
  }

  .brand {
    gap: 8px;
  }

  .brand-symbol {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 17px;
  }

  .brand-name {
    max-width: 138px;
    font-size: 14px;
  }

  .theme-toggle--desktop,
  .language-toggle--desktop {
    display: none !important;
  }

  .theme-toggle--mobile,
  .language-toggle--mobile {
    display: inline-flex !important;
  }

  .theme-toggle--mobile {
    margin-left: auto;
  }

  .language-toggle--mobile {
    margin-left: 4px;
    margin-right: 2px;
  }

  .mobile-menu {
    padding: 92px 24px 32px;
  }

  .page-hero,
  .page-hero--with-art,
  .detail-hero {
    display: flex;
    padding-top: 88px;
    padding-bottom: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .page-hero h1,
  .detail-hero h1,
  .article-hero h1 {
    font-size: clamp(39px, 12vw, 54px);
  }

  .page-hero__intro,
  .detail-hero__copy > p:not(.section-label),
  .article-hero > p:last-child {
    font-size: 17px;
    line-height: 1.62;
  }

  .page-hero__art {
    width: min(100%, 420px);
    align-self: center;
  }

  .page-hero .figure-zoom {
    width: min(100%, 420px);
    max-width: 100%;
    align-self: center;
  }

  .page-hero .figure-zoom .page-hero__art {
    width: 100%;
  }

  .home-section {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .section-intro {
    margin-top: 16px;
    font-size: 15px;
  }

  .detail-hero__art {
    order: -1;
  }

  .detail-body,
  .resume-layout,
  .profile-story,
  .research-story,
  .research-methods,
  .research-contribution,
  .research-feature__body,
  .contact-layout {
    display: flex;
    padding-top: 72px;
    padding-bottom: 88px;
    flex-direction: column;
    gap: 56px;
  }

  .research-thesis {
    padding-top: 32px;
    padding-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .research-thesis .tag-list {
    margin-top: 18px;
  }

  .research-story h2 {
    font-size: 32px;
  }

  .research-story__copy p,
  .research-methods__copy p {
    font-size: 16px;
    line-height: 1.82;
  }

  .research-figures__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-figures__list li {
    padding: 32px 0;
  }

  .research-figures__list li + li {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .research-section,
  .research-section--surface {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .research-perspectives {
    margin-top: 40px;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .research-methods,
  .research-contribution,
  .research-feature__body {
    margin-top: 40px;
    gap: 48px;
  }

  .research-section .detail-figure {
    margin-top: 56px;
  }

  .research-contribution h2,
  .research-next h2 {
    font-size: 32px;
  }

  .research-next {
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .detail-aside,
  .resume-layout > aside {
    position: static;
    width: 100%;
  }

  .detail-prose > section + section,
  .detail-prose > figure + section,
  .detail-figure {
    margin-top: 64px;
  }

  .detail-prose h2 {
    font-size: 29px;
  }

  .detail-prose section > p:not(.section-label) {
    font-size: 16px;
    line-height: 1.85;
  }

  .detail-pagination {
    padding-top: 36px;
    padding-bottom: 80px;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-pagination a,
  .detail-pagination a:first-child,
  .detail-pagination a:last-child {
    padding: 24px 0;
    border-left: 0;
    text-align: left;
  }

  .detail-pagination a + a {
    border-top: 1px solid var(--border);
  }

  .article-hero {
    padding-top: 96px;
    padding-bottom: 52px;
  }

  .article-cover {
    padding-bottom: 64px;
  }

  .article-cover img {
    border-radius: var(--radius-lg);
  }

  .article-prose {
    padding-bottom: 80px;
  }

  .article-prose > p:not(.article-source) {
    font-size: 16px;
    line-height: 1.85;
  }

  .article-prose h2 {
    margin-top: 44px;
    font-size: 26px;
  }

  .article-prose h3 {
    margin-top: 32px;
    font-size: 19px;
  }

  .article-prose li {
    font-size: 16px;
    line-height: 1.85;
  }

  .related-writing {
    padding-top: 48px;
    padding-bottom: 80px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .related-writing > a {
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .profile-story h2 {
    font-size: 34px;
  }

  .profile-section,
  .principles {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .profile-timeline,
  .expertise-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-timeline article {
    min-height: 0;
    padding: 28px 24px;
  }

  .expertise-grid li {
    min-height: 0;
    padding: 24px;
  }

  .principles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .resume-layout {
    padding-top: 0;
  }

  .resume-content > section:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .resume-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .resume-entry > p:first-child {
    grid-row: auto;
  }

  .resource-grid {
    padding-top: 0;
    padding-bottom: 88px;
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-grid > a {
    min-height: 300px;
  }

  .resource-list,
  .archive-list {
    padding-top: 0;
    padding-bottom: 88px;
  }

  .resource-list > a {
    min-height: 0;
    padding: 30px 0;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 14px;
  }

  .resource-list h2 {
    font-size: 22px;
  }

  .archive-list article {
    min-height: 0;
    padding: 28px 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .archive-list h2 {
    grid-row: 1;
  }

  .contact-details {
    padding-top: 0;
  }

  .contact-form {
    padding: 24px;
  }

  .video-grid--research {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .video-modal__panel--landscape {
    width: calc(100vw - 24px);
  }

  .video-modal__caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }}

@media (max-width: 500px) {
  .page-hero__actions .button,
  .contact-form .button {
    width: 100%;
  }

  .resource-list > a {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .resource-list > a > strong {
    display: none;
  }
}

@media (max-width: 380px) {
  .brand-name {
    max-width: 112px;
  }

  .video-grid--research {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Print profile --------------------------------------------------------- */

@media print {
  @page {
    size: A4;
    margin: 14mm 16mm;
  }

  :root,
  :root[data-theme='dark'] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-card: #ffffff;
    --surface-card-strong: #ffffff;
    --surface-card-solid: #ffffff;
    --accent: #6c3f5d;
    --accent-light: #ead9e3;
    --button: #3f608f;
    --button-hover: #3f608f;
    --button-text: #ffffff;
    --link: #294d78;
    --text-dark: #111111;
    --text-mid: #333333;
    --text-light: #555555;
    --border: #c8c8c8;
    color-scheme: light;
  }

  html,
  body {
    color: #111 !important;
    background: #fff !important;
    font-size: 10pt;
  }

  .site-header,
  .site-footer,
  .mobile-menu,
  .nav-spacer,
  .print-hide,
  .resume-page .page-hero__actions {
    display: none !important;
  }

  .resume-page .page-hero {
    display: block;
    min-height: 0;
    max-width: none;
    padding: 0 0 10mm;
    border-bottom: 1px solid #777;
  }

  .resume-page .page-hero h1 {
    font-size: 28pt;
  }

  .resume-page .page-hero__intro {
    max-width: none;
    margin-top: 4mm;
    color: #333;
    font-size: 9.5pt;
    line-height: 1.45;
  }

  .resume-layout {
    display: grid;
    max-width: none;
    padding: 8mm 0 0;
    grid-template-columns: 46mm minmax(0, 1fr);
    gap: 10mm;
  }

  .resume-layout > aside {
    position: static;
  }

  .resume-layout > aside section,
  .resume-content > section {
    padding: 4mm 0;
    break-inside: avoid;
  }

  .resume-content > section:first-child {
    padding-top: 0;
  }

  .resume-content > section > h2 {
    font-size: 15pt;
  }

  .resume-entry {
    padding: 3.5mm 0;
    grid-template-columns: 34mm minmax(0, 1fr);
    column-gap: 5mm;
    break-inside: avoid;
  }

  .resume-entry h3 {
    color: #111;
    font-size: 10.5pt;
  }

  .resume-entry p,
  .resume-entry a,
  .resume-layout > aside a,
  .resume-layout > aside p,
  .resume-layout > aside li {
    color: #333 !important;
    font-size: 8.5pt;
  }

  a {
    color: #111 !important;
    text-decoration: none !important;
  }
}

/* The mobile header carries four items — brand, theme, language, menu — so it is
   laid out as a row rather than the three-column grid used on wide screens, and
   the brand shrinks instead of pushing the menu onto a second line. Declared
   last so it settles the layout whatever the earlier rules do. */
@media (max-width: 768px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: space-between;
  }

  .brand {
    min-width: 0;
  }

  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Small screens (phones) ------------------------------------------------ */

@media (max-width: 640px) {
  /* One video per line, with the short title instead of the full one. */
  .video-grid,
  .video-grid--research {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-card__title-full {
    display: none;
  }

  .video-card__title-short {
    display: inline;
  }

  /* The footer call-to-action drops to a shorter question on phones. */
  .footer-cta__title-full {
    display: none;
  }

  .footer-cta__title-short {
    display: inline;
  }

  /* The thesis title is long, so it shrinks rather than stacking into a wall. */
  .research-feature__title {
    font-size: 24px;
    line-height: 1.28;
  }

  .page-hero--with-landscape-art h1 {
    font-size: 30px;
    line-height: 1.16;
  }
}

/* Justified body copy ------------------------------------------------ */

/* Long-form prose reads as a printed page on wide screens: justified text with
   language-aware hyphenation. Narrow screens keep the default left alignment,
   where justified text would leave rivers of whitespace. */
@media (min-width: 769px) {
  .article-prose > p:not(.article-source),
  .article-prose li,
  .profile-story__copy p,
  .research-story__copy p,
  .research-methods__copy p,
  .research-feature__lead,
  .section-intro,
  .page-hero__intro,
  .videos-section__intro,
  .contact-details > p:not(.section-label) {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}