/* Base: reset, typography, layout, header and footer — style «Metamorfosi» (piano 18; before,
   «Onda», piano 06 · G-01). Colours and fonts only from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* No text under 12 px (11/10): <small> shrinks its parent's size. */
small { font-size: max(0.75rem, 0.85em); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-16)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The night footer down to the bottom of the window also on short pages (no strip of day under it). */
body:has(> .site-footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has(> .site-footer) > main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--verm); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 760; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 var(--s-4); }
h1 { font-size: clamp(var(--fs-36), 6vw, 4.75rem); }
h2 { font-size: clamp(var(--fs-28), 4.2vw, 3.5rem); }
h3 { font-size: var(--fs-22); font-weight: 680; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0 0 var(--s-4); }
.lead { font-size: clamp(var(--fs-16), 1.4vw, 1.3125rem); line-height: 1.55; color: var(--text-soft); max-width: 60ch; }
.eyebrow { font: 600 var(--fs-12)/1.4 var(--font-text); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-3); }
.eyebrow b, .eyebrow strong { color: var(--accent-text); font-weight: 750; }
/* The section number with a thin line after it, as in the proposal. */
.eyebrow-line { display: flex; align-items: center; gap: 0.9em; }
.eyebrow-line::after { content: ""; flex: none; width: 46px; height: 1px; background: currentColor; opacity: .55; }
/* The accent of the titles: the italic serif in the red of the text. */
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.012em; color: var(--accent-text); }
.muted { color: var(--text-soft); }
.small { font-size: var(--fs-14); }
.voice-text { background: var(--voice-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 50; background: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); }
.skip:focus { top: var(--s-4); }

.wrap { width: min(100% - 2 * var(--s-5), var(--page)); margin-inline: auto; }
.section { padding-block: clamp(var(--s-8), 10vw, 140px); }
.section-head { max-width: 760px; margin-bottom: var(--s-7); }
.grid-2 { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: center; }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* A section can carry its own theme (data-theme="dark" · "light" · "accent"): its background
   and text follow the tokens of that theme. */
section[data-theme], footer[data-theme], .theme-block[data-theme] { background: var(--bg); color: var(--text); }

/* The vivid colour of a sector (--sv) as the background of a part of a page, with the ink on top
   (the soft text is 16% of the colour in the ink, as on the sector opened from the home). */
.sector-vivid { --bg: var(--sv); --text: var(--ink); --text-soft: color-mix(in srgb, var(--sv) 16%, var(--ink)); --text-faint: color-mix(in srgb, var(--sv) 16%, var(--ink));
  --accent-text: var(--ink); --voice-text: var(--ink); --on-text: var(--paper); --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent); --focus: var(--ink); --btn-fill: var(--paper); color: var(--text); }
.sector-vivid[data-theme], .live-band.sector-vivid { background: var(--bg); }
/* Header: the word with the red dot that beats; links with a line that grows under them. */
.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(140%) blur(14px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); transition: background var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; font: 820 1.55rem/1 var(--font-display); font-stretch: 118%; letter-spacing: -0.035em; text-decoration: none; }
/* The red dot after the word (the image of the 30/09 logo stays for the icon of the tab and for Da
   Angelino): stronger than the rule of voxaris-brand.css, loaded after this file. */
.site-header .brand .brand-mark, .site-footer .brand .brand-mark { order: 2; flex: none; width: 0.3em; height: 0.3em; margin-left: 0.1em; border-radius: 50%; background: var(--verm); filter: none; box-shadow: none; animation: brand-beat 2.4s var(--ease-standard) infinite; }
@keyframes brand-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.45); } 24% { transform: scale(.9); } 36% { transform: scale(1.2); } }
.site-nav { display: flex; gap: var(--s-6); margin-left: auto; font-size: var(--fs-14); font-weight: 540; }
.site-nav a { position: relative; padding-block: 6px; text-decoration: none; color: var(--text-soft); transition: color var(--dur-ui) var(--ease-standard); }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-section) var(--ease-standard); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.header-tools { display: flex; align-items: center; gap: var(--s-2); }
.icon-button { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; transition: border-color var(--dur-ui) var(--ease-standard), background var(--dur-ui) var(--ease-standard), transform var(--dur-section) var(--ease-spring); }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface); transform: scale(1.06); }
.icon { flex-shrink: 0; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-select { background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 12px; font-size: var(--fs-14); font-weight: 600; }
.nav-toggle { display: none; }
/* Phones: the links open in a full-screen panel that grows as a circle from the menu button,
   with the links rising one after the other; without scripts they stay on a second row. */
@media (max-width: 760px) {
  .site-nav { display: none; }
  .header-tools { margin-left: auto; }
  .nav-toggle { display: inline-grid; position: relative; z-index: 2; }
  .site-header .wrap { position: relative; min-height: 64px; }
  .site-header .brand { position: relative; z-index: 2; }
  .site-header.is-open { backdrop-filter: none; background: var(--text); color: var(--on-text); border-bottom-color: transparent; }
  .site-header.is-open .site-nav { display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); position: fixed; inset: 0; z-index: 1; margin: 0;
    padding: 96px var(--s-5) var(--s-7); background: var(--text); color: var(--on-text); animation: menu-open .8s var(--ease-emph) both; }
  .site-header.is-open .site-nav a { display: block; overflow: hidden; min-height: 0; padding: 4px 0; color: var(--on-text); font: 760 clamp(2.4rem, 11vw, 4.2rem)/1.08 var(--font-display); letter-spacing: -0.03em; animation: menu-link .9s var(--ease-standard) both; }
  .site-header.is-open .site-nav a::after { display: none; }
  .site-header.is-open .site-nav a:nth-child(2) { animation-delay: .07s; }
  .site-header.is-open .site-nav a:nth-child(3) { animation-delay: .14s; }
  .site-header.is-open .site-nav a:nth-child(4) { animation-delay: .21s; }
  .site-header.is-open .header-tools .icon-button, .site-header.is-open .lang-select { border-color: color-mix(in srgb, var(--on-text) 30%, transparent); position: relative; z-index: 2; }
  .no-js .site-header .wrap { flex-wrap: wrap; }
  .no-js .site-nav { display: flex; order: 3; width: 100%; gap: var(--s-4); margin: 0; padding-bottom: var(--s-3); overflow-x: auto; }
  .no-js .nav-toggle { display: none; }
}
/* The narrowest phones (320 px): the header stays on one row. */
@media (max-width: 360px) {
  .site-header .wrap { gap: var(--s-2); }
  .site-header .brand { font-size: 1.3rem; }
  .header-tools { gap: 4px; }
  .header-tools .icon-button { width: 38px; height: 38px; }
  .lang-select { padding: 7px 6px; }
}
@keyframes menu-open { from { clip-path: circle(0 at calc(100% - 44px) 32px); } to { clip-path: circle(150% at calc(100% - 44px) 32px); } }
@keyframes menu-link { from { opacity: 0; transform: translateY(60%) rotate(4deg); } to { opacity: 1; transform: none; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); color: var(--text-soft); font-size: var(--fs-14); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: center; container-type: inline-size; }
.site-footer .brand { font-size: 2rem; color: var(--text); }
/* The big word of the footer: lit by the red where the pointer passes (--mx/--my from effects.js). */
.footer-word { flex-basis: 100%; min-width: 0; margin-bottom: var(--s-6); overflow: hidden; white-space: nowrap; font: 880 22.6cqi/0.82 var(--font-display); font-stretch: 125%; letter-spacing: -0.05em; color: transparent; -webkit-user-select: none; user-select: none;
  background: radial-gradient(28vw circle at var(--mx, 50%) var(--my, 50%), var(--voice-a), transparent 70%), linear-gradient(color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--text) 12%, transparent));
  -webkit-background-clip: text; background-clip: text; }
.footer-word.fx-spotlight::after { display: none; }
.footer-brand { display: grid; gap: var(--s-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .site-header .brand .brand-mark, .site-header.is-open .site-nav, .site-header.is-open .site-nav a { animation: none; }
}
:root[data-motion="reduce"] .site-header .brand .brand-mark, :root[data-motion="reduce"] .site-header.is-open .site-nav,
:root[data-motion="reduce"] .site-header.is-open .site-nav a { animation: none; }