/* Shared visual system: near-black surfaces, restrained gold, and clear white type. */
:root {
  --bg: #080a0b;
  --bg-raised: #0c0f10;
  --surface: #111516;
  --surface-strong: #151a1b;
  --surface-soft: #0d1011;
  --ink: #f5f6f2;
  --ink-soft: #d0d5d1;
  --muted: #929a96;
  --muted-strong: #b0b8b3;
  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent: #f1c928;
  --accent-bright: #ffdc3d;
  --accent-soft: rgba(241, 201, 40, 0.085);
  --accent-line: rgba(241, 201, 40, 0.42);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
}

html {
  background: var(--bg);
  scrollbar-color: #414849 #090b0c;
}

body {
  background:
    radial-gradient(circle at 82% -12%, rgba(241, 201, 40, 0.045), transparent 35rem),
    radial-gradient(circle at 12% 18rem, rgba(255, 255, 255, 0.018), transparent 32rem),
    linear-gradient(180deg, #0a0c0d 0, #090c0d 42rem, #080a0b 100%);
}

body::before {
  opacity: 0.1;
}

.site-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(9, 11, 12, 0.94);
}

.search-shell,
.search-results {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 23, 24, 0.8);
}

.search-shell:focus-within {
  border-color: rgba(241, 201, 40, 0.48);
  background: rgba(19, 24, 25, 0.96);
}

.panel,
.window-column,
.window-continuation,
.content-panel,
.about-proof,
.about-process,
.about-manifesto,
.window-page-notes {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 48%),
    #111516;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.about-hero,
.window-page-hero {
  border-color: rgba(241, 201, 40, 0.36);
  background:
    radial-gradient(circle at 92% 7%, rgba(241, 201, 40, 0.055), transparent 34%),
    linear-gradient(145deg, #121616, #0c0f10 72%);
}

.about-proof article,
.about-principles article,
.window-switcher a {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.015), transparent 60%),
    #101415;
}

.window-switcher a.active,
.window-switcher a:hover {
  border-color: rgba(241, 201, 40, 0.42);
  background:
    linear-gradient(145deg, rgba(241, 201, 40, 0.06), transparent 70%),
    #151713;
}

.market-card,
.primary-window-grid .market-card,
.window-market-grid .market-card {
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 58%),
    #111516;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 18px rgba(0, 0, 0, 0.1);
}

.market-card:hover,
.primary-window-grid .market-card:hover,
.window-market-grid .market-card:hover {
  border-color: rgba(241, 201, 40, 0.32);
  background:
    linear-gradient(145deg, rgba(241, 201, 40, 0.05), transparent 64%),
    #151918;
}

.window-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
}

.site-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: #090c0d;
}

/* Charcoal canvas with nearly black information surfaces. Gold is reserved for
   the brand and hierarchy rather than used as a large background treatment. */
:root {
  --bg: #181b1d;
  --bg-raised: #1c2022;
  --surface: #090c0d;
  --surface-strong: #0d1011;
  --surface-soft: #070a0b;
}

html {
  background: var(--bg);
  scrollbar-color: #4b5153 #171a1c;
}

body {
  background: linear-gradient(180deg, #1d2022 0, #181b1d 42rem, #16191b 100%);
}

.site-header {
  background: rgba(24, 27, 29, 0.96);
}

.search-shell,
.search-results {
  background: #0d1011;
}

.panel,
.window-column,
.window-continuation,
.content-panel,
.about-proof,
.about-process,
.about-manifesto,
.window-page-notes,
.about-hero,
.window-page-hero,
.about-proof article,
.about-principles article,
.window-switcher a {
  background: #090c0d;
}

.market-card,
.primary-window-grid .market-card,
.window-market-grid .market-card {
  background: #070a0b;
}

.window-head {
  background: #0a0d0e;
}

.site-footer {
  background: #181b1d;
}

.brand-logo {
  width: 33px;
  height: 33px;
}

.about-mark img {
  display: block;
  width: 28px;
  height: 28px;
}

@media (max-width: 760px) {
  .brand-logo {
    width: 31px;
    height: 31px;
  }
}