/* ============================================================
   ROUND 27 VERSION 01 HERO — extracted VERBATIM.
   This is the approved hero, lifted out of
   FINAL
_ROUND_27_V01
_pure_refinement.html so that all
   eleven concepts in this round include ONE copy of it rather
   than eleven transcriptions that could drift apart.
   Nothing below this header has been edited.
   ============================================================ */

/* ============================================================
   01 · PURE REFINEMENT
   Round 26 Version 05, with no new device added and nothing taken
   away -- only the things a second pair of eyes would correct.
   The rule is dimmed so it stops competing with the gold word
   twenty pixels beneath it; the lede's measure is stated in
   pixels rather than ch; the audience line, close to illegible at
   10px/.68, is given back enough weight to be read; and the
   bottom edge now respects the phone's home indicator.
   The entrance rebuild documented in the README applies here and
   in all five files.
   ============================================================ */

:root{ --gold:#C9A876; --gold-deep:#A98A56; }
.mark .gv{ color:var(--gold); }

.chrome{ height:68px; padding-inline:26px; }
.mark{ font-size:19px; letter-spacing:.44em; font-weight:500; }
@media(min-width:821px){
  .chrome{ height:86px; padding-inline:clamp(30px,4.4vw,86px); }
  .mark{ font-size:23px; letter-spacing:.46em; }
}

.hero:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(8,9,11,.36) 0%, rgba(8,9,11,0) 10%,
    rgba(8,9,11,0) 68%, rgba(8,9,11,.52) 84%, rgba(8,9,11,.86) 100%);
}
.hero{ padding-inline:26px; padding-bottom:calc(34px + env(safe-area-inset-bottom, 0px)); }
@media(min-width:821px){ .hero{ padding-inline:clamp(30px,4.4vw,86px); padding-bottom:58px; } }
.type{ padding-bottom:20px; }

/* dimmer than Version 05: the rule and the gold word were two gold
   gestures twenty pixels apart, each weakening the other */
/* SECOND PASS: .36 was over-corrected -- at that value the rule
   read as an accident rather than a decision. A rule should be
   present or absent, not apologetic. */
.type:before{
  content:"";display:block;width:56px;height:1px;
  background:var(--gold);opacity:calc(var(--rule, 0) * .48);margin-bottom:22px;
}

/* THE PRE-JS STATE IS THE t=0 STATE.
   Version 05 declared .ln.res{opacity:1}, so the headline painted
   at full strength before the script ran and then snapped back to
   0.12 when it did. That snap was half of the "jump". */
.type h1 .ln{ opacity:.12; transform:translateY(4px); }

/* SECOND PASS: the line breaks here are manual, so the headline
   relies on nowrap overflowing its own box. Measured, that clipped
   silently at 375px (-8px) and 360px (-23px) -- iPhone SE/mini and
   most Android. Sizing by viewport keeps the fit ratio constant at
   every width instead of only at 390. */
.type h1{max-width:10.5ch; font-weight:400; letter-spacing:-.030em; line-height:1.03; font-size:min(42px, 10.6vw);}
@media(min-width:821px){ .type h1{max-width:10ch; font-size:clamp(56px,6.2vw,88px);} .type:before{width:68px;margin-bottom:28px;} }
.type h1 .emphasis{ font-weight:600; color:inherit; }

/* a pixel measure, not ch: ch resolves against the USED font's
   zero-advance, so the container itself changed width when the
   real face arrived. A pixel value is identical under both. */
.type .lede{ font-size:16px; font-weight:400; color:var(--ink-2); max-width:259px; margin-top:18px; }
@media(min-width:821px){ .type .lede{ font-size:17.5px; max-width:324px; margin-top:24px; } }
.type .aud{ opacity:.74; font-size:10.5px; letter-spacing:.05em; margin-top:13px; }