/* ============================================================================
   EON PEPTIDES — Research Encyclopedia  ·  v4 "Clinical Editorial" (2026-07-26)
   ----------------------------------------------------------------------------
   ONE stylesheet drives the hub (/research/peptide-encyclopedia/) and all 36
   compound monographs. Pure CSS against the existing markup — no page edits.

   Design intent: a beautifully typeset scientific reference. Hairline-first,
   light-only, IBM Plex, generous vertical rhythm, numbered sections, monospace
   data. Motion is restrained: reveal + hover only. No canvas, no aurora.

   Class vocabulary (do not rename — 37 pages depend on it):
     .enc-hero __bg __inner __crumb __eyebrow __sub __lead __stats __stat
               __ruo __cta
     .enc-dir  __group __n __name __sub
     .enc-lab  __body
     .enc-toc  __label                      (injected by encyclopedia.js)
     .enc-ident __item                      (server-rendered since 2026-09-16;
                                             encyclopedia.js stands down if present)
     .enc-mono __meta __price __coa __ruo
     .enc-figure                            (catalog photo, 2026-09-16)
     .enc-hero__figure __figure-n __figure-cap   (hub typographic stat, 2026-09-16)
     .enc-ledger __row __n __body           (numbered rows, replaced .enc-cards
                                             on the monographs 2026-09-16)
     .enc-block · .enc-cards · .enc-card · .enc-tag · .enc-cite
     NOTE: monograph section headings are h2 and item headings h3 as of
     2026-09-16 (they were h3/h4, which skipped a level under the h1).
     .enc-table (wrapped in .enc-tablewrap by JS)
     .enc-faq · .enc-qa __a
     .enc-lit  __title __meta
     .enc-xlink
   ========================================================================== */

/* ==========================================================================
   0 · Per-compound signature hue
   encyclopedia.js sets body[data-enc-cat]; the hub stays brand slate.
   ========================================================================== */
body.enc {
  --enc-accent: var(--accent);
  --enc-ink:    var(--accent-press);
  --enc-tint:   var(--accent-tint);
  --enc-tint-2: var(--accent-tint-2);
  --enc-rgb:    58, 93, 122;
}
body.enc[data-enc-cat="emerald"] {
  --enc-accent: var(--c-emerald); --enc-ink: var(--c-emerald-ink);
  --enc-tint: var(--c-emerald-tint); --enc-tint-2: #F2FBF7; --enc-rgb: 14, 158, 110;
}
body.enc[data-enc-cat="azure"] {
  --enc-accent: var(--c-azure); --enc-ink: var(--c-azure-ink);
  --enc-tint: var(--c-azure-tint); --enc-tint-2: #F3F6FE; --enc-rgb: 37, 99, 235;
}
body.enc[data-enc-cat="violet"] {
  --enc-accent: var(--c-violet); --enc-ink: var(--c-violet-ink);
  --enc-tint: var(--c-violet-tint); --enc-tint-2: #F7F3FE; --enc-rgb: 124, 58, 237;
}
body.enc[data-enc-cat="amber"] {
  --enc-accent: var(--c-amber); --enc-ink: var(--c-amber-ink);
  --enc-tint: var(--c-amber-tint); --enc-tint-2: #FDF7EE; --enc-rgb: 224, 131, 31;
}
body.enc[data-enc-cat="rose"] {
  --enc-accent: var(--c-rose); --enc-ink: var(--c-rose-ink);
  --enc-tint: var(--c-rose-tint); --enc-tint-2: #FDF4F4; --enc-rgb: 229, 72, 77;
}
body.enc[data-enc-cat="teal"] {
  --enc-accent: var(--c-teal); --enc-ink: var(--c-teal-ink);
  --enc-tint: var(--c-teal-tint); --enc-tint-2: #F1FAFB; --enc-rgb: 14, 154, 166;
}
body.enc[data-enc-cat="slate"] {
  --enc-accent: var(--accent); --enc-ink: var(--accent-press);
  --enc-tint: var(--accent-tint); --enc-tint-2: var(--accent-tint-2);
  --enc-rgb: 58, 93, 122;
}

/* Smooth anchor jumps. */
body.enc { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { body.enc { scroll-behavior: auto; } }

/* ==========================================================================
   1 · Hero — engraved grid + twin accent blooms
   ========================================================================== */
.enc-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.2rem, 1.8rem + 6vw, 5.75rem) clamp(2.4rem, 1.5rem + 3.5vw, 3.75rem);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

/* Two soft blooms in the compound's hue, faded out toward the fold. */
.enc-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 92% at 12% -6%, rgba(var(--enc-rgb), 0.11), transparent 68%),
    radial-gradient(46% 78% at 96% 4%,  rgba(var(--enc-rgb), 0.07), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}

/* Fine engraved graph-paper rule — reads as lab notebook, not decoration. */
.enc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(var(--enc-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--enc-rgb), 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 96% at 8% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 96% at 8% 0%, #000 0%, transparent 72%);
}

.enc-hero__inner { position: relative; z-index: 1; max-width: 68rem; }

/* --- breadcrumb --- */
.enc-hero__crumb {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.enc-hero__crumb a {
  color: var(--enc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.enc-hero__crumb a:hover { border-bottom-color: currentColor; }

/* --- eyebrow: leading accent tick + mono caps --- */
.enc-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--enc-ink);
}
.enc-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--enc-accent);
}

/* --- headline --- */
.enc-hero h1 {
  margin-top: var(--space-4);
  color: var(--ink);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  text-wrap: balance;
}

.enc-hero__sub {
  margin-top: var(--space-4);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--enc-ink);
  max-width: 44ch;
  text-wrap: balance;
}

/* --- "Also known as" search-alias line (added 2026-09-16) -------------------
   Researchers type the community or spelling variant as often as the catalog
   name ("wolverine stack", "melanotan 2", "copper peptide"), and those words
   appeared nowhere on the site before this. Rendered as VISIBLE copy on
   purpose: the spoke's schema alternateName mirrors exactly these strings and
   gen-knowledge-base.mjs fails the build if the two ever disagree.
   Data register, so it reads as identity metadata and not as marketing. --- */
.enc-hero__aka {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 60ch;
}

.enc-hero__aka b {
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--enc-ink);
  margin-right: 0.6em;
}

.enc-hero__lead {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  max-width: 64ch;
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* --- hub stat rail: hairline-divided, not floating boxes --- */
.enc-hero__stats {
  margin-top: clamp(1.9rem, 1rem + 2.6vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 46rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.enc-hero__stat {
  padding: clamp(0.95rem, 0.7rem + 0.8vw, 1.35rem) clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  border-left: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--enc-tint-2), transparent 62%);
}
.enc-hero__stat:first-child { border-left: 0; }
.enc-hero__stat .figure {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--enc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.enc-hero__stat span:last-child {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-3);
}

/* --- hub typographic stat (2026-09-16) ---------------------------------------
   One oversized figure and a mono caption, replacing the three-cell stat rail
   above. A count in a card next to two percentages in cards is the "10K+ ·
   99.9% · 4.9★" banner; one number set as type, with the proof points as its
   caption, is a statement. Mono + tabular so it sits with the identity strip
   and the spec tables rather than with the marketing surfaces. --- */
.enc-hero__figure {
  margin-top: clamp(1.9rem, 1rem + 2.6vw, 2.75rem);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  max-width: 46rem;
}

.enc-hero__figure-n {
  font-family: var(--font-mono);
  font-size: var(--fs-figure);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--enc-ink);
  font-variant-numeric: tabular-nums;
}

.enc-hero__figure-cap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-3);
}

.enc-hero__figure-cap b {
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}

/* --- RUO badge --- */
.enc-hero__ruo {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.15rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--enc-tint);
  border: 1px solid rgba(var(--enc-rgb), 0.26);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.35;
}
.enc-hero__ruo::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--enc-accent);
  box-shadow: 0 0 0 3px rgba(var(--enc-rgb), 0.16);
}

.enc-hero__cta {
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .enc-hero__stats { grid-template-columns: 1fr; }
  .enc-hero__stat { border-left: 0; border-top: 1px solid var(--hairline); }
  .enc-hero__stat:first-child { border-top: 0; }
  .enc-hero h1 { max-width: none; }
}

/* ==========================================================================
   2 · Molecular identity strip (monographs)
   Injected by encyclopedia.js from the "Molecular data" table, so the key
   figures sit above the fold instead of only inside a table further down.
   ========================================================================== */
.enc-ident {
  margin-top: clamp(1.8rem, 1rem + 2.4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  max-width: 52rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.enc-ident__item {
  padding: 0.9rem 1.1rem;
  border-left: 1px solid var(--hairline);
  min-width: 0;
}
.enc-ident__item:first-child { border-left: 0; }
.enc-ident__item dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.enc-ident__item dd {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .enc-ident { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enc-ident__item:nth-child(odd) { border-left: 0; }
  .enc-ident__item:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}

/* ==========================================================================
   3 · Hub — compound directory
   ========================================================================== */
.enc-dir { display: grid; gap: clamp(2.2rem, 1.2rem + 3vw, 3.4rem); }
.enc-dir__group { min-width: 0; }

/* Each group carries its own hue so the index reads as a classified library. */
.enc-dir__group:nth-of-type(1) { --grp: var(--accent);   --grp-ink: var(--accent-press); --grp-tint: var(--accent-tint); }
.enc-dir__group:nth-of-type(2) { --grp: var(--c-violet); --grp-ink: var(--c-violet-ink); --grp-tint: var(--c-violet-tint); }
.enc-dir__group:nth-of-type(3) { --grp: var(--c-amber);  --grp-ink: var(--c-amber-ink);  --grp-tint: var(--c-amber-tint); }
.enc-dir__group:nth-of-type(4) { --grp: var(--c-teal);   --grp-ink: var(--c-teal-ink);   --grp-tint: var(--c-teal-tint); }

.enc-dir__group h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.enc-dir__group h3::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--grp);
  transform: rotate(45deg);
}
.enc-dir__group h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--hairline), transparent);
}
.enc-dir__n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--grp-ink);
  background: var(--grp-tint);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.62rem;
  font-variant-numeric: tabular-nums;
}

.enc-dir__group ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.enc-dir__group li { list-style: none; min-width: 0; }
.enc-dir__group li::marker { content: ""; }

.enc-dir__group li a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.05rem 2.5rem 1.15rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-out);
}
/* Left edge in the group hue — grows on hover. */
.enc-dir__group li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grp);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.enc-dir__group li a::after {
  content: "\2192";
  position: absolute;
  top: 1rem;
  right: 1.05rem;
  font-family: var(--font-mono);
  color: var(--grp-ink);
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.enc-dir__group li a:hover,
.enc-dir__group li a:focus-visible {
  border-color: var(--hairline-strong);
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-3);
}
.enc-dir__group li a:hover::before,
.enc-dir__group li a:focus-visible::before { transform: scaleY(1); }
.enc-dir__group li a:hover::after,
.enc-dir__group li a:focus-visible::after { opacity: 1; transform: translateX(0); }

.enc-dir__name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.enc-dir__sub {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   4 · Hub — lab results callout
   ========================================================================== */
.enc-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem 2.5rem;
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  border: 1px solid rgba(var(--enc-rgb), 0.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(var(--enc-rgb), 0.10), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-2);
}
.enc-lab__body { max-width: 54ch; min-width: 0; }
.enc-lab__body .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--enc-ink);
}
.enc-lab__body h3 {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.enc-lab__body p {
  margin-top: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-body);
}

/* ==========================================================================
   5 · Monograph shell + sticky table of contents
   ========================================================================== */
.enc-mono { min-width: 0; counter-reset: encsec; }

