/* Pagine non di soluzione: Tecnologia, Chi siamo, Contatti, indice Soluzioni, pagine di servizio. */

/* Apertura senza ora: titolo largo, testo sotto. */
.top { padding-bottom: clamp(64px, 11vh, 130px); }
.top .page-h1 { max-width: 20ch; font-size: clamp(2.375rem, 5.6vw, 4.75rem); }
.top .lead { max-width: 60ch; }
.top .fine a, .linkline a { color: inherit; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.kick { font: 500 .8125rem/1.3 var(--mono); color: var(--fg2); margin-bottom: clamp(16px, 2.6vh, 26px); }

/* Capitoli numerati (Tecnologia): il numero a sinistra, il testo a destra. */
.chap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 16px clamp(24px, 5vw, 80px); align-items: start; }
.chap > .num { font: 400 clamp(2.5rem, 5vw, 4.25rem)/.9 var(--mono); letter-spacing: -.06em; color: var(--mark); }
.chap > .num small { display: block; margin-top: 12px; font: 500 .8125rem/1.3 var(--mono); letter-spacing: 0; color: var(--fg2); }
.chap h2 { font: 600 clamp(1.75rem, 3.2vw, 2.75rem)/1.07 var(--display); letter-spacing: -.026em; text-wrap: balance; max-width: 24ch; }
.chap .body > p { margin-top: 18px; max-width: 60ch; color: var(--fg2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.chap .body > p.say-it { color: var(--fg); font: 600 clamp(1.25rem, 1.9vw, 1.625rem)/1.2 var(--display); letter-spacing: -.02em; max-width: 30ch; margin-top: clamp(26px, 4vh, 40px); }
.chap .spec, .chap .plain { max-width: 760px; }
.chap .pair { margin-top: clamp(26px, 4vh, 40px); gap: clamp(24px, 4vw, 56px); }
.chap .pair .plain { margin-top: 0; }

/* La pausa fra le due voci: 166 ms. */
.voices { margin-top: clamp(30px, 5vh, 52px); max-width: 760px; display: grid; gap: 10px; }
.voices .lane { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 14px; font: 500 .8125rem/1.3 var(--mono); color: var(--fg2); }
.voices .bar { position: relative; height: 34px; }
.voices .bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); opacity: .9; }
.voices .c i { left: 0; width: 46%; color: var(--fg2); }
.voices .m i { left: 50%; right: 0; color: var(--mark); }
.voices .mark { display: grid; grid-template-columns: 6.5em 1fr; gap: 14px; font: 500 .8125rem/1.3 var(--mono); color: var(--mark); }
.voices .rule { position: relative; height: 14px; }
.voices .rule span { position: absolute; left: 46%; width: 4%; top: 2px; height: 10px; border-inline: 2px solid currentColor; }
.voices .rule span::after { content: ""; position: absolute; inset: 50% 0 auto; border-top: 2px solid currentColor; transform: translateY(-50%); }
.voices .rule b { position: absolute; left: calc(50% + 12px); top: -2px; white-space: nowrap; font-weight: 500; }

/* I tre numeri misurati: cifre grandi su un filo, niente riquadri. */
.figs { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: clamp(24px, 4vw, 56px); border-top: 2px solid var(--fg); }
.figs li { padding-top: 18px; }
.figs .n { font: 400 clamp(3rem, 7.4vw, 6.5rem)/.9 var(--mono); letter-spacing: -.06em; color: var(--mark); }
.figs .n small { font-size: .32em; letter-spacing: -.02em; margin-left: .12em; }
.figs p:last-child { margin-top: 12px; max-width: 26ch; color: var(--fg2); }

