/* Tavola di riferimento: Palette e info LibraStudio.png, 19/09/2026.
   Oro unico: #B08D57. Le tinte neutre ausiliarie servono alla leggibilità.
   Revisione: sfondi petrolio e bianco; grafite per header, testi e dettagli.
   Oro esatto nei loghi e negli accenti; testo piccolo bianco sul petrolio. */
:root {
  --night:#171717; --deep:#214E4B; --cream:#FFFFFF;
  --gold:#B08D57; --olive:#214E4B; --muted:#bcbab5;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Manrope','Segoe UI',sans-serif;
}
body {font-weight:400; font-synthesis:none; background:var(--olive);}
h1,h2,h3 {font-weight:500; line-height:1.04; letter-spacing:-.025em;}
h2 {font-size:clamp(42px,4.7vw,72px);}
h3 {font-size:32px;}
.hero-copy,.intro-grid>* ,.section-heading>* ,.start-copy,.team-copy {min-width:0;}
.hero h1 {font-size:clamp(46px,5.8vw,98px); line-height:1.01; font-weight:500; letter-spacing:-.035em; white-space:normal;}
.hero-line {white-space:nowrap;}
.hero .eyebrow {letter-spacing:.12em;}
.intro-grid h2 {font-size:clamp(44px,4.9vw,76px);}
.start-copy h2 {font-size:clamp(48px,5.2vw,80px);}
.team h2,.section.team h2 {font-size:clamp(42px,4.3vw,66px);}
.final-cta h2 {font-size:clamp(46px,5.2vw,80px);}
.manifesto p {font-size:clamp(38px,5.1vw,78px); font-weight:500; line-height:1.1;}
.course-card h3 {font-size:clamp(32px,3vw,44px); line-height:1.08;}
.small-card h3 {font-size:clamp(30px,2.7vw,40px);}
.location-panel h3 {font-size:clamp(36px,3.6vw,50px);}
.faq h2 {font-size:clamp(42px,4.4vw,62px);}
.finder-result h3 {font-size:42px;}
.suggestion-name {font-weight:500; line-height:1.12; font-size:30px;}
.ticker-track>span {font:500 25px/1.2 var(--display); letter-spacing:.06em;}
.hero-watermark {font-weight:500;}
.lift-label {font-family:var(--body); font-size:17px; line-height:1.3; letter-spacing:.025em;}
.method-step summary h3,.values h3 {font-family:var(--body); font-weight:500;}
.button,.option b,.header nav a {font-weight:500;}
.button.gold:hover {background:var(--cream); color:var(--night);}
.light .gold-text,.light .text-link:hover {color:var(--olive);}
.olive-card {color:var(--cream);}
.cream-card {background:#FFFFFF;}
.team,.locations,.studio-plate {background:var(--cream);}
.finder {background:var(--olive); border:1px solid #B08D5766;}
.option {background:#FFFFFF05;}
.option:has(input:checked) {background:#B08D5714;}
.manifesto {background:var(--olive);}
.manifesto p {background:linear-gradient(90deg,#FFFFFF var(--statement-progress,100%),#FFFFFFaa var(--statement-progress,100%)); background-clip:text; -webkit-background-clip:text;}
.lift-stage {background:var(--olive); box-shadow:none;}
.stars {color:var(--olive);}
.visual-label.rating .stars svg {fill:var(--olive);}
.fab small {color:var(--night);}
.fab:hover {background:var(--cream);}
.circle-cta:hover {background:var(--gold); color:var(--night);}
.footer .brand img.brand-cutout,.header .brand img.brand-cutout {filter:none;}
@media(min-width:1700px) {.hero h1{font-size:98px;}}
@media(min-width:821px) and (max-width:1100px) {
  .hero h1{font-size:5.65vw;}
  .intro-grid h2{font-size:4.8vw;}
}
@media(min-width:561px) and (max-width:820px) {
  .hero h1{font-size:5.7vw;}
  .hero-visual{margin-left:15px;}
  .intro-grid h2{font-size:5.7vw;}
  .start-copy h2{font-size:58px;}
  .section-heading h2{font-size:44px;}
}
@media(max-width:560px) {
  .hero h1{font-size:clamp(36px,10.2vw,56px); line-height:1.04;}
  .hero .eyebrow{letter-spacing:.045em;}
  .hero-copy>p{line-height:1.75;}
  .intro-grid h2{font-size:clamp(36px,10.5vw,56px);}
  .start-copy h2{font-size:clamp(42px,12vw,62px);}
  .team h2,.section.team h2{font-size:clamp(36px,10vw,52px);}
  .final-cta h2{font-size:clamp(36px,10.3vw,56px);}
  .section-heading h2{font-size:clamp(34px,9.9vw,52px);}
  .course-card h3{font-size:38px;}
  .small-card h3{font-size:clamp(30px,8.5vw,34px);}
  .finder-result h3{font-size:36px;}
  .lift-label,.lift-compact .lift-label{font-size:13px;}
  .footer .social-links>a{font-size:12px; gap:8px;}
}
@media(prefers-reduced-motion:reduce){.manifesto p{background:none; color:var(--cream);}}
.motion-off .manifesto p{background:none; color:var(--cream);}

/* Revisione Carlo: i due fondi principali sono petrolio e bianco. */
.hero,.method,.start,.final-cta,.footer {background:var(--olive);}
html .header,html .header.scrolled {background:var(--night);}
.ticker {background:#FFFFFF; color:var(--olive); border-block:1px solid #214E4B22;}
.ticker b {color:var(--gold);}
.cream-card {border:1px solid #214E4B22;}
.visual-label,.visual-label.rating {background:#FFFFFF;}
.bubble,.copy-fallback,.finder-bottom,dialog {background:var(--olive);}
.finder-bottom::before {background:linear-gradient(180deg,#214E4B00,#214E4B);}
.bubble {color:#FFFFFF;}
.suggestion,.suggestion-add:has(input:checked) {background:#FFFFFF08;}
.method-step[open] summary h3,.method-step[open] summary>span,
.step-content .tiny,.finder-top>.tiny,.start-after-label,.lift-label,.lift-count,
.finder-preview.complete>.tiny,.suggestion>.tiny,.dialog-meta,.circle-cta>b,
.start-after .after li>span {color:#FFFFFF;}
:is(.hero,.method,.start,.final-cta,.footer,dialog) .text-link:hover {color:#FFFFFF; border-bottom-color:var(--gold);}
.circle-cta:hover>b,.circle-cta:active>b {color:var(--night);}

/* Riquadri avorio, team individuale e icone indipendenti dai font emoji. */
:root {--ivory:#F4F0E7;}
.philosophy .intro-body {background:var(--ivory); padding:clamp(24px,3vw,42px); max-width:none;}
.philosophy .intro-body>p:not(.lead) {max-width:none;}
.philosophy .intro-body .text-link {gap:16px;}
#percorso-belongevity,#percorso-functional,#percorso-massaggio {background:var(--ivory); border:1px solid #214E4B14;}
.stars,.visual-label.rating .stars {color:var(--gold);}
.stars svg,.visual-label.rating .stars svg {fill:var(--gold);}
.ticker-separator svg {display:block; width:24px; height:24px;}
.team-heading {display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:40px;}
.team-heading .team-intro {max-width:570px; margin:18px 0 0;}
.team-instruction {font-size:13px; color:#555555; line-height:1.7; flex-shrink:0;}
.people-grid {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px;}
.person-card {min-width:0;}
.person-flip {display:block; width:100%; aspect-ratio:1; position:relative; perspective:1100px; border:0; border-radius:22px; padding:0; background:transparent; color:var(--olive); text-align:left;}
.person-rotor {display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.7,.2,1);}
.person-flip.is-flipped .person-rotor {transform:rotateY(180deg);}
.person-front,.person-back {position:absolute; inset:0; display:flex; border-radius:22px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid #214E4B18;}
.person-front {background:var(--ivory); transform:rotateY(0deg);}
.person-back {background:var(--olive); color:#FFFFFF; transform:rotateY(180deg); padding:28px; align-items:center; justify-content:center;}
.person-placeholder {width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding-bottom:30px;}
.person-initials {font:400 clamp(46px,5vw,76px)/1 var(--display); letter-spacing:-.025em;}
.person-photo-note {font:400 12px/1.5 var(--body); color:#555555;}
.person-portrait {width:100%; height:100%; object-fit:cover; object-position:center;}
.person-cue {position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:10px; font:500 11px/1.4 var(--body);}
.person-front .person-cue {background:var(--ivory); border-radius:30px; padding:7px 10px;}
.person-cue svg {width:19px; height:19px;}
.person-bio {font:400 18px/1.65 var(--body); max-height:calc(100% - 32px); overflow-y:auto;}
.person-card h3 {font:500 18px/1.4 var(--body); letter-spacing:-.025em; margin:18px 0 7px;}
.person-role {font-size:12px; line-height:1.7; color:#555555;}
.team .team-note {margin-top:34px; max-width:750px; line-height:1.8;}
@media(hover:hover) {.person-flip:hover .person-front {border-color:var(--gold);} .person-flip:hover .person-cue svg {color:var(--gold);}}
@media(min-width:760px) and (max-width:1199px) {
  .people-grid {grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px 24px;}
  .person-card {grid-column:span 2;}
  .person-card:nth-child(4) {grid-column:2/span 2;}
  .person-card:nth-child(5) {grid-column:4/span 2;}
}
@media(min-width:431px) and (max-width:759px) {
  .people-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px;}
  .person-card:last-child {grid-column:1/-1; width:calc((100% - 20px)/2); justify-self:center;}
}
@media(max-width:759px) {.team-heading {display:block;} .team-instruction {margin-top:18px;} .team-instruction br{display:none;}}
@media(max-width:430px) {
  .people-grid {grid-template-columns:1fr; gap:34px; max-width:360px; margin-inline:auto;}
  .person-initials {font-size:76px;}
  .person-card h3 {font-size:19px;}
  .person-role {font-size:13px;}
  .philosophy .intro-body {padding:24px;}
}
@media(prefers-reduced-motion:reduce) {.person-rotor {transition:none;}}
.motion-off .person-rotor {transition:none;}

/* Atleta sul fondo petrolio: abbigliamento nero e niente alone sul petto. */
.lifter #athlete-torso {fill:var(--night);}
.lifter .athlete-legs {stroke:var(--night);}
.lift-stage[data-lift-step="3"] .mark-body {display:none;}

/* === B01 · richieste di Carlo e correzioni dopo la verifica (Audex, 21/09/2026) === */
/* Oro del marchio nei titoli delle sezioni chiare: «TEAM.» e «CHIAIA» (richiesta di Carlo). Nelle sezioni chiare .gold-text diventa petrolio
   (regola qui sopra), quindi serve una classe a parte. Oro su bianco fa 3,09:1: va bene solo per titoli grandi, mai per testi piccoli. */
.brand-gold,.light .brand-gold {color:var(--gold);}
/* Logo senza alone (richiesta di Carlo): motion.css gli dava un'ombra luminosa oro fissa, una più forte al passaggio e l'animazione «logo-breathe»,
   che anima proprio il bagliore: un'animazione vince sulle dichiarazioni normali, per questo il filter:none messo più su non bastava.
   Resta solo il lieve movimento verticale di 2px, senza luce. I file del logo (SVG, PNG, PDF, EPS) sono tinte piatte: lì non c'è nessun alone. */
@keyframes logo-float {0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}
html .brand img.brand-cutout,html .brand:hover img.brand-cutout,html .header.scrolled .brand img.brand-cutout {filter:none; animation-name:logo-float;}
/* Cifre: Cormorant Garamond usa di default le cifre minuscole («VIA DEI MILLE 4o.», «2o1», «5,o»). Il file ha la funzione OpenType lnum:
   si chiedono le cifre maiuscole ovunque (Manrope le ha già: per lui non cambia nulla). */
*,*::before,*::after {font-variant-numeric:lining-nums !important;}
/* Perché su tutti gli elementi e con !important: la scorciatoia «font:» (usata da body e da molte regole) riporta font-variant-numeric a normal,
   quindi ereditarla da :root non basta. Nel sito la proprietà non è usata altrove; se un giorno servono cifre tabellari, vanno dichiarate anch'esse con !important. */
/* Contrasto: il grigio secondario #bcbab5 fa 4,80:1 sul petrolio pieno, ma sui petrolio schiariti (opzione scelta, riquadro del suggerimento) scendeva a 4,42:1. */
.option small,.suggestion-why,.suggestion-note {color:#c4c2bd;}
/* === fine B01 === */

/* === B02 · il team passa a sette schede (Audex, 21/09/2026) === */
/* Le schede erano cinque e la griglia aveva cinque colonne fisse. Con sette persone restavano due schede
   spaiate in fondo a sinistra, e sul tablet le regole nth-child(4) e nth-child(5) centravano la riga sbagliata.
   Qui la griglia diventa una fila che va a capo e si centra da sola: l'ultima riga resta al centro comunque
   sia, e se domani le persone diventano sei o otto il disegno regge lo stesso, senza toccare il CSS.
   Quattro schede per riga sul desktop (erano cinque: più grandi, i volti si leggono meglio), tre sul tablet,
   due sul telefono grande, una sotto i 430 px. Le vecchie regole grid-* restano nel file ma in una fila
   flessibile non hanno effetto: le larghezze qui sotto le sostituiscono. */
.people-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:34px 28px;}
.person-card {flex:0 0 calc((100% - 84px)/4); max-width:calc((100% - 84px)/4);}
@media(min-width:760px) and (max-width:1199px) {
  .people-grid {gap:32px 24px;}
  .person-card,.person-card:nth-child(4),.person-card:nth-child(5) {flex-basis:calc((100% - 48px)/3); max-width:calc((100% - 48px)/3);}
}
@media(min-width:431px) and (max-width:759px) {
  .people-grid {gap:30px 20px;}
  .person-card,.person-card:last-child {flex-basis:calc((100% - 20px)/2); max-width:calc((100% - 20px)/2); width:auto;}
}
@media(max-width:430px) {
  .people-grid {gap:34px; max-width:360px; margin-inline:auto;}
  .person-card,.person-card:last-child {flex-basis:100%; max-width:100%; width:auto;}
}
/* === fine B02 === */

/* === B03 · la foto dei due soci (Audex, 21/09/2026) === */
/* Prima qui c'era lo scatto di un post Instagram, con sopra la scritta «CHI SIAMO»: il blocco K27 di styles.css
   ritagliava una finestra di 860 × 675 al centro del file proprio per tenere quella scritta fuori campo.
   Dal 21/09 c'è la foto vera dei soci (Ciro e Gaetano, stretta di mano, servizio del 19/09, scelta da Carlo):
   quella finestra taglierebbe le mani, che sono il senso della foto. Qui l'immagine torna a riempire la cornice
   in modo normale, appoggiata un po' più in alto del centro così che restino dentro sia i volti sia le mani.
   Restano com'erano la desaturazione, lo zoom al passaggio e l'animazione d'ingresso. */
.hero .photo-frame img.hero-photo,.card-photo img {
  position:absolute; left:0; top:0; width:100%; height:100%; max-width:100%;
  object-fit:cover; object-position:center 45%; transform-origin:50% 45%;
}
/* === fine B03 === */

/* === B04 · le schede dei percorsi si girano (Audex, 21/09/2026) === */
/* Richiesta di Carlo: davanti nome, claim e la frase che descrive il percorso; il dettaglio solo dopo il clic, sul retro.
   Le due facce stanno nella stessa cella di una griglia (grid-area 1/1) invece che in posizione assoluta: così l'altezza
   della scheda la decide la faccia più lunga, il retro non va mai tagliato e non serve farlo scorrere.
   Bordo e fondo passano dalla scheda alle facce, altrimenti resterebbero fermi mentre il contenuto gira. */
.course-card.flip-card {padding:0; background:transparent; border:0; overflow:visible; perspective:1500px;}
.flip-card .course-rotor {display:grid; flex:1; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.flip-card.is-flipped .course-rotor {transform:rotateY(180deg);}
.flip-card .course-front,.flip-card .course-back {grid-area:1/1; display:flex; flex-direction:column; padding:28px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; border-radius:2px;}
.flip-card .course-front {cursor:pointer;}
/* Le tre facce davanti sono tutte in avorio (chiesto da Carlo il 21/09: prima BeLongevity era bianca e Osteopatia prendeva
   il bianco della sezione, solo Functional Training risultava avorio). Il colore sta qui sulla faccia, non sulla scheda,
   così non dipende da che cosa c'è sotto e le tre schede restano uguali fra loro. */
.flip-card .course-front {background:var(--ivory); border:1px solid #214E4B1F;}
.small-card.flip-card .course-front {padding-top:25px;}
.flip-card .course-back {transform:rotateY(180deg); background:var(--olive); color:#FFFFFF;}

/* fronte: il claim sotto il nome, poi la frase */
.course-claim {font:500 12px/1.5 var(--body); letter-spacing:.04em; color:var(--olive); margin:12px 0 0; max-width:none; min-height:0;}
.flip-card .course-front>p:not(.course-claim) {margin-top:10px;}
.flip-card .course-front .card-link {margin-top:auto;}

/* retro: occhiello, testo lungo, pulsante per la finestra del percorso, «Torna» in alto a destra */
.flip-card .course-back .tiny {color:#FFFFFFCC; padding-right:86px;}
.course-detail {margin-top:16px; flex:1;}
.course-detail p {font-size:12.5px; line-height:1.72; max-width:64ch; min-height:0; margin:0 0 12px; color:#FFFFFFEE;}
.course-detail p:last-child {margin-bottom:0;}
.flip-card .course-back .card-link {margin-top:20px; border-color:#FFFFFF59; color:#FFFFFF;}
.course-close {position:absolute; top:18px; right:18px; z-index:2; display:flex; align-items:center; gap:8px;
  background:#FFFFFF1A; border:1px solid #FFFFFF3D; color:#FFFFFF; border-radius:30px; padding:7px 13px;
  font:500 11px/1.4 var(--body); cursor:pointer;}
.course-close:hover {background:#FFFFFF2E;}
.flip-card .course-back {position:relative;}

@media(max-width:560px) {
  .flip-card .course-front,.flip-card .course-back {padding:23px;}
  .course-detail p {font-size:13px;}
  .course-close {top:14px; right:14px;}
}
@media(prefers-reduced-motion:reduce) {.flip-card .course-rotor {transition:none;}}
.motion-off .flip-card .course-rotor {transition:none;}
/* === fine B04 === */

/* === B05 · il quinto percorso, «Nutrition» (Audex, 21/09/2026) === */
/* Con cinque schede la griglia larga non regge più com'era: BeLongevity occupava due colonne e la quinta
   sarebbe rimasta spaiata in fondo a sinistra. Da 1201 px la foto resta alta due righe a sinistra e le altre
   quattro si dispongono due per due alla sua destra, tutte della stessa larghezza.
   Tra 561 e 1200 px le schede stanno a due a due e l'ultima prende la riga intera, così non resta sola. */
@media(min-width:1201px) {
  .course-grid>.cream-card {grid-column:auto;}
}
@media(min-width:561px) and (max-width:1200px) {
  .course-grid>.course-card:last-child {grid-column:1/-1;}
}
/* === fine B05 === */

/* === B06 · le bio vere sul retro delle schede del team (Audex, 24/09/2026) === */
/* Il retro era un quadrato con il testo a 18 px, pensato per «Bio in arrivo.»: una bio vera (quella di Giovanni
   Sorrentino è di 115 parole) ci sta per un quarto, e il resto andava fatto scorrere dentro la scheda, cosa che
   sul telefono si confonde con il tocco che la rigira. Qui il retro si allunga quanto serve, ma solo mentre la
   scheda è girata: la foto resta quadrata e le schede ferme restano tutte uguali.
   Stesso principio dei percorsi (B04): le due facce nella stessa cella di una griglia. La faccia davanti ha il suo
   quadrato; quella dietro, finché la scheda non è girata, resta in posizione assoluta e non conta nell'altezza;
   girata, entra nella cella e la allunga se il testo supera il quadrato. Una bio corta resta nel quadrato.
   Il testo scende a 14 px (come i testi lunghi dei percorsi) e sotto lascia il posto a «Torna alla foto».
   Quando la scheda torna alla foto si accorcia di colpo: team.js riporta in vista il suo inizio se è finito sopra lo schermo. */
.person-flip {aspect-ratio:auto;}
.person-rotor {display:grid; height:auto;}
.person-front {position:relative; inset:auto; grid-area:1/1; width:100%; aspect-ratio:1; align-self:start;}
.person-back {grid-area:1/1; padding:26px 24px 58px;}
.person-flip.is-flipped .person-back {position:relative; inset:auto;}
.person-bio {font-size:14px; line-height:1.7; max-height:none; overflow:visible;}
@media(max-width:430px) {
  .person-back {padding:24px 22px 58px;}
  .person-bio {font-size:15px;}
}
/* Schede strette (sotto i 260 px di lato: tablet in verticale con tre schede per riga, telefono girato, portatile piccolo) — meno margine e testo un filo più piccolo,
   così la colonna guadagna qualche battuta per riga e il retro si allunga meno. Si misura la scheda, non lo schermo:
   le schede strette capitano a larghezze diverse (due, tre o quattro per riga). */
.person-card {container-type:inline-size;}
@container (max-width:260px) {
  .person-back {padding:22px 18px 56px;}
  .person-bio {font-size:13.5px; line-height:1.62;}
}
/* === fine B06 === */

/* === B07 · bio a paragrafi (Audex, 01/10/2026) === */
/* Le bio sono i testi interi delle persone, con i loro paragrafi (dal 05/10, Carlo: niente più versioni accorciate; il retro si allunga
   quanto serve, blocco B06). Dentro un pulsante non si possono usare <p>: i paragrafi sono span.bio-p messi a blocco.
   (Fino al 04/10 qui c'era anche lo stile delle stanghette in oro della prima bio di Artur: la sua bio nuova non le ha più.) */
.person-bio .bio-p {display:block;}
.person-bio .bio-p+.bio-p {margin-top:.75em;}
/* === fine B07 === */

/* === B08 · dati legali nel footer (Audex, 12/10/2026) === */
/* Dal 12/10 il sito è sul dominio librastudionapoli.it e il footer porta ragione sociale, sede legale e partita IVA della società di Chiaia
   (art. 35 DPR 633/1972: la P.IVA va nella home page). Sul desktop la riga del footer era a 9 px: la riga legale sale a 11 px, come il resto del testo (K30). */
.footer-bottom>span:first-child {font-size:11px;}
/* === fine B08 === */