/* ============================================================
   Site-wide editorial re-theme.
   Loaded last (after every page's own <style> block and after
   header-fix.css) so it wins the cascade without having to
   rewrite each page's original CSS by hand.

   - Flips the whole site from dark to a white, editorial look:
     white page, near-black text.
   - Keeps text that sits ON TOP of a photo/video (hero areas,
     category strips, the lightbox modal, poster panels) white,
     since it's still overlaying dark/mixed imagery.
   - Uses each page's own SF Pro custom fonts (MyCustomFont1 /
     MyCustomFont2, declared per-page via @font-face) rather than
     swapping in a different typeface.
   ============================================================ */

/* ---- Base: white page, black text ---- */
html, body {
  background: #f3f2ed !important;
}

h1, h2, h3, h4, h5, h6,
p, a, span, div, strong, li, ul, nav, button, label {
  color: #111111 !important;
  font-weight: 500 !important;
}

/* ---- Bolder weight for headline / label elements specifically ---- */
h1, h2, h3,
.page-heading, .hero-title, .name, .project-title,
.strip-title, .title, .site-header-logo h2,
.kicker, strong {
  font-weight: 700 !important;
}

/* ---- Bigger, bolder editorial type scale sitewide ---- */
body, p, li {
  font-size: 17px !important;
  line-height: 1.55 !important;
}
h1, .page-heading {
  font-size: clamp(38px, 4.6vw, 60px) !important;
  line-height: 1.02 !important;
}
h2, .project-title {
  font-size: clamp(20px, 2vw, 26px) !important;
}
.project-industry {
  font-size: 12px !important;
}
.strip-title {
  font-size: clamp(32px, 4.6vw, 80px) !important;
}

/* ---- Panels that were solid dark content blocks (not photo
   overlays) flip to white background too ---- */
.col-feed, .strips {
  background: #f3f2ed !important;
}

/* ---- Preserve white text anywhere it sits on top of a photo,
   video, or the lightbox scrim ---- */
.hero, .hero *,
.hero-split .hero-left, .hero-split .hero-left *,
.hero-content, .hero-content *,
.modal, .modal *,
.col-poster, .col-poster *,
.poster-overlay, .poster-overlay *,
.hero-watch-btn, .hero-watch-btn *,
.lead, .lead *,
.kicker,
.frame, .frame * {
  color: #f3f2ed !important;
}

/* ---- Homepage Motion/Social links: plain red text, no box ---- */
.strip-title {
  color: #fe3928 !important;
}