@media (min-width: 1080px) {
  .enc-mono.has-toc {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: start;
  }
  /* Everything that is not the ToC sits in the content column. */
  .enc-mono.has-toc > *:not(.enc-toc) { grid-column: 2; }
  .enc-mono.has-toc > .enc-toc { grid-column: 1; grid-row: 1 / -1; }
}

.enc-toc {
  display: none;
  position: sticky;
  top: 6.5rem;
  align-self: start;
  min-width: 0;
}
@media (min-width: 1080px) { .enc-toc { display: block; } }

.enc-toc__label {
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.enc-toc a {
  display: block;
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 2px solid var(--hairline);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.enc-toc a:hover { color: var(--ink); border-left-color: var(--hairline-strong); }
.enc-toc a.is-active {
  color: var(--enc-ink);
  font-weight: 600;
  border-left-color: var(--enc-accent);
  background: linear-gradient(to right, rgba(var(--enc-rgb), 0.07), transparent 82%);
}

/* --- meta bar: price + COA --- */
.enc-mono__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: clamp(2.2rem, 1.2rem + 2.6vw, 3.2rem);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--enc-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(to right, var(--enc-tint-2), var(--surface) 55%);
}
.enc-mono__price { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* --- Certificate tile (2026-09-17) -----------------------------------------
   Replaces the "(PDF)" text link. Opens the site COA modal (coa.js) and shows
   the certificate's own facts - lab, purity, lot - resolved by the generator
   from the archive. The green dot is the same pass mark the modal's banner
   carries, so the trigger and the dialog read as one object. --- */
.enc-coa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 0.7rem;
  border: 1px solid rgba(var(--enc-rgb), 0.28);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface), var(--enc-tint-2));
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}
.enc-coa-btn:hover {
  border-color: var(--enc-accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.enc-coa-btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.enc-coa-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.enc-coa-btn__icon {
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--enc-tint);
  color: var(--enc-ink);
}
.enc-coa-btn__icon svg { width: 1.3rem; height: 1.3rem; }

.enc-coa-btn__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; text-align: left; }
.enc-coa-btn__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.enc-coa-btn__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enc-coa-btn__meta::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--success);
}

.enc-coa-btn__arrow {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ink-3);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.enc-coa-btn:hover .enc-coa-btn__arrow { transform: translateX(2px); color: var(--enc-ink); }

@media (max-width: 40rem) {
  .enc-coa-btn { width: 100%; }
  .enc-coa-btn__meta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .enc-coa-btn, .enc-coa-btn__arrow { transition: none; }
  .enc-coa-btn:hover { transform: none; }
}

.enc-mono__price a {
  font-weight: 600;
  color: var(--enc-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--enc-rgb), 0.35);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.enc-mono__price a:hover { border-bottom-color: currentColor; }


/* ==========================================================================
   6 · Content blocks — numbered sections
   ========================================================================== */
.enc-block {
  margin-bottom: clamp(3rem, 1.8rem + 3.4vw, 4.75rem);
  scroll-margin-top: 6rem;
}
.enc-block:last-of-type { margin-bottom: clamp(2rem, 1rem + 2.4vw, 3rem); }

.enc-block > h2 {
  counter-increment: encsec;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: clamp(1.1rem, 0.8rem + 0.9vw, 1.6rem);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* Zero-padded section index — the strongest single formatting cue on the page. */
.enc-block > h2::before {
  content: counter(encsec, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--enc-ink);
  background: var(--enc-tint);
  border-radius: var(--radius-xs);
  padding: 0.18rem 0.45rem;
  position: relative;
  top: -0.1em;
}

/* --- Related monographs (added 2026-09-16) ---------------------------------
   Each spoke previously linked only to its own PDP and back to the hub, which
   left the encyclopedia as a set of dead ends. Hairline rows, name in the
   reading face and the one-line summary in the data face, so the list scans
   like the spec tables rather than like a promo rail. --- */
.enc-related {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.enc-related li {
  border-bottom: 1px solid var(--hairline);
}

.enc-related a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0.25rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.enc-related a:hover,
.enc-related a:focus-visible {
  background: rgba(var(--enc-rgb), 0.045);
  padding-left: 0.6rem;
  color: var(--enc-ink);
}

.enc-related span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .enc-related a { transition: none; }
  .enc-related a:hover,
  .enc-related a:focus-visible { padding-left: 0.25rem; }
}

/* --- Catalog photograph (2026-09-16) -----------------------------------------
   The monograph's one content image, framed as a plate: hairline, the page
   radius, a mono caption. Capped so it reads as a reference figure and not as
   a hero. aspect-ratio + the declared width/height reserve the slot before the
   lazy image arrives, so nothing below it shifts. --- */
.enc-figure {
  margin: 0 0 clamp(2.2rem, 1.2rem + 2.6vw, 3.5rem);
  max-width: 26rem;
}

.enc-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper-sunk);
}

