/* ============================================
   BASALT BIO — BASE.CSS
   Design tokens, typography, resets, layout
   Palette: cool near-black · forest green · deep navy
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Surfaces (deep navy / obsidian) ---- */
  /* ---- Base (lifted from near-black to visibly-navy) ---- */
  --bb-bg:         #0b1628;
  --bb-surface-1:  #14213a;
  --bb-surface-2:  #1a2a47;
  --bb-surface-3:  #223459;

  /* ---- Borders (brightened so they read navy, never black) ---- */
  --bb-border:     #2d4670;
  --bb-border-hot: #4a6899;

  /* ---- Forest (primary accent) ---- */
  --bb-forest:       #1a5f3f;
  --bb-forest-hot:   #2d8559;
  --bb-forest-deep:  #0f3d27;
  --bb-forest-dim:   #154a32;
  --bb-forest-glow:  rgba(45, 133, 89, 0.12);
  --bb-forest-glow-strong: rgba(45, 133, 89, 0.22);

  /* ---- Navy (secondary accent) ---- */
  --bb-navy:       #0f1c33;
  --bb-navy-hot:   #1e3a5f;
  --bb-navy-deep:  #0a1324;
  --bb-navy-glow:  rgba(30, 58, 95, 0.14);

  /* ---- Text (brightened — nothing should ever read as black-on-black) ---- */
  --bb-text:       #ffffff;
  --bb-text-dim:   #d4d8d5;
  --bb-text-muted: #a6b0b8;
  --bb-text-faint: #8a95a3;

  /* ---- Semantic ---- */
  --bb-error:   #b55454;
  --bb-success: var(--bb-forest-hot);

  /* ---- Category colors (reworked for cool palette) ---- */
  --bb-cat-forge: #c96b52;  /* warm rust for recovery */
  --bb-cat-axis:  #4f6fa8;  /* navy-blue for GH-axis */
  --bb-cat-epoch: #3d8a52;  /* forest for longevity */
  --bb-cat-glow:  #b07865;  /* muted copper for skin (replaces gold to kill the yellow read) */
  --bb-cat-pulse: #8a5285;  /* muted plum for vitality */
  --bb-cat-form:  #9a6080;  /* muted rose */
  --bb-cat-edge:  #3a6a9a;  /* steel blue */

  /* ---- Typography ---- */
  --bb-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bb-font-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  /* ---- Font sizes (fluid) ---- */
  --bb-fs-xs:   0.75rem;
  --bb-fs-sm:   0.875rem;
  --bb-fs-base: 1rem;
  --bb-fs-md:   1.125rem;
  --bb-fs-lg:   1.375rem;
  --bb-fs-xl:   1.75rem;
  --bb-fs-2xl:  2.25rem;
  --bb-fs-3xl:  3rem;
  --bb-fs-4xl:  clamp(2.5rem, 7vw, 5rem);

  /* ---- Spacing ---- */
  --bb-sp-1: 4px;
  --bb-sp-2: 8px;
  --bb-sp-3: 12px;
  --bb-sp-4: 16px;
  --bb-sp-5: 24px;
  --bb-sp-6: 32px;
  --bb-sp-7: 48px;
  --bb-sp-8: 64px;
  --bb-sp-9: 96px;

  /* ---- Layout ---- */
  --bb-max-w: 1280px;
  --bb-nav-h: 68px;
  --bb-banner-h: 36px;

  /* ---- Motion ---- */
  --bb-dur-fast:  150ms;
  --bb-dur:       300ms;
  --bb-dur-slow:  600ms;
  --bb-ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --bb-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: var(--bb-fs-base);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; color: inherit; }

::selection { background: var(--bb-forest); color: var(--bb-text); }

/* ---- Typography utilities ---- */
.eyebrow {
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--bb-forest-hot);
  font-weight: 600;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, var(--bb-fs-3xl));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bb-text);
  text-transform: lowercase;
}

.label-caps {
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--bb-text-muted);
  font-weight: 600;
}

.mono-tag {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-xs);
  letter-spacing: 0.04em;
  color: var(--bb-text-muted);
}

.amber-dot, .forest-dot { color: var(--bb-forest-hot); }
.amber { color: var(--bb-forest-hot); }
.dim { color: var(--bb-text-muted); }

/* ---- Containers ---- */
.container {
  max-width: var(--bb-max-w);
  margin: 0 auto;
  padding: 0 var(--bb-sp-5);
  width: 100%;
}

@media (min-width: 768px) {
  .container { padding: 0 var(--bb-sp-6); }
}

.section {
  padding: var(--bb-sp-8) 0;
  position: relative;
}

@media (min-width: 768px) {
  .section { padding: var(--bb-sp-9) 0; }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--bb-sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--bb-sp-6);
}

.section-header > div:first-child { max-width: 640px; }
.section-header .eyebrow { margin-bottom: var(--bb-sp-3); display: block; }

/* ---- Scrollbar (dark theme) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: var(--bb-surface-2); border: 2px solid var(--bb-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-surface-3); }

/* ============================================
   GLOBAL LOWERCASE ENFORCEMENT
   Every heading, product name, nav link, and label
   renders lowercase regardless of data casing.
   ============================================ */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero__title-1,
.hero__title-2,
.hero__eyebrow,
.page-hero__title,
.page-hero__eyebrow,
.content-hero__title,
.content-hero__eyebrow,
.post-header__title,
.post-header__badge,
.nav__link,
.nav__mobile-link,
.nav__logo-text,
.footer__logo-text,
.footer__col-title,
.footer__link,
.footer__legal,
.age-gate__logo-text,
.age-gate__title,
.age-gate__footer,
.eyebrow,
.label-caps,
.badge,
.badge-ghost,
.research-banner__text,
.compound-card__name,
.compound-card__scientific,
.compound-card__cta,
.compound-card__size,
.product-info__name,
.product-info__eyebrow,
.stack-card__name,
.stack-card__tagline,
.stack-card__components,
.article-card__tag,
.article-card__title,
.blog-featured__badge,
.blog-featured__title,
.blog-cat-nav a,
.bedrock__title,
.bedrock__eyebrow,
.bedrock__tier-name,
.bedrock__subtitle,
.standard__title,
.about-split__kicker,
.about-split__title,
.value__title,
.summary__title,
.summary__bedrock,
.cart-item__name,
.cart-item__sci,
.cart-empty__title,
.cart-empty__body,
.auth-card h1,
.auth-card h2,
.auth-tab,
.account-tab,
.account-panel h2,
.account-panel h3,
.checkout-step h2,
.checkout-step h3,
.shop-count,
.shop-filter,
.post-visual__watermark,
.about-split__watermark,
.blog-featured__watermark,
.post-header__meta,
.content-hero__meta {
  text-transform: lowercase !important;
}

/* Keep true initialisms readable where they matter */
abbr, .keep-case, .bb-keep-case, .breadcrumb .current, .prose,
.prose h1, .prose h2, .prose h3, .prose p, .prose li, .prose strong, .prose em,
code, kbd, .mono-tag,
input, textarea, select, ::placeholder {
  text-transform: none !important;
}

/* Category badges render UPPERCASE to form a visual hierarchy against
   the lowercase stack/compound names. Needs !important to beat the
   global lowercase enforcement on .badge above. */
.badge.badge-cat {
  text-transform: uppercase !important;
}

/* ============================================
   CSS VIALS — 3D product rendering
   Black label, lowercase "basalt bio" wordmark,
   product nickname, red/orange rubber cap.
   ============================================ */
.vial-showcase {
  width: 140px;
  height: 240px;
  margin: 0 auto;
  position: relative;
  /* Amber-brown pharmaceutical glass tint, lit from upper-left */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 240, 200, 0.14) 0%, transparent 50%),
    linear-gradient(
      90deg,
      #2a1f14 0%,
      #4a3826 15%,
      #1d1509 48%,
      #4a3826 82%,
      #2a1f14 100%
    );
  border-radius: 14px 14px 6px 6px;
  box-shadow:
    /* Inner glass sheen */
    inset 0 0 30px rgba(255, 220, 160, 0.08),
    inset 0 -30px 40px rgba(0, 0, 0, 0.6),
    /* Outer cast shadow on a photo seamless */
    14px 28px 50px rgba(0, 0, 0, 0.75),
    2px 6px 12px rgba(0, 0, 0, 0.4),
    /* Subtle forest-green rim light */
    0 0 0 1px rgba(45, 133, 89, 0.14);
}

/* Photo-seamless vignette behind the vial to sell the product-shot feel */
.vial-showcase::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 180px;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

.vial-showcase::after {
  /* Liquid meniscus at top of vial */
  content: '';
  position: absolute;
  top: 6px;
  left: 8%;
  right: 8%;
  height: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.vial-cap {
  position: absolute;
  top: -22px;
  left: 14px;
  right: 14px;
  height: 28px;
  background: linear-gradient(
    90deg,
    #b5503e 0%, #d06a55 25%, #ff8a75 50%, #d06a55 75%, #b5503e 100%
  );
  border-radius: 5px 5px 0 0;
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, 0.3) inset,
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.vial-cap::before {
  /* Aluminum crimp ring under the rubber cap */
  content: '';
  position: absolute;
  bottom: -8px;
  left: -4px;
  right: -4px;
  height: 10px;
  background: linear-gradient(180deg, #888 0%, #444 50%, #222 100%);
  border-radius: 1px;
}

.vial-label {
  position: absolute;
  top: 42px;
  bottom: 22px;
  left: -2px;
  right: -2px;
  background: #050505;
  border-radius: 2px;
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vial-label::before {
  /* Thin forest-green accent stripe at top of label */
  content: '';
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--bb-forest-hot);
  opacity: 0.6;
}

.vial-label::after {
  /* Thin forest-green accent stripe at bottom of label */
  content: '';
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--bb-forest-hot);
  opacity: 0.6;
}

.vial-label__logo {
  font-family: var(--bb-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 14px;
  text-transform: lowercase;
}

.vial-label__name {
  font-family: var(--bb-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: lowercase;
  line-height: 1.2;
  max-width: 100px;
  word-break: break-word;
}

.vial-label__ruo {
  margin-top: 10px;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
}

/* Larger vial for the product detail page */
.vial-showcase--xl {
  width: 220px;
  height: 380px;
  border-radius: 18px 18px 8px 8px;
}
.vial-showcase--xl .vial-cap {
  top: -28px;
  left: 22px;
  right: 22px;
  height: 40px;
  border-radius: 7px 7px 0 0;
}
.vial-showcase--xl .vial-label {
  top: 60px;
  bottom: 32px;
  padding: 28px 16px;
}
.vial-showcase--xl .vial-label__logo {
  font-size: 18px;
  margin-bottom: 22px;
}
.vial-showcase--xl .vial-label__name {
  font-size: 24px;
  letter-spacing: 0.03em;
  max-width: 160px;
}
.vial-showcase--xl .vial-label__ruo {
  margin-top: 16px;
  font-size: 10px;
}

/* ============================================
   MOBILE: iOS SAFE-AREA + TAP TARGETS + FLUID FIXES
   ============================================ */

/* Respect iPhone notch and home-indicator safe areas */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* All buttons and links get minimum 44x44 tap targets on touch devices (Apple HIG) */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav__link,
  .nav__mobile-link,
  .nav__icon-btn,
  .footer__link,
  .merch-filter__btn,
  .page-hero__switch-btn,
  .account-tab,
  .auth-tab,
  [data-age-confirm],
  [data-age-exit],
  [data-cookie-accept],
  [data-cookie-reject],
  [data-promo-apply],
  [data-promo-remove],
  [data-merch-add],
  [data-add-to-cart],
  [data-prev-step],
  [data-next-step],
  [data-place-order] {
    min-height: 44px;
  }
  .qty-stepper button { min-width: 44px; min-height: 44px; }
}

/* Prevent horizontal scroll on any page */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Inputs must be >=16px font on iOS or it auto-zooms on focus */
@media (max-width: 760px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Container padding collapses cleanly on narrow screens */
@media (max-width: 560px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .section { padding: var(--bb-sp-7) 0; }
}

/* Section-title scales down on small screens */
@media (max-width: 560px) {
  .section-title,
  .page-hero__title,
  .content-hero__title,
  .post-header__title,
  .preorder__title,
  .bedrock__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.05;
  }
}

/* Hero actions stack on mobile */
@media (max-width: 520px) {
  .hero__actions,
  .preorder__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero__actions .btn,
  .preorder__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Section-header stacks on mobile (not flex justified) */
@media (max-width: 640px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bb-sp-3);
  }
  .section-header .btn { align-self: flex-start; }
}

/* Age gate panel fits phone */
@media (max-width: 520px) {
  .age-gate__panel {
    padding: var(--bb-sp-5) var(--bb-sp-4);
    max-width: 94%;
  }
  .age-gate__title {
    font-size: var(--bb-fs-md) !important;
  }
  .age-gate__body {
    font-size: var(--bb-fs-xs);
  }
}

/* Cookie banner becomes a bottom sheet on mobile */
@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
    width: auto;
  }
}

/* Vial showcase shrinks proportionally on phones so it never blows past card width */
@media (max-width: 560px) {
  .vial-showcase {
    width: 120px;
    height: 210px;
    transform: scale(0.95);
  }
  .vial-showcase--xl {
    width: 180px;
    height: 320px;
  }
}

/* Flagship + shop grids go single column on phones */
@media (max-width: 560px) {
  .flagship-grid,
  .shop-grid { grid-template-columns: 1fr; }
  .compound-card { min-height: 440px; }
}

/* Footer grid collapses cleanly */
@media (max-width: 720px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--bb-sp-5) var(--bb-sp-4);
  }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr !important; }
}

/* Footer bottom legal + social stack on mobile */
@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--bb-sp-4);
  }
  .footer__social,
  .footer__social-handle {
    align-self: flex-start;
  }
}

/* Cart page: summary stacks below items */
@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: var(--bb-sp-5);
  }
}

/* Cart items go vertical on phones */
@media (max-width: 560px) {
  .cart-item {
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto;
    gap: var(--bb-sp-3);
  }
  .cart-item__controls {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: var(--bb-sp-3);
    justify-content: space-between;
  }
}

/* Product layout stacks on tablet-and-down */
@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: var(--bb-sp-5);
  }
}

/* Checkout layout stacks on tablet-and-down */
@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: var(--bb-sp-5);
  }
}

/* Account dashboard stacks */
@media (max-width: 900px) {
  .account-layout,
  .account-shell {
    grid-template-columns: 1fr !important;
    gap: var(--bb-sp-4);
  }
  .account-nav {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-tab { flex: 0 0 auto; }
}

/* Preorder grid cards stack on phones */
@media (max-width: 700px) {
  .preorder__grid { grid-template-columns: 1fr !important; }
}

/* BEDROCK tiers stack on small phones */
@media (max-width: 560px) {
  .bedrock__tiers {
    flex-direction: column;
    gap: var(--bb-sp-5);
  }
  .bedrock__tier-connector { display: none; }
  .bedrock__tier-threshold { max-width: 100%; }
}

/* Blog post prose tightens on mobile */
@media (max-width: 560px) {
  .prose p,
  .prose li { font-size: var(--bb-fs-sm); line-height: 1.65; }
  .prose h2 { font-size: var(--bb-fs-lg); }
  .prose h3 { font-size: var(--bb-fs-md); }
}

/* IG nav pill hides text earlier; only icon below 560 */
@media (max-width: 560px) {
/* IG nav word hides on narrow phones (handled in components.css) */
}

/* Smooth scroll on iOS */
html { -webkit-tap-highlight-color: transparent; }

/* Ensure the animated canvas covers the full safe area (not just the inset) */
#global-canvas {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;  /* Dynamic viewport height on mobile browsers */
}

/* iOS button tap visual feedback */
.btn:active { transform: scale(0.98); }

/* ============================================
   STACKED VIALS — for protocols/stacks with multiple compounds
   1 vial: centered (no stack needed)
   2 vials: side by side, slight inward tilt
   3 vials: triangle arrangement, center taller
   4 vials: 2x2 grid, staggered depth
   ============================================ */
.vial-stack {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vial-stack__item {
  position: absolute;
  transition: transform var(--bb-dur-slow) var(--bb-ease-out);
}

/* 1 vial */
.vial-stack--1 .vial-stack__item--1 {
  position: relative;
}

/* 2 vials — side by side, symmetric tilt */
.vial-stack--2 .vial-stack__item--1 {
  transform: translateX(-70px) rotate(-6deg);
  z-index: 2;
}
.vial-stack--2 .vial-stack__item--2 {
  transform: translateX(70px) rotate(6deg);
  z-index: 1;
}
.vial-stack--2:hover .vial-stack__item--1 { transform: translateX(-75px) rotate(-8deg); }
.vial-stack--2:hover .vial-stack__item--2 { transform: translateX(75px) rotate(8deg); }

/* 3 vials — triangle: center taller + forward, flanks rotated back */
.vial-stack--3 { min-height: 480px; }
.vial-stack--3 .vial-stack__item--1 {
  transform: translate(-110px, 25px) rotate(-10deg) scale(0.88);
  z-index: 1;
  opacity: 0.92;
}
.vial-stack--3 .vial-stack__item--2 {
  transform: translate(0, -20px);
  z-index: 3;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
}
.vial-stack--3 .vial-stack__item--3 {
  transform: translate(110px, 25px) rotate(10deg) scale(0.88);
  z-index: 2;
  opacity: 0.92;
}
.vial-stack--3:hover .vial-stack__item--1 { transform: translate(-120px, 20px) rotate(-12deg) scale(0.9); }
.vial-stack--3:hover .vial-stack__item--3 { transform: translate(120px,  20px) rotate(12deg) scale(0.9); }

/* 4 vials — 2x2 with depth staggering */
.vial-stack--4 { min-height: 540px; }
.vial-stack--4 .vial-stack__item--1 {
  transform: translate(-90px, -45px) rotate(-4deg) scale(0.88);
  z-index: 2;
  opacity: 0.92;
}
.vial-stack--4 .vial-stack__item--2 {
  transform: translate(90px, -45px) rotate(4deg) scale(0.88);
  z-index: 2;
  opacity: 0.92;
}
.vial-stack--4 .vial-stack__item--3 {
  transform: translate(-70px, 55px) rotate(-8deg);
  z-index: 3;
}
.vial-stack--4 .vial-stack__item--4 {
  transform: translate(70px, 55px) rotate(8deg);
  z-index: 4;
}

/* Extra drop-shadow on foreground vials in stacks */
.vial-stack__item {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55));
}

/* Mobile: compress the staggering so stacks fit phone width */
@media (max-width: 560px) {
  .vial-stack { min-height: 380px !important; transform: scale(0.78); transform-origin: top center; }
  .vial-stack--2 .vial-stack__item--1 { transform: translateX(-52px) rotate(-6deg); }
  .vial-stack--2 .vial-stack__item--2 { transform: translateX(52px) rotate(6deg); }
  .vial-stack--3 .vial-stack__item--1 { transform: translate(-82px, 20px) rotate(-10deg) scale(0.82); }
  .vial-stack--3 .vial-stack__item--3 { transform: translate(82px, 20px) rotate(10deg) scale(0.82); }
  .vial-stack--4 .vial-stack__item--1 { transform: translate(-68px, -35px) rotate(-4deg) scale(0.82); }
  .vial-stack--4 .vial-stack__item--2 { transform: translate(68px, -35px) rotate(4deg) scale(0.82); }
  .vial-stack--4 .vial-stack__item--3 { transform: translate(-52px, 40px) rotate(-8deg) scale(0.92); }
  .vial-stack--4 .vial-stack__item--4 { transform: translate(52px, 40px) rotate(8deg) scale(0.92); }
}

/* ============================================
   PRE-AGE-GATE BLACKOUT
   Keeps the rest of the page invisible until JS
   runs and decides whether to show the age gate.
   Prevents the "flash of content above the modal"
   issue.
   ============================================ */
html:not(.bb-ready) body > main,
html:not(.bb-ready) body > .research-banner,
html:not(.bb-ready) body > .nav,
html:not(.bb-ready) body > [data-partial="banner"],
html:not(.bb-ready) body > [data-partial="nav"],
html:not(.bb-ready) body > footer,
html:not(.bb-ready) body > [data-partial="footer"] {
  visibility: hidden;
}

/* The age-gate placeholder takes over the full viewport until JS swaps it */
html:not(.bb-ready) body > [data-partial="age-gate"] {
  position: fixed;
  inset: 0;
  background: var(--bb-bg);
  z-index: 9999;
  display: grid;
  place-items: center;
}
html:not(.bb-ready) body > [data-partial="age-gate"]::before {
  content: "basalt bio";
  font-family: var(--bb-font-body);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--bb-text);
  text-transform: lowercase;
}