/* ─────────────────────────────────────────────────────────────────────────
   Floati bio-page themes — v2 (post-redesign).
   Five themes with structural design moves, not just palette swaps:
     editorial    — magazine masthead (default)
     liner-notes  — vinyl LP gatefold (track numbers, SIDE B divider)
     receipt      — thermal till receipt (numbered links, mono only)
     postcard     — mail-order travel zine (perforated borders, postal red)
     greenscreen  — phosphor CRT (mono everywhere, > prompts, scanlines)

   Old theme classes (paper/linen/sage/rose/sky/sunset/ocean/mono/terminal/
   scrapbook/ink) remain for backward compat — see "Legacy aliases" at end.
   ───────────────────────────────────────────────────────────────────────── */

.bp {
  --bp-bg: #fbf8f1;
  --bp-card: #ffffff;
  --bp-border: rgba(26, 22, 20, 0.08);
  --bp-text: #1a1614;
  --bp-text-mute: #6c655d;
  --bp-icon-bg: rgba(26, 22, 20, 0.05);
  --bp-shadow: rgba(70, 60, 50, 0.18);
  --bp-accent: #5b5bf6;
  --bp-accent-text: #ffffff;
  background: var(--bp-bg);
}

/* Typography variants — orthogonal toggles. Defined HERE (before theme rules)
   so any theme that sets its own font-family wins via cascade order. Themes
   that don't set a font-family fall through to whichever font-* class is on. */
.bp.font-editorial .bp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.bp.font-editorial .bp-bio,
.bp.font-editorial .bp-link-title { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; }
.bp.font-sans .bp-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.bp.font-sans .bp-link-title { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; }
.bp.font-serif .bp-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.02em; }
.bp.font-serif .bp-bio,
.bp.font-serif .bp-link-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.bp.font-mono .bp-name { font-family: 'JetBrains Mono', monospace; font-weight: 500; text-transform: lowercase; }
.bp.font-mono .bp-bio,
.bp.font-mono .bp-link-title { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 0.04em; }

