@font-face {
  font-family: Inter;
  src: url("fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

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

:root {
  color-scheme: light;
  --paper: #f6f2e9;
  --surface: #ebe3d5;
  --ink: #272521;
  --muted: #59544c;
  --line: #cbc2b3;
  --cobalt: #1944d0;
  --cobalt-dark: #1234a6;
  --gutter: clamp(1.25rem, 5.25vw, 5.5rem);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-italic: "Instrument Serif", Georgia, serif;
  font-family: Inter, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.6; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: var(--cobalt); text-underline-offset: .25em; }
button { font: inherit; }
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 5px;
}

.shell { width: min(100% - 2 * var(--gutter), 81rem); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 400; }
.skip { position: absolute; z-index: 2; top: .5rem; left: .5rem; padding: .65rem 1rem; background: var(--paper); transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.header-inner { min-height: 5rem; }
.wordmark { color: var(--ink); font-size: 1.45rem; font-weight: 800; letter-spacing: -.055em; text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3.1vw, 3.25rem); }
.site-header nav a, .header-contact { font-size: .875rem; font-weight: 550; text-decoration: none; padding-block: .65rem; }
.site-header nav a { color: var(--ink); }
.site-header nav a:hover, .header-contact:hover { color: var(--cobalt); text-decoration: underline; }
.header-contact span { margin-left: .25rem; }

.hero { padding-block: clamp(3.35rem, 5.85vw, 6.1rem) clamp(3.5rem, 6.2vw, 5.9rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr);
  grid-template-areas: "location brief" "title brief" "description brief" "action brief";
  column-gap: clamp(2.25rem, 4.25vw, 4.75rem);
  align-items: start;
  justify-items: start;
}
.hero-location { grid-area: location; display: flex; align-items: center; gap: .7rem; margin-bottom: 1.55rem; color: var(--muted); font-size: .75rem; letter-spacing: .065em; text-transform: uppercase; }
.hero-location::before { content: ""; width: 1.35rem; height: 1px; flex: none; background: currentColor; }
.hero h1 {
  grid-area: title;
  font-size: clamp(3.4rem, 6.1vw, 6.4rem);
  font-weight: 675;
  line-height: .95;
  letter-spacing: -.075em;
}
.hero h1 > span, .hero h1 em, .team-story h2 em { display: block; }
.keep-together { white-space: nowrap; }
.hero h1 em, .team-story h2 em { font-family: var(--display-italic); font-size: 1.2em; font-weight: 400; letter-spacing: -.022em; }
.hero-description { grid-area: description; max-width: 36rem; margin-top: 1.55rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); }
.hero-primary, .hero-secondary { grid-area: action; align-self: center; margin-top: 2rem; }
.hero-secondary { margin-left: 16.5rem; }
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  min-height: 3.1rem;
  padding: .78rem 1.05rem;
  background: var(--cobalt);
  color: #fff;
  font-size: .875rem;
  font-weight: 620;
  line-height: 1.35;
  text-decoration: none;
}
.button:hover { background: var(--cobalt-dark); }
.button span { font-size: 1.05em; }
.text-link { font-size: .9rem; font-weight: 590; }
.text-link:hover, .address:hover { color: var(--cobalt-dark); }
.text-link span { display: inline-block; margin-left: .35rem; text-decoration: none; }

.hero-brief {
  grid-area: brief;
  align-self: center;
  margin-top: 1.5rem;
  width: 100%;
  padding: clamp(1.25rem, 2.2vw, 2.15rem);
  background: var(--ink);
  color: var(--paper);
}
.hero-brief h2 {
  margin-bottom: 1.05rem;
  color: #ddd3c2;
  font-size: .75rem;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.hero-brief ul { padding: 0; margin: 0; list-style: none; }
.hero-brief li { border-top: 1px solid #625d54; padding-block: .65rem; font-size: clamp(.94rem, 1.25vw, 1.13rem); }
.hero-brief li:last-child { padding-bottom: 0; }

.capture-brief { width: 100%; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.capture-brief h3, .sample-status .mono {
  margin-bottom: .85rem;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.capture-brief dl > div { display: grid; grid-template-columns: minmax(4.4rem, .65fr) minmax(0, 1.5fr); gap: .85rem; border-top: 1px solid var(--line); padding-block: .82rem; }
.capture-brief dt { color: var(--muted); font-size: .75rem; padding-top: .125rem; }
.capture-brief dd { font-size: .9rem; line-height: 1.45; }

.hero.has-video .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "location media" "title media" "description media" "action media" "secondary media";
}
.hero.has-video h1 { font-size: clamp(3rem, 4.55vw, 4.9rem); }
.hero.has-video .hero-brief { display: none; }
.hero.has-video .hero-secondary { grid-area: secondary; margin: .95rem 0 0; }
.hero-video { grid-area: media; align-self: center; width: 100%; }

.section { border-top: 1px solid var(--line); padding-block: clamp(2.7rem, 5.3vw, 5.5rem); }
.section-intro { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 1.2rem clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(1.6rem, 3.4vw, 3.25rem); }
.section h2 { max-width: 18ch; font-size: clamp(2rem, 4.15vw, 4.2rem); font-weight: 625; line-height: 1.02; letter-spacing: -.06em; }
.section-intro > p, .team-story p { max-width: 31rem; color: var(--muted); }
.sample-status { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 2.75vw, 2.5rem); background: var(--surface); }
.sample-status .mono { margin-bottom: .45rem; }
.sample-note { font-weight: 550; }

.episode { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.episode-meta { align-self: start; }
.episode-meta dl > div { grid-template-columns: minmax(5.75rem, .95fr) minmax(0, 1.5fr); }
.view-switcher { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.view-switcher button { min-height: 2.75rem; border: 1px solid var(--line); padding: .45rem .85rem; background: transparent; color: var(--ink); cursor: pointer; }
.view-switcher button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.transcript { margin-top: .75rem; color: var(--muted); font-size: .9rem; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3.6vw, 3.4rem); margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 1px solid var(--ink); padding-top: 1.05rem; }
.step-number { display: inline-block; margin-bottom: 1.1rem; color: var(--muted); font-size: .9rem; }
.steps h3, .person h3 { font-size: clamp(1.18rem, 1.9vw, 1.55rem); font-weight: 620; letter-spacing: -.04em; line-height: 1.2; }
.steps p, .person-copy > p { margin-top: .55rem; color: var(--muted); font-size: .95rem; }
.section-link { display: inline-block; margin-top: 1.6rem; }

.team-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.25rem, 5.7vw, 5.5rem); margin-bottom: clamp(1.6rem, 4.25vw, 3.85rem); }
.team-story h2 { font-size: clamp(2.8rem, 6.3vw, 6.3rem); margin-bottom: clamp(1rem, 2.6vw, 1.9rem); }
.team-story p + p { margin-top: .7rem; }
.city-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover; object-position: center 57%; }
.city-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .9rem; padding-top: .6rem; color: var(--muted); font-size: .72rem; }
.city-photo a { color: var(--muted); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3.6vw, 3.4rem); }
.person { display: grid; grid-template-columns: clamp(5.75rem, 10vw, 9rem) minmax(0, 1fr); align-items: start; gap: clamp(.9rem, 2.6vw, 2rem); border-top: 1px solid var(--line); padding-top: 1rem; }
.person-portrait { aspect-ratio: 4 / 5; background: var(--surface); }
.person-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-copy { min-height: 8rem; padding-top: .25rem; }
.person-copy .person-role { font-size: .75rem; }
.person-copy a { display: inline-block; margin-top: .65rem; }

.contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(2.7rem, 5.3vw, 5.5rem); padding-inline: clamp(1.25rem, 5vw, 4.5rem); background: var(--ink); color: var(--paper); }
.contact h2 { max-width: 12ch; }
.contact p { max-width: 29rem; margin-top: 1rem; color: #e1d8c9; }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; align-self: center; gap: .85rem; }
.contact .text-link, .contact .address { color: var(--paper); }
.contact a:focus-visible { outline-color: var(--paper); }
.address { font-size: .8rem; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { padding-block: 1.55rem; }
.footer-inner .mono { color: var(--muted); font-size: .75rem; }

@media (max-width: 57rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "location" "title" "description" "action" "secondary" "brief";
  }
  .hero.has-video .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "location" "title" "description" "action" "media" "secondary";
  }
  .hero h1, .hero.has-video h1 { font-size: clamp(3.05rem, 8.8vw, 5.25rem); }
  .hero-description { margin-top: 1.3rem; }
  .hero-primary { margin-top: 1.4rem; }
  .hero-video { margin-top: 1.3rem; }
  .hero-secondary { grid-area: secondary; margin: .9rem 0 0; }
  .hero-brief { margin-top: 2.25rem; max-width: 36rem; }
}

@media (max-width: 41rem) {
  .header-inner { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding-block: .65rem .4rem; }
  .site-header nav { grid-area: 2 / 1 / 3 / 3; gap: 1.35rem; }
  .hero { padding-top: 2.85rem; }
  .hero-location { margin-bottom: 1.25rem; }
  .hero h1, .hero.has-video h1 { font-size: clamp(2.5rem, 10.5vw, 4.15rem); }
  .section-intro, .episode, .steps, .team-intro, .people, .contact { grid-template-columns: 1fr; }
  .section-intro { align-items: start; }
  .sample-status { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .steps { gap: 1.6rem; }
  .step-number { margin-bottom: .55rem; }
  .person { grid-template-columns: 5.75rem minmax(0, 1fr); }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; }
  .footer-inner .mono { grid-row: 2; grid-column: 1 / -1; }
  .footer-inner .text-link { grid-row: 1; grid-column: 2; }
}