/* DOPEN · fascia ad arco (2026-11-02, dalla fascia «Design that Moves Brands Forward» di Studiora)
   Un arco magenta a tutta larghezza con una frase scura che ci scorre sopra. L'SVG non ha viewBox: un'unita' = un pixel CSS,
   cosi' arco.js disegna l'arco sulla misura vera e spessore e corpo restano gli stessi a ogni larghezza (si incurva di piu' sul telefono).
   --bw = spessore dell'arco (circa un quinto della larghezza, come in Studiora); il corpo del testo ne e' l'80%;
   la sezione e' alta poco piu' di due spessori: sotto l'arco resta solo lo spazio per arrivare al titolo del finale. */
.arc{position:relative;height:calc(var(--bw) * 2.15);overflow:hidden;--bw:clamp(96px,18vw,300px)}
.arc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-band{fill:none;stroke:var(--acc);stroke-width:var(--bw)}
/* la frase e' in Sora 450, il carattere con cui e' disegnato il logo (2026-11-04), stretta come le lettere del logo;
   dy .27em (index.html) = meta' altezza della x: il corpo delle minuscole sta al centro del nastro, aste e code a pari distanza dai bordi.
   geometricPrecision: contorni calcolati esatti a ogni corpo e rotazione, senza arrotondare la misura del carattere */
.arc-txt{font:450 calc(var(--bw) * .8) 'Sora',var(--sans);letter-spacing:-.02em;fill:#0B0B0C;text-rendering:geometricPrecision}
.arc-meas{visibility:hidden}
/* la frase vera, per chi legge con lo screen reader e per le traduzioni; a schermo c'e' quella sull'arco */
.arc-src{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* «dopen» con le lettere del logo (arco.js): la parola della frase resta come vuoto e sopra si posano i pezzi del logo;
   il punto, magenta nel logo, qui e' bianco sul magenta */
.arc.has-logo .arc-hole{fill:transparent}
.arc-logo{color:#0B0B0C;shape-rendering:geometricPrecision}
.arc-logo circle{fill:#fff}