/* The two text layers have identical metrics; only the nearby letters light up. */
.light-label{--label-light:0;--label-x:-200px;--label-y:-200px;position:relative;display:inline-block;font:700 clamp(18px,2.05vw,34px)/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em;text-transform:uppercase;color:rgb(241 240 233 / .15)}
.light-label-glow{position:absolute;inset:0;color:#e2edca;opacity:var(--label-light);pointer-events:none;mask-image:radial-gradient(ellipse 125px 80px at var(--label-x) var(--label-y),#000 0%,#0009 32%,transparent 100%);transition:opacity .45s ease}
.light-label-glow .status-dot{animation:none}
.story-heading{position:relative;padding-top:96px}
.story-heading>.light-label{position:absolute;right:max(6vw,24px);top:0;text-align:right;max-width:64%}
.world-label.light-label{position:absolute;left:auto;right:max(6vw,24px);top:26px;max-width:65%;text-align:right;z-index:4;text-shadow:none}
#landing .m-hero .hero-eyebrow{display:block;width:max-content;max-width:66%;font-size:clamp(18px,2.05vw,34px);letter-spacing:.09em}
.light-label .status-dot{display:inline-block;width:.28em;height:.28em;vertical-align:middle;margin:0 .5em .14em 0;background:currentColor;animation:none}
@media(max-width:720px){.light-label,#landing .m-hero .hero-eyebrow{font-size:12px}.story-heading{padding-top:60px}.story-heading>.light-label{right:22px;max-width:85%}.world-label.light-label{right:22px;max-width:85%;font-size:11px}}
/* Short PC windows keep the quiet label above the settled word, not on its edge. */
@media(min-width:721px) and (max-height:760px){
  .light-label,#landing .m-hero .hero-eyebrow{font-size:22px}
  .world-label.light-label{top:12px}
}