.enc-figure figcaption {
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-3);
}

.enc-figure figcaption b {
  font-weight: 500;
  color: var(--ink-2);
}

/* --- Numbered ledger (2026-09-16) -------------------------------------------
   Mechanisms and applications used to render as three identical cards in a
   row, each painted a different hue by DOM position. Three matching boxes is
   the feature-card trio; a hue that changes by position classifies nothing.
   These are indexed rows instead: hairline-divided, a mono index in the
   compound's own category hue (the one colour on the page that does mean
   something), body copy on a reading measure. Same vocabulary as the spec
   tables and the related list, so the whole monograph reads as one document.
   Density: tight inside a row, ≥2× between rows, ≥3× between sections. --- */
.enc-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  counter-reset: none;
}

.enc-ledger__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 var(--space-4);
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem) 0.25rem;
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.enc-ledger__row:hover {
  background: rgba(var(--enc-rgb), 0.035);
}

.enc-ledger__n {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--enc-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1em;
}

.enc-ledger__body {
  min-width: 0;
  max-width: 65ch;
}

.enc-ledger__body .enc-tag {
  display: inline-block;
  margin-bottom: 0.45rem;
}

.enc-ledger__body h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.enc-ledger__body p {
  margin: 0.5rem 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.enc-ledger__body ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.enc-ledger__body ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}

.enc-ledger__body ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.42rem;
  height: 0.24rem;
  border-left: 1.5px solid var(--enc-accent);
  border-bottom: 1.5px solid var(--enc-accent);
  transform: rotate(-45deg);
}

.enc-ledger__body .enc-cite {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.enc-ledger__body .enc-cite::before {
  content: "\25B8  ";
  color: var(--enc-accent);
}

@media (max-width: 40rem) {
  .enc-ledger__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .enc-ledger__row { transition: none; }
}

/* --- Monograph body wrapper (2026-09-17) -------------------------------------
   The article grid used to treat every child as its own row and pinned the
   ToC with grid-row: 1 / -1. With no explicit rows, -1 resolves to line 1, so
   the ToC owned row 1 alone and inflated it to its own 245px height while the
   catalog line inside that row was 122px: 123px of dead space, plus the row
   gap, above the first block. Wrapping the content makes the grid two items
   (ToC | body) and one row, which is what the rule always meant. Blocks now
   space themselves; the grid gap is a column gap only. --- */
.enc-mono__body { min-width: 0; }

/* --- Hero with the catalog photograph (2026-09-17) --------------------------
   The vial moved up out of the article, where it sat alone at 26rem in a
   full-width column, into a 7/5 split beside the hero text. --- */
@media (min-width: 60rem) {
  .enc-hero--media .enc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
    max-width: 80rem;
  }
}
.enc-hero__text  { min-width: 0; }
.enc-hero__media { min-width: 0; }
.enc-hero__media .enc-figure { margin: 0 0 0 auto; max-width: 24rem; }
@media (max-width: 59.99rem) {
  .enc-hero__media { margin-top: var(--space-6); }
  .enc-hero__media .enc-figure { margin-left: 0; max-width: 17rem; }
}

