/* ============================================================
   LPTS LIGHT THEME — chrome overrides
   Load AFTER lpts-chrome.css on light pages only.
   Converts header/nav/drawer to the approved light treatment
   (paper nav, pale Society-blue pre-header, ink type).
   Footer intentionally stays ink-dark — it works on light.
   ============================================================ */

:root {
  --lt-paper: #F7F1E3;
  --lt-paper-2: #F0E5D0;
  --lt-ink: #1A1014;
  --lt-blue: #41B6E6;
  --lt-blue-deep: #2680A8;
  --lt-red: #E63946;
  --lt-pink: #C84B7F;
}

/* --- Pre-header: option C, pale Society blue, red stars, deep-blue icons --- */
/* Pre-header — option 3: ink bar carrying a mini blue-square + red-star echo of the mark. Pre-header only. */
.lpts-preheader {
  background: #1A1014;
  border-bottom: none;
}
.lpts-preheader-inner { justify-content: space-between; }
.ph-social a { color: #41B6E6; }
.ph-social a:hover { color: #E63946; transform: translateY(-1px); }
.ph-echo { display: flex; align-items: center; gap: 8px; }
.ph-echo-sq { width: 14px; height: 14px; background: #41B6E6; border-radius: 0; flex: none; }
.ph-echo-star { width: 15px; height: 15px; color: #E63946; display: inline-flex; flex: none; }
.ph-echo-star svg { width: 100%; height: 100%; fill: currentColor; }
.ph-echo-label { font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,236,221,0.72); white-space: nowrap; }
.ph-contact { color: #F4ECDD; }
.ph-contact a { color: #41B6E6; }
@media (max-width: 760px) { .ph-echo-label { display: none; } }

/* --- Nav: paper bar, ink links, prod lockup colors preserved --- */
.lpts-nav {
  background: var(--lt-paper);
  border-bottom: 2px solid var(--lt-ink);
}
.lpts-nav .nav-links a { color: var(--lt-ink); opacity: 0.78; }
.lpts-nav .nav-links a:hover,
.lpts-nav .nav-links a.active { opacity: 1; color: var(--lt-red); }
.brand-lockup .nav-name { color: var(--lt-ink); }
.brand-lockup .nav-tagline { color: var(--lt-pink); }

/* CTA buttons: blue shop, red join (light-theme convention) */
.lpts-nav .join-btn {
  background: var(--lt-red);
  color: #fff;
}
.lpts-nav .join-btn:hover { background: #c92d3a; }
.lpts-nav .shop-btn,
.lpts-nav a.shop-btn {
  background: var(--lt-blue);
  color: #fff;
}

/* --- Mobile drawer on light --- */
@media (max-width: 1040px) {
  .lpts-nav .nav-links { background: var(--lt-paper); }
  .lpts-nav .nav-links a { color: var(--lt-ink); }
}
.lpts-nav .nav-toggle span { background: var(--lt-ink); box-shadow: none; }

/* --- Generic light-page helpers --- */
.lt-card {
  background: #fff;
  border: 2px solid var(--lt-ink);
  border-radius: 12px;
}

/* --- Lockup: box + star align to the LPTS wordmark line (not centered against the 2-line block) --- */
.brand-lockup { align-items: flex-start; }
.brand-lockup .nav-square,
.brand-lockup .nav-star { margin-top: 1px; }

/* ============================================================
   LIGHT THEME TOKENS — single source of truth
   Converted pages drop their own dark :root and inherit these.
   (Loaded after lpts-chrome.css, before page <style>.)
   ============================================================ */
:root {
  --bg: #F7F1E3;          /* cream paper */
  --fg: #1A1014;          /* ink */
  --muted: #6b5c63;
  --pink: #C84B7F;        /* deeper pink reads on light */
  --pink-deep: #A23A66;
  --red: #E63946;         /* Trixie Star red */
  --blue: #41B6E6;        /* Society blue */
  --blue-deep: #2680A8;
  --cream: #3A2F34;       /* was a light text role on dark; now warm-ink text role */
  --mauve-1: #FFFFFF;     /* card surface (was banner gradient start) */
  --mauve-2: #F0E5D0;     /* secondary paper (canvas) */
  --mauve-3: #F7F1E3;     /* gradient end -> paper */
  --line: rgba(26,16,20,0.14);
}

/* ============================================================
   LIGHT ROLLOUT — recipe corrections (apply to all converted pages)
   ============================================================ */

/* Headlines & kickers must be ink on cream, not washed cream-on-cream.
   Any heading that inherited a near-white color now reads as ink. */
.dogs-section h2,
.section-head h2, .shead h2,
h1, h2 { color: var(--fg); }
.dogs-section h2 em, .shead h2 em { color: var(--pink-deep); }

/* Section kickers: deeper pink for contrast on cream (not the pale --pink) */
.dogs-eyebrow, .section-kicker, .kick, .eyebrow { color: var(--pink-deep); opacity: 1; }

/* THE brilliant card treatment — white fill, 2px ink border, on cream.
   Routes the dog/org callout boxes (and any generic card) to the canon style. */
.dogs-org, .lt-card, .archive-card, .org-card {
  background: #FFFFFF;
  border: 2px solid var(--fg);
  border-left: 2px solid var(--fg);   /* override the pink left-rule */
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(26,16,20,0.06);
}
.dogs-org h3 { color: var(--fg); }
.dogs-org .org-desc { color: #4a3f44; }

/* The cream callout band itself: keep the deeper canvas so white cards pop */
.dogs-section { background: var(--mauve-2); color: var(--fg); }

/* Cream-as-text fix: any body/quote/lede text that was light cream on dark
   must become ink on light. (Recipe missed bare #F0E5D0 used as a text color.) */
.society-banner--quote .quote-body { color: var(--fg); }
.quote-body, .banner-body, .lede, .society-banner p { color: var(--fg); }

/* Root fix: no heading/eyebrow/title ever renders cream-on-cream. */
.wip-title, .wip-title em { color: var(--fg) !important; }
h1, h2, h3, h4,
[class*="title"], [class*="head"] h2, [class*="-head"],
.eyebrow, [class*="eyebrow"], [class*="kicker"], .kick {
  --_cream-guard: 1;
}

/* ===== Week in Pictures slider -> canonical white-card-on-cream ===== */
.wip-slider-section { background: var(--bg) !important; border-top: 1px solid var(--line) !important; }
.wip-eyebrow { color: var(--pink-deep) !important; }
.wip-link { color: var(--red) !important; font-weight: 700 !important; }
.wip-link:hover { color: var(--fg) !important; }
.wip-slide {
  background: #FFFFFF !important;
  border: 2px solid var(--fg) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 22px rgba(26,16,20,0.06) !important;
}
.wip-slide.active { border-color: var(--red) !important; }
.wip-slide-caption { color: #4a3f44 !important; }
.wip-arrow {
  background: #FFFFFF !important;
  border: 2px solid var(--fg) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
}
.wip-arrow:hover { background: var(--fg) !important; color: var(--bg) !important; }
.wip-dot { background: rgba(26,16,20,0.25) !important; }
.wip-dot.active { background: var(--red) !important; }
.wip-caption { color: rgba(26,16,20,0.45) !important; }


/* ============================================================
   ACCENT = Deep Rose, and the TWO-ZONE legibility rule
   ============================================================ */
:root { --pink: #A23A66; --pink-deep: #A23A66; --rose: #A23A66; }

/* Replace washed light-pink (#FF7AB6) accents site-wide with deep rose.
   These were the eyebrow/link/accent literals on the dark theme. */
[style*="#FF7AB6"], .pink, .wip-eyebrow, .wip-dot.active { }
.wip-eyebrow { color: var(--rose) !important; }
.statement h2 .pink, .statement h2 em { color: var(--rose) !important; }

/* ZONE 2 — content sitting directly on cream (no card): sturdy treatment.
   Solid ink headings, heavier italic accents, no thin weights, pill links. */
.statement h2 { color: var(--fg) !important; }
.statement h2 em { font-weight: 400 !important; }      /* not 300 hairline */
.statement-sub { color: #4a3f44 !important; opacity: 1 !important; }

/* Any eyebrow/kicker on cream: rose + bold, never pale */
.wip-eyebrow, .dogs-eyebrow, .eyebrow, [class*="eyebrow"],
.kick, [class*="kicker"] { color: var(--rose) !important; opacity: 1 !important; }

/* On-cream links become filled rose pills (legible without a card) */
.wip-link {
  background: var(--rose) !important;
  color: #fff !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.wip-link:hover { background: var(--fg) !important; color: #fff !important; }

/* Carded zones keep rose as text+underline (contrast is fine on white) */
.dogs-org a { color: var(--rose) !important; border-bottom-color: var(--rose) !important; }
.dogs-org .org-loc { color: var(--rose) !important; }

/* ===== Pull-quote: bigger type, less canvas, rose accents (layout only) ===== */
.society-banner--quote { padding: 40px 32px 36px !important; border-color: var(--line) !important; }
.society-banner--quote .quote-mark { font-size: 64px !important; color: var(--rose) !important; opacity: .35; margin: 0 0 8px !important; }
.society-banner--quote .quote-body {
  font-weight: 400 !important;
  font-size: clamp(26px, 4.4vw, 40px) !important;
  line-height: 1.25 !important;
  color: var(--fg) !important;
  max-width: 820px !important;
}
.society-banner--quote .quote-attr { color: var(--rose) !important; opacity: 1 !important; }
@media (max-width:560px){
  .society-banner--quote { padding: 30px 20px 28px !important; }
  .society-banner--quote .quote-body { font-size: 25px !important; }
}

/* ===== Text-feature banners -> white-on-cream cards (dog-box style) =====
   Applies to .society-banner EXCEPT quote variants (those become image bands). */
.society-banner:not(.society-banner--quote) {
  background: #FFFFFF !important;
  border: 2px solid var(--fg) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(26,16,20,0.06) !important;
  max-width: 760px;
  margin: 28px auto !important;
  padding: 30px 30px 32px !important;
}
.society-banner:not(.society-banner--quote) .banner-head {
  color: var(--fg) !important;
  font-weight: 900 !important;
}
.society-banner:not(.society-banner--quote) .banner-sub {
  color: #4a3f44 !important;
}
.society-banner:not(.society-banner--quote) .banner-sub em { color: var(--rose) !important; font-style: italic; }
.society-banner:not(.society-banner--quote) .banner-cta {
  background: var(--rose) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 11px 22px !important;
}
.society-banner:not(.society-banner--quote) .banner-cta:hover { background: var(--fg) !important; }
@media (max-width:560px){
  .society-banner:not(.society-banner--quote){ margin: 18px 14px !important; padding: 22px 20px 24px !important; }
}

/* ===== Marquee -> dark ticker bar (white caps, blue stars) ===== */
.marquee {
  background: var(--fg) !important;
  border-top: 2px solid var(--fg) !important;
  border-bottom: 2px solid var(--fg) !important;
  padding: 16px 0 !important;
}
.marquee-track {
  font-family: 'Archivo', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--paper, #F7F1E3) !important;
}
.marquee-track .dot-sep { display: none !important; }
.marquee-track .star-mq { filter: none !important; }
.marquee-track .star-mq path,
.marquee-track .star-mq use { fill: var(--blue) !important; color: var(--blue) !important; }

/* No fades: flatten any section gradient backgrounds to paper */
.gallery, #pictures, .statement, section[style*="linear-gradient"] { background: var(--bg) !important; }

/* ============================================================
   MOTION-HERO TEXT — keep light over the cycling hero media, and
   make the white SELF-BACKING so a bright video frame can never
   wash it out (no plate; the video stays visible).
   Covers lpts-motion-host (team/village/history/foundation/fox32)
   and tiv-motion-host (trixieinterventures), plus any future
   motion video dropped onto these heroes.
   ============================================================ */
.lpts-motion-host,
.lpts-motion-host h1, .lpts-motion-host h2, .lpts-motion-host h3,
.lpts-motion-host p, .lpts-motion-host span, .lpts-motion-host div,
.tiv-motion-host,
.tiv-motion-host h1, .tiv-motion-host h2, .tiv-motion-host h3,
.tiv-motion-host p, .tiv-motion-host span, .tiv-motion-host div {
  color: #FFFFFF !important;
}
.lpts-motion-host [class*="eyebrow"],
.lpts-motion-host [class*="-cap"],
.lpts-motion-host [class*="kicker"],
.lpts-motion-host .team-hero-cap,
.tiv-motion-host [class*="eyebrow"],
.tiv-motion-host [class*="-cap"],
.tiv-motion-host [class*="kicker"] {
  color: #FFFFFF !important;
  border-color: #FF7AB6 !important;   /* bright pink accent bar reads on dark */
}
.lpts-motion-host h1 em, .lpts-motion-host em,
.tiv-motion-host h1 em, .tiv-motion-host em {
  color: #FF7AB6 !important;          /* headline accent — large text, fine on dark */
}

/* THE GUARANTEE: white text carries its own dark halo, so it stays
   legible on ANY frame (light or dark) without darkening the whole image. */
.lpts-motion-host h1, .lpts-motion-host h2, .lpts-motion-host h3,
.lpts-motion-host p, .lpts-motion-host [class*="eyebrow"],
.lpts-motion-host [class*="-cap"], .lpts-motion-host .team-hero-cap,
.tiv-motion-host h1, .tiv-motion-host h2, .tiv-motion-host h3,
.tiv-motion-host p, .tiv-motion-host [class*="eyebrow"], .tiv-motion-host [class*="-cap"] {
  text-shadow: 0 0 1px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.55), 0 4px 26px rgba(0,0,0,0.50);
}

/* TIV's overlay shipped with NO scrim (chrome set z-index only), so its
   white text sat on the raw video. Give it a scrim + a soft bloom centered
   on the wordmark — backs the text on bright frames, video still reads. */
.tiv-motion-host > .tiv-motion-overlay {
  background:
    rgba(10,10,10,0.62);
}

/* Shared hero placeholder video — covers the cycling stills (which remain the
   fallback), sits under the scrim. z-index 1 within the bed (stills are auto);
   the overlay (z-index 1 on the host) still paints above the whole bed. */
.lpts-motion-bg .lpts-motion-video,
.tiv-motion-bg .tiv-motion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Nav star texture — the scattered TrixieStar field, relocated from the pre-header */
.lpts-nav-inner { position: relative; z-index: 1; }
.nav-stars { position: absolute; inset: 0; overflow: hidden; opacity: 0.13; pointer-events: none; z-index: 0; }
.nav-stars svg { position: absolute; fill: #E63946; }

/* Big red TrixieStar home mark on the left; links stay centered, CTAs right */
.lpts-nav-inner { grid-template-columns: auto 1fr auto; }
.nav-home-star { width: 46px; height: 46px; color: #E63946; display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; transition: transform 0.2s, color 0.2s; }
.nav-home-star svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.nav-home-star:hover { color: #c92d3a; transform: scale(1.06); }
@media (max-width: 640px) { .nav-home-star { width: 34px; height: 34px; margin-right: auto; } }

/* Mobile keeps the mark: the pre-header (hidden elsewhere on mobile) returns with just the echo; socials stay in the footer */
@media (max-width: 640px) {
  .lpts-preheader { display: block; }
  .lpts-preheader .ph-social { display: none; }
  .ph-echo-label { display: inline; }
}

/* Pre-header mark is now a clickable home link */
.ph-echo { text-decoration: none; cursor: pointer; }
.ph-echo:hover .ph-echo-label { color: rgba(244,236,221,0.95); }

/* Footer brand -> clickable home link; huge + left-anchored on desktop only */
.lpts-footer .footer-lockup { text-decoration: none; }
@media (min-width: 641px) {
  .lpts-footer .footer-lockup { margin: 0 0 60px; justify-content: flex-start; gap: 20px; }
  .lpts-footer .footer-lockup .blue-square { width: 100px; height: 100px; }
  .lpts-footer .footer-lockup .star-mark { width: 92px; height: 92px; }
}

/* Mobile: pre-header sits flush on the nav — no transparent gap in the fixed stack */
@media (max-width: 640px) {
  .lpts-preheader { margin-bottom: 0; }
}

/* ============================================================
   EYEBROW-IN-PILL FIX (July 7, 2026)
   The July 4 pill treatment (lpts-chrome.css) put a white pill
   behind EVERY eyebrow. The motion-hero rules above still forced
   eyebrow text white — correct when text sat bare on video, but
   white-on-white inside the pill. Eyebrows in motion heroes now
   read rose-on-white like everywhere else; halo removed (a dark
   text-shadow inside a white pill reads as grime).
   Must remain AFTER the motion-hero block to win the cascade.
   ============================================================ */
.lpts-motion-host [class*="eyebrow"], .lpts-motion-host .eyebrow,
.tiv-motion-host [class*="eyebrow"], .tiv-motion-host .eyebrow {
  color: var(--rose, #A23A66) !important;
  text-shadow: none !important;
}

/* ============================================================
   AIRY PASS — light & airy skin, one lever for every light page.
   Near-white canvas, hairline rules, one step lighter headlines,
   feather shadows, more breathing room. Inspired by the
   Salt & Light Coalition team page Dave adores.
   ============================================================ */
:root {
  --lt-paper: #FCFAF6;
  --lt-paper-2: #F5F0E6;
}
body { background: #FCFAF6 !important; }

/* Nav: white bar with a hairline instead of the 2px ink rule */
.lpts-nav { background: #FFFFFF; border-bottom: 1px solid rgba(26,16,20,0.12); }

/* Heroes get headroom and a fainter baseline */
.post-hero { padding-top: 56px !important; padding-bottom: 26px !important; border-bottom-color: rgba(26,16,20,0.05) !important; }
@media (max-width: 640px) { .post-hero { padding-top: 34px !important; padding-bottom: 18px !important; } }

/* Headlines one step lighter, body copy relaxes */
.post-title { font-weight: 800 !important; letter-spacing: -0.015em !important; }
.post-body { line-height: 1.85 !important; }

/* Cards: hairlines and feather shadows, never slabs */
.president-card { border: 1px solid rgba(26,16,20,0.10) !important; border-left: 3px solid var(--lt-pink) !important; }
.president-card .pres-photo { box-shadow: 0 18px 44px rgba(26,16,20,0.14) !important; }
.president-card .pres-name { font-weight: 800 !important; }
.leader-card { border: 1px solid rgba(26,16,20,0.12) !important; }
.leader-card:hover { box-shadow: 0 14px 36px rgba(26,16,20,0.08) !important; }
.bio-photo img { box-shadow: 0 10px 26px rgba(26,16,20,0.10) !important; }