/* Base styles, layout, header and footer. Uses tokens from tokens.css only. */

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Base type */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
main:focus {
  outline: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Links: ink text, vermilion underline, vermilion on hover */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

/* Focus: always visible for keyboard users */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2);
}
.skip-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--space-section);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page title with the 72x3 accent bar */
.page-title {
  font-size: var(--text-page-title);
  letter-spacing: var(--tracking-title);
  line-height: 1.05;
  max-width: 18ch;
}
.accent-bar {
  display: block;
  width: var(--accent-bar-long);
  height: var(--accent-bar-height);
  background: var(--accent);
  margin-block: var(--space-4);
  border: 0;
}
.lead {
  font-size: var(--text-lead);
  color: var(--text-2);
  max-width: var(--measure-text);
}
.prose > * + * {
  margin-top: var(--space-3);
}
.prose {
  max-width: var(--measure-text);
  color: var(--text-2);
}

/* Header */
.site-header {
  border-bottom: var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover {
  color: var(--ink);
}
/* A short vermilion bar under the "D" only, the same mark as the favicon. Its width is the D's ink
   in Source Serif 4 600 (measured: 0 to 0.75em), left edges aligned. Positioned outside the text
   box, so the header's height and the nav alignment do not change. */
.wordmark {
  position: relative;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 0.2em);
  width: 0.75em;
  height: 3px;
  background: var(--accent);
}
.nav-toggle {
  display: none;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
}
.nav-list a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration-line: none;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 2px;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
}

/* Phone menu: a disclosure button, only when JavaScript is running.
   Without JavaScript the nav links simply wrap below the wordmark. */
@media (max-width: 760px) {
  .js .site-header__inner {
    flex-wrap: nowrap;
  }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    color: var(--ink);
    border: var(--rule-strong);
    border-radius: 0;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
  }
  .js .nav-toggle[aria-expanded="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .js .site-nav:not(.is-open) .nav-list {
    display: none;
  }
  .js .nav-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--paper);
    border-bottom: var(--rule-strong);
  }
  .js .nav-list li + li {
    border-top: var(--hairline);
  }
  .js .nav-list a {
    display: block;
    padding-block: var(--space-3);
    font-size: var(--text-base);
  }
  .site-header {
    position: relative;
  }
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--paper);
}
.site-footer a {
  color: var(--paper);
  text-decoration-line: none;
}
.site-footer a:hover {
  color: var(--accent-on-dark);
  text-decoration-line: underline;
  text-decoration-color: var(--accent-on-dark);
}
.site-footer :focus-visible {
  outline: var(--focus-ring-on-dark);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  padding-block: var(--space-section) var(--space-6);
}
.signature {
  width: clamp(240px, 24vw, 300px);
  min-width: 240px;
  height: auto;
}
.site-footer__roles {
  margin-top: var(--space-3);
  font-size: var(--text-meta);
  color: var(--text-on-dark-2);
}
.site-footer__tagline {
  margin-top: var(--space-4);
  max-width: 34ch;
  color: var(--text-on-dark-2);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--text-on-dark-2);
  margin-bottom: var(--space-3);
}
.site-footer__list {
  list-style: none;
  padding: 0;
}
.site-footer__list li + li {
  margin-top: var(--space-2);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule-on-dark);
  font-size: var(--text-meta);
  color: var(--text-on-dark-2);
}
@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared components */
.section-title {
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.meta {
  font-size: var(--text-meta);
  color: var(--text-3);
}
.numeral {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.accent-bar--on-dark {
  background: var(--accent-on-dark);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: var(--text-2);
  border-color: var(--text-2);
  color: var(--paper);
}
.text-link {
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Image placeholder when a photo file is missing */
.img-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 200px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--text-3);
  color: var(--text-3);
  font-size: var(--text-meta);
  text-align: center;
}

/* Forms */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.signup__label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
/* Sign-up fields: stacked on phones. From 600 px, first name and email sit side by side (equal
   widths, labels above), with the button on the same row when the form is wide enough, otherwise
   directly below. Each field is a subgrid, so label, input and error line up across the row. */
.signup {
  container: signup / inline-size;
}
.signup__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-3);
}
.signup__button {
  justify-self: start;
}
@media (min-width: 600px) {
  .signup__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2);
    row-gap: 0;
  }
  .signup__fields .signup__field {
    display: grid;
    grid-column: auto;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .signup__button {
    grid-column: 1;
    margin-top: var(--space-3);
  }
  @container signup (min-width: 38rem) {
    .signup__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }
    .signup__button {
      grid-column: 3;
      grid-row: 2;
      margin-top: 0;
    }
  }
}
.signup__input {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--text-3);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.signup__input::placeholder {
  color: var(--text-3);
}
.signup__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0;
}
.signup__note {
  margin-top: var(--space-2);
  font-size: var(--text-meta);
  color: var(--text-3);
}

/* Development-only marker for unconfirmed facts */
.confirm-marker {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--text-3);
  padding: 0 var(--space-1);
  vertical-align: middle;
}

/* Talk video poster (Home links to YouTube; Speaking swaps in the player on click) */
.talk__poster {
  position: relative;
  display: block;
  color: var(--paper);
  text-decoration: none;
}
.talk__poster img {
  width: 100%;
  height: auto;
}
.talk__poster:hover {
  color: var(--paper);
}
.talk__play {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  font-size: var(--text-small);
  font-weight: 600;
}
.talk__poster:hover .talk__play {
  text-decoration: underline;
  text-decoration-color: var(--accent-on-dark);
  text-underline-offset: 0.3em;
}
.talk__icon {
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
  border-left: 12px solid currentColor;
}
.talk__caption {
  margin-top: var(--space-3);
  font-size: var(--text-meta);
  color: var(--text-2);
}
.talk__caption strong {
  color: var(--ink);
  font-weight: 600;
}
.next-event__label {
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 680px) {
  .talk__play {
    left: var(--space-3);
    bottom: var(--space-3);
  }
}

/* Book cover placeholder (Home and Book), in --book-navy */
.book-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  padding: var(--space-5) var(--space-4);
  background: var(--book-navy);
  color: var(--paper);
  box-shadow: var(--shadow-book);
}
.book-cover__title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.25;
}
.book-cover__note {
  font-size: var(--text-meta);
  color: var(--text-on-dark-2);
}
/* A real cover image: same 2:3 shape and shadow as the placeholder, no padding */
.book-cover--image {
  display: block;
  padding: 0;
}
.book-cover__img,
.book-cover--image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.book-cover__img {
  object-fit: cover;
}
/* Sign-up panel (essays and research updates), inside the content column. The compact version
   sits inside an essay's text, so it resets the essay's serif body type. */
.signup-panel {
  padding: var(--space-5);
  background: var(--surface);
}
.signup-panel .accent-bar {
  margin-block: 0 var(--space-4);
}
.signup-panel__title {
  font-size: var(--text-h3);
  line-height: 1.3;
  margin-bottom: var(--space-4);
}
.signup-panel--compact {
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
}
.signup-panel__line {
  font-weight: 600;
  margin-bottom: var(--space-3);
}
@media (max-width: 520px) {
  .signup-panel {
    padding: var(--space-4);
  }
}

/* Simple pages: 404, thank-you pages and pages still being built */
.simple-page__note {
  margin-top: var(--space-3);
  max-width: var(--measure-text);
  color: var(--text-2);
}
.simple-page__links {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  max-width: var(--measure-text);
  border-top: var(--hairline);
}
.simple-page__links li {
  border-bottom: var(--hairline);
}
.simple-page__links a {
  display: block;
  padding-block: var(--space-3);
  font-weight: 500;
}
.placeholder-note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  color: var(--text-2);
  max-width: var(--measure-text);
}

/* Back to top (back-to-top.js): round, bottom right, clear of the iOS home bar. --footer-lift
   raises it above the footer while the footer is on screen. Invisible means unfocusable too. */
.back-to-top {
  --edge: var(--space-3);
  position: fixed;
  right: var(--edge);
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px) + var(--footer-lift, 0px));
  z-index: 10;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.back-to-top[hidden] {
  display: none;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: var(--text-2);
}
@media (min-width: 600px) {
  .back-to-top {
    --edge: var(--space-4);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* New-tab marker after a link (added at build time; see lib/link-targets.mjs) */
/* Pull quotes: large italic serif with a 48x3 accent bar above. Essays (Markdown blockquotes)
   and the book's pull quote share this one rule. */
.pull-quote,
.essay__body blockquote {
  padding: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-pull-quote);
  line-height: 1.25;
}
.pull-quote::before,
.essay__body blockquote::before {
  content: "";
  display: block;
  width: var(--accent-bar-short);
  height: var(--accent-bar-height);
  margin-bottom: 1.25rem;
  background: var(--accent);
}

/* Redirect pages for old URLs: only seen if the redirect does not run */
.redirect {
  padding-block: var(--space-6);
}

.newtab {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.8em;
  line-height: 1;
  text-decoration: none;
}