@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Great+Vibes&display=swap');

/* ============================================================
   BLVCKMETA - THEMES
   ============================================================
   Each theme overrides the CSS variables declared in styles.css.
   Selectors: html[data-theme="<id>"]. No theme attribute = default
   (AfterHours) values from :root in styles.css.

   Light-mode themes (Daylight, Editorial, Linen) invert text/divider
   colors so the existing layout reads correctly without touching
   any component CSS.
   ============================================================ */

/* ============================================================
   TAB HEADER BACKGROUND OVERRIDE
   ============================================================
   styles.css hardcodes the tab header background to rgba(0,0,0,0.92)
   for the glass blur effect. That breaks on light themes - the page
   gets a black bar on top. Override it per-theme using the theme's
   actual --bm-bg, with translucency preserved for the blur effect.
   ============================================================ */
html[data-theme="daylight"]  .bm-tab-header { background: rgba(247, 245, 240, 0.92); }
html[data-theme="editorial"] .bm-tab-header { background: rgba(237, 232, 221, 0.92); }
html[data-theme="linen"]     .bm-tab-header { background: rgba(242, 237, 228, 0.92); }
html[data-theme="citrine"]   .bm-tab-header { background: rgba(26, 15, 8, 0.92); }
html[data-theme="crimson"]   .bm-tab-header { background: rgba(13, 5, 6, 0.92); }
html[data-theme="voltage"]   .bm-tab-header { background: rgba(0, 8, 16, 0.92); }
html[data-theme="founder"]   .bm-tab-header { background: rgba(5, 5, 5, 0.92); }
html[data-theme="rose"]      .bm-tab-header { background: rgba(253, 242, 240, 0.94); }
html[data-theme="tribune"]   .bm-tab-header { background: rgba(245, 240, 232, 0.95); }
html[data-theme="velvet"]    .bm-tab-header { background: rgba(250, 244, 239, 0.95); }
html[data-theme="noir"]      .bm-tab-header { background: rgba(8, 8, 8, 0.95); }
html[data-theme="marquee"]   .bm-tab-header { background: rgba(8, 8, 8, 0.95); }
html[data-theme="bloom"]     .bm-tab-header { background: rgba(255, 248, 252, 0.95); }
html[data-theme="loft"]      .bm-tab-header { background: rgba(250, 247, 242, 0.95); }
html[data-theme="sage"]      .bm-tab-header { background: rgba(245, 242, 236, 0.95); }

/* ============================================================
   THEME PICKER CARDS - used in Edit Block
   ============================================================ */
.bm-theme-card {
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.bm-theme-card:hover { transform: translateY(-1px); }
.bm-theme-card:active { transform: translateY(0); }

/* Smooth color transitions when swapping themes -
   limited to color props so layout never reflows. */
html, body, .bm-card, .bm-left-rail, .bm-right-rail,
.bm-nav-item, .bm-button-primary, .bm-button-ghost,
.bm-input, .bm-textarea, .bm-tab-header, .bm-mobile-bottom-nav {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ============================================================
   AFTER HOURS - default, explicit for symmetry
   ============================================================ */
html[data-theme="afterhours"] {
  --bm-bg: #000000;
  --bm-card: #121212;
  --bm-card-hover: #1a1a1a;
  --bm-accent: #FF8C00;
  --bm-accent-soft: rgba(255, 140, 0, 0.12);
  --bm-accent-glow: rgba(255, 140, 0, 0.3);
  --bm-text-primary: #FFFFFF;
  --bm-text-secondary: rgba(255, 255, 255, 0.6);
  --bm-text-muted: rgba(255, 255, 255, 0.4);
  --bm-divider: rgba(255, 255, 255, 0.07);
  --bm-divider-strong: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   CITRINE - warm amber on cocoa
   ============================================================ */
html[data-theme="citrine"] {
  --bm-bg: #1A0F08;
  --bm-card: #2A1A0E;
  --bm-card-hover: #3A2615;
  --bm-accent: #FFB627;
  --bm-accent-soft: rgba(255, 182, 39, 0.14);
  --bm-accent-glow: rgba(255, 182, 39, 0.32);
  --bm-text-primary: #FBF2E2;
  --bm-text-secondary: rgba(251, 242, 226, 0.65);
  --bm-text-muted: rgba(251, 242, 226, 0.42);
  --bm-divider: rgba(255, 182, 39, 0.08);
  --bm-divider-strong: rgba(255, 182, 39, 0.16);
}

/* ============================================================
   CRIMSON - deep red on charcoal
   ============================================================ */
html[data-theme="crimson"] {
  --bm-bg: #0D0506;
  --bm-card: #1A0B0D;
  --bm-card-hover: #261216;
  --bm-accent: #E63946;
  --bm-accent-soft: rgba(230, 57, 70, 0.14);
  --bm-accent-glow: rgba(230, 57, 70, 0.34);
  --bm-text-primary: #F5E8EA;
  --bm-text-secondary: rgba(245, 232, 234, 0.6);
  --bm-text-muted: rgba(245, 232, 234, 0.4);
  --bm-divider: rgba(230, 57, 70, 0.08);
  --bm-divider-strong: rgba(230, 57, 70, 0.16);
}

/* ============================================================
   DAYLIGHT - light mode
   ============================================================ */
html[data-theme="daylight"] {
  --bm-bg: #F7F5F0;
  --bm-card: #FFFFFF;
  --bm-card-hover: #EFEBE3;
  --bm-accent: #FF7A1A;
  --bm-accent-soft: rgba(255, 122, 26, 0.10);
  --bm-accent-glow: rgba(255, 122, 26, 0.25);
  --bm-text-primary: #1A1A1A;
  --bm-text-secondary: rgba(26, 26, 26, 0.65);
  --bm-text-muted: rgba(26, 26, 26, 0.45);
  --bm-divider: rgba(26, 26, 26, 0.08);
  --bm-divider-strong: rgba(26, 26, 26, 0.16);
}

/* ============================================================
   EDITORIAL - cream paper, ink black
   ============================================================ */
html[data-theme="editorial"] {
  --bm-bg: #EDE8DD;
  --bm-card: #F8F4EB;
  --bm-card-hover: #E2DCCE;
  --bm-accent: #1A1A1A;
  --bm-accent-soft: rgba(26, 26, 26, 0.08);
  --bm-accent-glow: rgba(26, 26, 26, 0.22);
  --bm-text-primary: #1A1A1A;
  --bm-text-secondary: rgba(26, 26, 26, 0.6);
  --bm-text-muted: rgba(26, 26, 26, 0.4);
  --bm-divider: rgba(26, 26, 26, 0.10);
  --bm-divider-strong: rgba(26, 26, 26, 0.18);
}

/* ============================================================
   VOLTAGE - electric cyan on void
   ============================================================ */
html[data-theme="voltage"] {
  --bm-bg: #000810;
  --bm-card: #021024;
  --bm-card-hover: #051C36;
  --bm-accent: #00E5FF;
  --bm-accent-soft: rgba(0, 229, 255, 0.12);
  --bm-accent-glow: rgba(0, 229, 255, 0.32);
  --bm-text-primary: #E6F7FF;
  --bm-text-secondary: rgba(230, 247, 255, 0.6);
  --bm-text-muted: rgba(230, 247, 255, 0.4);
  --bm-divider: rgba(0, 229, 255, 0.08);
  --bm-divider-strong: rgba(0, 229, 255, 0.16);
}

/* ============================================================
   LINEN - soft beige minimalism
   ============================================================ */
html[data-theme="linen"] {
  --bm-bg: #F2EDE4;
  --bm-card: #FAF6ED;
  --bm-card-hover: #E6DECC;
  --bm-accent: #8B6F47;
  --bm-accent-soft: rgba(139, 111, 71, 0.10);
  --bm-accent-glow: rgba(139, 111, 71, 0.22);
  --bm-text-primary: #3D2E1F;
  --bm-text-secondary: rgba(61, 46, 31, 0.65);
  --bm-text-muted: rgba(61, 46, 31, 0.42);
  --bm-divider: rgba(61, 46, 31, 0.10);
  --bm-divider-strong: rgba(61, 46, 31, 0.18);
}

/* ============================================================
   FOUNDER - gold on jet, the signature
   ============================================================ */
html[data-theme="founder"] {
  --bm-bg: #050505;
  --bm-card: #0F0F0F;
  --bm-card-hover: #1A1612;
  --bm-accent: #D4AF37;
  --bm-accent-soft: rgba(212, 175, 55, 0.14);
  --bm-accent-glow: rgba(212, 175, 55, 0.36);
  --bm-text-primary: #FBF6E6;
  --bm-text-secondary: rgba(251, 246, 230, 0.62);
  --bm-text-muted: rgba(251, 246, 230, 0.42);
  --bm-divider: rgba(212, 175, 55, 0.10);
  --bm-divider-strong: rgba(212, 175, 55, 0.20);
}

/* ============================================================
   ROSE -- blush cream on warm white, dusty rose accent
   Inspired by warm cream and blush palettes.
   A light theme. Text is warm near-black on cream/white.
   ============================================================ */
html[data-theme="rose"] {
  --bm-bg:               #FDF0ED;
  --bm-card:             #FFFFFF;
  --bm-card-hover:       #FAE4E7;
  --bm-accent:           #D4758A;
  --bm-accent-soft:      rgba(212, 117, 138, 0.10);
  --bm-accent-glow:      rgba(212, 117, 138, 0.28);
  --bm-text-primary:     #1C1214;
  --bm-text-secondary:   rgba(28, 18, 20, 0.65);
  --bm-text-muted:       rgba(28, 18, 20, 0.42);
  --bm-divider:          rgba(212, 117, 138, 0.10);
  --bm-divider-strong:   rgba(212, 117, 138, 0.22);
}

/* ============================================================
   TRIBUNE - newsprint cream, printer ink black
   A B&W newspaper layout. Images are grayscale by default and
   bloom to full color on hover. Real name = front-page headline.
   ============================================================ */
html[data-theme="tribune"] {
  --bm-bg:             #F5F0E8;
  --bm-card:           #FAFAF7;
  --bm-card-hover:     #EBEBEA;
  --bm-accent:         #0A0A0A;
  --bm-accent-soft:    rgba(10, 10, 10, 0.07);
  --bm-accent-glow:    rgba(10, 10, 10, 0.16);
  --bm-text-primary:   #080808;
  --bm-text-secondary: rgba(8, 8, 8, 0.62);
  --bm-text-muted:     rgba(8, 8, 8, 0.40);
  --bm-divider:        rgba(8, 8, 8, 0.16);
  --bm-divider-strong: rgba(8, 8, 8, 0.36);
}

/* -- Grayscale: images bloom to color on hover ------------- */
html[data-theme="tribune"] .bm-trib-circle-img,
html[data-theme="tribune"] .bm-trib-neighbor-img,
html[data-theme="tribune"] .bm-trib-cover-img {
  filter: grayscale(1);
  transition: filter 0.42s ease;
}
html[data-theme="tribune"] .bm-trib-img-wrap:hover .bm-trib-circle-img,
html[data-theme="tribune"] .bm-trib-img-wrap:hover .bm-trib-cover-img {
  filter: grayscale(0);
}
html[data-theme="tribune"] .bm-trib-neighbor-thumb:hover .bm-trib-neighbor-img {
  filter: grayscale(0);
}
html[data-theme="tribune"] .bm-trib-img-wrap video {
  filter: grayscale(1);
  transition: filter 0.42s ease;
}
html[data-theme="tribune"] .bm-trib-img-wrap:hover video {
  filter: grayscale(0);
}

/* -- Tribune wrapper --------------------------------------- */
.bm-tribune-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 60px;
  background: var(--bm-bg);
  color: var(--bm-text-primary);
  font-family: Georgia, "Times New Roman", serif;
}

/* -- Masthead ---------------------------------------------- */
.bm-trib-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
}
.bm-trib-masthead-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
  color: var(--bm-text-primary);
}
.bm-trib-masthead-left,
.bm-trib-masthead-right {
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--bm-text-muted);
  min-width: 80px;
}
.bm-trib-masthead-right { text-align: right; }

/* -- Rules ------------------------------------------------- */
.bm-trib-rule {
  height: 1px;
  background: var(--bm-divider-strong);
  margin: 0 20px;
}
.bm-trib-rule-double {
  height: 0;
  border-top: 1px solid var(--bm-divider-strong);
  border-bottom: 3px solid var(--bm-divider-strong);
  margin: 4px 20px;
}

/* -- Ticker / dateline ------------------------------------- */
.bm-trib-ticker {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 20px;
  color: var(--bm-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* -- Headline (real name) ---------------------------------- */
.bm-trib-headline-block {
  padding: 20px 20px 16px;
}
.bm-trib-headline {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1px;
  color: var(--bm-text-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.bm-trib-subhead {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bm-text-secondary);
  border-left: 3px solid var(--bm-divider-strong);
  padding-left: 12px;
  font-style: italic;
}

/* -- Stats strip ------------------------------------------- */
.bm-trib-stats-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 20px;
}
.bm-trib-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.bm-trib-stat-num {
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--bm-text-primary);
}
.bm-trib-stat-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}
.bm-trib-stat-div {
  width: 1px;
  height: 36px;
  background: var(--bm-divider);
  flex-shrink: 0;
}

/* -- Body: two-column -------------------------------------- */
.bm-trib-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--bm-divider);
}
.bm-trib-col-left {
  padding-right: 16px;
  border-right: 1px solid var(--bm-divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bm-trib-col-right {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -- Trinity circles --------------------------------------- */
.bm-trib-trinity-main-wrap {
  display: flex;
  justify-content: center;
}
.bm-trib-trinity-main {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--bm-divider-strong);
  background: var(--bm-card-hover);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.bm-trib-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--bm-accent);
  pointer-events: none;
  z-index: 2;
}
.bm-trib-ring.gold { border-color: #D4AF37; }
.bm-trib-live-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  border: 2px solid var(--bm-bg);
  z-index: 3;
}
.bm-trib-circle-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.bm-trib-circle-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.bm-trib-trinity-sides {
  display: flex;
  gap: 8px;
}
.bm-trib-trinity-side {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--bm-divider);
  background: var(--bm-card-hover);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.bm-trib-trinity-side.bm-trib-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-trib-empty-label {
  font-size: 18px;
  color: var(--bm-text-muted);
}

/* -- Cover image ------------------------------------------- */
.bm-trib-cover-wrap {
  width: 100%;
  height: 130px;
  overflow: hidden;
  border: 1px solid var(--bm-divider);
  position: relative;
  display: block;
}
.bm-trib-cover-img {
  width: 100%;
  height: 100%;
}
.bm-trib-cover-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  padding: 3px;
}

/* -- Edit button ------------------------------------------- */
.bm-trib-edit-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--bm-divider-strong);
  color: var(--bm-text-primary);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
}
.bm-trib-edit-btn:hover { background: var(--bm-card-hover); }

/* -- Article (right column) -------------------------------- */
.bm-trib-article-kicker {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  border-bottom: 1px solid var(--bm-divider);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.bm-trib-article-body {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.68;
  color: var(--bm-text-secondary);
}

/* -- News items (key/value pairs) -------------------------- */
.bm-trib-news-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bm-trib-news-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-trib-news-key {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.bm-trib-news-val {
  font-family: Georgia, serif;
  font-size: 12px;
  color: var(--bm-text-primary);
}

/* -- Lower sections (2x2) ---------------------------------- */
.bm-trib-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 20px;
}
.bm-trib-section {
  padding: 14px 12px;
  border-right: 1px solid var(--bm-divider);
  border-bottom: 1px solid var(--bm-divider);
}
.bm-trib-section:nth-child(2n) { border-right: none; }
.bm-trib-section:nth-child(3),
.bm-trib-section:nth-child(4)  { border-bottom: none; }

.bm-trib-section-head {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-primary);
  margin-bottom: 6px;
}

