/* October 15: a focused refinement of In Her Light. */
:root {
  --film-inset: clamp(24px, 5vw, 100px);
  --film-space: clamp(72px, 8vw, 120px);
  --film-muted: #d4cfc5;
  --film-warm-muted: #625c52;
}
body:has(.film-header) { --film-inset: clamp(24px, 5vw, 100px); }
section[id], main { scroll-margin-top: 106px; }
a.action { display: inline-flex; text-decoration: none; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.film-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  min-height: 136px;
  padding: 22px var(--film-inset);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .2s, padding .2s, min-height .2s;
}
.film-logo { width: 110px; height: 91px; transition: width .2s, height .2s; }
.film-header.is-scrolled,
.film-header:has(.film-links.open) {
  min-height: 84px;
  padding-block: 10px;
  background: var(--ink);
  border-bottom-color: #f6f1e726;
}
.film-header.is-scrolled .film-logo { width: 76px; height: 63px; }
.film-header nav, .film-links { gap: clamp(20px, 2.1vw, 32px); }
.film-header nav a, .film-header button { font-size: 15px; }
.film-header nav a { min-width: 44px; }
.film-header nav a:not(.action):hover,
.film-header nav a:not(.action):focus-visible { text-decoration: underline; }
.film-header .action:hover { background: var(--paper); }
.film-cover { min-height: 720px; height: 100svh; }
.film-cover::after {
  background: linear-gradient(180deg, transparent 72%, #20232899),
    linear-gradient(90deg, #202328b0 0%, #20232822 62%, transparent 100%);
}
.cover-copy { top: 30%; left: var(--film-inset); right: 36%; }
.cover-copy h1 { font-size: clamp(82px, 8.8vw, 150px); }
.cover-copy p { font-size: 18px; max-width: 390px; margin-top: 28px; }
.cover-bottom { left: var(--film-inset); right: var(--film-inset); bottom: 32px; }
.cover-bottom a { min-height: 44px; }
.film-intro { padding: var(--film-space) 12%; }
.film-intro p { font-size: 17px; }
.film-scene {
  height: 90svh;
  min-height: 680px;
  padding: 72px var(--film-inset);
}
.scene-position { left: var(--film-inset); }
.scene-copy { gap: 8%; }
.scene-copy h2 { font-size: clamp(72px, 8vw, 128px); }
.scene-copy p { font-size: 17px; }
.film-scene .choice-heading { font-size: clamp(60px, 7.1vw, 112px); }
.thought-line { white-space: normal; }
.film-letter {
  padding: var(--film-space) var(--film-inset);
  background: var(--cream);
  color: var(--ink);
  column-gap: 5%;
  row-gap: 64px;
}
.letter-heading > span, .letter-body p { color: var(--film-warm-muted); }
.letter-body p { font-size: 17px; }
.founder-portrait { max-height: 420px; }
.client-voice {
  grid-column: 1 / -1;
  padding: 56px 0 0;
  border-top: 1px solid #c9c0b2;
  text-align: center;
}
.client-voice .voice-label {
  font: 600 12px/1.5 Karla, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 auto 22px;
  color: var(--film-warm-muted);
}
.client-voice blockquote { max-width: 850px; margin: auto; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.14; }
.client-voice figcaption { font-size: 14px; margin-top: 24px; color: var(--film-warm-muted); }
.film-impact { padding: var(--film-space) var(--film-inset); }
.impact-aside p { font-size: 17px; }
.film-giving { padding: var(--film-space) var(--film-inset); }
.giving-opening { margin-bottom: 56px; }
.film-paths p { font-size: 16px; }
.film-paths article { display: flex; flex-direction: column; align-items: flex-start; }
.film-paths .text-action { margin-top: auto; }
.film-support { padding: var(--film-space) var(--film-inset); background: #eae2d4; }
.film-support p { font-size: 16px; }
.film-support h3 { font-weight: 600; }
.film-footer { padding: 64px var(--film-inset) 26px; }
.film-footer nav a { display: flex; align-items: center; min-height: 44px; }
.film-footer .newsletter-title { font: 500 29px/1.15 Cormorant, Georgia, serif; margin-bottom: 23px; }
.newsletter-status { font-size: 14px; color: var(--film-muted); margin-top: 12px; }
.newsletter-status:empty { display: none; }
.film-values { font-size: 14px; padding-top: 44px; }
/* Without JavaScript all navigation remains available in normal flow. */
body:not(.js) .film-header { position: relative; background: var(--ink); }
body:not(.js) .film-links { display: flex; }
body:not(.js) .film-header .menu-toggle { display: none; }
@media (max-width: 1100px) {
  .film-header nav, .film-links { gap: 20px; }
  .film-header { gap: 24px; }
  .cover-copy { right: 28%; }
  .film-letter { row-gap: 40px; }
}
@media (max-width: 850px) {
  .film-header { min-height: 104px; padding-block: 14px; gap: 20px; }
  .film-logo { width: 86px; height: 71px; }
  .film-header.is-scrolled { min-height: 84px; }
  .film-header.is-scrolled .film-logo { width: 72px; height: 60px; }
  .film-header .menu-toggle { display: block; min-width: 44px; padding: 10px 4px; }
  .film-links { display: none; }
  .film-links.open {
    position: absolute;
    inset: 100% 0 auto;
    border: 0;
    border-bottom: 1px solid #f6f1e733;
    padding: 12px var(--film-inset) 24px;
    gap: 4px;
    background: var(--ink);
    max-height: calc(100svh - 104px);
    overflow-y: auto;
  }
  .film-links.open a { width: 100%; font-size: 20px; padding: 10px 0; }
  .film-cover { min-height: 700px; }
  .cover-copy { top: 30%; right: 20%; }
  .cover-copy h1 { font-size: clamp(76px, 11vw, 98px); }
  .film-intro { padding: 88px var(--film-inset); }
  .film-intro h2 { font-size: 60px; }
  .film-scene { min-height: 650px; height: 82svh; padding: 60px var(--film-inset); }
  .scene-copy h2 { font-size: 88px; }
  .film-scene .choice-heading { font-size: clamp(52px, 9vw, 76px); }
  .film-letter { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px 6%; }
  .letter-heading { grid-column: 1 / -1; }
  .letter-heading h2 { font-size: 64px; }
  .letter-body { margin: 0; }
  .letter-body blockquote { font-size: 35px; }
  .founder-portrait { max-height: 420px; }
  .client-voice { margin-top: 12px; padding-top: 40px; }
  .film-footer-top { gap: 40px; }
}
@media (max-width: 520px) {
  section[id], main { scroll-margin-top: 90px; }
  .film-header, .film-header.is-scrolled { min-height: 88px; padding-block: 12px; gap: 12px; }
  .film-logo, .film-header.is-scrolled .film-logo { width: 74px; height: 61px; }
  .film-header nav { gap: 12px; }
  .film-header nav a, .film-header .menu-toggle { font-size: 13px; }
  .film-header .action { min-height: 44px; padding: 10px 14px; }
  .film-header .header-support { width: 46px; line-height: 1.15; }
  .film-cover { min-height: 650px; height: 100svh; }
  .film-cover::after {
    background: linear-gradient(0deg, #202328f0 0%, #20232899 48%, #20232810 100%);
  }
  .cover-copy { top: auto; right: var(--film-inset); bottom: 116px; }
  .cover-copy h1 { font-size: clamp(52px, 15.8vw, 80px); }
  .cover-copy p { font-size: 16px; max-width: 340px; line-height: 1.55; margin-top: 24px; }
  .cover-bottom { bottom: 28px; gap: 16px; }
  .cover-bottom a { font-size: 13px; }
  .cover-bottom > span { font-size: 11px; max-width: 90px; }
  .cover-photo img { object-position: 70% center; }
  .film-intro { padding: 64px var(--film-inset); }
  .film-intro h2 { font-size: clamp(38px, 10vw, 48px); }
  .film-intro p { font-size: 16px; }
  .film-scene { min-height: 580px; height: 78svh; padding: 44px var(--film-inset); }
  .scene-position { top: 26px; font-size: 12px; }
  .scene-copy h2 { font-size: clamp(54px, 15vw, 76px); margin-bottom: 20px; }
  .scene-copy p { font-size: 16px; line-height: 1.6; }
  .film-scene .choice-heading { font-size: clamp(38px, 10vw, 52px); line-height: 1.08; }
  .film-letter { display: flex; flex-direction: column; gap: 28px; }
  .letter-heading h2 { font-size: 55px; }
  .letter-heading h2 br { display: initial; }
  .letter-heading > span { font-size: 14px; }
  .founder-portrait { width: min(100%, 340px); aspect-ratio: 4/5; max-height: 390px; }
  .letter-body p { font-size: 16px; }
  .client-voice { margin-top: 12px; text-align: left; }
  .client-voice .voice-label { margin-left: 0; }
  .client-voice blockquote { font-size: 35px; }
  .client-voice figcaption { margin-top: 20px; }
  .film-impact h2 { font-size: clamp(42px, 10.8vw, 57px); }
  .impact-aside p { font-size: 16px; }
  .giving-opening { margin-bottom: 40px; }
  .giving-opening h2 { font-size: 62px; }
  .giving-opening p { font-size: 16px; }
  .film-paths { gap: 32px; }
  .film-paths h3 { font-size: 34px; }
  .film-support h2 { font-size: 55px; }
  .film-support h3 { font-size: 21px; }
  .film-footer { padding-top: 48px; }
  .film-footer nav { font-size: 14px; gap: 4px 24px; }
  .film-footer img { width: 86px; height: 74px; }
}
@media (max-width: 360px) {
  body:has(.film-header) { --film-inset: 20px; }
  .film-header, .film-header.is-scrolled { gap: 8px; }
  .film-logo, .film-header.is-scrolled .film-logo { width: 62px; height: 54px; }
  .film-header nav { gap: 8px; }
  .film-header .action { padding-inline: 11px; }
  .cover-copy h1 { font-size: 48px; }
  .cover-bottom > span { display: none; }
  .film-footer nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .film-header, .film-logo { transition: none; }
}