/* chi-siamo.css: la pagina Chi siamo (PIANO-PAGINE §4.5). Si carica DOPO shell.css e film.css: la strada di NetSource e' un film come lavori.html
   (scena a schermo pieno, schede a sinistra); le persone, le marche, il Matsuri e l'invito sono sezioni a fondo pieno che passano sopra la scena. */

.ab-year { font-family: var(--pixel); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); line-height: 1; color: var(--cyan); margin-bottom: .5rem; }
.cs-hero h1 { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }

/* la scena che arriva dopo l'immagine di ripiego (la rete molto lenta, cs-slow: chi-siamo.js aspetta che Leo e Noah siano in scena): lo stacco del film
   (regia.js), prima si spegne l'immagine e poi si accende la scena. Nella dissolvenza incrociata di film.css si vedevano due Leo, quello dell'immagine e
   quello della scena, uno accanto all'altro (n.100) */
.cs-slow.s3d-on .cs-still { transition-duration: .18s; }
.cs-slow.s3d-on .cs-stage canvas { transition-duration: .38s; transition-delay: .18s; }

/* le sezioni a fondo pieno */
.ab-solid { position: relative; z-index: 3; background: var(--scene-bg); padding: clamp(4rem, 12vh, 7rem) var(--pad); border-top: 1px solid rgb(245 243 238 / .1); }
.ab-in { max-width: 62rem; margin-inline: auto; }
.ab-solid h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; }

