/* ==========================================================================
   KIT THEME — MASTER STYLESHEET
   Bloom Nav v3 + Remy Theme Variables
   ========================================================================== */

/* ── ROOT VARIABLES ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Bloom Nav core */
  --bg:        #0b0c0e;
  --surface:   #141518;
  --surface-2: #1c1d22;
  --surface-3: #26272f;
  --border:    rgba(255,255,255,0.06);
  --border-2:  rgba(255,255,255,0.10);
  --border-3:  rgba(255,255,255,0.16);
  --text:      #eeedf2;
  --text-mid:  rgba(238,237,242,0.58);
  --text-dim:  rgba(238,237,242,0.32);
  --accent:    var(--p-light-accent, #f0c93a);
  --blue:      #5b9cf6;
  --coral:     #f07060;
  --mint:      #5ecfaa;
  --lavender:  #a98af7;

  --ff-disp:  var(--font-head, 'Instrument Serif', Georgia, serif);
  --ff-sans:  var(--font-body, 'Syne', system-ui, sans-serif);
  --ff-mono:  'DM Mono', 'Fira Code', monospace;

  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);

  --ease-spring: cubic-bezier(0.34, 1.48, 0.64, 1);
  --ease-bloom:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Remy physics tokens */
  --gap-base: 2rem;
  --gap-section: 6vh;
  --border-weight: 1px;
  --border-color-subtle: rgba(0,0,0,0.1);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.05);
  --radius-base: 12px;
  --radius-btn: 8px;
  --transition-speed: 0.2s;
  --width-wide: 1200px;
  --width-content: 720px;

  /* Remy color system defaults (Arctic Mint) */
  --p-light-bg: #f0fdfa;
  --p-light-text: #134e4a;
  --p-light-accent: #0d9488;
  --p-light-border: #99f6e4;
  --p-light-inverse: #115e59;
  --p-dark-bg: #042f2e;
  --p-dark-text: #ccfbf1;
  --p-dark-accent: #2dd4bf;
  --p-dark-border: #134e4a;

  /* Derived theme colors */
  --bg-0: var(--p-light-bg);
  --bg-1: color-mix(in srgb, var(--p-light-bg), var(--p-light-text) 3%);
  --bg-2: color-mix(in srgb, var(--p-light-bg), var(--p-light-text) 6%);
  --bg-inverse: var(--p-light-inverse);
  --text-0: var(--p-light-text);
  --text-1: var(--p-light-text);
  --text-2: color-mix(in srgb, var(--p-light-text) 65%, transparent);
  --text-inverse: #ffffff;
  --accent: var(--p-light-accent);
  --accent-contrast: #ffffff;
  --border: var(--p-light-border);

  /* Font system */
  --font-body: 'Inter', sans-serif;
  --font-head: 'Inter', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── REMY COLOR PALETTES ─────────────────────────────────────── */
html[data-palette="Solar Ember"] {
  --p-light-bg:#fffbf7;--p-light-text:#451a03;--p-light-accent:#d97706;--p-light-border:#fed7aa;--p-light-inverse:#78350f;
  --p-dark-bg:#2a1205;--p-dark-text:#ffedd5;--p-dark-accent:#fbbf24;--p-dark-border:#7c2d12;
}
html[data-palette="Midnight Neon"] {
  --p-light-bg:#f8fafc;--p-light-text:#0f172a;--p-light-accent:#4f46e5;--p-light-border:#cbd5e1;--p-light-inverse:#1e1b4b;
  --p-dark-bg:#020617;--p-dark-text:#f8fafc;--p-dark-accent:#bef264;--p-dark-border:#1e293b;
}
html[data-palette="Paper & Ink"] {
  --p-light-bg:#fff;--p-light-text:#000;--p-light-accent:#000;--p-light-border:#000;--p-light-inverse:#000;
  --p-dark-bg:#000;--p-dark-text:#fff;--p-dark-accent:#fff;--p-dark-border:#333;
}
html[data-palette="Clay Studio"] {
  --p-light-bg:#fdf8f6;--p-light-text:#57534e;--p-light-accent:#b45309;--p-light-border:#d6d3d1;--p-light-inverse:#44403c;
  --p-dark-bg:#1c1917;--p-dark-text:#e7e5e4;--p-dark-accent:#d97706;--p-dark-border:#44403c;
}
html[data-palette="Electric Orchid"] {
  --p-light-bg:#fdf4ff;--p-light-text:#581c87;--p-light-accent:#a855f7;--p-light-border:#e9d5ff;--p-light-inverse:#6b21a8;
  --p-dark-bg:#1a0533;--p-dark-text:#f5d0fe;--p-dark-accent:#c084fc;--p-dark-border:#581c87;
}
html[data-palette="Forest Signal"] {
  --p-light-bg:#f0fdf4;--p-light-text:#14532d;--p-light-accent:#16a34a;--p-light-border:#86efac;--p-light-inverse:#166534;
  --p-dark-bg:#052e16;--p-dark-text:#dcfce7;--p-dark-accent:#4ade80;--p-dark-border:#14532d;
}
html[data-palette="Carbon Blue"] {
  --p-light-bg:#f0f9ff;--p-light-text:#0c4a6e;--p-light-accent:#0284c7;--p-light-border:#7dd3fc;--p-light-inverse:#075985;
  --p-dark-bg:#0c1929;--p-dark-text:#e0f2fe;--p-dark-accent:#38bdf8;--p-dark-border:#0c4a6e;
}
html[data-palette="Deep Velvet"] {
  --p-light-bg:#faf5ff;--p-light-text:#3b0764;--p-light-accent:#7c3aed;--p-light-border:#ddd6fe;--p-light-inverse:#4c1d95;
  --p-dark-bg:#0f0225;--p-dark-text:#ede9fe;--p-dark-accent:#a78bfa;--p-dark-border:#3b0764;
}
html[data-palette="Slate & Sand"] {
  --p-light-bg:#fafaf9;--p-light-text:#44403c;--p-light-accent:#78716c;--p-light-border:#d6d3d1;--p-light-inverse:#57534e;
  --p-dark-bg:#1c1917;--p-dark-text:#e7e5e4;--p-dark-accent:#a8a29e;--p-dark-border:#44403c;
}

/* Dark mode override */
html[data-color-scheme="Dark"] {
  --bg-0:var(--p-dark-bg);--bg-1:color-mix(in srgb,var(--p-dark-bg),#fff 5%);--bg-2:color-mix(in srgb,var(--p-dark-bg),#fff 10%);
  --text-0:var(--p-dark-text);--text-1:var(--p-dark-text);--text-2:color-mix(in srgb,var(--p-dark-text) 65%,transparent);
  --text-inverse:var(--p-dark-text);--accent:var(--p-dark-accent);--accent-contrast:var(--p-dark-bg);
  --border:var(--p-dark-border);
}

/* ── REMY FONT SYSTEM ────────────────────────────────────────── */
html[data-font="Publisher"]{ --font-head:'Merriweather',serif;--font-body:'Roboto',sans-serif; }
html[data-font="Novelist"] { --font-head:'Crimson Text',serif;--font-body:'Crimson Text',serif; }
html[data-font="Swiss"]    { --font-head:'Inter',sans-serif;--font-body:'Inter',sans-serif; }
html[data-font="Coder"]    { --font-head:'Fira Code',monospace;--font-body:'Fira Code',monospace; }
html[data-font="Elegant"]  { --font-head:'Playfair Display',serif;--font-body:'Lato',sans-serif; }
html[data-font="Industry"] { --font-head:'Oswald',sans-serif;--font-body:'Inter',sans-serif; }

/* ── REMY PERSONALITY ENGINE ─────────────────────────────────── */
html[data-personality="Masthead"]   { --radius-base:6px;--radius-btn:4px;--shadow-card:0 2px 5px rgba(0,0,0,0.05);--border-weight:1px; }
html[data-personality="Architect"]  { --radius-base:0;--radius-btn:0;--shadow-card:none;--border-weight:1px;--gap-base:3rem; }
html[data-personality="Cloud"]      { --radius-base:24px;--radius-btn:50px;--shadow-card:0 20px 40px -10px rgba(0,0,0,0.12);--border-weight:0; }
html[data-personality="Foundation"] { --radius-base:0;--radius-btn:0;--border-weight:3px;--shadow-card:5px 5px 0 currentColor; }
html[data-personality="Levitate"]   { --radius-base:8px;--radius-btn:6px;--shadow-card:0 8px 32px rgba(0,0,0,0.1);--border-weight:1px; }

/* ── BASE STYLES ─────────────────────────────────────────────── */
body {
  min-height: 100vh;
  background: var(--bg-0, var(--bg));
  color: var(--text-0, var(--text));
  font-family: var(--font-body, var(--ff-sans));
  overscroll-behavior: none;
}

/* ── SKIP LINK ───────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: 0.5rem 1rem; background: var(--blue); color: #fff;
  font: 600 0.8rem/1 var(--ff-sans); border-radius: 6px;
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: calc(var(--sat) + 1rem); }

/* ── OWNER MODE ──────────────────────────────────────────────── */
.owner-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  padding: calc(var(--sat) + 0.35rem) 1.5rem 0.35rem;
  background: rgba(91,156,246,0.1); border-bottom: 1px solid rgba(91,156,246,0.2);
  font: 400 0.58rem/1 var(--ff-mono); color: var(--blue); text-align: center;
  transform: translateY(-100%); transition: transform 0.3s var(--ease-spring);
  letter-spacing: 0.08em;
}
.owner-bar.on { transform: translateY(0); }

.owner-toggle {
  position: fixed; z-index: 400;
  top: calc(var(--sat) + 1rem); right: 1rem;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.38rem 0.6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font: inherit;
  color: var(--text-dim); font-size: 0.58rem; font-family: var(--ff-mono);
  letter-spacing: 0.08em; transition: all 0.2s;
}
.owner-toggle:hover,.owner-toggle:focus-visible { color: var(--text); background: var(--surface-2); }
.owner-toggle.on { color: var(--blue); border-color: rgba(91,156,246,0.3); }
.owner-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb-trail {
  position: fixed; z-index: 100;
  display: flex; align-items: center; gap: 0.35rem;
  font: 400 0.58rem/1 var(--ff-mono); color: var(--text-dim);
  pointer-events: none;
  bottom: 5.8rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.bc-item.current { color: var(--accent); font-weight: 500; }
.bc-sep { opacity: 0.35; }

/* ══════════════════════════════════════════════════════════════
   PATHWAY NAV — Theme integration
   Map Bloom's internal vars to the Remy theme system so the nav
   responds to palette, personality, and font selections.
   ══════════════════════════════════════════════════════════════ */
[data-nav-style="Pathway"] {
  --surface:   color-mix(in srgb, var(--bg-0, #141518), var(--text-0, #eee) 6%);
  --surface-2: color-mix(in srgb, var(--bg-0, #1c1d22), var(--text-0, #eee) 10%);
  --surface-3: color-mix(in srgb, var(--bg-0, #26272f), var(--text-0, #eee) 14%);
  --border:    color-mix(in srgb, var(--text-0, #eee) 8%, transparent);
  --border-2:  color-mix(in srgb, var(--text-0, #eee) 12%, transparent);
  --border-3:  color-mix(in srgb, var(--text-0, #eee) 18%, transparent);
  --text:      var(--text-0, #eeedf2);
  --text-mid:  var(--text-1, rgba(238,237,242,0.58));
  --text-dim:  var(--text-2, rgba(238,237,242,0.32));
  --blue:      color-mix(in srgb, var(--accent) 70%, #5b9cf6);
  --mint:      color-mix(in srgb, var(--accent) 40%, #5ecfaa);
  --coral:     color-mix(in srgb, var(--accent) 30%, #f07060);
  --lavender:  color-mix(in srgb, var(--accent) 30%, #a98af7);
}

/* Pathway anchor + panel pick up Personality tokens */
[data-nav-style="Pathway"] .bloom-anchor {
  border-radius: calc(var(--radius-base) + 28px);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.4));
}
[data-nav-style="Pathway"] .bloom-anchor.open {
  border-radius: 0 0 calc(var(--radius-base) + 28px) calc(var(--radius-base) + 28px);
}
[data-nav-style="Pathway"] .bloom-panel {
  border-radius: calc(var(--radius-base) + 6px) calc(var(--radius-base) + 6px) 0 0;
}
[data-nav-style="Pathway"] .nav-card {
  border-radius: var(--radius-base);
  font-family: var(--font-body, var(--ff-sans));
}
[data-nav-style="Pathway"] .nav-card:hover {
  box-shadow: var(--shadow-card, 0 4px 12px rgba(0,0,0,0.05));
}
[data-nav-style="Pathway"] .card-name {
  font-family: var(--font-body, var(--ff-sans));
}
[data-nav-style="Pathway"] .card-desc {
  font-family: var(--font-body, var(--ff-sans));
}
[data-nav-style="Pathway"] .anchor-page-name {
  font-family: var(--font-body, var(--ff-sans));
  color: var(--accent);
}
[data-nav-style="Pathway"] .anchor-toggle {
  font-family: var(--font-body, var(--ff-sans));
}
[data-nav-style="Pathway"] .search-input {
  border-radius: var(--radius-btn);
  font-family: var(--font-body, var(--ff-sans));
}
[data-nav-style="Pathway"] .search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
[data-nav-style="Pathway"] .anchor-pulse {
  background: var(--accent);
}
[data-nav-style="Pathway"] mark {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
[data-nav-style="Pathway"] .mobile-anchor {
  border-radius: calc(var(--radius-base) + 28px);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.5));
}
[data-nav-style="Pathway"] .bottom-sheet {
  border-radius: calc(var(--radius-base) + 8px) calc(var(--radius-base) + 8px) 0 0;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP BLOOM (≥ 680px)
   ══════════════════════════════════════════════════════════════ */
.bloom-wrap {
  position: fixed;
  bottom: calc(var(--sab) + 1.5rem); left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex; flex-direction: column; align-items: center;
  width: 560px;
}
.bloom-wrap .bloom-panel {
  position: absolute; bottom: calc(100% - 1px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-2); border-bottom: none;
  border-radius: 18px 18px 0 0;
  overflow: hidden; z-index: 9;
  max-height: 0; opacity: 0;
  transform: translateY(10px) scaleY(0.96);
  transform-origin: bottom center;
  pointer-events: none;
  transition: max-height 0.45s var(--ease-bloom), opacity 0.35s var(--ease-bloom), transform 0.45s var(--ease-spring);
  will-change: transform, opacity;
}
.bloom-wrap .bloom-panel.open {
  max-height: 600px; opacity: 1;
  transform: translateY(0) scaleY(1); pointer-events: auto;
}

/* Anchor bar */
.bloom-anchor {
  width: 100%; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 40px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: border-radius 0.4s var(--ease-bloom), border-color 0.25s;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.bloom-anchor.open { border-radius: 0 0 40px 40px; border-top: none; }

.anchor-location {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.9rem 0.65rem 1.1rem; flex-shrink: 0;
  text-decoration: none; color: inherit;
}
.anchor-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: glow 2.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(240,201,58,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(240,201,58,0); }
}
.anchor-site-logo { max-height: 24px; width: auto; display: block; }
.anchor-page-name { font: 600 0.82rem/1 var(--ff-sans); color: var(--accent); white-space: nowrap; }
.anchor-divider { width: 1px; height: 26px; background: var(--border-2); flex-shrink: 0; }
.anchor-toggle {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.65rem 1.1rem; background: transparent; border: none;
  color: var(--text-mid); cursor: pointer; font: 500 0.68rem/1 var(--ff-sans);
  letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s;
  min-height: 44px;
}
.anchor-toggle:hover { color: var(--text); }
.anchor-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.toggle-icon { transition: transform 0.4s var(--ease-spring); flex-shrink: 0; }
.bloom-anchor.open .toggle-icon { transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════════════
   MOBILE BOTTOM SHEET (< 680px)
   ══════════════════════════════════════════════════════════════ */
.sheet-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 490;
  background: rgba(11,12,14,0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.4s var(--ease-bloom);
  touch-action: none;
}
.sheet-scrim.visible { opacity: 1; }

.bottom-sheet {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border-2);
  touch-action: none;
  will-change: transform;
  transition: transform 0.38s var(--ease-snap);
  height: 90vh;
}
.bottom-sheet.dragging { transition: none; }

.sheet-handle-area {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.7rem 1rem 0.3rem; gap: 0.5rem;
  cursor: grab; user-select: none; touch-action: none;
}
.sheet-handle-area:active { cursor: grabbing; }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); }

.sheet-location { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.sheet-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: glow 2.8s ease-in-out infinite; flex-shrink: 0; }
.sheet-page-name { font: 600 0.78rem/1 var(--ff-sans); color: var(--accent); }
.sheet-site-name { font: 400 0.56rem/1 var(--ff-mono); color: var(--text-dim); margin-left: auto; }

.sheet-content {
  overflow-y: auto; overflow-x: hidden;
  height: calc(100% - 4.2rem);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--sab) + 1rem);
}

.mobile-anchor {
  display: none;
  position: fixed; left: 50%; bottom: calc(var(--sab) + 1rem);
  transform: translateX(-50%);
  z-index: 490;
  align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  min-height: 52px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: transform 0.3s var(--ease-spring), opacity 0.3s;
}
.mobile-anchor.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
.mobile-anchor-home {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.9rem; color: var(--text-mid); border-right: 1px solid var(--border-2);
  text-decoration: none; transition: color 0.15s; min-height: 52px;
}
.mobile-anchor-home:hover { color: var(--accent); }
.mobile-anchor-open {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.2rem; background: none; border: none;
  cursor: pointer; color: inherit; font: inherit;
}

/* ══════════════════════════════════════════════════════════════
   SHARED PANEL CONTENT (bloom panel + sheet)
   ══════════════════════════════════════════════════════════════ */
.panel-body { padding: 1rem 1rem 0; }

.section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.section-label {
  font: 500 0.56rem/1 var(--ff-mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 0.35rem;
}
.section-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.section-action {
  font: 400 0.56rem/1 var(--ff-mono); letter-spacing: 0.06em;
  color: var(--text-dim); background: none; border: none; cursor: pointer;
  transition: color 0.15s; padding: 0.2rem 0; min-height: 32px;
}
.section-action:hover { color: var(--text-mid); }
.section-action:focus-visible { outline: 2px solid var(--blue); border-radius: 3px; }

/* Card row — swipeable */
.card-row-wrap { position: relative; margin: 0 -1rem; }
.card-row-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem;
  background: linear-gradient(to right, transparent, var(--surface)); pointer-events: none; z-index: 2;
}
.card-row-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5rem;
  background: linear-gradient(to left, transparent, var(--surface)); pointer-events: none; z-index: 2;
}
.card-row {
  display: flex; gap: 0.55rem;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.2rem 1rem 0.8rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}
.card-row:active { cursor: grabbing; }
.card-row::-webkit-scrollbar { display: none; }

/* Cards */
.nav-card {
  flex: 0 0 auto;
  width: clamp(130px, 35vw, 150px);
  padding: 0.75rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 0.28rem;
  position: relative; overflow: hidden;
  scroll-snap-align: start;
  opacity: 0; transform: translateY(6px);
  animation: cardIn 0.35s var(--ease-bloom) forwards;
  transition: background 0.18s, border-color 0.18s, transform 0.22s var(--ease-spring);
  min-height: 100px;
  -webkit-tap-highlight-color: transparent;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.nav-card:hover { background: var(--surface-3); border-color: var(--border-2); transform: translateY(-2px); }
.nav-card:active { transform: scale(0.97); }
.nav-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-card[aria-current="page"] { border-color: rgba(240,201,58,0.3); background: rgba(240,201,58,0.06); }

.card-accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  border-radius: 12px 12px 0 0; opacity: 0.65; transition: opacity 0.2s;
}
.nav-card:hover .card-accent-bar { opacity: 1; }

.card-signal {
  display: inline-flex; align-items: center; gap: 0.22rem;
  padding: 0.14rem 0.38rem; border-radius: 4px;
  font: 500 0.5rem/1 var(--ff-mono); letter-spacing: 0.06em;
  text-transform: uppercase; width: fit-content; margin-bottom: 0.05rem;
}
.sig-pinned  { background: rgba(91,156,246,0.14); color: var(--blue); }
.sig-popular { background: rgba(240,201,58,0.12); color: var(--accent); }
.sig-gem     { background: rgba(94,207,170,0.12); color: var(--mint); }
.sig-new     { background: rgba(240,112,96,0.12); color: var(--coral); }
.sig-recent  { background: rgba(169,138,247,0.12); color: var(--lavender); }

.card-name { font: 600 0.8rem/1.15 var(--ff-sans); color: var(--text); transition: color 0.15s; }
.nav-card:hover .card-name { color: #fff; }
.nav-card[aria-current="page"] .card-name { color: var(--accent); }
.card-desc { font: 400 0.61rem/1.35 var(--ff-sans); color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.card-pin-btn {
  position: absolute; top: 0.45rem; right: 0.45rem;
  width: 24px; height: 24px; background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); border-radius: 4px;
  display: none; align-items: center; justify-content: center;
}
.card-pin-btn.show { display: flex; }
.card-pin-btn.pinned { color: var(--blue); }

.panel-sep { margin: 0.6rem 1rem 0; height: 1px; background: var(--border); }

/* Search */
.search-section { padding: 0.8rem 1rem 0.6rem; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 0.8rem; color: var(--text-dim); pointer-events: none; }
.search-input {
  width: 100%; padding: 0.75rem 2.8rem 0.75rem 2.4rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font: 400 0.85rem/1 var(--ff-sans); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-size: max(16px, 0.85rem);
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { border-color: rgba(91,156,246,0.35); box-shadow: 0 0 0 3px rgba(91,156,246,0.08); }
.search-badge {
  position: absolute; right: 0.65rem;
  font: 400 0.55rem/1 var(--ff-mono); color: var(--text-dim);
  background: var(--surface-3); border: 1px solid var(--border-2);
  padding: 0.12rem 0.3rem; border-radius: 4px; pointer-events: none;
}

.search-results { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.search-result {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  color: var(--text); font: inherit; text-align: left; width: 100%;
  min-height: 44px; transition: background 0.13s, border-color 0.13s;
}
.search-result:hover,.search-result:focus-visible,.search-result[aria-selected="true"] { background: var(--surface-2); border-color: var(--border); outline: none; }
.search-result[aria-current="page"] .sr-name { color: var(--accent); }
.sr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sr-text { flex: 1; min-width: 0; }
.sr-name { font: 600 0.8rem/1 var(--ff-sans); }
.sr-desc { font: 400 0.62rem/1 var(--ff-sans); color: var(--text-dim); margin-top: 0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-tag  { font: 400 0.56rem/1 var(--ff-mono); color: var(--text-dim); flex-shrink: 0; }
.search-empty { text-align: center; padding: 1rem; font: italic 400 0.72rem/1 var(--ff-disp); color: var(--text-dim); }
mark { background: rgba(240,201,58,0.2); color: var(--accent); border-radius: 2px; padding: 0 1px; }

/* Panel footer */
.panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem 0.7rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
.pf-hints { display: flex; gap: 1rem; font: 400 0.56rem/1 var(--ff-mono); color: var(--text-dim); }
.pf-hint { display: flex; align-items: center; gap: 0.3rem; }
.pf-count { font: 400 0.56rem/1 var(--ff-mono); color: var(--text-dim); }
@media (pointer: coarse) { .pf-hints { display: none; } }

.kbd {
  display: inline-flex; align-items: center; padding: 0.18rem 0.4rem;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 4px; font: 400 0.58rem/1 var(--ff-mono); color: var(--text-mid);
}

/* ══════════════════════════════════════════════════════════════
   GHOST CONTENT
   ══════════════════════════════════════════════════════════════ */
.calana-shell { display: flex; flex-direction: column; min-height: 100vh; }
.calana-main { flex: 1; padding: var(--gap-base); padding-bottom: 6rem; }

.gh-canvas {
  display: grid;
  grid-template-columns:
    [full-start] minmax(4vw,auto)
    [wide-start] minmax(auto,240px)
    [main-start] min(720px, calc(100% - 8vw))
    [main-end] minmax(auto,240px)
    [wide-end] minmax(4vw,auto) [full-end];
}
.gh-canvas > * { grid-column: main-start / main-end; }
.kg-width-wide { grid-column: wide-start / wide-end; }
.kg-width-full { grid-column: full-start / full-end; }

.gh-content { font-family: var(--font-body); color: var(--text-0, var(--text)); font-size: 1.05rem; line-height: 1.7; }
.gh-content h1,.gh-content h2,.gh-content h3,.gh-content h4 { font-family: var(--font-head); color: var(--text-0, var(--text)); margin-top: 2rem; }
.gh-content a { color: var(--accent); text-decoration: underline; }
.gh-content img { border-radius: var(--radius-base); margin: 1.5rem 0; }
.gh-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; font-style: italic; color: var(--text-1, var(--text-mid)); }

/* Site header */
.site-header { text-align: center; padding: 4rem 2rem 2rem; }
.site-title { font: 700 2.5rem/1.1 var(--font-head); color: var(--text-0, var(--text)); margin-bottom: 0.5rem; }
.site-description { font: 400 1rem/1.6 var(--font-body); color: var(--text-2, var(--text-mid)); }

/* Section headers */
.section-header { margin-bottom: 2rem; }
.section-title { font: 600 1.2rem/1 var(--font-body, var(--ff-sans)); color: var(--text-0, var(--text)); }
.section-accent-line { width: 40px; height: 3px; background: var(--accent); margin-top: 0.5rem; border-radius: 2px; }

/* Post cards */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-base); }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-base); margin-bottom: 3rem; }

.post-card {
  background: var(--bg-1, var(--surface));
  border: var(--border-weight, 1px) solid var(--border);
  border-radius: var(--radius-base);
  overflow: hidden; position: relative;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card, 0 4px 12px rgba(0,0,0,0.05)); }
.post-card-image-link { display: block; }
.post-card-image { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card-content { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-card-tag { font: 500 0.6rem/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.post-card-title { font: 600 1.1rem/1.25 var(--font-body, var(--ff-sans)); color: var(--text-0, var(--text)); margin: 0; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--accent); }
.post-card-excerpt { font: 400 0.85rem/1.5 var(--font-body, var(--ff-sans)); color: var(--text-2, var(--text-dim)); }
.post-card-meta { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.post-card-author { display: flex; align-items: center; gap: 0.4rem; }
.author-profile-image { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.author-name { font: 500 0.72rem/1 var(--font-body, var(--ff-sans)); color: var(--text-1, var(--text-mid)); }
.post-card-byline-content { font: 400 0.68rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); display: flex; gap: 0.5rem; }

/* Article */
.article-header { text-align: center; margin-bottom: 2rem; padding-top: 2rem; }
.article-tag { font: 500 0.6rem/1 var(--ff-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.article-title { font: 400 clamp(2rem,5vw,3rem)/1.1 var(--font-head); color: var(--text-0, var(--text)); margin: 0.5rem 0 1rem; }
.article-excerpt { font: 400 1.1rem/1.6 var(--font-body, var(--ff-sans)); color: var(--text-1, var(--text-mid)); margin-bottom: 1.5rem; }
.article-image-full img { width: 100%; max-height: 60vh; object-fit: cover; border-radius: var(--radius-base); margin-bottom: 2rem; }
.article-meta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.article-author-info { display: flex; align-items: center; gap: 0.5rem; }
.author-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.article-byline { font: 400 0.75rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.article-updated {
  font-weight: 600; color: var(--accent);
  padding: 0.15rem 0.4rem; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── Post actions bar (share + tags) ─────────────────────── */
.article-footer { margin-top: 3rem; }
.post-actions-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; flex-wrap: wrap;
}
.share-strip { display: flex; gap: 0.4rem; }
.share-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-btn);
  background: var(--bg-2, var(--surface-2)); border: 1px solid var(--border);
  color: var(--text-2, var(--text-dim)); cursor: pointer;
  transition: all 0.15s; text-decoration: none;
}
.share-icon:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-1)); }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-pill {
  font: 500 0.65rem/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-btn);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  transition: all 0.15s;
}
.tag-pill:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }

.post-footer-divider { height: 1px; background: var(--border); margin: 1.5rem 0; }

/* ── Author card ─────────────────────────────────────────── */
.author-card {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.5rem; border-radius: var(--radius-base);
  background: var(--bg-1, var(--surface));
  border: 1px solid var(--border);
}
.author-card-image-link { flex-shrink: 0; }
.author-card-image {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.author-card-initial {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  color: var(--accent); font: 700 1.4rem/1 var(--font-head);
}
.author-card-label { font: 500 0.6rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2, var(--text-dim)); }
.author-card-name { font: 600 1.1rem/1.2 var(--font-body); color: var(--text-0, var(--text)); margin: 0.15rem 0 0.35rem; }
.author-card-name a { color: inherit; text-decoration: none; }
.author-card-name a:hover { color: var(--accent); }
.author-card-bio { font: 400 0.85rem/1.5 var(--font-body); color: var(--text-2, var(--text-dim)); margin-bottom: 0.4rem; }
.author-card-meta { display: flex; gap: 0.8rem; font: 400 0.7rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }
.author-social { color: var(--accent); text-decoration: none; }
.author-social:hover { text-decoration: underline; }

/* ── Subscribe CTA ───────────────────────────────────────── */
.subscribe-cta {
  margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--radius-base);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.subscribe-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.subscribe-cta-text h4 { font: 600 1rem/1.2 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.2rem; }
.subscribe-cta-text p { font: 400 0.8rem/1.4 var(--font-body); color: var(--text-2, var(--text-dim)); }
.subscribe-form { display: flex; gap: 0.5rem; flex-shrink: 0; }
.subscribe-form input {
  padding: 0.6rem 1rem; background: var(--bg-0, #fff); border: 1px solid var(--border);
  border-radius: var(--radius-btn); color: var(--text-0); font: 400 0.85rem/1 var(--font-body);
  outline: none; min-width: 180px;
}
.subscribe-form input:focus { border-color: var(--accent); }

/* ── Related posts grid ──────────────────────────────────── */
.related-posts { padding: 2rem 0; margin-top: 1rem; border-top: 1px solid var(--border); }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
}
.related-card { background: var(--bg-1, var(--surface)); border-radius: var(--radius-base); border: 1px solid var(--border); overflow: hidden; }
.related-card .post-card-image { aspect-ratio: 16/10; }
.related-card .post-card-content { padding: 0.8rem; }
.related-card .post-card-title { font-size: 0.9rem; }
.related-card .post-card-excerpt { font-size: 0.78rem; }
.related-card .post-card-meta { font-size: 0.62rem; }

/* ── Comments section ────────────────────────────────────── */
.comments-section { padding: 2rem 0; }
.comments-header { margin-bottom: 1.5rem; }
.comments-header h4 { font: 600 1.1rem/1 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.3rem; }
.comments-header p { font: 400 0.82rem/1.4 var(--font-body); color: var(--text-2, var(--text-dim)); }

/* Reading progress */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; }
.reading-progress-fill { height: 100%; background: var(--accent); width: 0; transition: width 0.1s; }

/* Footer */
.calana-footer {
  background: var(--bg-1, var(--surface));
  border-top: 1px solid var(--border);
  padding: 3rem var(--gap-base) calc(3rem + var(--sab));
  margin-top: auto;
}
.footer-inner { max-width: var(--width-wide); margin: 0 auto; }
.footer-brand-info { text-align: center; margin-bottom: 2rem; }
.footer-logo-img { max-height: 40px; margin: 0 auto 1rem; }
.footer-brand-description { font: 400 0.85rem/1.5 var(--font-body, var(--ff-sans)); color: var(--text-2, var(--text-dim)); }
.footer-navigation { margin: 1.5rem 0; }
.footer-nav-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.footer-nav-link { font: 500 0.8rem/1 var(--font-body, var(--ff-sans)); color: var(--text-1, var(--text-mid)); text-decoration: none; }
.footer-nav-link:hover { color: var(--accent); }
.footer-copyright { text-align: center; font: 400 0.7rem/1.5 var(--ff-mono); color: var(--text-2, var(--text-dim)); margin-top: 2rem; }
.footer-copyright a { color: var(--accent); }
.footer-subscribe { max-width: 400px; margin: 0 auto 2rem; text-align: center; }
.footer-subscribe h3 { font: 600 1rem/1 var(--font-body, var(--ff-sans)); color: var(--text-0, var(--text)); margin-bottom: 0.5rem; }
.footer-subscribe p { font: 400 0.8rem/1.5 var(--font-body, var(--ff-sans)); color: var(--text-2, var(--text-dim)); margin-bottom: 1rem; }
.footer-form { display: flex; gap: 0.5rem; }
.footer-email-input {
  flex: 1; padding: 0.6rem 1rem;
  background: var(--bg-2, var(--surface-2)); border: 1px solid var(--border);
  border-radius: var(--radius-btn); color: var(--text-0, var(--text));
  font: 400 0.85rem/1 var(--font-body, var(--ff-sans)); outline: none;
}
.footer-subscribe-button,.kg-btn {
  background: var(--accent); color: var(--accent-contrast, var(--bg)); border: none;
  border-radius: var(--radius-btn); padding: 0.6rem 1.2rem;
  font: 600 0.8rem/1 var(--ff-sans); cursor: pointer;
}

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 1rem; padding: 2rem 0; font: 500 0.8rem/1 var(--ff-sans); }
.pagination a { color: var(--accent); text-decoration: none; }

/* sr-only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE LAYOUTS — dense, news-oriented
   ══════════════════════════════════════════════════════════════ */

/* ── Shared grid ─────────────────────────────────────────── */
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.hp-grid--dense { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.hp-grid--dense .post-card-content { padding: 0.8rem; }
.hp-grid--dense .post-card-title { font-size: 0.95rem; }

/* ── EDITORIAL — hero cluster + trending + categories ──── */
.ed-hero-cluster {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem;
  margin-bottom: 2rem; min-height: 380px;
}
.ed-lead { position: relative; border-radius: var(--radius-base); overflow: hidden; }
.ed-lead-img { height: 100%; }
.ed-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-lead-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem 1.5rem; background: linear-gradient(transparent 0%, rgba(0,0,0,0.75) 100%);
  color: #fff;
}
.ed-tag {
  font: 600 0.55rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: inline-block; margin-bottom: 0.25rem;
}
.ed-lead-title { font: 700 clamp(1.3rem,3vw,2.2rem)/1.15 var(--font-head); margin: 0.2rem 0 0.4rem; }
.ed-lead-title a { color: inherit; text-decoration: none; }
.ed-lead-title a:hover { text-decoration: underline; }
.ed-lead-excerpt { font: 400 0.88rem/1.45 var(--font-body); opacity: 0.9; margin-bottom: 0.5rem; }
.ed-lead-meta { font: 400 0.68rem/1 var(--ff-mono); opacity: 0.7; display: flex; gap: 0.6rem; }

.ed-sidebar { display: flex; flex-direction: column; gap: 0; }
.ed-side-item { border-bottom: 1px solid var(--border); }
.ed-side-item a { display: block; padding: 0.7rem 0; text-decoration: none; color: inherit; transition: opacity 0.15s; }
.ed-side-item a:hover { opacity: 0.7; }
.ed-side-title { font: 600 0.95rem/1.25 var(--font-body); color: var(--text-0, var(--text)); margin: 0.15rem 0; }
.ed-side-meta { font: 400 0.65rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }

/* Trending strip */
.ed-trending {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.8rem 0; margin-bottom: 2rem;
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ed-trending-label {
  font: 700 0.6rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.ed-trending-row { display: flex; gap: 1.2rem; flex: 1; min-width: 0; }
.ed-trending-item {
  display: flex; align-items: baseline; gap: 0.4rem; text-decoration: none; color: var(--text-0, var(--text));
  white-space: nowrap; flex-shrink: 0; transition: color 0.15s;
}
.ed-trending-item:hover { color: var(--accent); }
.ed-trending-num { font: 700 1rem/1 var(--font-head); color: var(--accent); }
.ed-trending-title { font: 500 0.82rem/1 var(--font-body); }

/* Category sections */
.ed-category { margin-bottom: 2rem; }
.ed-see-all {
  font: 500 0.7rem/1 var(--ff-mono); color: var(--accent); text-decoration: none;
  letter-spacing: 0.06em; margin-left: auto; white-space: nowrap;
}
.ed-see-all:hover { text-decoration: underline; }
.ed-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.ed-cat-card { display: flex; gap: 0.75rem; align-items: flex-start; }
.ed-cat-img-link { flex-shrink: 0; }
.ed-cat-img { width: 100px; height: 68px; object-fit: cover; border-radius: var(--radius-base); }
.ed-cat-body { min-width: 0; }
.ed-cat-title { font: 600 0.88rem/1.25 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.2rem; }
.ed-cat-title a { color: inherit; text-decoration: none; }
.ed-cat-title a:hover { color: var(--accent); }
.ed-cat-meta { font: 400 0.62rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }

.ed-feed { margin-bottom: 2rem; }
.section-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.section-title a { color: inherit; text-decoration: none; }
.section-title a:hover { color: var(--accent); }

/* ── FRONT PAGE — newspaper-style ─────────────────────── */
.fp-masthead { text-align: center; padding: 1.5rem 0 0.8rem; }
.fp-logo { max-height: 44px; margin-bottom: 0.4rem; }
.fp-site-title { font: 700 clamp(1.8rem,4vw,3rem)/1 var(--font-head); color: var(--text-0, var(--text)); margin-bottom: 0.3rem; }
.fp-dateline { font: 400 0.68rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); letter-spacing: 0.1em; text-transform: uppercase; }
.fp-rule { height: 1px; background: var(--border); margin: 1.2rem 0; }

.fp-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; margin-bottom: 0; }
.fp-lead-img-link { display: block; }
.fp-lead-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-base); margin-bottom: 0.8rem; }
.fp-tag {
  font: 600 0.55rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: inline-block; margin-bottom: 0.2rem;
}
.fp-lead-title { font: 700 clamp(1.3rem,3vw,2rem)/1.2 var(--font-head); color: var(--text-0, var(--text)); margin-bottom: 0.5rem; }
.fp-lead-title a { color: inherit; text-decoration: none; }
.fp-lead-title a:hover { color: var(--accent); }
.fp-lead-excerpt { font: 400 0.9rem/1.55 var(--font-body); color: var(--text-1, var(--text-mid)); margin-bottom: 0.5rem; }
.fp-lead-meta { font: 400 0.68rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); display: flex; gap: 0.5rem; }

.fp-sidebar { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); padding-left: 1.5rem; }
.fp-sidebar-item { border-bottom: 1px solid var(--border); }
.fp-sidebar-item a { display: block; padding: 0.65rem 0; text-decoration: none; color: inherit; transition: opacity 0.15s; }
.fp-sidebar-item a:hover { opacity: 0.7; }
.fp-sidebar-title { font: 600 0.9rem/1.25 var(--font-body); color: var(--text-0, var(--text)); margin: 0.15rem 0; }
.fp-sidebar-meta { font: 400 0.62rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }

/* Topic sections */
.fp-topic { margin-bottom: 0; }
.fp-topic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fp-topic-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-base); margin-bottom: 0.5rem; }
.fp-topic-title { font: 600 1rem/1.25 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.3rem; }
.fp-topic-title a { color: inherit; text-decoration: none; }
.fp-topic-title a:hover { color: var(--accent); }
.fp-topic-excerpt { font: 400 0.82rem/1.45 var(--font-body); color: var(--text-2, var(--text-dim)); }
.fp-topic-item { border-bottom: 1px solid var(--border); }
.fp-topic-item a { display: block; padding: 0.5rem 0; text-decoration: none; color: inherit; transition: opacity 0.15s; }
.fp-topic-item a:hover { opacity: 0.7; }
.fp-topic-item-title { font: 500 0.85rem/1.3 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.15rem; }
.fp-topic-item-meta { font: 400 0.6rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }

/* ── WIRE — high-density chronological feed ──────────── */
.wire-header { text-align: center; padding: 1.5rem 0 0.8rem; }
.wire-title { font: 700 1.6rem/1.1 var(--font-head); color: var(--text-0, var(--text)); margin-bottom: 0.3rem; }
.wire-dateline { font: 400 0.65rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); letter-spacing: 0.08em; text-transform: uppercase; }

.wire-breaking {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 1rem; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-base); overflow-x: auto;
}
.wire-breaking-label {
  font: 700 0.6rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 0.2rem 0.5rem; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}
.wire-breaking-items { display: flex; gap: 1.5rem; }
.wire-breaking-item {
  font: 600 0.82rem/1.2 var(--font-body); color: var(--text-0, var(--text));
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.wire-breaking-item:hover { color: var(--accent); }

.wire-feed { max-width: var(--width-content); margin: 0 auto; }
.wire-item { border-bottom: 1px solid var(--border); }
.wire-link {
  display: flex; gap: 1rem; padding: 0.8rem 0; text-decoration: none; color: inherit;
  align-items: flex-start; transition: opacity 0.15s;
}
.wire-link:hover { opacity: 0.7; }
.wire-time {
  flex-shrink: 0; width: 52px; padding-top: 0.2rem;
  font: 500 0.65rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim));
  text-align: right;
}
.wire-body { flex: 1; min-width: 0; }
.wire-tag {
  font: 600 0.52rem/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: inline-block; margin-bottom: 0.15rem;
}
.wire-headline { font: 600 1rem/1.25 var(--font-body); color: var(--text-0, var(--text)); margin-bottom: 0.2rem; }
.wire-lede { font: 400 0.82rem/1.45 var(--font-body); color: var(--text-2, var(--text-dim)); margin-bottom: 0.2rem; }
.wire-byline { font: 400 0.62rem/1 var(--ff-mono); color: var(--text-2, var(--text-dim)); }
.wire-thumb { width: 72px; height: 72px; border-radius: var(--radius-base); object-fit: cover; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   POST LAYOUT VARIANTS
   ══════════════════════════════════════════════════════════════ */

/* ── Immersive: full-width hero with overlay ─────────────── */
.article-header--immersive { text-align: left; padding: 0; margin-bottom: 2.5rem; }
.article-hero-full { position: relative; margin: 0 calc(-50vw + 50%); }
.article-hero-full img { width: 100%; min-height: 50vh; max-height: 80vh; object-fit: cover; display: block; }
.article-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem clamp(2rem,6vw,6rem);
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.88) 100%);
  color: #fff;
}
.article-header--immersive .article-tag { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.article-header--immersive .article-title { color: #fff; margin-bottom: 0.8rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.article-header--immersive .article-excerpt { color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.article-header--immersive .article-byline { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.article-header--immersive .author-name { color: #fff; }
.article-header--immersive .author-avatar { border: 2px solid rgba(255,255,255,0.5); }
.article-header--immersive .article-updated { color: #fff; background: rgba(255,255,255,0.18); }

/* ── Minimal: no image, pure typography ──────────────────── */
.article-header--minimal { text-align: left; padding-top: 3rem; margin-bottom: 2rem; max-width: var(--width-content); }
.article-header--minimal .article-title { font-weight: 300; font-size: clamp(2.2rem,5vw,3.4rem); }
.article-header--minimal .article-byline { justify-content: flex-start; gap: 0.6rem; }

/* ── Classic: standard layout ────────────────────────────── */
.article-header--classic { text-align: center; padding-top: 2rem; margin-bottom: 2rem; }

/* ══════════════════════════════════════════════════════════════
   FOOTER VARIANTS
   ══════════════════════════════════════════════════════════════ */

/* ── Rich footer ─────────────────────────────────────────── */
.footer-rich { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.footer-site-name { font: 700 1.2rem/1 var(--font-head); color: var(--text-0, var(--text)); display: block; margin-bottom: 0.5rem; }
.footer-social { display: flex; gap: 1rem; align-items: center; }
.social-link { color: var(--text-2, var(--text-dim)); transition: color 0.15s; }
.social-link:hover { color: var(--accent); }
.footer-contact { text-align: center; font: 400 0.8rem/1.5 var(--font-body); color: var(--text-2, var(--text-dim)); }
.footer-email-link { color: var(--accent); text-decoration: none; }

/* ── Clean footer ────────────────────────────────────────── */
.footer-clean-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer-clean .footer-subscribe { flex: 1; min-width: 220px; text-align: left; margin: 0; }
.footer-clean .footer-subscribe h3 { text-align: left; }
.footer-clean .footer-navigation { flex-shrink: 0; }
.footer-clean .footer-nav-list { justify-content: flex-end; }

/* ── Quiet footer ────────────────────────────────────────── */
.footer-quiet { text-align: center; }
.footer-quiet .footer-copyright { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0; }
.footer-quiet-subscribe {
  font: 500 0.75rem/1 var(--font-body); color: var(--accent); text-decoration: none;
  border-left: 1px solid var(--border); padding-left: 1.5rem;
}
.footer-quiet-subscribe:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bloom-wrap { display: none; }
  .bottom-sheet { display: block; }
  .mobile-anchor { display: flex; }
  .breadcrumb-trail { bottom: auto; top: calc(var(--sat) + 0.8rem); font-size: 0.5rem; }
  .feed-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .hp-grid { grid-template-columns: 1fr; }
  .hp-grid--dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ed-hero-cluster { grid-template-columns: 1fr; min-height: auto; }
  .ed-cat-grid { grid-template-columns: 1fr; }
  .ed-trending-row { gap: 0.8rem; }
  .fp-top { grid-template-columns: 1fr; }
  .fp-sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 0.5rem; }
  .fp-topic-row { grid-template-columns: 1fr; }
  .wire-thumb { width: 56px; height: 56px; }
  .article-title { font-size: 2rem; }
  .article-hero-full { margin: 0 -1rem; }
  .article-hero-overlay { padding: 2rem 1.2rem; }
  .post-actions-bar { flex-direction: column; align-items: flex-start; }
  .author-card { flex-direction: column; align-items: center; text-align: center; }
  .author-card-meta { justify-content: center; }
  .subscribe-cta-inner { flex-direction: column; text-align: center; }
  .subscribe-form { flex-direction: column; width: 100%; }
  .subscribe-form input { min-width: 0; }
  .related-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .footer-form { flex-direction: column; }
  .footer-clean-top { flex-direction: column; }
  .footer-clean .footer-nav-list { justify-content: flex-start; }
  .footer-quiet .footer-copyright { flex-direction: column; gap: 0.5rem; }
  .footer-quiet-subscribe { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 0.5rem; }
}

@media print {
  .bloom-wrap,.mobile-anchor,.bottom-sheet,.owner-toggle,.breadcrumb-trail,.sheet-scrim { display: none !important; }
  .bloom-sheet,.eqc,.peek-next-strip { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIELD GUIDE NAV — Styles
   Bottom sheet navigation with entity detection and ledger
   ══════════════════════════════════════════════════════════════ */

/* Field Guide variables — mapped to Remy theme system */
[data-nav-style="Field Guide"] {
  --fg-bg: var(--bg-0, #f7f5f0);
  --fg-bg-2: var(--bg-1, #f0ede6);
  --fg-bg-3: var(--bg-2, #e8e4db);
  --fg-ink: var(--text-0, #1a1814);
  --fg-ink-2: var(--text-1, #1a1814);
  --fg-ink-3: var(--text-2, color-mix(in srgb, var(--text-0, #1a1814) 45%, transparent));
  --fg-ink-4: color-mix(in srgb, var(--text-0, #1a1814) 16%, transparent);
  --fg-ink-5: color-mix(in srgb, var(--text-0, #1a1814) 7%, transparent);
  --fg-gold: var(--accent, #b07d1a);
  --fg-gold-2: color-mix(in srgb, var(--accent, #b07d1a) 14%, transparent);
  --fg-gold-3: color-mix(in srgb, var(--accent, #b07d1a) 6%, transparent);
  --fg-pin: #db2777;
  --fg-pin-2: rgba(219,39,119,0.12);
  --fg-radius: var(--radius-base, 10px);
  --fg-text-xs: 0.72rem;
  --fg-text-sm: 0.8rem;
  --fg-text-tag: 0.65rem;
  --fg-text-micro: 0.6rem;
  --fg-font-sans: var(--font-body, system-ui);
  --fg-font-head: var(--font-head, system-ui);
  --fg-font-mono: 'DM Mono', 'Fira Code', monospace;
  --fg-font-prose: var(--font-head, Georgia, serif);
  --fg-border: var(--border, rgba(26,24,20,0.16));
  --fg-shadow: var(--shadow-card, 0 1px 4px rgba(0,0,0,0.08));
  --fg-border-weight: var(--border-weight, 1px);
  --fg-tab-bar-h: 56px;
  --sheet-shadow: 0 -4px 32px rgba(0,0,0,0.12);
}

/* Hide Pathway nav when Field Guide is active */
[data-nav-style="Field Guide"] .bloom-wrap,
[data-nav-style="Field Guide"] .bottom-sheet,
[data-nav-style="Field Guide"] .mobile-anchor,
[data-nav-style="Field Guide"] .sheet-scrim,
[data-nav-style="Field Guide"] .breadcrumb-trail {
  display: none !important;
}

/* Adjust main content to leave room for tab bar */
[data-nav-style="Field Guide"] .calana-main {
  padding-bottom: calc(var(--fg-tab-bar-h) + 1.5rem);
}

/* ── Persistent Bottom Tab Bar ─────────────────────────────── */
.fg-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  height: var(--fg-tab-bar-h, 56px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch; justify-content: space-around;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1, #f0ede6));
  border-top: 2px solid color-mix(in srgb, var(--accent) 25%, var(--fg-ink-4, rgba(26,24,20,0.16)));
  box-shadow: 0 -2px 12px color-mix(in srgb, var(--accent) 8%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.fg-tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.18rem; padding: 0.4rem 0;
  background: none; border: none; cursor: pointer;
  color: var(--fg-ink-3, var(--text-2)); transition: color 0.15s;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.fg-tab-home { text-decoration: none; }
.fg-tab-btn.active { color: var(--fg-gold, var(--accent)); }
.fg-tab-btn.active .fg-tab-icon { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 40%, transparent)); }
.fg-tab-btn:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); outline-offset: -2px; border-radius: 4px; }
.fg-tab-icon { width: 20px; height: 20px; flex-shrink: 0; }
.fg-tab-label {
  font: 600 0.58rem/1 var(--fg-font-sans, system-ui);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.fg-tab-badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--fg-gold, var(--accent)); color: var(--fg-bg, #fff);
  font: 700 0.5rem/14px var(--fg-font-sans, system-ui); text-align: center;
  border-radius: 7px; display: none;
}
.fg-tab-badge:not(:empty) { display: block; }

/* ── Entity highlights in post content ─────────────────────── */
.eh {
  border-bottom: 1px dotted transparent;
  cursor: pointer;
  transition: border-color 0.12s;
  display: inline;
}
.eh[data-type="tag"]     { border-bottom-color: color-mix(in srgb, var(--accent, #7c3aed) 50%, transparent); }
.eh[data-type="author"]  { border-bottom-color: color-mix(in srgb, var(--fg-ink, var(--text-0)) 35%, transparent); }
.eh:hover, .eh:focus-visible { border-bottom-style: solid; outline: none; }

/* Internal link previews */
.fg-link-preview { text-decoration-style: dotted; text-underline-offset: 2px; }
.fg-link-preview:hover { text-decoration-style: solid; }

/* ── Entity Quick Card (EQC) ───────────────────────────────── */
.eqc {
  position: fixed; z-index: 600; width: 240px;
  background: var(--fg-bg-2, var(--surface, #f0ede6));
  border: 1px solid var(--fg-ink-4, rgba(26,24,20,0.16));
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border-radius: 8px; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
  pointer-events: none;
}
.eqc.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.eqc-stripe { height: 3px; }
.eqc-head {
  padding: 0.6rem 0.75rem 0.45rem; border-bottom: 1px solid var(--fg-ink-4, rgba(26,24,20,0.16));
  display: flex; gap: 0.45rem; align-items: center;
}
.eqc-sigil {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); color: #fff; flex-shrink: 0;
}
.eqc-name { font: 600 var(--fg-text-sm, 0.8rem)/1.2 var(--fg-font-sans); color: var(--fg-ink, var(--text)); }
.eqc-type { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-ink-3); margin-top: 0.08rem; }
.eqc-body { padding: 0.5rem 0.75rem; }
.eqc-desc { font: italic 300 var(--fg-text-xs, 0.72rem)/1.5 var(--fg-font-prose); color: var(--fg-ink-3); margin-bottom: 0.35rem; }
.eqc-foot { padding: 0.35rem 0.75rem 0.5rem; border-top: 1px solid var(--fg-ink-4, rgba(26,24,20,0.16)); }
.eqc-see { background: none; border: none; font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-ink-3); cursor: pointer; transition: color 0.15s; }
.eqc-see:hover { color: var(--fg-gold, var(--accent)); }

/* ── Peek Next Strip ───────────────────────────────────────── */
.peek-next-strip {
  position: fixed; left: 0; right: 0; bottom: var(--fg-tab-bar-h, 56px);
  height: 38px;
  transform: translateY(calc(100% + 14px));
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  z-index: 199; cursor: pointer;
  display: none; align-items: center;
  background: var(--fg-bg-2, var(--surface));
  border-top: 1px solid var(--fg-ink-4, rgba(26,24,20,0.16));
  border-radius: 14px 14px 0 0;
  padding: 0 1rem 0 0; gap: 0;
  -webkit-tap-highlight-color: transparent;
}
.peek-next-strip.visible { transform: translateY(0); }
.peek-next-strip:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); outline-offset: -2px; }
.pns-edge { width: 3px; height: 100%; flex-shrink: 0; align-self: stretch; transition: background 0.3s; }
.pns-inner { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0 0 0 0.75rem; overflow: hidden; }
.pns-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.14em; text-transform: uppercase; flex-shrink: 0; }
.pns-title { font: 500 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-sans); color: var(--fg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pns-meta { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); color: var(--fg-ink-3); letter-spacing: 0.04em; flex-shrink: 0; }
.pns-arrow { color: var(--fg-ink-4); font-size: 0.7rem; flex-shrink: 0; margin-left: 0.3rem; }
.peek-next-strip:hover .pns-arrow { color: var(--fg-gold, var(--accent)); }

/* ── Bloom Sheet ───────────────────────────────────────────── */
.bloom-sheet {
  position: fixed; left: 0; right: 0;
  bottom: var(--fg-tab-bar-h, 56px); z-index: 200;
  height: calc(90vh - var(--fg-tab-bar-h, 56px));
  display: flex; flex-direction: column;
  background: var(--fg-bg-2, var(--surface, #141518));
  border-top: 1px solid var(--fg-ink-4, rgba(26,24,20,0.16));
  border-radius: 14px 14px 0 0;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
  box-shadow: var(--sheet-shadow, 0 -4px 32px rgba(0,0,0,0.12));
  touch-action: none; will-change: transform;
}
.bloom-sheet.open { transform: translateY(0); }
.bloom-handle-area {
  padding: 0.5rem 0 0.25rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.bloom-handle { width: 36px; height: 3px; border-radius: 2px; background: var(--fg-ink-4); transition: background 0.2s; }
.bloom-sheet.open .bloom-handle { background: var(--fg-ink-3); }

/* ── Bloom Body ────────────────────────────────────────────── */
.bloom-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bloom-search-wrap { padding: 0.5rem 0.75rem 0; flex-shrink: 0; }
.bloom-search {
  width: 100%; background: var(--fg-bg-3, var(--surface));
  border: 1px solid var(--fg-ink-4); border-radius: 8px;
  padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.4rem; cursor: text;
}
.bloom-search input {
  background: none; border: none; outline: none; flex: 1;
  font: 400 var(--fg-text-sm, 0.8rem)/1 var(--fg-font-prose); color: var(--fg-ink, var(--text)); min-width: 0;
}
.bloom-search input::placeholder { color: var(--fg-ink-3); }
.bloom-search-icon { color: var(--fg-ink-3); flex-shrink: 0; font-size: 0.8rem; }
.bloom-search-clear { background: none; border: none; color: var(--fg-ink-3); cursor: pointer; font-size: 0.75rem; padding: 0; display: none; transition: color 0.15s; }
.bloom-search-clear:hover { color: var(--fg-ink, var(--text)); }
.bloom-search-clear.vis { display: block; }
.bloom-search-wrap:focus-within .bloom-search { border-color: var(--fg-gold, var(--accent)); }

.bloom-panels { flex: 1; overflow: hidden; position: relative; min-height: 0; }
.bloom-sheet .bloom-panel {
  position: absolute; inset: 0; overflow-y: auto; padding: 0.75rem 0.75rem 3rem;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-height: none; transform: none; border: none; border-radius: 0;
  background: transparent;
}
.bloom-sheet .bloom-panel::-webkit-scrollbar { display: none; }
.bloom-sheet .bloom-panel.active { opacity: 1; pointer-events: auto; }

/* ── Section label ─────────────────────────────────────────── */
.section-label {
  font: 600 var(--fg-text-tag, 0.65rem)/1 var(--fg-font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-ink-3); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--fg-ink-4); }

/* ── Nav Cards ─────────────────────────────────────────────── */
.cards-row {
  display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.6rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-bottom: 0.2rem;
}
.cards-row::-webkit-scrollbar { display: none; }

[data-nav-style="Field Guide"] .nav-card {
  min-width: 190px; max-width: 215px; flex-shrink: 0;
  background: var(--fg-bg-3, var(--surface));
  border: 1px solid var(--fg-ink-4); border-radius: var(--fg-radius, 10px);
  padding: 0.85rem 0.9rem; scroll-snap-align: start; cursor: pointer;
  transition: border-color 0.18s, transform 0.18s; position: relative; overflow: hidden;
  box-shadow: var(--fg-shadow);
  text-decoration: none; display: block; color: inherit;
}
[data-nav-style="Field Guide"] .nav-card:hover { border-color: var(--fg-ink-3); transform: translateY(-1px); }
[data-nav-style="Field Guide"] .nav-card:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); }
[data-nav-style="Field Guide"] .nav-card:active { transform: scale(0.98); }
[data-nav-style="Field Guide"] .nav-card.pin-card { border-color: var(--fg-pin-2, rgba(219,39,119,0.12)); }
[data-nav-style="Field Guide"] .nav-card.pin-card:hover { border-color: var(--fg-pin, #db2777); }
.card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.card-reason {
  font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg-ink-3); margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.28rem;
}
.reason-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.card-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.28rem; }
.card-title { font: 600 var(--fg-text-sm, 0.8rem)/1.25 var(--fg-font-sans); color: var(--fg-ink, var(--text)); margin-bottom: 0.32rem; }
.card-meta { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); color: var(--fg-ink-3); letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.22rem; }
.ctag {
  display: inline-flex; align-items: center; gap: 0.16rem; padding: 0.1rem 0.3rem;
  border: 1px solid var(--fg-ink-4); font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono);
  color: var(--fg-ink-3); border-radius: 3px;
}
.ctag-dot { width: 4px; height: 4px; border-radius: 50%; }
.cards-section-label {
  font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-ink-3); margin: 0.65rem 0 0.45rem; display: flex; align-items: center; gap: 0.4rem;
}
.cards-section-label::after { content: ''; flex: 1; height: 1px; background: var(--fg-ink-4); }

/* For You discovery section — accent-tinted background */
.fg-foryou-wrap {
  margin: 0.2rem -0.75rem 0.4rem;
  padding: 0.6rem 0.75rem 0.25rem;
  border-radius: var(--fg-radius, 10px);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 7%, var(--fg-bg-2, var(--bg-1))) 0%,
    color-mix(in srgb, var(--accent) 3%, var(--fg-bg-3, var(--bg-2))) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.cards-section-label .csl-source {
  font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.06em; text-transform: none;
  color: var(--fg-pin, #db2777); font-weight: 400;
}

/* ── Article list rows ─────────────────────────────────────── */
.article-row {
  padding: 0.48rem 0; border-bottom: 1px solid var(--fg-ink-5);
  cursor: pointer; display: flex; align-items: flex-start; gap: 0.5rem; transition: opacity 0.15s;
}
.article-row:hover { opacity: 0.75; }
.article-row:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: 3px; }
.ar-pin { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-pin, #db2777); flex-shrink: 0; margin-top: 0.42rem; }
.ar-info { flex: 1; }
.ar-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.18rem; }
.ar-title { font: 500 var(--fg-text-sm, 0.8rem)/1.28 var(--fg-font-sans); color: var(--fg-ink-2); }
.ar-byline { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); color: var(--fg-ink-3); margin-top: 0.14rem; letter-spacing: 0.04em; }

/* ── Search results ────────────────────────────────────────── */
.search-results { display: none; }
.search-results.active { display: block; }
.search-empty { font: italic 300 var(--fg-text-sm, 0.8rem)/1.6 var(--fg-font-prose); color: var(--fg-ink-3); padding: 0.5rem 0; }
.search-result-item {
  padding: 0.5rem 0; border-bottom: 1px solid var(--fg-ink-5); cursor: pointer; transition: opacity 0.15s;
}
.search-result-item:hover { opacity: 0.75; }
.search-result-item:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: 3px; }
.sri-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.2rem; }
.sri-title { font: 500 var(--fg-text-sm, 0.8rem)/1.3 var(--fg-font-sans); color: var(--fg-ink-2); }
.sri-match { font: 400 var(--fg-text-xs, 0.72rem)/1.3 var(--fg-font-mono); color: var(--fg-ink-3); margin-top: 0.15rem; }
.sri-match mark { background: var(--fg-gold-2); color: var(--fg-gold, var(--accent)); border-radius: 2px; padding: 0 2px; }

/* ── Entity panel (slide-over) ─────────────────────────────── */
.entity-panel {
  position: absolute; inset: 0; background: var(--fg-bg-2, var(--surface));
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  z-index: 10; display: flex; flex-direction: column; overflow: hidden;
}
.entity-panel.open { transform: translateX(0); }
.ep-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--fg-ink-4); flex-shrink: 0;
}
.ep-back {
  background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.3rem;
  font: 400 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-mono); letter-spacing: 0.08em; color: var(--fg-ink-3);
  transition: color 0.15s; padding: 0; text-transform: uppercase;
}
.ep-back:hover { color: var(--fg-gold, var(--accent)); }
.ep-back:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: 3px; }
.ep-sigil {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-mono); color: #fff; flex-shrink: 0; margin-left: auto;
}
.ep-name { font: 600 0.95rem/1.2 var(--fg-font-sans); color: var(--fg-ink, var(--text)); }
.ep-type { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-ink-3); margin-top: 0.06rem; }
.ep-body { flex: 1; overflow-y: auto; padding: 0.75rem 0.75rem 3rem; scrollbar-width: none; }
.ep-body::-webkit-scrollbar { display: none; }
.ep-role { font: italic 300 var(--fg-text-sm, 0.8rem)/1.6 var(--fg-font-prose); color: var(--fg-ink-3); margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--fg-ink-4); }
.ep-thread-chips { display: flex; gap: 0.22rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ep-chip { display: inline-flex; align-items: center; gap: 0.18rem; padding: 0.12rem 0.38rem; border-radius: 3px; font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.04em; }

/* ── Entity cards ──────────────────────────────────────────── */
.entity-card {
  background: var(--fg-bg-3, var(--surface));
  border: 1px solid var(--fg-ink-4); border-radius: var(--fg-radius, 10px);
  margin-bottom: 0.45rem; overflow: hidden; transition: border-color 0.15s;
  box-shadow: var(--fg-shadow);
}
.entity-card:hover { border-color: var(--fg-ink-3); }
.ec-main { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.65rem 0.75rem; cursor: pointer; }
.ec-main:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: var(--fg-radius, 10px); }
.ec-sigil {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-mono); color: #fff; flex-shrink: 0;
}
.ec-info { flex: 1; min-width: 0; }
.ec-name { font: 600 0.85rem/1.2 var(--fg-font-sans); color: var(--fg-ink, var(--text)); }
.ec-thread-chips { display: flex; gap: 0.2rem; margin-top: 0.28rem; flex-wrap: wrap; }
.ec-chip { display: inline-flex; align-items: center; gap: 0.18rem; padding: 0.1rem 0.3rem; border-radius: 3px; font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); letter-spacing: 0.04em; }
.ec-art-row {
  display: flex; align-items: baseline; gap: 0.4rem; padding: 0.28rem 0;
  border-bottom: 1px solid var(--fg-ink-5); cursor: pointer; transition: opacity 0.15s;
}
.ec-art-row:last-child { border-bottom: none; }
.ec-art-row:hover { opacity: 0.72; }
.ec-art-row:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: 3px; }
.ec-art-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 0.3rem; }
.ec-art-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; }
.ec-art-title { font: 300 var(--fg-text-xs, 0.72rem)/1.35 var(--fg-font-prose); color: var(--fg-ink-3); }
.ec-art-read { opacity: 0.45; }

