/*
 * The site's one stylesheet: fonts, design tokens, and element defaults, then
 * each part of the page in turn. The type scale follows The Atlantic's ratio
 * and si.inc/posts/fdm1's rhythm; the measure follows The Atlantic, about 72
 * characters a line (19px in a 680px column).
 *
 * Nothing is scoped, so each part prefixes its classes (.package-study,
 * .foundry-photo), and the copy's element styles sit under :where(.prose) so
 * that any class outweighs them.
 */

/* Self-hosted typefaces; licences are in site/fonts/ and /font-licenses. */
@font-face {
  font-family: "Portal ET Book";
  src: url("/fonts/portal-et-book-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Portal ET Book";
  src: url("/fonts/portal-et-book-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Portal Source Sans";
  src: url("/fonts/portal-source-sans-3.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

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

/* One reading column. Copy and figures flow directly, without panels. */
:root {
  color-scheme: light;
  --font-heading: "Portal ET Book", Georgia, serif;
  --font-body: "Portal ET Book", Georgia, serif;
  --font-ui: "Portal Source Sans", Arial, sans-serif;
  --color-text: #272b25;
  --color-muted: #626a5b;
  --color-accent: #8e4937;
  --color-border: #dcded3;
  --color-surface: #fffff8;
  --color-figure: #fff;
  --text-base: 20px;
  --ratio: 1.2;
  --text-small: calc(var(--text-base) / var(--ratio));
  --text-label: calc(var(--text-base) / pow(var(--ratio), 2));
  --text-lead: calc(var(--text-base) * var(--ratio));
  --text-h2: calc(var(--text-base) * pow(var(--ratio), 2));
  --text-h1: calc(var(--text-base) * pow(var(--ratio), 7));
  --text-reading: calc(var(--text-base) * var(--ratio));
  --site-width: 1072px;
  --leading-body: 1.65;
  --content-width: 780px;
  --space: 30px;
  --space-half: calc(var(--space) / 2);
  --space-2: calc(var(--space) * 2);
  --space-3: calc(var(--space) * 3);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--text-base) / var(--leading-body) var(--font-body);
}
main {
  max-width: calc(var(--content-width) + var(--space-2));
  margin: 0 auto;
  padding: var(--space) var(--space) var(--space-3);
}
a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.page-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space);
}
.skip-link {
  position: fixed;
  left: var(--space-half);
  top: var(--space-half);
  padding: var(--space-half);
  background: var(--color-surface);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.035em;
  margin: 0;
}
h2 {
  font-size: var(--text-h2);
  margin: var(--space-2) 0 var(--space-half);
}
h3 {
  font-size: var(--text-lead);
  margin: var(--space) 0 var(--space-half);
}
h4 {
  font-size: var(--text-base);
}
.masthead {
  padding: var(--space) 0 0;
}
.masthead hgroup {
  display: flex;
  flex-direction: column;
}
.byline {
  order: -1;
  margin: 0 0 var(--space-half);
  color: var(--color-muted);
  font-size: var(--text-small);
}
.headline {
  margin: var(--space) 0 var(--space-half);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.3;
}
.lede {
  margin: 0;
}
.logo {
  display: inline;
  width: auto;
}
.popvax-wordmark {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 600;
  color: #111;
}
.brand-separator {
  margin-inline: 0.2em;
  color: #000;
}
.logo.stochastic {
  height: 0.88em;
  vertical-align: -0.092em;
  mix-blend-mode: multiply;
}

:where(.prose) p {
  margin: 0 0 var(--space);
}
:where(.prose) ul,
:where(.prose) ol {
  margin: var(--space-half) 0 var(--space);
  padding-left: 1.3em;
}
:where(.prose) li {
  padding-left: 0.2em;
  margin: 0.4em 0;
}
:where(.prose) li p {
  margin: 0;
}
:where(.prose) :is(h2, h3, h4) {
  scroll-margin-top: var(--space);
}
:where(.prose) strong {
  font-weight: 600;
}
:where(.prose) blockquote {
  margin: var(--space) 0;
  padding-left: var(--space-half);
  border-left: 1px solid var(--color-border);
  color: var(--color-muted);
}
:where(.prose) hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space) 0;
}
:where(.prose) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
:where(.prose) th,
:where(.prose) td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
}
.figure {
  margin: var(--space) 0;
}
.frame {
  background: var(--color-figure);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  font-size: var(--text-small);
  margin-top: var(--space-half);
  color: var(--color-muted);
}
.page-footer {
  margin-top: var(--space-2);
  padding-top: var(--space);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-muted);
}
.page-footer p {
  margin: 0;
}