/* Neighbor / FAM grid */
.bm-trib-neighbor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}
.bm-trib-neighbor-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.bm-trib-neighbor-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bm-card-hover);
  border: 1px solid var(--bm-divider);
}
.bm-trib-neighbor-name {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 7px;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vibe items */
.bm-trib-vibe-item {
  padding: 6px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-trib-vibe-headline {
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bm-text-primary);
}
.bm-trib-vibe-meta {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  color: var(--bm-text-muted);
  margin-top: 2px;
}

/* Guestbook items */
.bm-trib-guestbook-item {
  padding: 6px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-trib-guestbook-author {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  margin-bottom: 2px;
}
.bm-trib-guestbook-text {
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
  color: var(--bm-text-secondary);
}

.bm-trib-section-empty {
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: var(--bm-text-muted);
  padding: 8px 0;
}

/* -- Footer ------------------------------------------------ */
.bm-trib-footer {
  padding: 14px 20px;
  text-align: center;
}
.bm-trib-footer-line {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  margin-bottom: 14px;
}
html[data-theme="tribune"] .bm-signout {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  border: 1px solid var(--bm-divider);
}

/* -- Responsive -------------------------------------------- */
@media (max-width: 600px) {
  .bm-trib-body {
    grid-template-columns: 1fr;
  }
  .bm-trib-col-left {
    border-right: none;
    border-bottom: 1px solid var(--bm-divider);
    padding-right: 0;
    padding-bottom: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bm-trib-col-right { padding-left: 0; }
  .bm-trib-sections   { grid-template-columns: 1fr; }
  .bm-trib-section    { border-right: none; }
  .bm-trib-headline   { font-size: clamp(36px, 10vw, 52px); }
  .bm-trib-stats-strip { flex-wrap: wrap; gap: 8px 0; }
}

/* ============================================================
   VELVET -- cream on white, deep crimson accent
   Cormorant Garamond for the name headline.
   Great Vibes script for the handle.
   Rich, luxury editorial feel.
   ============================================================ */
html[data-theme="velvet"] {
  --bm-bg:             #FAF4EF;
  --bm-card:           #FFFFFF;
  --bm-card-hover:     #F5EAE4;
  --bm-accent:         #BB1C27;
  --bm-accent-soft:    rgba(187, 28, 39, 0.10);
  --bm-accent-glow:    rgba(187, 28, 39, 0.26);
  --bm-text-primary:   #1A0808;
  --bm-text-secondary: rgba(26, 8, 8, 0.64);
  --bm-text-muted:     rgba(26, 8, 8, 0.42);
  --bm-divider:        rgba(187, 28, 39, 0.12);
  --bm-divider-strong: rgba(187, 28, 39, 0.24);
}

/* -- Cover: taller and more cinematic in Velvet -- */
html[data-theme="velvet"] .bm-profile-cover-tall {
  height: 400px;
  min-height: 340px;
}

/* -- Name: Cormorant Garamond italic, elegant -- */
html[data-theme="velvet"] .bm-profile-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -- Handle: Great Vibes script, crimson -- */
html[data-theme="velvet"] .bm-profile-handle {
  font-family: 'Great Vibes', cursive;
  font-size: 30px;
  color: var(--bm-accent);
  letter-spacing: 0;
  font-weight: 400;
}

/* -- Verified seal stays blue always -- */
html[data-theme="velvet"] .bm-verified-seal {
  color: #0095F6;
}

/* -- Role pill: outlined in crimson -- */
html[data-theme="velvet"] .bm-profile-role-pill {
  background: transparent;
  border: 1px solid var(--bm-accent);
  color: var(--bm-accent);
}

/* -- Counter labels: Cormorant italic -- */
html[data-theme="velvet"] .bm-counter-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* -- Sub-tab nav: italic serif tabs -- */
html[data-theme="velvet"] .bm-subtab {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.5px;
}
html[data-theme="velvet"] .bm-subtab.active {
  color: var(--bm-accent);
  border-bottom-color: var(--bm-accent);
}

/* -- Info card labels: small caps feel -- */
html[data-theme="velvet"] .bm-info-card-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 1px;
}

/* -- Anthem bar: elegant treatment -- */
html[data-theme="velvet"] .bm-anthem-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}

/* -- Buttons: crimson primary -- */
html[data-theme="velvet"] .bm-button-primary {
  background: var(--bm-accent);
  color: #fff;
}
html[data-theme="velvet"] .bm-button-primary:hover {
  background: #9B1520;
}

/* -- Ghost button: crimson outline -- */
html[data-theme="velvet"] .bm-button-ghost {
  border-color: var(--bm-accent);
  color: var(--bm-accent);
}

/* -- Trinity ring: crimson in Velvet -- */
html[data-theme="velvet"] .bm-trinity-main-ring {
  border-color: var(--bm-accent);
}
html[data-theme="velvet"] .bm-trinity-main-glow {
  box-shadow: 0 0 20px rgba(187, 28, 39, 0.3);
}

/* ============================================================
   NOIR -- near-black bg, white accent, cinematic portrait layout
   Cover photo/video = full-bleed hero background.
   Portraits fade to transparent at edges, blending into darkness.
   Real name in Great Vibes script, white, at hero bottom.
   ============================================================ */
html[data-theme="noir"] {
  --bm-bg:             #080808;
  --bm-card:           #141414;
  --bm-card-hover:     #1C1C1C;
  --bm-accent:         #FFFFFF;
  --bm-accent-soft:    rgba(255, 255, 255, 0.08);
  --bm-accent-glow:    rgba(255, 255, 255, 0.18);
  --bm-text-primary:   #F0F0F0;
  --bm-text-secondary: rgba(240, 240, 240, 0.65);
  --bm-text-muted:     rgba(240, 240, 240, 0.40);
  --bm-divider:        rgba(255, 255, 255, 0.07);
  --bm-divider-strong: rgba(255, 255, 255, 0.14);
}

/* -- Noir wrapper ------------------------------------------- */
.bm-noir-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 60px;
  background: var(--bm-bg);
  color: var(--bm-text-primary);
}

/* -- NOIR HERO (rebuilt) ------------------------------------ */
.bm-noir-hero {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: #080808;
}

/* Cover background - very dark overlay so it reads as dark space */
.bm-noir-cover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bm-noir-cover-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
.bm-noir-cover-placeholder {
  width: 100%;
  height: 100%;
  background: #080808;
}

/* Heavy dark overlay - the canvas should read as DARK space.
   Cover provides subtle texture/depth only, not visible imagery. */
.bm-noir-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.62) 35%,
      rgba(0,0,0,0.72) 65%,
      rgba(0,0,0,0.93) 100%
    );
}

/* Logo bar */
.bm-noir-logo-bar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}
.bm-noir-logo {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.90;
}

/* Edit button */
.bm-noir-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(6px);
}
.bm-noir-edit-btn:hover { background: rgba(255,255,255,0.20); }

/* -- PORTRAIT COMPOSITION ----------------------------------- */
/* Positioned in the hero - main slightly left, sides to the right */
.bm-noir-portraits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-62%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Portrait base - NO visible border or background.
   The image itself dissolves into the dark via vignette mask.
   Looks like a person standing in darkness, not a UI card. */
.bm-noir-portrait {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  border-radius: 0;
}
.bm-noir-portrait-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center top;
  display: block;
}
.bm-noir-portrait-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: rgba(255,255,255,0.04);
}

/* MAIN portrait: large, dominant, in front
   Oval vignette - strong center, dissolves at edges into darkness */
.bm-noir-portrait-main {
  width: 210px;
  height: 320px;
  z-index: 4;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 82% at 50% 42%,
    black 28%,
    rgba(0,0,0,0.92) 48%,
    rgba(0,0,0,0.65) 64%,
    rgba(0,0,0,0.28) 80%,
    rgba(0,0,0,0.08) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 78% 82% at 50% 42%,
    black 28%,
    rgba(0,0,0,0.92) 48%,
    rgba(0,0,0,0.65) 64%,
    rgba(0,0,0,0.28) 80%,
    rgba(0,0,0,0.08) 92%,
    transparent 100%
  );
}

/* SIDE portraits: smaller, to the right, z-behind main */
.bm-noir-sides {
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 2;
  position: relative;
  margin-left: -30px;
}

.bm-noir-portrait-side {
  width: 100px;
  height: 136px;
  z-index: 2;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(
    ellipse 74% 76% at 50% 40%,
    black 18%,
    rgba(0,0,0,0.82) 40%,
    rgba(0,0,0,0.45) 62%,
    rgba(0,0,0,0.12) 82%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 74% 76% at 50% 40%,
    black 18%,
    rgba(0,0,0,0.82) 40%,
    rgba(0,0,0,0.45) 62%,
    rgba(0,0,0,0.12) 82%,
    transparent 100%
  );
}

/* Live dot on main */
.bm-noir-live-dot {
  position: absolute;
  bottom: 60px;
  right: 40px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  border: 2px solid #080808;
  z-index: 5;
}

/* -- IDENTITY at hero bottom -------------------------------- */
.bm-noir-identity {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 24px 22px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
}
.bm-noir-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(40px, 7.5vw, 70px);
  font-weight: 400;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.1;
  text-shadow:
    0 2px 16px rgba(0,0,0,0.8),
    0 0  50px rgba(0,0,0,0.5);
}
.bm-noir-meta {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}

/* -- COUNTERS ----------------------------------------------- */
.bm-noir-counters {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bm-divider);
}
.bm-noir-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.bm-noir-counter-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: var(--bm-text-primary);
  line-height: 1;
}
.bm-noir-counter-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}
.bm-noir-counter-div {
  width: 1px;
  height: 32px;
  background: var(--bm-divider);
  flex-shrink: 0;
}

/* -- BODY --------------------------------------------------- */
.bm-noir-body { padding: 0 20px; }
.bm-noir-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--bm-divider);
}
.bm-noir-section-head {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  margin-bottom: 10px;
}
.bm-noir-section-rule {
  height: 1px;
  background: var(--bm-divider);
  margin-bottom: 12px;
}
.bm-noir-bio {
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bm-text-secondary);
}
.bm-noir-loading,
.bm-noir-empty {
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  color: var(--bm-text-muted);
  padding: 8px 0;
}
.bm-noir-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bm-noir-detail-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-noir-detail-key {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.bm-noir-detail-val {
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--bm-text-primary);
}
.bm-noir-people-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bm-noir-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bm-noir-person-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bm-card-hover);
  border: 1px solid var(--bm-divider);
}
.bm-noir-person-name {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-noir-vibe {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-noir-vibe-text {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bm-text-primary);
}
.bm-noir-vibe-meta {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  color: var(--bm-text-muted);
  margin-top: 3px;
}
.bm-noir-guestbook-entry {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-noir-guestbook-author {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 3px;
}
.bm-noir-guestbook-text {
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--bm-text-secondary);
}
.bm-noir-anthem-btn {
  margin-top: 8px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--bm-divider-strong);
  color: var(--bm-text-primary);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.18s;
}
.bm-noir-anthem-btn:hover { background: var(--bm-card-hover); }
.bm-noir-footer {
  padding: 24px 20px;
  text-align: center;
}
html[data-theme="noir"] .bm-signout { border-color: var(--bm-divider); }

/* -- Responsive --------------------------------------------- */
@media (max-width: 600px) {
  .bm-noir-hero { height: 480px; }
  .bm-noir-portraits { transform: translate(-58%, -52%); }
  .bm-noir-portrait-main { width: 160px; height: 250px; }
  .bm-noir-portrait-side { width: 82px; height: 112px; }
  .bm-noir-name { font-size: clamp(36px, 9vw, 52px); }
}

/* ============================================================
   MARQUEE -- black canvas, yellow accent, bold brand layout
   Four sections: hero / featured cards / about / gallery
   Yellow = #F5BA00 (sampled from reference)
   Available to all users, suited for brands, creators, public figures
   ============================================================ */
html[data-theme="marquee"] {
  --bm-bg:             #0A0A0A;
  --bm-card:           #141414;
  --bm-card-hover:     #1E1E1E;
  --bm-accent:         #F5BA00;
  --bm-accent-soft:    rgba(245, 186, 0, 0.12);
  --bm-accent-glow:    rgba(245, 186, 0, 0.30);
  --bm-text-primary:   #FFFFFF;
  --bm-text-secondary: rgba(255, 255, 255, 0.70);
  --bm-text-muted:     rgba(255, 255, 255, 0.42);
  --bm-divider:        rgba(255, 255, 255, 0.08);
  --bm-divider-strong: rgba(255, 255, 255, 0.18);
}

/* -- Wrapper ------------------------------------------------ */
.bm-mq-wrap {
  max-width: 100%;
  margin: 0;
  padding-bottom: 0;
  background: var(--bm-bg);
  color: var(--bm-text-primary);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Utility */
.bm-mq-yellow { color: var(--bm-accent); }
.bm-mq-loading,
.bm-mq-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--bm-text-muted);
  padding: 12px 0;
}

/* -- SECTION 1: HERO ---------------------------------------- */
.bm-mq-hero {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Left column: text content */
.bm-mq-hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 36px 36px;
  background: #0A0A0A;
  position: relative;
  z-index: 2;
}

/* Logo block */
.bm-mq-logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bm-mq-logo-img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.bm-mq-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.0;
}
.bm-mq-logo-text span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFFFFF;
}
.bm-mq-logo-text span:last-child {
  color: var(--bm-accent);
}

/* Headline */
.bm-mq-headline {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}
.bm-mq-verified-badge {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--bm-accent);
  border: 1px solid var(--bm-accent);
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 10px;
  width: fit-content;
}
.bm-mq-handle {
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bm-mq-name {
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.5px;
  color: var(--bm-accent);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.bm-mq-location {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--bm-text-muted);
  text-transform: uppercase;
}

/* Stats strip */
.bm-mq-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 20px 0;
}
.bm-mq-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 20px;
}
.bm-mq-stat-num {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  color: var(--bm-accent);
  line-height: 1;
}
.bm-mq-stat-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}
.bm-mq-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--bm-divider);
  margin-right: 20px;
  flex-shrink: 0;
}

/* Anthem row */
.bm-mq-anthem-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.bm-mq-anthem-btn {
  background: var(--bm-accent);
  color: #000000;
  border: none;
  padding: 10px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  flex-shrink: 0;
}
.bm-mq-anthem-btn:hover {
  background: #FFD000;
  transform: translateY(-1px);
}
.bm-mq-anthem-tag {
  background: var(--bm-accent);
  color: #000;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  flex-shrink: 0;
}
.bm-mq-anthem-info {
  font-size: 11px;
  color: var(--bm-text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions */
.bm-mq-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bm-mq-edit-btn {
  background: transparent;
  border: 1px solid var(--bm-divider-strong);
  color: var(--bm-text-primary);
  padding: 9px 18px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.bm-mq-edit-btn:hover {
  border-color: var(--bm-accent);
  color: var(--bm-accent);
}
.bm-mq-role-pill {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-accent);
  border: 1px solid var(--bm-accent);
  padding: 6px 12px;
}

/* Right column: main circle photo */
.bm-mq-hero-right {
  width: 42%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 36px;
  background: #0D0D0D;
  position: relative;
}
.bm-mq-main-circle {
  width: clamp(200px, 22vw, 280px);
  height: clamp(200px, 22vw, 280px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--bm-accent);
  background: #1A1A1A;
  cursor: pointer;
  padding: 0;
  display: block;
  box-shadow:
    0 0 0 6px rgba(245,186,0,0.08),
    0 0 40px rgba(245,186,0,0.15);
}
.bm-mq-circle-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}
.bm-mq-main-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bm-mq-circle-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: #141414;
}
.bm-mq-live-dot {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4CAF50;
  border: 3px solid #0D0D0D;
  z-index: 2;
}
.bm-mq-circle-label {
  margin-top: 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}

/* -- SECTION STRUCTURE (shared) ----------------------------- */
.bm-mq-section {
  padding: 48px 36px;
  border-top: 1px solid var(--bm-divider);
}
.bm-mq-section-head {
  margin-bottom: 28px;
}
.bm-mq-section-rule {
  height: 2px;
  width: 32px;
  background: var(--bm-accent);
  margin-bottom: 8px;
}
.bm-mq-section-label-text {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  margin-bottom: 6px;
}
.bm-mq-section-sub {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.0;
}
.bm-mq-section-sub.bm-mq-yellow { color: var(--bm-accent); }

