/* ==========================================================================
   BRAK LABS: peptide research, plainly written
   paper, graphite, one accent pair (violet to cyan)
   Adapted from "qubit" in GuyWithTwoCats/TheGallery (MIT). See README.md.
   ========================================================================== */

:root {
  --paper:      #F9F9F6;
  --paper-dim:  #F1F1EC;
  --graphite:   #1E2126;
  --slate:      #575C66;
  --hairline:   #E3E4DE;
  --violet:     #6633EE;
  --cyan:       #00A8BE;
  --cyan-ink:   #087687;   /* text-safe deep cyan */

  --font-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-soft:  cubic-bezier(.22, 1, .36, 1);

  --w-max: 1180px;
  --pad-x: clamp(20px, 4.5vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--paper);
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--violet); color: var(--paper); }

/* chalk dust: synthesized grain, barely there */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* thin lab scrollbar */
html { scrollbar-width: thin; scrollbar-color: #C4C6BE var(--paper); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #C4C6BE; border: 3px solid var(--paper); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 1px;
}

.mono { font-family: var(--font-mono); }

/* the header is sticky, so anchor targets have to stop clear of it */
.hero, .section, .site-foot, .doc-body > section, .tier-def { scroll-margin-top: 76px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* assay outcomes, wherever they are logged */
.out0 { color: var(--cyan-ink); }
.out1 { color: var(--violet); }
.nid  { color: var(--graphite); }

/* section eyebrows: label, then a hairline to the margin */
.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--cyan-ink);
  margin-bottom: 22px;
}
.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px var(--pad-x);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--graphite);
}
.mark { width: 15px; height: 15px; align-self: center; flex: none; }
.wordmark-text {
  white-space: nowrap;
  font-weight: 680;
  font-variation-settings: "wdth" 120;
  letter-spacing: .04em;
  font-size: 18px;
}
.wordmark-sub {
  font-size: 12.5px;
  color: var(--slate);
  font-variation-settings: "wdth" 88;
  letter-spacing: .02em;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
}
.site-nav a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  color: var(--graphite);
  font-size: 14.5px;
  font-variation-settings: "wdth" 96;
  padding: 3px 1px;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.head-status {
  font-size: 12px;
  color: var(--slate);
  letter-spacing: .06em;
}

/* ==========================================================================
   HERO: the compound field
   ========================================================================== */

.hero {
  position: relative;
  min-height: calc(100vh - 61px);
  min-height: calc(100svh - 61px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

#lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: manipulation;
}

.hero-inner {
  position: relative;
  z-index: 2;
  pointer-events: none;         /* clicks pass through to the lattice */
  padding: 0 var(--pad-x);
  max-width: 1040px;
  margin-top: -4vh;
}
.hero-inner .eyebrow {
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--cyan-ink);
  margin-bottom: 26px;
}

.hero-title {
  font-size: clamp(40px, 6.4vw, 94px);
  line-height: 1.02;
  font-weight: 640;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.022em;
  margin-bottom: 30px;
}
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line { display: inline-block; }

.hero-sub {
  max-width: 52ch;
  font-size: 18.5px;
  color: var(--slate);
  margin-bottom: 26px;
}

.hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--graphite);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  padding: 9px 14px;
}
.reticle {
  width: 11px; height: 11px;
  border: 1.5px solid var(--violet);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.reticle::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--cyan);
}
@media (prefers-reduced-motion: no-preference) {
  .reticle::after { animation: reticle-pulse 2.2s var(--ease-soft) infinite; }
  @keyframes reticle-pulse {
    0%, 100% { transform: scale(.6); background: var(--cyan); }
    50%      { transform: scale(1);  background: var(--violet); }
  }
}

.hero-status {
  position: absolute;
  left: var(--pad-x);
  bottom: 22px;
  z-index: 2;
  font-size: 12px;
  color: var(--slate);
  letter-spacing: .04em;
  pointer-events: none;
  max-width: 70%;
}
.hero-scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: 22px;
  z-index: 2;
  font-size: 12px;
  color: var(--slate);
  letter-spacing: .12em;
  pointer-events: none;
}