@media (max-width: 639px) {
  main {
    padding: var(--space-half) 22px var(--space-2);
  }
  .masthead {
    padding-top: var(--space-half);
  }
  h1 {
    font-size: calc(var(--text-base) * pow(var(--ratio), 4));
  }
  .headline {
    font-size: var(--text-lead);
  }
  .page-tools {
    margin-bottom: var(--space-half);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* A warm typographic letter, following the selected Yash portal design. */
body {
  font-size: var(--text-reading);
  line-height: 1.55;
}
main {
  max-width: calc(var(--site-width) + var(--space-2));
  padding-top: 0;
}
.masthead {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-top: var(--space-2);
}
.masthead hgroup {
  align-items: center;
  text-align: center;
}
.masthead h1 {
  font-size: clamp(49.7664px, 6.5vw, var(--text-h1));
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.byline {
  order: 1;
  margin: var(--space-half) 0 0;
  font-size: var(--text-reading);
  color: var(--color-muted);
}
.headline {
  max-width: 850px;
  margin: var(--space) auto var(--space-2);
  text-align: center;
  font-size: var(--text-lead);
  line-height: 1.35;
  text-wrap: balance;
}
.lede {
  max-width: var(--content-width);
  margin-inline: auto;
  font-size: var(--text-reading);
  line-height: 1.55;
}
.prose {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-top: var(--space-2);
}
:where(.prose) > p {
  font-size: var(--text-reading);
}
:where(.prose) h2 {
  font-size: calc(var(--text-base) * pow(var(--ratio), 3));
  margin-top: var(--space-2);
}
:where(.prose) h2:first-child {
  margin-top: 0;
}
:where(.prose) li {
  margin-block: 0.4em;
}

.page-footer {
  max-width: var(--content-width);
  margin-inline: auto;
  font-family: var(--font-ui);
  font-size: var(--text-small);
}
.contact-email {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.page-footer > p + p {
  margin-top: var(--space);
}
.foundry-photo {
  max-width: 520px;
  margin: 0 auto var(--space);
}
.foundry-photo .figure {
  margin: 0;
}
.foundry-photo figcaption {
  font-family: var(--font-body);
  text-align: center;
}

/* Static foundry photograph, scaled to the reading column. */
.foundry-photo {
  min-width: 0;
  max-width: 100%;
  margin: var(--space-2) 0 var(--space);
}
.foundry-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.foundry-photo figcaption {
  margin: var(--space-half) 0 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-muted);
}
/* Embedded PVX-001 video, scaled to the reading column at 16:9. */
.video {
  margin: var(--space) 0;
}
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* Wide introduction, followed by a reading column and sticky section index. */
.intro-row {
  display: flex;
  flex-direction: column;
  margin: 0 auto var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  max-width: var(--content-width);
}
.intro-row .lede {
  margin: 0;
}
.reading-layout {
  max-width: var(--content-width);
  margin-inline: auto;
}
.reading-content {
  min-width: 0;
}
.reading-content > .prose {
  padding-top: 0;
}
@media (min-width: 1280px) {
  .intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    column-gap: 80px;
    align-items: center;
    max-width: var(--site-width);
  }
  .intro-row .lede {
    grid-column: 1;
    grid-row: 1;
  }
  .intro-row .foundry-photo {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }
}
.page-layout {
  --package-nav-width: 180px;
  --package-nav-gap: 30px;
}
.page-content {
  min-width: 0;
}
.page-section,
.package-study {
  scroll-margin-top: 100px;
}
.page-section + .page-section {
  margin-top: var(--space-2);
}
#foundry + #platform {
  margin-top: var(--space);
}
.page-section > h2:first-child {
  margin-top: 0;
}
#data {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
#data > .package-study:first-of-type {
  margin-top: var(--space);
  padding-top: 0;
  border-top: 0;
}
#safety .package-table tbody tr:last-child td,
#quality-control .package-table tbody tr:last-child td {
  border-bottom: 0;
}
.package-contents {
  margin: 0 0 var(--space);
  padding: 0 0 var(--space-half);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
}
.package-contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.package-contents li {
  margin: 0;
  padding: 0;
}
.package-contents .study-link {
  display: none;
}
.study-contents {
  margin-bottom: var(--space);
  font-size: 18px;
  line-height: 1.4;
}
.study-contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.study-contents li {
  margin: 0;
  padding: 0;
}
.study-contents a {
  display: inline-block;
  min-height: 32px;
}
.package-contents a {
  display: block;
  min-height: 32px;
  color: var(--color-muted);
  white-space: nowrap;
}
.package-contents a[aria-current="location"] {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.package-study {
  padding-top: var(--space);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 100px;
}
.package-study h3 {
  margin-top: 0;
  font-size: var(--text-h2);
}
.package-study > p {
  font-size: var(--text-reading);
}
.package-figure {
  min-width: 0;
  max-width: 100%;
  margin-block: var(--space);
}
.package-figure .frame {
  background: var(--color-figure);
}
.package-figure img {
  min-width: 0;
  max-width: 100%;
}
.frame:has(img[src*="/evidence/redrawn/"]) {
  background: transparent;
}
/* Keep the well montage compact while retaining fluid sizing on phones. */
#elispot .package-figure {
  max-width: 580px;
  margin-inline: auto;
}
/* Blend the extracted wells into the cream paper. */
img[src="/assets/evidence/redrawn/elispot-wells.svg"] {
  mix-blend-mode: multiply;
}
.package-table {
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--space);
  font-family: var(--font-body);
}
.package-table table {
  min-width: 440px;
  line-height: 1.5;
}
.package-table th {
  font-weight: 600;
}
#quality-control table {
  min-width: 0;
  table-layout: fixed;
  overflow-wrap: break-word;
}
#quality-control th:first-child {
  width: 40%;
}
/* In-flow navigation sits above one divider on smaller screens. */
@media (max-width: 1279px) {
  .intro-row {
    margin-bottom: var(--space);
    padding-bottom: 0;
    border-bottom: 0;
  }
}
@media (min-width: 768px) {
  .page-layout {
    max-width: var(--site-width);
    margin-inline: auto;
  }
  .reading-layout {
    display: grid;
    grid-template-columns: var(--package-nav-width) minmax(0, 1fr);
    column-gap: var(--package-nav-gap);
    width: calc(
      var(--content-width) + var(--package-nav-width) + var(--package-nav-gap)
    );
    max-width: none;
    margin-left: calc(
      (100% - var(--content-width)) / 2 - var(--package-nav-width) -
        var(--package-nav-gap)
    );
    margin-right: 0;
  }
  .reading-content {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .reading-layout .package-contents {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    position: sticky;
    top: var(--space);
    align-self: start;
    z-index: 2;
    width: var(--package-nav-width);
    max-height: calc(100dvh - var(--space-2));
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border-bottom: 0;
    font-size: var(--text-base);
  }
  .package-contents ul {
    display: grid;
    gap: 9px;
    width: auto;
  }
  .package-contents a {
    white-space: normal;
  }
  .package-contents .study-link {
    display: list-item;
    padding-left: 14px;
  }
  .study-contents {
    display: none;
  }
}
@media (max-width: 767px) {
  .package-contents {
    font-size: 18px;
    position: sticky;
    top: 0;
    z-index: 10;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }
  .package-contents ul {
    justify-content: center;
    gap: 3px 8px;
  }
  /* Keep three links on the first row and two centred on the second. */
  .package-contents ul::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  .package-contents li {
    order: 0;
  }
  .package-contents li:nth-child(n + 4) {
    order: 2;
  }
  .reading-layout .page-section,
  .reading-layout .package-study,
  .reading-layout #mrna-lnp-platform,
  .reading-layout #request-a-quote {
    scroll-margin-top: calc(150px + env(safe-area-inset-top, 0px));
  }
}