/* Background patterns (overlays on top of theme bg) */
.bp.bg-clean { /* nothing */ }
.bp.bg-grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  z-index: 0; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bp.bg-mesh::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, var(--bp-accent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 80%, var(--bp-accent), transparent 70%);
  opacity: 0.10;
}
.bp.bg-dots {
  background-image: radial-gradient(circle, var(--bp-text-mute) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-color: var(--bp-bg);
}
.bp.bg-grid {
  background-image:
    linear-gradient(var(--bp-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-border) 1px, transparent 1px);
  background-size: 32px 32px;
  background-color: var(--bp-bg);
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 1: EDITORIAL  (default)
   Sunday culture-section masthead. Hairline rules + Playfair italic + indigo.
   Signature move: link title gets an underline that grows L→R on hover.
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-editorial {
  --bp-bg: #fbf8f1;
  --bp-card: #ffffff;
  --bp-border: rgba(26, 22, 20, 0.10);
  --bp-text: #1a1614;
  --bp-text-mute: #6c655d;
  --bp-icon-bg: rgba(26, 22, 20, 0.04);
  --bp-shadow: rgba(70, 60, 50, 0.16);
  --bp-accent: #5b5bf6;
}
.bp.theme-editorial .bp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.bp.theme-editorial .bp-bio {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
}
.bp.theme-editorial .bp-link {
  background: transparent;
  border: 1px solid var(--bp-border);
  border-radius: 14px;
  transition: border-color 0.32s var(--ease), background 0.32s var(--ease);
}
.bp.theme-editorial .bp-link-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  background-image: linear-gradient(var(--bp-accent), var(--bp-accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.32s var(--ease);
  padding-bottom: 2px;
}
.bp.theme-editorial .bp-link:hover {
  transform: none;
  border-color: var(--bp-text);
  box-shadow: none;
}
.bp.theme-editorial .bp-link:hover .bp-link-title {
  background-size: 100% 1.5px;
}
.bp.theme-editorial .bp-link:hover .bp-link-arrow {
  background: transparent;
  color: var(--bp-accent);
}
.bp.theme-editorial .bp-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  position: relative;
  padding-left: 26px;
  margin: 28px 0 14px;
}
.bp.theme-editorial .bp-section-header::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px; background: var(--bp-text-mute);
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 2: LINER-NOTES
   Vinyl LP gatefold. Brown-black + warm gold. Track-numbered links.
   Structural move: each link is a "track" with A1/A2/B1/B2 prefix.
   Section headers act as Side breaks (— SIDE B —).
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-liner-notes {
  --bp-bg: #1a1612;
  --bp-card: #2a221c;
  --bp-border: rgba(212, 161, 74, 0.20);
  --bp-text: #f1e8d4;
  --bp-text-mute: #9a8a72;
  --bp-icon-bg: rgba(212, 161, 74, 0.10);
  --bp-shadow: rgba(0, 0, 0, 0.5);
  --bp-accent: #d4a14a;
  --bp-accent-text: #1a1612;
}
.bp.theme-liner-notes .bp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 2.2rem;
}
.bp.theme-liner-notes .bp-bio {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-style: italic;
  color: var(--bp-text-mute);
}
/* Counter resets must apply across every layout container — the Liner Notes
   track-number prefix would silently disappear in Grid/Mosaic/Magazine
   otherwise. */
.bp.theme-liner-notes .bp-links-stack,
.bp.theme-liner-notes .bp-links-grid,
.bp.theme-liner-notes .bp-links-mosaic,
.bp.theme-liner-notes .bp-links-magazine { counter-reset: side-a 0 side-b 0; }
.bp.theme-liner-notes .bp-link {
  background: transparent;
  border: 1px solid var(--bp-border);
  border-radius: 100px;
  padding-left: 60px;
  position: relative;
  counter-increment: side-a;
}
.bp.theme-liner-notes .bp-link::before {
  content: "A" counter(side-a);
  position: absolute;
  left: 18px; top: 50%; transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bp-accent);
  width: 28px;
}
.bp.theme-liner-notes .bp-section-header ~ .bp-link::before {
  content: "B" counter(side-b);
}
.bp.theme-liner-notes .bp-section-header ~ .bp-link {
  counter-increment: side-b;
}
.bp.theme-liner-notes .bp-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bp-accent);
  text-align: center;
  margin: 36px 0 18px;
  position: relative;
}
.bp.theme-liner-notes .bp-section-header::before,
.bp.theme-liner-notes .bp-section-header::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bp-accent), transparent);
}
.bp.theme-liner-notes .bp-section-header::before { left: 0; }
.bp.theme-liner-notes .bp-section-header::after { right: 0; transform: scaleX(-1); }
.bp.theme-liner-notes .bp-link-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.bp.theme-liner-notes .bp-link-icon {
  display: none;
}
.bp.theme-liner-notes .bp-link-arrow {
  background: transparent !important;
  color: var(--bp-text-mute) !important;
  font-family: 'JetBrains Mono', monospace;
  width: auto; padding-right: 6px;
}
.bp.theme-liner-notes .bp-link:hover {
  background: rgba(212, 161, 74, 0.08);
  border-color: var(--bp-accent);
  transform: none;
  box-shadow: none;
}
.bp.theme-liner-notes .bp-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  border-top: 1px solid var(--bp-border);
  padding-top: 18px;
  margin-top: 56px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 3: RECEIPT
   Thermal till receipt. Courier on cream, ink only (no color accent).
   Structural move: links auto-numbered 01. 02. 03., dashed-bottom rows.
   Cut VT323 per design crit (don't mix two nostalgias).
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-receipt {
  --bp-bg: #f4f1ea;
  --bp-card: #faf7f0;
  --bp-border: rgba(0, 0, 0, 0.22);
  --bp-text: #1a1a1a;
  --bp-text-mute: #6a6660;
  --bp-icon-bg: transparent;
  --bp-icon-color: #1a1a1a;
  --bp-shadow: rgba(0, 0, 0, 0.10);
  --bp-accent: #1a1a1a;
  --bp-accent-text: #f4f1ea;
}
.bp.theme-receipt,
.bp.theme-receipt .bp-bio,
.bp.theme-receipt .bp-link-title,
.bp.theme-receipt .bp-link-desc,
.bp.theme-receipt .bp-meta-item,
.bp.theme-receipt .bp-status,
.bp.theme-receipt .bp-section-header {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
}
.bp.theme-receipt .bp-name {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 4px;
}
.bp.theme-receipt .bp-name::before { content: "✱  "; color: var(--bp-text-mute); }
.bp.theme-receipt .bp-name::after  { content: "  ✱"; color: var(--bp-text-mute); }
.bp.theme-receipt .bp-bio {
  font-size: 0.84rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.bp.theme-receipt .bp-bio::before,
.bp.theme-receipt .bp-bio::after {
  content: "·  ·  ·  ·  ·  ·  ·  ·";
  display: block;
  color: var(--bp-text-mute);
  letter-spacing: 0.4em;
  font-size: 0.7rem;
  margin: 8px auto;
  width: 60%;
}
.bp.theme-receipt .bp-status {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bp.theme-receipt .bp-links-stack,
.bp.theme-receipt .bp-links-grid,
.bp.theme-receipt .bp-links-mosaic,
.bp.theme-receipt .bp-links-magazine { counter-reset: receipt-row 0; gap: 0; }
/* Magazine layout strips border/radius on links; suppress the dashed bottom
   that Receipt added so we don't get double dividers. */
.bp.theme-receipt .bp-links-magazine .bp-link { border-bottom: 0; }
.bp.theme-receipt .bp-link {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--bp-border);
  border-radius: 0;
  padding: 14px 4px;
  counter-increment: receipt-row;
  position: relative;
  transition: background 0.18s ease;
}
.bp.theme-receipt .bp-link::before {
  content: counter(receipt-row, decimal-leading-zero) ".";
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  color: var(--bp-text-mute);
  margin-right: 14px;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.bp.theme-receipt .bp-link-title {
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.bp.theme-receipt .bp-link:hover {
  background: var(--bp-text);
  color: var(--bp-bg);
  transform: none;
  box-shadow: none;
}
.bp.theme-receipt .bp-link:hover .bp-link-title,
.bp.theme-receipt .bp-link:hover .bp-link-desc,
.bp.theme-receipt .bp-link:hover::before {
  color: var(--bp-bg);
}
.bp.theme-receipt .bp-link-icon { display: none; }
.bp.theme-receipt .bp-link-arrow {
  background: transparent !important;
  color: inherit !important;
  font-family: 'Courier Prime', monospace;
  width: auto;
}
.bp.theme-receipt .bp-link-arrow svg { display: none; }
.bp.theme-receipt .bp-link-arrow::after { content: "→"; font-size: 1rem; }
.bp.theme-receipt .bp-section-header {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  text-align: center;
  margin: 24px 0 8px;
}
.bp.theme-receipt .bp-footer {
  font-family: 'Courier Prime', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border-top: 2px dashed var(--bp-border);
  padding-top: 14px;
  margin-top: 28px;
  color: var(--bp-text);
}
.bp.theme-receipt .bp-footer::before {
  content: "═══ THANK YOU ═══";
  display: block;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 4: POSTCARD
   Mail-order travel zine. Cream + deep oxblood. Dashed-perforation borders.
   Structural move: each link uses destination favicon as a "stamp."
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-postcard {
  --bp-bg: #f3ebd9;
  --bp-card: #fff8e7;
  --bp-border: rgba(31, 41, 55, 0.22);
  --bp-text: #1f2937;
  --bp-text-mute: #6b7280;
  --bp-icon-bg: rgba(170, 51, 68, 0.08);
  --bp-shadow: rgba(170, 51, 68, 0.18);
  --bp-accent: #aa3344;
  --bp-accent-text: #fff8e7;
}
.bp.theme-postcard .bp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 2.1rem;
}
.bp.theme-postcard .bp-bio {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--bp-text);
}
.bp.theme-postcard .bp-meta-item {
  font-family: 'JetBrains Mono', monospace;
  color: var(--bp-accent);
}
.bp.theme-postcard .bp-link {
  background: var(--bp-card);
  border: 1.5px dashed var(--bp-border);
  border-radius: 4px;
  padding: 14px 16px;
  position: relative;
}
.bp.theme-postcard .bp-link-icon {
  border-radius: 2px;
  background: var(--bp-card);
  border: 1px solid var(--bp-border);
  width: 36px; height: 36px;
  position: relative;
}
/* Scalloped edge "stamp" effect on the icon corner */
.bp.theme-postcard .bp-link-icon::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  background: radial-gradient(circle at 0 0, transparent 2px, var(--bp-card) 2.5px) 0 0/6px 6px,
              radial-gradient(circle at 100% 0, transparent 2px, var(--bp-card) 2.5px) 100% 0/6px 6px,
              radial-gradient(circle at 0 100%, transparent 2px, var(--bp-card) 2.5px) 0 100%/6px 6px,
              radial-gradient(circle at 100% 100%, transparent 2px, var(--bp-card) 2.5px) 100% 100%/6px 6px;
  z-index: -1;
}
.bp.theme-postcard .bp-link-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.bp.theme-postcard .bp-link-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-accent);
}
.bp.theme-postcard .bp-link:hover {
  border-style: solid;
  border-color: var(--bp-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--bp-accent), 0 12px 24px -12px var(--bp-shadow);
}
.bp.theme-postcard .bp-link-badge {
  background: var(--bp-accent);
  color: var(--bp-accent-text);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
}
.bp.theme-postcard .bp-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bp-accent);
  border-top: 1px dashed var(--bp-border);
  padding-top: 18px;
  margin-top: 28px;
}
.bp.theme-postcard .bp-avatar {
  border-radius: 6px;
  border: 4px solid var(--bp-card);
  box-shadow: 0 0 0 1.5px var(--bp-border), 0 8px 24px -8px var(--bp-shadow);
  position: relative;
}
.bp.theme-postcard .bp-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-accent);
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 5: GREENSCREEN
   Phosphor CRT. Green-on-black. Mono everywhere. > prompts. Scanlines.
   Structural move: link prefixed with > prompt, hover = scanline jitter.
   (Real Floyd-Steinberg dithered avatar requires JS — stub shipped here,
   JS can swap in a real dithered <pre> for v2.)
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-greenscreen {
  --bp-bg: #0a0f08;
  --bp-card: #0e1410;
  --bp-border: rgba(124, 255, 176, 0.25);
  --bp-text: #7cffb0;
  /* Lightened from #4d8a66 to pass WCAG AA (4.5:1) on the near-black bg */
  --bp-text-mute: #6dab86;
  --bp-icon-bg: rgba(124, 255, 176, 0.08);
  --bp-shadow: rgba(124, 255, 176, 0.18);
  --bp-accent: #7cffb0;
  --bp-accent-text: #0a0f08;
  background:
    repeating-linear-gradient(0deg, rgba(124, 255, 176, 0.04) 0 1px, transparent 1px 3px),
    var(--bp-bg);
}
.bp.theme-greenscreen,
.bp.theme-greenscreen .bp-bio,
.bp.theme-greenscreen .bp-link-title,
.bp.theme-greenscreen .bp-link-desc,
.bp.theme-greenscreen .bp-meta-item,
.bp.theme-greenscreen .bp-status,
.bp.theme-greenscreen .bp-section-header,
.bp.theme-greenscreen .bp-footer {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Courier Prime', monospace;
  text-shadow: 0 0 1px rgba(124, 255, 176, 0.5);
}
.bp.theme-greenscreen .bp-name {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 600;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 0 4px rgba(124, 255, 176, 0.6);
}
.bp.theme-greenscreen .bp-name::before {
  content: "● ";
  color: var(--bp-accent);
  animation: greenscreenBlink 1.6s steps(2, end) infinite;
}
@keyframes greenscreenBlink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }
.bp.theme-greenscreen .bp-bio { font-size: 0.85rem; letter-spacing: 0.02em; }
.bp.theme-greenscreen .bp-status {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--bp-text-mute);
}
.bp.theme-greenscreen .bp-link {
  background: transparent;
  border: 1px solid var(--bp-border);
  border-radius: 0;
  padding: 12px 14px;
  position: relative;
}
.bp.theme-greenscreen .bp-link::before {
  content: "> ";
  color: var(--bp-accent);
  font-weight: 600;
  margin-right: 8px;
  flex-shrink: 0;
}
.bp.theme-greenscreen .bp-link-title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.84rem;
}
.bp.theme-greenscreen .bp-link-icon { display: none; }
.bp.theme-greenscreen .bp-link-arrow {
  background: transparent !important;
  color: var(--bp-accent) !important;
  width: auto;
}
.bp.theme-greenscreen .bp-link-arrow svg { display: none; }
.bp.theme-greenscreen .bp-link-arrow::after { content: "█"; font-size: 0.9rem; }
.bp.theme-greenscreen .bp-link:hover {
  background: var(--bp-accent);
  color: var(--bp-accent-text);
  border-color: var(--bp-accent);
  transform: translate(2px, -1px);
  box-shadow: -2px 1px 0 rgba(124, 255, 176, 0.3);
  text-shadow: none;
}
.bp.theme-greenscreen .bp-link:hover::before,
.bp.theme-greenscreen .bp-link:hover .bp-link-arrow,
.bp.theme-greenscreen .bp-link:hover .bp-link-title,
.bp.theme-greenscreen .bp-link:hover .bp-link-desc {
  color: var(--bp-accent-text) !important;
}
.bp.theme-greenscreen .bp-section-header {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  margin: 28px 0 12px;
}
.bp.theme-greenscreen .bp-section-header::before { content: "── "; color: var(--bp-accent); }
.bp.theme-greenscreen .bp-section-header::after  { content: " ──"; color: var(--bp-accent); }
.bp.theme-greenscreen .bp-avatar {
  border-radius: 0;
  border: 1px solid var(--bp-accent);
  box-shadow: 0 0 16px rgba(124, 255, 176, 0.3);
  background: var(--bp-bg) !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Real Floyd-Steinberg ASCII-dithered avatar. The <pre> tag content is
   filled by asciiDither() in bio-editor.js (and the public renderer) — not a
   CSS filter, an actual character-density rendering of the avatar pixels. */
.bp.theme-greenscreen .bp-avatar-ascii {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Courier Prime', monospace;
  font-size: 6px;
  line-height: 6px;
  letter-spacing: 0;
  color: var(--bp-accent);
  text-shadow: 0 0 4px rgba(124, 255, 176, 0.7);
  margin: 0;
  padding: 0;
  white-space: pre;
}
.bp.theme-greenscreen .bp-footer {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--bp-text-mute);
  border-top: 1px solid var(--bp-border);
}
.bp.theme-greenscreen .bp-footer::before { content: "[EOF] "; color: var(--bp-accent); }

/* ─── Cross-theme combo fixes (per design crit) ───
   When Receipt is paired with Margin Note, the theme's "01." counter prefix
   collides with Margin Note's italic-Playfair title (mono numerals + serif
   italic = type-system mismatch). Suppress receipt's counter for margin-style
   links and align typography. */
.bp.theme-receipt .bp-link.style-margin::before { content: none; }
.bp.theme-receipt .bp-link.style-margin {
  border-left: 2px solid var(--bp-text-mute);
  border-bottom: 0;
  padding: 6px 0 6px 18px;
  margin-left: 12px;
}
.bp.theme-receipt .bp-link.style-margin .bp-link-title {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-style: normal !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bp.theme-receipt .bp-link.style-margin:hover {
  background: transparent;
  color: var(--bp-text);
  border-left-color: var(--bp-text);
}

/* ═════════════════════════════════════════════════════════════════════════
   Theme 6: GALLERY  (image-forward — Pippa's missing theme)
   For designers, photographers, brand people whose WORK is the link.
   Structural move: each link displays its og_image as a big square thumbnail
   with the title overlaid at the bottom. Caption in italic serif. Minimal text.
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-gallery {
  --bp-bg: #ebe8e3;
  --bp-card: #ffffff;
  --bp-border: rgba(26, 22, 20, 0.08);
  --bp-text: #1a1614;
  --bp-text-mute: #837a70;
  --bp-icon-bg: rgba(26, 22, 20, 0.06);
  --bp-shadow: rgba(0, 0, 0, 0.18);
  --bp-accent: #1a1614;
  --bp-accent-text: #ebe8e3;
}
.bp.theme-gallery .bp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 1.6rem;
  text-align: center;
}
.bp.theme-gallery .bp-bio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  text-align: center;
}
.bp.theme-gallery .bp-avatar {
  border-radius: 0;
  width: 88px; height: 88px;
}
.bp.theme-gallery .bp-meta-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
}
.bp.theme-gallery .bp-links-stack {
  gap: 16px;
}
/* Big image cards in single column with title overlay at bottom */
.bp.theme-gallery .bp-link {
  background: var(--bp-card);
  border: 0;
  border-radius: 2px;
  padding: 0;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 32px -16px rgba(0,0,0,0.12);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bp.theme-gallery .bp-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -20px rgba(0,0,0,0.22);
}
.bp.theme-gallery .bp-link-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  border-radius: 0;
}
.bp.theme-gallery .bp-link-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bp.theme-gallery .bp-link-icon {
  display: none;
}
.bp.theme-gallery .bp-link-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, transparent 100%);
  color: #fff;
  z-index: 2;
}
.bp.theme-gallery .bp-link-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
.bp.theme-gallery .bp-link-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}
.bp.theme-gallery .bp-link-arrow {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  width: 30px; height: 30px;
  z-index: 3;
  backdrop-filter: blur(6px);
  border-radius: 100px;
}
/* Fallback when no thumbnail: don't render giant empty squares. Drop the
   aspect-ratio cap so the link is just a normal horizontal row. */
