/* ============================================================================
   EUMORPH — V2 design system
   One grid. One type scale. Five colors. No marquee.
   ============================================================================ */

:root {
  /* COLOR — five tokens, no more */
  --paper: #F5F1E8;
  --ink: #1A1A1A;
  --muted: #847B70;
  --rule: #E0D8C8;
  --accent: #B45844;

  /* derived (computed, not new) */
  --ink-soft: #2A2724;
  --paper-soft: #FBF8F1;
  --redact: #1A1A1A;

  /* SPACE — 4px scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* TYPE — 1.4× scale, base 14 */
  --t-micro: 11px;
  --t-small: 13px;
  --t-body: 14px;
  --t-lead: 17px;
  --t-22: 22px;
  --t-32: 32px;
  --t-48: 48px;
  --t-72: 72px;
  --t-120: 120px;
  --t-200: 200px;

  /* GRID */
  --container: 1320px;
  --gutter: 32px;
}

[data-theme-v2="night"] {
  --paper: #14110D;
  --paper-soft: #1A1612;
  --ink: #F0EAD9;
  --ink-soft: #E0D9C7;
  --muted: #8A8174;
  --rule: #2A241D;
  --accent: #D4886F;
  --redact: #F0EAD9;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Fraunces", "Times New Roman", serif;
  font-feature-settings: "ss01", "ss02";
  font-variation-settings: "opsz" 14;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--t-body);
  line-height: 1.55;
}
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--paper); }

/* TYPE PRIMITIVES */
.serif    { font-family: "Fraunces", "Times New Roman", serif; }
.sans     { font-family: "Inter Tight", -apple-system, sans-serif; letter-spacing: 0.005em; }
.mono     { font-family: "JetBrains Mono", ui-monospace, monospace; }
.italic   { font-style: italic; }

.t-micro  { font-size: var(--t-micro); line-height: 1.4; }
.t-small  { font-size: var(--t-small); line-height: 1.5; }
.t-body   { font-size: var(--t-body); line-height: 1.6; }
.t-lead   { font-size: var(--t-lead); line-height: 1.55; font-weight: 350; }
.t-22     { font-size: var(--t-22); line-height: 1.4; font-weight: 350; }
.t-32     { font-size: var(--t-32); line-height: 1.2; font-weight: 350; letter-spacing: -0.01em; font-variation-settings: "opsz" 32; }
.t-48     { font-size: var(--t-48); line-height: 1.05; font-weight: 350; letter-spacing: -0.015em; font-variation-settings: "opsz" 48; }
.t-72     { font-size: var(--t-72); line-height: 0.98; font-weight: 350; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
.t-120    { font-size: var(--t-120); line-height: 0.92; font-weight: 350; letter-spacing: -0.035em; font-variation-settings: "opsz" 144; }
.t-200    { font-size: var(--t-200); line-height: 0.86; font-weight: 350; letter-spacing: -0.045em; font-variation-settings: "opsz" 144; }

.muted    { color: var(--muted); }
.ink      { color: var(--ink); }
.ink-soft { color: var(--ink-soft); }
.accent   { color: var(--accent); }

/* EYEBROW — single style. Used for everything labelly. */
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* LAYOUT */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section   { padding: var(--s-10) 0; }
.section-tight { padding: var(--s-9) 0; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

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

/* ============================================================================
   THE WORDMARK — dictionary lockup. Used everywhere.
   ============================================================================ */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark .wm-mark { color: var(--ink); }
.wordmark .wm-dot { color: var(--accent); }
.wordmark .wm-ipa {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.34em;
  letter-spacing: 0;
  color: var(--muted);
  align-self: center;
  font-variation-settings: normal;
  font-weight: 400;
  position: relative;
  top: -0.04em;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Sized variants */
.wordmark.wm-nav { font-size: 26px; }
.wordmark.wm-nav .wm-ipa { font-size: 10px; letter-spacing: 0.08em; top: -1px; }
.wordmark.wm-mid { font-size: 64px; }
.wordmark.wm-foot { font-size: 36px; }

/* Stacked lockup — wordmark over IPA, full dictionary entry */
.wordmark-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Fraunces", "Times New Roman", serif;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.wordmark-stack .wms-mark {
  color: var(--ink);
  white-space: nowrap;
}
.wordmark-stack .wms-dot { color: var(--accent); }
.wordmark-stack .wms-rule {
  display: block;
  width: 0.45em;
  height: 1px;
  background: var(--accent);
  margin-top: 0.08em;
  margin-bottom: 0.08em;
}
.wordmark-stack .wms-ipa {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.10em;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 400;
  font-variation-settings: normal;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark-stack.wms-hero { font-size: 220px; }
.wordmark-stack.wms-display { font-size: 160px; }

@media (max-width: 1100px) {
  .wordmark-stack.wms-hero { font-size: 140px; }
  .wordmark-stack.wms-display { font-size: 110px; }
}
@media (max-width: 700px) {
  .wordmark-stack.wms-hero { font-size: 88px; }
}

/* ============================================================================
   REDACTION — the visible signature.
   Brand name appears as a black bar. Tap to reveal.
   ============================================================================ */
.redact {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
  transition: color 200ms ease;
}
.redact .r-cover {
  display: inline-block;
  background: var(--redact);
  color: transparent;
  padding: 0 0.35em;
  border-radius: 1px;
  transition: opacity 220ms ease;
  letter-spacing: 0.04em;
}
.redact .r-text {
  display: inline-block;
  opacity: 0;
  transition: opacity 220ms ease;
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: var(--ink);
}
.redact[data-revealed="true"] .r-cover { opacity: 0; }
.redact[data-revealed="true"] .r-text { opacity: 1; position: static; }
.redact:hover .r-cover { opacity: 0.92; }

/* "reveal all" mode */
[data-reveal="all"] .redact .r-cover { opacity: 0; }
[data-reveal="all"] .redact .r-text { opacity: 1; position: static; }

/* ============================================================================
   TOPBAR — quiet, no marquee
   ============================================================================ */
.topbar-v2 {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
}
.topbar-v2 .row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--s-5) 0;
  gap: var(--s-6);
}
.topbar-v2 .nav {
  display: flex; gap: var(--s-7); align-items: center;
}
.topbar-v2 .nav a {
  font-size: var(--t-small);
  letter-spacing: 0.015em;
  white-space: nowrap;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
}
.topbar-v2 .nav a:hover { color: var(--accent); }
.topbar-v2 .nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}
.topbar-v2 .utils {
  display: flex; gap: var(--s-6); justify-content: flex-end; align-items: center;
}
.topbar-v2 .utils > * {
  font-size: var(--t-small);
  letter-spacing: 0.015em;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar-v2 .utils > *:hover { color: var(--accent); }
.bag-pill {
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

/* ============================================================================
   HERO — split: definition + house of the week + scent search
   ============================================================================ */
.hero-v2 {
  padding: var(--s-8) 0 var(--s-9);
  position: relative;
  overflow: hidden;
}
.hero-v2-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  align-items: center;
  min-height: 480px;
}
.hero-v2-grid > * { min-width: 0; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-7);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  white-space: nowrap;
}
.hero-eyebrow > * { white-space: nowrap; }
.hero-eyebrow .dot { color: var(--accent); }

.hero-defn {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  font-size: var(--t-32);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: var(--s-6) 0 var(--s-7);
  font-variation-settings: "opsz" 48;
  max-width: 22ch;
}

.hero-actions {
  display: inline-flex; align-items: center; gap: var(--s-6);
}
.hero-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 8px 0 6px;
  transition: all 200ms ease;
}
.hero-cta.alt { color: var(--muted); border-bottom-color: var(--rule); }
.hero-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* House of the week — the still life */
.hero-right { display: flex; justify-content: flex-end; }
.hero-still {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/5;
  position: relative;
  cursor: pointer;
  transition: all 240ms ease;
  display: flex; flex-direction: column;
}
.hero-still:hover { border-color: var(--accent); }
.hero-still-tag {
  position: absolute; top: 20px; right: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 100px;
}
.hero-still-bottle {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-7) var(--s-5) 0;
}
.hero-still-foot {
  display: flex; align-items: end; justify-content: space-between;
  padding: var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  gap: var(--s-4);
}
.hero-still-name { font-size: 16px; line-height: 1.2; margin-top: 4px; }
.hero-still-prod { font-size: 18px; font-style: italic; line-height: 1.2; margin-top: 2px; }
.hero-still-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
  align-self: flex-end;
}

/* Scent-by-language strip */
.scent-strip {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--rule);
  background: var(--paper-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: center;
}
.ss-label {
  display: flex; flex-direction: column; gap: 4px;
  white-space: nowrap;
}
.ss-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.ss-tag {
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}
.ss-input {
  font-size: var(--t-32);
  font-weight: 300;
  line-height: 1.2;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em;
}
.ss-prefix { color: var(--muted); }
.ss-typed {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  font-style: italic;
  display: inline-flex; align-items: baseline;
  min-width: 1em;
}
.ss-caret {
  display: inline-block;
  width: 2px; height: 0.9em;
  background: var(--accent);
  margin-left: 4px;
  animation: caret-blink 1s steps(2) infinite;
  align-self: center;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (max-width: 880px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .scent-strip { grid-template-columns: 1fr; gap: var(--s-3); }
  .ss-input { font-size: var(--t-22); }
}

/* ============================================================================
   CLIMATE — compact card on cream, three picks, no drama
   ============================================================================ */
.climate-row {
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.climate-card-v3 {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
  margin-top: var(--s-5);
}
.climate-card-v3 > * { min-width: 0; }
.cc-left {
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.cc-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.cc-headline {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72;
  margin: 0 0 var(--s-5);
  color: var(--ink);
}
.cc-headline em { font-style: italic; color: var(--accent); font-weight: 300; }
.cc-body {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 350;
  margin: 0 0 var(--s-6);
  max-width: 40ch;
}
.cc-source {
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.cc-source .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.cc-picks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.cc-pick {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  transition: background 180ms ease;
}
.cc-pick:last-child { border-bottom: 0; }
.cc-pick:hover { background: var(--paper); }
.cc-pick .cp-when {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.cc-pick .cp-name {
  font-family: "Fraunces", serif;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 350;
  margin-bottom: 4px;
}
.cc-pick .cp-reason {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  grid-column: 2;
}
.cc-pick .cp-name + .cp-reason { margin-top: 0; }

@media (max-width: 880px) {
  .climate-card-v3 { grid-template-columns: 1fr; }
  .cc-left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .cc-pick { grid-template-columns: 1fr; gap: 4px; }
  .cc-pick .cp-reason { grid-column: 1; }
}

/* ============================================================================
   THE EDIT — Cécile's three-product routine
   ============================================================================ */
.edit-section {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
}
.edit-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--s-9);
  align-items: center;
}
.edit-grid > * { min-width: 0; }

.edit-img {
  position: relative;
  aspect-ratio: 4/5;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(180, 88, 68, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, #2A1818 0%, #0A0606 100%);
  border: 1px solid rgba(245, 241, 232, 0.08);
  overflow: hidden;
}
.edit-stack { position: relative; width: 100%; height: 100%; }
.edit-stack-bottle {
  position: absolute;
  bottom: 8%;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}
.edit-stack-cap {
  position: absolute;
  bottom: 20px; left: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(245, 241, 232, 0.45);
  text-transform: uppercase;
}

.edit-body h3 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
  font-variation-settings: "opsz" 144;
  color: var(--paper);
}
.edit-body h3 em { font-style: italic; color: var(--accent); }
.edit-lede {
  font-size: var(--t-lead);
  color: rgba(245, 241, 232, 0.7);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 0 var(--s-6);
}
.edit-lede em { color: var(--paper); }
.edit-list { display: flex; flex-direction: column; margin-bottom: var(--s-6); }
.edit-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  cursor: pointer;
  transition: color 180ms ease;
}
.edit-row:last-child { border-bottom: 1px solid rgba(245, 241, 232, 0.12); }
.edit-row:hover { color: var(--accent); }
.edit-row .er-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.edit-row .er-name { font-size: 17px; line-height: 1.2; color: var(--paper); }
.edit-row:hover .er-name { color: var(--accent); }
.edit-row .er-price { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--paper); }
.edit-row .eyebrow { color: rgba(245, 241, 232, 0.5); }
/* override redaction colors on dark bg */
.edit-section .redact .r-cover { background: var(--paper); }
.edit-section .redact .r-text { color: var(--paper); }

.edit-section .btn-v2 {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.edit-section .btn-v2:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ============================================================================
   THREE RAILS — how it arrives
   ============================================================================ */
.rails-section { padding: var(--s-10) 0; border-top: 1px solid var(--rule); }
.rails-header {
  margin-bottom: var(--s-7);
}
.rails-header .eyebrow { margin-bottom: 16px; }
.rails-header h2 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  font-variation-settings: "opsz" 144;
  max-width: 14ch;
}
.rails-header h2 em { font-style: italic; color: var(--accent); }

.rails-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rail-cell {
  padding: var(--s-7) var(--s-6);
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: background 180ms ease;
  display: flex; flex-direction: column;
}
.rail-cell:last-child { border-right: 0; }
.rail-cell:hover { background: var(--paper-soft); }
.rail-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.rail-name {
  font-size: var(--t-32);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 32;
}
.rail-lede {
  font-size: 14px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.rail-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s-5);
  flex: 1;
}
.rail-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  display: inline-block;
  align-self: flex-start;
}
.rail-cell:hover .rail-link { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================================
   BEAUTY INDEX — what Cécile has read
   ============================================================================ */
.index-section {
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
}
.index-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: var(--s-7);
  gap: var(--s-6);
}
.index-header h2 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 16px 0 var(--s-5);
  font-variation-settings: "opsz" 144;
  max-width: 12ch;
}
.index-header h2 em { font-style: italic; color: var(--accent); }
.index-lede {
  font-size: var(--t-lead);
  color: var(--muted);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0;
}
.index-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.index-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.index-cell {
  background: var(--paper);
  padding: var(--s-5);
  min-height: 150px;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: background 180ms ease;
}
.index-cell:hover { background: var(--paper-soft); }
.index-cell .ic-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.index-cell .ic-title {
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: auto;
  font-weight: 350;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.005em;
}
.index-cell .ic-attrs {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 12px;
}

.index-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-7);
  border-top: 1px solid var(--rule);
}
.is-cell {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
}
.is-cell:last-child { border-right: 0; }
.is-v {
  font-size: var(--t-48);
  font-weight: 300;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}
.is-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

@media (max-width: 880px) {
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .index-stats { grid-template-columns: repeat(2, 1fr); }
  .climate-grid { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: 1fr; }
  .rails-grid { grid-template-columns: 1fr; }
  .rail-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ============================================================================
   ARRIVAL RIBBON — only when actually arrived
   ============================================================================ */
.arrival-ribbon {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.arrival-ribbon .ar-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-6);
}
.arrival-ribbon .ar-echo { color: var(--accent); font-style: italic; text-transform: none; letter-spacing: 0.03em; font-family: "Fraunces", serif; font-size: 13px; }
.arrival-ribbon .ar-dismiss { color: var(--paper); opacity: 0.6; cursor: pointer; }
.arrival-ribbon .ar-dismiss:hover { opacity: 1; }

/* ============================================================================
   THE WEEK RAIL — the morph mechanic, made visible
   ============================================================================ */
.week-section { padding: var(--s-10) 0; border-top: 1px solid var(--rule); }
.week-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: var(--s-8);
  gap: var(--s-6);
}
.week-header h2 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  font-variation-settings: "opsz" 144;
  max-width: 16ch;
}
.week-header h2 em { font-style: italic; color: var(--accent); }
.week-header .lede {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 38ch;
  line-height: 1.5;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.week-cell {
  background: var(--paper);
  padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: background 200ms ease;
  min-height: 380px;
}
.week-cell:hover { background: var(--paper-soft); }
.week-cell.today { background: var(--paper-soft); }
.week-cell.today::before {
  content: "TODAY";
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 6px;
}
.week-cell .day {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.week-cell .bottle-area {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
  position: relative;
}
.week-cell .descriptor {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: var(--s-2);
}
.week-cell .perfumer {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.week-cell .brand-line {
  font-size: 14px;
  margin-bottom: var(--s-3);
}
.week-cell .price {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.05em;
}

/* ============================================================================
   BOTTLE — flat illustration. Caption-coded, not photo-faked.
   ============================================================================ */
.bottle {
  width: 100%;
  height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.bottle svg { display: block; max-width: 100%; max-height: 100%; }

/* ============================================================================
   THE OPENING STORY — single product, magazine-style
   ============================================================================ */
.story-section { padding: var(--s-8) 0; border-top: 1px solid var(--rule); position: relative; }
.story-section .grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--s-8);
  align-items: stretch;
}
.story-section .grid > * { min-width: 0; }
.story-frame {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.story-frame .frame-cap {
  position: absolute; bottom: var(--s-4); left: var(--s-4);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.story-body { display: flex; flex-direction: column; justify-content: center; }
.story-body .kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.story-body h3 {
  font-size: var(--t-48);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-5);
  font-variation-settings: "opsz" 144;
}
.story-body h3 em { font-style: italic; color: var(--accent); }
.story-body .lede {
  font-size: var(--t-22);
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: var(--s-6);
  max-width: 38ch;
}
.story-body .meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-5);
  margin-bottom: var(--s-7);
}
.story-body .meta .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.story-body .meta .v {
  font-size: 14px;
  font-style: italic;
}

/* ============================================================================
   CÉCILE — inline, on the page, not behind a button
   ============================================================================ */
.cecile-section {
  padding: var(--s-10) 0;
  background: var(--ink);
  color: var(--paper);
}
.cecile-section .grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  align-items: start;
}
.cecile-section .grid > * { min-width: 0; }
.cecile-section .left h3 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
  font-variation-settings: "opsz" 144;
  color: var(--paper);
}
.cecile-section .left h3 em { font-style: italic; color: var(--accent); font-weight: 300; }
.cecile-section .left .bio {
  font-size: var(--t-lead);
  color: rgba(245, 241, 232, 0.7);
  line-height: 1.5;
  margin-bottom: var(--s-6);
  max-width: 36ch;
}
.cecile-section .left .credentials {
  display: flex; flex-direction: column; gap: var(--s-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
}

.cecile-panel {
  border: 1px solid rgba(245, 241, 232, 0.18);
  background: rgba(245, 241, 232, 0.03);
  padding: var(--s-7);
  display: flex; flex-direction: column;
  gap: var(--s-5);
  min-height: 460px;
}
.cecile-panel .opener {
  font-size: var(--t-22);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  color: var(--paper);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.005em;
}
.cecile-panel .opener::before {
  content: "C —"; display: inline;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
}
.cecile-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cecile-chip {
  border: 1px solid rgba(245, 241, 232, 0.25);
  padding: 8px 14px;
  font-size: 12px;
  font-style: italic;
  border-radius: 100px;
  cursor: pointer;
  transition: all 180ms ease;
}
.cecile-chip:hover {
  border-color: var(--accent);
  background: rgba(180, 88, 68, 0.12);
  color: var(--accent);
}
.cecile-input-row {
  display: flex; align-items: center; gap: var(--s-3);
  border: 1px solid rgba(245, 241, 232, 0.25);
  padding: 14px 18px;
  margin-top: auto;
}
.cecile-input-row input {
  flex: 1;
  border: 0; outline: 0;
  background: transparent;
  color: var(--paper);
  font-size: var(--t-lead);
  font-style: italic;
  font-variation-settings: "opsz" 14;
}
.cecile-input-row input::placeholder { color: rgba(245, 241, 232, 0.4); font-style: italic; }
.cecile-input-row .send {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.cecile-thread {
  display: flex; flex-direction: column; gap: var(--s-4);
  max-height: 280px;
  overflow-y: auto;
  padding-right: 8px;
}
.cecile-thread .turn-u {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(245, 241, 232, 0.55);
  text-transform: uppercase;
}
.cecile-thread .turn-u::before { content: "YOU — "; color: var(--accent); }
.cecile-thread .turn-c {
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--paper);
}
.cecile-thread .turn-c::before {
  content: "C — ";
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-right: 4px;
}
.cecile-thread .turn-c.thinking { opacity: 0.5; }

/* ============================================================================
   IN RESIDENCE — the brand list, redacted by default
   ============================================================================ */
.residence-section { padding: var(--s-10) 0; border-top: 1px solid var(--rule); }
.residence-header {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: var(--s-7);
}
.residence-header h2 {
  font-size: var(--t-48);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.residence-header h2 em { font-style: italic; color: var(--accent); }
.residence-toggle {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.residence-toggle:hover { color: var(--accent); border-bottom-color: var(--accent); }
.residence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.residence-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  gap: var(--s-4);
}
.residence-row:nth-child(3n) { border-right: 0; }
.residence-row .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.residence-row .city {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ============================================================================
   MEMBERSHIP — quiet, simplified
   ============================================================================ */
.member-section { padding: var(--s-10) 0; border-top: 1px solid var(--rule); }
.member-section .grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  align-items: end;
}
.member-section .grid > * { min-width: 0; }
.member-section h2 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  font-variation-settings: "opsz" 144;
  max-width: 14ch;
}
.member-section h2 em { font-style: italic; color: var(--accent); }
.member-section .perks {
  display: flex; flex-direction: column;
}
.member-section .perks .row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.member-section .perks .row:first-child { border-top: 1px solid var(--rule); }
.member-section .perks .k { color: var(--ink-soft); }
.member-section .perks .v { font-style: italic; color: var(--muted); }

/* ============================================================================
   FOOTER — quiet
   ============================================================================ */
.footer-v2 {
  padding: var(--s-9) 0 var(--s-7);
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
}
.footer-v2 .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.footer-v2 .col-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.footer-v2 .col a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.footer-v2 .col a:hover { color: var(--accent); }
.footer-v2 .legal {
  display: flex; justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-v2 .disclaimer {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.005em;
  text-transform: none;
  max-width: 60ch;
  line-height: 1.5;
  margin-bottom: var(--s-5);
}

/* ============================================================================
   FADE / MOTION — minimal
   ============================================================================ */
.fade-in { animation: fade-in 600ms ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.stagger > * { animation: fade-in 700ms ease both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 320ms; }
.stagger > *:nth-child(6) { animation-delay: 400ms; }
.stagger > *:nth-child(7) { animation-delay: 480ms; }

/* ============================================================================
   PDP — V2 (story-led)
   ============================================================================ */
.pdp-v2 { padding: var(--s-9) 0 var(--s-10); }
.pdp-crumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-6);
}
.pdp-crumb a:hover { color: var(--accent); }
.pdp-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  margin-bottom: var(--s-10);
}
.pdp-grid > * { min-width: 0; }
.pdp-frame {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: sticky; top: 100px;
}
.pdp-body h1 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: var(--s-3) 0 var(--s-5);
  font-variation-settings: "opsz" 144;
}
.pdp-body h1 em { font-style: italic; color: var(--accent); }
.pdp-body .perfumer-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.pdp-body .lede {
  font-size: var(--t-22);
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: var(--s-7);
  max-width: 42ch;
}
.pdp-body .price-row {
  display: flex; align-items: baseline; gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.pdp-body .price {
  font-size: var(--t-32);
  font-weight: 300;
  font-variation-settings: "opsz" 32;
}
.pdp-body .price-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.pdp-body .add-row { display: flex; gap: var(--s-3); margin-top: var(--s-5); }

.btn-v2 {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all 200ms ease;
}
.btn-v2:hover { background: var(--accent); border-color: var(--accent); }
.btn-v2.ghost { background: transparent; color: var(--ink); }
.btn-v2.ghost:hover { background: var(--ink); color: var(--paper); }

/* PDP dossier — long-form sections */
.dossier-section {
  padding: var(--s-9) 0;
  border-top: 1px solid var(--rule);
}
.dossier-section .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.dossier-section h2 {
  font-size: var(--t-48);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-6);
  font-variation-settings: "opsz" 144;
  max-width: 18ch;
}
.dossier-section h2 em { font-style: italic; color: var(--accent); }
.dossier-section .body {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 350;
}
.dossier-section .body p { margin-top: 0; margin-bottom: var(--s-4); }

/* ============================================================================
   THE FILE — Cécile remembers (account)
   ============================================================================ */
.file-section { padding: var(--s-9) 0; }
.file-grid {
  display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-9);
}
.file-side .nav-col {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.file-side .nav-col a {
  font-size: 14px; padding: 8px 0; color: var(--muted);
}
.file-side .nav-col a.active { color: var(--accent); }

.file-card {
  border: 1px solid var(--rule);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}
.file-card .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.file-card .file-row {
  display: grid; grid-template-columns: 140px 1fr;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.file-card .file-row:last-child { border-bottom: 0; }
.file-card .file-row .k { color: var(--muted); font-size: 12px; }
.file-card .file-row .v { font-style: italic; color: var(--ink); }

/* ============================================================================
   CART — V2
   ============================================================================ */
.cart-section { padding: var(--s-9) 0; }
.cart-section h1 {
  font-size: var(--t-72);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-7);
  font-variation-settings: "opsz" 144;
}
.cart-section h1 em { font-style: italic; color: var(--accent); }
.cart-grid {
  display: grid; grid-template-columns: 8fr 4fr; gap: var(--s-9);
}
.cart-grid > * { min-width: 0; }
.file-grid > * { min-width: 0; }
.cart-line {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.cart-line:first-child { border-top: 1px solid var(--rule); }
.cart-line .thumb {
  width: 100px; height: 120px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
}
.cart-summary {
  border: 1px solid var(--rule);
  padding: var(--s-6);
  position: sticky; top: 100px;
}
.cart-summary .row {
  display: grid; grid-template-columns: 1fr auto;
  padding: 8px 0;
  font-size: 13px;
}
.cart-summary .row.total {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-4); padding-top: var(--s-4);
  font-size: var(--t-22);
  font-style: italic;
}


/* ============================================================================
   ELEVATION PASS — chapter chrome, hero rebuild, editorial details
   ============================================================================ */

/* Chapter mark: ─── I ─────────  THE HOUSE OF THE WEEK · §01 */
.chapter-mark {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--s-7);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.cm-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  font-variation-settings: "opsz" 48;
  flex-shrink: 0;
  min-width: 24px;
}
.cm-rule {
  flex: 0 0 64px;
  height: 1px;
  background: var(--ink);
}
.cm-label { color: var(--ink); white-space: nowrap; }
.cm-sub { color: var(--muted); margin-left: auto; white-space: nowrap; }
.cm-folio {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: none;
  font-variation-settings: "opsz" 32;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  margin-left: 16px;
  white-space: nowrap;
}
.climate-section .cm-folio { color: rgba(245,241,232,0.55); border-left-color: rgba(245,241,232,0.18); }
.edit-section .cm-folio { color: rgba(245,241,232,0.55); border-left-color: rgba(245,241,232,0.18); }
.cecile-section .cm-folio { color: rgba(245,241,232,0.55); border-left-color: rgba(245,241,232,0.18); }

/* Running head — sits above the hero */
.running-head {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-5) 0 var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.rh-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ============================================================================
   HERO REBUILD — true editorial dictionary spread
   ============================================================================ */
.hero-v2 {
  padding: 0 0 var(--s-9);
}
.hero-v2 .hero-v2-grid {
  padding-top: var(--s-9);
  min-height: auto;
  align-items: start;
  gap: var(--s-10);
}

/* DICTIONARY ENTRY — left column, real lexicon block */
.dict-entry {
  position: relative;
}
.dict-headword {
  font-family: "Fraunces", serif;
  font-size: clamp(72px, 9vw, 140px);
  line-height: 0.9;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-5);
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}
.dict-headword .syl {
  position: relative;
}
.dict-headword .syl-dot {
  font-size: 0.4em;
  color: var(--muted-2);
  vertical-align: 0.32em;
  font-weight: 300;
  margin: 0 0.04em;
}
.dict-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-5);
}
.dict-meta-row .dm-ipa {
  color: var(--accent);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.dict-meta-row .dm-pos {
  font-style: italic;
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-weight: 350;
}
.dict-meta-row .dm-etym {
  color: var(--muted);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.dict-meta-row .dm-etym .grk { color: var(--ink-soft); font-style: normal; }

.dict-defs { display: flex; flex-direction: column; gap: var(--s-5); }
.dict-def {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
}
.dict-def-num {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--accent);
  font-variation-settings: "opsz" 14;
  text-align: right;
  padding-top: 2px;
}
.dict-def-text {
  font-family: "Fraunces", serif;
  font-weight: 350;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variation-settings: "opsz" 32;
}
.dict-def-text em { color: var(--ink-soft); }
.dict-def-text .pos {
  font-style: italic;
  font-size: 0.7em;
  color: var(--muted);
  margin-right: 6px;
}

.dict-usage {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-variation-settings: "opsz" 32;
}
.dict-usage .usage-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 12px;
  vertical-align: 0.18em;
}

.hero-actions {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  gap: var(--s-7);
  align-items: center;
}

/* Hide old hero-eyebrow + hero-defn — replaced by dict-entry */
.hero-v2 .hero-eyebrow,
.hero-v2 > .container > .hero-v2-grid .hero-left > .hero-defn { display: none; }

/* HOUSE OF THE WEEK — refined */
.hero-still {
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: none;
  width: 100%;
  aspect-ratio: 5/6;
  position: relative;
  cursor: pointer;
  transition: all 240ms ease;
  display: flex; flex-direction: column;
  box-shadow:
    0 1px 0 rgba(28,26,23,0.02),
    0 24px 48px -28px rgba(28,26,23,0.18);
}
.hero-still::before {
  /* a faint inner frame, like a print plate */
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.hero-still:hover { border-color: var(--ink); }
.hero-still-tag {
  top: 20px;
  left: 20px;
  right: auto;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-still-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.hero-still-plate {
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.hero-still-foot {
  border-top: 1px solid var(--rule);
  padding: var(--s-5);
  background: var(--paper);
  position: relative;
  z-index: 1;
}
.hero-still-foot .eyebrow { color: var(--accent); margin-bottom: 6px; }

/* ============================================================================
   SCENT STRIP — full-bleed quote band
   ============================================================================ */
.scent-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%);
  padding: var(--s-9) 0;
  margin-top: var(--s-9);
}
.scent-band-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-7);
  align-items: center;
}
.scent-band-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.scent-band-quote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.32em;
}
.scent-band-quote .sb-prefix { color: var(--muted-2); font-style: normal; font-weight: 350; font-size: 0.7em; font-family: "Inter Tight", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.scent-band-quote .sb-typed {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: baseline;
  min-width: 1em;
  color: var(--ink);
}
.scent-band-quote .sb-caret {
  display: inline-block;
  width: 2px; height: 0.85em;
  background: var(--accent);
  margin-left: 6px;
  animation: caret-blink 1s steps(2) infinite;
}
.scent-band-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  white-space: nowrap;
}

@media (max-width: 880px) {
  .scent-band-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .scent-band-quote { font-size: 28px; }
}

/* ============================================================================
   SECTION RHYTHM — give every section a chapter mark + tighter rhythm
   ============================================================================ */
.story-section,
.week-section,
.climate-section,
.edit-section,
.rails-section,
.cecile-section,
.residence-section,
.member-section,
.index-section {
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.section-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  align-items: end;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.section-head > * { min-width: 0; }
.section-head h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  max-width: 14ch;
}
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head .lede {
  font-family: "Fraunces", serif;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 350;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 32;
  max-width: 44ch;
  margin: 0;
}
.section-head .lede em { color: var(--ink); font-style: italic; }

/* Drop cap helper */
.dropcap::first-letter {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  margin: 0.05em 0.08em -0.1em 0;
  color: var(--accent);
  font-variation-settings: "opsz" 144;
}

@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
}

/* ============================================================================
   CLIMATE — typographic data table replacing weak h2
   ============================================================================ */
.climate-section .climate-grid {
  grid-template-columns: 6fr 6fr;
  gap: var(--s-9);
  align-items: start;
}

/* atmospheric data table */
.atmos-table {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0;
  font-family: "JetBrains Mono", monospace;
  margin-top: var(--s-6);
  margin-bottom: var(--s-6);
}
.atmos-row {
  display: contents;
}
.atmos-row > * {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.atmos-row:first-child > * { border-top: 1px solid var(--rule); }
.atmos-k {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-size: 10px;
  padding-right: 16px;
}
.atmos-bar {
  display: flex;
  align-items: center;
  padding-right: 16px;
}
.atmos-bar-track {
  height: 1px;
  flex: 1;
  background: var(--rule);
  position: relative;
}
.atmos-bar-fill {
  position: absolute;
  top: -2px;
  height: 5px;
  background: var(--accent);
}
.atmos-v {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  font-variation-settings: "opsz" 32;
}

/* override climate h2 (keep section-head h2 instead) */
.climate-left h2 { display: none; }

.climate-right {
  background: var(--paper);
}
.climate-rec { border-left: 0; border-right: 0; }
.climate-rec:first-child { border-top: 1px solid var(--rule); }
.climate-rec:last-child { border-bottom: 1px solid var(--rule); }

/* ============================================================================
   THE EDIT — proper still life with three bottles on a tray
   ============================================================================ */
.edit-img {
  aspect-ratio: 5/4;
  background:
    radial-gradient(80% 40% at 50% 60%, rgba(184, 92, 56, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, #2A1816 0%, #0E0707 100%);
  border: 1px solid rgba(245, 241, 232, 0.06);
  position: relative;
  overflow: hidden;
}
.edit-tray {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  border-top: 1px solid rgba(245, 241, 232, 0.06);
}
.edit-bottles {
  position: absolute;
  left: 0; right: 0; bottom: 12%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 6%;
  padding: 0 8%;
}
.edit-bottle-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.edit-bottle-slot .ebs-label {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  white-space: nowrap;
}
.edit-img-cap {
  position: absolute;
  top: 20px; left: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(245, 241, 232, 0.5);
  text-transform: uppercase;
}
.edit-img-plate {
  position: absolute;
  top: 20px; right: 24px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(245, 241, 232, 0.7);
  font-variation-settings: "opsz" 14;
}

/* hide old stack */
.edit-stack, .edit-stack-bottle, .edit-stack-cap { display: none; }

/* edit body sits in dark — chapter mark needs lighter colors */
.edit-section .chapter-mark .cm-rule { background: rgba(245, 241, 232, 0.3); }
.edit-section .chapter-mark .cm-label { color: var(--paper); }
.edit-section .chapter-mark .cm-sub { color: rgba(245, 241, 232, 0.5); }
.edit-section .chapter-mark { color: rgba(245, 241, 232, 0.5); }
.edit-section .section-head { border-bottom-color: rgba(245, 241, 232, 0.15); }

/* ============================================================================
   FOOTER — editorial colophon
   ============================================================================ */
.footer-v2 {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-7);
  margin-top: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}
.footer-mast {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  padding-bottom: var(--s-8);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
  align-items: end;
}
.footer-quote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  color: var(--paper);
  margin: 0;
  max-width: 16ch;
}
.footer-quote em { color: var(--accent); font-style: italic; }
.footer-quote .fq-attr {
  display: block;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  margin-top: var(--s-5);
}

.footer-signup .fs-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  margin-bottom: 16px;
}
.footer-signup .fs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
  padding: 12px 0;
}
.footer-signup .fs-row input {
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-style: italic;
  outline: none;
  width: 100%;
}
.footer-signup .fs-row input::placeholder {
  color: rgba(245, 241, 232, 0.4);
}
.footer-signup .fs-row button {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0 4px 16px;
}
.footer-signup .fs-tag {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(245, 241, 232, 0.5);
  margin-top: 14px;
  font-variation-settings: "opsz" 14;
}

.footer-cols {
  display: grid;
  grid-template-columns: 5fr 2fr 2fr 2fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
}
.footer-cols .col {
  display: flex; flex-direction: column; gap: 8px;
}
.footer-cols .col-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.4);
  margin-bottom: 8px;
}
.footer-cols .col a {
  font-family: "Fraunces", serif;
  font-size: 16px;
  color: rgba(245, 241, 232, 0.85);
  text-decoration: none;
  font-variation-settings: "opsz" 32;
}
.footer-cols .col a:hover { color: var(--accent); }

.footer-static {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.4);
  padding-top: 6px;
}

.footer-disclaimer {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.55);
  max-width: 90ch;
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
  margin-bottom: var(--s-4);
}

.footer-colophon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--s-6);
  padding: var(--s-6) 0 0;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}
.footer-colophon p,
.footer-colophon span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  margin: 0;
}
.footer-colophon .fc-mast {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245, 241, 232, 0.7);
  font-variation-settings: "opsz" 14;
}

/* hide old footer disclaimer/grid styling — we render new */
.footer-v2 .grid,
.footer-v2 .legal,
.footer-v2 .disclaimer { display: none; }
.footer-v2 .footer-mast,
.footer-v2 .footer-cols,
.footer-v2 .footer-colophon { display: grid; }

@media (max-width: 880px) {
  .footer-mast { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-colophon { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ============================================================================
   EDITORIAL SPREAD — Opening Story rebuilt as magazine double-page
   ============================================================================ */
.editorial-spread { background: var(--paper); padding: var(--s-8) 0 var(--s-9); }
.editorial-spread .container { max-width: 1320px; }

.es-running {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.es-running em {
  font-family: "Fraunces", serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink);
  font-weight: 300;
}

.es-grid {
  display: grid;
  grid-template-columns: 2fr 6fr 4fr;
  grid-template-areas:
    "margin headline frame"
    "margin body frame";
  gap: 0 var(--s-7);
  align-items: start;
}
.es-grid > * { min-width: 0; }

/* Margin column — folio, marginalia, footnotes */
.es-margin {
  grid-area: margin;
  position: sticky;
  top: 80px;
  padding-right: var(--s-5);
  border-right: 1px solid var(--rule);
}
.es-folio {
  font-family: "Fraunces", serif;
  font-size: 96px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variation-settings: "opsz" 144;
  margin-bottom: var(--s-5);
}
.es-folio em { font-style: italic; }
.es-margin-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--s-7);
}
.es-pull {
  font-family: "Fraunces", serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: "opsz" 32;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-4) 0;
  margin-bottom: var(--s-6);
}
.es-pull em { color: var(--accent); }
.es-footnote {
  font-family: "Fraunces", serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: var(--s-4);
  font-weight: 350;
}
.es-footnote sup {
  color: var(--accent);
  font-size: 10px;
  margin-right: 2px;
}

