<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lesson of Light – Scroll Layout</title>
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background: #0d0d0d;
      font-family: 'Share Tech Mono', monospace;
      color: #fefae0;
      scroll-behavior: smooth;
    }
    section {
      padding: 80px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    img {
      max-width: 90vw;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }
    .caption {
      max-width: 800px;
      font-size: 1.1em;
      color: #ffdfa3;
      text-align: center;
      margin-top: -10px;
    }
  </style>
</head>
<body>
  <section>
    <img src="poster.jpg" alt="Lesson of Light poster">
    <div class="caption">Light and sound form – they become you</div>
  </section>

  <section>
    <img src="sleep_memory.jpg" alt="Child sleeping with mother projection">
    <div class="caption">Ты не возьмёшь с собой ничего — кроме света внутри</div>
  </section>

  <section>
    <img src="manager_briefing.jpg" alt="Cosmic manager briefing children">
    <div class="caption">Группа 369. Не нация. Не прошлое. Только свет.</div>
  </section>

  <section>
    <img src="group_369.jpg" alt="Group 369 in formation">
    <div class="caption">Мы стоим на границе воспоминаний</div>
  </section>

  <section>
    <img src="lift_start.jpg" alt="Lift rising with children">
    <div class="caption">Если нас забудут — мы останемся в лифте навсегда</div>
  </section>

  <section>
    <img src="signal_interference.jpg" alt="Children inside crossing signal field">
    <div class="caption">Сигналы встречаются. Мы — их границы.</div>
  </section>

  <section>
    <img src="mars_arrival.jpg" alt="Lift above Mars between planets">
    <div class="caption">Свет остался. И это ты.</div>
  </section>
</body>
</html>
