<section class="tl4-wrap">
  <header class="tl4-head">
    <div class="tl4-overline">A Production Diary · Calendar Year MMXXV</div>
    <h2 class="tl4-title">The Last <strong>Lighthouse</strong></h2>
    <div class="tl4-credits">Dir. Helena Vance · Prod. Auteur Pictures · 35mm</div>
  </header>

  <div class="tl4-reel">
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">I</div>
        <div class="tl4-num-lbl">Dev</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Development</strong>
          The script arrives in seventeen drafts, each <em>quieter</em> than the last.
        </div>
        <div class="tl4-slate">FEB 2024 — SEP 2024 · 7 months</div>
      </div>
      <div class="tl4-notes">
        <p>Vance options the Carrigan novella in February. By May, the first treatment removes nearly all dialogue from Act II. Greenlit at $4.2M.</p>
        <div class="tl4-director">"I want it to feel like the audience is also a guest at the lighthouse, unsure if they should be there." — H.V., production notes</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">II</div>
        <div class="tl4-num-lbl">Pre</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Pre-production</strong>
          A coastline is chosen for its <em>refusal to behave</em>.
        </div>
        <div class="tl4-slate">OCT 2024 — JAN 2025 · 4 months</div>
      </div>
      <div class="tl4-notes">
        <p>Location scouting along the Orkney archipelago. Eilean Mòr cleared with Trust for Scotland after three rejections. Cast: McTavish, Okwukwe, Andersson.</p>
        <div class="tl4-director">"The lighthouse keeps its own counsel. We adjust to it." — Production designer Imani Royle</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">III</div>
        <div class="tl4-num-lbl">Shoot</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Principal Photography</strong>
          Forty-two days, nineteen of which are <em>unusable for weather</em>.
        </div>
        <div class="tl4-slate">FEB 2025 — APR 2025 · 60 days scheduled</div>
      </div>
      <div class="tl4-notes">
        <p>Generator failure on day 8 destroys eight reels of magic-hour exterior. Reshot under impossibly similar light on day 31 — a small miracle credited to gaffer J. Sallows.</p>
        <div class="tl4-director">"Day 31 was a gift. We do not deserve day 31." — H.V., daily journal</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">IV</div>
        <div class="tl4-num-lbl">Post</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Post-production</strong>
          Six months of <em>cutting silence</em>.
        </div>
        <div class="tl4-slate">MAY 2025 — OCT 2025 · 6 months</div>
      </div>
      <div class="tl4-notes">
        <p>First assembly runs 187 minutes. Final cut at 104. Sound designer L. Mbeki records 38 distinct varieties of wind on a custom rig.</p>
        <div class="tl4-director">"You don't edit toward a runtime. You edit toward a heartbeat." — Editor Sofia Larsen</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">V</div>
        <div class="tl4-num-lbl">Score</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Scoring</strong>
          A composer who promises <em>almost no notes</em>.
        </div>
        <div class="tl4-slate">AUG 2025 — NOV 2025 · 4 months overlap</div>
      </div>
      <div class="tl4-notes">
        <p>Hildur Stefánsdóttir records with 14 strings and a single bass clarinet. Final score is 31 minutes against a 104-minute film. The silence is the score's instrument too.</p>
        <div class="tl4-director">"Most films use music to fill. We use it to make the silence audible." — H.S.</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">VI</div>
        <div class="tl4-num-lbl">Out</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Release</strong>
          A premiere in <em>October light</em>.
        </div>
        <div class="tl4-slate">11 OCT 2025 · London Film Festival</div>
      </div>
      <div class="tl4-notes">
        <p>World premiere at the BFI Southbank. Standing ovation: 9 minutes. Picked up by A24 for North American distribution within the week.</p>
        <div class="tl4-director">"For two hours, the audience was a fourth keeper at the lighthouse." — Variety review</div>
      </div>
    </article>
  </div>
</section>

.tl4-wrap {
  background: #1c0e08;
  color: #e8d8b8;
  font-family: 'Special Elite', ui-monospace, monospace;
  padding: 2.5rem 2rem 4rem;
}
.tl4-head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.tl4-overline {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #d4a574;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.tl4-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  color: #f0dfb8;
  margin: 0;
}
.tl4-title strong {
  font-style: normal;
  font-weight: 900;
  display: block;
  color: #c4391f;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #f0dfb8;
}
.tl4-credits {
  font-size: 10px;
  color: #a08770;
  margin-top: 1rem;
  letter-spacing: 0.15em;
}
.tl4-reel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #0d0604;
  border-top: 22px solid #2a1810;
  border-bottom: 22px solid #2a1810;
  box-shadow:
    inset 0 26px 50px rgba(0,0,0,0.6),
    0 24px 60px rgba(0,0,0,0.8);
}
.tl4-reel::before, .tl4-reel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  background-image: radial-gradient(circle at 14px center, #f0dfb8 0 5px, transparent 6px);
  background-size: 28px 22px;
  background-repeat: repeat-x;
}
.tl4-reel::before { top: -22px; }
.tl4-reel::after { bottom: -22px; }
.tl4-frame {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  border-bottom: 1px solid #2a1810;
  min-height: 180px;
  position: relative;
  transition: background 0.4s;
  cursor: pointer;
}
.tl4-frame:last-child { border-bottom: none; }
.tl4-frame:hover { background: rgba(196,57,31,0.08); }
.tl4-num {
  border-right: 1px solid #2a1810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  background: #0a0402;
  color: #d4a574;
}
.tl4-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: #f0dfb8;
}
.tl4-num-lbl {
  font-size: 9px;
  letter-spacing: 0.25em;
  margin-top: 0.75rem;
  text-transform: uppercase;
  color: #a08770;
  writing-mode: vertical-rl;
}
.tl4-still {
  border-right: 1px solid #2a1810;
  padding: 1.25rem;
  background: linear-gradient(135deg, #1a0c06, #0d0604);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tl4-scene {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #f0dfb8;
}
.tl4-phase {
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: #c4391f;
  font-size: 12px;
  display: block;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.tl4-slate {
  font-size: 10px;
  color: #a08770;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-top: 1px dashed #5a4030;
  padding-top: 0.5rem;
}
.tl4-notes {
  padding: 1.25rem;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c4b090;
}
.tl4-notes p { margin: 0 0 0.5rem; }
.tl4-director {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #d4a574;
  border-left: 2px solid #c4391f;
  padding-left: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 720px) {
  .tl4-frame { grid-template-columns: 50px 1fr; }
  .tl4-notes { grid-column: 1 / -1; border-top: 1px solid #2a1810; }
}