html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.page{width:100%;max-width:100%;min-width:0}
.hero{min-width:0;container-type:inline-size}
.hero h1{position:relative;line-height:1.1;color:var(--ink);min-width:0;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Keep real, solid text underneath the decorative photo layer. The line box
   includes the full glyph height so background clipping cannot shave it off. */
.hero h1.hero-orb::before{content:attr(data-orb-text);position:absolute;inset:0;pointer-events:none;background-image:var(--orb-image);background-repeat:no-repeat;background-size:var(--orb-size) var(--orb-size);background-position:var(--orb-x) var(--orb-y);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-orb-link{position:absolute;display:block;border-radius:50%;cursor:pointer;touch-action:manipulation}
.hero-orb-link[hidden]{display:none}
.hero-orb-link:focus-visible{outline:2px solid #777;outline-offset:4px}

@media(max-width:700px){
  .hero h1{font-size:calc(25.5vw - 10.4px);font-size:25.5cqw;margin-left:0;width:100%}
}