.bp.theme-gallery .bp-link:not(.has-thumb) {
  background: var(--bp-card);
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left;
  aspect-ratio: auto;
  padding: 16px 18px;
  gap: 12px;
}
.bp.theme-gallery .bp-link:not(.has-thumb) .bp-link-text {
  position: static;
  background: none;
  color: var(--bp-text);
  padding: 0;
  flex: 1;
  min-width: 0;
}
.bp.theme-gallery .bp-link:not(.has-thumb) .bp-link-title {
  color: var(--bp-text);
  font-size: 1rem;
}
.bp.theme-gallery .bp-link:not(.has-thumb) .bp-link-desc { color: var(--bp-text-mute); }
.bp.theme-gallery .bp-link:not(.has-thumb) .bp-link-arrow {
  position: static;
  background: transparent !important;
  color: var(--bp-text-mute) !important;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
/* When grid layout is on but no thumbnails exist, keep a tighter aspect
   ratio so a 2-col grid of empty cards doesn't dominate the page. */
.bp.theme-gallery .bp-links-grid .bp-link:not(.has-thumb),
.bp.theme-gallery .bp-links-mosaic .bp-link:not(.has-thumb) {
  aspect-ratio: 16 / 9;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.bp.theme-gallery .bp-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-text-mute);
  text-align: center;
  margin: 36px 0 14px;
}
.bp.theme-gallery .bp-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* When Gallery uses the grid layout, render as 2-column tiles */
.bp.theme-gallery .bp-links-grid,
.bp.theme-gallery .bp-links-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bp.theme-gallery .bp-links-grid .bp-link,
.bp.theme-gallery .bp-links-mosaic .bp-link { aspect-ratio: 1 / 1; }

/* ═════════════════════════════════════════════════════════════════════════
   Legacy aliases — old theme classes map to the closest new theme so
   pages that were saved with the old theme names still render reasonably.
   (Actual visual identity is lost; users can re-pick a new theme.)
   ═════════════════════════════════════════════════════════════════════════ */
.bp.theme-paper,
.bp.theme-linen,
.bp.theme-sage,
.bp.theme-sky,
.bp.theme-rose,
.bp.theme-sunset,
.bp.theme-ocean {
  --bp-bg: #fbf8f1;
  --bp-card: #ffffff;
  --bp-border: rgba(26, 22, 20, 0.10);
  --bp-text: #1a1614;
  --bp-text-mute: #6c655d;
}
.bp.theme-mono { /* old "mono" — point to receipt look */
  --bp-bg: #f4f1ea;
  --bp-card: #faf7f0;
  --bp-border: rgba(0, 0, 0, 0.22);
  --bp-text: #1a1a1a;
  --bp-text-mute: #6a6660;
}
.bp.theme-terminal { /* old "terminal" — point to greenscreen */
  --bp-bg: #0a0f08;
  --bp-card: #0e1410;
  --bp-border: rgba(124, 255, 176, 0.25);
  --bp-text: #7cffb0;
  --bp-text-mute: #4d8a66;
}
.bp.theme-scrapbook { /* old "scrapbook" — point to postcard */
  --bp-bg: #f3ebd9;
  --bp-card: #fff8e7;
  --bp-border: rgba(31, 41, 55, 0.22);
  --bp-text: #1f2937;
  --bp-text-mute: #6b7280;
  --bp-accent: #aa3344;
}
.bp.theme-ink {
  --bp-bg: #0e0c0b;
  --bp-card: #1a1614;
  --bp-border: rgba(240, 237, 230, 0.10);
  --bp-text: #f0ede6;
  --bp-text-mute: #a09a92;
  --bp-shadow: rgba(0, 0, 0, 0.5);
}

