<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Light Leak Cinema · REEL 03</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; }
  .frame {
    position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto;
    background:#1a0d08;
    overflow:hidden;
  }
  .scene {
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%),
      radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%),
      linear-gradient(180deg, transparent 60%, #d97757 110%),
      radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%),
      linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%);
  }
  .grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* scratches */
  .scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; }
  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); }
  .perfs {
    position:absolute; left:0; right:0; height:6px;
    background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px);
    opacity:0.5;
  }
  .cream { color:#f5e9d6; }
  .mono { font-family:'IBM Plex Mono',monospace; }
  .display { font-family:'EB Garamond','Noto Serif SC',serif; }
  .chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-6" style="background:#000">
  <div class="frame">
    <div class="scene"></div>

    <!-- scratches -->
    <div class="scratch" style="left:14%;height:38%"></div>
    <div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div>
    <div class="scratch" style="left:71%;height:30%;top:55%"></div>

    <!-- letterbox bars - actually built into aspect ratio container; perfs on top -->

    <!-- top caption -->
    <header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10">
      <span>REEL 03 · CH I · MMXXVI</span>
      <span>A Quiet Year in Berlin</span>
      <span>00:03:21</span>
    </header>

    <!-- main text -->
    <main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%">
      <div class="chip mono opacity-70">Reel III · Title</div>
      <h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6">
        A Quiet Year<br/>
        <span style="font-style:italic">in</span> Berlin.
      </h1>
      <p class="display mt-4 italic opacity-80 text-[22px]">
        A short film about typesetting, in fourteen reels.
      </p>
    </main>

    <!-- bottom right meta -->
    <footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10">
      <span>52.5200° N · 13.4050° E</span>
      <span>FILMED ON 35MM · PROXY 1080P</span>
      <span>FRAME · LIGHT-LEAK-CINEMA</span>
    </footer>

    <div class="grain"></div>
    <div class="vignette"></div>
  </div>
</body>
</html>