/* Headline — runs across body+frame (cols 2-3) */
.es-headline {
  grid-area: headline;
  margin-bottom: var(--s-6);
}
.es-headline h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(48px, 5.6vw, 88px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.es-headline h2 em { font-style: italic; color: var(--accent); }
.es-byline {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-weight: 350;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variation-settings: "opsz" 14;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.es-byline em { color: var(--ink); font-style: italic; }

/* Frame — sticky on right */
.es-frame {
  grid-area: frame;
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  align-self: start;
  margin-top: var(--s-3);
  position: sticky;
  top: 80px;
  padding: var(--s-5);
}
.es-frame-cap {
  position: absolute;
  bottom: 18px; left: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Body — multi-column running text */
.es-body {
  grid-area: body;
  padding-top: var(--s-2);
}
.es-lede {
  font-family: "Fraunces", serif;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 350;
  color: var(--ink);
  font-variation-settings: "opsz" 32;
  margin: 0 0 var(--s-5);
}
.es-lede sup { color: var(--accent); font-size: 11px; }
.es-body-p {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 380;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 14;
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}
.es-body-p sup { color: var(--accent); font-size: 11px; }

.es-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-top: var(--s-5);
}
.es-meta .k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.es-meta .v {
  font-family: "Fraunces", serif;
  font-size: 14px;
  color: var(--ink);
  font-variation-settings: "opsz" 14;
}
.es-meta .v em { font-style: italic; }

.es-cta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--s-5);
  gap: var(--s-5);
  flex-wrap: wrap;
}
.es-cta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.es-cta .es-arrow { color: var(--accent); margin-left: 6px; }
.es-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .es-grid {
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "margin headline"
      "frame body";
    gap: var(--s-6) var(--s-6);
  }
  .es-margin { position: static; padding-right: var(--s-4); }
  .es-frame { position: static; }
}
@media (max-width: 880px) {
  .es-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "margin"
      "headline"
      "frame"
      "body";
    gap: var(--s-5);
  }
  .es-margin { border-right: none; border-bottom: 1px solid var(--rule); padding: 0 0 var(--s-4); }
  .es-folio { font-size: 64px; }
  .es-meta { grid-template-columns: 1fr 1fr; }
}



/* ============================================================================
   ELEVATION — pass 2: cleaner climate, residence file-card, rails strip
   ============================================================================ */

/* Climate is now single-column: atmos table → reading note (no product recs) */
.climate-section .climate-single {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  align-items: start;
}
.climate-section .climate-single > * { min-width: 0; }
@media (max-width: 880px) {
  .climate-section .climate-single { grid-template-columns: 1fr; }
}

.climate-reading {
  border-left: 1px solid rgba(245, 241, 232, 0.18);
  padding: 8px 0 8px 32px;
}
.climate-reading .cr-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.climate-reading .cr-text {
  font-family: "Fraunces", serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.42;
  color: var(--paper);
  margin: 0 0 24px;
  text-wrap: pretty;
  font-variation-settings: "opsz" 36;
}
.climate-reading .cr-sig {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(245, 241, 232, 0.55);
  letter-spacing: 0.02em;
}

/* Rails preamble strip inside Residence */
.rails-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--s-3) 0 var(--s-7);
}
.rails-strip .rs-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}
.rails-strip .rs-cell:last-child { border-right: 0; }
.rails-strip .rs-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
  font-variation-settings: "opsz" 144;
}
.rails-strip .rs-name {
  font-family: "Fraunces", serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.rails-strip .rs-lede {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  font-variation-settings: "opsz" 14;
}
@media (max-width: 880px) {
  .rails-strip { grid-template-columns: 1fr; }
  .rails-strip .rs-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .rails-strip .rs-cell:last-child { border-bottom: 0; }
}

/* Residence file-card (folded membership CTA) */
/* Note: scoped under .residence-section to avoid collision with .file-card on the account page */
.residence-section .file-card {
  margin-top: var(--s-7);
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
  display: grid;
  grid-template-columns: 6fr 6fr;
}
.residence-section .file-card > * { min-width: 0; }
.residence-section .file-card .fc-left {
  padding: var(--s-7);
  border-right: 1px solid var(--rule);
}
.residence-section .file-card .fc-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.residence-section .file-card .fc-headline {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.residence-section .file-card .fc-headline em { font-style: italic; color: var(--accent); }
.residence-section .file-card .fc-body {
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 36ch;
}
.residence-section .file-card .fc-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  font-variation-settings: "opsz" 36;
  transition: color 200ms ease, border-color 200ms ease;
}
.residence-section .file-card .fc-cta:hover { color: var(--accent); border-color: var(--accent); }
.residence-section .file-card .fc-cta .fc-arrow {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  transition: transform 200ms ease;
}
.residence-section .file-card .fc-cta:hover .fc-arrow { transform: translateX(4px); }
.residence-section .file-card .fc-right {
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}
.residence-section .file-card .fc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.residence-section .file-card .fc-row:last-child { border-bottom: 0; }
.residence-section .file-card .fc-row .fc-k {
  font-family: "Fraunces", serif;
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
}
.residence-section .file-card .fc-row .fc-v {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .residence-section .file-card { grid-template-columns: 1fr; }
  .residence-section .file-card .fc-left { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* Residence section gets a lede now */
.residence-header { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }
.residence-header .lede {
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 8px;
  text-wrap: pretty;
}


/* ============================================================================
   HERO — still life elevation: photographed bottle, paper light, edition mark
   ============================================================================ */
.hero-still {
  /* let aspect-ratio control height; min-height was creating dead space */
  min-height: 0;
}
.hero-still-bottle {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-7) var(--s-5) var(--s-5);
  overflow: hidden;
}

/* a soft directional light from upper-left, like a window in a Paris atelier */
.hss-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 25% 20%, rgba(255, 250, 238, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 90%, rgba(28, 26, 23, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* a hairline horizon where bottle meets shelf, ~28% from the bottom */
.hss-horizon {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 28%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--rule) 12%, var(--rule) 88%, transparent 100%);
  pointer-events: none;
}

/* the cast shadow underneath the bottle */
.hss-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(28% - 6px);
  width: 60%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(28, 26, 23, 0.32) 0%, rgba(28, 26, 23, 0.08) 50%, transparent 80%);
  filter: blur(4px);
  pointer-events: none;
}

.hss-bottle-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* lift bottle so its base sits on the horizon line */
  margin-bottom: calc(28% - 4px);
}

.hss-edition {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variation-settings: "opsz" 14;
  z-index: 2;
}

/* a very faint paper grain on the still-life backdrop */
.hero-still {
  background:
    linear-gradient(180deg, #FAF6EC 0%, var(--paper-soft) 60%, #F1EBDA 100%),
    var(--paper-soft);
}

/* ============================================================================
   HOUSE GRID — the v1 product grid, restored & sharpened
   ============================================================================ */
.house-grid-section {
  padding: var(--s-7) 0 var(--s-8);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.hg-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-6);
  margin: var(--s-5) 0 var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.hg-head-l { display: flex; flex-direction: column; gap: 16px; max-width: 64ch; }
.hg-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--ink);
}
.hg-h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.hg-lede {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 350;
  margin: 0;
  max-width: 60ch;
}
.hg-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
  align-self: end;
}
.hg-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.hg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--rule);
}
.hg-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) var(--s-5) var(--s-5);
  background: var(--paper);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  transition: background 200ms ease;
  min-height: 320px;
}
.hg-card:hover { background: var(--paper-soft); }
.hg-card:nth-child(-n+4) { border-top: 1px solid var(--rule); }
.hg-card-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.hg-card-bottle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) 0;
}
.hg-card-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.hg-card-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hg-card-house {
  font-family: "Fraunces", serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hg-card-name {
  font-family: "Fraunces", serif;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 350;
  margin-top: 2px;
}
.hg-card-name em { font-style: italic; }
.hg-card-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.hg-card-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink);
}
.hg-card-size {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .hg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hg-grid { grid-template-columns: 1fr; }
  .hg-head { grid-template-columns: 1fr; }
}

/* ============================================================================
   CÉCILE SECTION — bigger, sharper, with portrait + sample answers
   ============================================================================ */
/* Reset old layout — we replace .cecile-section .grid with explicit rows */
.cecile-section .grid { display: contents; }
.cecile-section .left { display: contents; }

/* portrait + intro row */
.cs-portrait-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: stretch;
  margin: var(--s-5) 0 var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}
.cs-portrait-row > * { min-width: 0; }
.cs-portrait { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-portrait-frame {
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid rgba(245, 241, 232, 0.18);
  background: #0d0807;
  overflow: hidden;
  position: relative;
}
.cs-portrait-frame svg { display: block; width: 100%; height: 100%; }

/* Portrait placeholder — tonal photo plate, no SVG figure drawing */
.cs-portrait-plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 100% at 50% 35%, rgba(245,241,232,0.08) 0%, transparent 65%),
    linear-gradient(180deg, #1a120e 0%, #0d0807 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "JetBrains Mono", monospace;
}
.cs-portrait-plate-corner {
  position: absolute;
  font-size: 14px;
  color: rgba(245,241,232,0.32);
  font-weight: 300;
  line-height: 1;
}
.cs-pp-tl { top: 14px; left: 16px; }
.cs-pp-tr { top: 14px; right: 16px; }
.cs-pp-bl { bottom: 14px; left: 16px; }
.cs-pp-br { bottom: 14px; right: 16px; }
.cs-portrait-plate-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-pp-line {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.cs-pp-line.cs-pp-sub {
  letter-spacing: 0.18em;
  color: rgba(245,241,232,0.32);
  font-style: italic;
  text-transform: none;
  font-family: "Fraunces", serif;
  font-size: 11px;
}
.cs-portrait-plate-stamp {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  opacity: 0.78;
}
.cs-portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(245, 241, 232, 0.012) 0px,
      rgba(245, 241, 232, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
}
.cs-portrait-cap {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.45);
}
.cs-portrait-cap .cs-portrait-num { color: var(--accent); }
.cs-portrait-cap .cs-portrait-credit { text-align: right; max-width: 32ch; line-height: 1.5; }

.cs-intro { display: flex; flex-direction: column; padding-top: 8px; }
.cs-headline {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 7.2vw, 112px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 var(--s-5);
  color: var(--paper);
  text-wrap: balance;
}
.cs-headline em { font-style: italic; color: var(--accent); font-weight: 300; }
.cs-bio {
  font-family: "Fraunces", serif;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 350;
  color: rgba(245, 241, 232, 0.78);
  max-width: 50ch;
  margin: 0 0 var(--s-6);
}
.cs-credentials {
  list-style: none; padding: 0; margin: 0 0 var(--s-6);
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}
.cs-credentials li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-5);
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  align-items: baseline;
}
.cs-cred-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
}
.cs-cred-v {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--paper);
}
.cs-signature {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 4px;
  max-width: 280px;
}
.cs-signature svg { width: 100%; height: auto; max-height: 56px; }
.cs-sig-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.45);
}

/* Talk row */
.cs-talk-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: start;
  margin-bottom: var(--s-7);
}
.cs-talk-row > * { min-width: 0; }
.cs-talk-head { padding-top: 8px; }
.cs-talk-head .eyebrow {
  color: var(--accent);
  margin-bottom: 12px;
}
.cs-talk-h {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72;
  margin: 0;
  color: var(--paper);
  text-wrap: balance;
  max-width: 28ch;
}
.cs-talk-h em { font-style: italic; color: var(--accent); font-weight: 300; }
.cs-talk-h .scent-typer { max-width: 100%; }

/* Archive — recent answers */
.cs-archive { padding-top: var(--s-7); border-top: 1px solid rgba(245, 241, 232, 0.14); }
.cs-archive-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}
.cs-archive-head .eyebrow { color: rgba(245, 241, 232, 0.55); }
.cs-archive-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 241, 232, 0.4);
  text-transform: uppercase;
}
.cs-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid rgba(245, 241, 232, 0.14);
}
.cs-archive-card {
  padding: var(--s-6);
  border-right: 1px solid rgba(245, 241, 232, 0.14);
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.csa-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  font-variation-settings: "opsz" 72;
}
.csa-q {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 300;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.csa-a {
  font-family: "Fraunces", serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.72);
  font-weight: 350;
  margin: 0;
}
.csa-a em { font-style: italic; color: var(--paper); }
.csa-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.csa-sig { color: var(--accent); }
.csa-time { color: rgba(245, 241, 232, 0.45); }

@media (max-width: 1100px) {
  .cs-portrait-row, .cs-talk-row { grid-template-columns: 1fr; }
  .cs-archive-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   IN RESIDENCE — clean alphabetical table
   ============================================================================ */
.residence-section { padding: var(--s-7) 0 var(--s-8); border-top: 1px solid var(--rule); background: var(--paper); }
.rs-head {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-6);
  max-width: 60ch;
}
.rs-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--ink);
}
.rs-h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.rs-lede {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 350;
  margin: 0;
}
.rs-table {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.rs-table-head {
  display: grid;
  grid-template-columns: 6fr 3fr 2fr 1fr;
  gap: var(--s-5);
  padding: 14px var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.rs-table-head .ra { text-align: right; }
.rs-row {
  display: grid;
  grid-template-columns: 6fr 3fr 2fr 1fr;
  gap: var(--s-5);
  padding: 16px var(--s-5);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 180ms ease;
  align-items: baseline;
}
.rs-row:last-of-type { border-bottom: 0; }
.rs-row:hover { background: var(--paper-soft); }
.rs-house {
  font-family: "Fraunces", serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 350;
  color: var(--ink);
}
.rs-city {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.rs-since {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.rs-skus {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--accent);
}
.ra { text-align: right; }
.rs-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.rs-foot-link {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.rs-foot-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 800px) {
  .rs-table-head, .rs-row { grid-template-columns: 1fr 1fr; }
  .rs-since, .rs-skus { display: none; }
}


/* ============================================================================
   V3 ADDITIONS — vault, atlas, beauty index v2, climate v4, scent typer,
   floating cécile, hero tighten, talk-row scent integration
   ============================================================================ */

/* ---------- HERO TIGHTEN ---------- */
.hero-v2 .hero-v2-grid {
  padding-top: var(--s-7);
  gap: var(--s-7);
  min-height: auto;
}
.hero-v2 { padding: 0 0 var(--s-8); }
.dict-defs { gap: var(--s-4); }
.dict-usage { margin-top: var(--s-5); padding-top: var(--s-4); }
.hero-actions { margin-top: var(--s-5); padding-top: var(--s-4); }

/* kill any leftover scent-band rendering */
.scent-band { display: none !important; }

/* ---------- SCENT TYPEWRITER (now lives in CecileSection) ---------- */
.scent-typer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}
.scent-typer .st-prefix {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.42em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
}
.scent-typer .st-typed {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 350;
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 0.08em;
  min-width: 12ch;
  display: inline-block;
  white-space: nowrap;
}
.scent-typer .st-caret {
  display: inline-block;
  width: 2px; height: 0.85em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: caret-blink 1s steps(2) infinite;
}
.cs-talk-h-em { display: block; margin-top: 0.2em; color: var(--paper); opacity: 0.7; font-size: 0.7em; font-weight: 350; }
.cs-talk-h-sub {
  font-family: "Fraunces", serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 350;
  line-height: 1.4;
  margin: 8px 0 0;
  color: var(--ink-2);
}
.cs-talk-h-sub em { color: var(--accent); }

/* ---------- FLOATING CÉCILE — quiet handle bottom-right ---------- */
.fc-root {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.fc-root.fc-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fc-button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 16px;
  background: #1c1a17;
  color: #f5f1e8;
  border: 1px solid #2a2724;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Fraunces", serif;
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.3);
  transition: all 280ms ease;
  position: relative;
}
.fc-root.fc-hover .fc-button {
  padding-right: 26px;
  background: #232017;
  border-color: var(--accent);
}
.fc-mark {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  width: 28px; height: 28px;
  border: 1px solid #3a342a;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0e0d0b;
  flex-shrink: 0;
}
.fc-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
  text-align: left;
}
.fc-line em {
  font-family: "Fraunces", serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 350;
  color: #f5f1e8;
}
.fc-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9c9387;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 380ms ease, margin-top 280ms ease, opacity 280ms ease;
  opacity: 0;
}
.fc-root.fc-hover .fc-sub {
  max-width: 280px;
  opacity: 1;
  margin-top: 2px;
}
.fc-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--accent);
  margin-left: 2px;
  transition: transform 220ms ease;
}
.fc-root.fc-hover .fc-arr { transform: translateX(3px); }
.fc-dismiss {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1c1a17;
  color: #9c9387;
  border: 1px solid #3a342a;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity 220ms ease, color 220ms ease;
  z-index: 2;
}
.fc-root.fc-hover .fc-dismiss { opacity: 1; }
.fc-dismiss:hover { color: #f5f1e8; }

/* a soft "breathing" indicator on the mark when shown */
.fc-mark::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: fc-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fc-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* ============================================================================
   THE VAULT — horizontal shelf list (different from week grid)
   ============================================================================ */
.vault-section {
  padding: var(--s-7) 0 var(--s-9);
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper) 0%, #ece5d4 100%);
  position: relative;
}
.vault-section::after {
  /* a faint shelf rule */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
}
.vault-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin: var(--s-5) 0 var(--s-7);
}
.vault-head-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-4);
}
.vault-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--ink);
}
.vault-h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.vault-head-r {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 350;
  margin: 0;
  max-width: 50ch;
  padding-bottom: 8px;
  border-bottom: 0;
}

.vault-list {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.vault-row {
  display: grid;
  grid-template-columns: 56px 100px 180px 1fr 180px 40px;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 220ms ease;
  position: relative;
}
.vault-row:last-child { border-bottom: 0; }
.vault-row:hover { background: rgba(180, 88, 68, 0.05); }
.vault-row:hover .vr-arr { color: var(--accent); transform: translateX(4px); }
.vr-idx {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 28px;
  color: var(--ink-soft);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
}
.vr-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  border-radius: 100px;
  text-align: center;
  width: fit-content;
}
.vr-bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
}
.vr-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vr-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.vr-name {
  display: block;
}
.vr-name .vr-house { display: block; margin-bottom: 4px; }
.vr-name .vr-prod { display: block; }
.vr-house {
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.vr-prod {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 350;
  line-height: 1.15;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  display: block;
}
.vr-note {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  font-weight: 350;
}
.vr-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.vr-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.vr-size {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.vr-stock {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
  white-space: nowrap;
}
.vr-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  color: var(--ink-soft);
  text-align: right;
  transition: transform 220ms ease, color 220ms ease;
}
.vault-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-5) var(--s-4) 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vault-foot-mark { color: var(--muted); }
.vault-foot-link {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.vault-foot-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 1100px) {
  .vault-row {
    grid-template-columns: 40px 100px 1fr 140px;
  }
  .vault-row .vr-bottle { display: none; }
  .vault-row .vr-arr { display: none; }
  .vault-head { grid-template-columns: 1fr; }
}

/* ============================================================================
   CLIMATE V4 — bottle-paired picks
   ============================================================================ */
.climate-card-v3 { display: none; }
.cc-v4 {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-7);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.cc-v4::before {
  /* a soft thermal-map gradient */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(180,88,68,0.18) 0%, transparent 60%),
    radial-gradient(600px 600px at 10% 90%, rgba(120,140,160,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cc-v4-head {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s-7);
  align-items: start;
  position: relative;
  z-index: 1;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}
.cc-v4-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.cc-v4-h {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  margin: 0 0 var(--s-4);
  color: var(--paper);
}
.cc-v4-h em { font-style: italic; color: var(--accent); font-weight: 300; }
.cc-v4-body {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(245,241,232,0.78);
  font-weight: 350;
  max-width: 52ch;
  margin: 0;
}
.cc-v4-dial {
  border: 1px solid rgba(245,241,232,0.2);
  padding: var(--s-5);
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-v4-dial-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.cc-v4-dial-row .k { color: rgba(245,241,232,0.55); text-transform: uppercase; letter-spacing: 0.18em; font-size: 9px; white-space: nowrap; }
.cc-v4-dial-row .v { color: var(--paper); font-size: 14px; font-family: "Fraunces", serif; font-style: italic; font-weight: 350; white-space: nowrap; }
.cc-v4-dial-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(245,241,232,0.12);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.cc-v4-picks {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.cc-v4-pick {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  border-right: 1px solid rgba(245,241,232,0.12);
  cursor: pointer;
  transition: background 220ms ease;
  align-items: center;
}
.cc-v4-pick:last-child { border-right: 0; }
.cc-v4-pick:hover { background: rgba(245,241,232,0.04); }
.cc-v4-pick:hover .cc-v4-pick-arr { color: var(--accent); transform: translateX(4px); }
.cc-v4-pick-bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: linear-gradient(180deg, rgba(245,241,232,0.04) 0%, rgba(245,241,232,0.01) 100%);
  border: 1px solid rgba(245,241,232,0.08);
}
.cc-v4-pick-meta { display: flex; flex-direction: column; gap: 4px; position: relative; }
.cc-v4-pick-when {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cc-v4-pick-layer {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(245,241,232,0.55);
}
.cc-v4-pick-name {
  font-family: "Fraunces", serif;
  font-size: 22px;
  line-height: 1.15;
  color: var(--paper);
  margin-top: 6px;
  font-weight: 350;
  font-variation-settings: "opsz" 144;
}
.cc-v4-pick-name em { font-style: italic; color: var(--paper); }
.cc-v4-pick-reason {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(245,241,232,0.6);
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 350;
}
.cc-v4-pick-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: rgba(245,241,232,0.4);
  margin-top: 10px;
  transition: transform 220ms ease, color 220ms ease;
}

@media (max-width: 1000px) {
  .cc-v4-head { grid-template-columns: 1fr; }
  .cc-v4-picks { grid-template-columns: 1fr; }
  .cc-v4-pick { border-right: 0; border-bottom: 1px solid rgba(245,241,232,0.12); }
}

/* ============================================================================
   ATLAS — geographic residence, replaces long table
   ============================================================================ */
.atlas-section {
  padding: var(--s-7) 0 var(--s-9);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.atlas-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin: var(--s-5) 0 var(--s-7);
}
.atlas-head-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-4);
}
.atlas-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--ink);
}
.atlas-h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.atlas-head-r {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 350;
  margin: 0;
  max-width: 50ch;
  padding-bottom: 8px;
}

/* ---------- Atlas of What Grows — map + postcard stack ---------- */
.atlas-globe { background: #f5f1e8; }

.ag-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-6);
  align-items: stretch;
  margin-bottom: var(--s-6);
}

/* === MAP COLUMN === */
.ag-map-col {
  position: relative;
}
.ag-map-frame {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(176,68,40,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #f8f4ea 0%, #f0eadb 100%);
  border: 1px solid var(--rule);
  padding: var(--s-5) var(--s-5) var(--s-4);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ag-map-corners {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--muted);
}
.ag-corner { position: absolute; line-height: 1; }
.ag-corner.tl { top: 0; left: 0; }
.ag-corner.tr { top: 0; right: 0; }
.ag-corner.bl { bottom: 0; left: 0; }
.ag-corner.br { bottom: 0; right: 0; }

.ag-map-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: 4px 0 var(--s-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.ag-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.ag-title {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 350;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
  text-align: center;
  white-space: nowrap;
}
.ag-title em {
  font-style: italic;
  font-weight: 350;
}
.ag-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.ag-map {
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 360px;
  display: block;
}
.ag-map .ag-grat { stroke: rgba(28,26,23,0.18); stroke-width: 0.4; fill: none; }
.ag-map .ag-grat-eq { stroke: rgba(28,26,23,0.35); stroke-width: 0.6; }
.ag-map .ag-grat-pm { stroke: rgba(28,26,23,0.3); stroke-width: 0.5; stroke-dasharray: none; }
.ag-map .ag-grat-labels text {
  font-family: "JetBrains Mono", monospace;
  font-size: 6px;
  letter-spacing: 0.18em;
  fill: rgba(28,26,23,0.4);
  text-transform: uppercase;
}
.ag-map .ag-region text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: rgba(28,26,23,0.32);
  text-transform: uppercase;
  font-weight: 350;
  font-variation-settings: "opsz" 144;
}
.ag-map .ag-hemi text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.4em;
  fill: rgba(28,26,23,0.45);
  text-transform: uppercase;
}
.ag-map .ag-compass text {
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  letter-spacing: 0.2em;
  fill: var(--ink);
}
.ag-map .ag-compass circle {
  stroke: rgba(28,26,23,0.5);
  stroke-width: 0.5;
}
.ag-map .ag-legend text {
  font-family: "JetBrains Mono", monospace;
  font-size: 6.5px;
  letter-spacing: 0.16em;
  fill: rgba(28,26,23,0.55);
  text-transform: uppercase;
}

.ag-pin .ag-pin-label {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.02em;
  fill: var(--ink);
  font-variation-settings: "opsz" 144;
  pointer-events: none;
  transition: font-size 220ms ease, fill 220ms ease;
}
.ag-pin.is-active .ag-pin-label {
  font-size: 11px;
  fill: var(--accent);
  font-weight: 500;
}
.ag-pin-halo {
  animation: ag-halo 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ag-halo {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50%      { transform: scale(1.15); opacity: 0.95; }
}

.ag-map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-wrap: wrap;
}
.ag-resume {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--accent);
}

