/* FindMyFrag — editorial / magazine tokens.
   Paper-white surface. Warm near-black ink. One oxblood accent. One gold signal.
   Fraunces display, Manrope body, JetBrains Mono data. */

:root {
  /* Paper + ink */
  --paper:       oklch(0.985 0.005 85);    /* warm paper-white, not #fff */
  --paper-deep:  oklch(0.965 0.007 85);    /* one step deeper for rules/dividers */
  --ink:         oklch(0.22 0.012 60);     /* warm near-black, never pure */
  --ink-soft:    oklch(0.40 0.010 60);
  --ink-mute:    oklch(0.58 0.008 60);
  --ink-faint:   oklch(0.76 0.006 60);
  --rule:        oklch(0.88 0.006 60);

  /* Accents — share chroma/lightness, vary hue. */
  --oxblood:     oklch(0.42 0.13 22);      /* signal, sparingly */
  --oxblood-ink: oklch(0.34 0.13 22);
  --gold:        oklch(0.76 0.12 82);      /* lowest-landed chip only */
  --gold-ink:    oklch(0.48 0.10 82);

  /* Signal hues (quiet) */
  --sig-buy:     oklch(0.48 0.10 155);
  --sig-hold:    oklch(0.55 0.09 85);
  --sig-wait:    oklch(0.42 0.13 22);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  /* Typography pass 2 — prevent faux bold/italic, allow hyphenation in prose. */
  font-synthesis: none;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Every anchor target gets a generous scroll-margin so §N links, /issue deep
   links, and refusal anchors all land below the nav band without fiddling. */
[id] { scroll-margin-top: 100px; }

/* Display type: avoid widows/orphans on the headline line-breaks. */
.display-xxl, .display-xl, .display-l, .display-m, .display-s,
h1, h2, h3, h4 { text-wrap: balance; }

/* Body paragraphs: prefer better-paragraph wrapping where the browser supports it. */
p.body-l, p.body-m, .fraun.body-l, .fraun.body-m { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: underline;
}

/* ────── Type scale (editorial) ────── */
/* Fraunces is a variable font with an `opsz` (optical sizing) axis that ranges
   9..144. Turning on `font-optical-sizing: auto` lets the browser pick the
   right cut by rendered size — display-size cuts get higher contrast, body-
   size cuts get warmer/softer. Already loaded in index.html's font URL. */
.fraun      { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; font-optical-sizing: auto; }
.fraun-med  { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em; font-optical-sizing: auto; }
.fraun-itl  { font-family: var(--font-display); font-style: italic; font-weight: 400; font-optical-sizing: auto; }

.mono       { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Display sizes */
.display-xxl { font-family: var(--font-display); font-weight: 400; font-size: clamp(72px, 12vw, 188px); line-height: 0.88; letter-spacing: -0.035em; font-optical-sizing: auto; }
.display-xl  { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 8vw, 120px);  line-height: 0.92; letter-spacing: -0.025em; font-optical-sizing: auto; }
.display-l   { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px);   line-height: 0.96; letter-spacing: -0.02em;  font-optical-sizing: auto; }
.display-m   { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px);   line-height: 1.05; letter-spacing: -0.015em; font-optical-sizing: auto; }
.display-s   { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2;   letter-spacing: -0.01em;  font-optical-sizing: auto; }

.body-l  { font-size: 19px; line-height: 1.55; }
.body-m  { font-size: 16px; line-height: 1.55; }
.body-s  { font-size: 14px; line-height: 1.5; }
.body-xs { font-size: 12px; line-height: 1.45; }

/* ────── Chrome ────── */

.hairline   { border: 0; border-top: 1px solid var(--rule); height: 0; margin: 0; }
.hairline-k { border: 0; border-top: 1px solid var(--ink); height: 0; margin: 0; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Oxblood + gold chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.chip-gold { color: var(--gold-ink); background: color-mix(in oklab, var(--gold) 28%, transparent); border-color: var(--gold); }
.chip-ox   { color: var(--oxblood-ink); border-color: var(--oxblood); }
.chip-ink  { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* Mode toggle — cheapest vs fastest, editorial pair, not a pill */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.mode-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: background 120ms, color 120ms;
}
.mode-toggle button + button { border-left: 1px solid var(--ink); }
.mode-toggle button:hover { color: var(--ink); }
.mode-toggle button.is-on { background: var(--ink); color: var(--paper); }
.mode-toggle__sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.mode-toggle button.is-on .mode-toggle__sub { opacity: 0.85; }
.chip-mute { color: var(--ink-mute); border-color: var(--ink-faint); }

/* Retailer-tier chips — tells the reader what KIND of retailer, not an
   abstract trust grade. Authorized is the strongest visual (ink outline);
   Niche boutique gets the gold accent (matches .chip-gold); Community
   and Department stay muted; Decants neutral. See §4 for methodology. */
.chip-tier-a           { color: var(--ink); border-color: var(--ink); }
.chip-tier-b           { color: var(--ink-soft); border-color: var(--ink-soft); }
.chip-tier-niche       { color: var(--gold-ink); border-color: var(--gold); background: color-mix(in oklab, var(--gold) 14%, transparent); }
.chip-tier-decant      { color: var(--ink-mute); border-color: var(--ink-faint); }
.chip-tier-department  { color: var(--ink-soft); border-color: var(--ink-faint); }

/* Legacy shim — unused in UI but kept for any late-binding caller. */
.chip-elite      { color: var(--ink);         border-color: var(--ink); }
.chip-verified   { color: var(--ink-soft);    border-color: var(--ink-soft); }
.chip-unverified { color: var(--oxblood-ink); border-color: var(--oxblood); }

/* Signal pill (used for buy/hold/wait — still quiet) */
.signal {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signal::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translateY(1px);
  background: currentColor;
  display: inline-block;
}
.signal-buy  { color: var(--sig-buy); }
.signal-hold { color: var(--sig-hold); }
.signal-wait { color: var(--sig-wait); }

/* Bottle placeholder — subtle striped paper look, flush (no card). */
.bottle-ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper) 0 10px,
      var(--paper-deep) 10px 11px
    );
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bottle-ph::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px; left: 12px;
}

/* ────── Shop button — the CTA per the "we don't sell, we point you" stance.
   Primary = solid oxblood, for the hero. Ghost = outlined, for runners.
   Compact = inline size for the audit table row. No gradient, no rounded
   pills with icon bloat; this is an editorial object, not a marketing one. */
.shop-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.shop-btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.shop-btn--primary {
  background: var(--oxblood);
  color: var(--paper);
  border-color: var(--oxblood);
  padding: 12px 20px;
  font-size: 12.5px;
}
.shop-btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
/* Full-width variant for single-CTA masthead slots. Stretches to its column
   so the primary call-to-action reads as THE action, not a button nested in
   a row of options. */
.shop-btn--block {
  flex: 1;
  width: 100%;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
  letter-spacing: 0.1em;
}
/* Ghost + compact are still "shop" buttons — keep them filled so the action
   reads as a button at every size. Primary (oxblood) is louder; ghost and
   compact use ink fill so the hero's primary still wins the eye. */
.shop-btn--ghost {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding: 8px 14px;
  font-size: 11px;
}
.shop-btn--ghost:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
}
.shop-btn--compact {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  min-width: 118px;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.shop-btn--compact:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
}

/* Shop-URL resolver tier markers.
   - .shop-btn--pdp    — verified direct product URL (default primary style)
   - .shop-btn--search — per-retailer search URL (slightly softer visual weight
                         so the user can tell at a glance that clicking lands
                         on search results, not a PDP)
   - .shop-btn--none   — no safe URL available; rendered as a disabled chip,
                         not a link. No hover, no cursor change, no href. */
/* Search-tier buttons keep the same solid silhouette as pdp-tier but
   carry "Find at {X}" label instead of "Shop at {X}". No dashed border:
   on full-width CTAs a dashed edge reads like a broken render, not a
   subtle signal. The label change is enough information. */
.shop-btn--search {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.shop-btn--search:hover {
  background: var(--ink);
  color: var(--paper);
}
.shop-btn--primary.shop-btn--search {
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.shop-btn--primary.shop-btn--search:hover {
  background: var(--ink);
  color: var(--paper);
}
.shop-btn--none {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--rule);
  cursor: not-allowed;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}
.shop-btn--none:hover {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--rule);
}
.shop-btn--compact.shop-btn--search {
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.shop-btn--compact.shop-btn--none {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--rule);
  cursor: not-allowed;
  min-width: 118px;
  justify-content: center;
}

/* Decant grid — none-tier card looks present but not clickable.
   Drops-row tier markers are defined after the base .drops-row__shop rule
   further down in this file, because CSS source order decides wins. */
.decant-card--none {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--paper-deep);
}
.decant-card--none:hover { background: var(--paper-deep); }
.decant-card--none:hover .fraun { color: var(--ink); }
/* Search-tier decant cards stay identical to pdp-tier — the whole decant
   strip is understood to be niche retailer landings, so per-card "search"
   badging would be visual noise, not information. */

/* Nav */
.nav {
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.nav-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
}
.brand .dot { color: var(--oxblood); }
.nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0; margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav ul a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ────── Nav search (inline pill, always visible) ────── */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
  padding: 7px 10px 7px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color 140ms, box-shadow 140ms;
}
.nav-search.is-focused,
.nav-search:focus-within {
  border-color: var(--oxblood);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--oxblood) 14%, transparent);
}
.nav-search__icon { color: var(--ink-mute); flex: 0 0 auto; }
.nav-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
.nav-search input::placeholder { color: var(--ink-mute); }
.nav-search input::-webkit-search-cancel-button { display: none; }

.nav-search__kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px 1px;
  flex: 0 0 auto;
}
.nav-search.is-focused .nav-search__kbd,
.nav-search:focus-within .nav-search__kbd { opacity: 0; pointer-events: none; }

.nav-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 6px;
  z-index: 40;
  box-shadow: 0 12px 36px rgba(48, 32, 20, 0.12);
  overflow: hidden;
}
.nav-search__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  transition: background 80ms;
}
.nav-search__row:last-child { border-bottom: 0; }
.nav-search__row.is-active,
.nav-search__row:hover { background: var(--paper-deep); text-decoration: none; }
.nav-search__row--all { background: color-mix(in oklab, var(--paper-deep) 70%, transparent); }

.nav-search-spacer { min-width: 280px; }

.nav-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* Footer */
.footer {
  margin-top: 120px;
  padding: 48px 0 64px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; font-size: 14px; }
.footer .refusals-cta {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--oxblood-ink);
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 3px;
}

/* Data format — the site's numeric voice */
.stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.stat .big { font-size: 22px; letter-spacing: -0.01em; }
.stat .sep { color: var(--ink-faint); }
.stat .meta { color: var(--ink-mute); }

/* Tweaks panel */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px;
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 500;
  padding: 18px 18px 16px;
  font-size: 13px;
  display: none;
  box-shadow: 0 24px 60px rgba(48, 32, 20, 0.12);
}
.tweaks.on { display: block; }
.tweaks h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.tweaks label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.tweaks .seg {
  display: flex;
  border: 1px solid var(--ink);
  margin-top: 6px;
}
.tweaks .seg button {
  flex: 1;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 7px 4px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tweaks .seg button + button { border-left: 1px solid var(--ink); }
.tweaks .seg button.on { background: var(--ink); color: var(--paper); }

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.strike { text-decoration: line-through; color: var(--ink-mute); }

/* ────── Notes pyramid — Fragrantica-pattern reference, paper palette.
   Three centered rows (top/heart/base), borderless chips, emoji icon
   over a note label. §11-compliant (Unicode emoji = community-designed
   glyphs, rendered by the OS, not AI imagery). Typographic fallback
   for notes without a mapped emoji. */
.notes-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 4px 0 8px;
}
.notes-pyramid__row { width: 100%; text-align: center; }
.notes-pyramid__header {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  position: relative;
}
.notes-pyramid__header::before,
.notes-pyramid__header::after {
  content: "";
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--rule);
  vertical-align: middle;
  margin: 0 14px;
}
.notes-pyramid__tiles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.note-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  padding: 6px 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms, opacity 140ms;
}
.note-chip:hover { transform: translateY(-2px); text-decoration: none; }
.note-chip__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  /* Muted-editorial emoji — OS color fonts are too saturated for the paper
     palette; saturate(0.65) + contrast(0.95) gives a watercolor feel. */
  filter: saturate(0.65) contrast(0.95);
}
.note-chip__typeset {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.note-chip__label {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .notes-pyramid__header::before,
  .notes-pyramid__header::after { width: 32px; margin: 0 8px; }
  .note-chip { width: 72px; }
  .note-chip__icon { width: 48px; height: 48px; font-size: 34px; }
  .note-chip__label { font-size: 12.5px; }
}

/* Country selector in the pitch strip — ISO-style country code trigger
   (US / CA / UK / DE / FR / AU / WW). Native emoji flags don't render on
   Windows, so we use mono-typeset codes that match the site's voice and
   are pixel-consistent across platforms. */
.country-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklab, var(--paper) 24%, transparent);
  background: transparent;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  position: relative;
  cursor: pointer;
  line-height: 1;
  transition: border-color 140ms, background 140ms;
  height: 24px;
  box-sizing: border-box;
}
.country-select:hover,
.country-select:focus-within {
  border-color: var(--gold);
  background: color-mix(in oklab, var(--paper) 4%, transparent);
}
.country-select__code {
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-feature-settings: "tnum", "zero";
  line-height: 1;
  font-size: 11px;
}
.country-select__caret {
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  font-size: 9px;
  line-height: 1;
  margin-top: 1px;
}
.country-select__input {
  appearance: none;
  background: transparent;
  border: 0;
  color: transparent;
  font: inherit;
  padding: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.country-select__input:focus { outline: none; }
.country-select__input option {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTES + PERSONA SPLIT — persona archetype left, notes pyramid right.
   Notes go full-width when persona is absent (backward-compat fallback).
   ═══════════════════════════════════════════════════════════════════ */
.notes-split {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 56px;
  align-items: center;
  padding: 16px 0 8px;
}
@media (max-width: 860px) {
  .notes-split { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}

.persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.persona__figure {
  width: 132px;
  height: 172px;
  margin-bottom: 18px;
  opacity: 0.92;
}
.persona__kicker {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-bottom: 10px;
}
.persona__title {
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 12px;
}
.persona__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.55;
  max-width: 260px;
  margin: 0 auto 16px;
  font-style: italic;
}
.persona__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 280px;
  margin: 0 auto;
  text-wrap: balance;
}
.persona__perfect {
  margin-top: 20px;
  width: 100%;
}
.persona__perfect .perfect-for-inline {
  justify-content: center;
  max-width: 300px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.persona__perfect .perfect-for-inline__sep { display: none; }
.persona__perfect .perfect-for-inline__k {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 6px;
}
.persona__perfect .perfect-for-inline__v { justify-content: center; }

/* Compact mode kills the outer padding so the notes column aligns with the
   persona block rather than drifting down. */
.notes-pyramid--compact { padding-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   HISTORY COLLAPSIBLE — nested under the retailer ledger. Default closed.
   Preserves the `#history` anchor so section-tabs still jump here.
   ═══════════════════════════════════════════════════════════════════ */
.history-collapse {
  border: 1px solid var(--ink);
  background: var(--paper);
}
.history-collapse__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  transition: background 120ms ease;
}
.history-collapse__summary:hover { background: var(--paper-deep); }
.history-collapse__summary::-webkit-details-marker { display: none; }
.history-collapse__chev {
  display: inline-block;
  color: var(--ink-soft);
  transition: transform 180ms ease;
  width: 10px;
}
.history-collapse[open] .history-collapse__chev { transform: rotate(90deg); }
.history-collapse__label {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.history-collapse__meta {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-left: auto;
  font-feature-settings: "tnum", "zero";
}
.history-collapse__body {
  padding: 24px 20px 28px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .history-collapse__meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DECANT CARD — linked tile that opens the decant seller's PDP.
   ═══════════════════════════════════════════════════════════════════ */
.decants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.decant-card {
  background: var(--paper);
  padding: 16px 18px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 140ms;
}
.decant-card:hover { background: var(--paper-deep); }
.decant-card:hover .fraun { color: var(--oxblood-ink); }
.decant-card:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICE ALERT — slots below the history heatmap. Auto-fills from the
   stored profile record so returning readers don't re-enter contact.
   ═══════════════════════════════════════════════════════════════════ */
.price-alert {
  margin-top: 24px;
  padding: 22px 22px 18px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-alert__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.price-alert__kicker {
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.price-alert__title {
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
}
.price-alert__profile {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  align-self: center;
}
.price-alert__forget {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--oxblood-ink);
  text-decoration: underline;
  cursor: pointer;
}
.price-alert__forget:hover { color: var(--oxblood); }
.price-alert__form {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 680px) {
  .price-alert__form { grid-template-columns: 1fr; }
}
.price-alert__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.price-alert__field--target { position: relative; }
.price-alert__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.price-alert__input {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 120ms, background 120ms;
}
.price-alert__input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.price-alert__input-prefix {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-mute);
  pointer-events: none;
}
.price-alert__input--target { padding-left: 24px; }
.price-alert__submit {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 11px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.price-alert__submit:hover { background: var(--oxblood); border-color: var(--oxblood); }
.price-alert__foot {
  color: var(--ink-soft);
  line-height: 1.6;
  min-height: 1.4em;
}
.price-alert__err { color: var(--oxblood-ink); }
.price-alert__list {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.price-alert__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-alert__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ink-soft);
}
.price-alert__remove {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--oxblood-ink);
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.price-alert__remove:hover { color: var(--oxblood); }
.price-alert__caveat {
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding-top: 10px;
  border-top: 1px dotted var(--rule);
}

/* Nav wishlist count — shows beside "Wishlist" when saved items exist */
.nav-count {
  color: var(--oxblood-ink);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0.02em;
  margin-left: 2px;
}

/* Wishlist (legacy) + collection button pair — small, mono, clear states. */
.wishlist-btn, .collect-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.wishlist-btn:hover, .collect-btn:hover { background: var(--ink); color: var(--paper); }
.wishlist-btn.is-saved, .collect-btn.is-on {
  background: var(--ink);
  color: var(--paper);
}
.collect-btn.is-on.is-want { background: var(--oxblood); border-color: var(--oxblood); }
.wishlist-btn.is-saved:hover, .collect-btn.is-on:hover { background: var(--oxblood); border-color: var(--oxblood); }
.wishlist-btn__icon, .collect-btn__icon { font-size: 13px; line-height: 1; }
.wishlist-btn:focus-visible, .collect-btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

.collection-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Bookmark — icon-only save control. Anchored variant positions top-right of
   the masthead aside; base variant is flow-positioned. */
.bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms, transform 120ms;
}
.bookmark-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-deep);
}
.bookmark-btn:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}
.bookmark-btn.is-saved {
  color: var(--oxblood-ink);
  border-color: var(--oxblood);
  background: color-mix(in oklab, var(--oxblood) 8%, transparent);
}
.bookmark-btn.is-saved:hover { background: color-mix(in oklab, var(--oxblood) 14%, transparent); }
.bookmark-btn svg { display: block; }

.bookmark-btn--anchored {
  position: absolute;
  top: 14px;
  right: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PERFECT FOR — inline single-line variant. Keeps axis → values flowing
   with `·` separators. Chips stay tappable but drop the box chrome to
   reduce visual weight.
   ═══════════════════════════════════════════════════════════════════ */
.perfect-for-inline {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  /* Fit to viewport with container queries — if the row overflows, chip
     font-size clamps down via clamp() below rather than wrapping. */
  min-width: 0;
}
.perfect-for-inline__k {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(8.5px, 0.68vw, 9.5px);
  flex-shrink: 0;
  white-space: nowrap;
}
.perfect-for-inline__v {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.perfect-for-inline__sep {
  color: var(--ink-faint);
  margin: 0 3px;
  flex-shrink: 0;
  font-size: 9px;
}
.perfect-for-inline__comma { display: none; }
.perfect-for-inline__chip {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(8.5px, 0.68vw, 9.5px);
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.perfect-for-inline__chip:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (max-width: 720px) {
  /* Narrow viewports: allow wrap since fitting 12 chips on a phone line
     isn't readable at any font size. Desktop priority stays one line. */
  .perfect-for-inline { flex-wrap: wrap; }
  .perfect-for-inline__v { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME — editorial sections below the search hero. Magazine-layered
   typography + real bottle art + signal board + recommender CTA +
   refusals billboard. §11-compliant: no AI imagery, only real photos
   (or typeset placeholders) and typographic ornaments.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO — full-fold editorial hero with layered ambient background.
   Composition: warm radial gradient wash + paper grain overlay + large
   typographic mark ("ISSUE N° 001 · EST. 2026") as a watermark + three
   bottle-silhouette ornaments in the corners. §11-compliant: every layer
   is CSS gradient or hand-authored SVG, never AI or stock photography.
   ═══════════════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  isolation: isolate;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Warm radial wash — two overlapping radial gradients create a subtle
   sunset-like warmth at the edges without overwhelming the paper base. */
.home-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 12% 82%, color-mix(in oklab, var(--oxblood) 14%, transparent), transparent 65%),
    radial-gradient(ellipse 70% 60% at 88% 18%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 50%, color-mix(in oklab, var(--paper) 92%, var(--ink)), var(--paper));
}
/* Paper grain — tiny SVG noise pattern baked as data URI for texture */
.home-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
/* Typographic watermark — giant Issue N° 001 floats behind the content */
.home-hero__mark {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, Fraunces, serif);
  font-weight: 400;
  color: color-mix(in oklab, var(--ink) 5%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.home-hero__mark-num {
  font-size: clamp(200px, 40vw, 520px);
  letter-spacing: -0.04em;
  font-style: italic;
  font-feature-settings: "tnum", "zero";
}
.home-hero__mark-sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 22%, transparent);
  font-style: normal;
}
/* Bottle silhouette ornaments — scattered in corners as decorative anchors */
.home-hero__orn {
  position: absolute;
  color: var(--ink);
  pointer-events: none;
}
.home-hero__orn--tl { left: 6%;  top: 8%;  width: 140px; }
.home-hero__orn--tr { right: 5%; top: 14%; width: 120px; }
.home-hero__orn--br { right: 8%; bottom: 6%; width: 160px; }
@media (max-width: 720px) {
  .home-hero__orn--tl { width: 90px; top: 6%; left: 4%; }
  .home-hero__orn--tr { display: none; }
  .home-hero__orn--br { width: 100px; bottom: 4%; right: 4%; }
}

.home-hero__content { position: relative; z-index: 1; width: 100%; }
.home-hero__inner { max-width: 920px; margin: 0 auto; }
.home-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 auto 32px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Pulse dot — live indicator animation */
.home-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig-buy);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sig-buy) 50%, transparent);
  animation: home-hero-pulse 2400ms ease-out infinite;
}
@keyframes home-hero-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--sig-buy) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--sig-buy) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--sig-buy) 0%,  transparent); }
}
.home-hero__inner { display: flex; flex-direction: column; align-items: center; }
.home-hero__h1 {
  font-size: clamp(56px, 8.5vw, 128px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  margin: 0;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
.home-hero__sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 22px auto 0;
  max-width: 560px;
  text-align: center;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__dot { animation: none; }
}

/* About strip — "what is this site" editorial explainer */
.home-about {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.home-about__inner { padding: 72px 32px 72px; }
.home-about__head {
  max-width: 880px;
  margin-bottom: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.home-about__kicker {
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.home-about__h {
  font-size: clamp(42px, 5.4vw, 80px);
  letter-spacing: -0.024em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.home-about__sub {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
  max-width: 680px;
  margin: 0;
}
.home-about__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 880px) { .home-about__cols { grid-template-columns: 1fr; } }
.home-about__col {
  padding: 32px 32px 0 0;
  border-top: 2px solid var(--ink);
  margin-right: 24px;
}
.home-about__col:last-child { margin-right: 0; padding-right: 0; }
@media (max-width: 880px) {
  .home-about__col { margin-right: 0; padding: 28px 0 0; }
  .home-about__col + .home-about__col { margin-top: 16px; }
}
.home-about__num {
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--oxblood-ink);
  font-feature-settings: "tnum", "zero";
  margin-bottom: 16px;
  line-height: 1;
}
.home-about__k {
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.home-about__h3 {
  font-size: 24px;
  letter-spacing: -0.014em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.home-about__body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  line-height: 1.62;
  font-size: 14.5px;
  margin: 0;
  max-width: 34ch;
}

/* Savings ledger — live chart showing $ below MSRP across tracked catalog */
.home-savings {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
.home-savings__inner { padding: 72px 32px 72px; }
.home-savings__head {
  max-width: 880px;
  margin-bottom: 40px;
}
.home-savings__kicker {
  color: var(--oxblood-ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.home-savings__h {
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.home-savings__sub {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

.home-savings__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 48px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
@media (max-width: 860px) { .home-savings__stats { grid-template-columns: 1fr; } }
.home-stat {
  padding: 26px 24px 28px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background 140ms;
}
.home-stat:last-child { border-right: 0; }
@media (max-width: 860px) {
  .home-stat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .home-stat:last-child { border-bottom: 0; }
}
.home-stat--link:hover { background: var(--paper-deep); }
.home-stat--accent { background: var(--ink); color: var(--paper); }
.home-stat--accent .home-stat__k { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.home-stat--accent .home-stat__sub { color: color-mix(in oklab, var(--paper) 72%, transparent); }
.home-stat__k {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-stat__v {
  font-family: var(--font-mono);
  font-size: clamp(38px, 4.8vw, 58px);
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 10px;
  font-feature-settings: "tnum", "zero";
}
.home-stat--accent .home-stat__v { color: var(--paper); }
.home-stat__sub {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Horizontal bar chart */
.home-savings__chart {
  border: 1px solid var(--ink);
  background: var(--paper);
}
.home-savings__chart-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 22px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
.home-savings__row {
  display: grid;
  grid-template-columns: 220px 1fr 140px;
  gap: 22px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: center;
  transition: background 140ms;
}
.home-savings__row:last-child { border-bottom: 0; }
.home-savings__row:hover { background: var(--paper-deep); }
.home-savings__row-name { display: flex; flex-direction: column; gap: 4px; }
.home-savings__row-brand {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-savings__row-frag {
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.home-savings__row-bar {
  height: 30px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
  overflow: hidden;
}
.home-savings__row-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--oxblood) 18%, transparent);
  border-right: 1.5px solid var(--oxblood);
  transition: width 320ms ease;
}
.home-savings__row-msrp {
  position: relative;
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: line-through;
  margin-right: auto;
}
.home-savings__row-landed {
  position: relative;
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.home-savings__row-amt {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.home-savings__row-save {
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--sig-buy);
  font-feature-settings: "tnum", "zero";
}
.home-savings__row-pct {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
@media (max-width: 780px) {
  .home-savings__row { grid-template-columns: 1fr 100px; row-gap: 10px; }
  .home-savings__row-name { grid-column: 1 / -1; }
  .home-savings__row-bar { grid-column: 1 / 2; }
  .home-savings__row-amt { grid-column: 2 / 3; grid-row: 2; }
  .home-savings__row-msrp, .home-savings__row-landed { display: none; }
}

.home-savings__foot {
  margin-top: 24px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 720px;
}

/* Featured issue — left editorial block, right big bottle */
.home-featured {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.home-featured__inner {
  padding: 72px 32px 64px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) { .home-featured__inner { grid-template-columns: 1fr; gap: 40px; padding: 52px 32px 48px; } }
.home-featured__kicker {
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.home-featured__brand {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}
.home-featured__name {
  font-size: clamp(52px, 7vw, 112px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0 0 28px;
  color: var(--ink);
}
/* Pullquote — editorial, with a hanging Fraunces opening quote instead of a
   left-stripe. Impeccable bans border-left > 1px as an accent (dashboard tell).
   The oversized `"` in --ink-faint is the traditional magazine treatment. */
.home-featured__quote {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 14px;
  padding-left: 56px;
  position: relative;
  max-width: 640px;
  text-wrap: balance;
}
.home-featured__quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.2em;
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  color: var(--ink-faint);
  font-style: italic;
  font-optical-sizing: auto;
}
.home-featured__sig {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.home-featured__price {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 440px;
}
.home-featured__priceline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.home-featured__priceline-k {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-featured__priceline-v {
  font-size: 38px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-feature-settings: "tnum", "zero";
}
.home-featured__priceline-sub { color: var(--ink-soft); }
.home-featured__cta { padding: 14px 22px; font-size: 12.5px; }
.home-featured__art {
  position: relative;
  background: var(--paper-deep);
  padding: 24px;
  border: 1px solid var(--rule);
}
.home-featured__caption {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 18px;
  text-align: center;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
}

/* Signal board */
.home-board {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0 64px;
}
.home-board__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
  padding: 0 32px;
}
.home-board__meta { color: var(--ink-mute); letter-spacing: 0.02em; }
.home-board__meta a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.home-board__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  margin: 0 32px;
}
@media (max-width: 860px) {
  .home-board__grid { grid-template-columns: 1fr; }
}
.home-board__col {
  border-right: 1px solid var(--rule);
  padding: 22px 22px 24px;
}
.home-board__col:last-child { border-right: 0; }
@media (max-width: 860px) {
  .home-board__col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .home-board__col:last-child { border-bottom: 0; }
}
.home-board__col-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.home-board__col-blurb { color: var(--ink-mute); letter-spacing: 0.02em; }
.home-board__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home-board__empty { color: var(--ink-faint); letter-spacing: 0.02em; padding: 8px 0; }
.home-board__item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.home-board__item:hover { background: var(--paper-deep); border-color: var(--rule); }
.home-board__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-board__item-brand { color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }
.home-board__item-name { font-size: 17px; letter-spacing: -0.012em; line-height: 1.2; color: var(--ink); }
.home-board__item-price { color: var(--ink-soft); font-feature-settings: "tnum", "zero"; }
.home-board__delta--down { color: var(--sig-buy); }
.home-board__delta--up { color: var(--oxblood-ink); }

/* Recommender CTA */
.home-recommender {
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
}
.home-recommender__inner {
  padding: 64px 32px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 780px) { .home-recommender__inner { grid-template-columns: 1fr; gap: 32px; } }
.home-recommender__kicker {
  color: color-mix(in oklab, var(--paper) 60%, transparent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.home-recommender__h {
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin: 0 0 20px;
  color: var(--paper);
  text-wrap: balance;
}
.home-recommender__sub {
  font-family: var(--font-body);
  color: color-mix(in oklab, var(--paper) 72%, transparent);
  font-size: 17px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 0 28px;
}
.home-recommender__cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  padding: 14px 22px;
}
.home-recommender__cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.home-recommender__ornament {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.home-recommender__ring {
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in oklab, var(--paper) 35%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--paper) 60%, transparent);
  transition: border-color 220ms, color 220ms, background 220ms;
}
.home-recommender__ring:nth-child(even) { background: color-mix(in oklab, var(--paper) 6%, transparent); }
.home-recommender__ring span { font-feature-settings: "tnum", "zero"; }

/* Refusals billboard */
.home-refusals {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 72px 0 72px;
}
.home-refusals__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 32px;
  margin-bottom: 40px;
}
.home-refusals__kicker {
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.home-refusals__h {
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 740px;
}
.home-refusals__all {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.home-refusals__grid {
  list-style: none;
  padding: 0;
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
@media (max-width: 960px) { .home-refusals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-refusals__grid { grid-template-columns: 1fr; } }
.home-refusals__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 24px;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 170px;
  transition: background 140ms, color 140ms;
}
.home-refusals__card:hover {
  background: var(--ink);
  color: var(--paper);
}
.home-refusals__card:hover .home-refusals__num { color: var(--gold); }
.home-refusals__card:hover .home-refusals__line { color: color-mix(in oklab, var(--paper) 70%, transparent); }
.home-refusals__num {
  color: var(--oxblood-ink);
  font-size: 16px;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum", "zero";
}
.home-refusals__title {
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: inherit;
}
.home-refusals__line {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.55;
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK CATALOG — curated shelves above the browse structured tiles.
   Each shelf is a question most visitors already have, pre-answered
   with 4 fragrance cards so a reader hits a result without drilling.
   ═══════════════════════════════════════════════════════════════════ */
.quick-catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.quick-shelf {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.quick-shelf__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "meta all" "blurb all";
  gap: 6px 20px;
  align-items: baseline;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--rule);
}
.quick-shelf__meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.quick-shelf__badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 3px 8px;
  line-height: 1;
}
.quick-shelf__title {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.quick-shelf__blurb {
  grid-area: blurb;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0;
}
.quick-shelf__all {
  grid-area: all;
  align-self: center;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 120ms;
}
.quick-shelf__all:hover { border-color: var(--ink); }

.quick-shelf__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 880px) { .quick-shelf__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .quick-shelf__list { grid-template-columns: 1fr; } }
.quick-shelf__item { border-right: 1px solid var(--rule); }
.quick-shelf__item:last-child { border-right: 0; }
@media (max-width: 880px) {
  .quick-shelf__item:nth-child(2n) { border-right: 0; }
  .quick-shelf__item:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .quick-shelf__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .quick-shelf__item:last-child { border-bottom: 0; }
}
.quick-shelf__card {
  display: block;
  padding: 18px 18px 20px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 120ms, transform 160ms;
}
.quick-shelf__card:hover {
  background: var(--paper-deep);
}
.quick-shelf__card:hover .quick-shelf__art { transform: translateY(-2px); }
.quick-shelf__rank {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  font-feature-settings: "tnum", "zero";
}
.quick-shelf__art {
  background: var(--paper-deep);
  margin-bottom: 14px;
  transition: transform 160ms;
}
.quick-shelf__brand {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.quick-shelf__name {
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.quick-shelf__price {
  color: var(--ink-soft);
  font-feature-settings: "tnum", "zero";
}
.quick-shelf__score { color: var(--gold-ink, var(--gold)); }

/* ═══════════════════════════════════════════════════════════════════
   RECOMMENDER — quiz progress, options, results, runners.
   ═══════════════════════════════════════════════════════════════════ */
.quiz-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.quiz-progress__step {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 14px 12px;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: background 120ms, color 120ms;
  color: var(--ink-faint);
}
.quiz-progress__step:last-child { border-right: 0; }
.quiz-progress__step.is-done { color: var(--ink-mute); background: var(--paper-deep); }
.quiz-progress__step.is-active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--oxblood);
}
.quiz-progress__step:hover { color: var(--ink); background: var(--paper-deep); }
.quiz-progress__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum", "zero";
}
.quiz-progress__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .quiz-progress { grid-template-columns: repeat(3, 1fr); }
  .quiz-progress__step:nth-child(3n) { border-right: 0; }
}

/* ─── Quiz pane transitions ─────────────────────────────────────────
   `is-entering` plays on every step advance (React remounts via key={q.id}).
   `is-leaving` plays briefly before the remount to fade the old pane out.
   Keep total enter distance small — motion should feel like a page turn,
   not a slide transition. Respects prefers-reduced-motion. */
.quiz-pane {
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}
.quiz-pane.is-entering {
  animation: quizPaneIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.quiz-pane.is-leaving {
  animation: quizPaneOut 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes quizPaneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes quizPaneOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-pane.is-entering,
  .quiz-pane.is-leaving,
  .quiz-option { animation: none !important; }
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: 4px;
  /* No parent background fill — empty grid cells (when the last row doesn't
     fully populate) stay transparent instead of showing a grey block. Borders
     ride on the populated cells themselves so only actual options carry rules. */
}
.quiz-option {
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 24px;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background 220ms ease, color 220ms ease, transform 160ms ease, border-color 220ms ease;
  font: inherit;
  color: var(--ink);
  /* Stagger-in — inline animationDelay set by JSX per option index. */
  animation: quizOptionIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  opacity: 1;
}
@keyframes quizOptionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-option:hover {
  background: var(--paper-deep);
  transform: translateY(-1px);
}
.quiz-option.is-active {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px color-mix(in oklab, var(--ink) 80%, transparent);
}
.quiz-option.is-active .quiz-option__blurb { color: color-mix(in oklab, var(--paper) 72%, transparent); }
.quiz-option__marker {
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
.quiz-option.is-active .quiz-option__marker { color: var(--gold); }
.quiz-option__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.quiz-option__label {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.quiz-option__blurb {
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  line-height: 1.55;
}

.quiz-reset {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  transition: background 120ms, color 120ms;
}
.quiz-reset:hover { background: var(--ink); color: var(--paper); }

.answers-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.answers-summary__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper);
}
.answers-summary__k {
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.answers-summary__v { color: var(--ink); }

.recommend-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 960px) { .recommend-results { grid-template-columns: 1fr; } }

.result-card {
  background: var(--paper);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  /* Cards share a row, so bottom-align the CTA across uneven content lengths
     (different reason counts, different title lengths). Inner grid does the
     vertical rhythm; `min-height: 100%` pulls shorter cards to match. */
}
.result-card__rank {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--oxblood-ink);
  font-feature-settings: "tnum", "zero";
}
.result-card__rank-num {
  font-size: 38px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.result-card__rank-sub {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.result-card__art {
  background: var(--paper-deep);
  display: block;
  margin: 6px 0 4px;
}
.result-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.result-card__title {
  font-size: 26px;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
.result-card__title:hover { border-bottom-color: var(--ink); }
.result-card__score { margin-top: 6px; }
.result-card__bar {
  height: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  position: relative;
}
.result-card__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--oxblood);
  transition: width 320ms ease;
}
.result-card__reasons {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.result-card__reason-tick {
  color: var(--sig-buy);
  font-weight: 600;
  margin-right: 6px;
}
.result-card__cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  gap: 12px;
  flex-wrap: wrap;
}

.recommend-runners {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.runner-row {
  display: grid;
  grid-template-columns: 64px 1.5fr 1.5fr 80px;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  align-items: center;
  transition: background 120ms;
}
.runner-row:last-child { border-bottom: 0; }
.runner-row:hover { background: var(--paper-deep); }
.runner-row__pct {
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--oxblood-ink);
  font-feature-settings: "tnum", "zero";
}
.runner-row__name .fraun { font-size: 17px; letter-spacing: -0.01em; }
.runner-row__why { color: var(--ink-mute); line-height: 1.5; }
.runner-row__price {
  text-align: right;
  font-size: 14px;
  color: var(--ink);
  font-feature-settings: "tnum", "zero";
}
@media (max-width: 720px) {
  .runner-row { grid-template-columns: 50px 1fr; row-gap: 8px; }
  .runner-row__why, .runner-row__price { grid-column: 2; }
}

/* Scent story — poetic paragraph above the notes pyramid. Editorial,
   signed, §7 firewall. Compact padding, minimal kicker. */
.scent-story {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0 16px;
  margin-bottom: 24px;
}
.perfect-for-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.perfect-for-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }
@media (max-width: 640px) {
  .scent-story { padding: 14px 0 12px; margin-bottom: 18px; }
  #profile { padding: 20px 20px 16px !important; }
  .notes-pyramid { gap: 16px; }
}
.scent-story * { }
.scent-story__kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.scent-story__body {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0;
}
.scent-story__sig { margin-top: 10px; }
.scent-story__sig {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 18px;
}
.scent-story__sig strong { color: var(--ink); font-weight: 500; }

/* Collection shelf — grid of bottle tiles for Account page.
   Visually cleaner than Fragrantica's dark-shelf pattern: paper ground,
   generous whitespace, hover reveals brand/name caption. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.shelf__tile {
  background: var(--paper);
  padding: 18px 16px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 140ms;
}
.shelf__tile:hover { background: var(--paper-deep); text-decoration: none; }
.shelf__tile figure { margin: 0; width: 100%; aspect-ratio: 3/4; }
.shelf__brand {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.shelf__name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.shelf__landed {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: auto;
}

/* ────── Citation marker — refusals as runtime annotations ──────
   Every load-bearing datapoint on the site can cite the refusal that
   governs it: §3 next to MSRP, §8 next to staleness claims, §9 beside
   shipping, §11 under the bottle. The refusals stop being policy and
   start being the algorithm. */
.cite {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 9.5px;
  line-height: 0;
  vertical-align: super;
  color: var(--ink-faint);
  margin-left: 3px;
  letter-spacing: 0;
}
.cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: color 120ms, border-color 120ms;
}
.cite a:hover { color: var(--ink-mute); }
.cite--fail { color: var(--oxblood-ink); }
.cite--fail a:hover { color: var(--oxblood); }

/* ────── The Invariant Heartbeat — the site's pulse ──────
   The Aventus runtime check, lifted from console.log into a visible strip.
   Ticks every 10s. If it ever fails, the whole site goes grayscale and the
   strip flips to oxblood FAIL. Sacred alarm. See verifyAventus() in App. */
.invariant {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 11.5px;
  letter-spacing: 0.03em;
  padding: 10px 0;
  transition: background 300ms, color 300ms;
}
.invariant__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.invariant__label {
  color: color-mix(in oklab, var(--paper) 55%, transparent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-right: 8px;
}
.invariant__math  { font-variant-numeric: tabular-nums lining-nums slashed-zero; }
.invariant__equal { color: color-mix(in oklab, var(--paper) 55%, transparent); margin: 0 6px; }
.invariant__total { color: var(--paper); font-weight: 500; }
.invariant__meta  { color: color-mix(in oklab, var(--paper) 65%, transparent); font-size: 10.5px; }
.invariant__pass  { color: var(--gold); letter-spacing: 0.14em; font-weight: 500; }
.invariant__fail  { color: var(--oxblood); letter-spacing: 0.14em; font-weight: 500; }
.invariant a { color: inherit; border-bottom: 1px dotted color-mix(in oklab, var(--paper) 35%, transparent); padding-bottom: 1px; }
.invariant a:hover { border-bottom-color: var(--paper); }
.invariant .cite { color: color-mix(in oklab, var(--paper) 55%, transparent); }

/* When the invariant fails, the whole document fades to grayscale. */
body.invariant-fail { filter: grayscale(100%); transition: filter 1200ms; }
body.invariant-fail .invariant { background: var(--oxblood); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .invariant { transition: none; }
  body.invariant-fail { transition: none; }
}

/* ────── Micro obsessions ────── */
.mono, .stat, input[type="search"] {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

::selection {
  background: var(--oxblood);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ────── AAA accessibility — honor prefers-contrast: more ──────
   Deepens ink, lightens paper, darkens muted greys to push contrast past
   7:1. Rules stay editorial — no system inversions. */
@media (prefers-contrast: more) {
  :root {
    --ink:         oklch(0.14 0.012 60);
    --ink-soft:    oklch(0.28 0.010 60);
    --ink-mute:    oklch(0.40 0.008 60);
    --ink-faint:   oklch(0.58 0.006 60);
    --rule:        oklch(0.74 0.006 60);
    --oxblood:     oklch(0.32 0.15 22);
    --oxblood-ink: oklch(0.26 0.15 22);
  }
  .cite a { border-bottom-style: solid; }
  :focus-visible { outline-width: 3px; }
}

/* Dark-mode auto-trigger removed per editor decision — the paper palette is
   the product's canonical look. Readers who explicitly want dark can still
   force it via html[data-theme="dark"] below. */

/* Manual override — [data-theme="dark"] on <html> applies the dark palette
   regardless of system setting. Opt-in only; never auto. */
html[data-theme="dark"] {
  --paper:       oklch(0.17 0.010 60);
  --paper-deep:  oklch(0.21 0.010 60);
  --ink:         oklch(0.93 0.008 85);
  --ink-soft:    oklch(0.76 0.008 85);
  --ink-mute:    oklch(0.56 0.008 60);
  --ink-faint:   oklch(0.42 0.006 60);
  --rule:        oklch(0.30 0.006 60);
  --oxblood:     oklch(0.64 0.15 32);
  --oxblood-ink: oklch(0.74 0.15 32);
  --gold:        oklch(0.82 0.12 82);
  --gold-ink:    oklch(0.90 0.10 82);
  --sig-buy:     oklch(0.68 0.11 155);
  --sig-hold:    oklch(0.76 0.10 85);
  --sig-wait:    oklch(0.66 0.14 32);
}
html[data-theme="dark"] .invariant { background: oklch(0.10 0.008 60); border-top-color: oklch(0.08 0.008 60); }
html[data-theme="dark"] .chip-ox { border-color: var(--oxblood) !important; color: var(--oxblood-ink) !important; }
html[data-theme="dark"] .prov { text-decoration-color: var(--ink-faint); }

/* Manual override LIGHT — explicit lock if user wants light on a dark system.
   Restores every token so a reader on a dark-OS can force the editorial palette. */
html[data-theme="light"] {
  color-scheme: light;
  --paper:       oklch(0.985 0.005 85);
  --paper-deep:  oklch(0.965 0.007 85);
  --ink:         oklch(0.22 0.012 60);
  --ink-soft:    oklch(0.40 0.010 60);
  --ink-mute:    oklch(0.58 0.008 60);
  --ink-faint:   oklch(0.76 0.006 60);
  --rule:        oklch(0.88 0.006 60);
  --oxblood:     oklch(0.42 0.13 22);
  --oxblood-ink: oklch(0.34 0.13 22);
  --gold:        oklch(0.76 0.12 82);
  --gold-ink:    oklch(0.48 0.10 82);
  --sig-buy:     oklch(0.48 0.10 155);
  --sig-hold:    oklch(0.55 0.09 85);
  --sig-wait:    oklch(0.42 0.13 22);
}
html[data-theme="light"] .invariant { background: var(--ink); border-top-color: var(--ink); }

/* ────── Provenance — every price has a paper trail ──────
   Wraps a price value in a hoverable/focusable span that reveals the full
   audit card on interaction. Dotted underline signals the affordance; card
   renders ink-on-paper with a small arrow. Keyboard-reachable via tabIndex. */
.prov {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 120ms;
}
.prov:hover, .prov:focus-within { text-decoration-color: var(--ink-mute); }
.prov__card {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px 12px;
  min-width: 300px;
  max-width: 360px;
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 16px 40px color-mix(in oklab, var(--ink) 30%, transparent);
}
.prov:hover .prov__card,
.prov:focus-within .prov__card,
.prov:focus .prov__card {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.prov__card::before {
  content: "";
  position: absolute;
  top: -7px; left: 18px;
  border: 7px solid transparent;
  border-bottom-color: var(--ink);
  border-top: 0;
}
.prov__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
  padding: 5px 0;
}
.prov__row:first-child { border-top: 0; padding-top: 0; }
.prov__row > span:first-child {
  color: color-mix(in oklab, var(--paper) 55%, transparent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9.5px;
  white-space: nowrap;
}
.prov__row > span:last-child {
  color: var(--paper);
  text-align: right;
  word-break: break-all;
}
.prov .cite { color: color-mix(in oklab, var(--paper) 70%, transparent); }
.prov .cite a {
  color: inherit;
  border-bottom-color: color-mix(in oklab, var(--paper) 40%, transparent);
}
.prov .cite a:hover { color: var(--paper); }

/* Anchor from right edge for prices near the right side of their container */
.prov--right .prov__card { left: auto; right: 0; }
.prov--right .prov__card::before { left: auto; right: 18px; }

@media (max-width: 640px) {
  .prov__card { min-width: 260px; max-width: 90vw; font-size: 10.5px; }
}
/* Tablet — .prov__card's 300px min-width overflows when the .prov anchor
   is near the right edge of the layout. Cap it below 960. */
@media (max-width: 960px) {
  .prov__card { min-width: 0; max-width: min(360px, calc(100vw - 32px)); }
  .prov { position: static; }
  .prov__card { left: 20px; right: 20px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .prov__card { transition: opacity 0ms; }
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ────── Mobile ≤640px: stack heavy layouts ────── */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Any inline grid with 2+ columns inside .container stacks.
     We mark layouts that MUST stay horizontal with .keep-horizontal. */
  .container > section > div[style*="grid-template-columns"]:not(.keep-horizontal),
  .container > div[style*="grid-template-columns"]:not(.keep-horizontal),
  section > .container > div[style*="grid-template-columns"]:not(.keep-horizontal) {
    /* purely informational; real stacking handled by per-component classes below */
  }

  /* Stack: masthead (name + landed), hero ledger, reference half, signal panel, bottle+meta, drops rows */
  .stack-mobile { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Detail masthead @640: bottle shrinks, content stacks */
  .detail-mast { grid-template-columns: 1fr !important; }
  .detail-mast > div:first-child { max-width: 180px; }

  /* Ledger rows: collapse to 2-col stacked layout */
  .ledger-row { grid-template-columns: 1fr auto !important; gap: 12px !important; row-gap: 10px !important; }
  .ledger-row > * { grid-column: auto !important; }

  /* Big type can't clamp down further w/o crushing — allow fallback */
  .display-xl  { font-size: clamp(40px, 10vw, 72px); }
  .display-xxl { font-size: clamp(56px, 14vw, 112px); }

  /* Nav stacks below brand; search full-width */
  .nav-row { flex-wrap: wrap; gap: 12px; }
  .nav-row > nav { order: 3; flex-basis: 100%; }
  .nav-row > form.nav-search,
  .nav-row > .nav-search-spacer { flex: 1; min-width: 0 !important; }
  .nav-search__kbd { display: none; }
  .nav ul { gap: 18px; font-size: 11px; }

  /* Pitch strip: stack */
  .pitch-strip > .container > div { flex-direction: column; align-items: flex-start !important; }

  /* Strike/msrp meta columns hide on mobile — landed + signal are the answer */
  .hide-mobile { display: none !important; }
}

/* ────── Browse hub tiles — 5 big doors, one per axis.
   Clean, clickable, no cognitive overload. Hover fills with ink; title
   stays legible via color inversion. One clear action per tile. */
.browse-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.browse-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 32px 32px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 260px;
  position: relative;
  transition: background 160ms, color 160ms;
}
.browse-tile:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.browse-tile__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.8;
}
.browse-tile:hover .browse-tile__count { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.browse-tile__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.browse-tile__blurb {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 32ch;
  flex: 1;
}
.browse-tile:hover .browse-tile__blurb { color: color-mix(in oklab, var(--paper) 75%, transparent); }
.browse-tile__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
}
.browse-tile:hover .browse-tile__cta { color: var(--paper); }
@media (max-width: 640px) {
  .browse-tiles { grid-template-columns: 1fr; }
  .browse-tile { min-height: 180px; padding: 26px 22px; }
  .browse-tile__title { font-size: clamp(28px, 8vw, 40px); }
  .browse-tile__blurb { font-size: 15px; }
}

/* ────── Section tabs (detail page) — sticky wayfinding.
   Sits below the masthead, sticks to viewport top on scroll. Active state
   reflects the current hash anchor. Kept mono + uppercase for data-bar
   feel, not nav-bar. */
.section-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 12px 0;
  margin: 0;
}
.section-tabs__row {
  display: flex;
  gap: 28px;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-tabs__group { display: inline-flex; gap: 28px; flex-wrap: wrap; }
.section-tabs a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 0 3px;
  border-bottom: 1px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.section-tabs a:hover { color: var(--ink); }
.section-tabs a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.section-tabs__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
@media (max-width: 640px) {
  /* Hide section tabs entirely on mobile — page is short enough to scroll,
     tabs just steal vertical space. */
  .section-tabs { display: none; }
}
@media print {
  .section-tabs { display: none !important; }
}

/* ────── PerfBudget — visible evidence of restraint ──────
   Thin mono strip above the invariant heartbeat. The site auditing itself. */
.perf-budget {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 0 8px;
}
.perf-budget__row {
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.perf-budget__label {
  color: var(--ink-soft);
  margin-right: auto;
  letter-spacing: 0.14em;
}
.perf-budget__unit {
  color: var(--ink-faint);
  margin-left: 4px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.perf-budget__zero { color: var(--sig-buy); }
@media (max-width: 640px) {
  .perf-budget__row { gap: 12px; }
  .perf-budget__row > span { font-size: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════
   PRINT — every page becomes a signed editorial bulletin.
   Remove nav, heartbeat, buttons, tooltips. Keep type, data, refusals-in-
   force footer, URL, signature. Laser-printer friendly, ink-conservative.
   ═════════════════════════════════════════════════════════════════════ */
.print-only { display: none; }

@media print {
  @page { size: auto; margin: 12mm 14mm; }

  html, body {
    background: white !important;
    color: black !important;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* Kill screen-only chrome */
  header.nav,
  .pitch-strip,
  .invariant,
  .tweaks,
  .nav-search,
  .nav-search__results,
  .shop-btn,
  footer.footer,
  .prov__card,
  .mode-toggle,
  figure[role="img"] ~ *:empty,
  button,
  .perf-budget {
    display: none !important;
  }

  /* Remove interactivity decoration that only makes sense on screen */
  .prov { text-decoration: none !important; cursor: auto !important; }
  :focus-visible { outline: none !important; }
  a { color: black !important; text-decoration: none !important; border-bottom: none !important; }

  /* Show the print-only blocks */
  .print-only { display: block; }

  /* Print masthead */
  .print-header {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
    border-bottom: 1px solid #222;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
    display: flex;
    justify-content: space-between;
  }

  /* Print footer — refusals in force, URL, signature */
  .print-footer {
    border-top: 1px solid #222;
    margin-top: 24pt;
    padding-top: 10pt;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 7.5pt;
    line-height: 1.7;
    color: #555;
    letter-spacing: 0.02em;
    page-break-inside: avoid;
  }
  .print-refusals strong { color: black; }
  .print-url { margin-top: 6pt; word-break: break-all; }
  .print-sig  { margin-top: 6pt; color: black; font-style: normal; }

  /* Force single column on every grid */
  .stack-mobile,
  [style*="grid-template-columns"],
  .footer-grid,
  .detail-mast {
    grid-template-columns: 1fr !important;
    gap: 14pt !important;
  }

  /* Page-break discipline */
  section, article, li, .ledger-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3, h4, .kicker {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Display sizes compress for paper */
  .display-xxl { font-size: 36pt !important; line-height: 0.95; }
  .display-xl  { font-size: 28pt !important; line-height: 1.0; }
  .display-l   { font-size: 20pt !important; }
  .display-m   { font-size: 15pt !important; }
  .display-s   { font-size: 12pt !important; }

  /* Container flat */
  .container {
    padding: 0 !important;
    max-width: none !important;
  }

  /* Retailer ledger + audit table — render as text, no borders except rules */
  table { page-break-inside: auto; }
  tr    { page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Hide the Bottle figurine from print — paper doesn't need it */
  figure[role="img"] {
    display: none !important;
  }

  /* Rules */
  .hairline, .hairline-k { border-top-color: #222 !important; }

  /* Chip → mono uppercase text, no border */
  .chip { border: 0 !important; background: none !important; color: black !important; padding: 0 !important; text-decoration: none; }
  .chip-ox { color: #5c1414 !important; }

  /* Signal chip → readable mono marker */
  .signal { text-transform: uppercase; color: black !important; }
  .signal::before { display: none; }

  /* Kill hover-only decorations */
  .tweaks { display: none !important; }

  /* Audit table cells: tighter padding */
  td, th { padding: 4pt 6pt !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   LATEST DEALS (/drops) — weekly price-drop ledger.
   Editorial, signed, anti-FOMO. Four sections:
     • Masthead with live tally (fell / flat / rose)
     • Four-stat band (reuses .home-stat cards)
     • Featured drop hero
     • Controls (sort + filter pills)
     • Ledger table
     • "What's not a drop" refusals panel
     • Alert CTA
     • Method foot
   ═════════════════════════════════════════════════════════════════════ */

/* Masthead */
.drops-mast { padding: 56px 32px 40px; }
.drops-mast__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: end;
}
@media (max-width: 880px) {
  .drops-mast__grid { grid-template-columns: 1fr; gap: 32px; }
}
.drops-mast__h {
  margin: 0;
  max-width: 14ch;
}
.drops-mast__sig {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  margin-top: 22px;
  text-transform: uppercase;
}
.drops-mast__lead {
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 44ch;
  text-wrap: pretty;
}
.drops-mast__tally {
  display: flex;
  gap: 48px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  font-feature-settings: "tnum", "zero";
}
@media (max-width: 440px) { .drops-mast__tally { gap: 24px; } }
.drops-mast__tally-cell { display: flex; flex-direction: column; gap: 2px; }
.drops-mast__tally-n {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.drops-mast__tally-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Four-stat band — uses .home-stat classes; this grid wraps them */
.drops-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  background: var(--paper);
}
.drops-stats .home-stat { border-right: 1px solid var(--rule); }
.drops-stats .home-stat:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .drops-stats { grid-template-columns: repeat(2, 1fr); }
  .drops-stats .home-stat { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .drops-stats .home-stat:nth-child(2n) { border-right: 0; }
  .drops-stats .home-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .drops-stats { grid-template-columns: 1fr; }
  .drops-stats .home-stat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .drops-stats .home-stat:last-child { border-bottom: 0; }
}

/* Featured drop — hero card above the ledger */
.drops-featured {
  padding: 48px 32px 56px;
}
.drops-featured__card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: stretch;
  padding: 32px;
  border: 1px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background 160ms;
}
.drops-featured__card:hover { background: var(--paper-deep); text-decoration: none; }
@media (max-width: 880px) {
  .drops-featured__card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
.drops-featured__bottle {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drops-featured__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drops-featured__kicker {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drops-featured__h {
  font-size: clamp(32px, 4.2vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.drops-featured__meta {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.drops-featured__nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}
@media (max-width: 560px) { .drops-featured__nums { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }
.drops-featured__nums > div { padding-right: 12px; }
.drops-featured__num-k {
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.drops-featured__num-s {
  font-size: 20px;
  color: var(--ink-mute);
  font-feature-settings: "tnum", "zero";
}
.drops-featured__num-b {
  font-size: 26px;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-feature-settings: "tnum", "zero";
}
.drops-featured__num-d {
  font-size: 22px;
  letter-spacing: -0.012em;
  font-feature-settings: "tnum", "zero";
}
.drops-featured__num-m {
  font-size: 20px;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-feature-settings: "tnum", "zero";
  display: inline-flex;
  align-items: baseline;
}
.drops-featured__spark { }
.drops-featured__spark-meta {
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 8px;
}
.drops-featured__cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.drops-featured__cta-arr {
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* Controls — search + sort + filter pills */
.drops-controls {
  padding: 28px 32px 18px;
  border-top: 1px solid var(--ink);
  background: var(--paper-deep);
}
.drops-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 16px;
  margin-bottom: 22px;
}
.drops-search__icon { color: var(--ink-mute); flex-shrink: 0; }
.drops-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.008em;
  color: var(--ink);
  padding: 2px 0;
  min-width: 0;
}
.drops-search__input::placeholder {
  color: var(--ink-mute);
  font-style: italic;
}
.drops-search__clear {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.drops-search__clear:hover { color: var(--ink); }

.drops-controls__row {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 720px) { .drops-controls__row { gap: 24px; } }
.drops-controls__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.drops-controls__tally {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.drops-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.drops-pill {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.drops-pill:last-child { border-right: 0; }
.drops-pill:hover { color: var(--ink); background: var(--paper-deep); }
.drops-pill.is-on { background: var(--ink); color: var(--paper); }
.drops-pill.is-on:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 560px) {
  .drops-pills { flex-direction: column; }
  .drops-pill { border-right: 0; border-bottom: 1px solid var(--rule); text-align: left; }
  .drops-pill:last-child { border-bottom: 0; }
}

/* Ledger — the main ranked table.
   Eight-column grid: rank · bottle · name · sparkline · msrp · landed · Δ 7d · actions.
   Bottle gets its own 66px cell so it reads as a real column, not a prefix. */
.drops-ledger {
  padding: 0 32px 64px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--ink);
}
.drops-ledger__head {
  display: grid;
  grid-template-columns: 40px 66px minmax(0, 2fr) 150px 92px 108px 118px 134px;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-items: baseline;
}
.drops-ledger__body { border-bottom: 1px solid var(--ink); }

.drops-row {
  display: grid;
  grid-template-columns: 40px 66px minmax(0, 2fr) 150px 92px 108px 118px 134px;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: background 140ms;
}
.drops-row:last-child { border-bottom: 0; }
.drops-row:hover { background: var(--paper); }
.drops-row__rank { color: var(--ink-mute); }
.drops-row__bottle {
  display: block;
  width: 66px;
  height: 86px;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 140ms, background 140ms;
}
.drops-row__bottle:hover { border-color: var(--ink); background: var(--paper-deep); }
.drops-row__name {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.drops-row__name:hover { text-decoration: none; }
.drops-row__name:hover .drops-row__frag { color: var(--oxblood-ink); }
.drops-row__frag {
  font-size: 19px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  overflow-wrap: break-word;
  transition: color 140ms;
}
.drops-row__meta {
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.drops-row__atlow {
  font-size: 9.5px;
  padding: 2px 6px 3px;
}
.drops-row__spark { }
.drops-row__msrp { text-align: right; color: var(--ink-mute); font-feature-settings: "tnum", "zero"; }
.drops-row__landed { text-align: right; font-size: 20px; letter-spacing: -0.012em; font-feature-settings: "tnum", "zero"; }
.drops-row__delta { text-align: right; font-feature-settings: "tnum", "zero"; }

/* Per-row action stack — primary "Shop now" (filled, to retailer PDP) and
   a quieter outline "See fragrance" link below (to the internal detail page).
   Stacked so they read as a single decision block. */
.drops-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.drops-row__shop,
.drops-row__see {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  transition: background 140ms, color 140ms, border-color 140ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.drops-row__shop {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.drops-row__shop:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
  text-decoration: none;
}
.drops-row__see {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.drops-row__see:hover {
  background: var(--paper-deep);
  text-decoration: none;
}

/* Drops — tier markers (placed after base .drops-row__shop so source-order
   tiebreak wins). Visual vocabulary:
     pdp    → solid dark fill (base style). "Shop now" lands on product page.
     search → dashed border, paper fill. "Find at X" lands on search results.
     none   → muted italic, not clickable. "Not listed" — no URL exists. */
.drops-row__shop--search {
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.drops-row__shop--search:hover {
  background: var(--ink);
  color: var(--paper);
}
.drops-row__shop--none {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--rule);
  cursor: not-allowed;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
}
.drops-row__shop--none:hover {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--rule);
}

@media (max-width: 1200px) {
  .drops-ledger__head { display: none; }
  .drops-row {
    grid-template-columns: 36px 60px 1fr 130px;
    row-gap: 10px;
    column-gap: 14px;
    padding: 20px 0;
  }
  .drops-row__bottle { width: 60px; height: 76px; }
  .drops-row__spark    { grid-column: 3 / 5; grid-row: 2; }
  .drops-row__msrp     { grid-column: 1 / 3; grid-row: 3; text-align: left; }
  .drops-row__landed   { grid-column: 3 / 4; grid-row: 3; text-align: left; }
  .drops-row__delta    { grid-column: 4 / 5; grid-row: 3; }
  .drops-row__actions  { grid-column: 1 / -1; grid-row: 4; flex-direction: row; }
  .drops-row__shop, .drops-row__see { flex: 1; }
}

.drops-empty {
  padding: 48px 32px;
  border: 1px dashed var(--rule);
  text-align: center;
  background: var(--paper);
}

/* "What's NOT a drop" — editorial refusals panel */
.drops-not {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.drops-not__inner { padding: 72px 32px 72px; }
.drops-not__head { max-width: 820px; margin-bottom: 40px; }
.drops-not .kicker { color: var(--gold); }
.drops-not__h {
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 16px 0 20px;
  color: var(--paper);
  text-wrap: balance;
}
.drops-not__sub {
  font-family: var(--font-body);
  color: color-mix(in oklab, var(--paper) 78%, transparent);
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}
.drops-not__breaches {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  margin-left: 4px;
}
.drops-not__breaches:hover { color: var(--gold); }
.drops-not__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
}
.drops-not__card {
  padding: 26px 24px 28px;
  border-right: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.drops-not__card:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .drops-not__grid { grid-template-columns: repeat(2, 1fr); }
  .drops-not__card { border-right: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); }
  .drops-not__card:nth-child(2n) { border-right: 0; }
  .drops-not__card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .drops-not__grid { grid-template-columns: 1fr; }
  .drops-not__card { border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); }
  .drops-not__card:last-child { border-bottom: 0; }
}
.drops-not__num {
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
}
.drops-not__k {
  font-size: 20px;
  letter-spacing: -0.012em;
  color: var(--paper);
  line-height: 1.2;
}
.drops-not__body {
  font-family: var(--font-body);
  color: color-mix(in oklab, var(--paper) 68%, transparent);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.drops-not__link {
  color: var(--paper);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 30%, transparent);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color 140ms;
  margin-top: 4px;
}
.drops-not__link:hover { border-bottom-color: var(--paper); text-decoration: none; }

/* Alert CTA — local-only, no email gate */
.drops-alert { background: var(--paper); border-bottom: 1px solid var(--rule); }
.drops-alert__inner {
  padding: 64px 32px 64px;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .drops-alert__inner { grid-template-columns: 1fr; gap: 32px; padding: 52px 32px 48px; }
}
.drops-alert__h {
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 12px 0 18px;
  text-wrap: balance;
}
.drops-alert__sub {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 24px;
}
.drops-alert__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.drops-alert__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 140ms, color 140ms;
}
.drops-alert__cta:hover { background: var(--paper-deep); text-decoration: none; }
.drops-alert__cta--primary { background: var(--ink); color: var(--paper); }
.drops-alert__cta--primary:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }

.drops-alert__aside {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 22px 24px 24px;
}
.drops-alert__aside-h {
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.drops-alert__aside-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.drops-alert__aside-ul li { border-top: 1px solid var(--rule); padding-top: 10px; }
.drops-alert__aside-ul li:first-child { border-top: 0; padding-top: 0; }
.drops-alert__aside-ul strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: "tnum", "zero";
  margin-right: 8px;
}

/* Foot — method + signed + links to refusals/breaches */
.drops-foot { padding: 56px 32px 64px; }
.drops-foot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 780px) {
  .drops-foot__grid { grid-template-columns: 1fr; gap: 32px; }
}
.drops-foot__body {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 12px 0 0;
  max-width: 56ch;
}
.drops-foot__link {
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.drops-foot__link:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); text-decoration: none; }

/* ═════════════════════════════════════════════════════════════════════
   POLISH PASS — 2026-04-21 (impeccable + taste skill audits)
   Self-contained block; revert by deleting from here to EOF.
   ═════════════════════════════════════════════════════════════════════ */

/* Tactile feedback — every interactive element physically dips on :active.
   Transform-only (hardware-accelerated, respects reduced-motion guard above). */
.shop-btn:active,
.drops-pill:active,
.drops-row__shop:active,
.drops-row__see:active,
.drops-search__clear:active,
.nav ul a:active,
button:not(:disabled):active { transform: translateY(1px); }
.shop-btn, .drops-pill, .drops-row__shop, .drops-row__see, .nav ul a {
  transition: transform 80ms var(--ease-out-quart, ease-out),
              background 140ms ease,
              color 140ms ease,
              border-color 140ms ease;
}

/* Weight-500 on the landed price — the action-relevant number. MSRP + delta
   stay weight 400 so the eye lands on landed first. Manrope 500 is loaded. */
.drops-row__landed > :first-child {
  font-weight: 500;
}

/* Motion — one orchestrated entrance. Fade-up stagger for first-paint content.
   Transform + opacity only (no layout properties animated). */
@keyframes fmf-fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fmf-reveal { animation: fmf-fade-up 600ms cubic-bezier(0.25, 1, 0.5, 1) both; }
.fmf-reveal-stagger > * {
  animation: fmf-fade-up 600ms cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .fmf-reveal,
  .fmf-reveal-stagger > * { animation: none; }
}

/* Auto-reveal the drops-ledger body rows once on mount — uses :nth-child()
   to derive --i so it works without touching JSX. */
.drops-ledger__body { /* reveal its direct row children in sequence */ }
.drops-ledger__body > .drops-row {
  animation: fmf-fade-up 600ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
.drops-ledger__body > .drops-row:nth-child(1) { animation-delay: 0ms; }
.drops-ledger__body > .drops-row:nth-child(2) { animation-delay: 50ms; }
.drops-ledger__body > .drops-row:nth-child(3) { animation-delay: 100ms; }
.drops-ledger__body > .drops-row:nth-child(4) { animation-delay: 150ms; }
.drops-ledger__body > .drops-row:nth-child(5) { animation-delay: 200ms; }
.drops-ledger__body > .drops-row:nth-child(6) { animation-delay: 250ms; }
.drops-ledger__body > .drops-row:nth-child(n+7) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .drops-ledger__body > .drops-row { animation: none; }
}

/* Accessibility — WCAG AAA tap targets ≥ 44px. Small pills on mobile were
   ~32px tall. Pad up without touching desktop density. */
@media (max-width: 640px) {
  .drops-pill {
    padding: 14px 14px;       /* ~44px tall at font-size: 11px */
    min-height: 44px;
  }
  .shop-btn,
  .shop-btn--compact,
  .drops-row__shop,
  .drops-row__see { min-height: 44px; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE GAUNTLET (2026-04-21) — every page must render without
   horizontal overflow at 320px, 375px, 768px. Every interactive element
   needs a ≥ 44px touch target. Every font-size ≥ 11.5px in body contexts.
   ═════════════════════════════════════════════════════════════════════ */

/* Nav — stacked on narrow, flex-wrap on tablet. Brand on row 1,
   hamburger-like nav on row 2. Search hides on narrow; spacer collapses. */
@media (max-width: 820px) {
  .nav { padding: 14px 0 12px; }
  .nav-row {
    flex-wrap: wrap;
    row-gap: 10px;
    gap: 12px;
    align-items: center;
  }
  .brand { font-size: 20px; flex: 0 0 auto; }
  .nav ul {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 2px 4px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .nav ul li { flex: 0 0 auto; }
  .nav ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;     /* WCAG 2.5.5 */
    padding: 10px 10px;
    line-height: 1;
  }
  .nav ul a[aria-current="page"] {
    border-bottom: 0;
    background: color-mix(in oklab, var(--ink) 8%, transparent);
  }
  /* Search — hidden on narrow; users search on the home page. */
  .nav-search { display: none; }
  .nav-search-spacer { display: none; }
}

/* Pitch strip — shrink gap + wrap cleanly on small screens. */
@media (max-width: 640px) {
  .pitch-strip .container {
    gap: 8px !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
  .pitch-strip a { line-height: 1.3; }
}

/* Refusal cards — the grid had fixed-width children forcing 594px on a
   375 viewport. Force single column + min-width: 0 on inner elements. */
@media (max-width: 720px) {
  .refusals-grid, .refusal-grid {
    grid-template-columns: 1fr !important;
  }
  .refusals-grid > *, .refusal-grid > * { min-width: 0; }
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Global safety net — no element may exceed viewport width. */
@media (max-width: 720px) {
  img, svg, video, table, pre {
    max-width: 100%;
    height: auto;
  }
  /* Any element inside a container that accidentally overflows gets
     clipped to the container so we never see horizontal scroll. */
  body { overflow-x: hidden; }
  /* Long text in mono (code-like) gets break-word so it never pushes
     the layout wider than the screen. */
  .mono { overflow-wrap: anywhere; }
}

/* About + other editorial pages — display text gets scaled down, line
   lengths tightened, and fixed-width hero elements allowed to shrink. */
@media (max-width: 640px) {
  .display-xxl { font-size: clamp(44px, 11vw, 72px) !important; letter-spacing: -0.028em; }
  .display-xl  { font-size: clamp(38px, 9vw, 60px)  !important; letter-spacing: -0.022em; }
  .display-l   { font-size: clamp(30px, 7vw, 48px)  !important; }
  .display-m   { font-size: clamp(24px, 5vw, 32px)  !important; }

  /* Wrap any container that uses grid-template-columns with pixel values
     that don't fit 320-375px. */
  [style*="grid-template-columns"][style*="200px"],
  [style*="grid-template-columns"][style*="220px"] {
    display: block !important;
  }
}

/* Timeline event list — bump from 10.5px to 12px so it clears the
   11.5px body-text floor called out by the audit. */
@media (max-width: 720px) {
  .signal-timeline-event { font-size: 12px !important; }
}

/* Detail page masthead + retailer ledger at narrow widths. */
@media (max-width: 720px) {
  /* Any masthead-like 2-col grid with big bottle + ledger copy stacks. */
  [class*="masthead"] { grid-template-columns: 1fr !important; }
}

/* Footer — already has responsive grid; ensure no content overflows. */
@media (max-width: 640px) {
  .footer .refusals-cta { font-size: clamp(28px, 7vw, 40px) !important; }
  .footer-grid { gap: 28px !important; }
}

/* Detail masthead tablet breakpoint — the 220px · 1fr · 0.9fr three-col
   layout doesn't fit below 1020px once the aside "Best deal" block renders
   with 48px typography. Collapse fully to single-column here. The /drops
   ledger, browse rows, etc. are unaffected. */
@media (max-width: 1020px) {
  .detail-mast {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .detail-mast > div:first-child { max-width: 280px; }
}
/* Universal horizontal-scroll safety — applies at tablet too. Anything
   wider than viewport just clips; users get normal vertical scroll. */
@media (max-width: 1020px) {
  html, body { overflow-x: hidden; }
}

/* WhatPeopleSay pros/cons grid — two cols on desktop, stack on mobile. */
@media (max-width: 720px) {
  .wps-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .wps-row { padding: 10px 14px !important; gap: 10px !important; }
  .wps-vote { min-width: 38px !important; font-size: 12px !important; }
}

/* ReviewsSection grid auto-fits via minmax; just tighten the padding. */
@media (max-width: 720px) {
  .reviews-grid { gap: 10px !important; }
}

/* Mobile tap-target gauntlet — any interactive element gets at least
   36-44px in one dimension via padding. Stand-alone controls get 44px
   (WCAG AAA); inline text links get 32px (WCAG AA comfort). */
@media (max-width: 720px) {
  /* Stand-alone controls — AAA. */
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 2px;
  }
  .country-select,
  .country-select__input {
    min-height: 44px !important;
    padding: 8px 6px !important;
  }
  .drops-search {
    padding: 10px 14px !important;
  }
  .drops-search__input {
    min-height: 28px;
    padding: 6px 0 !important;
  }
  .drops-search__clear { min-height: 44px; padding: 10px 10px !important; }

  /* Pitch-strip link — "What we won't do →". */
  .pitch-strip a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; }

  /* Footer + drops-not + drops-foot links — more comfortable hit area. */
  .footer ul a,
  .drops-not__link,
  .drops-foot__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 0;
  }
  .footer .refusals-cta { min-height: 44px; display: inline-flex; align-items: center; }

  /* Tag chips + note chips + axis "See all →" links — bump to 32px. */
  .chip,
  .note-chip {
    min-height: 32px !important;
    padding: 6px 10px !important;
  }
  main a[href*="/browse/"],
  main a[href*="/family/"],
  main a[href*="/note/"],
  main a[href*="/perfumer/"],
  main a[href*="/tag/"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
  }
}

/* Retailer ledger rows on fragrance detail — chips like `.chip-tier-a`
   ("Authorized") sit inline with retailer name + trust + price and push
   past the viewport on narrow. Force the containing flex row to wrap +
   minimum-width-0 the chips so they drop to the next line cleanly. */
@media (max-width: 640px) {
  .container [style*="flex"][style*="space-between"] { flex-wrap: wrap !important; row-gap: 6px !important; }
  .chip { max-width: 100%; }
  .chip-tier-a, .chip-tier-b, .chip-tier-niche, .chip-tier-decant, .chip-tier-department,
  .chip-gold, .chip-ox, .chip-ink, .chip-mute { flex-shrink: 1; }
}

/* Deal-tracker rows — already have mobile rules, but tighten cell padding
   to prevent sparkline + delta from pushing past 375. */
@media (max-width: 480px) {
  .drops-row {
    grid-template-columns: 30px 50px 1fr 70px !important;
    column-gap: 10px !important;
    padding: 16px 0 !important;
  }
  .drops-row__bottle { width: 50px !important; height: 64px !important; }
  .drops-row__landed { font-size: 15px !important; }
  .drops-row__frag { font-size: 15px !important; }
  .drops-row__actions { flex-direction: row !important; gap: 8px; }
  .drops-row__shop, .drops-row__see {
    flex: 1;
    padding: 10px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
}

/* Invariant heartbeat — sticky strip at bottom. Reduce size on mobile so
   it doesn't eat content. */
@media (max-width: 640px) {
  .invariant { font-size: 10px !important; padding: 6px 0 !important; }
  .invariant__row { gap: 8px !important; }
}

/* Refusals changelog grid — switches to stacked rows on narrow. */
.refusals-changelog__grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
}
.refusals-changelog__row {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .refusals-changelog__grid { grid-template-columns: 1fr; gap: 18px; }
  .refusals-changelog__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .refusals-changelog__row > .body-l { font-size: 15px; line-height: 1.5; }
}

/* Retailer ledger cards on fragrance detail — stack the fixed 2-col grid. */
@media (max-width: 720px) {
  [class*="ledger__card"],
  [class*="ledger-row__lead"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Belt-and-suspenders — any inline-styled grid with multiple columns
   collapses on narrow. We catch both fixed-px grids AND explicit 2-3
   column fr-based grids. Excludes drops/ledger rows which have their own
   responsive rules. */
@media (max-width: 640px) {
  main [style*="grid-template-columns"][style*="px "]:not([class*="drops"]):not([class*="ledger"]):not([class*="nav"]),
  main [style*="1fr 1fr 1fr"]:not([class*="drops"]):not([class*="ledger"]):not([class*="nav"]),
  main [style*="1fr 1fr"]:not([style*="1fr 1fr 1fr"]):not([class*="drops"]):not([class*="ledger"]):not([class*="nav"]),
  main [style*="1.1fr"]:not([class*="drops"]):not([class*="ledger"]),
  main [style*="1.05fr"]:not([class*="drops"]):not([class*="ledger"]),
  main [style*="1.2fr"]:not([class*="drops"]):not([class*="ledger"]),
  main [style*="2fr"]:not([style*="1fr 2fr"]):not([class*="drops"]):not([class*="ledger"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  /* Cap gap on any stacked grid so huge desktop gaps don't over-space. */
  main [style*="grid-template-columns"] {
    gap: clamp(12px, 4vw, 32px) !important;
  }
}

/* ─── Deal tracker pagination ─────────────────────────────────────── */
.drops-paginate {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
@media (min-width: 1024px) { .drops-paginate { padding: 20px 32px; } }

.drops-paginate__meta {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  font-size: 11.5px;
  flex: 1 1 auto;
  min-width: 0;
}
.drops-paginate__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.drops-paginate__nav button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 10px 12px;
  min-height: 40px;
  min-width: 40px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.drops-paginate__nav button:hover:not(:disabled) {
  background: var(--paper-deep);
  border-color: var(--ink-soft);
}
.drops-paginate__nav button.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  cursor: default;
}
.drops-paginate__nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.drops-paginate__pages {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 100%;
}
.drops-paginate__ellipsis {
  color: var(--ink-mute);
  padding: 0 6px;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Seed-price marker on deal-tracker rows — tiny chip that clearly flags
   rows whose landed price is editorial synthesis, not a real feed. */
.drops-row__seed-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px dashed var(--ink-faint);
  padding: 2px 5px 3px;
  border-radius: 2px;
}

/* Mobile pagination — tighter. */
@media (max-width: 640px) {
  .drops-paginate { flex-direction: column; align-items: stretch; gap: 10px; }
  .drops-paginate__nav { justify-content: center; }
  .drops-paginate__nav button { padding: 10px 10px; font-size: 10.5px; }
}