/* Elenco di rimandi alle soluzioni: ora, nome, riga. */
.sols { border-top: 1px solid var(--line); max-width: 860px; margin-top: clamp(26px, 4vh, 40px); }
.sols a { display: grid; grid-template-columns: 5.5ch minmax(0, 11em) 1fr auto; gap: 8px clamp(14px, 2.4vw, 32px); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.sols .mono { color: var(--fg2); font-size: .875rem; }
.sols b { font: 600 clamp(1.125rem, 1.6vw, 1.375rem)/1.2 var(--display); letter-spacing: -.015em; }
.sols span.d { color: var(--fg2); }
.sols a::after { content: "\2192"; transition: transform .2s var(--ease); }
.sols a:hover::after { transform: translateX(5px); }

/* Indice Soluzioni: ogni riga porta il colore del suo cielo. */
.skyrows { display: grid; gap: 10px; }
.skyrows a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 8px clamp(16px, 3vw, 48px); align-items: end; padding: clamp(22px, 3.4vh, 36px) clamp(18px, 3vw, 40px); border-radius: 14px; background: var(--c); color: var(--t, #0c111c); text-decoration: none; border: 1px solid rgba(12, 17, 28, .12); }
.skyrows .t { font: 400 clamp(2.5rem, 6vw, 5rem)/.85 var(--mono); letter-spacing: -.07em; }
.skyrows b { font: 600 clamp(1.5rem, 2.6vw, 2.25rem)/1.05 var(--display); letter-spacing: -.025em; }
.skyrows span.d { font-size: clamp(1rem, 1.3vw, 1.1875rem); opacity: .82; }
.skyrows span.d::after { content: " \2192"; display: inline-block; transition: transform .2s var(--ease); }
.skyrows a:hover span.d::after { transform: translateX(5px); }

/* Chi siamo: tre esperienze su tre righe sfalsate che convergono, non tre card. */
.threads { display: grid; gap: clamp(18px, 3vh, 30px); margin-top: clamp(30px, 5vh, 56px); }
.threads li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(20px, 4vw, 56px); padding-top: 18px; border-top: 2px solid var(--mark); }
.threads li:nth-child(2) { margin-left: clamp(0px, 7vw, 110px); }
.threads li:nth-child(3) { margin-left: clamp(0px, 14vw, 220px); }
.threads h3 { font: 600 clamp(1.375rem, 2.3vw, 2rem)/1.1 var(--display); letter-spacing: -.022em; }
.threads p { color: var(--fg2); max-width: 44ch; }
.bigline, .prose p.bigline { margin-top: clamp(36px, 6vh, 64px); color: var(--fg); font: 600 clamp(1.75rem, 3.8vw, 3.375rem)/1.05 var(--display); letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.bigline em { font-style: normal; color: var(--mark); }
.prose p { max-width: 60ch; color: var(--fg2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.prose p + p { margin-top: 16px; }

/* I sette «che»: elenco tipografico. */
.wishes { margin-top: clamp(26px, 4vh, 44px); border-top: 1px solid var(--line); max-width: 900px; }
.wishes li { display: grid; grid-template-columns: 3ch 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 600 clamp(1.25rem, 2.2vw, 1.875rem)/1.15 var(--display); letter-spacing: -.02em; }
.wishes li span { font: 500 .8125rem/2.4 var(--mono); letter-spacing: 0; color: var(--fg2); }

/* Contatti. */
.picked { margin-bottom: 4px; padding: 10px 14px; border-radius: 10px; background: #0c111c; color: #f3eee2; font-weight: 600; font-size: .9375rem; }
.picked[hidden] { display: none; }
.direct { margin-top: clamp(26px, 4vh, 40px); border-top: 2px solid var(--fg); max-width: 640px; }
.direct div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.direct dt { font: 500 .8125rem/1.7 var(--mono); color: var(--fg2); }
.direct dd { font: 600 1.0625rem/1.4 var(--display); }
.direct a { color: inherit; text-underline-offset: 5px; }
.aside-note { border-top: 2px solid var(--fg); padding-top: 18px; }
.aside-note b { display: block; font: 600 1.25rem/1.2 var(--display); letter-spacing: -.012em; }
.aside-note p { margin-top: 8px; color: var(--fg2); max-width: 40ch; }

/* Pagine di servizio. */
.short { min-height: 62vh; }
.short .lead { max-width: 54ch; }
.linkrow { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: clamp(26px, 4vh, 40px); }
.legalbox { margin-top: clamp(26px, 4vh, 40px); padding: clamp(18px, 3vw, 30px); border: 2px solid var(--fg); border-radius: 14px; max-width: 760px; }
.legalbox b { display: block; font: 600 1.25rem/1.2 var(--display); }
.legalbox p { margin-top: 8px; color: var(--fg2); }
.outline { margin-top: clamp(30px, 5vh, 52px); max-width: 760px; border-top: 1px solid var(--line); counter-reset: o; }
.outline li { display: grid; grid-template-columns: 3ch 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: o; }
.outline li::before { content: counter(o, decimal-leading-zero); font: 500 .8125rem/1.9 var(--mono); color: var(--fg2); }
.outline h2 { font: 600 1.25rem/1.25 var(--display); letter-spacing: -.012em; }
.outline p { margin-top: 4px; color: var(--fg2); font-size: .9375rem; }

@media (max-width: 860px) {
  .chap, .threads li, .figs { grid-template-columns: 1fr; }
  .chap > .num { display: flex; align-items: baseline; gap: 14px; font-size: 2.5rem; }
  .chap > .num small { margin-top: 0; }
  .threads li:nth-child(2) { margin-left: 18px; }
  .threads li:nth-child(3) { margin-left: 36px; }
  .figs { border-top: 0; gap: 0; }
  .figs li { border-top: 2px solid var(--fg); padding-block: 16px 22px; }
  .sols a { grid-template-columns: 5.5ch 1fr auto; }
  .sols span.d { grid-column: 2; }
  .skyrows a { grid-template-columns: 1fr; align-items: start; }
  .people li { min-height: 0; grid-template-columns: auto 1fr; align-items: center; }
  .people .ph { width: 60px; height: 60px; }
  .direct div { grid-template-columns: 1fr; gap: 2px; }
  .voices .lane, .voices .mark { grid-template-columns: 5em 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sols a::after, .skyrows span.d::after { transition: none; }
}

/* Sui cieli chiari l'accento è l'inchiostro: la frase in due tempi si legge con la prima parte attenuata. */
[data-theme="light"] .bigline, [data-theme="light"] .prose p.bigline { color: rgba(12, 17, 28, .62); }
[data-theme="light"] .bigline em { color: #0c111c; }