/* -- SECTION 2: FEATURED CARDS ----------------------------- */
.bm-mq-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bm-mq-card {
  background: var(--bm-card);
  overflow: hidden;
}
.bm-mq-card-img-wrap {
  display: block;
  width: 100%;
}
.bm-mq-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  display: block;
}
.bm-mq-card-img-empty {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1A1A;
  color: var(--bm-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bm-mq-card-img video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.bm-mq-card-body {
  padding: 20px;
}
.bm-mq-card-accent-line {
  height: 2px;
  width: 24px;
  background: var(--bm-accent);
  margin-bottom: 10px;
}
.bm-mq-card-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.bm-mq-card-desc {
  font-size: 12px;
  color: var(--bm-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.bm-mq-card-cta {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--bm-accent);
  cursor: pointer;
}

/* -- SECTION 3: ABOUT -------------------------------------- */
.bm-mq-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.bm-mq-about-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bm-mq-cover-wrap { display: block; width: 100%; }
.bm-mq-cover-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  display: block;
}
.bm-mq-cover-img video { width: 100%; height: 260px; object-fit: cover; display: block; }
.bm-mq-cover-placeholder {
  width: 100%;
  height: 260px;
  background: #141414;
}
.bm-mq-about-stat-badge {
  display: inline-flex;
  flex-direction: column;
  background: var(--bm-accent);
  color: #000;
  padding: 12px 16px;
  align-self: flex-start;
}
.bm-mq-badge-num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.bm-mq-badge-label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* FAM grid */
.bm-mq-fam-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bm-mq-fam-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bm-mq-fam-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #1A1A1A;
  border: 1.5px solid var(--bm-divider);
}
.bm-mq-fam-name {
  font-size: 7px;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* About right */
.bm-mq-about-right { display: flex; flex-direction: column; gap: 16px; }
.bm-mq-about-name {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0;
}
.bm-mq-about-meta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-accent);
}
.bm-mq-bio {
  font-size: 14px;
  line-height: 1.7;
  color: var(--bm-text-secondary);
}

/* Detail rows */
.bm-mq-detail-rows { display: flex; flex-direction: column; gap: 0; }
.bm-mq-detail-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-mq-detail-key {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.bm-mq-detail-val {
  font-size: 13px;
  color: var(--bm-text-primary);
}

/* Neighbors */
.bm-mq-neighbors-grid { display: flex; flex-direction: column; gap: 10px; }
.bm-mq-people-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bm-mq-person { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bm-mq-person-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #1A1A1A;
  border: 1px solid var(--bm-divider);
}
.bm-mq-person-name {
  font-size: 7px;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- SECTION 4: GALLERY ------------------------------------- */
.bm-mq-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.bm-mq-gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #141414;
}
.bm-mq-gallery-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  display: block;
  transition: transform 0.3s ease;
}
.bm-mq-gallery-item:hover .bm-mq-gallery-media { transform: scale(1.04); }
.bm-mq-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  display: flex;
  align-items: flex-end;
  padding: 8px;
}
.bm-mq-gallery-item:hover .bm-mq-gallery-overlay { background: rgba(0,0,0,0.45); }
.bm-mq-gallery-meta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0);
  transition: color 0.2s;
}
.bm-mq-gallery-item:hover .bm-mq-gallery-meta { color: rgba(255,255,255,0.8); }

/* -- TESTIMONIALS ------------------------------------------- */
.bm-mq-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.bm-mq-testimonial {
  background: var(--bm-card);
  padding: 20px;
  border-left: 3px solid var(--bm-accent);
}
.bm-mq-testimonial-stars {
  color: var(--bm-accent);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.bm-mq-testimonial-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bm-text-secondary);
  font-style: italic;
  margin-bottom: 12px;
}
.bm-mq-testimonial-author {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}

/* -- FOOTER ------------------------------------------------- */
.bm-mq-footer {
  padding: 32px 36px;
  border-top: 1px solid var(--bm-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bm-mq-footer-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-mq-footer-bm {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFFFFF;
}
.bm-mq-footer-block {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bm-accent);
}
html[data-theme="marquee"] .bm-signout {
  font-size: 10px;
  letter-spacing: 2px;
  border-color: var(--bm-divider);
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 700px) {
  .bm-mq-hero { flex-direction: column-reverse; }
  .bm-mq-hero-left { padding: 24px 20px; }
  .bm-mq-hero-right { width: 100%; padding: 28px 20px 0; }
  .bm-mq-cards-grid { grid-template-columns: 1fr; }
  .bm-mq-about-grid  { grid-template-columns: 1fr; }
  .bm-mq-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-mq-testimonials { grid-template-columns: 1fr; }
  .bm-mq-section { padding: 36px 20px; }
  .bm-mq-footer { flex-direction: column; gap: 16px; text-align: center; padding: 24px 20px; }
}

/* ============================================================
   BLOOM -- alternating light/dark, hot pink, creator energy
   Hero: light pink gradient, Great Vibes script name
   Featured: dark black + pink
   About: light white
   Gallery: dark black + pink
   ============================================================ */
html[data-theme="bloom"] {
  --bm-bg:             #FFFFFF;
  --bm-card:           #F9F0F5;
  --bm-card-hover:     #F0E5EF;
  --bm-accent:         #D6337A;
  --bm-accent-soft:    rgba(214, 51, 122, 0.10);
  --bm-accent-glow:    rgba(214, 51, 122, 0.28);
  --bm-text-primary:   #1A1A1A;
  --bm-text-secondary: rgba(26, 26, 26, 0.68);
  --bm-text-muted:     rgba(26, 26, 26, 0.42);
  --bm-divider:        rgba(214, 51, 122, 0.12);
  --bm-divider-strong: rgba(214, 51, 122, 0.24);
}

/* -- Wrapper ------------------------------------------------ */
.bm-bl-wrap {
  max-width: 100%;
  margin: 0;
  background: #FFFFFF;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.bm-bl-pink { color: #D6337A; }
.bm-bl-loading,
.bm-bl-empty {
  font-size: 12px;
  font-style: italic;
  color: rgba(26,26,26,0.4);
  padding: 12px 0;
}

/* Light/dark section utilities */
.bm-bl-dark {
  background: #0A0A0A;
  color: #FFFFFF;
}
.bm-bl-light {
  background: #FFFFFF;
  color: #1A1A1A;
}
.bm-bl-dark .bm-bl-loading,
.bm-bl-dark .bm-bl-empty { color: rgba(255,255,255,0.35); }

/* -- SECTION 1: HERO (light pink gradient) ----------------- */
.bm-bl-hero {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  background: linear-gradient(135deg, #FFD5EA 0%, #FFE8F4 35%, #FFF5F9 65%, #FFF9FC 100%);
}

/* Left */
.bm-bl-hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 36px 36px;
}

/* Logo */
.bm-bl-logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bm-bl-logo-img { height: 30px; width: auto; }
.bm-bl-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.0;
}
.bm-bl-logo-text span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #1A1A1A;
}
.bm-bl-logo-text span:last-child { color: #D6337A; }

/* Headline */
.bm-bl-headline {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}
.bm-bl-verified {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #D6337A;
  border: 1px solid #D6337A;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 10px;
  width: fit-content;
}
.bm-bl-handle {
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1A1A1A;
  margin-bottom: 4px;
}
/* Real name in Great Vibes script - the signature element */
.bm-bl-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(36px, 6vw, 70px);
  font-weight: 400;
  color: #D6337A;
  margin: 0 0 8px;
  line-height: 1.0;
}
.bm-bl-acct-type {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(26,26,26,0.55);
  margin-bottom: 4px;
}
.bm-bl-location {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(26,26,26,0.50);
  text-transform: uppercase;
}

/* Stats (dark numbers on light bg) */
.bm-bl-stats {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.bm-bl-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 20px;
}
.bm-bl-stat-num {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  color: #D6337A;
  line-height: 1;
}
.bm-bl-stat-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(26,26,26,0.45);
}
.bm-bl-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(214,51,122,0.2);
  margin-right: 20px;
  flex-shrink: 0;
}

