Il titolo che scopre la foto

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The headline that opens the photo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of the feature: a tall section with a pinned screen inside; scrolling through it opens the photo -->
  <section class="opener" data-opener>
    <div class="stage" data-stage>
      <header class="mast" data-fade="up">
        <div class="mast__row in">
          <a class="mast__name" href="#">Halyard</a>
          <span class="mast__tag">A quarterly of the sea</span>
          <span class="mast__date">Autumn 2026</span>
        </div>
        <span class="mast__rule" data-rule></span>
      </header>

      <div class="cover">
        <p class="kicker" data-fade="up">
          <span class="in"><span class="kicker__section">The Long Read</span><span class="kicker__sep" aria-hidden="true"></span><span class="kicker__place">North Atlantic</span></span>
        </p>
        <h1 class="cover__title" data-headline>Salt</h1>
        <!-- an empty box as tall as the headline: the script draws the letters over it -->
        <div class="cover__slot" data-slot aria-hidden="true"></div>
        <p class="standfirst" data-fade="down">
          <span class="in">On the last island where the weather still decides when the boats go out, a village of forty-one people has learned the slow art of waiting.</span>
        </p>
        <p class="byline" data-fade="down">
          <span class="in"><span>Words by <b>Ines Harlow</b></span><span>Photographs by <b>Tomas Vey</b></span><span class="byline__time">18 min read</span></span>
        </p>
      </div>

      <p class="hint" data-hint>
        <span class="in">Scroll to read
          <svg class="hint__arrow" data-arrow viewBox="0 0 12 18" aria-hidden="true"><path d="M6 1v15M1 11l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
      </p>

      <!-- the photo: at first it shows only through the letters of the headline, at the end it is the whole frame -->
      <svg class="art" data-art aria-hidden="true">
        <defs>
          <clipPath id="headline-clip" clipPathUnits="userSpaceOnUse">
            <text class="art__word" data-word></text>
          </clipPath>
        </defs>
        <g data-art-in>
          <!-- the clip sits on a group: on the image itself it would grow with the image -->
          <g clip-path="url(#headline-clip)"><image data-photo-in preserveAspectRatio="xMidYMid slice"/></g>
          <image data-photo-full preserveAspectRatio="xMidYMid slice" opacity="0"/>
        </g>
      </svg>

      <p class="caption" data-caption>
        <span>The harbour at Skarvik at ten to six, before the first boat leaves.</span>
        <span class="caption__credit">Tomas Vey for Halyard</span>
      </p>
    </div>
  </section>

  <article class="story">
    <p class="story__lead" data-reveal><span class="drop" aria-hidden="true"><span data-drop>E</span></span><span class="sr">E</span>very morning at a quarter past five, Aksel Dam walks to the end of the stone pier, takes off one glove and holds his hand up to the wind. He does not check his phone. The forecast, he says, is written by people who have never had to row home. If the air smells of iron, the boats stay in. If it smells of kelp and nothing else, the boats go out. On the morning I met him it smelled, he told me, of both, so we stood there for a long time and said nothing.</p>
    <p data-reveal>Skarvik has forty-one residents, one shop that opens when its owner remembers, and a harbour older than the church. For three centuries the village lived on cod, salted and dried on the flat rocks behind the houses until the whole bay smelled like a kitchen. The racks are still there, grey and silver, though nobody has hung a fish on them since the plant across the sound closed in 1998.</p>
    <p data-reveal>What the village kept is the salt. In a shed with a turf roof, Marit Joensen boils seawater in three iron pans over a driftwood fire, sixteen hours at a time, until what is left at the bottom looks like snow that has been told a secret. She sells it in paper bags to restaurants in cities she has never visited. The waiting list is two years long. She finds this funny.</p>
    <blockquote class="quote" data-quote>
      <span class="quote__rule" data-quote-rule></span>
      <p data-quote-text>The sea gives you the salt. It just wants you to stay up all night for it.</p>
      <span class="quote__rule" data-quote-rule></span>
    </blockquote>
    <p data-reveal>It would be easy to call Skarvik a place that time forgot. The people who live here would disagree. Time, they will tell you, is the one thing they have paid close attention to: the hour of the tide, the week the eider ducks come back, the single afternoon in March when the light returns over the ridge and every kitchen door in the village is opened at once.</p>
  </article>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="script.js"></script>
</body>
</html>