/* Phenome redesign, the genetic and microbiome testing pages.

   testing/genetic (dna.css, dna.js) and testing/microbiome (mb.css) keep
   their navy hero and closing card, four kits, table, laboratory and priced
   cards. This sheet, loaded after those and after the Ring and Band sheets the
   genetic page borrows (lab.css, fit.css, product.css, ring-port.css, the app
   harness), gives both pages the Ring and Band type: two line headings as the
   page pair (a small line over one 600 headline, one size in every section),
   the small line in the brand's navy, one ink per ground (#1d1d1f on white,
   #f5f5f7 on black), black for the ink sections and white for the blue washed
   ones. Accents that are not text (the rail, the discs, the checks) keep their
   own colours. */

/* ---- grounds ---------------------------------------------------------------- */
.dna {
  --d-ink: #000;
  --d-tint: #fff;
  --d-line: rgba(0, 0, 0, .1);
  --d-line-d: rgba(255, 255, 255, .14);
  --d-body-d: #86868b;
}

/* ---- the heading pair ----------------------------------------------------------
   -0.022em: what the Ring and Band headlines render with */
.dna .ph-display,
.dna .dna-part-copy .ph-display,
.dna .dna-close .dna-close-h,
.mb .mb-band-h {
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600;
  letter-spacing: -0.022em; color: #f5f5f7;
}
.dna .ph-display.is-ink { color: #1d1d1f; }
.dna .ph-display > span { font: inherit; letter-spacing: inherit; color: inherit; }
.dna .ph-display > span.ph-display-lead {
  margin-bottom: 14px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.02em;
}
/* the hero pair as the Band's hero sets it: the name line, then the headline */
.dna .ph-display.is-hero { margin: 0; font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; }
.dna .ph-display.is-hero > span.ph-display-lead { margin-bottom: 8px; }

/* the small line in the brand's navy: phenome-blue-500 on white, its lifted
   step (blue-300) on black, and blue-200 on her navy and over photographs */
.dna .ph-display > span.ph-display-lead { color: #203a85; }
.dna .ph-display:not(.is-ink) > span.ph-display-lead { color: inherit; }
.dna .dna-hero .ph-display > span.ph-display-lead,
.dna .dna-close .ph-display > span.ph-display-lead,
.dna .dna-band .ph-display > span.ph-display-lead,
.dna .dna-world .ph-display > span.ph-display-lead { color: inherit; }
.dna .dna-band .ph-display { color: #fff; }

/* ---- words on white ------------------------------------------------------------ */
.dna .dna-lede { color: #6e6e73; }
.dna .dna-gene-p { color: #1d1d1f; }

/* the four tests (two kits on the microbiome page) */
.dna .dna-bento-card { color: #1d1d1f !important; }
.dna .dna-bento-copy h3 { color: #1d1d1f; }
.dna .dna-bento-n { color: #86868b; }
.dna .dna-bento-copy p { color: #6e6e73; }

/* the table, with the paragraph that used to sit over the garden above it */
.dna .dna-cmp-lede { max-width: 760px; margin: 0 auto clamp(56px, 6vw, 88px); }
.dna .dna-tr > :first-child,
.dna .dna-tr > :nth-child(3) { color: #1d1d1f; }
.dna .dna-tr > :nth-child(2) { color: #6e6e73; }
.dna .dna-tr.is-head > * { color: #86868b; border-bottom-color: rgba(0, 0, 0, .14); }
.dna .dna-tr.is-head > :nth-child(3) { color: #1d1d1f; }
.dna .dna-table::before { box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(0, 0, 0, .08); }
@media (max-width: 860px) {
  .dna .dna-tr > :nth-child(2)::before,
  .dna .dna-tr > :nth-child(3)::before { color: #86868b; }
  .dna .dna-tr > :nth-child(3)::before { color: #1d1d1f; }
  .dna .dna-tr > :nth-child(3) { background: #f5f5f7; box-shadow: none; }
}

/* the shop cards */
.dna .dna-card { background: #f5f5f7; }
.dna .dna-card-t,
.dna .dna-card-p { color: #1d1d1f; }
.dna .dna-card-d { color: #6e6e73; }

/* ---- words on black ------------------------------------------------------------ */
.dna .dna-read-n { color: #86868b; }
.dna .dna-part-media::after { background: linear-gradient(92deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .8) 78%, #000 100%); }
@media (max-width: 899px) {
  .dna .dna-part-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .96)); }
}
.dna .dna-part-h { color: #f5f5f7; }
.dna .dna-std li { color: #f5f5f7; }

/* ---- genetic · what you can learn (product.css .pd-gallery, gallery.js) -------- */
.dna .dna-gal .ph-display { margin: 0; }

/* ---- genetic · the six readings (ring-port.css .lab.pd-feat): the app's own
   icons, filled, in the navy ----------------------------------------------------- */
.dna .dna-feat .lab.pd-feat .lab-featlist svg { width: 34px; height: 34px; fill: #203a85; stroke: none; }

/* ---- genetic · whole genome sequencing (product.css .pd-world) ------------------- */
.dna .dna-world .ph-display { color: #f5f5f7; }

/* ---- genetic · in the app (fit.css, ring-port.css .rtune-lab, the harness) ------- */
.dna .lab .fit-ic.gx-fic svg { fill: currentColor; stroke: none; }

/* ---- genetic · the PDF: its cover beside its parts, on white ---------------------- */
.dna .dna-pdf { padding: clamp(100px, 11vw, 170px) 0; background: #fff; }
.dna .dna-pdf-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px); align-items: center;
}
.dna .dna-pdf-art { justify-self: center; width: min(100%, 440px); margin: 0; }
.dna .dna-pdf-art img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 50px 90px -42px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .08);
}
.dna .dna-pdf-copy .dna-lede { max-width: 46ch; }
/* two reports: the oral cover behind, up and to the right; the gut cover in front */
.dna .dna-pdf-art.is-pair { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1.3; }
.dna .dna-pdf-art.is-pair img { position: absolute; width: 82%; }
.dna .dna-pdf-art.is-pair img:first-child { top: 0; right: 0; }
.dna .dna-pdf-art.is-pair img:last-child { bottom: 0; left: 0; }
.dna .dna-toc { margin: clamp(32px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; counter-reset: toc; }
.dna .dna-toc li {
  counter-increment: toc; display: grid; grid-template-columns: 48px minmax(0, 1fr);
  padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, .1);
}
.dna .dna-toc li::before {
  content: counter(toc, decimal-leading-zero); grid-row: 1 / span 2;
  font-size: 17px; line-height: 1.5; font-weight: 600; color: #203a85; font-variant-numeric: tabular-nums;
}
.dna .dna-toc b { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.35; font-weight: 600; color: #1d1d1f; }
.dna .dna-toc span { margin-top: 2px; font-size: 17px; line-height: 1.45; color: #6e6e73; }
@media (max-width: 899px) {
  .dna .dna-pdf-grid { grid-template-columns: minmax(0, 1fr); }
  .dna .dna-pdf-art { width: min(64%, 340px); }
}

/* ---- genetic · why it matters: the gene list's areas as figures, on black -------- */
.dna .dna-stats { padding: clamp(100px, 11vw, 170px) 0; background: #000; color: #f5f5f7; }
.dna .dna-stats .dna-lede { max-width: 60ch; }
.dna .dna-stat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4.4vw, 64px) clamp(24px, 4vw, 64px);
  margin: clamp(56px, 6vw, 96px) 0 0; padding: 0; list-style: none;
}
.dna .dna-stat-grid li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); }
.dna .dna-stat-grid b {
  display: block; font-size: clamp(48px, 5.6vw, 80px); line-height: 1; font-weight: 600;
  letter-spacing: -0.03em; color: #f5f5f7; font-variant-numeric: tabular-nums;
}
.dna .dna-stat-grid span { display: block; margin-top: 12px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; color: #86868b; }
.dna .dna-stat-note { margin: clamp(40px, 4vw, 56px) 0 0; font-size: 15px; line-height: 1.4; color: #6e6e73; }
@media (max-width: 899px) { .dna .dna-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dna .dna-stat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- microbiome · your results, in the app and as a PDF, on black ---------------- */
.dna .dna-res { background: #000; color: #f5f5f7; padding: clamp(90px, 10vw, 150px) 0; }
.dna .dna-res .dna-lede { max-width: 52ch; }
.dna .dna-res-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 90px); margin-top: clamp(48px, 5.4vw, 86px);
}
.dna .dna-res-h {
  margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25;
  font-weight: 600; letter-spacing: -0.012em; color: #f5f5f7;
}
.dna .dna-res .dna-std { margin-top: 22px; }
.dna .dna-res .dna-std li { align-items: flex-start; font-size: clamp(17px, 1.3vw, 19px); }
.dna .dna-res .dna-std li::before { margin-top: 1px; }
@media (max-width: 899px) { .dna .dna-res-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- microbiome ------------------------------------------------------------------ */
.mb .mb-trust-list li { color: #1d1d1f; }
.mb .mb-bal-k { color: #86868b; }
.mb .mb-bal-side.is-good .mb-bal-k { color: #1d1d1f; }
.mb .mb-bal-d { color: #1d1d1f; }
.mb .mb-bal-side:not(.is-good) .mb-bal-d { color: #6e6e73; }
.mb .mb-bal-side.is-good { box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.mb .dna-cmp.mb-bal { padding-bottom: clamp(90px, 10vw, 150px); }
.mb .dna-res + .dna-close,
.mb .dna-part + .dna-close { padding-top: clamp(56px, 6vw, 96px); }