/* The two analytical stability figures share a row on desktop. */
.stability-plots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-block:var(--space)}
.stability-plots .figure{min-width:0;margin:0}
.stability-plots img{display:block;width:100%;height:auto}
/* Centre each title over its plot area, which spans 19%–97% of the chart width. */
.stability-plots .figure > .plot-title{padding-inline:19% 3%}
#platform > .package-study{margin-block:var(--space);padding-top:0;border-top:0}
/* The mRNA-LNP platform link lands on its heading, just below the PVX-001 video. */
#mrna-lnp-platform{scroll-margin-top:var(--space-2)}
/* Section titles are centred and underlined at the reading size, like the chart titles. */
.section-title{font-size:var(--text-reading);text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.2em}
.supplementary-page{max-width:880px;margin:0 auto;padding:40px 28px 72px}
.supplementary-page .back-link{display:inline-block;margin-bottom:24px}
.supplementary-page h1{margin-top:0}
@media(max-width:760px){.stability-plots{grid-template-columns:1fr;gap:24px}}

/* Space the Quality Control and Request a Quote titles like the other section titles. */
#quality-control{border-top:0;padding-top:0;margin-top:var(--space-2)}
#quality-control + #contact{margin-top:var(--space-2)}

/* A quieter supplementary-page title without a dividing rule. */
.supplementary-page > h1{font-size:clamp(32px,4vw,44px);line-height:1.15;margin-bottom:28px}
.supplementary-page > .package-study:first-of-type{border-top:0;padding-top:0;margin-top:0}

