/* "Into the Light" — the curated Story layer of /photos/.
   A deliberately single-world darkened theatre: every colour is painted
   explicitly here so the section holds its own look inside the light site
   chrome (white nav above, footer below). All rules are scoped to
   .into-the-light so nothing leaks to the rest of the site. */

.into-the-light {
  --stage: #0c0c10;
  --stage-2: #141319;
  --panel: #17161d;
  --edge: #2a2833;
  --white: #f3eee4;
  --soft: #b7b0a2;
  --faint: #726c60;
  --gold: #e3bd76;
  --gold-dim: #8a713f;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  width: 100%;
  background: var(--stage);
  background-image: radial-gradient(120% 80% at 50% -6%, #1b1a22 0%, var(--stage) 55%);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.into-the-light *{ box-sizing: border-box; }

/* Hero */
.itl-hero{
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px,6vw,72px); position: relative; overflow: hidden; text-align: center;
}
.itl-hero::after{
  content: ""; position: absolute; left: 50%; top: -6%;
  width: min(760px,88vw); height: 520px; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(227,189,118,.16), transparent 70%);
  filter: blur(6px);
}
.itl-kicker{
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 26px; font-weight: 600;
}
.into-the-light .itl-title{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(46px,10vw,116px); line-height: .94; letter-spacing: .005em;
  margin: 0; color: var(--white); text-wrap: balance;
}
.itl-hero .itl-lede{
  font-family: var(--serif); font-style: italic; color: var(--soft);
  font-size: clamp(18px,2.6vw,25px); max-width: 26em; margin: 26px auto 0;
}
.itl-names{
  display: flex; gap: 10px 30px; justify-content: center; flex-wrap: wrap;
  margin-top: 38px; color: var(--faint); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase;
}
.itl-names b{ color: var(--soft); font-weight: 600; }

.itl-begin{
  margin: 44px auto 0; color: var(--faint);
  font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  display: inline-flex; gap: 10px; align-items: center;
  background: none; border: 0; cursor: pointer; transition: color .3s ease;
}
.itl-begin:hover, .itl-begin:focus-visible{ color: var(--soft); }
.itl-begin:focus-visible{ outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 4px; }
.itl-begin::after{ content: "\2192"; color: var(--gold); font-size: 16px; }
@media (prefers-reduced-motion: no-preference){
  .itl-begin::after{ animation: itl-nudge 1.8s ease-in-out infinite; }
  @keyframes itl-nudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }
}

/* Filmstrip + hover-reveal navigation arrows */
.itl-stage{ position: relative; }
.itl-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--edge); background: rgba(20,19,25,.66);
  color: var(--gold); font-family: var(--serif); font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.itl-prev{ left: clamp(8px,2vw,24px); }
.itl-next{ right: clamp(8px,2vw,24px); }
/* Reveal on hover of the stage, or when an arrow takes keyboard focus */
.itl-stage:hover .itl-nav,
.itl-stage:focus-within .itl-nav{ opacity: 1; }
.itl-nav:hover{ background: rgba(36,34,45,.92); }
.itl-nav:active{ transform: translateY(-50%) scale(.94); }
.itl-nav:focus-visible{ opacity: 1; outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: none){ .itl-nav{ display: none; } }   /* touch: native swipe + tap */

.itl-strip{
  display: flex; gap: clamp(20px,3vw,42px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: clamp(24px,4vw,54px) clamp(18px,6vw,72px) clamp(40px,6vw,80px);
  scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
}
.itl-strip::-webkit-scrollbar{ height: 8px; }
.itl-strip::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 8px; }

.itl-act{
  scroll-snap-align: center; flex: 0 0 min(78vw,600px);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .6s ease;
}
.itl-strip.playing .itl-act:not(.current),
.itl-strip.playing .itl-curtain:not(.current){ opacity: .42; }

.itl-yr{
  font-family: var(--serif); color: var(--gold);
  font-size: clamp(30px,5vw,52px); line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.itl-lbl{
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin: 0 0 10px;
}
.into-the-light .itl-act h2,
.into-the-light .itl-curtain h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px,3.6vw,38px); margin: 0 0 12px; line-height: 1.12;
  color: var(--white); text-wrap: balance;
}
.into-the-light .itl-act h2 em{ font-style: italic; }
.itl-body{ color: var(--soft); margin: 0; max-width: 34em; font-size: 15.5px; }

.itl-spot{
  position: relative; margin: 0 0 22px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px var(--edge); background: #000;
}
.itl-spot img{ display: block; width: 100%; height: auto; }
.itl-spot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 35%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.itl-spot figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 34px 20px 15px; font-size: 12.5px; font-style: italic; color: var(--soft);
  background: linear-gradient(transparent, rgba(6,6,9,.9)); line-height: 1.4;
}

.itl-card{
  background: var(--panel); border: 1px solid var(--edge); border-radius: 10px;
  padding: clamp(24px,3vw,40px); box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.itl-curtain{
  flex: 0 0 min(78vw,560px); scroll-snap-align: center;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.itl-rule{ width: 52px; height: 2px; background: var(--gold); margin: 0 auto 26px; }
.itl-life{ color: var(--soft); font-size: 15px; margin: 2px 0; }
.itl-life b{ color: var(--white); font-weight: 600; }
.itl-close{ font-family: var(--serif); font-style: italic; color: var(--gold); margin-top: 26px; font-size: 19px; }

@media (max-width: 640px){
  .itl-strip{
    flex-direction: column; overflow-x: visible; scroll-snap-type: none;
    padding-inline: clamp(18px,6vw,30px);
  }
  .itl-act, .itl-curtain{ flex-basis: auto; }
  .itl-begin::after{ content: "\2193"; }
}