/* ── Entity card extras (Discover tab) ─────────────────────── */
.ec-main { align-items: center; }
.ec-meta { font: 400 var(--fg-text-micro, 0.6rem)/1.3 var(--fg-font-mono); color: var(--fg-ink-3); margin-top: 0.12rem; letter-spacing: 0.03em; }
.ec-bio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ec-count {
  font: 400 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-mono); color: var(--fg-ink-3);
  flex-shrink: 0; margin-left: auto; padding-left: 0.5rem;
}
.ec-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.entity-card.ec-active { border-color: color-mix(in srgb, var(--accent, #7c3aed) 30%, transparent); }
.entity-card.ec-active .ec-name { color: var(--fg-ink, var(--text)); }

/* ── Ledger ────────────────────────────────────────────────── */
.ledger-summary {
  font: 400 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-mono); color: var(--fg-ink-3); letter-spacing: 0.06em;
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
}
.ledger-summary strong { color: var(--fg-ink-2); font-weight: 400; }
.coverage-card {
  background: var(--fg-bg-3, var(--surface));
  border: 1px solid var(--fg-ink-4); border-radius: var(--fg-radius, 10px);
  padding: 0.75rem 0.85rem; margin-bottom: 0.8rem;
  box-shadow: var(--fg-shadow);
}
.coverage-label {
  font: 600 var(--fg-text-tag, 0.65rem)/1 var(--fg-font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-ink-3); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem;
}
.coverage-label::after { content: ''; flex: 1; height: 1px; background: var(--fg-ink-4); }
.ct-thread { margin-bottom: 0.65rem; }
.ct-thread:last-of-type { margin-bottom: 0; }
.ct-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.32rem; }
.ct-name { font: 600 var(--fg-text-xs, 0.72rem)/1 var(--fg-font-sans); letter-spacing: 0.07em; text-transform: uppercase; flex-shrink: 0; min-width: 62px; }
.ct-track { flex: 1; height: 5px; background: var(--fg-ink-5); border-radius: 3px; overflow: hidden; }
.ct-fill { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.ct-tally { font: 400 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-mono); color: var(--fg-ink-3); flex-shrink: 0; min-width: 28px; text-align: right; }

/* ── Read items (ledger list) ──────────────────────────────── */
.read-item {
  padding: 0.4rem 0; border-bottom: 1px solid var(--fg-ink-5);
  display: flex; align-items: flex-start; gap: 0.4rem; cursor: pointer; transition: opacity 0.15s;
}
.read-item:hover { opacity: 0.72; }
.read-item:focus-visible { outline: 2px solid var(--fg-gold, var(--accent)); border-radius: 3px; }
.ri-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 0.35rem; }
.ri-kicker { font: 600 var(--fg-text-micro, 0.6rem)/1 var(--fg-font-sans); letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; }
.ri-title { font: 300 var(--fg-text-xs, 0.72rem)/1.35 var(--fg-font-prose); color: var(--fg-ink-3); }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bloom-sheet, .entity-panel, .eqc, .peek-next-strip, .ct-fill, .peek-chip, .ptb-seg {
    transition-duration: 0.01ms !important;
  }
}