/* le persone: due schede con la foto vera */
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: var(--s-5); }
.ab-person { border-radius: 1.4rem; overflow: hidden; background: rgb(245 243 238 / .04); border: 1px solid rgb(245 243 238 / .1); padding-bottom: 1.4rem; }
.ab-person img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-person h3 { font-size: var(--t-step); font-weight: 720; margin: 1.1rem 1.4rem 0; }
.ab-role { margin: .25rem 1.4rem 0; font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.ab-person p:not(.ab-role) { margin: .6rem 1.4rem 0; color: var(--fg-mute); font-size: var(--t-lead); line-height: 1.5; }
.ab-big { margin-top: var(--s-5); max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
@media (max-width: 40rem) { .ab-people { grid-template-columns: 1fr; } }

/* le marche */
.ab-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; margin-top: var(--s-5); }
.ab-logos li { display: grid; place-items: center; min-height: 4.5rem; padding: 1rem 1.6rem; border-radius: 1rem; background: #f5f3ee; }
.ab-logos img { display: block; height: 2rem; width: auto; }
.ab-logos li.on-dark { background: #1d232b; border: 1px solid rgb(245 243 238 / .18); }   /* il marchio Sophos e' la versione bianca */
.ab-note { margin-top: var(--s-4); color: var(--fg-mute); font-size: var(--t-lead); }

/* il Matsuri: la carta nei colori del festival (washi, inchiostro, rosso, oro); i colori restano dentro la carta */
.jm-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: var(--s-4); padding: clamp(1.25rem, 3vw, 2rem); background: #e9e2d4; color: #1a1a1a; border-radius: .25rem; outline: 1px solid #caa64b; outline-offset: -.6rem; }
.jm-card img { width: 100%; height: auto; }
.jm-card h2 { color: #1a1a1a; font-size: var(--t-step); }
.jm-card p { margin-top: .6rem; color: #1a1a1a; line-height: 1.55; }
.jm-meta { font-size: var(--t-sm); color: #4a4a4a !important; }
.jm-meta a { color: #bc0b31; font-weight: 650; }
@media (max-width: 34rem) { .jm-card { grid-template-columns: 1fr; } .jm-card img { width: 7rem; } }

/* l'invito */
.ab-visit .cta { margin-top: var(--s-4); }
.cs-end { height: 1px; }

/* ogni tappa e' lunga da scorrere quanto la sua coreografia: --cs-s = i secondi che Leo e Noah ci mettono al passo naturale (storia3d.js velMax:
   camminate a 1.8 m/s, ogni gesto il suo tempo), --cs-sec = quanto scorrimento per ogni secondo. Cosi' chi legge a passo normale (~270 px/s a 1440x900)
   vede Leo e Noah al naturale, e nessuna tappa corre. 8 ott 2026, Noah: «lo scroll del chi siamo fa ancora muovere leo e noah velocissimi» (prima:
   210 e 330svh per 1.5, uguali per tutte; le tappe 2009-oggi, le piu' fitte, erano le piu' corte). Se cambia una coreografia, si rimisurano i secondi
   (somma di 0.002 / velMax(T) sulla tappa, con ?fast=1: window.__velMax). La scheda resta ferma mentre la scena va avanti */
:root { --cs-sec: 30svh; }
.cs-steps2, .cs-steps3 { min-height: calc(var(--cs-s, 15) * var(--cs-sec)); align-items: start; }
.cs-beat[data-scene="y1998"] { --cs-s: 16.4; }
.cs-beat[data-scene="y2009"] { --cs-s: 21.3; }
.cs-beat[data-scene="y2016"] { --cs-s: 15.6; }
.cs-beat[data-scene="y2021"] { --cs-s: 22.9; }
.cs-beat[data-scene="y2022"] { --cs-s: 23.7; }
.cs-beat[data-scene="oggi"] { --cs-s: 24.6; }
.cs-beat[data-scene="marche"] { --cs-s: 15.4; }
.cs-beat[data-scene="matsuri"] { --cs-s: 13; }
.cs-beat[data-scene="dove"] { --cs-s: 16.6; }
/* (movimento ridotto: immagini ferme, niente da seguire al passo; le tappe tornano corte) */
@media (prefers-reduced-motion: reduce) { :root { --cs-sec: 12svh; } }
.cs-steps2 .cs-card, .cs-steps3 .cs-card { position: sticky; top: calc(var(--bar-h) + 20svh); }
/* n.98: la scheda ferma non e' mai piu' alta dello spazio che ha. Sul telefono le marche e il Matsuri (sui telefoni corti anche Oggi) uscivano dal fondo
   dello schermo finche' la tappa non finiva: il link japanmatsuri.org, preso con il Tab, restava fuori e non si poteva leggere. Se non ci sta, la scheda
   scorre dentro di se' (il fuoco ci porta il suo contenuto, il dito pure); la sfumatura in fondo (.cs-more, da chi-siamo.js) dice che c'e' altro */
.cs-steps2 .cs-card, .cs-steps3 .cs-card { max-height: calc(100svh - var(--bar-h) - 20svh - 1rem); overflow-y: auto; scrollbar-width: thin; }
.cs-steps2 .cs-card.cs-more, .cs-steps3 .cs-card.cs-more { mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); }
@media (max-width: 59.99rem), (max-aspect-ratio: 999/1000) {
  :root { --cs-sec: 27svh; }
  .cs-steps2 .cs-card, .cs-steps3 .cs-card { top: calc(var(--stage-h) + 1rem); max-height: calc(100svh - var(--stage-h) - 2rem); }
  /* (la scheda che scorre taglia quello che sporge: un poco di margine ai lati per il bagliore della riga accesa delle marche, il testo resta dov'era) */
  .cs-steps2 .cs-card:not(.jm-carta), .cs-steps3 .cs-card:not(.jm-carta) { width: calc(100% + 1.2rem); margin-inline: -.6rem; padding-inline: .6rem; }
}

/* le marche e il Japan Matsuri come tappe della strada (fuori.js): i marchi dentro la scheda scura; la scheda del festival in carta washi, con i suoi colori
   (restano dentro la sua carta), anche sul telefono dove le altre schede perdono il fondo */
/* le marche: il marchio a sinistra, cosa ci facciamo a destra; la riga si accende quando nella scena tocca a lei */
.cs-card .cs-brands { list-style: none; display: grid; gap: .5rem; margin-top: var(--s-4); }
.cs-card .cs-brands li { display: grid; grid-template-columns: 10.5rem 1fr; align-items: center; gap: 1rem; padding: .35rem .9rem .35rem .35rem; border-radius: 1rem; border: 1px solid transparent; transition: background .35s, border-color .35s; }
.cs-card .cs-brands li.is-on { background: color-mix(in oklab, var(--cyan) 12%, transparent); border-color: color-mix(in oklab, var(--cyan) 70%, transparent); box-shadow: 0 0 1.2rem -.4rem color-mix(in oklab, var(--cyan) 60%, transparent); }
.cs-brand-logo { display: grid; place-items: center; height: 3.1rem; border-radius: .75rem; background: #f5f3ee; }
.cs-brand-logo.on-dark { background: #1d232b; border: 1px solid rgb(245 243 238 / .18); }
.cs-brand-logo img { display: block; height: 1.35rem; width: auto; max-width: 84%; }
.cs-brand-what { font-weight: 600; line-height: 1.3; }
.cs-card .cs-brands-more { margin-top: var(--s-3); transition: color .35s; }
.cs-card .cs-brands-more.is-on strong { color: var(--cyan); }
@media (max-width: 720px) { .cs-card .cs-brands li { grid-template-columns: 8.6rem 1fr; gap: .8rem; } .cs-brand-logo { height: 2.7rem; } .cs-brand-logo img { height: 1.15rem; } }
.cs-card .cs-logos { gap: .7rem .9rem; margin-top: var(--s-4); }
.cs-card .cs-logos li { min-height: 3.2rem; padding: .65rem 1rem; border-radius: .8rem; }
.cs-card .cs-logos img { height: 1.45rem; }
.cs-card.jm-carta { background: linear-gradient(rgb(233 226 212 / .84), rgb(233 226 212 / .84)), #e9e2d4 url(../assets/brand/matsuri/jm-carta.webp) center / cover; color: #1a1a1a; border: 0; border-radius: .3rem; outline: 1px solid #caa64b; outline-offset: -.55rem; }
.jm-carta .kicker { color: #bc0b31; }
.jm-head { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.jm-head img { width: 4.6rem; height: auto; flex: none; }
.jm-carta h2 { color: #1a1a1a; }
/* (la regola delle schede scure in film.css, con i suoi :not(), vince sui colori: qui serve !important) */
.cs-card.jm-carta > p:not(.kicker) { color: #2b2f35 !important; }
.cs-card.jm-carta > p.jm-meta { font-size: var(--t-sm); color: #4a4a4a !important; }
.jm-carta .jm-meta a { color: #bc0b31; font-weight: 650; }
@media (max-width: 59.99rem), (max-aspect-ratio: 999/1000) {
  .cs-card.jm-carta { padding: 1.3rem 1.25rem; background: linear-gradient(rgb(233 226 212 / .84), rgb(233 226 212 / .84)), #e9e2d4 url(../assets/brand/matsuri/jm-carta.webp) center / cover; border-radius: .3rem; }
}

/* l'attribuzione dei dati del plastico, nella scheda "Dove lavoriamo": piccola e discreta, ma leggibile (contrasto del testo secondario) */
.cs-card .cs-attrib { margin-top: var(--s-4); font-size: .8125rem; line-height: 1.45; }
.cs-card .cs-attrib a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }