/* Golden hour (core/closing/004) — sage_light_rest w1 (INV-05, D-031, D-032 ruling A). The day ends in a bright room
   at golden hour: sunbeams through arched windows, a jar of gypsophila on the floor. The closing line ("With love",
   Pinyon) and the names sit on the calm upper wall over a soft paper veil. A photographed gypsophila sprig reaches in
   from the right; it is still here, with the hero's drop shadow. Phone and tablet: the room full-bleed. Desktop: a
   centred, feathered 9:16 panel (the cl003 pattern). Light ground.
   live.js draws the sprig (and its shadow) with the same numbers, so its first frame is this one; then the dust in the
   beams fades in and the sprig sways. Keep the veil stops in step with VEIL in live.js. */
.cl004 {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; touch-action: pan-y;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--k-light-ground); color: var(--k-ink);
  /* the longest name fits one line (--cl004-len from name_len, as he004); past the floor it wraps */
  --cl004-avail: min(calc(100vw - 2 * var(--k-gutter)), calc(var(--k-measure) - 2 * var(--k-gutter)));
  --cl004-fit: calc(var(--cl004-avail) / (var(--cl004-len, 8) * .82));
}
.cl004__frame { position: absolute; inset: 0; overflow: hidden; }
.cl004__img {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: 105%; max-width: none;
  object-fit: cover; object-position: 50% 30%;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* the paper veil: the room rises out of the paper at the top and settles back into it at the foot */
.cl004__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--k-paper) 0%, var(--k-paper) 5%,
    color-mix(in srgb, var(--k-paper) 80%, transparent) 16%,
    color-mix(in srgb, var(--k-paper) 45%, transparent) 32%,
    transparent 50%, transparent 90%,
    var(--k-paper) 100%);
}
.cl004__stage { position: absolute; inset: 0; pointer-events: none; }
.cl004__gyp {
  position: absolute; right: -7%; bottom: 9%; width: clamp(150px, 44%, 300px); height: auto;
  pointer-events: none; filter: drop-shadow(6px 8px 6px rgb(0 0 0 / .18));
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.cl004__inner { position: relative; z-index: 4; width: 100%; max-width: var(--k-measure); padding: 12vh var(--k-gutter) 0; padding: 12svh var(--k-gutter) 0; }
.cl004__line { font: 400 clamp(2.5rem, 11vw, 3.6rem)/1.15 var(--k-font-script); color: var(--c-primary); overflow-wrap: anywhere; }
.cl004-names {
  margin-top: 10px; font: 400 max(1.05rem, min(clamp(1.7rem, 7.6vw, 2.6rem), var(--cl004-fit)))/1.25 var(--k-font-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink); overflow-wrap: anywhere;
}
.cl004-amp { display: inline-block; margin: 0 .1em; font-size: .9em; vertical-align: .02em; }
.cl004__rule { width: 170px; margin: 18px auto 0; color: var(--c-secondary); }

@media (min-width: 768px) {
  .cl004__inner { padding-top: 11vh; padding-top: 11svh; }
  .cl004__line { font-size: 4rem; }
  .cl004-names { font-size: max(1.05rem, min(2.6rem, var(--cl004-fit))); }
}

/* desktop and wide screens: a centred 9:16 panel, feathered into the paper at both sides */
@media (min-aspect-ratio: 3/4) {
  .cl004__frame { left: 50%; right: auto; width: 56.25vh; margin-left: -28.125vh; }
  .cl004__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  /* the panel ends in paper, so the stem fades out there instead of being cut at the panel's edge (live.js reads it) */
  .cl004__gyp { right: 1%; bottom: 8%; width: 42%;
    -webkit-mask-image: linear-gradient(225deg, transparent 5%, #000 24%);
            mask-image: linear-gradient(225deg, transparent 5%, #000 24%); }
  .cl004__inner { padding-top: 13vh; }
  .cl004__line { font-size: clamp(2.6rem, 6.4vh, 4rem); }
  .cl004-names { font-size: max(1.05rem, min(clamp(1.7rem, 4.2vh, 2.6rem), var(--cl004-fit))); }
}

/* live (Tier 3): the canvas draws the sprig and its shadow from the first frame; the poster copy steps aside */
.cl004.is-live .cl004__gyp { opacity: 0; }