/* Anthem */
.bm-bl-anthem-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.bm-bl-anthem-btn {
  background: #D6337A;
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
  flex-shrink: 0;
}
.bm-bl-anthem-btn:hover { background: #C0296A; }
.bm-bl-anthem-tag {
  background: #D6337A;
  color: #fff;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  flex-shrink: 0;
}
.bm-bl-anthem-info {
  font-size: 11px;
  color: rgba(26,26,26,0.65);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions */
.bm-bl-actions { display: flex; align-items: center; gap: 12px; }
.bm-bl-edit-btn {
  background: transparent;
  border: 1px solid rgba(26,26,26,0.25);
  color: #1A1A1A;
  padding: 9px 18px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.bm-bl-edit-btn:hover { border-color: #D6337A; color: #D6337A; }
.bm-bl-role-pill {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #D6337A;
  border: 1px solid #D6337A;
  padding: 6px 12px;
}

/* Right: main circle */
.bm-bl-hero-right {
  width: 42%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 36px;
}
.bm-bl-main-circle {
  width: clamp(200px, 22vw, 270px);
  height: clamp(200px, 22vw, 270px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 3px solid #D6337A;
  background: #F0E5EF;
  cursor: pointer;
  padding: 0;
  display: block;
  box-shadow:
    0 0 0 6px rgba(214,51,122,0.10),
    0 0 40px rgba(214,51,122,0.18);
}
.bm-bl-circle-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}
.bm-bl-main-circle video { width:100%; height:100%; object-fit:cover; }
.bm-bl-circle-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  background: #F5E8F0;
}
.bm-bl-live-dot {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4CAF50;
  border: 3px solid #FFF0F8;
  z-index: 2;
}
.bm-bl-circle-label {
  margin-top: 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(26,26,26,0.40);
}

/* -- SECTION STRUCTURE -------------------------------------- */
.bm-bl-section { padding: 48px 36px; }
.bm-bl-section-head { margin-bottom: 28px; }
.bm-bl-accent-rule {
  height: 2px;
  width: 32px;
  background: #D6337A;
  margin-bottom: 8px;
}
.bm-bl-accent-rule-dark { background: #D6337A; }
.bm-bl-section-kicker {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.bm-bl-kicker-dark { color: rgba(26,26,26,0.45); }
.bm-bl-section-title {
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.0;
}
.bm-bl-title-dark { color: #1A1A1A; }

/* -- SECTION 2: FEATURED CARDS (dark) --------------------- */
.bm-bl-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bm-bl-card { background: #141414; overflow: hidden; }
.bm-bl-card-img { width:100%; height:220px; object-fit:cover; background-size:cover; background-position:center; display:block; }
.bm-bl-card-img video { width:100%; height:220px; object-fit:cover; display:block; }
.bm-bl-card-empty {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1A1A;
  color: rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bm-bl-card-body { padding: 20px; }
.bm-bl-card-accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6337A;
  margin-bottom: 10px;
}
.bm-bl-card-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bm-bl-card-desc { font-size: 12px; color: rgba(255,255,255,0.50); margin-bottom: 14px; line-height: 1.5; }
.bm-bl-card-cta { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #D6337A; cursor: pointer; }

/* -- SECTION 3: ABOUT (light) ------------------------------ */
.bm-bl-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.bm-bl-about-left { display: flex; flex-direction: column; gap: 16px; }
.bm-bl-cover-wrap { display: block; width: 100%; }
.bm-bl-cover-img { width:100%; height:260px; object-fit:cover; background-size:cover; background-position:center; display:block; }
.bm-bl-cover-img video { width:100%; height:260px; object-fit:cover; display:block; }
.bm-bl-cover-placeholder { width:100%; height:260px; background:#F5E8F0; }
.bm-bl-stat-badge {
  display: inline-flex;
  flex-direction: column;
  background: #D6337A;
  color: #fff;
  padding: 12px 16px;
  align-self: flex-start;
}
.bm-bl-badge-num { font-size: 28px; font-weight: 900; line-height: 1; }
.bm-bl-badge-label { font-size: 8px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }

.bm-bl-about-right { display: flex; flex-direction: column; gap: 14px; }
.bm-bl-about-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  color: #1A1A1A;
  margin: 0;
}
.bm-bl-about-meta { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(26,26,26,0.55); }
.bm-bl-bio { font-size: 14px; line-height: 1.7; color: rgba(26,26,26,0.75); }

/* Detail rows */
.bm-bl-detail-rows { display: flex; flex-direction: column; gap: 0; }
.bm-bl-detail-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 0.5px solid rgba(214,51,122,0.15); }
.bm-bl-detail-key { font-size: 7px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: rgba(26,26,26,0.42); min-width: 90px; flex-shrink: 0; }
.bm-bl-detail-val { font-size: 13px; color: #1A1A1A; }

/* FAM */
.bm-bl-fam-grid { display: flex; flex-direction: column; gap: 10px; }
.bm-bl-fam-label { font-size: 8px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: rgba(26,26,26,0.42); }
.bm-bl-fam-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-bl-fam-person { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bm-bl-fam-img { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; background-color: #F5E8F0; border: 2px solid rgba(214,51,122,0.25); }
.bm-bl-fam-name { font-size: 7px; color: rgba(26,26,26,0.50); text-align: center; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Neighbor name strip */
.bm-bl-neighbor-strip-wrap {
  border-top: 1px solid rgba(214,51,122,0.15);
  padding-top: 20px;
}
.bm-bl-strip-label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(26,26,26,0.38);
  margin-bottom: 12px;
}
.bm-bl-neighbor-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.bm-bl-strip-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1A1A1A;
  padding: 0 12px 0 0;
}
.bm-bl-strip-dot {
  font-size: 10px;
  color: #D6337A;
  margin-right: 12px;
}

/* -- SECTION 4: GALLERY + GUESTBOOK (dark) ----------------- */
.bm-bl-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.bm-bl-gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; background: #141414; }
.bm-bl-gallery-media { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; display: block; transition: transform 0.3s; }
.bm-bl-gallery-item:hover .bm-bl-gallery-media { transform: scale(1.05); }
.bm-bl-gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.2s; display: flex; align-items: flex-end; padding: 8px; }
.bm-bl-gallery-item:hover .bm-bl-gallery-overlay { background: rgba(214,51,122,0.35); }
.bm-bl-gallery-overlay span { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0); transition: color 0.2s; }
.bm-bl-gallery-item:hover .bm-bl-gallery-overlay span { color: #fff; }

.bm-bl-testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.bm-bl-testimonial { background: #141414; padding: 20px; border-left: 3px solid #D6337A; }
.bm-bl-testimonial-stars { color: #D6337A; font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; }
.bm-bl-testimonial-text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.65); font-style: italic; margin-bottom: 12px; }
.bm-bl-testimonial-author { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.40); }

/* -- FOOTER (light) ----------------------------------------- */
.bm-bl-footer {
  padding: 32px 36px;
  border-top: 1px solid rgba(214,51,122,0.15);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.bm-bl-footer-name {
  font-family: 'Great Vibes', cursive;
  font-size: 32px;
  font-weight: 400;
  flex: 1;
}
.bm-bl-footer-block {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(26,26,26,0.40);
}
html[data-theme="bloom"] .bm-signout { border-color: rgba(214,51,122,0.25); color: rgba(26,26,26,0.60); }

/* -- Responsive --------------------------------------------- */
@media (max-width: 700px) {
  .bm-bl-hero { flex-direction: column-reverse; }
  .bm-bl-hero-left { padding: 24px 20px; }
  .bm-bl-hero-right { width: 100%; padding: 28px 20px 0; }
  .bm-bl-cards-grid { grid-template-columns: 1fr; }
  .bm-bl-about-grid { grid-template-columns: 1fr; }
  .bm-bl-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-bl-testimonials { grid-template-columns: 1fr; }
  .bm-bl-section { padding: 36px 20px; }
  .bm-bl-footer { padding: 24px 20px; }
}

/* ============================================================
   LOFT -- warm cream, khaki accent band, minimal editorial
   Trinity photos as full-width rectangular banner at top.
   Name in warm khaki band. Cover photo in about section.
   Content tiles + neighbor strip below.
   ============================================================ */
html[data-theme="loft"] {
  --bm-bg:             #FAF7F2;
  --bm-card:           #FFFFFF;
  --bm-card-hover:     #F2EDE6;
  --bm-accent:         #A9957A;
  --bm-accent-soft:    rgba(169, 149, 122, 0.12);
  --bm-accent-glow:    rgba(169, 149, 122, 0.24);
  --bm-text-primary:   #1A1A18;
  --bm-text-secondary: rgba(26, 26, 24, 0.68);
  --bm-text-muted:     rgba(26, 26, 24, 0.42);
  --bm-divider:        rgba(169, 149, 122, 0.15);
  --bm-divider-strong: rgba(169, 149, 122, 0.30);
}

/* -- Wrapper ------------------------------------------------ */
.bm-loft-wrap {
  max-width: 100%;
  margin: 0;
  background: var(--bm-bg);
  color: var(--bm-text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  padding-bottom: 60px;
}
.bm-loft-loading,
.bm-loft-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--bm-text-muted);
  padding: 12px 0;
}

/* -- 1. TRINITY BANNER -------------------------------------- */
/* Three photos, full width, equal thirds, rectangular */
.bm-loft-trinity-banner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  width: 100%;
  height: 200px;
}
.bm-loft-panel {
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--bm-card-hover);
  display: block;
}
.bm-loft-panel-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bm-loft-panel:hover .bm-loft-panel-media {
  transform: scale(1.04);
}
.bm-loft-panel-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: #EDE8DF;
}
.bm-loft-live-dot {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  border: 2px solid #FAF7F2;
  z-index: 2;
}

/* -- 2. NAME BAND ------------------------------------------- */
.bm-loft-name-band {
  background: #A9957A;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bm-loft-name-band-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.bm-loft-verified-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  top: 6px;
  left: -14px;
}
.bm-loft-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 2px;
  margin: 0;
  line-height: 1.0;
}
.bm-loft-name-sub {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.bm-loft-edit-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s;
}
.bm-loft-edit-btn:hover { background: rgba(255,255,255,0.15); }

/* -- 3. ABOUT ----------------------------------------------- */
.bm-loft-about {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  min-height: 400px;
}
.bm-loft-about-photo {
  overflow: hidden;
  background: #EDE8DF;
}
.bm-loft-cover-btn { display: block; width: 100%; height: 100%; }
.bm-loft-cover-img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background-size: cover;
  background-position: center top;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bm-loft-cover-img:hover { transform: scale(1.03); }
.bm-loft-cover-img video {
  width: 100%;
  min-height: 400px;
  height: 100%;
  object-fit: cover;
}
.bm-loft-cover-placeholder {
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: #EDE8DF;
}

.bm-loft-about-text {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid var(--bm-divider);
}

.bm-loft-section-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bm-accent);
}
.bm-loft-about-rule,
.bm-loft-tiles-rule {
  height: 1px;
  background: var(--bm-divider);
  margin: 4px 0 12px;
}

.bm-loft-bio {
  font-size: 14px;
  line-height: 1.75;
  color: var(--bm-text-secondary);
}

/* Detail rows */
.bm-loft-detail-rows { display: flex; flex-direction: column; gap: 0; }
.bm-loft-detail-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--bm-divider);
  align-items: baseline;
}
.bm-loft-detail-key {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  min-width: 88px;
  flex-shrink: 0;
}
.bm-loft-detail-val {
  font-size: 13px;
  color: var(--bm-text-primary);
}

