/* =========================================================================
   INTERSTELLAR FRUIT — light theme overlay
   Loaded AFTER style.css. Flips the design system from dark to a warm
   paper palette, keeps the hairline/instrument language and the single
   signal colour. No structural changes.
   ========================================================================= */

:root {
  --ink:  #F4F2EC;   /* page base (was near-black) */
  --ink2: #ECE9E1;   /* secondary surface */
  --ink3: #E3DFD5;   /* block surface */

  --paper:  #F8F6F1;
  --paper2: #F0EDE5;

  --fg:    #14171A;
  --dim:   rgba(20, 23, 26, .68);
  --faint: rgba(20, 23, 26, .44);
  --ln:    rgba(20, 23, 26, .14);

  --sig: #C93E24;    /* signal red, tuned for contrast on light ground */
}

body { background: var(--ink); color: var(--fg); }

/* sections: both variants now light; dark becomes a soft tint band -------- */
.theme-light {
  background: var(--paper);
  color: #14171A;
  --fg: #14171A;
  --dim: rgba(20, 23, 26, .66);
  --faint: rgba(20, 23, 26, .42);
  --ln: rgba(20, 23, 26, .13);
}
.theme-dark {
  background: var(--ink2);
  color: var(--fg);
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
}

/* buttons ---------------------------------------------------------------- */
.btn--solid { background: #14171A; color: #F7F5F0; border-color: #14171A; }
.btn--solid:hover { background: var(--sig); border-color: var(--sig); color: #fff; }
.btn--ghost:hover { background: rgba(20, 23, 26, .05); border-color: #14171A; }

/* nav ------------------------------------------------------------------- */
.nav.is-stuck {
  background: rgba(244, 242, 236, .88);
  border-bottom-color: rgba(20, 23, 26, .1);
}
.burger i { background: var(--fg); }

/* hero ------------------------------------------------------------------- */
.hero { background: var(--ink); }
.hero__media img {
  filter: contrast(1.06) brightness(1.02) saturate(1.06);
}
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(244,242,236,.74) 0%, rgba(244,242,236,.26) 28%,
      rgba(244,242,236,.52) 60%, #F4F2EC 100%),
    radial-gradient(72% 58% at 82% 12%, rgba(201, 62, 36, .06), transparent 72%);
}
.hero__grid i { border-left-color: rgba(20,23,26,.06); }
.hero__grid i:last-child { border-right-color: rgba(20,23,26,.06); }
.hero__meta { color: rgba(20, 23, 26, .55); }
.hero__meta .dot { box-shadow: 0 0 0 3px rgba(201,62,36,.14); }
.hero__foot { border-top-color: rgba(20,23,26,.16); }
.hero__tags { border-top-color: rgba(20,23,26,.14); }
.hero__tags span { color: rgba(20, 23, 26, .5); }

/* ticker ----------------------------------------------------------------- */
.ticker { background: var(--ink2); border-bottom: 1px solid var(--ln); }
.ticker__row span { color: rgba(20,23,26,.5); }
.ticker__row span::after { background: rgba(20,23,26,.28); }

/* rows / markers --------------------------------------------------------- */
.prow:hover { background: rgba(20, 23, 26, .028); }
.prow__tag { color: rgba(20, 23, 26, .48); }
.prow:hover .prow__a { background: #14171A; color: #F7F5F0; border-color: #14171A; }

/* diagram (inline svg uses presentation attributes) ---------------------- */
.dg text { fill: rgba(20,23,26,.55); }
.dg text.b { fill: rgba(20,23,26,.92); }
.dg text.s { fill: #C93E24; }
.dg .ln { stroke: rgba(20,23,26,.18); }
.dg .flow { stroke: rgba(20,23,26,.72); }
.dg svg [fill="#F4F2ED"] { fill: #14171A; }
.dg svg [fill="#08090A"] { fill: #F8F6F1; }
.dg svg [stroke="#F4F2ED"] { stroke: #14171A; }

/* figures ---------------------------------------------------------------- */
.figure { background: var(--ink3); }
.figure img { filter: none; }

/* page hero -------------------------------------------------------------- */
.phero { background: var(--ink); }
.phero__bg img { filter: contrast(1.03) saturate(1.06); }
.phero__bg::after {
  background:
    linear-gradient(90deg, rgba(244,242,236,.90) 0%, rgba(244,242,236,.62) 38%, rgba(244,242,236,.10) 76%, rgba(244,242,236,.04) 100%),
    linear-gradient(180deg, rgba(244,242,236,.22), rgba(244,242,236,.04) 45%, rgba(244,242,236,.52));
}
.phero--grid {
  background:
    repeating-linear-gradient(90deg, rgba(20,23,26,.05) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgba(20,23,26,.04) 0 1px, transparent 1px 76px),
    radial-gradient(70% 90% at 80% 16%, rgba(201,62,36,.06), transparent 68%),
    var(--ink);
}

/* cta -------------------------------------------------------------------- */
.cta { background: var(--ink2); border-top: 1px solid var(--ln); }
/* no photo here on purpose: the CTA repeats on every page and a shared
   image would duplicate the hero photography of interior pages */
.cta__bg {
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(201, 62, 36, .06), transparent 70%),
    repeating-linear-gradient(90deg, rgba(20,23,26,.05) 0 1px, transparent 1px 9%);
  opacity: 1;
}

/* footer ----------------------------------------------------------------- */
.foot { background: var(--ink3); border-top: 1px solid var(--ln); }
.foot__top { border-bottom-color: var(--ln); }
.foot h3 { color: rgba(20,23,26,.5); }
.foot__bottom { color: rgba(20,23,26,.42); }

/* forms ------------------------------------------------------------------ */
.fld label { color: rgba(20,18,21,.58); }
.fld input, .fld select, .fld textarea { color: var(--fg); }
.fld select option { background: #F8F6F1; color: #14171A; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(20,23,26,.32); }

/* ====================== IMAGE COMPONENTS (new) ========================== */
/* leadership block: portrait + name + role */
.leader {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  border-top: 1px solid var(--ln);
  margin-top: clamp(30px, 3.8vw, 52px);
  padding-top: clamp(26px, 3.2vw, 44px);
  padding-bottom: clamp(6px, 1.2vw, 14px);
}
.leader__p { overflow: hidden; background: var(--ink3); aspect-ratio: 4 / 5; }
.leader__p img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  display: block;
}
.leader__b h3 { font-size: clamp(21px, 1.9vw, 27px); font-weight: 600; letter-spacing: -.018em; }
.leader__role {
  display: block;
  margin: 10px 0 18px;
  color: var(--faint);
  letter-spacing: .16em;
}
.leader__b p { color: var(--dim); font-size: 15.5px; line-height: 1.75; max-width: 52ch; }
.leader__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ln);
}
.leader__creds span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--ln);
  line-height: 1.4;
}
.leader__creds span:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
@media (max-width: 860px) {
  .leader { grid-template-columns: 1fr; }
  .leader__p { max-width: 260px; }
}

/* full-bleed image band with caption grid */
.imgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(26px, 3.4vw, 44px);
}
.imgrid figure { position: relative; overflow: hidden; background: var(--ink3); }
.imgrid img {
  width: 100%;
  height: clamp(220px, 26vw, 360px);
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.imgrid figure:hover img { transform: scale(1.04); }
.imgrid figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.6;
}
.imgrid--2 { grid-template-columns: repeat(2, 1fr); }
.imgrid--lead { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.imgrid--lead img { height: clamp(260px, 32vw, 440px); }

/* wide side image used inside splits */
.figure--wide img { height: clamp(260px, 30vw, 420px); }

/* media strip: image + short copy side by side */
.mediaband {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(26px, 3.4vw, 48px);
}
.mediaband figure { overflow: hidden; background: var(--ink3); }
.mediaband img { width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover; }
.mediaband__b p { color: var(--dim); font-size: 15.5px; line-height: 1.75; margin-bottom: 16px; max-width: 46ch; }
.mediaband__b p:last-child { margin-bottom: 0; }
.mediaband__b .mono { display: block; color: var(--faint); margin-bottom: 14px; }

@media (max-width: 860px) {
  .imgrid, .imgrid--2, .imgrid--lead { grid-template-columns: 1fr 1fr; }
  .imgrid--lead { grid-template-columns: 1fr; }
  .mediaband { grid-template-columns: 1fr; }
  .imgrid img, .mediaband img { height: 220px; }
}
@media (max-width: 560px) {
  .imgrid, .imgrid--2 { grid-template-columns: 1fr; }
}