/* load choreography */
.js [data-load] {
  opacity: 0;
  transform: translateY(26px);
}
.js .line[data-load] { transform: translateY(110%); }
.js .loaded [data-load] {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .loaded [data-load="2"] { transition-delay: .08s; }
.js .loaded [data-load="3"] { transition-delay: .17s; }
.js .loaded [data-load="4"] { transition-delay: .30s; }
.js .loaded [data-load="5"] { transition-delay: .42s; }
.js .loaded [data-load="6"] { transition-delay: .55s; }

/* ==========================================================================
   SECTIONS: shared rhythm
   ========================================================================== */

.section {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(84px, 11vh, 140px) var(--pad-x) 0;
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vh, 64px); }

.section h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  font-weight: 620;
  font-variation-settings: "wdth" 108;
  letter-spacing: -.015em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.section-sub {
  color: var(--slate);
  font-size: 17px;
  max-width: 62ch;
}

/* ---------- epigraphs ---------- */

.epigraph {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(90px, 13vh, 150px) var(--pad-x) 0;
  text-align: center;
}
.epigraph-tight { padding-top: clamp(76px, 10vh, 120px); }
.epigraph p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.42;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--slate);
}
.epigraph cite::before { content: ""; }
.epigraph cite a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.epigraph cite a:hover,
.epigraph cite a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }

/* inline links in section standfirsts */
.section-sub a {
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
}
.section-sub a:hover,
.section-sub a:focus-visible { border-bottom-color: currentColor; }

/* ---------- catalog categories ---------- */

.programs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.program {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 26px 24px 22px;
  transition: transform .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.program::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.program:hover { transform: translateY(-3px); border-color: #D5D6CF; }
.program:hover::before { transform: scaleX(1); }

.program-code {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--cyan-ink);
  margin-bottom: 40px;
}
.program h3 {
  font-size: 20px;
  font-weight: 600;
  font-variation-settings: "wdth" 106;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.program p { font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.program-lead {
  margin-top: auto;
  padding-top: 22px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--graphite);
}

/* ---------- research-use-only strip ---------- */

.ruo-strip {
  background: var(--graphite);
  color: var(--paper);
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 16px;
  line-height: 1.4;
}

/* the strip sits above the sticky header, so the hero owes it that height */
.hero {
  min-height: calc(100vh - 94px);
  min-height: calc(100svh - 94px);
}

/* ---------- filter chips: presentation only, wired to nothing ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 0 15px;
  min-height: 38px;
  cursor: pointer;
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft), background .2s var(--ease-soft);
}
.chip:hover { color: var(--graphite); border-color: #C4C6BE; }
.chip.is-on {
  color: var(--paper);
  background: var(--graphite);
  border-color: var(--graphite);
}

/* ---------- catalog ---------- */

.grid-prod {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.prod {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 22px 22px 20px;
  transition: transform .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.prod::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.prod:hover { transform: translateY(-3px); border-color: #D5D6CF; }
.prod:hover::before { transform: scaleX(1); }

.prod-tag {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .16em;
  margin-bottom: 26px;
}
.tag-cat { color: var(--cyan-ink); }
.tag-stock { letter-spacing: .04em; color: var(--slate); }
.tag-stock::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--cyan);
  vertical-align: baseline;
}
.tag-stock.out { color: var(--violet); }
.tag-stock.out::before { background: var(--violet); }

.prod h3 {
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "wdth" 106;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 3px;
}
.prod-qual {
  font-size: 13px;
  font-weight: 400;
  font-variation-settings: "wdth" 92;
  color: var(--slate);
}
.prod-sub {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--slate);
  margin-bottom: 16px;
}

.prod-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 11px 0 10px;
  margin-bottom: 14px;
}
.prod-spec dt {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.prod-spec dd {
  font-size: 13px;
  color: var(--graphite);
  margin-top: 2px;
}

.prod-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
  margin-bottom: 18px;
}
.prod-foot {
  margin-top: auto;
  padding-top: 4px;
}
.prod-coa {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--cyan-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-soft);
}
.prod-coa:hover, .prod-coa:focus-visible { border-bottom-color: currentColor; }