/* Counters in about section */
.bm-loft-counters {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--bm-divider);
  border-bottom: 1px solid var(--bm-divider);
}
.bm-loft-counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-loft-counter-num {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--bm-accent);
  line-height: 1;
}
.bm-loft-counter-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}

/* Anthem */
.bm-loft-anthem { display: flex; flex-direction: column; gap: 4px; }
.bm-loft-anthem-btn {
  background: var(--bm-accent);
  color: #FFFFFF;
  border: none;
  padding: 9px 18px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  transition: background 0.18s;
  text-align: left;
  width: fit-content;
}
.bm-loft-anthem-btn:hover { background: #8C7B63; }
.bm-loft-anthem-tag {
  background: var(--bm-accent-soft);
  color: var(--bm-accent);
  padding: 9px 18px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  width: fit-content;
}
.bm-loft-anthem-artist {
  font-size: 10px;
  color: var(--bm-text-muted);
  font-style: italic;
  padding-left: 2px;
}

/* Social row */
.bm-loft-social-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.bm-loft-social-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}
.bm-loft-social-icons { display: flex; gap: 10px; }
.bm-loft-social-icon {
  font-size: 16px;
  color: var(--bm-accent);
  cursor: pointer;
}

/* -- 4. CONTENT TILES --------------------------------------- */
.bm-loft-tiles-section {
  padding: 36px 28px;
  border-top: 1px solid var(--bm-divider);
}
.bm-loft-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.bm-loft-tile { display: flex; flex-direction: column; gap: 8px; }
.bm-loft-tile-media-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #EDE8DF;
}
.bm-loft-tile-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.bm-loft-tile:hover .bm-loft-tile-media { transform: scale(1.05); }
.bm-loft-tile-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  text-align: center;
}

/* -- 5. NEIGHBOR STRIP -------------------------------------- */
.bm-loft-neighbor-section {
  padding: 36px 28px;
  border-top: 1px solid var(--bm-divider);
  background: #FFFFFF;
}
.bm-loft-neighbor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 16px;
}
.bm-loft-neighbor-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bm-loft-neighbor-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #EDE8DF;
  border: 1.5px solid var(--bm-divider-strong);
}
.bm-loft-neighbor-handle {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- 6. LOWER (FAM + Guestbook) ----------------------------- */
.bm-loft-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--bm-divider);
}
.bm-loft-lower-col {
  padding: 36px 28px;
  border-right: 1px solid var(--bm-divider);
}
.bm-loft-lower-col:last-child { border-right: none; }

.bm-loft-fam-grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* Guestbook entries */
.bm-loft-guestbook-entry {
  padding: 12px 0;
  border-bottom: 0.5px solid var(--bm-divider);
}
.bm-loft-guestbook-author {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin-bottom: 4px;
}
.bm-loft-guestbook-text {
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--bm-text-secondary);
  margin-bottom: 4px;
}
.bm-loft-guestbook-meta {
  font-size: 8px;
  color: var(--bm-text-muted);
}

/* -- FOOTER ------------------------------------------------- */
.bm-loft-footer {
  padding: 28px;
  border-top: 1px solid var(--bm-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #FFFFFF;
}
.bm-loft-footer-name {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--bm-accent);
}
.bm-loft-footer-block {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--bm-text-muted);
}
html[data-theme="loft"] .bm-signout {
  font-size: 9px;
  letter-spacing: 2px;
  border-color: var(--bm-divider);
  color: var(--bm-text-muted);
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 620px) {
  .bm-loft-trinity-banner { height: 150px; }
  .bm-loft-about { grid-template-columns: 1fr; }
  .bm-loft-about-photo { min-height: 280px; }
  .bm-loft-cover-img { min-height: 280px; }
  .bm-loft-tiles-grid { grid-template-columns: repeat(3, 1fr); }
  .bm-loft-lower { grid-template-columns: 1fr; }
  .bm-loft-lower-col { border-right: none; border-bottom: 1px solid var(--bm-divider); }
  .bm-loft-footer { flex-direction: column; gap: 10px; text-align: center; }
}

/* ============================================================
   SAGE -- muted sage green, warm cream, botanical arch layout
   The arch-shaped portrait is the signature element.
   Script name at top of hero. Bio quote on dark sage.
   ============================================================ */
html[data-theme="sage"] {
  --bm-bg:             #F5F2EC;
  --bm-card:           #FFFFFF;
  --bm-card-hover:     #EDE8DF;
  --bm-accent:         #7F806E;
  --bm-accent-soft:    rgba(127, 128, 110, 0.12);
  --bm-accent-glow:    rgba(127, 128, 110, 0.24);
  --bm-text-primary:   #1C1C18;
  --bm-text-secondary: rgba(28, 28, 24, 0.68);
  --bm-text-muted:     rgba(28, 28, 24, 0.42);
  --bm-divider:        rgba(127, 128, 110, 0.18);
  --bm-divider-strong: rgba(127, 128, 110, 0.32);
}

