/* ============================================================
   Outland — Color direction 1b "Bone & Oxblood"
   COLOR-ONLY overlay. Loaded after the Webflow shared CSS so it wins.
   Remove the <link> to this file (and this file) to revert to the
   dark baseline. Layout / type / spacing untouched.
   ============================================================ */

:root {
  --bg:      #F7F5F0;
  --surface: #DDD6C6;
  --muted:   #8B8D91; /* cool/neutral silver-gray (was warm #8E8878 "gold" cast) */
  --fg:      #26231E;
  --accent:  #7D2A1F;

  /* Flip the base Webflow tokens the theme is built on */
  --white: #26231E; /* was #f2f2f2 → now primary dark text + lines  */
  --black: #EAE5D9; /* was black   → now the page background        */
}

/* ---- Page ---- */
body { background-color: var(--bg); color: var(--fg); }

/* ---- Secondary / muted text (was opacity .5 on white) ---- */
.body-font.opacity,
.opacity { opacity: 1; color: var(--muted); }

/* ---- Body sections: exactly TWO colors. Section labels stay --fg (black);
        EVERYTHING below a label is the single --muted gray. Links & award-block
        items were inheriting --fg (link color), so force them to --muted too. ---- */
.section-description,
.section-description.opacity,
.list .body-font, .list a,
.award-block .body-font, .award-block a,
.details-text-wrapper .body-font { opacity: 1; color: var(--muted); }
/* highlight arrows (white SVGs) → same gray, not black */
.award-block-icon { filter: brightness(0); opacity: .43; }
/* .list and .award-block are dimmed to opacity:.5 at the CONTAINER level, which
   halves their gray (child color/opacity can't undo an ancestor's opacity) and
   made links / highlights lighter than the bio. Undo it so every content item
   renders the one true --muted gray. Hover still highlights via a:hover accent. */
.list, .award-block { opacity: 1; }

/* ---- Nav uses mix-blend-mode:difference (built for the dark theme): it turns
        our dark text light-gray and distorts the accent on the bone bg. Render
        true colors instead. ---- */
.menu { mix-blend-mode: normal; }

/* ---- Nav items (OUTLAND / Roster / About / Berlin, DE) all solid --fg ---- */
.menu-item { opacity: 1; }

/* ---- Active page + hover on nav items → accent (matches Contact / Inquiries) ---- */
.menu-item:hover .body-font,
.menu-item.w--current .body-font { color: var(--accent); }
.menu-item:hover .menu-item-line,
.menu-item.w--current .menu-item-line { background-color: var(--accent); }

/* ---- Image placeholders + hairline so light B&W photos don't melt into bone ---- */
.image, .bg-image { background-color: var(--surface); }
.image._3-4-image,
.work-block-video-wrapper .bg-image,
.overflow-wrapper .image { border: 1px solid var(--surface); }

/* ---- Structural lines default to fg ---- */
.menu-item-line,
.button-line,
.text-line,
.toggle-shape { background-color: var(--fg); }

/* ---- White content icons (arrows, etc.) → dark so they read on bone ---- */
.icon,
.award-block-icon { filter: brightness(0); }

/* ---- Accent: nav "Contact" ---- */
a[href="contact.html"].menu-item { opacity: 1; }
a[href="contact.html"].menu-item .body-font { color: var(--accent); }
a[href="contact.html"].menu-item .menu-item-line { background-color: var(--accent); }

/* ---- Accent: "Inquiries" / CTA button ---- */
.button .body-font { color: var(--accent); }
.button .button-line { background-color: var(--accent); }

/* ---- Contact form fields: dark text, readable placeholder, visible underline
        (originals were white/transparent → invisible on the light bg) ---- */
.input,
.input.text-area,
textarea.input { color: var(--fg); border-bottom: 1px solid rgba(38, 35, 30, .28); }
.input::placeholder { color: var(--fg); opacity: .6; }
.input:focus { border-bottom-color: var(--fg); }

/* ---- Roster Grid/List toggle: labels were #f2f2f2 (invisible), track stroke
        was transparent-white. Make labels --fg and the stroke --fg. ---- */
.tab-link,
.tab-link.w--current { color: var(--fg); }
.first-part-toggle,
.second-part-toggle { border-color: var(--fg); }

/* ---- States ---- */
::selection { background: var(--accent); color: var(--bg); }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }