/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Sillage design tokens (spec §14.1, Decision Addendum V2 §10).
 *
 * One design system, two lighting conditions: light is morning light across
 * paper and linen, dark is candlelight and amber resin. Typography, spacing and
 * accents are identical in both. Never pure white, never full-surface black.
 *
 * iOS mirrors these by hand in DesignSystem/Tokens.swift (Phase 4). When a
 * token changes here, change it there.
 *
 * Typefaces (F2, resolved 2026-09-17, docs/design/brand.md): Bodoni Moda for
 * the wordmark only, Cormorant Garamond for the display and editorial serif
 * roles, the system sans for all UI and body text. Families load through
 * next/font (lib/fonts.ts), which defines the --font-bodoni-moda and
 * --font-cormorant-garamond variables used below.
 */

:root {
  --canvas: #f7f2ea;
  --surface: #efe6db;
  --raised: #fffdfc;
  --text-primary: #241c18;
  --text-secondary: #6f6056;
  --border: rgb(36 28 24 / 0.12);

  --accent: #b8783e;
  --accent-highlight: #d89a55;
  --secondary: #a86f72;
  --secondary-deep: #6e4c62;
  --success: #71806a;
  --warning: #b8843e;
  --on-accent: #fffdfc;

  /* Brand (docs/design/brand.md): one wordmark, recolored per theme only. */
  --brand-wordmark: #241c18;
  --brand-wordmark-on-dark: #d8c3ad;

  /* Sidebar (approved mockup): warm paper, bronze-tinted active row. */
  --side-bg: #faf6f0;
  --avatar-bg: #241c18;
  --avatar-ink: #f3eae1;

  --font-brand: var(--font-bodoni-moda), "Bodoni Moda", Didot, serif;
  --font-display: var(--font-cormorant-garamond), "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-editorial: var(--font-cormorant-garamond), "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-text: ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius-card: 16px;
  --radius-control: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #120f0d;
    --surface: #1c1613;
    --raised: #28201b;
    --text-primary: #f3eae1;
    --text-secondary: #a99483;
    --border: rgb(243 234 225 / 0.12);
    --on-accent: #120f0d;
    --brand-wordmark: #d8c3ad;
    --side-bg: #0e0b09;
    --avatar-bg: #6a452c;
    --avatar-ink: #f3eae1;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas: #120f0d;
  --surface: #1c1613;
  --raised: #28201b;
  --text-primary: #f3eae1;
  --text-secondary: #a99483;
  --border: rgb(243 234 225 / 0.12);
  --on-accent: #120f0d;
  --brand-wordmark: #d8c3ad;
  --side-bg: #0e0b09;
  --avatar-bg: #6a452c;
  --avatar-ink: #f3eae1;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* A real focus ring, not the browser's default blue - Robert's visual QA,
   2026-09-18: "persistent bright-blue outlines... do not fit the Sillage
   palette." Keyboard/switch-control focus stays fully visible (WCAG), it
   just uses our own accent instead of the platform default. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text-primary);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/*
 * Brand (components/brand/brand.tsx). The wordmark is live Bodoni Moda: never
 * uppercased, never stretched, same letter spacing and optical size at every
 * size and in both themes. The S is the supplied transparent asset, sized from
 * the wordmark so the lockup never drifts.
 */
.brand {
  --brand-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand-size) * 0.3);
  line-height: 1;
  color: var(--brand-wordmark);
}

.brand--on-dark {
  color: var(--brand-wordmark-on-dark);
}

.brand--sm {
  --brand-size: 18px;
}

.brand--md {
  --brand-size: 26px;
}

.brand--lg {
  --brand-size: 40px;
}

.brand--hero {
  --brand-size: clamp(3rem, 4.6vw, 4.25rem);
}

.brand-wordmark {
  font-family: var(--font-brand);
  font-size: var(--brand-size);
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: none;
  /* Calibrated against the approved mockup (docs/design/brand.md). */
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: nowrap;
}

.brand-icon {
  display: block;
  width: auto;
  height: calc(var(--brand-size) * 1.2);
  flex: none;
}

.brand-icon.brand-icon {
  /* next/image sets width/height attributes; CSS keeps the aspect ratio. */
  max-width: none;
}

.brand-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 8px;
}

/*
 * Site shell (spec §11.1), modeled on CENA and built to the approved sidebar
 * mockup (docs/design/brand.md): sidebar on wide screens, an icon rail on
 * tablets or when collapsed, and a top bar plus bottom tab bar on phones.
 */
.shell {
  --side-width: 280px;
  --rail-width: 84px;
  display: grid;
  grid-template-columns: var(--side-width) minmax(0, 1fr);
  min-height: 100vh;
}