/* --- The molecule, in three dimensions (2026-09-17) -------------------------
   Ported from peptides.com (same owner): a canvas on the left, the residue
   chips and the model's own counts on the right. Residues and counts are
   server-rendered by the generator; the canvas is enhancement, drawn by
   assets/js/enc-mol3d.js once three.js has loaded. The chip hues classify
   side chains (hydrophobic / basic / acidic / polar / Gly-Pro / modified),
   which is the one place on the page colour carries meaning. --- */
.enc-mol {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .enc-mol { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.enc-mol__view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background:
    radial-gradient(70% 60% at 30% 0%, #ffffff 0%, transparent 60%),
    radial-gradient(60% 50% at 85% 10%, rgba(var(--enc-rgb), 0.10), transparent 60%),
    var(--paper);
}
/* the hero's engraved graph-paper rule, so the model sits on the same bench */
.enc-mol__view::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--enc-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--enc-rgb), 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
}
.enc-mol__view canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.enc-mol__badge {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  pointer-events: none;
}
.enc-mol__badge b { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }

.enc-mol__legend {
  position: absolute;
  left: 1rem;
  bottom: 0.8rem;
  z-index: 2;
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  pointer-events: none;
}
.enc-mol__legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.enc-mol__legend i { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }

.enc-mol__tag {
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.88);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
/* only claim "drag to turn" once the canvas is actually live */
.enc-mol__tag { display: none; }
.enc-mol.is-live .enc-mol__tag { display: block; }

.enc-mol__side { display: grid; gap: 0.85rem; align-content: start; min-width: 0; }

