/* The provided artwork is sampled once; only highlight opacity and scroll scale move. */
.hero.hero-artwork {
 --hero-art-center:calc(50% + 12svh);
 --hero-art-width:min(92vw,132svh,1200px);
 --hero-art-font:var(--hero-ascii-font,calc(var(--hero-art-width)/192));
}
.hero.hero-artwork .ascii-field {
 inset:0;
 left:0;
 width:100%;
 transform:none;
 transform-origin:50% var(--hero-art-center);
 pointer-events:none;
}
.hero.hero-artwork .ascii-band {
 top:var(--hero-art-center);
 left:50%;
 width:var(--hero-art-width);
 margin:0;
 padding:0;
 border:0;
 background:none;
 transform:translate(-50%,-50%);
 font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
 font-size:var(--hero-art-font);
 line-height:.92;
 font-weight:500;
 letter-spacing:0;
 white-space:pre;
 text-align:left;
 text-transform:none;
 text-shadow:none;
 animation:none;
 user-select:none;
}
.hero.hero-artwork .band-0 { color:#c8cdd2; opacity:.34; font-weight:400; }
.hero.hero-artwork .band-1 { color:#e1e6ec; opacity:.74; font-weight:400; }
.hero.hero-artwork .band-2 { color:#f5f8fa; opacity:.93; }
.hero.hero-artwork .band-3 { color:#fff; opacity:.96; font-weight:600; text-shadow:0 0 1px #ffffff20; }
.hero.hero-artwork .band-orange-soft { color:#FF4D00; opacity:.62; }
.hero.hero-artwork .band-orange { color:#FF4D00; opacity:.98; font-weight:600; text-shadow:0 0 1px #FF4D0090,0 0 5px #FF4D0030; }
.hero.hero-artwork .proof-core {
 top:var(--hero-art-center);
 visibility:hidden;
 pointer-events:none;
}
.hero.hero-artwork .hero-spark { display:none; }
.hero.hero-artwork.hero-art-error .proof-core { visibility:visible; }
.hero.hero-artwork .hero-flood {
 top:var(--hero-art-center);
 border-radius:50%;
 will-change:transform;
}
@media(min-width:768px) {
 .hero.hero-artwork .hero-copy { top:10%; }
}
@media(max-width:767px) {
 .hero.hero-artwork {
  --hero-art-center:calc(50% + 4svh);
  --hero-art-width:min(160vw,740px);
 }
}
@media(prefers-reduced-motion:no-preference) {
 .hero.hero-artwork .band-3 {
  animation:hero-art-light 10s ease-in-out infinite;
  animation-play-state:var(--motion-play-state,running);
 }
 .hero.hero-artwork .band-orange-soft {
  animation:hero-art-orange-soft 9.5s ease-in-out infinite;
  animation-play-state:var(--motion-play-state,running);
 }
 .hero.hero-artwork .band-orange {
  animation:hero-art-orange 8.6s ease-in-out infinite;
  animation-play-state:var(--motion-play-state,running);
 }
}
@keyframes hero-art-light { 0%,100% { opacity:.96; } 50% { opacity:.9; } }
@keyframes hero-art-orange-soft { 0%,100% { opacity:.62; } 50% { opacity:.56; } }
@keyframes hero-art-orange { 0%,100% { opacity:.98; } 50% { opacity:.9; } }
@media(prefers-reduced-motion:reduce) {
 .hero.hero-artwork .ascii-field { transform:none!important; opacity:1!important; visibility:visible!important; }
 .hero.hero-artwork .ascii-band { animation:none!important; }
}

/* Fabric is a wide strip contained in the same fixed character grid. */
.hero.hero-fabric {
 /* Low enough to leave clear space under the headline. The fabric's height follows the screen
    width, so on wide, short windows a fixed offset is not enough: its centre is also kept at least
    headline top (10%) + two lines (2.04 × font) + 40 px + the fabric's upper half (18.6vw) down. */
 --hero-art-center:max(calc(50% + 13svh), calc(10% + 2.04 * clamp(44px, 5.4vw, 96px) + 40px + 18.6vw));
 --hero-art-width:108vw;
 --hero-core-size:96px;
}
.hero.hero-fabric .proof-core {
 top:var(--hero-art-center);
 width:var(--hero-core-size);
 height:var(--hero-core-size);
 padding:13px;
 visibility:visible;
 background:#FF4D00;
 border:0;
 border-radius:50%;
 box-shadow:none;
}
.hero.hero-fabric .hero-brand-mark { background:#000; }
.hero.hero-fabric .ascii-band {
 /* hero-fabric-v2.png: the cloth tips meet at grid row 50.91 (rows are .92/192 of the art width
    tall, centred on row 50); lift them by that much so they point at the logo's centre. */
 top:calc(var(--hero-art-center) - var(--hero-art-width) * .00436);
}
.hero.hero-fabric .hero-flood {
 top:var(--hero-art-center);
 border-radius:50%;
}
@media(max-width:767px) {
 .hero.hero-fabric {
  --hero-art-center:calc(50% + 10svh);
  --hero-art-width:148vw;
  --hero-core-size:72px;
 }
 .hero.hero-fabric .proof-core { padding:10px; }
 /* Exactly two headline lines on phones: the first line is 14.78 em wide, so the font fills the
    width (with a little slack) instead of wrapping. */
 .hero.hero-fabric h1 { font-size:min(56px, calc((100vw - 36px) / 15.1)); }
 .hero.hero-fabric h1 .hero-line, .hero.hero-fabric h1 em { white-space:nowrap; }
 /* The headline sits in the middle of the upper half: 25% minus half its two lines. */
 .hero-scroll .hero.hero-fabric .hero-copy { top:calc(25% - 1.07 * min(56px, calc((100vw - 36px) / 15.1))); }
}