.shell--collapsed {
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

.side {
  --side-active: #efe1d1;
  --side-active-ink: #5b3a22;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 20px;
  border-right: 1px solid var(--border);
  background: var(--side-bg);
  overflow-y: auto;
  overflow-x: hidden;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 4px 24px 8px;
}

.side-brand {
  min-width: 0;
}

.side-lockup {
  --brand-size: 34px;
}

.side-symbol {
  display: none;
}

.side-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.side-toggle:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.side-sections {
  display: grid;
}

.side-section + .side-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.side-section-label {
  margin: 4px 12px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.side-link-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
}

a.side-link:hover {
  background: var(--surface);
}

.side-link[aria-current="page"] {
  background: var(--side-active);
  color: var(--side-active-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .side {
    --side-active: #4a3121;
    --side-active-ink: #f3eae1;
  }
}

:root[data-theme="dark"] .side {
  --side-active: #4a3121;
  --side-active-ink: #f3eae1;
}

/*
 * Destinations that exist in the information architecture but are not built
 * yet dim rather than disappear, so the product keeps its shape (Screens v2).
 */
.side-link[aria-disabled="true"],
.nav-item[aria-disabled="true"] {
  opacity: 0.72;
  cursor: default;
}

.side-foot {
  margin-top: auto;
  padding-top: 14px;
}

.side-sections + .side-foot {
  border-top: 1px solid var(--border);
}

/* Laptop heights: the whole sidebar fits without scrolling, as in the mockup. */
@media (min-width: 721px) and (max-height: 960px) {
  .side {
    padding-top: 22px;
  }
  .side-head {
    margin-bottom: 18px;
  }
  .side-link {
    min-height: 40px;
  }
  .side-section-label {
    margin-bottom: 6px;
  }
}

.side-auth {
  display: grid;
  grid-gap: var(--space-2);
  gap: var(--space-2);
}

.side-auth-rail {
  display: none;
  place-items: center;
  width: 48px;
  height: 44px;
  border-radius: 12px;
  color: var(--text-primary);
}

.member-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: 14px;
  color: var(--text-primary);
  text-decoration: none;
}

.member-card:hover {
  background: var(--surface);
}

.member-card-text {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}

.member-card-name,
.member-card-since {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card-name {
  font-size: 15.5px;
}

.member-card-since {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.member-card-chevron {
  flex: none;
  color: var(--text-secondary);
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* Collapsed: the icon rail. Labels, dividers' text and the card text hide. */
.side--collapsed {
  padding: 24px 12px 16px;
  align-items: center;
}

.side--collapsed .side-head {
  flex-direction: column;
  margin: 0 0 20px;
}

.side--collapsed .side-lockup,
.side--collapsed .side-section-label,
.side--collapsed .side-link-label,
.side--collapsed .member-card-text,
.side--collapsed .member-card-chevron,
.side--collapsed .side-auth .button {
  display: none;
}

.side--collapsed .side-auth-rail {
  display: grid;
}

.side--collapsed .side-symbol {
  display: inline-flex;
  --brand-size: 30px;
}

.side--collapsed .side-link {
  justify-content: center;
  padding: 0;
  width: 48px;
}

.appmain {
  min-width: 0;
}

.topbar,
.tabbar {
  display: none;
}

.appearance {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.appearance button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  cursor: pointer;
}

.appearance button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text-primary);
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.status-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: var(--space-2);
  gap: var(--space-2);
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.status-ok {
  color: var(--success);
}

.status-warn {
  color: var(--warning);
}

/* Tablet: the icon rail, as CENA's sidebar collapses at this width. */
@media (min-width: 721px) and (max-width: 1050px) {
  .shell {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }
  .side {
    padding: 24px 12px 16px;
    align-items: center;
  }
  .side-head {
    flex-direction: column;
    margin: 0 0 20px;
  }
  .side-toggle,
  .side-lockup,
  .side-section-label,
  .side-link-label,
  .member-card-text,
  .member-card-chevron,
  .side-auth .button {
    display: none;
  }
  .side-auth-rail {
    display: grid;
  }
  .side-symbol {
    display: inline-flex;
    --brand-size: 30px;
  }
  .side-link {
    justify-content: center;
    padding: 0;
    width: 48px;
  }
}

/* Phone: top bar with the lockup, destinations in a bottom tab bar (CENA). */
@media (max-width: 720px) {
  .shell,
  .shell--collapsed {
    display: block;
  }
  .side {
    display: none;
  }
  .appmain {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 60px;
    padding: env(safe-area-inset-top) var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    background: var(--side-bg);
  }
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .topbar-actions .button {
    min-height: 36px;
    padding: 0 var(--space-4);
  }
  .topbar-avatar {
    display: inline-flex;
    border-radius: 50%;
  }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    /* Columns share the width but never shrink below their label: seven
       Sillage Brain destinations scroll sideways on narrow phones instead of
       truncating or dropping any (spec §11.1). */
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 0 var(--space-1) env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: var(--side-bg);
  }
  .tabbar::-webkit-scrollbar {
    display: none;
  }
  .tabbar .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding-inline: var(--space-2);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
  }
  .tabbar .nav-item-label {
    white-space: nowrap;
  }
  .tabbar .nav-item[aria-current="page"] {
    color: var(--accent);
  }
  .tabbar .nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: var(--accent);
  }
}

/*
 * Sillage Brain (spec §8.1, §8.6, docs/phase-2-plan.md): House, Fragrance,
 * Perfumer and Note pages. One set of primitives so every entity type reads
 * as the same product, and so a hidden section really disappears rather than
 * leaving a gap in the layout.
 */
.brain-grid {
  display: grid;
  grid-gap: var(--space-3);
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

/* The Fragrances index and every fragrance grid: landscape cards need a
   wider column than the portrait entity-card grid above (spec: ~3 across at
   desktop content width, never the old 168px portrait-tile columns). */
.brain-fragrance-grid {
  display: grid;
  grid-gap: var(--space-3);
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Notes & Materials: a dense image-tile grid, not a card grid with vertical
   gaps (spec: "compact image tile grid"). */
.brain-note-grid {
  display: grid;
  grid-gap: var(--space-3) var(--space-2);
  gap: var(--space-3) var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.brain-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.brain-card-name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 20px;
}

.brain-card-meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.brain-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.brain-header-image {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card);
  background: var(--raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.brain-header-image img {
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
}

.brain-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: 15px;
  margin: var(--space-2) 0 0;
}

.brain-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}

.brain-section:last-child {
  border-bottom: none;
}

.brain-section-title {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.brain-section-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* §8.6: a stated gap reads as an honest sentence, not an error. */
.brain-section-body.is-gap {
  color: var(--text-secondary);
  font-style: italic;
}

/* §8.2: only for a genuine contradiction between sources - never decorative. */
.brain-contested {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--warning);
}

.brain-sources {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
}

.brain-credit-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.brain-credit-chip {
  padding: 6px 14px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}

.brain-credit-chip.is-link:hover {
  border-color: var(--accent);
}

/* A gap not worth its own chip UI - a note/accord list rendered as prose. */
.brain-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.brain-chip {
  padding: 4px 12px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
}

.brain-empty {
  color: var(--text-secondary);
  font-style: italic;
}

/* "Your wears": the date is always the server's own real timestamp, taken
   the moment the wear is saved - never typed. Occasion and memory note are
   each optional and simply omitted from a row when absent (spec: exact-
   match iteration, 2026-09-18). */
.brain-wear-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.brain-wear-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.brain-wear-list-date {
  color: var(--text-primary);
  font-weight: 500;
}
.brain-wear-list-occasion {
  padding: 2px 8px;
  border-radius: var(--radius-control);
  background: var(--raised);
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brain-wear-list-note {
  color: var(--text-secondary);
  font-style: italic;
}
.brain-wear-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.brain-wear-occasion-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.brain-wear-occasion-chip {
  padding: 6px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.brain-wear-occasion-chip--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--text-primary);
}

/*
 * Sillage Brain, visual pass (Robert's stage-2.0 acceptance spec): real
 * imagery as information architecture, not decoration. `.brain-media` is one
 * primitive with a role modifier, replacing the earlier ad hoc inline
 * `borderRadius`/`objectFit` overrides on house/perfumer images. Every new
 * class here is additive - nothing above this line changes, protecting the
 * states already verified live.
 */
.brain-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--border);
  flex: none;
}

.brain-media img {
  display: block;
}

/* Square: 5 of our 6 real bottle photos are native 600x600 - matching that
   majority keeps them consistently sized instead of letterboxed against a
   taller box built for the one real 3:4 photo we have. */