/* (font-* typography classes moved to top of file so themes cascade-win) */

/* ─── Mobile responsiveness for the loud themes ─── */
@media (max-width: 480px) {
  .bp.theme-receipt .bp-name {
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    word-break: break-word;
    line-height: 1.2;
  }
  .bp.theme-greenscreen .bp-name {
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    word-break: break-word;
    line-height: 1.15;
  }
  .bp.theme-greenscreen {
    /* Halve scanline density at small viewports to avoid moiré with the small
       monospace text — 1px-on / 3px-off becomes 1px-on / 4px-off. */
    background:
      repeating-linear-gradient(0deg, rgba(124, 255, 176, 0.04) 0 1px, transparent 1px 4px),
      var(--bp-bg);
  }
  .bp.theme-liner-notes .bp-link {
    padding-left: 44px;
  }
  .bp.theme-liner-notes .bp-link::before {
    left: 14px;
    width: 22px;
  }
  .bp.theme-liner-notes .bp-name {
    font-size: 1.6rem;
    word-break: break-word;
  }
  /* RTL / CJK fallback — turn off uppercase + letter-spacing for scripts that
     don't have separate uppercase forms or that break on letter-spacing. */
  .bp.theme-receipt .bp-name:lang(ar),
  .bp.theme-receipt .bp-name:lang(he),
  .bp.theme-receipt .bp-name:lang(ja),
  .bp.theme-receipt .bp-name:lang(ko),
  .bp.theme-receipt .bp-name:lang(zh),
  .bp.theme-greenscreen .bp-name:lang(ar),
  .bp.theme-greenscreen .bp-name:lang(he),
  .bp.theme-greenscreen .bp-name:lang(ja),
  .bp.theme-greenscreen .bp-name:lang(ko),
  .bp.theme-greenscreen .bp-name:lang(zh) {
    text-transform: none;
    letter-spacing: 0;
  }
}