/* =============================================================
   Women's Innocence Clinic — black-and-white layer, Sept. 23, 2026
   Loaded after each inner page's own styles. Turns the page dark,
   puts a black-and-white photograph behind the hero, and styles
   the photo band and the shared footer.
   ============================================================= */

body[data-theme="dark"] {
  --bg: #0b0b0b;
  --fg: #f5f3ec;
  --fg-muted: #b3b1aa;
  --fg-faint: #6f6d67;
  --rule: rgba(245,243,236,.16);
  --rule-soft: rgba(245,243,236,.08);
  background: #0b0b0b;
  color: #f5f3ec;
}
:root { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }

/* ---------- HERO with photograph ---------- */
.hero.bw-hero {
  position: relative;
  overflow: hidden;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;

  padding: 140px var(--gutter) clamp(56px, 10vh, 110px) var(--edge);
  background: #0b0b0b;
}
.bw-hero > .bw-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 65% 30%);
  animation: bw-drift 24s ease-out both;
}
@keyframes bw-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.bw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,11,11,.94) 0%, rgba(11,11,11,.76) 40%, rgba(11,11,11,.15) 72%, rgba(11,11,11,.3) 100%),
    linear-gradient(0deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,0) 45%);
}
.bw-hero > *:not(.bw-photo) { position: relative; z-index: 2; }
.bw-hero .hero-frame { max-width: 860px; width: 100%; }
.bw-hero .hero-title { font-size: clamp(56px, 8.4vw, 132px); margin-bottom: 32px; }
.bw-hero .hero-sub { color: #e2e0d8; }
.bw-hero .hero-tag { color: #cfcdc5; }

/* The Problem uses a centered hero; left-align it over the photo */
.bw-hero .hero-eyebrow { position: static; margin-bottom: 26px; color: #cfcdc5; }
.bw-hero.bw-stack { flex-direction: column; justify-content: flex-end; align-items: flex-start; }

.bw-hero .hero-line { text-align: left; margin: 0; max-width: 14ch; font-size: clamp(48px, 7.6vw, 116px); }
.bw-hero.bw-stack .hero-sub { text-align: left; margin: 30px 0 0; color: #e2e0d8; font-size: 18px; max-width: 46ch; }

/* ---------- PHOTO BAND ---------- */
.bw-band {
  position: relative; overflow: hidden;
  min-height: 86vh;
  display: flex; align-items: center;
  background: #0b0b0b;
}
.bw-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 70% 35%);
}
.bw-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,11,.95) 0%, rgba(11,11,11,.78) 42%, rgba(11,11,11,.08) 78%);
}
.bw-band-copy { position: relative; z-index: 2; padding: 90px var(--gutter) 90px var(--edge); max-width: calc(var(--edge) + 720px); }
.bw-band .bw-eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #b9b7b0; font-weight: 500;
}
.bw-band-line {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.02em;
  margin-top: 20px; color: #f5f3ec;
}
.bw-band-line i { color: #b9b7b0; }
.bw-band-sub { margin-top: 26px; font-size: 19px; line-height: 1.65; color: #dedcd4; max-width: 480px; }

/* ---------- FOOTER ---------- */
@media (prefers-reduced-motion: reduce) { .bw-hero > .bw-photo { animation: none; } }
.foot { border-top: 1px solid var(--rule); padding: 56px 0 44px; background: #0b0b0b; color: #f5f3ec; }
.foot .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.foot-mark { font-family: 'EB Garamond', Georgia, serif; font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; }
.foot-mark b { font-weight: 600; }
.foot-mark i { color: #8f8d86; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font-size: 13.5px; color: #a9a7a0; }
.foot-meta .sp { flex: 1; }
.foot-meta a:hover { color: #f5f3ec; }
.foot-note { margin-top: 22px; font-size: 12.5px; color: #8a8882; max-width: 760px; line-height: 1.6; }

/* ---------- Buttons in the dark theme ---------- */
body[data-theme="dark"] .btn-primary { background: #f5f3ec; color: #0b0b0b; border-color: #f5f3ec; }
body[data-theme="dark"] .btn-primary:hover { background: transparent; color: #f5f3ec; }


@media (max-width: 760px) {
  .hero.bw-hero { padding-top: 46vh; min-height: 100svh; }
  .bw-hero > .bw-photo { object-position: var(--pos-m, 60% 18%); }
  .bw-hero::after { background: linear-gradient(0deg, rgba(11,11,11,.97) 0%, rgba(11,11,11,.86) 48%, rgba(11,11,11,.2) 82%); }
  .bw-hero .hero-title { font-size: clamp(48px, 13vw, 72px); }
  .bw-band { min-height: 100svh; align-items: flex-end; }
  .bw-band::after { background: linear-gradient(0deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.8) 52%, rgba(11,11,11,.12) 86%); }
  .bw-band-copy { padding: 56px var(--gutter); }
}

/* Resources: keep the last timeline label inside the page */
.timebar-mark:last-child .timebar-label { left: auto; right: -6px; transform: none; text-align: right; }
.timebar-mark:first-child .timebar-label { left: -6px; transform: none; }

/* ---------- Hard-hitting heroes, Sept. 23, 2026 ---------- */
.hero.bw-hero { min-height: 100svh; }
.bw-hero .hero-frame { max-width: 1000px; }
.bw-hero .hero-title, .bw-hero .hero-line {
  font-size: clamp(60px, 9.4vw, 150px); line-height: .94; letter-spacing: -.035em; margin: 0; max-width: 12ch;
}
.bw-hero .hero-sub, .bw-hero.bw-stack .hero-sub {
  font-family: 'Geist', system-ui, sans-serif; font-style: normal;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; color: #e6e4dc;
  margin: 30px 0 0; max-width: 34ch; text-align: left;
}
.bw-hero .hero-sub b { font-weight: 500; color: #fff; }

/* Contact details that used to sit inside the hero */
.bw-contact { border-bottom: 1px solid var(--rule); }
.bw-contact-wrap { max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter); }
.bw-contact .lines, .bw-contact .hero-contact { margin-top: 0; }
@media (max-width: 760px) {
  .bw-hero .hero-title, .bw-hero .hero-line { font-size: clamp(52px, 15vw, 76px); }
  .hero.bw-hero { padding-top: 52vh; }
}

.hero.bw-hero { align-items: flex-end; }
.hero.bw-hero.bw-stack { align-items: flex-start; }

/* Legislation — Act 07 list */
.act-list { margin: 14px 0 0; padding-left: 22px; color: var(--fg); }
.act-list li { margin-bottom: 12px; line-height: 1.6; color: #d6d4cc; }
.act-list li b { color: var(--fg); font-weight: 500; }
.act-ref .body a { border-bottom: 1px solid #55534e; }
#first-priority { border-bottom: 1px solid var(--rule); }

/* Lighter photo treatment (Contact, Resources) */
.bw-hero.bw-light > .bw-photo, .bw-band.bw-light > img { filter: brightness(var(--lift, 1.3)) contrast(1.04); }
.bw-hero.bw-light::after {
  background:
    linear-gradient(90deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.25) 38%, rgba(11,11,11,0) 65%),
    linear-gradient(0deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 26%, rgba(11,11,11,0) 55%);
}
.bw-band.bw-light::after { background: linear-gradient(90deg, rgba(11,11,11,.94) 0%, rgba(11,11,11,.72) 42%, rgba(11,11,11,0) 74%); }
@media (max-width: 760px) {
  .bw-hero.bw-light::after { background: linear-gradient(0deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.75) 45%, rgba(11,11,11,0) 78%); }
  .bw-band.bw-light::after { background: linear-gradient(0deg, rgba(11,11,11,.95) 0%, rgba(11,11,11,.7) 50%, rgba(11,11,11,0) 84%); }
}