/* Sidetrack look — applies immediately (not gated on JS).
   Black / cream chrome. Colour comes from the pictures. */

:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Alfa Slab One", Impact, "Arial Black", serif !important;
  --font-note: "Caveat", "Segoe Script", cursive;
  --color-ink: #111111;
  --color-paper: #f4efe6;
  --color-cream: #faf7f0;
  --color-gold: #c9a227;
  --color-text: #111111 !important;
  --color-text-secondary: #3a3832 !important;
  --color-text-muted: #5c5850 !important;
  --color-text-inverse: #f4efe6 !important;
  --color-link: #111111 !important;
  --color-link-hover: #3a3832 !important;
  --color-link-visited: #111111 !important;
}

html,
body {
  background-color: #f4efe6 !important;
  background-image: none !important;
  color: #111111 !important;
}
body { font-family: var(--font-sans); }
a { color: #111111 !important; }
a:hover, a:focus-visible { color: #3a3832 !important; }

.site-header, header.site-header, #site-header {
  background: #111111 !important;
  border-bottom: 1px solid rgba(244, 239, 230, 0.14) !important;
  box-shadow: none !important;
}
.site-header-logo img { filter: invert(1); mix-blend-mode: screen; }
.site-header-link, .site-header-link:visited, .site-header-link:hover,
.site-header-link.is-active, a.site-header-link.is-active,
.site-header-toggle, .site-header-nav a,
.site-header-auth-link, .site-header-auth-link-join, .site-header .fa,
.site-sub-nav, .site-sub-nav a, .site-footer, .site-footer a, .site-footer-link {
  color: #f4efe6 !important;
}
.site-header-link.is-active, a.site-header-link.is-active {
  border-bottom-color: #f4efe6 !important;
}
.site-header-search-input { background: #f4efe6 !important; color: #111111 !important; border: 0 !important; }
.site-header-search-btn { color: #111111 !important; }
.site-sub-nav { background: #111111 !important; border-top: 1px solid rgba(244, 239, 230, 0.12) !important; }
.site-footer { background: #111111 !important; border-top: 1px solid rgba(244, 239, 230, 0.14) !important; color: #f4efe6 !important; }

.hero-cta, .feed-hero-card .hero-cta, .home-hero .hero-cta {
  color: #f4efe6 !important; border-bottom-color: #f4efe6 !important;
}
.home-stories-ring-avatar img { background: #111111 !important; border-color: #111111 !important; }

.site-main, .site-main-inner, .page-layout-with-sidebar, .page-layout-with-sidebar__main {
  background: #f4efe6 !important; color: #111111 !important;
}
.page-layout-with-sidebar__sidebar { background: #faf7f0 !important; border-left-color: rgba(17, 17, 17, 0.1) !important; }

h1, h2, h3, .grid-card-title, .event-card-name, .person-card-name,
.hero-title, .feed-hero-title, .auth-title, .sidebar-heading {
  font-family: var(--font-display) !important; letter-spacing: 0;
}
.hero-title, .hero-title-link, .hero-location, .hero-excerpt, .hero-overlay, .hero-overlay a {
  color: #f4efe6 !important;
}
.hero-category, .hero-category-top {
  background: #111111 !important; color: #f4efe6 !important;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.grid-card, .event-card, .person-card, .auth-card, .account-card {
  background: #faf7f0 !important;
  border: 1px solid rgba(17, 17, 17, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12) !important;
  color: #111111 !important;
}
.grid-card-copy, .grid-card-title, .grid-card-meta,
.event-card-copy, .event-card-name, .event-card-meta,
.person-card-copy, .person-card-name, .person-card-occupations { color: #111111 !important; }

.grid-card-accent, .event-card-accent, .person-card-accent {
  display: block; height: 5px; width: 100%;
  background-image: var(--photo, none); background-size: cover; background-position: center;
  filter: saturate(1.4) contrast(1.08);
}

.auth-page, .account-page, .auth-card, .account-card { background: #faf7f0 !important; color: #111111 !important; }
.auth-submit, .btn-primary, input[type="submit"].auth-submit,
.list-action-btn, .filter-chip.active, .site-sub-nav .filter-chip.active {
  background: #111111 !important; border-color: #111111 !important; color: #f4efe6 !important;
}

html[data-accent="house"] { --color-gold: #c9a227; }
html[data-accent="house"] .grid-card-accent,
html[data-accent="house"] .event-card-accent,
html[data-accent="house"] .person-card-accent {
  background-image: none; background: var(--color-gold); filter: none;
}