/* -- Wrapper ------------------------------------------------ */
.bm-sage-wrap {
  max-width: 100%;
  margin: 0;
  background: var(--bm-bg);
  color: var(--bm-text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  padding-bottom: 60px;
}
.bm-sage-loading,
.bm-sage-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--bm-text-muted);
  padding: 12px 0;
}

/* -- SECTION 1: HERO ---------------------------------------- */
.bm-sage-hero {
  position: relative;
  width: 100%;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Cover as background */
.bm-sage-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bm-sage-hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  display: block;
}
.bm-sage-hero-empty { background: #5C6B5A; }

/* Sage green overlay -- softer than Noir, more botanical */
.bm-sage-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(63, 74, 68, 0.62);
}

/* Hero content centered over the overlay */
.bm-sage-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
}

/* Script name at top of hero */
.bm-sage-hero-name-top {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  line-height: 1.1;
}

/* -- THE ARCH PORTRAIT -- the signature element ------------ */
/* The arch shape: flat bottom, rounded arch top.
   Achieved with border-radius: 50% 50% 0 0 / 100% 100% 0 0
   This creates a perfect arch (semicircle top, straight sides/bottom) */
.bm-sage-arch-wrap {
  width: clamp(160px, 22vw, 240px);
  height: clamp(220px, 30vw, 320px);
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
  position: relative;
  /* THE ARCH: top is a perfect semicircle, bottom is straight */
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  border: 3px solid rgba(255,255,255,0.55);
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.10),
    0 8px 32px rgba(0,0,0,0.35);
}
.bm-sage-arch-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  object-fit: cover;
  display: block;
  /* Extend slightly to fill the arch without showing corners */
  transform: scale(1.02);
}
.bm-sage-arch-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: rgba(255,255,255,0.12);
}
.bm-sage-arch-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bm-sage-live-dot {
  position: absolute;
  bottom: 10px;
  right: 50%;
  transform: translateX(50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  border: 2px solid rgba(255,255,255,0.8);
  z-index: 3;
}

/* Role tag below arch */
.bm-sage-role-tag {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(63,74,68,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 16px;
  backdrop-filter: blur(4px);
}

/* Counter strip in hero */
.bm-sage-hero-counters {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.28);
  padding: 12px 24px;
  backdrop-filter: blur(6px);
}
.bm-sage-hero-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 18px;
}
.bm-sage-hero-num {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}
.bm-sage-hero-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
}
.bm-sage-hero-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.20);
}

/* Edit button in hero */
.bm-sage-edit-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.40);
  color: rgba(255,255,255,0.80);
  padding: 8px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
  backdrop-filter: blur(4px);
}
.bm-sage-edit-btn:hover { background: rgba(255,255,255,0.12); }

/* -- SECTION 2: ABOUT --------------------------------------- */
.bm-sage-about {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 0;
  min-height: 480px;
  background: #FFFFFF;
}

/* Left: text content */
.bm-sage-about-left {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--bm-divider);
}

/* "welcome." in script */
.bm-sage-welcome {
  font-family: 'Great Vibes', cursive;
  font-size: 42px;
  font-weight: 400;
  color: var(--bm-accent);
  line-height: 1.0;
}

/* "I'm [Name]" */
.bm-sage-about-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 400;
  color: var(--bm-text-primary);
  margin: 0;
  line-height: 1.0;
}

.bm-sage-about-loc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}

.bm-sage-bio {
  font-size: 14px;
  line-height: 1.78;
  color: var(--bm-text-secondary);
}

/* Details */
.bm-sage-details { display: flex; flex-direction: column; gap: 0; }
.bm-sage-detail-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--bm-divider);
  align-items: baseline;
}
.bm-sage-detail-key {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  min-width: 88px;
  flex-shrink: 0;
}
.bm-sage-detail-val { font-size: 13px; color: var(--bm-text-primary); }

/* Anthem */
.bm-sage-anthem { display: flex; flex-direction: column; gap: 4px; }
.bm-sage-anthem-btn {
  background: var(--bm-accent);
  color: #FFFFFF;
  border: none;
  padding: 9px 18px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  transition: background 0.18s;
  width: fit-content;
}
.bm-sage-anthem-btn:hover { background: #666758; }
.bm-sage-anthem-tag {
  background: var(--bm-accent-soft);
  color: var(--bm-accent);
  padding: 9px 18px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  width: fit-content;
}
.bm-sage-anthem-artist {
  font-size: 10px;
  color: var(--bm-text-muted);
  font-style: italic;
}

/* Follow row */
.bm-sage-follow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.bm-sage-follow-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
}
.bm-sage-follow-icons { display: flex; gap: 12px; }
.bm-sage-follow-icons span { font-size: 18px; color: var(--bm-accent); cursor: pointer; }

/* Right: photos stacked */
.bm-sage-about-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.bm-sage-about-photo-btn {
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.bm-sage-about-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background-size: cover;
  background-position: center top;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bm-sage-about-photo-btn:hover .bm-sage-about-photo { transform: scale(1.03); }
.bm-sage-photo-small {
  flex: 0 0 180px;
  min-height: 180px;
}
.bm-sage-photo-empty {
  background: var(--bm-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--bm-text-muted);
}

/* -- SECTION 3: DARK SAGE QUOTE ----------------------------- */
.bm-sage-quote-section {
  background: #3F4A44;
  padding: 56px 10%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.bm-sage-quote-star {
  font-size: 18px;
  color: rgba(255,255,255,0.45);
}
.bm-sage-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 2.8vw, 28px);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}
.bm-sage-quote-attr {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* -- SECTIONS 4-5: GALLERY + NEIGHBORS + LOWER -------------- */
.bm-sage-section { padding: 40px 36px; }
.bm-sage-section-alt { background: #FFFFFF; }
.bm-sage-section-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin-bottom: 4px;
}
.bm-sage-section-rule {
  height: 1px;
  background: var(--bm-divider);
  margin-bottom: 20px;
}

/* Gallery */
.bm-sage-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bm-sage-gallery-item { aspect-ratio: 1; overflow: hidden; background: var(--bm-card-hover); }
.bm-sage-gallery-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.bm-sage-gallery-item:hover .bm-sage-gallery-media { transform: scale(1.05); }

/* Neighbors + FAM */
.bm-sage-neighbor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 14px;
}
.bm-sage-person { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bm-sage-person-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bm-card-hover);
  border: 2px solid var(--bm-divider-strong);
}
.bm-sage-person-name {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bm-text-muted);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lower two-column */
.bm-sage-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--bm-divider);
}
.bm-sage-lower-col {
  padding: 36px;
  border-right: 1px solid var(--bm-divider);
}
.bm-sage-lower-col:last-child { border-right: none; }

/* Guestbook */
.bm-sage-guestbook-entry { padding: 12px 0; border-bottom: 0.5px solid var(--bm-divider); }
.bm-sage-guestbook-author {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin-bottom: 4px;
}
.bm-sage-guestbook-text {
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--bm-text-secondary);
  margin-bottom: 4px;
}
.bm-sage-guestbook-meta { font-size: 8px; color: var(--bm-text-muted); }

/* -- FOOTER ------------------------------------------------- */
.bm-sage-footer {
  padding: 28px 36px;
  border-top: 1px solid var(--bm-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #FFFFFF;
}
.bm-sage-footer-name {
  font-family: 'Great Vibes', cursive;
  font-size: 24px;
  font-weight: 400;
  color: var(--bm-accent);
}
.bm-sage-footer-block {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--bm-text-muted);
}
html[data-theme="sage"] .bm-signout {
  font-size: 9px;
  letter-spacing: 2px;
  border-color: var(--bm-divider);
  color: var(--bm-text-muted);
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 640px) {
  .bm-sage-about { grid-template-columns: 1fr; }
  .bm-sage-about-right { min-height: 260px; max-height: 320px; }
  .bm-sage-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-sage-lower { grid-template-columns: 1fr; }
  .bm-sage-lower-col { border-right: none; border-bottom: 1px solid var(--bm-divider); padding: 28px 20px; }
  .bm-sage-quote-section { padding: 40px 6%; }
  .bm-sage-section { padding: 32px 20px; }
  .bm-sage-about-left { padding: 32px 20px; }
  .bm-sage-footer { padding: 20px; flex-direction: column; text-align: center; }
}