/* Chart titles are centred at the reading size across full-width and column layouts. */
.figure > .plot-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: var(--text-reading);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  color: var(--color-text);
}

/* Use the same compact reading layout on phones and tablets. */
@media (max-width: 1279px) {
  :root {
    --text-reading: 22px;
  }
  main {
    padding-inline: 24px;
  }
  .masthead {
    max-width: 680px;
    padding-top: var(--space);
  }
  .headline {
    font-size: 22px;
    margin-bottom: var(--space);
  }
  .byline {
    font-size: var(--text-base);
  }
  .intro-row,
  .reading-layout {
    max-width: 680px;
  }
  .intro-row .foundry-photo {
    width: 100%;
    max-width: 640px;
    margin: 0 auto var(--space);
  }
  .package-contents {
    font-size: clamp(12.5px, 3.75vw, 18px);
  }
  .supplementary-page {
    max-width: 736px;
    padding-inline: 24px;
  }
}

/* Keep a narrower sidebar beside the reading column on tablets. */
@media (min-width: 768px) and (max-width: 1279px) {
  main {
    max-width: 1120px;
  }
  .page-layout {
    --package-nav-width: 150px;
    --package-nav-gap: 24px;
  }
  .reading-layout {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }
  .reading-layout .package-contents {
    font-size: 18px;
  }
}

/* The quote email address, set apart in a muted blue. */
.quote-email {
  color: #2b5c8a;
}
/* One-click copy for the quote email address, shown only where the Clipboard API exists. */
.copy-email {
  margin-inline: 0.25em 0;
  padding: 0.1em 0.5em;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  line-height: 1.4;
  vertical-align: 0.15em;
}
.copy-email:hover {
  color: var(--color-accent);
}