:root {
  color-scheme: dark;
  --action-ink: #7ab7ff;
  --font-ui: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Georgia", serif;
  --bg: #242220;
  --bg-soft: #2e2b28;
  --surface: #34312d;
  --surface-2: #3b3732;
  --surface-3: #444039;
  --ink: #f3eee8;
  --muted: #c1b5a7;
  --line: #59524a;
  --accent: #e3000f;
  --accent-2: #2d8cff;
  --ok: #51b37f;
  --warn: #e2b35f;
  --danger: #f07575;
  --body-grad-top: rgba(48, 43, 39, 0.94);
  --body-grad-bottom: rgba(40, 36, 33, 0.98);
  --body-radial: rgba(129, 109, 84, 0.24);
  --topbar-border: rgba(255, 241, 224, 0.05);
  --topbar-bg-start: rgba(43, 38, 34, 0.97);
  --topbar-bg-end: rgba(43, 38, 34, 0.9);
  --title-ink: #ffffff;
  --subtitle-ink: #c6b9aa;
  --header-muted: #dfd1c2;
  --chip-border: rgba(255, 241, 224, 0.16);
  --chip-bg: rgba(34, 31, 28, 0.58);
  --chip-ink: #f0e8dd;
  --input-border: rgba(255, 241, 224, 0.16);
  --input-bg: rgba(34, 31, 28, 0.62);
  --input-ink: #f0e8dd;
  --input-placeholder: #bcae9d;
  --nav-ink: #e3d7c8;
  --nav-ink-hover: #fff9f0;
  --card-bg-start: rgba(67, 61, 55, 0.92);
  --card-bg-end: rgba(52, 48, 44, 0.95);
  --footer-bg-start: rgba(69, 62, 55, 0.9);
  --footer-bg-end: rgba(56, 51, 45, 0.94);
  --footer-border: rgba(255, 241, 224, 0.1);
  --footer-title: #f5e9db;
  --footer-note: #d8c8b6;
  --footer-disclaimer: #c9b7a3;
  --footer-link-ink: #f1e4d4;
  --social-link-border: #7a6e61;
  --social-link-bg: rgba(82, 72, 61, 0.55);
  --social-link-hover: rgba(105, 91, 77, 0.7);
  --social-icon-border: rgba(255, 238, 219, 0.35);
  --social-icon-ink: #ffefde;
  --hero-heading-ink: #f6efe8;
  --section-kicker-ink: #ccb9a5;
  --section-subtitle-ink: #d2c3b3;
  --story-surface: #3a3530;
  --story-surface-2: #413a33;
  --story-surface-focus: #3f3934;
  --story-visual-border: #6a6259;
  --story-visual-bg: #4a433c;
  --story-source-ink: #e5c9a7;
  --story-meta-ink: #d2bfaa;
  --story-meta-dot: #a89179;
  --story-body-ink: #e1d4c6;
  --story-muted-ink: #bfad9c;
  --headline-ink: #fbf2e8;
  --headline-hover: #fff8ef;
  --badge-border: #74695d;
  --badge-bg: #4a433b;
  --badge-ink: #efe1d2;
  --chip-active-bg: #5a4f43;
  --chip-active-ink: #fff0e1;
  --chip-active-border: #9f866a;
  --card-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  --ui-radius: 14px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --action-ink: #175bb5;
  --bg: #f1ece4;
  --bg-soft: #ebe4da;
  --surface: #fcf8f1;
  --surface-2: #f6efe5;
  --surface-3: #eadfce;
  --ink: #2a2520;
  --muted: #5f554b;
  --line: #d8cec1;
  --body-grad-top: rgba(239, 233, 224, 0.98);
  --body-grad-bottom: rgba(229, 221, 209, 0.98);
  --body-radial: rgba(184, 169, 149, 0.28);
  --topbar-border: rgba(52, 44, 36, 0.12);
  --topbar-bg-start: rgba(255, 252, 248, 0.96);
  --topbar-bg-end: rgba(250, 244, 236, 0.92);
  --title-ink: #251f1a;
  --subtitle-ink: #5c5248;
  --header-muted: #62574b;
  --chip-border: rgba(67, 56, 45, 0.24);
  --chip-bg: rgba(255, 255, 255, 0.82);
  --chip-ink: #3a3128;
  --input-border: rgba(67, 56, 45, 0.24);
  --input-bg: rgba(255, 255, 255, 0.92);
  --input-ink: #2f271f;
  --input-placeholder: #73675a;
  --nav-ink: #41362b;
  --nav-ink-hover: #201a14;
  --card-bg-start: rgba(255, 255, 255, 0.95);
  --card-bg-end: rgba(250, 244, 236, 0.94);
  --footer-bg-start: rgba(255, 254, 251, 0.95);
  --footer-bg-end: rgba(243, 236, 228, 0.95);
  --footer-border: rgba(67, 56, 45, 0.18);
  --footer-title: #261f18;
  --footer-note: #4b4034;
  --footer-disclaimer: #675a4c;
  --footer-link-ink: #2d251e;
  --social-link-border: #b7ab9d;
  --social-link-bg: rgba(255, 255, 255, 0.94);
  --social-link-hover: rgba(244, 236, 227, 0.95);
  --social-icon-border: rgba(60, 50, 40, 0.26);
  --social-icon-ink: #3b3025;
  --hero-heading-ink: #51463a;
  --section-kicker-ink: #7f6f5d;
  --section-subtitle-ink: #6a5d4f;
  --story-surface: #faf5ec;
  --story-surface-2: #f3eadc;
  --story-surface-focus: #f8f1e5;
  --story-visual-border: #d2c6b8;
  --story-visual-bg: #ebe2d6;
  --story-source-ink: #7a634a;
  --story-meta-ink: #7a6957;
  --story-meta-dot: #927f6b;
  --story-body-ink: #403427;
  --story-muted-ink: #70614f;
  --headline-ink: #2f251c;
  --headline-hover: #19130f;
  --badge-border: #c8bbac;
  --badge-bg: #efe6da;
  --badge-ink: #4f4337;
  --chip-active-bg: #ddd2c3;
  --chip-active-ink: #33291f;
  --chip-active-border: #a9957f;
  --card-shadow: 0 10px 26px rgba(88, 67, 44, 0.11);
}


/* The homepage is the identity reference. Keep these rules shared by all pages. */
.brand-home-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}

.brand-home-link:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: var(--ui-radius);
  background: linear-gradient(140deg, #edf3ff, #c7d9ff);
  display: grid;
  place-items: center;
}

.brand-mark svg {
  width: 32px;
  height: 32px;
}

.brand-mark svg .onion-fill {
  fill: #3b74d8;
}

.brand-mark svg .onion-outline {
  fill: none;
  stroke: #2350a0;
  stroke-width: 3;
  stroke-linecap: round;
}

.brand-mark svg .onion-cut {
  stroke: #f8fbff;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

.brand-mark svg .onion-ring {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.brand-title {
  margin: 0;
  color: var(--title-ink);
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.subtitle {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--subtitle-ink);
}


.brand-identity { line-height: normal; }
.brand-identity > div:last-child { min-width: 0; }
.brand-mark { flex: 0 0 auto; }
.brand-home-link { max-width: 100%; }
.brand-title { line-height: normal; }
.brand-home-link .subtitle { line-height: normal; overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .brand-identity { justify-content: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
  .brand-title { font-size: 1.55rem; }
  .subtitle { font-size: 0.82rem; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-mark svg { width: 28px; height: 28px; }
}