/* ==========================================================================
   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); }

/* ==========================================================================
   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%;
  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);
}

/* the hero starts under the sticky header, so it owes that height */
.hero {
  min-height: calc(100vh - 61px);
  min-height: calc(100svh - 61px);
}

/* ---------- 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;
}
/* A published guide row links from its heading; an unpublished one is plain text. There is no
   global anchor reset in this stylesheet, so without this the link renders browser-default blue and
   underlined, which is a hue BRAND.md section 3 does not have. Hover follows the row vocabulary
   already set by `.pub:hover .pub-id`, and the focus ring is the global 2px violet at 3px offset. */
.pub h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.pub h3 a:hover,
.pub h3 a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }
.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: 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;
    /* 12px, not 20: the five links measure 284px, so 284 + 4x12 = 332 clears the
       335px content box at a 375px viewport and no link is clipped there */
    gap: 12px;
    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, but only where the strip
     still overflows: the 332px strip plus 40px of page padding needs a 372px
     viewport, so above that the fade would dim a link that already fits */
  @media (max-width: 371px) {
    .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; }

  /* 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; }

  /* 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) {
  .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; }
}

/* ==========================================================================
   CLUSTER PAGES
   Compound hubs, documented protocols, cost, comparisons, group and difference pages.
   No new tokens. Everything below is paper, graphite, slate, hairline, and
   the one accent pair, per the brand guidelines.
   ========================================================================== */

/* ---------- figures: at a glance, the Claim Strength Matrix ---------- */

.csm,
.glance {
  margin: 26px 0 28px;
  border-top: 1px solid var(--graphite);
  padding-top: 14px;
}
.csm figcaption,
.glance figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 620;
  font-stretch: 112%;
  letter-spacing: -.01em;
  color: var(--graphite);
  margin-bottom: 12px;
}
.csm-rev {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 400;
}
.csm table,
.glance table { margin-bottom: 0; }

/* the matrix scrolls in its own container below 760px. It never collapses into
   stacked cards: the comparison across rows is the point of the component */
.csm .table-scroll table { min-width: 720px; }

.csm td,
.csm th[scope="row"] { vertical-align: top; }

/* a table cell in an evidence column whose row is not a claim about effect */
.no-tier {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--slate);
}

/* citation markers, tied to the numbered reference list.
   The run wraps (a 13-marker run overflowed a 375px viewport when it could not),
   but no single [n] token ever breaks: refMarkers joins the markers with ordinary
   spaces, which is where the line breaks, and a bracket pair is unbreakable under
   the line-breaking rules. */
.ref-markers {
  font-size: 11.5px;
  color: var(--slate);
}

/* ---------- key takeaways ---------- */

.takeaways {
  list-style: none;
  margin: 0 0 22px;
  max-width: 68ch;
}
.takeaways li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
}
.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--cyan-ink);
}

/* ---------- the four-stat band ---------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 0 0 26px;
}
.stat-band > div {
  background: var(--paper);
  padding: 16px 18px;
}
.stat-band dt {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.stat-band dd {
  font-size: 20px;
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -.01em;
}

/* ---------- "Our take": one opinionated line per major claim ---------- */

.our-take {
  border-left: 2px solid var(--violet);
  padding: 2px 0 2px 16px;
  margin: 14px 0 20px;
  max-width: 66ch;
  color: var(--graphite);
}
.our-take-h {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 5px;
}

/* ---------- the derived evidence grade ---------- */

