/* The narrator strip every landing page carries (/, /sandbox, /sandbox2 rotate, so its look lives here once).
   Markup: tests/test_narrator_strip.py holds the three pages' copy equal to each other and to the app's narrators.
   Self-contained: only the pages' colour and font variables, each with its own fallback. */
.hgv{padding:44px 0 50px;border-top:1px solid var(--line2,rgba(255,255,255,.07));border-bottom:1px solid var(--line2,rgba(255,255,255,.07))}
.hgv h2{margin:0 0 28px;text-align:center;font:700 clamp(22px,2.8vw,30px)/1.1 var(--f-disp,Georgia,serif);color:var(--ink,#f5f1e8);text-wrap:balance}
.hgv-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px 18px}
/* the avatar's size is fixed by the width alone (square), so nothing moves when the image arrives */
.hgv-list li{width:clamp(84px,26vw,148px);text-align:center}
.hgv-list img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:18px;background:var(--surface2,#1d1a13);
  border:1px solid var(--line,rgba(224,168,56,.15));box-shadow:0 12px 28px rgba(0,0,0,.5);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hgv-list li:hover img{transform:translateY(-4px);border-color:var(--gold,#e0a838);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 0 1px var(--gold,#e0a838)}
.hgv-list span{display:block;margin-top:11px;font:600 15px/1 var(--f-ui,'Segoe UI',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft,#f5d9a8)}
@media(prefers-reduced-motion:reduce){.hgv-list img{transition:none}.hgv-list li:hover img{transform:none}}