/* Unified public-site skin: landing, legal pages, and blogs. */
:root {
  --accent: #f2b632;
  --accent-soft: rgba(242, 182, 50, .18);
  --accent-ink: #8d5a05;
  --bg: #111a17;
  --bg-2: #1b2723;
  --bg-3: #26332e;
  --ink: #171d1a;
  --ink-dim: #4c5651;
  --ink-mute: #727a75;
  --line: #d4ccbb;
  --line-soft: #e5dfd2;
  --paper: #f6f4ef;
  --paper-2: #ebe7dc;
  --paper-3: #fffdf8;
}

body {
  background: #f6f4ef !important;
  background-image: none !important;
  color: var(--ink) !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

.navbar,
.moe-nav {
  background: color-mix(in oklab, #111a17 92%, transparent) !important;
  border-bottom: 1px solid rgba(242, 182, 50, .16) !important;
  color: #f6f1e4;
}

.navbar-brand,
.moe-brand,
.moe-brand-name,
.footer-brand {
  color: #f6f1e4 !important;
}

.navbar-brand span,
.nav-link,
.moe-nav-crumb,
.moe-nav-back,
.moe-lang-btn,
.lang-btn {
  color: rgba(246, 241, 228, .76) !important;
}

.nav-link:hover,
.moe-nav-back:hover,
.moe-lang-btn:hover:not(.active),
.lang-btn:hover {
  color: #f6f1e4 !important;
}

.lang-btn.active,
.moe-lang-btn.active {
  background: var(--accent) !important;
  color: #111 !important;
}

.navbar-brand::before {
  border-bottom-color: var(--accent) !important;
}

.moe-brand svg [stroke] {
  stroke: var(--accent) !important;
}

.moe-brand svg [fill]:not([fill="none"]) {
  fill: var(--accent) !important;
}

.moe-brand svg [fill="none"] {
  fill: none !important;
}

.moe-nav-sep,
.moe-lang,
.lang-switcher,
.moe-nav-back {
  border-color: rgba(246, 241, 228, .2) !important;
}

.container.legal-main,
.legal-main {
  padding-top: clamp(56px, 7vw, 92px) !important;
}

.page-kicker,
.blog-hero-eyebrow,
.blog-toc-label,
.callout-label,
.example-box-title {
  color: var(--accent-ink) !important;
}

.page-title,
.legal-main .page-title {
  color: var(--ink) !important;
  max-width: 14ch !important;
}

.content-card,
.blog-toc,
.callout,
.fit-card,
.field-table th,
.example-box,
.choice-demo,
.answer-demo,
.imgsort-demo,
.tileswap-demo,
.dir-walk-demo,
.bp-card {
  background: rgba(255, 253, 248, .94) !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 60px -48px rgba(28, 24, 16, .45);
  backdrop-filter: none !important;
}

.content-card h2,
.blog-article h2 {
  color: var(--ink) !important;
  border-bottom-color: var(--line-soft) !important;
}

.content-card h3,
.blog-article h3,
.blog-article h4,
.content-card strong,
.blog-article strong,
.fit-card strong,
.choice-demo-title,
.bp-body strong,
.field-table td:first-child,
.station-table td:first-child,
.station-table td strong {
  color: var(--ink) !important;
}

.content-card p,
.content-card li,
.content-card address,
.blog-article p,
.blog-article li,
.blog-article ul,
.blog-article ol,
.fit-card span,
.field-table td,
.station-table td,
.choice-row,
.answer-desc,
.bp-body span {
  color: var(--ink-dim) !important;
}

.content-card a,
.blog-article a,
footer a,
.blog-footer a,
.blog-toc-list a {
  color: var(--accent-ink) !important;
}

.content-card a:hover,
.blog-article a:hover,
footer a:hover,
.blog-footer a:hover,
.blog-toc-list a:hover {
  color: var(--ink) !important;
}

.updated,
.puzzle-badge,
.dir-step-icon {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border-color: color-mix(in oklab, var(--accent) 42%, var(--line)) !important;
}

.de-note {
  background: #ebe7dc !important;
  color: var(--ink-dim) !important;
  border-color: color-mix(in oklab, var(--accent) 32%, var(--line)) !important;
}

.blog-hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(17,26,23,.84) 0%, rgba(17,26,23,.62) 48%, rgba(17,26,23,.46) 100%),
    url("/assets/scaled/hero_friends.webp") center / cover !important;
  border-bottom: 0 !important;
  color: #fff !important;
  text-align: left !important;
  padding: clamp(72px, 9vw, 130px) 20px clamp(60px, 8vw, 100px) !important;
}

.blog-hero > * {
  max-width: min(100% - 32px, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.blog-hero h1 {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
  margin-left: auto !important;
  margin-right: auto !important;
}

.blog-hero-lead,
.blog-meta {
  color: rgba(255,255,255,.84) !important;
}

.blog-meta {
  justify-content: flex-start !important;
}

.blog-meta-dot {
  background: rgba(255,255,255,.45) !important;
}

.blog-article {
  color: var(--ink) !important;
}

.blog-article h3,
.caveat {
  color: var(--accent-ink) !important;
}

code {
  background: rgba(242, 182, 50, .12) !important;
  border-color: rgba(242, 182, 50, .26) !important;
  color: var(--accent-ink) !important;
}

.phone-frame {
  background: #1b2723 !important;
  box-shadow: 0 34px 72px -28px rgba(17,26,23,.65), inset 0 0 0 1.5px #41524a !important;
}

.blog-footer,
footer {
  background: #111a17 !important;
  border-top: 1px solid rgba(242, 182, 50, .16) !important;
  color: rgba(246, 241, 228, .72) !important;
}

footer p,
.blog-footer,
.blog-footer a {
  color: rgba(246, 241, 228, .72) !important;
}

.blog-divider,
hr {
  background: var(--line-soft) !important;
}

.field-table th,
.station-table th {
  background: #ebe7dc !important;
  color: var(--ink-dim) !important;
}

.field-table td,
.station-table td,
.choice-row,
.dir-step {
  border-bottom-color: var(--line-soft) !important;
}

.choice-mark {
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.station-num,
.step-badge {
  background: var(--accent) !important;
  color: #111 !important;
}

@media (max-width: 700px) {
  .blog-hero {
    text-align: left !important;
    padding-top: 64px !important;
  }
}

@media (max-width: 430px) {
  .moe-nav-inner {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .moe-brand-name {
    display: none !important;
  }

  .moe-nav-back {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .moe-lang-btn {
    padding: 5px 8px !important;
  }
}