/* === POSTCARD COLUMN === */
.ag-postcard-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.ag-stack {
  position: relative;
  flex: 1;
  min-height: 460px;
}
.ag-card-back {
  position: absolute;
  inset: 0;
  background: #efe7d2;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(28,26,23,0.04);
}
.ag-back-1 { transform: rotate(-1.4deg) translate(8px, 6px); }
.ag-back-2 { transform: rotate(2.2deg) translate(-12px, 10px); background: #ebe2cb; }

.ag-card {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(28,26,23,0.012) 12px 13px),
    #fbf6e9;
  border: 1px solid rgba(28,26,23,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 6px 16px -8px rgba(28,26,23,0.18);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  animation: ag-card-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ag-card-in {
  from { opacity: 0; transform: translateY(8px) rotate(-0.4deg); }
  to   { opacity: 1; transform: none; }
}

.ag-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed rgba(28,26,23,0.25);
}
.ag-stamp {
  width: 62px;
  height: 78px;
  background: #b04428;
  padding: 3px;
  position: relative;
}
.ag-stamp::before {
  /* perforation */
  content: "";
  position: absolute;
  inset: -3px;
  background:
    radial-gradient(circle at 4px 4px, transparent 2.5px, transparent 2.5px),
    radial-gradient(circle, transparent 2.5px, #fbf6e9 2.6px) 0 0/8px 8px;
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ag-stamp-inner {
  height: 100%;
  border: 1px solid rgba(245,241,232,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  color: #fbf6e9;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
}
.ag-stamp-num {
  font-size: 8px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.ag-stamp-label {
  font-family: "Fraunces", serif;
  font-size: 9px;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.1;
  font-variation-settings: "opsz" 9;
}
.ag-stamp-fee {
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.ag-postmark {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}
.ag-postmark-ring {
  width: 100px;
  height: 100px;
  border: 1.5px solid rgba(176,68,40,0.5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
  color: rgba(176,68,40,0.7);
  transform: rotate(-8deg);
  position: relative;
}
.ag-postmark-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176,68,40,0.3);
  border-radius: 50%;
}
.ag-postmark-text {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 8px;
  line-height: 1.3;
}
.ag-postmark-date {
  font-size: 9px;
  letter-spacing: 0.2em;
  margin-top: 2px;
  border-top: 1px solid rgba(176,68,40,0.4);
  padding-top: 3px;
}

.ag-card-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(28,26,23,0.12);
}
.ag-card-coord {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.ag-card-city {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--ink);
}
.ag-card-country {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  font-weight: 350;
}

.ag-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
}
.ag-grows-line {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ag-grows-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.ag-grows-text {
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 350;
  line-height: 1.4;
  color: var(--ink);
  font-variation-settings: "opsz" 17;
}

.ag-terroir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(28,26,23,0.1);
  padding-top: var(--s-3);
}
.ag-terroir li {
  display: grid;
  grid-template-columns: 12px 130px 1fr;
  gap: 10px;
  align-items: baseline;
}
.ag-ter-bullet {
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 18px;
}
.ag-ter-what {
  font-family: "Fraunces", serif;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 400;
}
.ag-ter-what em { font-style: italic; }
.ag-ter-note {
  font-family: "Fraunces", serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 350;
  line-height: 1.4;
}

.ag-houses-block {
  border-top: 1px solid rgba(28,26,23,0.1);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ag-houses-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ag-houses-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}
.ag-house {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.4;
}
.ag-house + .ag-house::before {
  content: "·";
  margin-right: 12px;
  margin-left: -10px;
  color: var(--muted);
  font-style: normal;
}

.ag-cecile {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(28,26,23,0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ag-cecile-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.ag-cecile-quote {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  font-weight: 350;
}

/* === DOCK === */
.ag-dock {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--rule);
  background: #fbf6e9;
}
.ag-dock-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: background 180ms ease;
}
.ag-dock-btn:last-child { border-right: 0; }
.ag-dock-btn:hover { background: rgba(176,68,40,0.05); }
.ag-dock-btn.is-active { background: var(--ink); }
.ag-dock-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.ag-dock-btn.is-active .ag-dock-num { color: rgba(245,241,232,0.5); }
.ag-dock-city {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.ag-dock-btn.is-active .ag-dock-city { color: var(--paper); }

@media (max-width: 1100px) {
  .ag-wrap { grid-template-columns: 1fr; }
  .ag-stack { min-height: 540px; }
}
@media (max-width: 760px) {
  .ag-card-city { font-size: 36px; }
  .ag-stamp { width: 52px; height: 66px; }
  .ag-postmark-ring { width: 80px; height: 80px; }
  .ag-terroir li { grid-template-columns: 12px 1fr; }
  .ag-ter-note { grid-column: 2; }
  .ag-dock { grid-template-columns: repeat(4, 1fr); }
  .ag-dock-btn:nth-child(4) { border-right: 0; }
  .ag-dock-btn:nth-child(-n+4) { border-bottom: 1px solid var(--rule); }
}

.atlas-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.atlas-city {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 220px;
  padding: var(--s-5);
  background: var(--paper);
  cursor: pointer;
  transition: background 200ms ease;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.atlas-city:hover { background: var(--paper-soft); }
.atlas-city-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.ac-idx {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
  font-weight: 350;
}
.ac-city {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}
.ac-coord {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.ac-coord em { font-style: italic; color: var(--accent); font-family: "Fraunces", serif; text-transform: none; letter-spacing: 0.02em; font-size: 12px; }
.ac-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  color: var(--accent);
  font-weight: 500;
}
.ac-houses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ac-houses li {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 350;
  line-height: 1.3;
}
.ac-houses li.ac-more {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.atlas-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-5) 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.atlas-foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.atlas-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* hide the old residence-section */
.residence-section { display: none !important; }

@media (max-width: 1000px) {
  .atlas-head { grid-template-columns: 1fr; }
  .atlas-cities { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .atlas-cities { grid-template-columns: 1fr; }
}

/* ============================================================================
   BEAUTY INDEX V2 — dossiers + traces + stats
   ============================================================================ */
.index-section { display: none; }
.bx-section {
  padding: var(--s-7) 0 var(--s-9);
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.bx-section .chapter-mark { color: rgba(245,241,232,0.6); border-bottom-color: rgba(245,241,232,0.2); }
.bx-section .chapter-mark .cm-numeral { color: var(--accent); }
.bx-section .chapter-mark .cm-folio { color: rgba(245,241,232,0.4); }
.bx-section .container { color: var(--paper); }

.bx-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin: var(--s-5) 0 var(--s-7);
}
.bx-head-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-4);
}
.bx-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  color: var(--paper);
}
.bx-h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.bx-head-r {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245,241,232,0.7);
  font-weight: 350;
  margin: 0;
  max-width: 50ch;
}

.bx-main {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-7);
  margin: var(--s-7) 0;
  align-items: start;
}
.bx-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(245,241,232,0.18);
  margin-bottom: var(--s-5);
}
.bx-mini-head a {
  color: var(--paper);
  border-bottom: 1px solid var(--paper);
  padding-bottom: 2px;
}
.bx-mini-head a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.bx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-style: normal;
}
.bx-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: bx-pulse 2.4s ease-in-out infinite;
}
@keyframes bx-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.bx-doss-list { list-style: none; margin: 0; padding: 0; }
.bx-doss {
  display: grid;
  grid-template-columns: 80px 1fr 24px;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid rgba(245,241,232,0.12);
  cursor: pointer;
  transition: padding 220ms ease;
}
.bx-doss:hover { padding-left: var(--s-3); }
.bx-doss:hover .bx-doss-arr { color: var(--accent); transform: translateX(4px); }
.bx-doss:last-child { border-bottom: 0; }
.bx-doss-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  font-weight: 350;
  font-variation-settings: "opsz" 144;
}
.bx-doss-title {
  font-family: "Fraunces", serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 350;
  color: var(--paper);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}
.bx-doss-sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245,241,232,0.6);
  font-weight: 350;
  margin: 0 0 10px;
  max-width: 60ch;
}
.bx-doss-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.4);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bx-doss-meta em { font-family: "Fraunces", serif; font-size: 12px; color: var(--accent); text-transform: none; letter-spacing: 0; }
.bx-doss-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: rgba(245,241,232,0.3);
  align-self: center;
  transition: transform 220ms ease, color 220ms ease;
}

.bx-traces {
  border: 1px solid rgba(245,241,232,0.2);
  padding: var(--s-5);
  background: rgba(0,0,0,0.2);
}
.bx-trace-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bx-trace {
  border-left: 1px solid var(--accent);
  padding-left: 14px;
}
.bx-trace-src {
  font-family: "Fraunces", serif;
  font-size: 16px;
  color: var(--paper);
  font-weight: 350;
  letter-spacing: -0.01em;
}
.bx-trace-note {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(245,241,232,0.55);
  margin-top: 2px;
  line-height: 1.4;
}
.bx-trace-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(245,241,232,0.12);
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(245,241,232,0.5);
  line-height: 1.5;
  font-weight: 350;
}

.bx-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--s-7);
  border-top: 1px solid rgba(245,241,232,0.2);
  border-left: 1px solid rgba(245,241,232,0.2);
}
.bx-stat {
  border-right: 1px solid rgba(245,241,232,0.2);
  border-bottom: 1px solid rgba(245,241,232,0.2);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bx-stat-v {
  font-family: "Fraunces", serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.bx-stat-k {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--paper);
  font-weight: 350;
  margin-top: 8px;
}
.bx-stat-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.4);
  margin-top: 4px;
}

@media (max-width: 1000px) {
  .bx-head { grid-template-columns: 1fr; }
  .bx-main { grid-template-columns: 1fr; }
  .bx-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   CLIMATE V6 — barometer reading + an instruction
   ============================================================================ */
.climate-row .cv6-reading {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding: var(--s-7) 0 var(--s-6);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.climate-row .cv6-reading > * { min-width: 0; }
.climate-row .cv6-reading-l { display: flex; flex-direction: column; gap: 18px; }
.climate-row .cv6-loc {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.climate-row .cv6-loc em {
  font-style: italic;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.08em;
  font-family: "Fraunces", serif;
  font-size: 14px;
  margin-left: 6px;
}
.climate-row .cv6-verdict {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.climate-row .cv6-verdict em { font-style: italic; color: var(--accent); }

.climate-row .cv6-dials {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.climate-row .cv6-dials li {
  padding: 0 22px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.climate-row .cv6-dials li:first-child { padding-left: 0; border-left: none; }
.climate-row .cv6-dial-v {
  font-family: "Fraunces", serif;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.climate-row .cv6-dial-v sup {
  font-size: 0.42em;
  vertical-align: super;
  font-style: italic;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0;
}
.climate-row .cv6-dial-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.climate-row .cv6-dial-flag {
  font-family: "Fraunces", serif;
  font-size: 12px;
  font-style: italic;
  color: var(--accent);
}
.climate-row .cv6-refresh {
  grid-column: 1 / -1;
  margin-top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.climate-row .cv6-instructions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}
.climate-row .cv6-prim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  align-items: center;
}
.climate-row .cv6-prim > * { min-width: 0; }
.climate-row .cv6-prim:hover .cv6-prim-rec-arr { transform: translateX(4px); }
.climate-row .cv6-prim-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.climate-row .cv6-prim-h {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
.climate-row .cv6-prim-h em { font-style: italic; color: var(--accent); font-weight: 300; }
.climate-row .cv6-prim-h-mute { color: var(--muted); font-style: italic; }
.climate-row .cv6-prim-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}
.climate-row .cv6-prim-rec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.climate-row .cv6-prim-rec-bottle { display: flex; align-items: center; justify-content: center; }
.climate-row .cv6-prim-rec-house {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.climate-row .cv6-prim-rec-name {
  font-family: "Fraunces", serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 14px;
}
.climate-row .cv6-prim-rec-name em { font-style: italic; color: var(--accent); }
.climate-row .cv6-prim-rec-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform 200ms;
}

.climate-row .cv6-second {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 180ms;
}
.climate-row .cv6-second:hover { background: var(--paper); }
.climate-row .cv6-second:hover .cv6-second-arr { transform: translateX(4px); color: var(--accent); }
.climate-row .cv6-second-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.climate-row .cv6-second-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.climate-row .cv6-second-bottle { width: 60px; display: flex; align-items: center; justify-content: center; }
.climate-row .cv6-second-name {
  font-family: "Fraunces", serif;
  font-size: 17px;
  color: var(--ink);
}
.climate-row .cv6-second-name em { font-style: italic; color: var(--accent); }
.climate-row .cv6-second-reason {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin-top: 4px;
}
.climate-row .cv6-second-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--ink-soft);
  transition: transform 180ms, color 180ms;
}

@media (max-width: 1000px) {
  .climate-row .cv6-reading { gap: 24px; }
  .climate-row .cv6-dials li { padding: 0 12px; }
  .climate-row .cv6-prim { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .climate-row .cv6-dials { grid-template-columns: 1fr; gap: 14px; }
  .climate-row .cv6-dials li { border-left: none; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
}

/* ============================================================================
   MEMBERSHIP V2 — confident strip on dark, perks as a numbered file
   ============================================================================ */
.member-v2 {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
  margin-top: var(--s-9);
}
.member-v2 .container { max-width: var(--container); }
.member-v2 .mv-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 80px;
  align-items: start;
}
.member-v2 .mv-grid > * { min-width: 0; }
.member-v2 .mv-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.45);
  margin-bottom: 32px;
}
.member-v2 .mv-h {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 32px;
  color: var(--paper);
}
.member-v2 .mv-h em { font-style: italic; color: var(--paper); font-weight: 300; }
.member-v2 .mv-price {
  display: block;
  margin-top: 12px;
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.member-v2 .mv-price-unit {
  font-style: italic;
  color: rgba(245,241,232,0.55);
  font-size: 0.55em;
  font-weight: 300;
  letter-spacing: 0;
}
.member-v2 .mv-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(245,241,232,0.78);
  max-width: 46ch;
  margin: 0 0 40px;
}
.member-v2 .mv-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.member-v2 .mv-cta {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 18px 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms, opacity 180ms;
  white-space: nowrap;
}
.member-v2 .mv-cta:hover { transform: translateY(-1px); opacity: 0.92; }
.member-v2 .mv-aside {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(245,241,232,0.55);
}
.member-v2 .mv-fineprint {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(245,241,232,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.5);
}
.member-v2 .mv-fineprint a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(180,88,68,0.4);
}
.member-v2 .mv-fineprint a:hover { border-bottom-color: var(--accent); }

.member-v2 .mv-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245,241,232,0.16);
}
.member-v2 .mv-perk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(245,241,232,0.16);
  align-items: baseline;
}
.member-v2 .mv-perk-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 500;
}
.member-v2 .mv-perk-k {
  font-family: "Fraunces", serif;
  font-size: 19px;
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 6px;
}
.member-v2 .mv-perk-v {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245,241,232,0.62);
  max-width: 52ch;
}

.member-v2 .mv-quote {
  margin: var(--s-9) 0 0;
  padding-top: var(--s-7);
  border-top: 1px solid rgba(245,241,232,0.16);
  text-align: center;
}
.member-v2 .mv-quote blockquote {
  font-family: "Fraunces", serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: rgba(245,241,232,0.92);
  max-width: 72ch;
  margin: 0 auto;
  text-wrap: balance;
}
.member-v2 .mv-quote figcaption {
  margin-top: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.42);
}

@media (max-width: 1000px) {
  .member-v2 .mv-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Suppress legacy .member-section + .fc-root rules — retired components */
.member-section { padding: 0 !important; border-top: 0 !important; }
.fc-root { display: none !important; }

/* ============================================================================
   FLOATING CÉCILE V2 — handle + popover with mini chat
   ============================================================================ */
.fcv2-handle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 380ms, transform 380ms;
  pointer-events: none;
}
.fcv2-handle.fcv2-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fcv2-handle.fcv2-handle-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.fcv2-dismiss {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 180ms;
}
.fcv2-dismiss:hover { background: var(--ink); color: var(--paper); }
.fcv2-handle-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 14px 18px 14px 14px;
  cursor: pointer;
  box-shadow: 0 16px 48px rgba(0,0,0,0.32);
  transition: transform 180ms;
  text-align: left;
}
.fcv2-handle-btn:hover { transform: translateY(-2px); }
.fcv2-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  padding-right: 12px;
  border-right: 1px solid rgba(245,241,232,0.18);
}
.fcv2-line { display: flex; flex-direction: column; gap: 2px; }
.fcv2-line em {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.1;
  color: var(--paper);
}
.fcv2-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.48);
}
.fcv2-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--accent);
  margin-left: 6px;
}

/* The popover */
.fcv2-pop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 71;
  width: 420px;
  max-width: calc(100vw - 48px);
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  visibility: hidden;
  pointer-events: none;
}
.fcv2-pop.fcv2-open {
  visibility: visible;
  pointer-events: auto;
}
.fcv2-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(245,241,232,0.14);
}
.fcv2-pop-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fcv2-pop-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
  padding-right: 12px;
  border-right: 1px solid rgba(245,241,232,0.16);
}
.fcv2-pop-name {
  font-family: "Fraunces", serif;
  font-size: 16px;
  color: var(--paper);
  line-height: 1.1;
}
.fcv2-pop-name em { font-style: italic; color: var(--accent); }
.fcv2-pop-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.5);
  margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.fcv2-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6dba8a;
  box-shadow: 0 0 0 2px rgba(109,186,138,0.18);
}
.fcv2-pop-close {
  background: transparent;
  border: 1px solid rgba(245,241,232,0.18);
  color: var(--paper);
  width: 28px; height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms;
}
.fcv2-pop-close:hover { background: rgba(245,241,232,0.08); }

.fcv2-pop-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.fcv2-pop-body::-webkit-scrollbar { width: 6px; }
.fcv2-pop-body::-webkit-scrollbar-thumb { background: rgba(245,241,232,0.18); }
.fcv2-opener {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(245,241,232,0.78);
  padding: 10px 4px;
  text-wrap: pretty;
}
.fcv2-u {
  align-self: flex-end;
  background: rgba(245,241,232,0.08);
  border: 1px solid rgba(245,241,232,0.12);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper);
  max-width: 84%;
}
.fcv2-c {
  align-self: flex-start;
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  max-width: 88%;
  padding: 4px 6px;
}
.fcv2-c em { font-style: italic; color: var(--accent); }
.fcv2-c .redact { color: rgba(245,241,232,0.85); }
.fcv2-thinking { opacity: 0.5; font-style: italic; }

.fcv2-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
  border-top: 1px solid rgba(245,241,232,0.1);
  padding-top: 12px;
}
.fcv2-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.62);
  border: 1px solid rgba(245,241,232,0.16);
  padding: 6px 10px;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.fcv2-chip:hover { background: rgba(245,241,232,0.08); color: var(--paper); }

.fcv2-pop-input {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(245,241,232,0.14);
}
.fcv2-pop-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--paper);
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-style: italic;
  padding: 16px 20px;
  outline: none;
}
.fcv2-pop-input input::placeholder {
  color: rgba(245,241,232,0.42);
  font-style: italic;
}
.fcv2-send {
  background: transparent;
  color: var(--accent);
  border: none;
  border-left: 1px solid rgba(245,241,232,0.14);
  padding: 16px 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms;
}
.fcv2-send:hover { background: rgba(180,88,68,0.12); }

@media (max-width: 600px) {
  .fcv2-pop {
    right: 12px; left: 12px; bottom: 12px;
    width: auto;
    height: 70vh;
  }
  .fcv2-handle { right: 12px; bottom: 12px; }
}

/* ============================================================================
   CÉCILE PORTRAIT — reusable component
   ============================================================================ */
.cp-wrap {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ink);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.cp-wrap > svg { width: 100%; height: 100%; display: block; }
.cp-wrap.cp-ring::after {
  content: "";
  position: absolute; inset: -3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}

/* FCV2 portrait pieces */
.fcv2-portrait {
  display: inline-flex;
  flex-shrink: 0;
  border-right: 1px solid rgba(245,241,232,0.18);
  padding-right: 12px;
}
.fcv2-mini-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: #6dba8a;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.fcv2-pop-portrait { display: inline-flex; flex-shrink: 0; }

/* ============================================================================
   CÉCILE PRODUCT CARD (in chat replies)
   ============================================================================ */
.cpc {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 14px;
  margin: 8px 0 6px;
  cursor: pointer;
  transition: transform 180ms, box-shadow 180ms;
  border: 1px solid var(--rule);
  max-width: 360px;
}
.cpc:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.cpc-dark {
  background: rgba(245,241,232,0.06);
  color: var(--paper);
  border: 1px solid rgba(245,241,232,0.16);
}
.cpc-dark:hover { background: rgba(245,241,232,0.09); }
.cpc-bottle {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.cpc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpc-house {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cpc-name {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.15;
}
.cpc-name em { font-style: italic; color: var(--accent); }
.cpc-line {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}
.cpc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cpc-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cpc-add {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 5px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.85;
  transition: background 140ms, opacity 140ms;
}
.cpc-dark .cpc-add { border-color: var(--accent); color: var(--accent); }
.cpc-add:hover { opacity: 1; background: rgba(180,88,68,0.1); }

/* ============================================================================
   CÉCILE SECTION V2 — chat-led, credentials sidebar
   ============================================================================ */
.cs-grid-v2 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 920px) {
  .cs-grid-v2 { grid-template-columns: 1fr; gap: 40px; }
  .cs-portrait-frame-v2 { max-width: 360px; }
}
.cs-credentials {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-portrait-frame-v2 {
  margin: 0 0 4px;
  width: auto;
  display: inline-flex;
}
.cs-portrait-frame-v2 .cp-wrap {
  width: 240px !important;
  height: 240px !important;
  border-radius: 50%;
}
.cs-cred-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.cs-cred-meta .cs-portrait-num { color: var(--accent); }
.cs-cred-name {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
  color: var(--paper);
}
.cs-cred-name em { font-style: italic; color: var(--accent); }
.cs-cred-bio {
  font-family: "Fraunces", serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245,241,232,0.78);
  margin: 0;
}
.cs-cred-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(245,241,232,0.16);
  display: flex; flex-direction: column;
}
.cs-cred-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  padding: 7px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  border-bottom: 1px dashed rgba(245,241,232,0.12);
  color: rgba(245,241,232,0.7);
}
.cs-cred-list li:last-child { border-bottom: none; }
.cs-cred-list .cs-k { text-transform: uppercase; opacity: 0.5; }
.cs-cred-list .cs-v { color: var(--paper); }
.cs-cred-foot {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(245,241,232,0.65);
  padding-top: 10px;
}
.cs-cred-foot em { color: var(--accent); }

.cs-talk-v2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cs-talk-head-v2 .eyebrow { margin-bottom: 14px; }

/* ============================================================================
   MEMBER V3 — paper-toned membership card
   ============================================================================ */
.member-v3 {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0 120px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.member-v3 .chapter-mark { color: rgba(245,241,232,0.6); border-bottom-color: rgba(245,241,232,0.18); }
.member-v3 .chapter-mark .cm-num { color: var(--accent); }
.member-v3 .chapter-mark .cm-rule { background: rgba(245,241,232,0.3); }
.member-v3 .chapter-mark .cm-label { color: var(--paper); }
.member-v3 .chapter-mark .cm-folio { color: rgba(245,241,232,0.55); border-left-color: rgba(245,241,232,0.18); }
.member-v3 .mv3-perks-head .eyebrow { color: rgba(245,241,232,0.5); }
.member-v3 .mv3-perks-h { color: var(--paper); }
.member-v3 .mv3-perks-h em { color: var(--accent); }
.member-v3 .mv3-perk-n { color: rgba(245,241,232,0.4); }
.member-v3 .mv3-perk-k { color: var(--paper); }
.member-v3 .mv3-perk-v { color: rgba(245,241,232,0.7); }
.member-v3 .mv3-perk { border-bottom-color: rgba(245,241,232,0.12); }
.member-v3 .mv3-cta-aside { color: rgba(245,241,232,0.55); }
.member-v3 .mv3-card-fineprint { color: rgba(245,241,232,0.55); }
.member-v3 .mv3-card-fineprint a { color: var(--accent); border-bottom-color: var(--accent); }
/* keep the card paper-toned for contrast against the dark stage */
.mv3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 920px) { .mv3-grid { grid-template-columns: 1fr; gap: 48px; } }

/* The card */
.mv3-card { display: flex; flex-direction: column; gap: 18px; }
.mv3-card-paper {
  position: relative;
  background: #faf6ec;
  border: 1px solid var(--ink);
  padding: 36px 40px 32px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.06),
    0 22px 40px -28px rgba(0,0,0,0.35);
  background-image:
    repeating-linear-gradient(0deg, rgba(20,16,11,0.025) 0, rgba(20,16,11,0.025) 1px, transparent 1px, transparent 28px);
}
.mv3-card-row {
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mv3-card-top { padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.mv3-card-mark { color: var(--accent); }
.mv3-card-num { color: var(--ink); }
.mv3-card-rule { flex: 1; height: 1px; background: var(--rule); }
.mv3-card-stamp {
  letter-spacing: 0.32em;
  border: 1px solid var(--ink-soft);
  padding: 4px 8px;
  color: var(--ink-soft);
}
.mv3-card-body { padding-right: 90px; }
.mv3-card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.mv3-card-title {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: 84px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
  font-variation-settings: '"opsz" 144';
}
.mv3-card-title em { font-style: italic; color: var(--accent); }
.mv3-card-priceline {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
}
.mv3-card-price {
  font-family: "Fraunces", serif;
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.mv3-card-price-unit {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}
.mv3-card-price-strike {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.mv3-card-desc {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
  text-wrap: pretty;
  max-width: 46ch;
}
.mv3-card-foot {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  justify-content: space-between;
}
.mv3-card-foot-l, .mv3-card-foot-r { color: var(--ink-soft); }
.mv3-card-foot-c { color: var(--accent); }

.mv3-seal {
  position: absolute;
  right: 32px; top: 80px;
  width: 78px; height: 78px;
  filter: drop-shadow(0 6px 10px rgba(122,32,26,0.28));
  transform: rotate(-7deg);
  pointer-events: none;
}
@media (max-width: 720px) { .mv3-seal { right: 16px; top: 70px; width: 64px; height: 64px; } }

.mv3-card-cta-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mv3-cta {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 16px 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, transform 160ms;
}
.mv3-cta:hover { background: var(--accent); transform: translateY(-1px); }
.mv3-cta-aside {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
.mv3-card-fineprint {
  display: flex; flex-direction: column; gap: 4px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding-top: 4px;
}
.mv3-card-fineprint a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* RIGHT — perks */
.mv3-perks-wrap { display: flex; flex-direction: column; gap: 24px; }
.mv3-perks-head .eyebrow { margin-bottom: 10px; }
.mv3-perks-h {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.mv3-perks-h em { font-style: italic; color: var(--accent); }
.mv3-perks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink);
}
.mv3-perk {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.mv3-perk:last-child { border-bottom: 1px solid var(--ink); }
.mv3-perk-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-top: 4px;
}
.mv3-perk-k {
  font-family: "Fraunces", serif;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.mv3-perk-v {
  font-family: "Fraunces", serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 52ch;
}

/* ============================================================================
   TOPBAR — Circle pill
   ============================================================================ */
/* Circle pill — distinct, with accent monogram + border */
.util-circle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--ink) !important;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  background: rgba(180, 88, 68, 0.06);
  position: relative;
  transition: background 220ms ease, transform 220ms ease;
  margin: 0 4px;
}
.util-circle:hover {
  background: var(--accent);
  color: var(--paper) !important;
  transform: translateY(-1px);
}
.util-circle:hover .util-circle-label,
.util-circle:hover .util-circle-price,
.util-circle:hover .util-circle-mono {
  color: var(--paper);
  border-color: var(--paper);
}
.util-circle-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
  background: var(--paper);
  font-variation-settings: "opsz" 144;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.util-circle:hover .util-circle-mono {
  background: var(--paper);
  color: var(--accent);
}
.util-circle-label {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
  transition: color 160ms;
}
.util-circle-dot { display: none; }
.util-circle-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-left: 1px solid var(--accent);
  padding-left: 8px;
  margin-left: 2px;
  transition: color 160ms;
}

/* ============================================================================
   HERO — margin bottle (replaces the bordered House-of-the-Week card)
   ============================================================================ */
.hero-margin {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  cursor: pointer;
  height: 100%;
  position: relative;
}
.hero-margin-plate {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.hero-margin-bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  position: relative;
}
.hero-margin-bottle::after {
  /* a single hairline cast-shadow line, very subtle, no card */
  content: "";
  position: absolute;
  bottom: 18%;
  left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(28,26,23,0.10) 30%,
    rgba(28,26,23,0.10) 70%,
    transparent 100%);
}
.hero-margin-cap {
  display: grid;
  gap: 4px;
  text-align: right;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
.hero-margin-cap .hmc-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-margin-cap .hmc-name {
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero-margin-cap .hmc-prod {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.15;
}
.hero-margin-cap .hmc-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 4px;
}
.hero-margin:hover .hmc-prod { color: var(--accent); }

/* ============================================================================
   CLIMATE V7 — three rotating products: morning / afternoon / night
   ============================================================================ */
.cv7-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: end;
  margin-top: var(--s-6);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.cv7-loc {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cv7-loc em { font-family: "Fraunces", serif; text-transform: none; letter-spacing: 0; color: var(--accent); }
.cv7-verdict {
  font-family: "Fraunces", serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 96;
  max-width: 22ch;
}
.cv7-verdict em { color: var(--accent); font-style: italic; }
.cv7-dials { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-6); }
.cv7-dials li { display: flex; flex-direction: column; gap: 4px; }
.cv7-dial-v {
  font-family: "Fraunces", serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.cv7-dial-v sup { font-size: 12px; color: var(--muted); margin-left: 2px; }
.cv7-dial-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.cv7-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.cv7-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 88px;
  grid-template-areas: "tag tag" "meta bottle" "arr arr";
  gap: var(--s-3);
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease;
  position: relative;
}
.cv7-card:hover { border-color: var(--accent); }
.cv7-card:hover .cv7-card-name { color: var(--accent); }
.cv7-card-tag {
  grid-area: tag;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cv7-card-bottle { grid-area: bottle; display: flex; justify-content: flex-end; align-items: center; }
.cv7-card-meta { grid-area: meta; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv7-card-house {
  font-family: "Fraunces", serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cv7-card-name {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 350;
  line-height: 1.15;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
  transition: color 200ms ease;
}
.cv7-card-note {
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.cv7-card-arr {
  grid-area: arr;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
@media (max-width: 900px) {
  .cv7-row { grid-template-columns: 1fr; }
  .cv7-head { grid-template-columns: 1fr; }
  .cv7-dials { flex-wrap: wrap; }
}

/* hide all the old cv6-* styles by overriding any leftover usage (defensive) */
.climate-row .cv6-reading,
.climate-row .cv6-instructions { display: none; }

/* ============================================================================
   WEEK STRIP — compact horizontal grid of 7 small chips
   ============================================================================ */
.week-strip-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin-top: var(--s-6);
  margin-bottom: var(--s-6);
  align-items: end;
}
.week-strip-h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.week-strip-h2 em { color: var(--accent); font-style: italic; }
.week-strip-lede {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  max-width: 36ch;
}
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.week-chip {
  padding: var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-right: 1px solid var(--rule);
  transition: background 220ms ease;
  text-align: center;
  position: relative;
}
.week-chip:last-child { border-right: 0; }
.week-chip:hover { background: rgba(180, 88, 68, 0.04); }
.week-chip:hover .wc-name { color: var(--accent); }
.wc-day {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wc-today-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.week-chip-today .wc-day { color: var(--accent); }
.wc-bottle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 4px 0;
}
.wc-house {
  font-family: "Fraunces", serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.wc-name {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
  transition: color 200ms ease;
}
@media (max-width: 900px) {
  .week-strip { grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; }
  .week-strip-head { grid-template-columns: 1fr; gap: var(--s-4); }
}
.week-table {
  margin-top: var(--s-7);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.week-table-head {
  display: grid;
  grid-template-columns: 110px 130px 1fr 280px 24px;
  gap: var(--s-5);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.week-row {
  display: grid;
  grid-template-columns: 110px 130px 1fr 280px 24px;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  cursor: pointer;
  transition: background 160ms;
}
.week-row:last-child { border-bottom: none; }
.week-row:hover { background: var(--paper-soft); }
.week-row.week-past {
  opacity: 0.5;
}
.week-row.week-past:hover { opacity: 0.85; }
.week-row.week-today {
  background: linear-gradient(90deg, rgba(184,53,42,0.04) 0%, transparent 100%);
}

.wr-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.wr-day-short {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--accent);
}
.week-row.week-past .wr-day-short { color: var(--ink-3); }
.wr-day-long {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 350;
  color: var(--ink);
  line-height: 1;
}
.wr-today-flag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}

.wr-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.wr-desc {
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 350;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 52ch;
}
.week-row:hover .wr-desc { color: var(--ink); }

.wr-prod {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.wr-bottle {
  width: 48px;
  flex: 0 0 48px;
  display: flex; justify-content: center;
}
.wr-prod-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wr-prod-line {
  font-family: "Fraunces", serif;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
}
.wr-prod-line em { color: var(--accent); font-style: italic; }
.wr-prod-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.wr-arr {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--ink-3);
  text-align: right;
  transition: color 160ms, transform 160ms;
}
.week-row:hover .wr-arr { color: var(--accent); transform: translateX(3px); }

@media (max-width: 1100px) {
  .week-table-head, .week-row {
    grid-template-columns: 90px 110px 1fr 220px 18px;
    gap: var(--s-4);
  }
  .wr-day-long { font-size: 18px; }
  .wr-desc { font-size: 16px; }
}
@media (max-width: 760px) {
  .week-table-head { display: none; }
  .week-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: var(--s-4) 0;
  }
  .wr-day { flex-direction: row; align-items: baseline; gap: 10px; }
  .wr-arr { text-align: left; }
}

/* ---------- Cécile inline launcher (opens floating chat) ---------- */
.cecile-launch-note {
  margin-top: var(--s-3);
  font-family: "Fraunces", serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(245, 241, 232, 0.42);
  letter-spacing: 0.01em;
}
.cecile-launch-note em { color: rgba(245, 241, 232, 0.62); font-style: italic; }
.cecile-input-row input { cursor: text; }

/* ---------- Cécile floating chat — thread bar (history indicator + clear) ---------- */
.fcv2-thread-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.42);
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
  margin-bottom: 4px;
}
.fcv2-clear {
  background: transparent;
  border: 0;
  color: rgba(245, 241, 232, 0.55);
  font: inherit;
  letter-spacing: 0.18em;
  cursor: pointer;
  padding: 2px 6px;
  border-bottom: 1px dashed rgba(245, 241, 232, 0.25);
}
.fcv2-clear:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ---------- Circle nav peek (crisp, auto-arrival teaser) ---------- */
.circle-peek-wrap {
  position: relative;
  display: inline-block;
}
.util-circle-caret {
  font-size: 9px;
  color: rgba(28,26,23,0.45);
  margin-left: 4px;
  margin-right: 2px;
  transition: transform 200ms ease, color 200ms;
}
.circle-peek-wrap:hover .util-circle-caret { transform: translateY(1px); }
.util-circle:hover .util-circle-caret { color: var(--paper); }

/* attention nudge while the auto-arrival teaser is showing */
@keyframes circle-peek-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,88,68,0); }
  50%      { box-shadow: 0 0 0 5px rgba(180,88,68,0.15); }
}
.circle-peek-armed .util-circle {
  animation: circle-peek-glow 1800ms ease-in-out 2;
}

/* ---- panel ---- */
.circle-peek {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  background: #fbf7ec;
  border: 1px solid var(--ink);
  box-shadow:
    0 32px 64px -24px rgba(28,26,23,0.40),
    0 8px 24px -8px rgba(28,26,23,0.16),
    0 0 0 4px rgba(251,247,236,0.6);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.2,.8,.2,1);
  z-index: 1000;
}
.circle-peek::before {
  /* pointer triangle into the button */
  content: "";
  position: absolute;
  top: -6px;
  right: 56px;
  width: 10px;
  height: 10px;
  background: #fbf7ec;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  transform: rotate(45deg);
}
.circle-peek-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---- header bar ---- */
.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper, #f5f1e8);
  border-bottom: 1px solid var(--ink);
}
.cp-head-l {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(245,241,232,0.45);
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
  color: var(--paper, #f5f1e8);
  line-height: 1;
}
.cp-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.78);
}
.cp-close {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(245,241,232,0.30);
  background: transparent;
  color: rgba(245,241,232,0.78);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.cp-close:hover {
  background: rgba(245,241,232,0.12);
  color: var(--paper, #f5f1e8);
  border-color: rgba(245,241,232,0.55);
}

/* ---- hero ---- */
.cp-hero {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(28,26,23,0.18);
}
.cp-title {
  font-family: "Fraunces", serif;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 350;
  margin: 0 0 6px;
  line-height: 1;
  font-variation-settings: "opsz" 36;
}
.cp-sub {
  font-family: "Fraunces", serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(28,26,23,0.82);
  margin: 0;
  text-wrap: pretty;
}
.cp-sub em {
  font-style: italic;
  color: var(--accent, #b45844);
}

/* ---- perks ---- */
.cp-perks {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.cp-perks li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(28,26,23,0.08);
}
.cp-perks li:last-child { border-bottom: 0; }
.cp-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent, #b45844);
  font-weight: 500;
}
.cp-perk-body {
  font-family: "Fraunces", serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(28,26,23,0.82);
  text-wrap: pretty;
}
.cp-perk-body strong {
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}

/* ---- cta ---- */
.cp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper, #f5f1e8) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms, color 180ms;
  border-top: 1px solid var(--ink);
}
.cp-cta:hover {
  background: var(--accent, #b45844);
}
.cp-arr {
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.cp-cta:hover .cp-arr { transform: translateX(4px); }

/* ---- footer ---- */
.cp-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  background: rgba(28,26,23,0.04);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 760px) {
  .circle-peek { right: -20px; width: min(94vw, 380px); }
  .cp-title { font-size: 30px; }
}