/* evidence grade: the letter is the loudest thing on the card */
.prod-spec dd.grade {
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  margin-top: 0;
}
.prod-spec dd.grade-a, .prod-spec dd.grade-b { color: var(--cyan-ink); }
.prod-spec dd.grade-c, .prod-spec dd.grade-d { color: var(--violet); }
.prod-spec dd.grade-p { font-size: 13px; color: var(--slate); margin-top: 2px; }

.grid-note {
  margin-top: 20px;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--slate);
}

/* ---------- accessories ---------- */

.grid-acc {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.acc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
  padding: 22px 20px 18px;
  transition: border-color .35s var(--ease-soft);
}
.acc:hover { border-color: #D5D6CF; }
.acc-code {
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--cyan-ink);
  margin-bottom: 24px;
}
.acc h3 {
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
  line-height: 1.2;
  margin-bottom: 4px;
}
.acc-spec {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--slate);
  margin-bottom: 10px;
}
.acc p { font-size: 13.5px; line-height: 1.55; color: var(--slate); }

/* ---------- purity ---------- */

.purity { text-align: left; }
.pur-intro {
  font-size: 17px;
  color: var(--slate);
  margin-bottom: 6px;
}
.pur-figure {
  font-size: clamp(58px, 10.5vw, 148px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  margin-bottom: 30px;
}
.pur-figure sub {
  font-size: .38em;
  vertical-align: baseline;
  position: relative;
  top: .1em;
  color: var(--slate);
}
.pur-num {
  background: linear-gradient(105deg, var(--cyan-ink), var(--violet) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pur-unit { font-size: .42em; color: var(--slate); font-weight: 400; }

.pur-copy {
  max-width: 62ch;
  font-size: 18px;
  color: var(--graphite);
  margin-bottom: 44px;
}
.pur-count {
  color: var(--violet);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pur-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  max-width: 860px;
}
.pur-stats > div {
  padding: 18px 20px 4px 0;
  border-right: 1px solid var(--hairline);
}
.pur-stats > div:last-child { border-right: none; }
.pur-stats dt {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.pur-stats dd { font-size: 21px; color: var(--graphite); font-variant-numeric: tabular-nums; }

/* ---------- certificates of analysis ---------- */

.pubs { list-style: none; border-top: 1px solid var(--hairline); }
.pub {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 90px;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--hairline);
  transition: background .25s var(--ease-soft);
}
.pub:hover { background: #F3F3EE; }
.pub-id { font-size: 12.5px; color: var(--slate); line-height: 1.5; transition: color .25s var(--ease-soft); }
.pub:hover .pub-id { color: var(--violet); }
.pub-cat { color: var(--cyan-ink); }
.pub h3 {
  font-size: 17.5px;
  font-weight: 560;
  font-variation-settings: "wdth" 104;
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.pub-authors { font-size: 13.5px; color: var(--slate); }
.pub-date { font-size: 12.5px; color: var(--slate); text-align: right; }

/* hover deepens a row: one-line finding unfolds beneath the authors */
.pub-abstract {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease-soft), opacity .45s var(--ease-soft), margin-top .5s var(--ease-soft);
  margin-top: 0;
}
.pub-abstract > span {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cyan-ink);
  max-width: 66ch;
}
.pub:hover .pub-abstract,
.pub:focus-within .pub-abstract {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .pub-abstract { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; transition: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-foot {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(84px, 11vh, 140px) var(--pad-x) 46px;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 8px;
}
.foot-h {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--cyan-ink);
  margin-bottom: 12px;
}
.foot-block p { font-size: 15px; color: var(--graphite); max-width: 34ch; }
.colophon {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.colophon p { font-size: 13px; color: var(--slate); max-width: 74ch; }


/* ---------- footer disclaimer ---------- */

.disclaimer {
  margin-top: 56px;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
}
.disclaimer p {
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--graphite);
  max-width: 92ch;
}
.disclaimer strong { font-weight: 600; }

/* ==========================================================================
   DOCUMENT PAGES
   about, editorial policy, medical disclaimer, methodology, corrections.
   Same tokens, same rhythm, one narrower measure for reading.
   ========================================================================== */

.doc {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(34px, 5vh, 60px) var(--pad-x) 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--slate);
  margin-bottom: 26px;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--slate);
}
.breadcrumb a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--graphite); border-bottom-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--graphite); }

