/* ============================================================ Sarah hero v6 (2026-09-30): "At the mic", version 1F. The team on the
   v5 photo card (the rsgonzales.com portrait on its US map): "this seems not relevant to the theme ... give a good frame which make
   sense" -> six frames (sarah-hero-frame-variants/) -> 1 "At the mic" -> "show me more strongers versions" -> round 2
   (sarah-hero-frame-variants/at-the-mic/) -> 1F "All of it", then "do not use wave inside this green gradient" -> "use this one
   into its actual page". The map was baked into the portrait, so the hero uses sarah-rsg-cut.webp: the same photo with the map and
   its white ground cut away. The home hero's mic hangs on its cable from the top of the page, level with her mouth, beside a dark
   booth arch; her head rises out of the arch over the page (.sg-mic__cast is the arch's box, clipped at its sides and rounded foot
   but open above); the sound rings spread from the grille behind the arch and the copy, none inside the arch. Linked from
   sarah-gonzales/index.html after ot-pages.css, in its own file (like ot-guest.css) so it stays out of ot-pages.css while other work
   edits that file. The v5 rules (.sg-block, .sg-photo, .sg-badge in ot-pages.css) stay for the kept backups (index.before-*.html, index.timeline-*.html).
   Same geometry as the review page's 1F (.sf1.mF, sf.css + at-the-mic/m.css). Motion only under html.motion (ot.js). */

.sg-hero--mic{overflow:visible; overflow-x:clip; clip-path:inset(0 0 -240px 0)}   /* the base .hero{overflow:hidden} cut the arch's and the chip's shadows in a
   straight line at the hero's foot; now only the top edge clips (the mic's cable stops there) and the shadows and ring tails run on */
.sg-hero--mic + .sg-facts .sg-strip{position:relative; z-index:1}     /* the strip stays above them */
.sg-hero--mic .sg-hero__copy{position:relative; z-index:2}            /* the rings pass behind the text */
.sg-hero__ph.sg-mic{margin:0; padding:0; aspect-ratio:520/680}         /* the grid column's width (472 / 400 / 440 max), a taller box */

/* the sound rings: centred on the grille, faded out towards their edge */
.sg-mic .rings{top:43.7%; left:13%; right:auto; width:196%; translate:-50% -50%; color:var(--green); z-index:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 42%,transparent 96%); mask-image:radial-gradient(closest-side,#000 42%,transparent 96%)}
.sg-mic .rings circle{stroke-width:.32}
html.motion .sg-mic .rings{animation:ot-breathe 8s ease-in-out infinite alternate}

/* the arch: a recording booth, dark with a green light behind her head */
.sg-mic__arch,.sg-mic__cast{position:absolute; right:0; top:25%; width:84%; height:75%}
.sg-mic__arch{z-index:1; overflow:hidden; border-radius:50% 50% 30px 30px / 42.8% 42.8% 30px 30px;
  background:radial-gradient(60% 46% at 54% 30%,rgba(63,203,116,.4) 0,rgba(32,157,80,.1) 48%,rgba(32,157,80,0) 72%),linear-gradient(180deg,#1C2C22 0,#0F1612 100%);
  box-shadow:0 44px 88px -44px rgba(17,17,17,.7)}
.sg-mic__arch::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(63,203,116,.6); pointer-events:none}

/* her: in the arch's box, so her shoulders stay inside it and her head rises out of its top; the photo is wider than the arch,
   so the square crop of her shoulders falls outside the sides and is clipped */
.sg-mic__cast{z-index:2; pointer-events:none; clip-path:inset(-60% 0 0 0 round 0 0 30px 30px)}
.sg-mic__cast img{position:absolute; bottom:0; left:50%; width:116%; max-width:none; height:auto; translate:-45% 0}

/* the mic on its cable (cut by the hero's own overflow at the top of the page), the grille level with her mouth */
.sg-mic__rig{position:absolute; z-index:3; left:0; top:7.5%; width:26%; transform-origin:50% -1400px}
.sg-mic__rig::before{content:""; position:absolute; left:50%; bottom:calc(100% - 2px); width:3px; margin-left:-1.5px; height:1400px; background:#3D3D3D; border-radius:2px 2px 0 0}
.sg-mic__rig img{display:block; width:100%; height:auto; filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)) drop-shadow(0 22px 22px rgba(17,17,17,.3))}   /* a rim of light where the black mic crosses the dark arch */
.sg-mic__rig::after{content:""; position:absolute; left:50%; top:80%; width:70%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:2px solid rgba(32,157,80,.7); opacity:0; pointer-events:none}
html.motion .sg-mic__rig{animation:hh-sway 7s ease-in-out infinite alternate}
html.motion .sg-mic__rig::after{animation:ot-ripple 7s cubic-bezier(.16,1,.3,1) 1.4s infinite}

/* the name chip on the arch's foot (the v5 badge's words) */
.sg-mic__chip{position:absolute; z-index:4; right:4%; bottom:-3%; display:inline-flex; align-items:center; gap:14px; padding:14px 22px 14px 16px; border-radius:16px; white-space:nowrap;
  background:rgba(255,255,255,.8); border:1px solid rgba(17,17,17,.08); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 22px 44px -26px rgba(17,17,17,.5)}
.sg-mic__chip .eq--eb{height:24px}
.sg-mic__chip b{display:block; font:600 18px/1.2 var(--body); color:var(--ink)}
.sg-mic__chip small{display:block; font:500 13px/1.3 var(--body); color:var(--green-deep); margin-top:3px}

@media (max-width:960px){
  .sg-hero__ph.sg-mic{margin-top:8px}                                 /* the live stacked rule, restated over the reset above */
  .sg-mic__rig{transform-origin:50% -92px}
  .sg-mic__rig::before{height:92px; background:linear-gradient(to top,#3D3D3D 55%,rgba(61,61,61,0))}   /* stacked under the copy: a short cable from above, not across the text */
}
@media (max-width:700px){
  .sg-mic__chip{padding:11px 16px 11px 13px; gap:10px} .sg-mic__chip b{font-size:15px} .sg-mic__chip small{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .sg-mic__rig,.sg-mic__rig::after,.sg-mic .rings{animation:none} }