.grade-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.grade-letter {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
.grade-label {
  font-size: 13.5px;
  color: var(--slate);
}
/* semantic and fixed: A/B cyan-ink, C/D violet, and the letter always present */
.grade-a .grade-letter,
.grade-b .grade-letter { color: var(--cyan-ink); }
.grade-c .grade-letter,
.grade-d .grade-letter { color: var(--violet); }
.grade-line { max-width: 68ch; }

/* ---------- standing lines and closers ---------- */

/* the translational-limits closer, and the inline disclaimer, share the callout
   surface. They are furniture, not fine print */
.callout.closer { border-left: 2px solid var(--cyan-ink); }
.callout.disclaimer-inline { border-left: 2px solid var(--violet); }

.standing-line {
  font-size: 15px;
  color: var(--graphite);
  border-left: 1px solid var(--hairline);
  padding-left: 14px;
  max-width: 66ch;
}

/* ---------- the review stamp ---------- */

.review-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
  margin-bottom: 24px;
}
.review-stamp a {
  color: var(--cyan-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.review-stamp a:hover,
.review-stamp a:focus-visible { border-bottom-color: currentColor; }

/* ---------- sequence and molecular weight ---------- */

.chem {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--slate);
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  margin-top: 4px;
}

/* ---------- FAQ ---------- */

.faq-item { border-top: 1px solid var(--hairline); padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.doc-body .faq-item h3 { margin-top: 0; margin-bottom: 8px; }
.faq-item p { margin-bottom: 0; }

/* ---------- numbered references ---------- */

.refs {
  margin-left: 20px;
  max-width: 72ch;
  font-size: 15px;
}
.refs li { margin-bottom: 11px; }
.ref-cite { color: var(--graphite); }
.refs a { font-size: 12.5px; letter-spacing: .04em; }

/* ---------- internal-link modules ---------- */

.link-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px 34px;
  border-top: 1px solid var(--graphite);
  padding-top: 22px;
  margin-top: 46px;
}
.link-module ul { list-style: none; margin: 0; }
.link-module li { margin-bottom: 11px; }
.link-module a {
  font-size: 15px;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.link-module a:hover,
.link-module a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }
.lm-note {
  display: block;
  font-size: 13px;
  color: var(--slate);
  margin-top: 3px;
}

.intent-links { list-style: none; margin: 0 0 18px; }
.intent-links li { margin-bottom: 8px; }

/* ---------- index surfaces: /peptides/, the four hub families ---------- */

.hub-list { list-style: none; margin: 0; max-width: 74ch; }
.hub-list li {
  border-top: 1px solid var(--hairline);
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.hub-list li:last-child { border-bottom: 1px solid var(--hairline); }
.hub-list a {
  font-size: 17px;
  font-weight: 560;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hub-list a:hover,
.hub-list a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }
.hub-note {
  flex: 1 1 260px;
  font-size: 14px;
  color: var(--slate);
}
/* an index points at a claim, it does not make one. A row whose page has not
   published yet says so in visible text */
.hub-provisional {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
}

/* ---------- empty states ---------- */

.empty-note {
  border: 1px dashed #D5D6CF;
  background: var(--paper-dim);
  padding: 18px 20px;
  font-size: 15px;
  color: var(--slate);
  max-width: 70ch;
}
.doc-body .empty-cell {
  color: var(--slate);
  font-style: italic;
}

/* ---------- commercial outbound links ---------- */

/* the disclosure sits in the same visual block as the link, visible without
   interaction, and it is not itself a hyperlink: a footer or an asterisk does
   not change the net impression */
.vendor-link {
  border: 1px solid var(--hairline);
  background: var(--paper-dim);
  padding: 16px 18px;
  max-width: 66ch;
}
.vendor-link .disclosure {
  display: block;
  font-size: 13.5px;
  color: var(--slate);
  margin-top: 8px;
}

@media (max-width: 620px) {
  .link-modules { gap: 24px; }
  .stat-band dd { font-size: 18px; }
  .review-stamp { font-size: 11px; }
}

/* ==========================================================================
   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, .acc {
    transition: none !important;
  }
  .prod:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- the compound index, and the grouped reference pages ---------- */

/* The index is a real page rather than a link list, so a row carries a name, its
   aliases, a plain description and where the evidence sits. It has to stay
   readable at every width without a table, because a five column table on a
   phone is a horizontal scroll nobody performs. */

.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
  margin: 18px 0 0;
}
.catalog-search { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; max-width: 420px; }
.catalog-search span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}
.catalog-search input {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--graphite);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 10px 12px;
  width: 100%;
}
.catalog-search input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 1px;
  border-color: transparent;
}
.catalog-count { font-size: 12px; color: var(--slate); margin: 0 0 10px; }

.catalog-list { list-style: none; margin: 0; padding: 0; max-width: 80ch; }
.catalog-row {
  border-top: 1px solid var(--hairline);
  padding: 18px 0;
}
.catalog-list .catalog-row:last-child { border-bottom: 1px solid var(--hairline); }
.catalog-row > p { margin: 0; }
.catalog-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.catalog-name a {
  font-size: 17px;
  font-weight: 560;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.catalog-name a:hover,
.catalog-name a:focus-visible { color: var(--violet); border-bottom-color: currentColor; }
.catalog-aliases {
  font-size: 12px;
  color: var(--slate);
  margin-top: 4px;
}
.catalog-plain {
  font-size: 15px;
  color: var(--graphite);
  margin-top: 6px;
  max-width: 72ch;
}
/* Evidence and regulatory notes are pointers, not positions: both are restated
   with their source on the page the row links to. They read as metadata rather
   than as findings, which is the visual half of that rule. */
.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.catalog-meta .catalog-evidence { color: var(--cyan-ink); }
.catalog-group-link { margin-top: 18px; font-size: 15px; }

/* A group entry is a compound treated properly in a few hundred words. It gets a
   rule above it so the page reads as a sequence of entries rather than as one
   long article with headings in it. */
.group-entry {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  margin-top: 30px;
  scroll-margin-top: 90px;
}
.group-entry h3 { margin-top: 0; }
.entry-aliases {
  font-size: 12px;
  color: var(--slate);
  margin: -6px 0 12px;
}
.entry-regulatory {
  border-left: 2px solid var(--hairline);
  padding-left: 16px;
  font-size: 15px;
  color: var(--slate);
  max-width: 70ch;
}
.entry-regulatory .rule-label { display: block; margin-bottom: 4px; color: var(--graphite); }
.entry-links { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; }
.entry-links li { margin-bottom: 4px; }

@media (max-width: 640px) {
  .catalog-meta { font-size: 10.5px; }
  .group-entry { margin-top: 24px; }
}

/* A retracted or corrected record, called out in the reference list itself.
   A reader who cannot see the status without following the link is a reader who
   will not see it. */
.ref-status {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--violet);
}

/* The entry tier, stated once and labelled with what it covers, rather than
   riding on whichever paragraph happens to be last. */
.entry-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
}
.entry-tier .rule-label { color: var(--slate); }