.enc-mol__seq {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.enc-mol__seqhead {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.enc-mol__seqhead b { color: var(--enc-ink); font-weight: 600; }
.enc-mol__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.75rem; }

.enc-res {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 2.15rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  background: var(--paper-sunk);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.enc-res__code  { font-size: 0.8125rem; font-weight: 700; line-height: 1; }
.enc-res__three { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.8; line-height: 1; }
.enc-res--hydrophobic { background: var(--ink); color: #ffffff; }
.enc-res--basic       { background: var(--c-azure); color: #ffffff; }
.enc-res--acidic      { background: var(--accent); color: #ffffff; }
.enc-res--polar       { background: var(--accent-tint); color: var(--ink); }
.enc-res--special     { background: var(--surface); color: var(--ink); border-color: var(--hairline-strong); }
.enc-res--mod         { background: var(--paper-sunk); color: var(--accent-press); border-color: var(--hairline-strong); border-style: dashed; }
.enc-res:hover, .enc-res.on {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--enc-accent);
}
.enc-res:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.enc-mol__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.enc-mol__stats > div { background: var(--surface); padding: 0.7rem 1rem; min-width: 0; }
.enc-mol__stats dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.enc-mol__stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.enc-mol__note { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }
.enc-mol__note a { color: var(--enc-ink); }
.enc-mol__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .enc-res { transition: none; }
  .enc-res:hover, .enc-res.on { transform: none; }
}

/* --- How it's tested (2026-09-17) -------------------------------------------
   The compound's own release record from the certificate archive: a lead
   paragraph, the same four-cell counts strip the 3D section uses, the three
   latest lots as hairline rows with a per-lot certificate trigger (lab per
   certificate, baked by the generator), and a link to the full library. --- */
.enc-lots__lead { margin: 0 0 1rem; max-width: 65ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.enc-lots__stats { margin-bottom: 1rem; }
@media (min-width: 60rem) { .enc-lots__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.enc-lots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.enc-lots__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 5.5rem auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.enc-lots__lot { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.enc-lots__lot b { font-weight: 600; color: var(--ink); }
.enc-lots__purity { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.enc-lots__open {
  justify-self: end;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--enc-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.enc-lots__open:hover { border-color: var(--enc-accent); background: var(--enc-tint-2); }
.enc-lots__open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.enc-lots__more { margin: 0.9rem 0 0; font-size: var(--fs-sm); }
.enc-lots__more a { color: var(--enc-ink); }
@media (max-width: 40rem) {
  .enc-lots__row { grid-template-columns: minmax(0, 1fr) auto; }
  .enc-lots__date { grid-column: 1 / -1; }
  .enc-lots__purity { justify-self: start; }
  .enc-lots__open { min-height: 2.5rem; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .enc-lots__open { transition: none; } }

/* ==========================================================================
   7 · Data tables
   ========================================================================== */
.enc-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.enc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface);
}
/* Standalone fallback border when JS has not wrapped the table. */
.enc-block > .enc-table {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.enc-table tr + tr { border-top: 1px solid var(--hairline); }
.enc-table tbody tr:nth-child(even) { background: rgba(240, 240, 242, 0.5); }
.enc-table tbody tr:hover { background: rgba(var(--enc-rgb), 0.045); }

.enc-table th[scope="row"] {
  width: 38%;
  min-width: 11rem;
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--hairline);
}
.enc-table td {
  padding: 0.8rem 1rem;
  vertical-align: top;
  color: var(--ink);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .enc-table th[scope="row"] { width: 42%; min-width: 8.5rem; font-size: 0.7rem; }
  .enc-table th[scope="row"], .enc-table td { padding: 0.7rem 0.75rem; }
}

/* ==========================================================================
   8 · Mechanism / evidence cards
   ========================================================================== */
.enc-cards {
  display: grid;
  gap: clamp(0.85rem, 0.5rem + 1vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

.enc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-out);
}
/* Hairline top bar in the card's hue — sweeps full width on hover. */
.enc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 2.75rem;
  background: var(--card-hue, var(--enc-accent));
  transition: width var(--dur-slow) var(--ease-out);
}
.enc-card:hover {
  transform: translateY(var(--lift-card));
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-3);
}
.enc-card:hover::before { width: 100%; }

/* Rotate the categorical accents across the grid for colour rhythm. */
.enc-card:nth-child(6n + 1) { --card-hue: var(--c-emerald); --card-ink: var(--c-emerald-ink); --card-tint: var(--c-emerald-tint); }
.enc-card:nth-child(6n + 2) { --card-hue: var(--c-azure);   --card-ink: var(--c-azure-ink);   --card-tint: var(--c-azure-tint); }
.enc-card:nth-child(6n + 3) { --card-hue: var(--c-violet);  --card-ink: var(--c-violet-ink);  --card-tint: var(--c-violet-tint); }
.enc-card:nth-child(6n + 4) { --card-hue: var(--c-amber);   --card-ink: var(--c-amber-ink);   --card-tint: var(--c-amber-tint); }
.enc-card:nth-child(6n + 5) { --card-hue: var(--c-teal);    --card-ink: var(--c-teal-ink);    --card-tint: var(--c-teal-tint); }
.enc-card:nth-child(6n + 6) { --card-hue: var(--accent);    --card-ink: var(--accent-press);  --card-tint: var(--accent-tint); }

.enc-tag {
  align-self: flex-start;
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--card-tint, var(--enc-tint));
  color: var(--card-ink, var(--enc-ink));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1.5;
}

.enc-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.enc-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.enc-card ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
  padding: 0.8rem 0 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.enc-card ul li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  list-style: none;
}
.enc-card ul li::marker { content: ""; }
/* Small accent tick instead of a bullet. */
.enc-card ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.48em;
  width: 0.42rem;
  height: 0.24rem;
  border-left: 1.5px solid var(--card-hue, var(--enc-accent));
  border-bottom: 1.5px solid var(--card-hue, var(--enc-accent));
  transform: rotate(-45deg);
}

/* Citation line pinned to the card foot. */
.enc-card .enc-cite {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.enc-card .enc-cite::before { content: "\25B8  "; color: var(--card-hue, var(--enc-accent)); }

/* ==========================================================================
   9 · FAQ accordion
   ========================================================================== */
.enc-faq {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.enc-qa { border-top: 1px solid var(--hairline); }
.enc-qa:first-child { border-top: 0; }

.enc-qa > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.enc-qa > summary::-webkit-details-marker { display: none; }
.enc-qa > summary::marker { content: ""; }
.enc-qa > summary:hover { background: var(--enc-tint-2); color: var(--enc-ink); }

/* Chevron, drawn in CSS; rotates on open. */
.enc-qa > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: 0.3em;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.75px solid var(--enc-accent);
  border-bottom: 1.75px solid var(--enc-accent);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--dur-base) var(--ease-out);
}
.enc-qa[open] > summary { color: var(--enc-ink); background: var(--enc-tint-2); }
.enc-qa[open] > summary::after { transform: rotate(-135deg); }

.enc-qa__a {
  margin-left: 1.15rem;
  padding: 0 1.15rem 1.15rem;
  border-left: 2px solid var(--enc-accent);
}
.enc-qa__a p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 72ch;
}
.enc-qa__a p + p { margin-top: 0.7rem; }

/* ==========================================================================
   10 · Literature — numbered reference list
   ========================================================================== */
.enc-lit {
  counter-reset: enclit;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.enc-lit li {
  counter-increment: enclit;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  padding: 0.95rem 1.15rem 0.95rem 3.4rem;
  border-top: 1px solid var(--hairline);
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.enc-lit li:first-child { border-top: 0; }
.enc-lit li:hover { background: var(--enc-tint-2); }
.enc-lit li::marker { content: ""; }
.enc-lit li::before {
  content: counter(enclit, decimal-leading-zero);
  position: absolute;
  left: 1.15rem;
  top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--enc-ink);
  font-variant-numeric: tabular-nums;
}
.enc-lit .enc-tag {
  grid-column: 1;
  --card-tint: var(--enc-tint);
  --card-ink: var(--enc-ink);
}
.enc-lit__title {
  grid-column: 2;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.006em;
}
.enc-lit__meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
@media (max-width: 560px) {
  .enc-lit li {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 1.15rem;
    padding-top: 2.1rem;
  }
  .enc-lit li::before { top: 0.8rem; }
  .enc-lit .enc-tag,
  .enc-lit__title,
  .enc-lit__meta { grid-column: 1; }
}

/* ==========================================================================
   11 · Monograph footer — RUO note + cross-links
   ========================================================================== */
.enc-mono__ruo {
  margin-top: clamp(2rem, 1.2rem + 2vw, 2.75rem);
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 2px solid var(--hairline-strong);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 78ch;
}

.enc-xlink {
  margin-top: clamp(1.6rem, 1rem + 1.8vw, 2.25rem);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.enc-xlink a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.95rem 1.35rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.enc-xlink a:hover {
  color: var(--enc-ink);
  border-color: var(--enc-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
/* Background is --enc-ink, NOT --enc-accent: white on the lighter categorical
   hues (emerald 2.9:1, teal, amber) fails AA. The -ink variants all clear
   5:1 against white. */
.enc-xlink a.is-primary {
  background: var(--enc-ink);
  border-color: var(--enc-ink);
  color: #fff;
}
.enc-xlink a.is-primary:hover {
  color: #fff;
  filter: brightness(0.94);
  box-shadow: 0 12px 28px -14px rgba(var(--enc-rgb), 0.6);
}

/* ==========================================================================
   12 · Motion — reveal on scroll (armed only when JS is present)
   ========================================================================== */
.enc-anim body.enc [data-enc-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--enc-i, 0) * var(--stagger-step));
}
.enc-anim body.enc [data-enc-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .enc-anim body.enc [data-enc-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   13 · Print — the reference should print like a reference
   ========================================================================== */
@media print {
  body.enc .enc-hero__bg,
  body.enc .enc-hero::before,
  body.enc .enc-toc,
  body.enc .enc-xlink,
  body.enc #site-nav,
  body.enc .footer,
  body.enc [data-eon-drawer] { display: none !important; }

  body.enc .enc-mono.has-toc { display: block; }
  body.enc [data-enc-reveal] { opacity: 1 !important; transform: none !important; }
  body.enc .enc-block { break-inside: avoid; }
  body.enc .enc-card,
  body.enc .enc-table,
  body.enc .enc-lit li { break-inside: avoid; }
  body.enc .enc-hero { border-bottom: 1px solid #999; }
}