/* ---------- 04 · ocean ---------- */

/* The water and the hazy gale sky are bright: a soft scrim and a text shadow
   keep the copy legible without a box. */
#ch04 .ch-copy { max-width: min(48ch, 88vw); }
#ch04 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -34% -18% -40%;
  background: radial-gradient(ellipse at 32% 50%, rgba(5, 7, 14, 0.66) 0%, rgba(5, 7, 14, 0.38) 42%, rgba(5, 7, 14, 0) 72%);
}
#ch04 .ch-copy h2, #ch04 .ch-copy .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
#ch04 .ch-copy .eyebrow { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
#ch04 .ch-copy .lede { color: rgba(234, 241, 250, 0.9); }

/* The headline, split into words (never broken inside) and letters (the particles). */
#ch04 .h-wind .wc-w { display: inline-block; white-space: nowrap; }
#ch04 .h-wind .wc-l { display: inline-block; transform-origin: 50% 62%; backface-visibility: hidden; }
#ch04 .h-wind.is-storm .wc-w, #ch04 .h-wind.is-storm .wc-l { will-change: transform, opacity; }

@media (max-width: 900px) {
  /* Mobile: the copy spans the width at the top, over the brightest sky. The
     scrim runs edge to edge from under the header down past the subline and
     fades out well below it. */
  #ch04 .ch-copy { max-width: none; }
  #ch04 .ch-copy::before {
    inset: -60% 0 -42% 0;
    background: linear-gradient(180deg,
      rgba(5, 7, 14, 0.62) 0%, rgba(5, 7, 14, 0.52) 45%, rgba(5, 7, 14, 0.36) 68%, rgba(5, 7, 14, 0) 100%);
  }
  #ch04 .ch-copy .lede { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 22px rgba(0, 0, 0, 0.6); }
}