/* ═══════════════════════════════════════════════════════════════
   SHOP · LIVING SPECTRUM LAYER
   Canonical source of the shared chrome blocks: src/styles/living-spectrum.css
   (keep tokens, nav glass, footer coda, and reveal recipes in sync).
   Loaded after shop.html's inline <style>, so equal-specificity ties win here.
   Scope: body.dossier-page.living-spectrum-page (shop only).
   ═══════════════════════════════════════════════════════════════ */

body.dossier-page.living-spectrum-page {
  --ls-canvas: #07090c;
  --ls-canvas-soft: #0c1016;
  --ls-platinum: #f1f2f0;
  --ls-platinum-muted: rgba(235, 238, 240, 0.68);
  --ls-cobalt: 57, 137, 255;
  --ls-amber: 239, 157, 68;
  --ls-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Remap the legacy tokens so the inline styles recolor wholesale. */
  --bg: var(--ls-canvas);
  --bg-warm: var(--ls-canvas-soft);
  --bg-card: #0b0d10;
  --text: #e7e9e8;
  --text-heading: var(--ls-platinum);
  --muted: #9da2a5;
  --faint: #858b90;
  --line: rgba(241, 242, 240, 0.06);
  --line-strong: rgba(241, 242, 240, 0.14);
  --nav-bg: rgba(5, 6, 7, 0.72);

  color-scheme: dark;
  background:
    radial-gradient(ellipse 82vw 72vh at -12% 30%, rgba(var(--ls-cobalt), 0.12), transparent 68%),
    radial-gradient(ellipse 78vw 76vh at 112% 68%, rgba(var(--ls-amber), 0.1), transparent 70%),
    linear-gradient(180deg, #06080b 0%, #0a0e14 38%, #100d0c 72%, #07090c 100%);
  color: var(--ls-platinum-muted);
}

body.dossier-page.living-spectrum-page::before {
  display: none;
}

/* ── Nav: transparent over the catalogue, glass once scrolled ── */

body.dossier-page.living-spectrum-page .site-nav {
  height: auto;
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top)) clamp(20px, 3.4vw, 48px) 10px;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 380ms var(--ls-ease), border-color 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .site-nav.is-scrolled {
  background: rgba(6, 8, 11, 0.94);
  border-bottom: 1px solid rgba(241, 242, 240, 0.06);
}

body.dossier-page.living-spectrum-page .logo {
  color: var(--ls-platinum);
}

body.dossier-page.living-spectrum-page .logo::before {
  display: none;
}

body.dossier-page.living-spectrum-page .nav-center {
  gap: clamp(26px, 3vw, 42px);
}

body.dossier-page.living-spectrum-page .nav-center a {
  padding: 4px 2px;
  color: var(--ls-platinum-muted);
  opacity: 1;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.dossier-page.living-spectrum-page .nav-center a::after {
  bottom: 6px;
  height: 1px;
  background: rgba(241, 242, 240, 0.6);
}

body.dossier-page.living-spectrum-page .nav-center a:hover,
body.dossier-page.living-spectrum-page .nav-center a.active {
  color: var(--ls-platinum);
  opacity: 1;
}

body.dossier-page.living-spectrum-page .nav-cart-btn {
  min-height: 40px;
  padding: 0 22px;
  background: rgba(241, 242, 240, 0.05);
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  color: var(--ls-platinum);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  transition: background-color 240ms ease, border-color 240ms ease, transform 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .nav-cart-btn:hover {
  background: rgba(241, 242, 240, 0.09);
  border-color: rgba(241, 242, 240, 0.3);
  letter-spacing: 0.14em;
  transform: translateY(-1px);
}

body.dossier-page.living-spectrum-page .nav-cart-btn #cart-count:not([hidden]) {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  place-items: center;
  background: var(--ls-platinum);
  border-radius: 999px;
  color: var(--ls-canvas);
  font-size: 9px;
}

body.dossier-page.living-spectrum-page :where(a, button):focus-visible {
  outline: 1px solid rgba(241, 242, 240, 0.92);
  outline-offset: 5px;
}

/* ── Scroll container: one continuous canvas ── */

body.dossier-page.living-spectrum-page .dossier-scroll {
  background: transparent;
  scrollbar-color: rgba(241, 242, 240, 0.18) transparent;
}

/* One canvas everywhere: the body gradient shows through main, scroller,
   intro, and side rail alike. */
body.dossier-page.living-spectrum-page main,
body.dossier-page.living-spectrum-page .shop-main,
body.dossier-page.living-spectrum-page .dossier-intro,
body.dossier-page.living-spectrum-page .compound-sidebar {
  background-color: transparent;
}

body.dossier-page.living-spectrum-page .dossier-section {
  background: transparent;
}

body.dossier-page.living-spectrum-page .dossier-section:nth-child(odd),
body.dossier-page.living-spectrum-page .dossier-section:nth-child(even) {
  background: transparent;
}

/* ── Laptop heights: the card fits the visible field ──
   The one-screen-per-card composition assumes ~820px of viewport. On
   MacBook-Air-class windows (1280x832 logical minus browser chrome =
   640-745px) the centered card slid under the fixed header and past the
   viewport bottom (owner direction 2026-07-16: the card must sit fully
   inside — clear of the main nav, the side rail, and the bottom edge).
   The theatre keeps its one-screen snap; the section carves the header +
   margins out of the stage so the card centers in what is actually
   visible, and the compact rhythm (below) keeps its natural height small
   enough to fit. At >=820px the designed theatre is untouched. */
@media (min-width: 768px) and (max-height: 919px) {
  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) {
    padding-top: 88px;   /* 72px fixed header + 16px air */
    padding-bottom: 20px;
  }
}

/* Sub-700px windows (half-height laptops, small resized windows): the
   compact card still measures ~570-615px — zoom it down so it clears the
   carved stage. Layout-affecting zoom is supported by all current
   evergreen engines; unsupported ones just keep the 700px behavior. */
@media (min-width: 768px) and (max-height: 739px) {
  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-stage {
    zoom: 0.85;
  }
}

/* Light behind each card so the glass has something to refract. */
@media (min-width: 768px) {
  body.dossier-page.living-spectrum-page .dossier-section {
    position: relative;
  }

  body.dossier-page.living-spectrum-page .dossier-section::before,
  body.dossier-page.living-spectrum-page .dossier-section::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: none;
    transform: none;
    pointer-events: none;
  }

  body.dossier-page.living-spectrum-page .dossier-section::before {
    top: 20%;
    left: 6%;
    width: 42%;
    height: 52%;
    background: radial-gradient(ellipse at center, rgba(var(--ls-cobalt), 0.22), transparent 68%);
    filter: blur(72px);
  }

  body.dossier-page.living-spectrum-page .dossier-section::after {
    right: 4%;
    bottom: 8%;
    width: 40%;
    height: 48%;
    background: radial-gradient(ellipse at center, rgba(var(--ls-amber), 0.18), transparent 68%);
    filter: blur(78px);
  }

  body.dossier-page.living-spectrum-page .d-stage {
    position: relative;
    z-index: 1;
  }
}

/* ── Landing: centered masthead over the catalogue lineup ── */

body.dossier-page.living-spectrum-page .dossier-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(72px, 9.5vh, 110px);
  text-align: center;
}

/* Compact rhythm so copy + lineup fit inside the first viewport (the
   section is a snap stop; anything past 100vh is unreachable). */
body.dossier-page.living-spectrum-page .dossier-intro__subtitle {
  margin-bottom: 10px;
}

body.dossier-page.living-spectrum-page .dossier-intro__lead {
  margin-bottom: clamp(14px, 2vh, 24px);
}

body.dossier-page.living-spectrum-page .dossier-intro__metrics {
  margin-bottom: clamp(14px, 2vh, 24px);
}

body.dossier-page.living-spectrum-page .dossier-intro__actions {
  margin-bottom: clamp(10px, 1.6vh, 18px);
}

body.dossier-page.living-spectrum-page .dossier-intro__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

body.dossier-page.living-spectrum-page .dossier-intro__metrics,
body.dossier-page.living-spectrum-page .dossier-intro__actions,
body.dossier-page.living-spectrum-page .dossier-intro__pillars {
  justify-content: center;
}

/* The catalogue lineup as the hero itself: full-bleed at the base of the
   viewport, copy floating in the render's dark headroom, bottom bleeding
   into the first dossier. Activated by shop-spectrum.js once the asset
   exists. */
body.dossier-page.living-spectrum-page .dossier-intro__lineup {
  display: none;
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(440px, 62vh, 920px);
  background: url('/us/hero/catalog-lineup.webp') center 68% / cover no-repeat;
  pointer-events: none;
  /* Dissolve the photo itself instead of painting a scrim over it: the
     mask lets the live canvas (glow blobs included) continue through the
     band's top, so the photo has no starting edge at any viewport. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 26%, #000 48%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 26%, #000 48%);
}

/* Bottom handoff: settle the slab back into the canvas before the first
   dossier card takes over. */
body.dossier-page.living-spectrum-page .dossier-intro__lineup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #07090c 0%, rgba(7, 9, 12, 0.5) 8%, transparent 22%);
}

body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__lineup {
  display: block;
}

/* Desktop composition: the scene pulls in off the side rail (soft side
   fades, never a hard edge) and the copy rides lower on tall windows
   (vh-scaled padding leaves laptop heights untouched). */
@media (min-width: 768px) {
  body.dossier-page.living-spectrum-page .dossier-intro__lineup {
    left: clamp(28px, 3.4vw, 84px);
    right: clamp(28px, 3.4vw, 84px);
    -webkit-mask-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 26%, #000 48%),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    mask-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 26%, #000 48%),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 10%, #000 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  body.dossier-page.living-spectrum-page .dossier-intro.has-lineup {
    padding-top: clamp(120px, 26vh, 400px);
  }
}

body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__copy {
  position: relative;
  z-index: 1;
}

/* With the render carrying the story, the copy stays lean: the second
   paragraph and the pillar legend hand their jobs to the image and rail. */
body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__lead,
body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__metrics,
body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__pillars {
  display: none;
}

body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__title {
  font-size: clamp(44px, 4.6vw, 64px);
}

body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__subtitle {
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

@media (max-width: 767px) {
  body.dossier-page.living-spectrum-page .dossier-intro__lineup {
    background-position: center 88%;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__lineup {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 22%, #000 42%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 22%, #000 42%);
  }

  body.dossier-page.living-spectrum-page .dossier-intro__lineup::before {
    background: linear-gradient(0deg, #07090c 0%, rgba(7, 9, 12, 0.5) 8%, transparent 22%);
  }

  /* The inline sheet re-shows the metrics strip with !important for the
     legacy tile intro; in lineup mode the photo carries that story. */
  body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__metrics {
    display: none !important;
  }

  /* Phone hero: copy up top, lineup just beneath it. Tightened from a full
     88svh so the vials are visible early instead of stranded below a tall
     black void. */
  body.dossier-page.living-spectrum-page .dossier-intro.has-lineup {
    min-height: min(62svh, 540px);
    padding-top: clamp(52px, 7vh, 84px);
  }
}

/* The lineup is the scroll invitation; retire the arrow and rule under it. */
body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .scroll-arrow,
body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__line {
  display: none;
}

@media (max-width: 767px) {
  body.dossier-page.living-spectrum-page .dossier-intro__lineup {
    width: 100%;
    height: clamp(300px, 42svh, 400px);
  }
}

body.dossier-page.living-spectrum-page .dossier-intro__edition {
  display: block;
  margin-bottom: 18px;
  color: rgba(235, 238, 240, 0.62);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.dossier-page.living-spectrum-page .dossier-intro__title {
  color: var(--ls-platinum);
  font-weight: 200;
  letter-spacing: -0.04em;
}

body.dossier-page.living-spectrum-page .dossier-intro__subtitle,
body.dossier-page.living-spectrum-page .dossier-intro__lead {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(231, 235, 238, 0.62);
  font-weight: 300;
  line-height: 1.72;
}

body.dossier-page.living-spectrum-page .dossier-intro__metrics {
  gap: 0;
}

body.dossier-page.living-spectrum-page .dossier-intro__metric {
  position: relative;
  background: none;
  border: 0;
  padding: 4px clamp(26px, 3vw, 44px);
}

body.dossier-page.living-spectrum-page .dossier-intro__metric:first-child {
  padding-left: 0;
}

body.dossier-page.living-spectrum-page .dossier-intro__metric + .dossier-intro__metric::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(224, 231, 237, 0.18), transparent);
}

body.dossier-page.living-spectrum-page .dossier-intro__metric-value {
  color: var(--ls-platinum);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

body.dossier-page.living-spectrum-page .dossier-intro__metric-label {
  color: rgba(235, 238, 240, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.dossier-page.living-spectrum-page .dossier-intro__actions {
  gap: 14px 30px;
}

body.dossier-page.living-spectrum-page .dossier-intro__actions .btn {
  min-height: 48px;
  padding: 13px 24px;
  background: rgba(239, 241, 240, 0.94);
  border: 0;
  border-radius: 0;
  color: var(--ls-canvas);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background-color 240ms ease, transform 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .dossier-intro__actions .btn:hover {
  background: var(--ls-platinum);
  transform: translateY(-2px);
}

/* Legacy .btn-ghost pins its chrome with !important; match it to win. */
body.dossier-page.living-spectrum-page .dossier-intro__actions .btn.btn-ghost {
  position: relative;
  padding: 13px 0;
  background: none !important;
  border: 0 !important;
  color: var(--ls-platinum) !important;
  transform: none;
}

body.dossier-page.living-spectrum-page .dossier-intro__actions .btn.btn-ghost::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
  transition: opacity 240ms ease;
}

body.dossier-page.living-spectrum-page .dossier-intro__actions .btn.btn-ghost:hover {
  background: none !important;
  border: 0 !important;
  transform: none;
}

body.dossier-page.living-spectrum-page .dossier-intro__actions .btn.btn-ghost:hover::after {
  opacity: 0.92;
}

body.dossier-page.living-spectrum-page .dossier-intro__pillar-chip {
  color: rgba(235, 238, 240, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
}

body.dossier-page.living-spectrum-page .scroll-arrow {
  color: rgba(235, 238, 240, 0.42);
}

/* ── Dossier card: the Private Line glass, scaled for a product card ── */

body.dossier-page.living-spectrum-page .d-card {
  background:
    linear-gradient(135deg, rgba(235, 242, 248, 0.09) 0%, rgba(180, 198, 215, 0.03) 38%, rgba(255, 255, 255, 0.016) 62%, rgba(230, 181, 132, 0.05) 100%),
    rgba(12, 16, 22, 0.3);
  border: 0;
  border-radius: clamp(22px, 2.4vw, 34px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(255, 255, 255, 0.03) inset,
    -22px 26px 90px rgba(19, 57, 102, 0.17),
    24px 32px 96px rgba(91, 52, 25, 0.13),
    0 28px 56px rgba(0, 0, 0, 0.32),
    0 64px 150px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  isolation: isolate;
  transform: translateZ(0);
}

body.dossier-page.living-spectrum-page .d-card::before {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  width: auto;
  height: auto;
  padding: 1px;
  background: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.09) 24%,
    rgba(255, 255, 255, 0.025) 50%,
    rgba(255, 255, 255, 0.11) 78%,
    rgba(255, 235, 216, 0.25) 100%
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transform: none;
  pointer-events: none;
}

body.dossier-page.living-spectrum-page .d-card__sheen {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(58% 44% at 12% -4%, rgba(255, 255, 255, 0.09), transparent 62%),
    linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.03) 44%, transparent 56%),
    radial-gradient(42% 36% at 96% 104%, rgba(var(--ls-amber), 0.05), transparent 66%);
  pointer-events: none;
}

body.dossier-page.living-spectrum-page .d-left {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.015);
  border-right: 0;
}

body.dossier-page.living-spectrum-page .d-left::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(224, 231, 237, 0.16) 18%, rgba(224, 231, 237, 0.16) 82%, transparent);
  pointer-events: none;
}

body.dossier-page.living-spectrum-page .d-right {
  position: relative;
  z-index: 1;
}

body.dossier-page.living-spectrum-page .d-right-block {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.14), rgba(224, 231, 237, 0.04) 70%, transparent) bottom / 100% 1px no-repeat;
}

body.dossier-page.living-spectrum-page .d-right-block--pair {
  background: none;
}

/* Type retune inside the card */

body.dossier-page.living-spectrum-page .d-kicker {
  display: block;
  margin: 0 0 10px;
  color: rgba(235, 238, 240, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.dossier-page.living-spectrum-page .d-kicker__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
}

body.dossier-page.living-spectrum-page .d-kicker .d-dose-badge {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

body.dossier-page.living-spectrum-page .d-name {
  color: var(--ls-platinum);
}

@media (min-width: 768px) {
  body.dossier-page.living-spectrum-page .d-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(34px, 3vw, 46px) !important;
    font-weight: 200;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-transform: none;
  }
}

body.dossier-page.living-spectrum-page .d-scientific {
  color: rgba(231, 235, 238, 0.62);
  font-style: normal;
  font-weight: 300;
}

body.dossier-page.living-spectrum-page .d-dose-badge {
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  background: rgba(241, 242, 240, 0.04);
  color: rgba(235, 238, 240, 0.72);
}

body.dossier-page.living-spectrum-page .d-pill {
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  background: rgba(241, 242, 240, 0.03);
  color: rgba(235, 238, 240, 0.66);
  font-family: var(--font-mono);
  letter-spacing: 0.13em;
}

body.dossier-page.living-spectrum-page .d-hook,
body.dossier-page.living-spectrum-page .d-mechanism {
  color: rgba(222, 228, 233, 0.62);
  font-weight: 300;
  line-height: 1.7;
}

body.dossier-page.living-spectrum-page .d-eyebrow {
  color: rgba(235, 238, 240, 0.56);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
}

body.dossier-page.living-spectrum-page .d-pos-title {
  color: var(--ls-platinum);
  font-weight: 200;
  letter-spacing: -0.03em;
}

body.dossier-page.living-spectrum-page .d-pos-copy {
  color: rgba(222, 228, 233, 0.66);
  font-weight: 300;
  line-height: 1.7;
}

body.dossier-page.living-spectrum-page .d-chips .d-chip {
  min-height: 34px;
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  background: rgba(241, 242, 240, 0.03);
  color: rgba(235, 238, 240, 0.66);
  font-family: var(--font-mono);
  letter-spacing: 0.13em;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

body.dossier-page.living-spectrum-page .d-chips .d-chip:hover {
  background: rgba(239, 241, 240, 0.92);
  border-color: transparent;
  color: var(--ls-canvas);
}

body.dossier-page.living-spectrum-page .d-price {
  color: var(--ls-platinum);
  font-variant-numeric: tabular-nums;
}

body.dossier-page.living-spectrum-page .d-price-meta {
  color: rgba(226, 233, 239, 0.56);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

body.dossier-page.living-spectrum-page .d-specs {
  border: 0;
}

body.dossier-page.living-spectrum-page .d-spec {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.1), rgba(224, 231, 237, 0.03) 70%, transparent) bottom / 100% 1px no-repeat;
}

body.dossier-page.living-spectrum-page .d-spec dt {
  color: rgba(226, 233, 239, 0.5);
  font-family: var(--font-mono);
  letter-spacing: 0.13em;
}

body.dossier-page.living-spectrum-page .d-spec dd {
  color: var(--ls-platinum);
  font-variant-numeric: tabular-nums;
}

body.dossier-page.living-spectrum-page .d-form-option {
  border: 1px solid rgba(241, 242, 240, 0.1);
  border-radius: 12px;
  background: rgba(241, 242, 240, 0.03);
  transition: border-color 240ms ease, background-color 240ms ease;
}

body.dossier-page.living-spectrum-page .d-form-option.is-active {
  border-color: rgba(var(--ls-cobalt), 0.35);
  background: rgba(var(--ls-cobalt), 0.06);
}

/* Platinum action + states (no emerald) */

body.dossier-page.living-spectrum-page .d-btn.is-primary {
  min-height: 54px;
  background: rgba(239, 241, 240, 0.94);
  border: 0;
  color: var(--ls-canvas);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background-color 240ms ease, color 240ms ease, transform 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .d-btn.is-primary:hover:not(:disabled) {
  background: #ffffff;
  color: var(--ls-canvas);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

/* In Stack is a ghost button, so its hover brightens the ghost instead
   of flooding platinum behind light text (which made the label vanish). */
body.dossier-page.living-spectrum-page .d-btn.is-primary.in-stack:hover:not(:disabled) {
  background: rgba(241, 242, 240, 0.08);
  border-color: rgba(241, 242, 240, 0.45);
  color: var(--ls-platinum);
  box-shadow: none;
}

body.dossier-page.living-spectrum-page .d-btn.is-primary.added,
body.dossier-page.living-spectrum-page .dossier-add-btn.added {
  background: rgba(239, 241, 240, 0.94);
  border-color: transparent;
  color: var(--ls-canvas);
}

body.dossier-page.living-spectrum-page .d-btn.is-primary.in-stack {
  background: transparent;
  border: 1px solid rgba(241, 242, 240, 0.2);
  color: rgba(235, 238, 240, 0.7);
}

body.dossier-page.living-spectrum-page .d-btn.is-primary.is-out-of-stock {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(241, 242, 240, 0.08);
  color: rgba(235, 238, 240, 0.45);
  cursor: not-allowed;
  transform: none;
}

/* Buy row: stepper + platinum action side by side (desktop; the mobile
   sheet has its own quantity controls in the action bar) */

@media (min-width: 768px) {
  body.dossier-page.living-spectrum-page .d-actions {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }

  body.dossier-page.living-spectrum-page .d-actions .d-btn.is-primary {
    flex: 1;
  }
}

body.dossier-page.living-spectrum-page .d-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(241, 242, 240, 0.03);
}

body.dossier-page.living-spectrum-page .d-qty[hidden] {
  display: none;
}

body.dossier-page.living-spectrum-page .d-qty__btn {
  display: grid;
  width: 38px;
  height: 44px;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(235, 238, 240, 0.72);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 15px;
  transition: color 200ms ease;
}

body.dossier-page.living-spectrum-page .d-qty__btn:hover {
  color: var(--ls-platinum);
}

body.dossier-page.living-spectrum-page .d-qty__val {
  min-width: 22px;
  color: var(--ls-platinum);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Benefits ledger */

body.dossier-page.living-spectrum-page .d-benefits {
  border-top: 0;
}

body.dossier-page.living-spectrum-page .d-benefit {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.1), rgba(224, 231, 237, 0.03) 70%, transparent) top / 100% 1px no-repeat;
  transition: background-color 240ms ease;
}

body.dossier-page.living-spectrum-page .d-benefit:hover {
  background-color: rgba(241, 242, 240, 0.02);
}

body.dossier-page.living-spectrum-page .d-benefit__ix {
  color: rgba(235, 238, 240, 0.45);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

body.dossier-page.living-spectrum-page .d-benefit__title {
  color: var(--ls-platinum);
  font-weight: 300;
}

body.dossier-page.living-spectrum-page .d-benefit__copy {
  color: rgba(222, 228, 233, 0.62);
  font-weight: 300;
  line-height: 1.62;
}

/* ── The Vitrine: desktop card recomposition ──
   Left column becomes the identity plate (stamp, name, staged vial with a
   specimen caption); the right column reads promise, proof ledger, then a
   floor-pinned buy close. Mobile tiles and the expanded sheet keep their
   own layouts, so everything here stays behind the desktop gate. */

body.dossier-page.living-spectrum-page .d-vial-caption,
body.dossier-page.living-spectrum-page .d-vial-plate {
  display: none;
}

@media (min-width: 768px) {
  /* wireTileExpand injects a sheet head up to 900px; it has no seat in
     the desktop composition. */
  body.dossier-page.living-spectrum-page .d-sheet-head {
    display: none;
  }

  /* One story per card: the positioning copy carries the narrative, so
     the near-duplicate mechanism paragraph retires from the desktop face. */
  body.dossier-page.living-spectrum-page .d-mechanism {
    display: none;
  }

  /* Identity plate: text block leads, the vial gets the plinth below it
     and absorbs the column's vertical slack so both columns always match. */
  body.dossier-page.living-spectrum-page .d-identity {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
  }

  /* The inline sheet's flex:1 (from the old side-by-side grid) would
     stretch the text block vertically in this column and push the vial
     away from the name. */
  body.dossier-page.living-spectrum-page .d-identity-text {
    order: 1;
    flex: 0 0 auto;
    padding-top: 0;
    text-align: center;
  }

  /* The vial anchors directly under the title lockup (no centering in
     leftover space) and takes the plinth at full scale; whatever slack
     the column has falls quietly below the caption. */
  body.dossier-page.living-spectrum-page .d-vial {
    order: 2;
    flex: 0 0 auto;
    align-self: center;
    width: var(--d-vial-width);
    height: var(--d-vial-height);
    margin-top: clamp(12px, 1.8vh, 22px);
  }

  body.dossier-page.living-spectrum-page .d-identity {
    --d-vial-width: clamp(170px, 15.5vw, 300px);
    --d-vial-height: calc(var(--d-vial-width) * 1.72);
  }

  /* Size lives in the specimen caption now; the kicker keeps only the
     pillar classification so the column never says 50MG twice. */
  body.dossier-page.living-spectrum-page .d-kicker__dose {
    display: none;
  }

  body.dossier-page.living-spectrum-page .d-vial-stage {
    height: var(--d-vial-height);
  }

  body.dossier-page.living-spectrum-page .d-vial-caption {
    display: block;
    order: 3;
    align-self: center;
    margin-top: clamp(14px, 2vh, 24px);
    color: rgba(235, 238, 240, 0.42);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
  }

  body.dossier-page.living-spectrum-page .d-vial-caption b {
    color: rgba(241, 242, 240, 0.85);
    font-weight: 400;
  }

  /* The engraving row: three stats pinned to the column floor, so the
     identity plate closes on data instead of empty canvas. */
  body.dossier-page.living-spectrum-page .d-vial-plate {
    display: grid;
    order: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 24px);
    width: 100%;
    margin-top: auto;
    padding-top: clamp(18px, 2.2vh, 28px);
    background: linear-gradient(90deg, transparent, rgba(224, 231, 237, 0.16) 18%, rgba(224, 231, 237, 0.16) 82%, transparent) top / 100% 1px no-repeat;
  }

  /* The ghost pillar numeral bled into the plate stats; the plate owns
     the column floor now. */
  body.dossier-page.living-spectrum-page .d-left::after {
    display: none;
  }

  /* The plate is one shared two-row grid: values sit in the top row and
     center vertically against the tallest neighbor (so a two-line
     cadence gets flanked mid-height, not top-aligned), and every label
     sits in its own fixed bottom row. */
  body.dossier-page.living-spectrum-page .d-vial-plate {
    grid-template-rows: auto auto;
    row-gap: 5px;
  }

  body.dossier-page.living-spectrum-page .d-vial-stat {
    display: contents;
  }

  body.dossier-page.living-spectrum-page .d-vial-stat:nth-child(1) > * { grid-column: 1; }
  body.dossier-page.living-spectrum-page .d-vial-stat:nth-child(2) > * { grid-column: 2; }
  body.dossier-page.living-spectrum-page .d-vial-stat:nth-child(3) > * { grid-column: 3; }

  body.dossier-page.living-spectrum-page .d-vial-stat b {
    grid-row: 1;
    align-self: center;
    min-width: 0;
    color: var(--ls-platinum);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(19px, 1.7vw, 27px);
    font-weight: 200;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    text-align: center;
  }

  body.dossier-page.living-spectrum-page .d-vial-stat span {
    grid-row: 2;
    align-self: start;
    min-width: 0;
    color: rgba(235, 238, 240, 0.4);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
  }

  /* With the plate holding the floor, the vial sits in the middle band
     and the caption hugs it. */
  body.dossier-page.living-spectrum-page .d-vial-caption {
    margin-top: clamp(12px, 1.6vh, 18px);
    margin-bottom: clamp(16px, 2.2vh, 28px);
  }

  body.dossier-page.living-spectrum-page .d-name {
    font-size: clamp(40px, 3.4vw, 56px) !important;
  }

  body.dossier-page.living-spectrum-page .d-scientific {
    margin-bottom: 0;
  }

  /* Vertical economy: the ledger added real content to the right column,
     so the stage and every block give back height until the card fits a
     laptop fold again. */
  body.dossier-page.living-spectrum-page .d-stage {
    padding-top: clamp(18px, 2.4vh, 44px);
    padding-bottom: clamp(18px, 2.4vh, 44px);
  }

  /* The promise line steps down; the name is the only peak on the card. */
  body.dossier-page.living-spectrum-page .d-pos-title {
    max-width: 54ch;
    font-size: clamp(19px, 1.55vw, 24px);
    line-height: 1.35;
  }

  body.dossier-page.living-spectrum-page .d-pos-copy {
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.65;
  }

  body.dossier-page.living-spectrum-page .d-right-block--pos {
    padding-top: clamp(24px, 2.2vw, 36px);
    padding-bottom: clamp(16px, 1.5vw, 24px);
  }

  /* Compounds with short copy would pool all their slack into one hole
     above the buy rail; letting the two reading blocks grow and center
     spreads that air evenly through the column instead. */
  body.dossier-page.living-spectrum-page .d-right-block--pos,
  body.dossier-page.living-spectrum-page .d-right-block--benefits {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Proof ledger */
  body.dossier-page.living-spectrum-page .d-benefits__eyebrow {
    display: block;
    margin-bottom: 4px;
  }

  body.dossier-page.living-spectrum-page .d-right-block--benefits {
    padding-top: clamp(14px, 1.4vw, 22px);
    padding-bottom: clamp(14px, 1.4vw, 22px);
  }

  body.dossier-page.living-spectrum-page .d-right-block--benefits .d-benefit {
    padding-top: clamp(9px, 0.9vw, 13px);
    padding-bottom: clamp(9px, 0.9vw, 13px);
  }

  body.dossier-page.living-spectrum-page .d-right-block--benefits .d-benefit:first-child {
    background: none;
  }

  body.dossier-page.living-spectrum-page .d-benefit__title {
    margin-bottom: 2px;
  }

  body.dossier-page.living-spectrum-page .d-benefit__copy {
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 66ch;
  }

  /* The close: pinned to the column floor so no dead corner can reappear,
     price at boutique scale, machined spec rows. */
  body.dossier-page.living-spectrum-page .d-right-block--buy {
    margin-top: auto;
    padding-top: clamp(14px, 1.4vw, 22px);
    padding-bottom: clamp(14px, 1.4vw, 22px);
  }

  body.dossier-page.living-spectrum-page .d-actions {
    margin-top: 14px;
  }

  body.dossier-page.living-spectrum-page .d-price {
    font-size: clamp(28px, 2vw, 34px);
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  body.dossier-page.living-spectrum-page .d-price-currency {
    font-size: 15px;
    opacity: 0.6;
  }

  /* The order rail: one framed bar holding the whole transaction.
     Price and its package line read as a single lockup on the left,
     the stepper and Add To Stack close it on the right. */
  body.dossier-page.living-spectrum-page .d-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(14px, 1.5vw, 24px);
    padding: clamp(12px, 1.3vw, 18px) clamp(16px, 1.8vw, 24px);
    border: 1px solid rgba(241, 242, 240, 0.13);
    border-radius: 18px;
    background: rgba(241, 242, 240, 0.024);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  }

  body.dossier-page.living-spectrum-page .d-price-group {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px clamp(14px, 1.4vw, 20px);
  }

  body.dossier-page.living-spectrum-page .d-price-meta {
    margin: 0;
  }

  body.dossier-page.living-spectrum-page .d-form-options {
    flex: 0 0 100%;
    margin: 6px 0 0;
  }

  body.dossier-page.living-spectrum-page .d-specs {
    display: none;
  }

  body.dossier-page.living-spectrum-page .d-actions {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
  }

  body.dossier-page.living-spectrum-page .d-actions .d-btn.is-primary {
    flex: 0 0 auto;
    min-width: clamp(170px, 13vw, 220px);
    padding: 0 30px;
    border-radius: 12px;
  }

  body.dossier-page.living-spectrum-page .d-qty {
    border-radius: 12px;
  }

  body.dossier-page.living-spectrum-page .d-spec span:first-child {
    color: rgba(235, 238, 240, 0.4);
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  body.dossier-page.living-spectrum-page .d-spec span:last-child {
    color: rgba(241, 242, 240, 0.88);
    font-variant-numeric: tabular-nums;
  }

  /* Pairs With closes the card as a centered footnote: one quiet row,
     label and chips on the same line, sitting under the buy hairline
     instead of hanging off the left edge. */
  body.dossier-page.living-spectrum-page .d-right-block--pair {
    padding-top: clamp(14px, 1.4vw, 20px);
    padding-bottom: clamp(18px, 1.8vw, 26px);
  }

  body.dossier-page.living-spectrum-page .d-right-block--pair .d-pair {
    justify-content: center;
    gap: 16px;
  }

  body.dossier-page.living-spectrum-page .d-right-block--pair .d-chips {
    justify-content: center;
    gap: 8px;
  }

  body.dossier-page.living-spectrum-page .d-right-block--pair .d-chip {
    padding: 7px 13px;
    border-color: rgba(241, 242, 240, 0.12);
    background: rgba(241, 242, 240, 0.02);
    color: rgba(235, 238, 240, 0.58);
  }

  body.dossier-page.living-spectrum-page .d-right-block--pair .d-chip:hover {
    border-color: rgba(241, 242, 240, 0.3);
    color: var(--ls-platinum);
  }
}

/* Short laptop windows: the ledger keeps its titles but hands the copy to
   the sheet, and the plinth steps down so the card still fits one fold. */
/* 919, not 740: the compact rhythm applies across the whole laptop band so
   the card's natural height stays inside the visible field (see the
   theatre-floor block near the top of this file). The tallest card (DSIP,
   845px at full rhythm) slid 45px under the fixed header even at 900. */
@media (min-width: 768px) and (max-height: 919px) {
  body.dossier-page.living-spectrum-page .d-benefit__copy {
    display: none;
  }

  body.dossier-page.living-spectrum-page .d-identity {
    --d-vial-width: clamp(140px, 12vw, 200px);
  }

  body.dossier-page.living-spectrum-page .d-name {
    font-size: clamp(34px, 2.9vw, 46px) !important;
  }

  body.dossier-page.living-spectrum-page .d-vial {
    margin-top: 10px;
  }

  body.dossier-page.living-spectrum-page .d-pos-copy {
    font-size: 12.5px;
    line-height: 1.55;
  }

  body.dossier-page.living-spectrum-page .d-right-block--pos {
    padding-top: 18px;
  }

  body.dossier-page.living-spectrum-page .d-right-block--benefits .d-benefit {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  body.dossier-page.living-spectrum-page .d-right-block--pair {
    padding-bottom: 16px;
  }
}

/* ── Side nav: quiet ledger rail ── */

body.dossier-page.living-spectrum-page .compound-sidebar {
  border-right: 0;
  background:
    linear-gradient(180deg, transparent, rgba(241, 242, 240, 0.1) 15%, rgba(241, 242, 240, 0.1) 85%, transparent) right / 1px 100% no-repeat;
}

body.dossier-page.living-spectrum-page .sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 20px 8px 24px;
  color: rgba(235, 238, 240, 0.42);
  opacity: 1;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.dossier-page.living-spectrum-page .sidebar-group-label::after {
  display: none;
}

body.dossier-page.living-spectrum-page .sidebar-group-label::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pillar-1);
}

body.dossier-page.living-spectrum-page .sidebar-group-label:nth-of-type(2)::before { background: var(--pillar-2); }
body.dossier-page.living-spectrum-page .sidebar-group-label:nth-of-type(3)::before { background: var(--pillar-3); }
body.dossier-page.living-spectrum-page .sidebar-group-label:nth-of-type(4)::before { background: var(--pillar-4); }
body.dossier-page.living-spectrum-page .sidebar-group-label:nth-of-type(5)::before { background: var(--pillar-5); }

body.dossier-page.living-spectrum-page .sidebar-compound {
  position: relative;
  padding: 9px 20px 9px 24px;
  background: none;
  border: 0;
  color: rgba(235, 238, 240, 0.45);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  transition: color 240ms ease, transform 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .sidebar-counter {
  margin: auto 20px 22px 24px;
  padding-top: 14px;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.12), transparent) top / 100% 1px no-repeat;
  color: rgba(235, 238, 240, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

body.dossier-page.living-spectrum-page .sidebar-compound:hover {
  background: none;
  color: var(--ls-platinum);
  transform: translateX(4px);
}

body.dossier-page.living-spectrum-page .sidebar-compound.active {
  background: none;
  color: var(--ls-platinum);
}

body.dossier-page.living-spectrum-page .sidebar-compound::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 2px;
  height: 18px;
  background: var(--ls-platinum);
  box-shadow: 0 0 12px rgba(241, 242, 240, 0.35);
  transform: translateY(-50%) scaleY(0);
  transition: transform 240ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .sidebar-compound.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* ── Catalogue field ──
   The full hero is an active Spectrum canvas. Only the centered copy and
   action rectangle is protected; the remaining perimeter carries the vials. */

/* ── The Bench: the lineup render as a living scene (desktop) ──
   The approved full-bleed photo hero, animated: the frame breathes and
   parallaxes against the copy (transform reads --bx/--by live from
   shop-spectrum.js), a light sweep glints across the glass, dust motes
   drift, and a soft spotlight follows the cursor over the vials. All
   layers are transform/opacity only; reduced motion stills everything. */

body.dossier-page.living-spectrum-page .dossier-intro__lineup {
  transform-origin: 50% 88%;
  animation: bench-breathe 16s ease-in-out infinite alternate;
}

@keyframes bench-breathe {
  from {
    transform: scale(1.012);
  }

  to {
    transform: scale(1.048);
  }
}

/* Entrance: the scene settles up into place once the asset arrives. */
body.dossier-page.living-spectrum-page .dossier-intro__lineup {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 1200ms var(--ls-ease), translate 1200ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page .dossier-intro.has-lineup .dossier-intro__lineup {
  opacity: 1;
  translate: 0 0;
}

/* Glass glint: a narrow band sweeps the bench every ~14s. */
body.dossier-page.living-spectrum-page .dossier-intro__lineup::after {
  content: '';
  position: absolute;
  inset: -4% -30%;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.02) 54%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-62%);
  animation: bench-sweep 14s ease-in-out 3s infinite;
  pointer-events: none;
}

@keyframes bench-sweep {
  0% {
    transform: translateX(-62%);
  }

  22% {
    transform: translateX(62%);
  }

  100% {
    transform: translateX(62%);
  }
}

/* Cursor spotlight: injected by shop-spectrum.js, tracks --mx/--my. */
body.dossier-page.living-spectrum-page .bench-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(clamp(260px, 24vw, 420px) at var(--mx, 50%) var(--my, 58%), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035) 46%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 700ms var(--ls-ease);
  pointer-events: none;
}

body.dossier-page.living-spectrum-page .dossier-intro__lineup.is-lit .bench-light {
  opacity: 1;
}

/* Dust motes: sixteen slow risers, screen-blended, barely there. */
body.dossier-page.living-spectrum-page .bench-motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.dossier-page.living-spectrum-page .bench-motes span {
  position: absolute;
  bottom: -3%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(235, 242, 248, 0.5);
  mix-blend-mode: screen;
  opacity: 0;
  animation: bench-mote var(--m-dur, 16s) linear var(--m-delay, 0s) infinite;
}

body.dossier-page.living-spectrum-page .bench-motes span:nth-child(4n) {
  width: 2px;
  height: 2px;
}

body.dossier-page.living-spectrum-page .bench-motes span:nth-child(1)  { left: 6%;  --m-dur: 17s; --m-delay: -3s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(2)  { left: 13%; --m-dur: 21s; --m-delay: -11s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(3)  { left: 21%; --m-dur: 15s; --m-delay: -7s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(4)  { left: 28%; --m-dur: 23s; --m-delay: -1s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(5)  { left: 34%; --m-dur: 18s; --m-delay: -14s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(6)  { left: 41%; --m-dur: 25s; --m-delay: -6s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(7)  { left: 47%; --m-dur: 16s; --m-delay: -10s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(8)  { left: 53%; --m-dur: 22s; --m-delay: -2s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(9)  { left: 59%; --m-dur: 19s; --m-delay: -13s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(10) { left: 65%; --m-dur: 24s; --m-delay: -5s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(11) { left: 71%; --m-dur: 17s; --m-delay: -9s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(12) { left: 77%; --m-dur: 21s; --m-delay: -15s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(13) { left: 83%; --m-dur: 18s; --m-delay: -4s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(14) { left: 89%; --m-dur: 23s; --m-delay: -12s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(15) { left: 94%; --m-dur: 20s; --m-delay: -8s; }
body.dossier-page.living-spectrum-page .bench-motes span:nth-child(16) { left: 37%; --m-dur: 26s; --m-delay: -16s; }

@keyframes bench-mote {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  12% {
    opacity: 0.22;
  }

  82% {
    opacity: 0.1;
  }

  100% {
    opacity: 0;
    transform: translateY(min(-52vh, -420px));
  }
}

@media (max-width: 767px) {
  body.dossier-page.living-spectrum-page .bench-light,
  body.dossier-page.living-spectrum-page .bench-motes {
    display: none;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__lineup {
    animation: none;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__lineup::after {
    display: none;
  }
}

/* ── Footer (relocated into the scroll container by shop-spectrum.js) ── */

body.dossier-page.living-spectrum-page #scrollContainer footer {
  display: block;
  padding: clamp(40px, 5.5vh, 56px) var(--ls-page-gutter, clamp(24px, 5vw, 80px)) calc(30px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background: transparent;
  scroll-snap-align: end;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-inner {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .logo {
  color: rgba(241, 242, 240, 0.82);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 1;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-nav {
  justify-content: center;
  gap: 6px 28px;
  margin-top: 18px;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(235, 238, 240, 0.52);
  opacity: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color 240ms ease;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-nav a:hover {
  color: var(--ls-platinum);
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channels {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(241, 242, 240, 0.12);
  border-radius: 50%;
  color: rgba(241, 242, 240, 0.66);
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease, transform 380ms var(--ls-ease);
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel:hover,
body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel:focus-visible {
  border-color: rgba(241, 242, 240, 0.34);
  color: var(--ls-platinum);
  transform: translateY(-1px);
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-legal {
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  opacity: 0.36;
}

body.dossier-page.living-spectrum-page #scrollContainer footer .footer-compliance {
  display: block;
  max-width: 62ch;
  margin: 8px auto 0;
  font-size: 8.5px;
  line-height: 1.7;
  text-align: center;
  opacity: 0.26;
}

/* ── Reveal system (shared recipe with the home page) ── */

.ls-reveals-active [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ls-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 700ms var(--ls-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}

.ls-reveals-active [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Mobile: retheme the catalogue list + sheet (no heavy blur on phones) ── */

@media (max-width: 767px) {
  /* Content appears immediately on phones instead of fading in card-by-card
     (which read as the text under a compound name never loading). */
  html.ls-reveals-active body.dossier-page.living-spectrum-page [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.dossier-page.living-spectrum-page .site-nav {
    height: var(--chrome-total, 64px);
    min-height: 0;
    padding: env(safe-area-inset-top, 0px) 18px 0;
    align-items: center;
  }

  body.dossier-page.living-spectrum-page .site-nav.is-scrolled {
    background: rgba(6, 8, 11, 0.94);
  }

  body.dossier-page.living-spectrum-page .dossier-section {
    background: rgba(13, 17, 23, 0.88);
    border: 1px solid rgba(241, 242, 240, 0.08);
  }

  body.dossier-page.living-spectrum-page .d-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13, 17, 23, 0.92);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  }

  /* Expanded dossier sheet is a full-screen surface, not a translucent
     overlay: give it a solid spectrum canvas so the catalogue behind it never
     bleeds through (the old sheet read as see-through and broken). */
  body.dossier-page.living-spectrum-page .dossier-section.is-tile-expanded {
    background: #07090c;
  }

  body.dossier-page.living-spectrum-page .dossier-section.is-tile-expanded .d-card {
    background: #0a0d11;
    box-shadow: none;
  }

  body.dossier-page.living-spectrum-page .sheet-action-bar {
    background: #07090c;
    border-top: 1px solid rgba(241, 242, 240, 0.08);
  }

  /* Buy CTA: cool platinum (was warm parchment #efeae3) to sit in the
     graphite/platinum spectrum. */
  body.dossier-page.living-spectrum-page .sab-cta {
    background: #f1f2f0;
    color: #0a0d11;
  }

  body.dossier-page.living-spectrum-page .sab-cta:hover {
    background: #ffffff;
  }

  body.dossier-page.living-spectrum-page > footer {
    display: block;
    background: transparent;
    border-top: 1px solid rgba(241, 242, 240, 0.05);
  }

  /* Collapsed tiles: the kicker replaces the old pillar chip as one quiet
     ellipsized line, and the buy block keeps its ADD pill via its stable
     modifier class (order-keyed nth-child selectors are retired). */
  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-kicker {
    display: block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: rgba(235, 238, 240, 0.45);
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-kicker__dot {
    width: 5px;
    height: 5px;
    margin-right: 6px;
  }

  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-kicker__dose {
    display: none;
  }

  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-right-block--buy {
    display: block;
  }

  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-right-block--pair {
    display: none;
  }

  body.dossier-page.living-spectrum-page .d-qty {
    display: none !important;
  }
}

/* ── Reduced motion: everything visible, nothing animated ── */

@media (prefers-reduced-motion: reduce) {
  body.dossier-page.living-spectrum-page,
  body.dossier-page.living-spectrum-page *,
  body.dossier-page.living-spectrum-page *::before,
  body.dossier-page.living-spectrum-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ── Mobile a11y sweep: 44px tap targets + type floors (>=11px) ──
   Additive, mobile-only overrides. Base rules are left untouched; these
   later-in-source rules mirror their selectors so they win inside the
   phone breakpoint while non-phone layouts (>=768px) stay byte-identical. */

@media (max-width: 767px) {
  /* Tap targets: footer nav links grow to a 44px hit height (text size
     unchanged). */
  body.dossier-page.living-spectrum-page #scrollContainer footer .footer-nav a {
    min-height: 44px;
  }

  /* Social discs stay a compact 34px visually; the clickable area is
     expanded to 44px via a transparent overlay so the tap target meets the
     minimum without enlarging the platinum circle. */
  body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel {
    position: relative;
  }

  body.dossier-page.living-spectrum-page #scrollContainer footer .footer-channel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Type floors: raise sub-11px labels/fine print to >=11px. */
  body.dossier-page.living-spectrum-page .nav-cart-btn #cart-count:not([hidden]) {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__edition {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__metric-label {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .dossier-intro__pillar-chip {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .sidebar-group-label {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .sidebar-counter {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page #scrollContainer footer .footer-compliance {
    font-size: 11px;
  }

  body.dossier-page.living-spectrum-page .dossier-section:not(.is-tile-expanded) .d-kicker {
    font-size: 11px;
  }
}