/* Phenome redesign, the type pass for the pages that keep their own layout
   (Science, Contact, the FAQ): their two line .ph-display headings set as
   the pair the Ring, Band and testing pages use. A small
   line in the brand's navy over one 600 headline, the same size in every
   section, one colour each. A page opts in with the body class ph-type
   (siteManifest bodyClass) and loads this sheet last.

   The doubled .ph-display is on purpose: her page sheets size headings with
   three classes (.sci .sci-steps-head .ph-display), so this matches their
   weight and wins by coming later. */

.ph-type .ph-display.ph-display {
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600;
  letter-spacing: -0.022em; color: #fff; white-space: normal;
}
.ph-type .ph-display.ph-display.is-ink { color: #1d1d1f; }
.ph-type .ph-display.ph-display > span { display: block; font: inherit; letter-spacing: inherit; color: inherit; }
.ph-type .ph-display.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; color: inherit;
}
.ph-type .ph-display.ph-display.is-ink > span.ph-display-lead { color: #203a85; }

/* one ink per ground on these pages (Tiffany's navy text tokens) */
.ph-type.rf { --rf-ink: #1d1d1f; --rf-ink-2: #6e6e73; --rf-sunk: #f5f5f7; }
/* the purchase pages (store/phenometech-ring/pdp.css), the same swap: her
   navy ink tokens and the kit's text tokens set in the one ink and its grey */
.ph-type.pdp {
  --ink-900: #1d1d1f; --ink-600: #6e6e73; --ink-400: #86868b; --ink-label: #6e6e73;
  --ph-text-1: #1d1d1f; --ph-text-2: #6e6e73;
}
.ph-type.pdp .ph-tl-step-h,
.ph-type.pdp .ph-tl-note b { color: #1d1d1f; }
.ph-type.pdp .pdp-specs-h { font-size: clamp(44px, 5.6vw, 80px); letter-spacing: -0.022em; }
/* the test purchase pages (testing/comprehensive-genomic/cg.css), the same
   swap. On every purchase page the product's name stays on its one solid navy
   line (his ruling for these pages, 2026-09-25), at the 600 the pair uses. */
.ph-type.cgp { --cg-ink: #1d1d1f; --cg-ink-2: #6e6e73; --ink-900: #1d1d1f; --ph-text-1: #1d1d1f; --ph-text-2: #6e6e73; }
.ph-type.cgp .cg-name { font-weight: 600; }
.ph-type.pdp .pdp-name { color: #0a1e57; }

/* the Testing page's kit cards: one studio set of kit photographs, each box
   centred on white, so the card is white with a hairline edge and the box sits
   on the same white as the photograph */
.ph-type .rf-card.is-photo:has(.rf-card-img.is-kit) { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ph-type .rf-card.is-photo .rf-card-img.is-kit { background: #fff; }
.ph-type .rf-card.is-photo .rf-card-img.is-kit img { object-fit: cover; }

/* ---- the Store: the pair for its title, neutral cards, and the catalogue's
   photographs (the kits are shot on white) on a white tile framed by the card ---- */
.ph-type.shop { --shop-card: #f5f5f7; --shop-media: #fff; }
.ph-type .shop-title {
  max-width: 20ch; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05;
  font-weight: 600; letter-spacing: -0.022em; color: #1d1d1f;
}
.ph-type .shop-title-lead {
  display: block; margin-bottom: 14px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.02em; color: #203a85;
}
.ph-type .pcard:hover { background: #ebebef; }
.ph-type .shop-cat-title { font-size: clamp(24px, 2vw, 32px); letter-spacing: -0.022em; color: #1d1d1f; }

/* ---- Supplements: no film, so the hero is type on white over the ranges, lined up with the rows under it; the rows' own
   headlines are list headers, set one step down from the page headline ---- */
.ph-type.sx { --sx-mist: #fff; }
.ph-type.sx .sx-hero { display: block; height: auto; padding: clamp(96px, 9vw, 136px) 0 0; }
.ph-type.sx .sx-hero-copy { display: block; padding: 0 var(--sx-edge); background: none; }
.ph-type.sx .sx-hero .ph-display.is-hero { font-size: clamp(44px, 5.6vw, 80px); }
.ph-type.sx .sx-hero-lede { max-width: 46ch; }
.ph-type.sx .sx-jump { grid-template-columns: repeat(4, max-content); margin-top: 32px; }
.ph-type .sx-cat-head .ph-display.ph-display { font-size: clamp(32px, 3.4vw, 48px); }
@media (max-width: 733px) { .ph-type.sx .sx-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* card and tile names at 600, as the product pages set theirs */
.ph-type .hc-tile-t,
.ph-type .hc-guide-t,
.ph-type .sci-rel-copy h3 { font-weight: 600; }

/* a headline set on one line (the FAQ's "Popular right now") keeps both
   words in the headline, in one colour */
.ph-type .ph-display.ph-display.is-line > span { display: inline; }
.ph-type .ph-display.ph-display.is-line > span.ph-display-lead { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }