/* ─────────────────────────────────────────────────────────────────
   THEME — SE × BOI Option 3B
   Theme overrides layered on styles.css, plus the responsive rules
   for the JS-built sections (script.js injects their layout css
   through a flat scoper that cannot carry @media blocks).
   ───────────────────────────────────────────────────────────────── */

/* ── Sector Deep Dive themes ──
   #industries is 260vh tall to give the accordion a sticky scrub track.
   The pinned-rail layout brings its own track (.sd-pin-track), so the
   section takes that height instead. Layout CSS comes from
   sector-layouts.js, injected and gated by theme in script.js. */
[data-theme="editorial-boi-3b"] #industries {
  height: auto;
}

/* ── Option 3B glyph-field hero canvas (the M4 motion study,
      promoted 2026-07-30) — sim in variations.js (HERO_GLYPH_FIELD),
      loop in script.js ── */
#glyph-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}

[data-theme="editorial-boi-3b"] #glyph-field { opacity: 1; }
/* The hero's horizontal hairlines go invisible — but NOT display:none:
   .hero-row-line is a flex child of .hero-inner's space-between column,
   so it must stay in layout or the headline/sub rhythm collapses */
[data-theme="editorial-boi-3b"] .hero-row-line { background: transparent; }
[data-theme="editorial-boi-3b"] .hero-sub-row { border-top-color: transparent; }
[data-theme="editorial-boi-3b"] #hero { border-bottom-color: transparent; }

/* ─────────────────────────────────────────────────────────────────
   THEME 3 · SOFT EDITORIAL — Typographic × Luxe
   ───────────────────────────────────────────────────────────────── */
[data-theme="editorial-boi-3b"] {
  --bg:          #F2EDE4;
  --bg-raised:   #EDE7DC;
  --bg-raised-2: #E3DDD4;
  --border:      rgba(26,22,20,.07);
  --border-hard: rgba(26,22,20,.2);
  --text:        #1A1614;
  --text-2:      #4A403A;
  --text-3:      #A8998E;
  --accent:      #8B6B4A;
}

/* :not(.over-dark) so the glass treatment in styles.css can take over when
   the bar is sitting on a dark section */
[data-theme="editorial-boi-3b"] #nav.scrolled:not(.over-dark) { background: rgba(242,237,228,.94); }

[data-theme="editorial-boi-3b"] .hero-headline {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 82px);
  letter-spacing: -.01em;
  line-height: .92;
}

[data-theme="editorial-boi-3b"] .hero-headline .serif-italic {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 88px);
  letter-spacing: .005em;
}

[data-theme="editorial-boi-3b"] .thesis-statement h2,
[data-theme="editorial-boi-3b"] .section-title,
[data-theme="editorial-boi-3b"] .panel-body h3,
[data-theme="editorial-boi-3b"] .case-meta h3,
[data-theme="editorial-boi-3b"] .member-meta h4,
[data-theme="editorial-boi-3b"] .contact-left h2 { font-family: 'EB Garamond', Georgia, serif; }

[data-theme="editorial-boi-3b"] .thesis-statement h2 { font-weight: 400; }
[data-theme="editorial-boi-3b"] .section-title { font-weight: 400; }

/* Client quote picks up the serif voice on the editorial themes */
[data-theme="editorial-boi-3b"] .who-quote blockquote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(25px, 2.5vw, 40px);
  letter-spacing: 0;
  line-height: 1.28;
}

[data-theme="editorial-boi-3b"] .who-quote::before {
  font-family: 'EB Garamond', Georgia, serif;
}

/* Portrait placeholder hatches ink-on-cream like the contact members */
[data-theme="editorial-boi-3b"] .who-quote-img {
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(26,22,20,.05) 8px, rgba(26,22,20,.05) 9px
  );
}

[data-theme="editorial-boi-3b"] .industry-panel[data-index="01"] .panel-bg { background: #EBE5DC; }
[data-theme="editorial-boi-3b"] .industry-panel[data-index="02"] .panel-bg { background: #E8E2D8; }
[data-theme="editorial-boi-3b"] .industry-panel[data-index="03"] .panel-bg { background: #EAE4DA; }
[data-theme="editorial-boi-3b"] .industry-panel[data-index="04"] .panel-bg { background: #E5DFD6; }
[data-theme="editorial-boi-3b"] .panel-bg-text { color: rgba(26,22,20,.05); }

/* Accordion — stays dark in every theme: deep overlay + light ink, independent of theme vars */
[data-theme="editorial-boi-3b"] .acc-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
}

.acc-item::before {
  background: rgba(8,8,8,.88);
}

.acc-item.open::before {
  background: rgba(8,8,8,.72);
}

.acc-item:not(.open):hover::before {
  background: rgba(8,8,8,.8);
}

.acc-item { border-right-color: rgba(255,255,255,.16); }

.acc-n { color: rgba(240,236,230,.45); }

.acc-v-title { color: rgba(240,236,230,.8); }

.acc-title { color: #F0ECE6; }

.acc-inner p {
  color: rgba(240,236,230,.82);
  text-shadow: 0 1px 12px rgba(8,8,8,.6);
}

.acc-expanded .label { color: rgba(240,236,230,.55); }

.acc-expanded .panel-tags li {
  color: rgba(240,236,230,.8);
  border-color: rgba(255,255,255,.28);
  background: rgba(8,8,8,.45);
}

.acc-expanded .panel-tags li:hover {
  border-color: rgba(255,255,255,.5);
  color: #F0ECE6;
}

[data-theme="editorial-boi-3b"] .case-img { background: var(--bg-raised-2); }
[data-theme="editorial-boi-3b"] .case-img::after { display: none; }
[data-theme="editorial-boi-3b"] .member-img { background: var(--bg-raised-2); }
[data-theme="editorial-boi-3b"] .member-img::before {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(26,22,20,.025) 20px, rgba(26,22,20,.025) 21px);
}

/* ── Editorial work section ── */
.work-desc { display: none; }

/* Today's Impact breathes wider than the other sections — the four
   open columns need air around them to read as a broadsheet spread
   rather than a dense block. */
[data-theme="editorial-boi-3b"] #work {
  padding-bottom: clamp(90px, 15vh, 180px);
}

[data-theme="editorial-boi-3b"] .work-header {
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
  padding-top: clamp(85px, 14vh, 170px);
  padding-bottom: clamp(110px, 17vh, 220px);
  align-items: center;
  text-align: center;
}

[data-theme="editorial-boi-3b"] .work-desc {
  display: block;
  max-width: 520px;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--text-2);
  line-height: 1.8;
}

/* ── Editorial contact section with team portraits ── */
[data-theme="editorial-boi-3b"] #team {
  border-bottom-color: var(--border-hard);
}

[data-theme="editorial-boi-3b"] .contact-block {
  padding: clamp(60px, 8vh, 100px) clamp(20px, 4vw, 64px);
}

[data-theme="editorial-boi-3b"] .contact-team {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

[data-theme="editorial-boi-3b"] .contact-member {
  display: flex;
  align-items: center;
  gap: 20px;
}

[data-theme="editorial-boi-3b"] .contact-member-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-raised-2);
  flex-shrink: 0;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(26,22,20,.04) 8px, rgba(26,22,20,.04) 9px
  );
}

[data-theme="editorial-boi-3b"] .contact-member-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-theme="editorial-boi-3b"] .contact-member-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--text);
}

[data-theme="editorial-boi-3b"] .contact-member-role {
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-3);
}

[data-theme="editorial-boi-3b"] .contact-member-email {
  font-size: .78rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-hard);
  width: fit-content;
  transition: color .2s, border-color .2s;
}

[data-theme="editorial-boi-3b"] .contact-member-email:hover {
  color: var(--text);
  border-color: var(--text);
}

[data-theme="editorial-boi-3b"] .contact-left h2,
[data-theme="editorial-boi-3b"] .contact-left h2 em {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
}

[data-theme="editorial-boi-3b"] .btn-submit { background: var(--text); color: var(--bg); }
[data-theme="editorial-boi-3b"] .btn-submit:hover { background: #fff; }

/* The contact block runs dark — the editorial ink-on-cream accents need flipping */
[data-theme="editorial-boi-3b"] .contact-member-img {
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(255,255,255,.05) 8px, rgba(255,255,255,.05) 9px
  );
}
[data-theme="editorial-boi-3b"] .contact-form input,
[data-theme="editorial-boi-3b"] .contact-form textarea { background: var(--bg-raised); border-color: var(--border-hard); }
[data-theme="editorial-boi-3b"] .scroll-line { background: var(--text-2); }
[data-theme="editorial-boi-3b"] .marquee-track span { color: var(--text-3); }

/* ─────────────────────────────────────────────────────────────────
   MOBILE — Option 3B layouts
   The theme's layout css is injected through a flat scoper that
   can't carry @media blocks (script.js prefixCss), so the responsive
   rules for the built sections live here. The extra `body` in the
   selectors outranks the injected html[data-theme] rules.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Broadsheet impact columns: 4-up → 2×2 */
  html[data-theme="editorial-boi-3b"] body .imp-cols {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  html[data-theme="editorial-boi-3b"] body .imp-col:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }
  html[data-theme="editorial-boi-3b"] body .imp-col:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  /* Manifesto portrait rail: photo stacks above the text */
  html[data-theme="editorial-boi-3b"] body .thesis-body {
    grid-template-columns: 1fr;
  }
  html[data-theme="editorial-boi-3b"] body .thm-rail-fig .img-frame {
    min-height: 0;
    height: clamp(220px, 40vw, 360px);
    flex: none;
  }

  /* Blue sector card: rail above the panels, panels single-column */
  html[data-theme="editorial-boi-3b"] body .sd-rail-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  html[data-theme="editorial-boi-3b"] body .sd-rail {
    flex-direction: row;
    gap: 20px;
  }
  html[data-theme="editorial-boi-3b"] body .sd-rail-item {
    flex: 1;
    padding: 10px 0 10px 14px;
  }
  html[data-theme="editorial-boi-3b"] body .sd-panel-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  html[data-theme="editorial-boi-3b"] body .sd-panel .sd-title {
    font-size: 1.7rem;
  }
  html[data-theme="editorial-boi-3b"] body .boi-stat-band {
    padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 40px);
  }

  /* Paper-ledger contact: single column, form under the leads */
  html[data-theme="editorial-boi-3b"] body .cl-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  /* Broadsheet impact columns: single column, hairlines horizontal */
  html[data-theme="editorial-boi-3b"] body .imp-cols {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  html[data-theme="editorial-boi-3b"] body .imp-col {
    padding: 0;
    border-left: none !important;
  }
  html[data-theme="editorial-boi-3b"] body .imp-col h3 { max-width: none; }
}