.doc-head { max-width: 760px; }
.doc-head h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  font-weight: 640;
  font-variation-settings: "wdth" 110;
  letter-spacing: -.018em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.doc-standfirst {
  font-size: 18.5px;
  color: var(--slate);
  max-width: 60ch;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.doc-meta a {
  color: var(--cyan-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.doc-meta a:hover,
.doc-meta a:focus-visible { border-bottom-color: currentColor; }

.doc-body { max-width: 74ch; padding-bottom: 8px; }
.doc-body > section { padding-top: clamp(38px, 5.5vh, 62px); }
.doc-body h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 620;
  font-variation-settings: "wdth" 106;
  letter-spacing: -.012em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.doc-body h3 {
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
  line-height: 1.3;
  margin: 26px 0 8px;
}
.doc-body p { margin-bottom: 16px; max-width: 68ch; }
.doc-body ul,
.doc-body ol { margin: 0 0 18px 21px; max-width: 66ch; }
.doc-body li { margin-bottom: 9px; }
.doc-body a {
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
}
.doc-body a:hover,
.doc-body a:focus-visible { border-bottom-color: currentColor; }
.doc-body strong { font-weight: 620; }
.doc-body .lede { font-size: 18px; color: var(--graphite); }
.doc-body code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  padding: 1px 5px;
}

/* links inside the footer blocks and the disclaimer panel */
.foot-block a,
.disclaimer a {
  color: var(--violet);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--violet) 34%, transparent);
}
.foot-block a:hover, .foot-block a:focus-visible,
.disclaimer a:hover, .disclaimer a:focus-visible { border-bottom-color: currentColor; }

/* a scroll container needs to be focusable, or its right-hand columns are
   unreachable by keyboard */
.table-scroll { overflow-x: auto; margin-bottom: 22px; }
.table-scroll:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.doc-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14.5px;
}
.doc-body caption {
  text-align: left;
  font-size: 12px;
  color: var(--slate);
  padding-bottom: 9px;
}
.doc-body th,
.doc-body td {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--hairline);
  line-height: 1.5;
}
.doc-body thead th {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

/* recessed panel, same surface as the footer disclaimer */
.callout {
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.callout p:last-child { margin-bottom: 0; }
.callout-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  margin-bottom: 10px;
}

/* evidence-tier chips: the letter carries the meaning, colour only reinforces */
.tier {
  font-size: 12.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tier:hover,
.tier:focus-visible { border-bottom-color: currentColor; }
/* a tier chip is often a link, so it has to out-specify .doc-body a */
.doc-body a.tier { border-bottom-color: transparent; }
.doc-body a.tier:hover,
.doc-body a.tier:focus-visible { border-bottom-color: currentColor; }
/* colour comes from the DOM attribute, so display cannot drift from the data */
[data-evidence-tier="human-rct"] .tier,
[data-evidence-tier="human-open-label"] .tier { color: var(--cyan-ink); }
[data-evidence-tier="animal"] .tier,
[data-evidence-tier="in-vitro"] .tier,
[data-evidence-tier="anecdote"] .tier { color: var(--violet); }

.tier-def { border-top: 1px solid var(--hairline); padding-top: 20px; margin-top: 26px; }
.tier-def h3 { margin-top: 0; }
.tier-def .tier { display: inline-block; margin-bottom: 6px; }

/* corrections log */
.log-empty {
  border: 1px dashed #D5D6CF;
  background: var(--paper-dim);
  padding: 26px 24px;
  margin-bottom: 22px;
}
.log-empty p:last-child { margin-bottom: 0; }
.log-entry { border-top: 1px solid var(--hairline); padding: 20px 0; }
.log-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--slate);
  margin-bottom: 6px;
}

/* footer policy row */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.foot-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot-links a:hover,
.foot-links a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }

@media (max-width: 760px) {
  .doc-head h1 { font-size: clamp(27px, 7.6vw, 40px); }
  .doc-standfirst { font-size: 16.5px; }
}

@media (hover: none), (pointer: coarse) {
  .foot-links a,
  .breadcrumb a,
  .doc-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   REVEALS
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s var(--ease-soft), transform .75s var(--ease-soft);
  transition-delay: calc(var(--ri, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-ri="1"] { --ri: 1; }
[data-ri="2"] { --ri: 2; }
[data-ri="3"] { --ri: 3; }
[data-ri="4"] { --ri: 4; }
[data-ri="5"] { --ri: 5; }
[data-ri="6"] { --ri: 6; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .programs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  .grid-prod { grid-template-columns: repeat(2, 1fr); }
  .grid-acc  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .wordmark-sub { display: none; }
}

@media (max-width: 900px) {
  .head-status { display: none; }
}

@media (max-width: 760px) {
  /* header wraps to two rows: wordmark, then a scrollable jump nav */
  .site-head {
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px var(--pad-x) 6px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; white-space: nowrap; font-size: 14px; padding: 6px 1px 8px; }
  /* fade the right edge so the strip reads as scrollable */
  .site-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }
  .hero, .section, .site-foot, .doc-body > section, .tier-def { scroll-margin-top: 108px; }
  .head-status { margin-left: auto; }

  /* let the hero grow instead of clipping a too-tall block against the fold */
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: clamp(28px, 7vh, 56px);
    padding-bottom: 84px;
  }
  .hero-inner { margin-top: 0; }
  .hero-title { font-size: clamp(30px, 8.6vw, 56px); }
  .hero-sub { font-size: 16.5px; }
  .hero-status {
    max-width: calc(100% - 2 * var(--pad-x));
    bottom: 16px;
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-scroll { display: none; }
  .pub { grid-template-columns: minmax(0, 1fr) 84px; }
  .pub-id { order: 3; grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr; }
  .pur-stats { grid-template-columns: 1fr; }
  .pur-stats > div { border-right: none; border-bottom: 1px solid var(--hairline); padding: 14px 0 12px; }
  .pur-stats > div:last-child { border-bottom: none; }
}

@media (max-width: 560px) {
  .programs  { grid-template-columns: 1fr; }
  .grid-prod { grid-template-columns: 1fr; }
  .grid-acc  { grid-template-columns: 1fr; }
  .ruo-strip { font-size: 10px; letter-spacing: .1em; }

  /* the wordmark is the one thing that must never break across lines */
  .hero-inner .eyebrow { font-size: 11px; letter-spacing: .1em; margin-bottom: 18px; }
  /* the whole section is one number, so it has to stay big on a phone */
  .pur-figure { font-size: clamp(76px, 26vw, 120px); }
  .hero-cue { font-size: 12px; }
  .section-head h2 { hyphens: auto; }

  /* spec row: label over value stacks badly at three columns on a narrow card */
  .prod-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
}

/* touch: every control clears the 44px target, and hover-only affordances stay open */
@media (hover: none), (pointer: coarse) {
  .chip { min-height: 44px; padding: 0 17px; }
  .prod-coa { display: inline-block; padding: 13px 0; }
  .wordmark { padding: 10px 0; }
  .site-nav a { padding-top: 10px; padding-bottom: 12px; }
  .pub { padding-top: 18px; padding-bottom: 18px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js [data-load], .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-nav a::after, .program, .program::before, .pub,
  .prod, .prod::before, .chip, .acc {
    transition: none !important;
  }
  .prod:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}