/* Shared palette: white / beige / warm charcoal */
:root {
 --paper: #FFFFFF; --beige: #E8DFD2; --mist: #E8DFD2;
 --green: #36332F; --ink: #36332F; --char: #36332F;
 --char-2: #36332F; --mute: #625C54; --line: #CFC5B8;
}
#works.sec--mist, #journal.sec--mist { background: var(--paper); }
.nav__cta a, .btn--solid, .ph .tag, .cmp thead th { background: var(--char); color: var(--paper); border-color: var(--char); }
.nav__cta a small, .nav__cta a:hover span { color: var(--paper); }
.nav__cta a:hover, .btn--solid:hover { background: var(--beige); color: var(--ink); }
.nav__cta a:hover span, .nav__cta a:hover small { color: var(--ink); }
.cta { background: var(--beige); color: var(--ink); }
.cta .btn--inv { background: var(--char); color: var(--paper); border-color: var(--char); }
.cta .btn--inv:hover { background: var(--paper); color: var(--ink); }
.cta__sub, .cta__ways p, .cta__ways li > span, .cta__main > p:not(.eyebrow):not(.cta__sub) { color: var(--ink); }
.svc__item { border-top-color: var(--char); }
.ftr { background: var(--char); color: var(--paper); }
.ftr .logo--inv, .ftr__brand p:not(.logo), .ftr__sns a, .ftr h2,
.ftr__co dt, .ftr__co .tbd, .ftr__copy, .ftr__nav a:hover { color: var(--paper); }
.ftr h2, .ftr__copy, .ftr__sns a { border-color: var(--beige); }

/* Comparison table: explicit column and row separators. */
@media (min-width: 621px) {
  .cmp { border: 1px solid #A69B8C; }
  .cmp th, .cmp td { border: 1px solid #A69B8C; }
  .cmp thead th { border: 1px solid #A69B8C; }
  .cmp thead th + th { border-left-color: #E8DFD2; }
}
@media (max-width: 620px) {
  .cmp tr { border: 1px solid #A69B8C; }
  .cmp tr + tr { border-top: 0; }
  .cmp td { border-top: 1px solid #A69B8C; }
}

/* Shared selected states and readable secondary text. */
.tags li.on, .chip[aria-pressed="true"], .req { background: var(--char); border-color: var(--char); color: var(--paper); }
.nav__cta a[aria-current="page"] span { color: var(--paper); }
.nav__cta a[aria-current="page"]:hover span { color: var(--ink); }
.eyebrow--inv, .cta--slim p:not(.eyebrow) { color: var(--ink); }
.ph::before, .crumb li + li::before { color: var(--mute); }