/* Homepage — three hero variants + editorial sections */

/* ---------- Page wrapper for hero region ---------- */
.home-hero {
  position: relative;
  min-height: 92vh;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  display: none;
}
html[data-hero="filmstrip"]   .home-hero[data-variant="filmstrip"]   { display: block; }
html[data-hero="editorial"]   .home-hero[data-variant="editorial"]   { display: block; }
html[data-hero="macro"]       .home-hero[data-variant="macro"]       { display: block; }

/* ===== Variant 1: Vertical filmstrip ===== */
.hero-film {
  display: grid;
  grid-template-columns: 1fr minmax(380px, 36%) 1fr;
  min-height: 92vh;
  align-items: center;
}
.hero-film__strip {
  position: relative;
  height: 92vh;
  overflow: hidden;
}
.hero-film__strip::before,
.hero-film__strip::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 18vh; z-index: 3; pointer-events: none;
}
.hero-film__strip::before { top: 0; background: linear-gradient(to bottom, var(--ink-1), transparent); }
.hero-film__strip::after { bottom: 0; background: linear-gradient(to top, var(--ink-1), transparent); }

.hero-film__track {
  display: flex; flex-direction: column;
  gap: 32px;
  padding: 32px 0;
  animation: filmscroll 54s linear infinite;
  /* Hold the scroll paused until the inline script flips `is-ready`
     after every cell image has finished decoding. Starting paused
     prevents the "scroll runs while cells are still blank → frozen,
     then catches up in a stutter" behaviour seen on cold loads,
     especially on Windows/Chrome where 2 MB of glow PNGs plus
     decode work briefly saturates the main thread. */
  animation-play-state: paused;
  /* Force the browser to promote the track to its own compositor
     layer so the scroll runs on the GPU and isn't repainted as cells
     enter/leave the viewport. `translateZ(0)` is a legacy belt to
     `will-change`'s suspenders — together they reliably keep the
     scroll smooth across Chromium / WebKit / Firefox. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-film__track.is-ready { animation-play-state: running; }
.hero-film__track--reverse { animation-direction: reverse; animation-duration: 62s; }
.hero-film__cell {
  position: relative;
  flex-shrink: 0;
  height: 36vh;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* Transition only on properties we actually animate on hover (border).
     The previous `transform` transition was unused at this level — the
     img inside owns its own scale-on-hover transition — and listing it
     here forced the browser to track an extra animatable property per
     cell, adding overhead during scroll for no visible benefit. */
  transition: border-color var(--dur-fast) var(--ease);
}
/* Champagne glow halo behind each vial — same brand gradient as the
   methodology stage, slightly stronger center stop so the bloom reads
   clearly on the home filmstrip's smaller cells. Anchored vertically
   centered with a slight upward offset to sit behind the vial body
   rather than the cap. */
.hero-film__cell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(180px, 70%, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 175, 96, 0.58) 0%,
    rgba(212, 175, 96, 0.32) 28%,
    rgba(212, 175, 96, 0.13) 52%,
    rgba(212, 175, 96, 0)    72%
  );
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero-film__cell:hover { border-color: var(--gold-300); }
.hero-film__cell:hover img { transform: scale(1.04); }
.hero-film__strip:hover .hero-film__track { animation-play-state: paused; }
.hero-film__cell img {
  position: relative;
  z-index: 1;
  height: 80%; width: auto; object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6));
  transition: transform 600ms var(--ease);
}
.hero-film__cell .meta {
  position: absolute; bottom: 14px; left: 14px;
  z-index: 2;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-200);
}
.hero-film__cell .num {
  position: absolute; top: 14px; right: 14px;
  z-index: 2;
  font-family: var(--font-serif); font-style: italic;
  color: var(--gold-300); font-size: 15px;
}

/* SEAMLESS LOOP FIX (2026-06-03): makeStripCells() builds THREE copies of the
   sequence ([...products, ...products, ...products]), so one full original
   sequence = 1/3 of the track. The loop must travel exactly one copy
   (-33.333%) to land copy-2-start where copy-1-start was — visually identical,
   so the restart is invisible. The old -50% travelled 1.5 copies, landing
   mid-sequence, so the animation-restart snapped back to copy-1-start = the
   visible jitter/reset. (Mobile JS already wraps at one copy.) */
@keyframes filmscroll {
  from { transform: translateY(0); }
  to { transform: translateY(-33.333%); }
}
/* Horizontal counterpart used on mobile — same one-copy (1/3) travel so the
   3-copy strip loops seamlessly. */
@keyframes filmscroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

.hero-film__center {
  text-align: center;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 4;
}
.hero-film__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.hero-film__eyebrow .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold-200);
}
.hero-film__title {
  font-family: var(--font-serif);
  font-size: clamp(56px, 7.4vw, 119px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--beige-50);
  margin: 0;
}
.hero-film__title em {
  font-style: italic;
  color: var(--gold-100);
  display: block;
}
.hero-film__sub {
  margin: 36px auto 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--beige-200);
}
.hero-film__divider {
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  margin: 32px 0;
}
.hero-film__divider .line {
  width: 60px; height: 1px; background: var(--gold-300); opacity: .7;
}
.hero-film__divider .label {
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-200);
}
.hero-film__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 40px;
  border: 1px solid var(--gold-300);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--beige-50);
  transition: all var(--dur-fast) var(--ease);
  margin-top: 8px;
}
.hero-film__cta:hover {
  background: var(--gold-200); color: var(--ink-0); border-color: var(--gold-200);
}

@media (max-width: 900px) {
  /* On mobile the two vertical filmstrips become horizontal scrollers
     that bracket the hero copy — top strip above the headline, bottom
     strip below the CTA. Each strip auto-scrolls in the opposite
     direction (top goes left, bottom goes right) to give the layout
     visual rhythm without requiring user input. They never need to be
     swipeable: the auto-scroll is the entire interaction model.

     Layout: single-column grid, three rows. The default DOM order
     (left strip → center → right strip) renders top-to-bottom by grid
     row, which is exactly what we want — no `order:` overrides
     needed. */
  .home-hero { min-height: auto; }
  .hero-film {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  /* Strip dimensions — fluid but bounded. Height tuned so a single
     vial cell reads comfortably on a 320px viewport while not eating
     too much of a 414px+ viewport.

     The strip is also the **scroll container** on mobile: the auto-
     scroll is driven by a rAF loop in index.html that advances
     scrollLeft each frame, and any pointerdown / touchstart / wheel /
     scroll input pauses it for 1.5s so the user can drag the strip
     by hand with native momentum. When auto-scroll resumes after the
     idle window, the loop wraps scrollLeft modulo the half-track
     length to keep the duplicated-cells loop seamless. Native
     overflow-scroll gives us iOS/Android inertia + keyboard a11y
     for free. */
  .hero-film__strip {
    display: block;
    height: clamp(132px, 38vw, 180px);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* Decorative — hide the scrollbar across engines. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* The global `scroll-behavior: smooth` on <html> (tokens.css) is
       spec'd not to inherit to nested scroll containers, but some
       Chromium builds apply it anyway. That would turn every per-
       frame `scrollLeft = X` write from the rAF loop into a queued
       smooth-scroll animation, stalling the auto-scroll entirely.
       Pin it to `auto` here so the loop's writes apply immediately
       and native touch momentum still runs unmodified. */
    scroll-behavior: auto;
  }
  .hero-film__strip::-webkit-scrollbar { display: none; }
  /* Edge fades removed entirely on mobile.
     On desktop (vertical strips) the fades dissolve the column ends
     into the page bg — visually polished. On mobile (horizontal
     strips) the gradient sits at the viewport edges and paints
     across cells as they scroll through it, making every passing
     vial briefly half-shaded. Even narrowed to 16–32px the effect
     read as inconsistent vial shading. Hide the pseudo-elements
     here; the cells just clip cleanly at the strip boundary. */
  .hero-film__strip::before,
  .hero-film__strip::after {
    display: none;
  }
  .hero-film__strip::before {
    left: 0;
    background: linear-gradient(to right, var(--ink-1), transparent);
  }
  .hero-film__strip::after {
    right: 0;
    background: linear-gradient(to left, var(--ink-1), transparent);
  }
  /* Track becomes a horizontal flex row. The keyframe animation that
     drove the desktop scroll is suppressed here — on mobile the
     scroll is owned by a rAF loop in index.html that mutates the
     **scroll container's** scrollLeft directly. We still want the
     GPU-promotion hints because the cells themselves have hover
     effects + the halo glow, and keeping the track on its own
     compositor layer keeps those buttery during a flick.

     Why JS instead of @keyframes here: keyframes drive `transform`,
     not `scrollLeft`, so a finger drag has nothing to grab. Native
     overflow-scroll + a rAF loop gives us draggable + auto-scroll +
     iOS momentum + keyboard a11y from one mechanism. */
  .hero-film__track {
    flex-direction: row;
    gap: 12px;
    padding: 0 12px;
    height: 100%;
    animation: none;
  }
  .hero-film__track--reverse {
    animation: none;
  }
  /* Cell dimensions on mobile. Width fluid via clamp so the cell
     count visible stays roughly constant across phone widths: a
     320px viewport sees ~2 cells, a 430px viewport sees ~2.7. */
  .hero-film__cell {
    height: 100%;
    width: clamp(116px, 36vw, 156px);
  }
  /* Shrink the gold-halo glow proportionally so it doesn't clip
     against the tighter cell borders. */
  .hero-film__cell::before {
    width: clamp(80px, 70%, 140px);
  }
  /* Image fills more of the cell on mobile since the cell is
     square-ish; 80% was right for tall desktop cells, but with a
     compact mobile cell the vial reads better at 86%. */
  .hero-film__cell img {
    height: 86%;
  }
  /* On phones the filmstrip is a pure decorative motion element —
     names + plate numbers compete with the actual hero copy below it
     for limited screen real estate. Hide both so each cell renders
     as just the vial floating against the dark backdrop. Kept in the
     DOM (not `display: none` on the parents) so the cell layout/size
     and the auto-scroll animation stay identical to the labelled
     desktop version; only the chrome inside each cell vanishes. */
  .hero-film__cell .meta,
  .hero-film__cell .num {
    display: none;
  }
  /* Vertical breathing room between strips and the hero copy. The
     center used to need 64px to compensate for the missing strips;
     now strips are back, so the center just needs normal padding. */
  .hero-film__center { padding: 36px var(--gutter); }
}

/* Honour user motion preferences regardless of viewport size — the
   filmstrip is decorative; pausing it doesn't break the page. */
@media (prefers-reduced-motion: reduce) {
  .hero-film__track { animation: none !important; }
}

/* ===== Variant 2: Editorial split ===== */
.hero-edit {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 92vh;
}
.hero-edit__left {
  position: relative;
  padding: var(--s-9) var(--gutter) var(--s-7);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-edit__num {
  position: absolute; top: 32px; left: var(--gutter);
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; letter-spacing: 0.04em; color: var(--gold-200);
}
.hero-edit__title {
  font-family: var(--font-serif);
  font-size: clamp(60px, 9vw, 181px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--beige-50);
  margin: 80px 0 0 0;
  position: relative;
  z-index: 2;
}
.hero-edit__title em { font-style: italic; color: var(--gold-100); }
.hero-edit__title .bleed {
  display: inline-block;
  margin-left: -0.2em;
}
.hero-edit__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  padding-top: 48px;
}
.hero-edit__lede {
  font-size: 15px; line-height: 1.85; color: var(--beige-200);
  max-width: 32ch;
}
.hero-edit__cta-stack {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
}
.hero-edit__right {
  position: relative;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  overflow: hidden;
}
.hero-edit__right img {
  position: absolute;
  top: 50%; left: 50%;
  width: 75%; height: auto;
  transform: translate(-30%, -50%);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.7));
}
.hero-edit__right::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 1px; background: var(--gold-400); opacity: .5;
}
.hero-edit__right-meta {
  position: absolute; bottom: 32px; right: 32px;
  text-align: right;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-200);
  line-height: 2;
}
.hero-edit__right-meta strong { color: var(--beige-100); font-weight: 500; }

@media (max-width: 900px) {
  .hero-edit { grid-template-columns: 1fr; }
  .hero-edit__right { height: 60vh; }
  .hero-edit__right img { transform: translate(-50%, -50%); width: 60%; }
  .hero-edit__bottom { grid-template-columns: 1fr; }
  .hero-edit__cta-stack { align-items: flex-start; }
}

/* ===== Variant 3: Macro detail ===== */
.hero-macro {
  position: relative;
  min-height: 92vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.hero-macro__photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184,145,73,0.15), transparent 60%),
    var(--ink-0);
  overflow: hidden;
}
.hero-macro__photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 50% 30%, rgba(212,178,102,0.6), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.5), transparent 50%);
}
.hero-macro__photo img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.6);
  width: 50%; height: auto;
  filter: drop-shadow(0 60px 120px rgba(0,0,0,0.85));
}
.hero-macro__overlay {
  position: relative; z-index: 2;
  padding: var(--s-8) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 32px;
}
.hero-macro__overlay-left,
.hero-macro__overlay-right {
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold-200);
  line-height: 2;
}
.hero-macro__overlay-right { text-align: right; }
.hero-macro__overlay-center {
  text-align: center;
}
.hero-macro__overlay-center .mark {
  height: 56px; width: auto; margin: 0 auto;
  display: inline-block;
}
.hero-macro__overlay-center .mark svg { height: 56px; width: auto; }
.hero-macro__bottom {
  position: relative; z-index: 2;
  padding: var(--s-7) var(--gutter) var(--s-7);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: end;
  background: linear-gradient(to top, var(--ink-1) 60%, transparent);
}
.hero-macro__hed {
  font-family: var(--font-serif);
  font-size: clamp(43px, 5vw, 78px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--beige-50);
  grid-column: span 2;
}
.hero-macro__hed em { font-style: italic; color: var(--gold-100); }
.hero-macro__sub {
  font-size: 15px; line-height: 1.85; color: var(--beige-200);
  max-width: 32ch;
  text-align: right;
  justify-self: end;
}

@media (max-width: 900px) {
  .hero-macro__overlay { grid-template-columns: 1fr; text-align: center; }
  .hero-macro__overlay-right { text-align: center; }
  .hero-macro__bottom { grid-template-columns: 1fr; }
  .hero-macro__sub { text-align: left; justify-self: start; }
  .hero-macro__photo img { width: 75%; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Editorial sections used after hero ---------- */
.section { padding: var(--s-10) 0; position: relative; }
.section--tight { padding: var(--s-8) 0; }
/* Methodology — scoped overrides so the №03 block (statement copy + vial
   slider stage) fits the typical desktop window. The stage's 4/5 aspect
   alone takes ~470px on a half-width column; combined with `--s-10`
   section padding (256px total) and the left column's h2 + pull + 2x2
   numbers grid, the original sizing pushed the section past 850px. The
   tighter values below land it under ~640px without losing the editorial
   weight — h2 still dominates, numbers still read as a stat block. */
/* Featured products — third trim pass. Vial media aspect (4/3) stays
   untouched so the vial images keep their current size. Every cut
   below is in the *chrome around* the cards: section padding, the
   section head, the card body's text rows, and the bottom CTA. */
.section--featured { padding: var(--s-5) 0; }
.section--featured .section-head {
  margin-bottom: 14px;
  gap: 16px;
}
.section--featured .section-head__title { font-size: clamp(30px, 3.6vw, 56px); }
.section--featured .section-head__lede { font-size: 13px; line-height: 1.65; }
.section--featured .featured-grid { gap: 12px; }
.section--featured .featured-grid .product-card__body { padding: 6px 12px 8px; gap: 4px; }
.section--featured .featured-grid .product-card__name { font-size: 16px; line-height: 1.05; }
.section--featured .featured-grid .product-card__cat { font-size: 9px; }
.section--featured .featured-grid .product-card__price { font-size: 13px; }
.section--featured .featured-grid .product-card__price-row { padding-top: 2px; }
.section--featured .featured-grid .product-card__intro {
  margin-top: 6px;
  padding-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.section--featured .featured-grid .product-card__intro-eyebrow {
  font-size: 9px;
  margin-bottom: 2px;
}
/* Spotlight (leftmost large card) — unclamp the intro paragraph and
   bump it back to readable size, since this card has the 2-row vertical
   budget to actually carry copy. The non-spotlight 1-line clamp still
   applies to any other card in the slider that gets an intro. */
.section--featured .featured-grid .product-card--spotlight .product-card__intro {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
  padding-top: 10px;
}
.section--featured .featured-grid .product-card--spotlight .product-card__intro-eyebrow {
  font-size: 10px;
  margin-bottom: 4px;
}

/* COA links inside the spotlight body — small gold-dot pills, each
   buttons (not anchors) so they don't nest inside the parent card's
   <a>. Click handlers in the JS stop propagation and navigate to the
   product PDP's COA section. */
.product-card__coas {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card__coas-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.product-card__coas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product-card__coa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--beige-100);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.product-card__coa-link:hover,
.product-card__coa-link:focus-visible {
  border-color: var(--gold-300);
  color: var(--gold-100);
  background: rgba(212, 175, 96, 0.08);
  outline: none;
}
.product-card__coa-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-300);
  flex-shrink: 0;
}
.product-card__coa-link:hover .product-card__coa-dot,
.product-card__coa-link:focus-visible .product-card__coa-dot {
  background: var(--gold-100);
  box-shadow: 0 0 6px rgba(212, 175, 96, 0.5);
}

.section--method { padding: var(--s-7) 0; }
.section--method .statement { gap: 64px; align-items: center; }
.section--method .statement__col h2 { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.05; }
.section--method .statement__col p { margin: 14px 0; font-size: 14px; line-height: 1.65; }
.section--method .statement__col .pull { margin: 14px 0; padding-left: 16px; font-size: 17px; line-height: 1.45; }
/* 2×2 → 1×4 single row so the stat block contributes ~80px to the
   column height instead of ~160px. Each cell narrows but the four
   numbers still read clearly at the smaller font size. */
.section--method .statement__numbers {
  margin-top: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.section--method .statement__numbers > div { padding: 12px; }
.section--method .statement__num-big { font-size: 35px; }
.section--method .statement__num-label { margin-top: 4px; font-size: 10px; }
/* Stage size pegged to viewport height so the slider always fits in
   one screen — `clamp(280px, 38vh, 440px)` means: at least 280px on
   tiny windows, never more than 440px on huge ones, and 38% of the
   viewport height in between. The aspect-ratio override unwinds the
   base `.home-method__stage { aspect-ratio: 4/5 }` since explicit
   height is now the source of truth; the stage's width comes from the
   parent flex/grid column. */
.section--method .home-method__stage {
  aspect-ratio: auto;
  height: clamp(280px, 38vh, 440px);
}
/* Phones — 128px between sections is generous on a phone, where the page
   is already long. Cut roughly in half so the eye doesn't have to scroll
   through dead air to get from one section to the next. */
@media (max-width: 600px) {
  .section { padding: var(--s-8) 0; }
  .section--tight { padding: var(--s-7) 0; }
  .section-head { margin-bottom: var(--s-6); gap: 16px; }
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  gap: 32px;
  padding: 0 var(--gutter);
  margin-bottom: var(--s-7);
}
.section-head__num { font-family: var(--font-serif); font-style: italic; color: var(--gold-200); font-size: 15px; }
.section-head__title {
  font-family: var(--font-serif);
  font-size: clamp(39px, 4.4vw, 69px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--beige-50);
}
.section-head__title em { font-style: italic; color: var(--gold-100); }
.section-head__lede { font-size: 14px; line-height: 1.85; color: var(--beige-200); justify-self: end; max-width: 36ch; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__lede { justify-self: start; }
}

/* Featured products — asymmetric slider */
.featured-slider {
  position: relative;
  padding: 0 var(--gutter);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  /* Per-card transitions are applied inline by the FLIP animator in
     index.html — the grid container itself doesn't transition. Keep
     position:relative so any overlay state (focus rings, etc.) sits cleanly
     against grid items. */
}
/* Cards in transit get inline transforms; this keeps origin stable so the
   FLIP scale calculations are honored. */
.featured-grid > .product-card {
  will-change: transform, opacity;
  transform-origin: 0 0;
}

.featured-grid > .product-card:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.featured-grid > .product-card:nth-child(2) { grid-column: span 4; }
.featured-grid > .product-card:nth-child(3) { grid-column: span 3; }
.featured-grid > .product-card:nth-child(4) { grid-column: span 4; }
.featured-grid > .product-card:nth-child(5) { grid-column: span 3; }

/* Compact vertical scaling — only inside the featured slider (shop + PDP
   product cards keep their roomier defaults). The aspect-ratio override
   applies uniformly to every slot so the FLIP transition stays smooth; if
   different slots had different ratios, a card moving between them would
   reshape the moment paint() lands.

   The body section is tightened too — most of a card's height after the
   media is padding, gaps, and the spotlight's intro paragraph, so trimming
   those adds up. */
.featured-grid .product-card__media {
  aspect-ratio: 4 / 3;
}
.featured-grid .product-card__body {
  padding: 14px 16px;
  gap: 8px;
}
.featured-grid .product-card__name {
  font-size: 21px;
  line-height: 1.12;
}
.featured-grid .product-card__cat { font-size: 10px; }
.featured-grid .product-card__intro {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.featured-grid .product-card__intro-eyebrow { margin-bottom: 4px; }

/* Spotlight (leftmost large) card — shows intro text below the title row.
   Media aspect-ratio is intentionally inherited from the base .product-card__media
   (1/1) so a card's inner layout is identical across spotlight and non-spotlight
   states. Otherwise the FLIP transition would have to mask an aspect-ratio change
   inside the card, which produces a visible "image resize" pop on the frame
   paint() lands. The card still reads bigger because it spans 2 rows + carries
   the intro paragraph below. */
.featured-grid > .product-card--spotlight {
  position: relative;
}
.product-card__intro {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.7;
  color: var(--beige-200);
  /* Clamp to 4 lines so the spotlight reads as a précis, not an essay. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__intro-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-200);
  font-family: var(--font-sans);
}

/* Arrow nav — circular gold-bordered icon buttons, vertically centered. */
.featured-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7, 6, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--gold-400);
  color: var(--gold-100);
  cursor: pointer;
  z-index: 5;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.featured-slider__nav:hover {
  background: var(--gold-200);
  border-color: var(--gold-200);
  color: var(--ink-0);
}
.featured-slider__nav--prev { left: calc(var(--gutter) * 0.25); }
.featured-slider__nav--next { right: calc(var(--gutter) * 0.25); }

/* Dots — visual progress indicator under the grid */
.featured-slider__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}
/* Each dot is a 24×2px visible line, but the <button> itself is a
   transparent tap target ≥ 44px on the vertical axis so fingers don't
   miss it on mobile. The line is rendered via ::before so changing the
   button's height doesn't move the dot relative to the row. */
.featured-slider__dot {
  position: relative;
  width: 24px;
  height: 44px;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
}
.featured-slider__dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: var(--rule);
  transition: background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.featured-slider__dot:hover::before { background: var(--gold-300); }
.featured-slider__dot.is-active::before {
  background: var(--gold-100);
  /* width override is implicit via the button width below */
}
.featured-slider__dot.is-active {
  width: 36px;
}

@media (max-width: 1100px) {
  .featured-grid > .product-card:nth-child(1) { grid-column: span 12; grid-row: auto; }
  .featured-grid > .product-card { grid-column: span 6 !important; }
  .featured-slider__nav { width: 40px; height: 40px; }
}
@media (max-width: 600px) {
  /* Phones hide the entire featured / selections section. The dense
     asymmetric grid never read well at phone widths and even the
     single-card mobile carousel below didn't fit the page's rhythm.
     Customers can still reach the same products via the No. 01 hero
     CTA → catalog and the catalog itself; the slider is purely
     editorial. */
  .section--featured { display: none; }
  /* Below rules are kept for the legacy single-card carousel layout —
     harmless when the parent is hidden, useful if we re-enable it. */
  .featured-grid > .product-card { grid-column: span 12 !important; }
  /* Centre the lone card and cap its width so it doesn't sprawl edge-to-
     edge on larger phones / phablets where 100% of the viewport reads as
     oversized. The cap stays under typical phone landscape widths so the
     card never grows beyond a comfortable reading size. */
  .featured-grid {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Slightly looser image padding helps the vial sit comfortably inside
     the smaller card without the chrome of the card squeezing it. */
  .featured-grid .product-card__media { aspect-ratio: 1 / 1; }
  /* Move arrows below the grid on phones — large overlapping arrows are
     awkward at narrow widths. */
  .featured-slider__nav {
    position: static;
    transform: none;
  }
  .featured-slider {
    display: grid;
    grid-template-areas: "grid grid" "prev next" "dots dots";
    gap: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .featured-grid { grid-area: grid; }
  .featured-slider__nav--prev { grid-area: prev; justify-self: end; }
  .featured-slider__nav--next { grid-area: next; justify-self: start; }
  .featured-slider__dots {
    grid-area: dots;
    margin-top: 0;
    /* Keep the dot row from overflowing horizontally when there are many
       products (>10): wrap to a second line rather than scrolling. */
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .product-card__intro { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* Trust strip — horizontal marquee of standards (legacy, retained for reference) */
.trust-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}
.trust-strip__track {
  display: flex; gap: 64px;
  animation: marquee 36s linear infinite;
  width: max-content;
}
.trust-strip__item {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--beige-200);
  white-space: nowrap;
}
.trust-strip__item .glyph {
  color: var(--gold-200);
  font-family: var(--font-serif); font-style: italic; font-size: 19px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Trust trio — three-column credibility block beneath the hero */
.trust-trio {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-0, #000);
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.trust-trio__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.trust-trio__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px;
  padding: 0 16px;
  position: relative;
}
.trust-trio__item + .trust-trio__item::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in oklch, var(--gold-400) 50%, transparent) 30%,
    color-mix(in oklch, var(--gold-400) 50%, transparent) 70%,
    transparent
  );
}
.trust-trio__icon {
  color: var(--gold-100);
  width: clamp(56px, 5.5vw, 72px);
  height: auto;
  display: flex; align-items: center; justify-content: center;
}
.trust-trio__icon svg { width: 100%; height: auto; display: block; }
.trust-trio__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 37px);
  letter-spacing: -0.005em;
  color: var(--gold-100);
  font-weight: 500;
  line-height: 1.1;
}
.trust-trio__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--beige-200);
  max-width: 32ch;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .trust-trio__inner { grid-template-columns: 1fr; gap: 48px; }
  .trust-trio__item + .trust-trio__item::before {
    left: 15%; right: 15%; top: -24px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      color-mix(in oklch, var(--gold-400) 50%, transparent) 30%,
      color-mix(in oklch, var(--gold-400) 50%, transparent) 70%,
      transparent
    );
  }
}

/* Two-column statement */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  padding: 0 var(--gutter);
  align-items: center;
}
/* Grid items get implicit `min-width: auto` (= min-content). When the
   .statement__col h2 is large enough that its single-word min-content
   exceeds the available track width — which happens at ≤380px viewports
   where the clamp() floor of 40px on the headline overrides shrinkage —
   the column expands past the grid container and forces a horizontal
   document overflow. `min-width: 0` lets the track honour `1fr` and
   `overflow-wrap` allows the headline to wrap at any character if the
   word would otherwise overflow. */
.statement__col {
  min-width: 0;
  overflow-wrap: anywhere;
}
.statement__col h2 {
  font-family: var(--font-serif);
  font-size: clamp(43px, 4.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.statement__col h2 em { font-style: italic; color: var(--gold-100); }
.statement__col p {
  color: var(--beige-200);
  font-size: 16px;
  line-height: 1.85;
  margin: 24px 0;
}
.statement__col .pull {
  font-family: var(--font-serif); font-style: italic;
  color: var(--gold-100);
  font-size: 24px;
  border-left: 1px solid var(--gold-300);
  padding-left: 24px;
  margin: 32px 0;
  line-height: 1.5;
}
.statement__numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.statement__numbers > div {
  background: var(--ink-1);
  padding: 24px;
}
.statement__num-big {
  font-family: var(--font-serif);
  font-size: 60px;
  color: var(--gold-100);
  letter-spacing: -0.02em;
  line-height: 1;
}
.statement__num-label {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--beige-300);
  margin-top: 8px;
}
@media (max-width: 900px) {
  .statement { grid-template-columns: 1fr; gap: 48px; }
}

/* Methodology section — floating vial stage (mirrors the shop hero pattern).
   Same champagne-glow halo and gentle rotate/translate animation, scoped
   into the right column of the №03 statement block. */
.home-method {
  position: relative;
}
.home-method__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
  /* Permit vertical page scrolling while we own horizontal pan for the
     swipe-to-advance gesture. Without this the browser may either eat
     the gesture as a horizontal page nav (none) or refuse to start
     scrolling the page on a slow vertical drag started inside the
     stage. */
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
/* Per-product copy that swaps with each slide — fades + 8px translate
   driven by inline JS (setCopy in index.html). Default transform keeps
   the column visible on first paint when JS hasn't touched the styles
   yet. */
.home-method__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}
/* COA link rendered under the four spec tiles. Quiet by default (just
   gold dot + small caps text), brighter on hover. Matches the visual
   weight of the eyebrow rules used elsewhere so it doesn't shout. */
.home-method__coa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.home-method__coa:hover,
.home-method__coa:focus-visible {
  color: var(--gold-100);
  border-bottom-color: var(--gold-400);
}
.home-method__coa-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 6px rgba(212, 175, 96, 0.55);
}
/* Champagne glow halo, anchored vertically-centered and slightly above
   the vial's resting position. */
.home-method__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 60%, 380px);
  aspect-ratio: 1;
  transform: translate(-50%, -56%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 175, 96, 0.46) 0%,
    rgba(212, 175, 96, 0.24) 28%,
    rgba(212, 175, 96, 0.09) 52%,
    rgba(212, 175, 96, 0)    72%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
/* Each vial sits inside a `.home-method__layer` wrapper. The layer carries
   the slide-in/out transform (handled by JS) while the img inside keeps its
   own transform reserved for the floating-hover keyframes. Stacking this
   way means the slide motion and the float motion never fight for control
   of the same `transform` property. */
.home-method__layer {
  position: absolute;
  inset: 0;
  /* Pointer-events auto so the layer (now an <a>) captures clicks. The
     nav buttons sit at z-index 3 above this, so they still take
     priority over their own click areas. */
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  z-index: 1;
  /* Slide is the dominant motion; fade is faster + ease-out so the leaving
     vial fully disappears before it fully exits the stage. */
  transition: transform 720ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity   460ms ease-out;
  will-change: transform, opacity;
}
.home-method__vial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, 56%, 280px);
  height: auto;
  transform-origin: 50% 80%;
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: lpVialHover 5.5s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
.home-method__caption {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: var(--gold-100);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  pointer-events: none;
  /* Caption text is replaced by the cash-register scramble — using a
     tabular monospace fallback would be ideal, but at 10px with 0.3em
     letter-spacing the width jitter is invisible in practice. */
  font-variant-numeric: tabular-nums;
}

/* Prev/next nav for the methodology vial slider — vertically centered on
   the stage, gold-bordered like the featured slider's chrome for visual
   continuity. */
.home-method__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7, 6, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--gold-400);
  color: var(--gold-100);
  cursor: pointer;
  z-index: 3;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.home-method__nav:hover {
  background: var(--gold-200);
  border-color: var(--gold-200);
  color: var(--ink-0);
}
.home-method__nav--prev { left: 16px; }
.home-method__nav--next { right: 16px; }

/* Phone-and-narrow fallback — overlay arrows are awkward on a tight stage,
   so move them below the stage in their own row (same pattern the featured
   slider uses on the home page). */
@media (max-width: 600px) {
  .home-method {
    display: grid;
    grid-template-areas: "stage stage" "prev next";
    gap: 16px;
  }
  .home-method__stage { grid-area: stage; }
  .home-method__nav {
    position: static;
    transform: none;
    width: 44px; height: 44px;
  }
  .home-method__nav--prev { grid-area: prev; justify-self: end; }
  .home-method__nav--next { grid-area: next; justify-self: start; }
}

/* Process section — numbered editorial */
.process {
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.process__step {
  background: var(--ink-1);
  padding: 56px 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.process__step .num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-200);
  font-size: 15px;
}
.process__step h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.15;
  color: var(--beige-50);
}
.process__step p {
  font-size: 14px;
  color: var(--beige-200);
  line-height: 1.75;
}
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* Newsletter / signup (legacy) */
.signup {
  padding: var(--s-8) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.signup__title {
  font-family: var(--font-serif);
  font-size: clamp(35px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--beige-50);
}
.signup__title em { font-style: italic; color: var(--gold-100); }
.signup__form { display: flex; gap: 12px; align-items: end; }
.signup__form .field { flex: 1; }
@media (max-width: 700px) {
  .signup { grid-template-columns: 1fr; }
  .signup__form { flex-direction: column; align-items: stretch; }
}

/* Contact section — replaces old correspondence signup */
.contact {
  padding: var(--s-8) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.contact__title {
  font-family: var(--font-serif);
  font-size: clamp(43px, 4.5vw, 69px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--beige-50);
}
.contact__title em { font-style: italic; color: var(--gold-100); }
.contact__lede {
  margin-top: 20px;
  color: var(--beige-200);
  font-size: 15px;
  line-height: 1.85;
  max-width: 40ch;
}
.contact__detail {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.contact__label {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg-muted);
}
.contact__detail a {
  font-family: var(--font-mono);
  color: var(--gold-100);
  font-size: 15px;
  text-decoration: none;
}
.contact__detail a:hover { color: var(--gold-50); text-decoration: underline; }

.contact__form {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.contact__form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.contact__note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 42ch;
}
.contact__success {
  padding: 16px;
  background: color-mix(in oklch, var(--gold-400) 18%, transparent);
  border: 1px solid var(--gold-300);
  color: var(--beige-50);
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact__form { padding: 28px; }
  .contact__form .field-row { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; }
}

/* ── Homepage research rail ─────────────────────────────────────
   "From the literature" — three featured peer-style reviews, slotted
   just above the footer. Generated by scripts/build_seo_cross_links.py;
   re-run that to update featured selection or layout. */
.home-research-rail {
  padding: var(--s-10, 80px) var(--gutter, 32px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.home-research-rail__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.home-research-rail__title-h2 {
  font-family: var(--font-serif);
  font-size: clamp(35px, 4vw, 60px);
  line-height: 1.05;
  margin: 8px 0 16px;
}
.home-research-rail__title-h2 em {
  font-style: italic;
  color: var(--gold-100);
}
.home-research-rail__lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--beige-200);
  margin: 0;
}
.home-research-rail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.home-research-rail__card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.home-research-rail__card:hover {
  background: var(--ink-2);
  border-color: var(--rule-strong);
}
.home-research-rail__cat {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: 12px;
}
.home-research-rail__title {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--beige-50);
}
.home-research-rail__excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--beige-200);
  margin: 0 0 20px;
  flex: 1;
}
.home-research-rail__cta {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--gold-100);
  margin-top: auto;
}
.home-research-rail__more {
  text-align: center;
  margin-top: 40px;
}
@media (min-width: 800px)  { .home-research-rail__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .home-research-rail__grid { grid-template-columns: repeat(3, 1fr); } }