.brain-media--bottle {
  border-radius: var(--radius-card);
  aspect-ratio: 1 / 1;
}
.brain-media--bottle img {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

/* The fragrance detail hero's cinematic "stage" presentation - a dark
   atmospheric backdrop, a soft ground glow, a tight contact shadow, and a
   faint reflection, built from Sillage's own tokens so it reads correctly in
   both themes. Only ever used for the hero bottle image, and only when that
   specific image's cutout has been verified clean enough (spec: fragrance
   detail hero, 2026-09-18) - anything else keeps the plain .brain-media panel
   above unchanged. */
.brain-bottle-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  /* A thin band of warm light right at the floor line, not a dome reaching
     up behind the bottle's middle - the illumination used to read as a
     backlit "brown patch" rather than a physical surface the bottle sits on
     (Robert's visual QA, 2026-09-18). */
  background:
    radial-gradient(
      ellipse 62% 20% at 50% 92%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 7%, transparent) 45%,
      transparent 72%
    ),
    var(--raised);
}
/* Grounding is two separate shadows, not one glow: a broad, very soft
   ambient shadow that reads as the surface's own falloff, and a tight, dark
   contact shadow exactly where the bottle actually touches down - without
   the contact shadow a clean cutout reads as floating just above the
   surface even with a glow underneath it. */
.brain-bottle-stage-shadow-ambient {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 9%;
  height: 11%;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.22);
  filter: blur(24px);
}
.brain-bottle-stage-shadow-contact {
  position: absolute;
  left: 33%;
  right: 33%;
  bottom: 11.5%;
  height: 3.5%;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.4);
  filter: blur(5px);
}
.brain-bottle-stage-img {
  position: absolute;
  width: auto;
  height: min(80%, 450px);
  max-width: 88%;
  object-fit: contain;
}
.brain-bottle-stage-primary {
  bottom: 12%;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.22));
}
.brain-bottle-stage-reflection {
  /* Mirrors across the primary image's own bottom edge (12% from the floor,
     80% tall): top edge of the flipped copy lands exactly on that line. */
  bottom: calc(12% - 80%);
  z-index: 1;
  transform: scaleY(-1);
  opacity: 0.1;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.4), transparent 40%);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.4), transparent 40%);
}

.brain-media--logo {
  border-radius: var(--radius-card);
  aspect-ratio: 1 / 1;
}
.brain-media--logo img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.brain-media--portrait {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
.brain-media--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A portrait forced to a square tile - a compact relationship card (spec:
   fragrance detail "Connected World") uses the same photo, cover-cropped,
   without the circular treatment reserved for a perfumer's own page. */
.brain-media--portrait.brain-media--shape-square {
  border-radius: var(--radius-card);
}
.brain-media--portrait.brain-media--shape-square .brain-media-monogram {
  border-radius: var(--radius-card);
}

/* Notes/materials are never permanently circle-cropped (spec §11): the source
   image (usually a transparent botanical/material cutout) keeps its natural
   shape, contained with breathing room inside a soft rounded tile. */
.brain-media--note {
  border-radius: 10px;
  aspect-ratio: 1 / 1;
}
.brain-media--note img {
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}

/* The branded fallback when there is no real image yet: a monogram for a
   person/house, or the bottle/leaf glyph BrainMedia renders inline (both
   pick up this same muted, on-brand color via currentColor). Never blank,
   never the name repeated as text (spec §9, §12). */
.brain-media-monogram,
.brain-media--bottle svg,
.brain-media--note svg {
  color: var(--text-secondary);
}

.brain-media-monogram {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
}
.brain-media--portrait .brain-media-monogram {
  background: var(--avatar-bg, var(--surface));
  color: var(--avatar-ink, var(--text-secondary));
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fragrance cards: the primary unit of the Fragrances index grid - compact
   and LANDSCAPE (bottle left, identity right), never a tall portrait tile
   with empty space under a small bottle (Robert's visual QA, 2026-09-17). */
.brain-fragrance-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.brain-fragrance-card .brain-media {
  width: 72px;
  height: 72px;
  flex: none;
}
.brain-fragrance-card-body {
  min-width: 0;
}
.brain-fragrance-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
}
.brain-fragrance-card-meta {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* The richer wide row used for a "Fragrances" relationship list where a
   single credited fragrance deserves its own line (perfumer detail) or a
   cross-link needs its context spelled out (a note's "Appears in") - bigger
   image, an optional editorial descriptor, a chevron. Never the compact grid
   card stretched full-width (spec: perfumer/note detail relationship rows). */
.brain-relationship-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.brain-relationship-card + .brain-relationship-card {
  margin-top: var(--space-3);
}
.brain-relationship-card .brain-media {
  width: 88px;
  height: 88px;
  flex: none;
}
.brain-relationship-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
.brain-relationship-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
}
.brain-relationship-card-meta {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.brain-relationship-card-descriptor {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.brain-relationship-card-chevron {
  flex: none;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .brain-relationship-card {
    flex-wrap: wrap;
  }
  .brain-relationship-card-descriptor {
    flex-basis: 100%;
    order: 3;
  }
}

/* House/perfumer list cards: a real card (border, surface, padding) so a
 * perfumer grid reads with the same density and weight as the fragrance/note
 * grids next to it, not a bare image-and-text pair floating in open space
 * (Phase 2.0 acceptance pass, 2026-09-18: "inconsistent density between
 * entity types"). */
.brain-entity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.brain-entity-card .brain-media {
  width: 112px;
  height: 112px;
}
.brain-entity-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
}
.brain-entity-card-meta {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/*
 * House Visual Identity & Hero Fallback System (spec 2026-09-17). One
 * component, `HouseHero`, renders whichever of the three resolved kinds
 * (hero photo / logo-on-background / name-on-background) a house gets -
 * there is no separate "fallback" visual language, by design (§9 of the
 * spec: no visible quality gap between a complete record and a fallback
 * one). A bottom scrim + fixed light ink is used regardless of kind or
 * page theme, the same reasoning a photo card on any media app uses: the
 * scrim has to read over an unpredictable real photo, so it can't be theme
 * -reactive, and using the same treatment for the CSS-only fallback
 * backgrounds keeps every house card visually consistent.
 */
.brain-house-hero {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  aspect-ratio: 16 / 9;
}
.brain-house-hero-photo {
  object-fit: cover;
}
/* Confined to the upper part of the card, never the whole box - at a short
   card height (a narrow viewport's single-column card, or a dense grid
   tile) a full-bleed centered logo collided with the caption text sitting
   underneath it (Robert's visual QA, 2026-09-18). */
.brain-house-hero-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4% 14% 0;
}
.brain-house-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The logos we have are gold-on-transparent; a soft shadow keeps them
     legible on the lighter fallback backgrounds without editing the asset. */
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.35));
}
.brain-house-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(12 8 6 / 0.82) 0%,
    rgb(12 8 6 / 0.35) 45%,
    transparent 72%
  );
}
.brain-house-hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-5);
  color: #f3eae1;
}
.brain-house-hero-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
}
.brain-house-hero-meta {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: 0.85;
}
.brain-house-hero-descriptor {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 60ch;
  opacity: 0.92;
  /* Bounded, not clipped by the card's own overflow:hidden - a house whose
     real story sentence runs long still fits a reliably-sized card instead
     of pushing the name off the top of a short one (spec: Houses list
     responsive fix, 2026-09-18). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* The Sillage House Background Library: designed CSS gradients, never
   photography, so a "no imagery yet" house still looks premium and never
   falsely implies a real photo of that house's building/founder/history
   (spec §2). Fixed tones by design (see comment above `.brain-house-hero`) -
   these don't shift with light/dark, the same way a photo wouldn't. */
.brain-house-bg--travertine {
  background: linear-gradient(135deg, #d8c3a0 0%, #b99b6f 45%, #8a6a45 100%);
}
.brain-house-bg--espresso {
  background: linear-gradient(135deg, #4a372b 0%, #2b1f18 55%, #17110d 100%);
}
.brain-house-bg--bronze-linen {
  background: linear-gradient(135deg, #9c6a45 0%, #7a4f34 55%, #4f3122 100%);
}
.brain-house-bg--marble {
  background: linear-gradient(135deg, #d9d3cb 0%, #b3aca2 50%, #847c72 100%);
}
.brain-house-bg--botanical {
  background: linear-gradient(135deg, #52654c 0%, #364332 55%, #1e2519 100%);
}

/* Featured treatment (a handful of houses): a roomy 2-up gallery, as in the
   approved mockup - every card the same generous size, not one giant banner
   followed by smaller ones. Grid treatment (the catalog has grown): a
   responsive editorial grid that never shrinks a house to a tiny logo tile
   (spec §6 - "design for 2 houses AND 200 houses"). */
.brain-house-list--featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--space-4);
  gap: var(--space-4);
}
.brain-house-list--featured .brain-house-hero {
  aspect-ratio: 2.7 / 1;
}
.brain-house-list--featured .brain-house-hero-caption {
  padding: var(--space-4) var(--space-5);
}
.brain-house-list--featured .brain-house-hero-name {
  font-size: 24px;
}
.brain-house-list--featured .brain-house-hero-meta {
  font-size: 14px;
}
.brain-house-list--featured .brain-house-hero-descriptor {
  font-size: 13px;
}
/* Below this, cards go single-column and full viewport width - a fixed
   2.7:1 ratio made them too short for a wrapped name + meta + descriptor,
   clipping the house name clean off the top of the card (Robert's visual
   QA, 2026-09-18: "text get bunched up on smaller devices"). A generous
   min-height replaces the aspect ratio here instead of trying to guess a
   ratio that fits every name length. */
@media (max-width: 720px) {
  .brain-house-list--featured {
    grid-template-columns: 1fr;
  }
  .brain-house-list--featured .brain-house-hero {
    aspect-ratio: auto;
    min-height: 220px;
  }
}
/* Between the 2-up gallery's design width and the single-column
   breakpoint, two cards can still get narrow enough to wrap the name and
   crowd the logo (Robert's visual QA, 2026-09-18: an iPad/small-laptop
   width). Same fix: a floor on height instead of a fixed ratio. */
@media (min-width: 721px) and (max-width: 1100px) {
  .brain-house-list--featured .brain-house-hero {
    aspect-ratio: auto;
    min-height: 200px;
  }
}

/* A small, understated affordance in the corner - never the whole card's
   only hint that it's clickable, since the card itself is the link. */
.brain-house-hero-arrow {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(12 8 6 / 0.4);
  color: #f3eae1;
  font-size: 15px;
  opacity: 0.8;
}
.brain-house-list--grid {
  display: grid;
  grid-gap: var(--space-4);
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width: 1051px) {
  .brain-house-list--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .brain-house-list--grid {
    grid-template-columns: 1fr;
  }
}

/* Notes & Materials grid: the image is the dominant element, a small label
   underneath - real image and branded-fallback tiles share the same
   geometry so a missing photo never reflows the grid (spec §17). */
.brain-note-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.brain-note-card .brain-media {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.brain-note-card-name {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

/* The visual top/heart/base pyramid - Sillage Brain's signature component.
   A tier with nothing in it is simply not rendered by the component, never
   shown as an empty row. */
.brain-pyramid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* The tier label sits to the left of its note row, not stacked above it
   (Robert's visual QA, 2026-09-18). */
.brain-pyramid-tier {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.brain-pyramid-tier-title {
  flex: none;
  width: 84px;
  margin: 0;
  padding-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.brain-pyramid-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
@media (max-width: 480px) {
  .brain-pyramid-tier {
    flex-direction: column;
    gap: var(--space-2);
  }
  .brain-pyramid-tier-title {
    width: auto;
    padding-top: 0;
  }
}
.brain-pyramid-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.brain-pyramid-note .brain-media {
  width: 64px;
  height: 64px;
}
.brain-pyramid-note-name {
  font-size: 12px;
  line-height: 1.3;
}

/* Accords: a real weighted "Accord Spectrum" when a source recorded a real
   vote-share weight for every accord on this fragrance (Fragrantica's corpus
   does) - restrained chips otherwise, never a bar implying a precision a
   rank-only source doesn't support (Robert's visual QA, 2026-09-17 and
   2026-09-18: bars are fine "unless we possess genuine quantitative
   accord-strength data that warrants" one - now that we do, for 6 of 7
   pilot fragrances, show it). */
.brain-accords-caption {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: 12px;
  font-style: italic;
}
.brain-accords {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.brain-accord-bar {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  grid-gap: var(--space-2);
  gap: var(--space-2);
  font-size: 13px;
}
.brain-accord-bar-label {
  text-transform: capitalize;
  color: var(--text-secondary);
}
.brain-accord-bar-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-control);
  background: var(--surface);
  overflow: hidden;
}
.brain-accord-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--brain-accord-fill, 0%);
  border-radius: var(--radius-control);
  background: var(--accent);
}

.brain-attribution {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 10px;
  opacity: 0.85;
}

/* The full source text behind an expander, never dumped straight into the
   hero (spec: exact-match iteration, 2026-09-18 - Reflection 45 Man's real
   product copy runs to several paragraphs including a concentration FAQ). */
.brain-story-more {
  margin-top: var(--space-3);
}
.brain-story-more summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.brain-fragrance-story-full {
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.brain-fragrance-story-full + .brain-fragrance-story-full {
  margin-top: var(--space-3);
}

/* Knowledge first, evidence second (§11): closed by default. */
.brain-sources-disclosure {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.brain-sources-disclosure summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  list-style: none;
}
.brain-sources-disclosure summary::-webkit-details-marker {
  display: none;
}
.brain-sources-disclosure summary::after {
  content: "\25BE";
  font-size: 10px;
  transition: transform 0.15s ease;
}
.brain-sources-disclosure[open] summary::after {
  transform: rotate(180deg);
}
.brain-sources-disclosure .brain-sources {
  margin: var(--space-3) 0 0;
  padding-top: 0;
  border-top: none;
}

/* Filter/search row: All | By House | By Perfumer, All | Top | Heart | Base | Materials. */
.brain-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.brain-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.brain-filter-tab {
  padding: 6px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.brain-filter-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.brain-search {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 8px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text-primary);
  font-size: 14px;
}
.brain-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* An absence that matters (e.g. Materials, not yet ingested) gets one honest
   line, never a blank card (§12). */
.brain-empty-compact {
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
  padding: var(--space-2) 0;
}

/* Fragrance detail hero: a luxury product hero, not a thumbnail (spec:
   fragrance detail - the bottle "significantly larger than it is on several
   current pages"). */
.brain-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.brain-hero-media {
  width: 360px;
  flex: none;
}
.brain-hero-media .brain-media {
  width: 100%;
}
.brain-hero-body {
  flex: 1 1 380px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Back navigation ("← All Notes"), above every detail page's eyebrow. */
.brain-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
}
.brain-back-link:hover {
  color: var(--text-primary);
}

/* Page title row: title left, search/actions right (spec: Fragrances/Houses/
   Notes list tops - search sits beside the title, filters go below). */
.brain-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.brain-page-title-row .brain-search {
  flex: 0 1 260px;
}
.brain-house-count {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.brain-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Fragrance detail: the back link and page actions share a row above the
   hero, with nothing else in it (the name/house/year moved into the hero
   body, beside the bottle - Robert's visual QA, 2026-09-18: "the image name
   should be to the right of the fragrance image not on top"). */
.brain-detail-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brain-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The labeled identity panel (fragrance hero's IDENTITY/LAUNCH YEAR/
   PERFUMER/NOTES card; reused for a perfumer's NATIONALITY/ACTIVE/HOUSES). */
.brain-identity-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}
.brain-identity-row + .brain-identity-row {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.brain-identity-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brain-identity-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.brain-identity-value a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fragrance detail header: a plain meta line and the story flow directly
   under the name - no boxed "identity" card repeating what the header
   already says (Robert's visual QA, 2026-09-18: "the Grand Soir identity
   panel unnecessarily repeats information already in the header"). */
.brain-fragrance-meta-line {
  margin: var(--space-4) 0 0;
  color: var(--text-secondary);
  font-size: 15px;
}
.brain-fragrance-meta-line a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.brain-fragrance-story {
  margin: var(--space-5) 0 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 62ch;
}

/* Wearability chips (mood/occasion/season/intensity) - a row of small
   identity cards under the story, matching the accord-card visual language
   (spec: Grand Soir hero). Any chip with no real backing value is simply
   never rendered - never a placeholder card. */
/* Always a deterministic 4-up or 2-up grid, never auto-fit's "however many
   columns happen to fit" - that produced an accidental 3-plus-1 layout with
   the fourth chip alone on its own row (Robert's visual QA, 2026-09-18). */
.brain-wearability-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: var(--space-3);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (max-width: 720px) {
  .brain-wearability-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brain-wearability-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}
.brain-wearability-chip-icon {
  flex: none;
  display: inline-flex;
  color: var(--accent);
}
.brain-wearability-chip-value {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brain-wearability-chip-label {
  margin: 3px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Pyramid + accord spectrum side by side on desktop (spec: Grand Soir). */
.brain-two-col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-gap: var(--space-7);
  gap: var(--space-7);
  align-items: start;
}
/* A pyramid with many notes (Reflection 45 Man: 4-5 per tier) runs much
   taller than the accord spectrum next to it, leaving the accord column's
   lower area empty - give the pyramid more of the row's real width instead
   of stretching the accord bars to fill space they don't have data for
   (Robert's visual QA, 2026-09-18). */
.brain-two-col--dense {
  grid-template-columns: 1.7fr 1fr;
}
@media (max-width: 860px) {
  .brain-two-col,
  .brain-two-col--dense {
    grid-template-columns: 1fr;
  }
}
/* The shorter accord column stays in view instead of leaving a tall gap of
   empty space beneath it while the pyramid keeps going. */
@media (min-width: 861px) {
  .brain-two-col-accords {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-6);
  }
}

/* "Connected World": the house, the perfumer(s), and real related
   fragrances - real graph relationships, never a fabricated "you might also
   like" (spec: Grand Soir "Connected World"). */
.brain-connected-world {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: var(--space-4);
  gap: var(--space-4);
}
.brain-connected-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.brain-connected-card .brain-media {
  width: 60px;
  height: 60px;
  flex: none;
}
.brain-connected-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
/* Name first (larger), the "THE HOUSE"/"THE PERFUMER" eyebrow right under
   it, then the descriptor - matching the reference exactly (Robert's visual
   QA, 2026-09-18). */
.brain-connected-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
}
.brain-connected-card-eyebrow {
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brain-connected-card-descriptor {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}
.brain-connected-card-chevron {
  flex: none;
  color: var(--text-secondary);
}
.brain-connected-related {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}
.brain-connected-related .brain-connected-card-eyebrow {
  flex: none;
  width: 70px;
  margin: 0;
  line-height: 1.4;
}
.brain-connected-related-list {
  display: flex;
  gap: var(--space-3);
}
.brain-connected-related-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.brain-connected-related-item .brain-media {
  width: 64px;
  height: 64px;
}
.brain-connected-related-item-name {
  font-size: 12px;
  line-height: 1.3;
}

/* Perfumer detail header: portrait + name/descriptor on the left, the
   identity panel on the right (spec: Theo Belmas / Francis Kurkdjian). */
.brain-perfumer-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.brain-perfumer-header-id {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1 1 320px;
}
.brain-perfumer-header-id .brain-media {
  width: 140px;
  height: 140px;
  flex: none;
}
.brain-identity-panel--perfumer {
  flex: 1 1 260px;
  max-width: 320px;
}

/* Section header with a trailing count + "View all" (spec: FRAGRANCES [3]  View all →). */
.brain-section-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.brain-section-count {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-control);
  background: var(--raised);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.brain-view-all {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.brain-view-all:hover {
  color: var(--text-primary);
}

/* "Notes & materials used" chip row (small image + name), perfumer detail. */
.brain-note-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.brain-note-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.brain-note-chip .brain-media {
  width: 32px;
  height: 32px;
}
.brain-note-chip-more {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
}

/* Note detail: "Roles in composition" and "Material" - real, hand-researched
   perfumery facts (spec: Notes & Materials detail, 2026-09-18). Each card is
   independently omitted when this specific note has nothing real for it -
   never an empty card, never both columns forced to render just to balance
   the grid. */
.brain-note-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-4);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) {
  .brain-note-fact-grid {
    grid-template-columns: 1fr;
  }
}
.brain-note-fact-caption {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.brain-note-role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.brain-note-role-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.brain-note-role-marker {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
}
.brain-note-role-marker--top {
  background: #c9a15a;
}
.brain-note-role-marker--heart {
  background: var(--accent);
}
.brain-note-role-marker--base {
  background: #6b4a34;
}
.brain-note-role-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.brain-note-role-text {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.brain-note-fact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}
.brain-note-fact-list dt {
  margin: 0 0 2px;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brain-note-fact-list dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Sources/claims split (perfumer detail's lower evidence area): two columns
   on desktop, stacked on phones - real source names and real predicate/value
   claim lines, never a synthesized sentence. */
.brain-evidence-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-6);
  gap: var(--space-6);
  margin-top: var(--space-4);
}
@media (max-width: 720px) {
  .brain-evidence-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.brain-evidence-column-title {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brain-evidence-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
}
.brain-evidence-card + .brain-evidence-card {
  margin-top: var(--space-2);
}
.brain-evidence-claim {
  margin: 0;
}
.brain-evidence-claim + .brain-evidence-claim {
  margin-top: 6px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/font/google/target.css?{"path":"lib/fonts.ts","import":"Bodoni_Moda","arguments":[{"subsets":["latin"],"weight":"variable","style":["normal"],"axes":["opsz"],"display":"swap","variable":"--font-bodoni-moda"}],"variableName":"bodoniModa"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* math */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/_next/static/media/db4fefbb8c3ff8d3-s.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/_next/static/media/0e2817805fbc92a7-s.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/_next/static/media/bd33c0bc895da9de-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/_next/static/media/75a7cfd2a925650a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Bodoni Moda Fallback';src: local("Times New Roman");ascent-override: 98.50%;descent-override: 35.02%;line-gap-override: 0.00%;size-adjust: 114.22%
}.__className_36b70a {font-family: 'Bodoni Moda', 'Bodoni Moda Fallback';font-style: normal
}.__variable_36b70a {--font-bodoni-moda: 'Bodoni Moda', 'Bodoni Moda Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.25_@types+node@20.19.43_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/font/google/target.css?{"path":"lib/fonts.ts","import":"Cormorant_Garamond","arguments":[{"subsets":["latin"],"weight":"variable","style":["normal","italic"],"display":"swap","variable":"--font-cormorant-garamond"}],"variableName":"cormorantGaramond"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/fd3893c623c32b6d-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/ea896c3885e026c1-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/024ead497118aa23-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e74f24ed7f0e4323-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e18f83c737786aa7-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/393d45a2251e223a-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/c48b38fe8bb532f3-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/48410f3df60da620-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/7b89a4fd5e90ede0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Cormorant Garamond Fallback';src: local("Times New Roman");ascent-override: 95.27%;descent-override: 29.59%;line-gap-override: 0.00%;size-adjust: 96.98%
}.__className_f23d9e {font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback'
}.__variable_f23d9e {--font-cormorant-garamond: 'Cormorant Garamond', 'Cormorant Garamond Fallback'
}