/* Font self-hosted (OFL, in /font): gli stessi assi che la proposta chiedeva a Google Fonts.
   Copiati da sito-in-costruzione/css/cantiere.css il 5/9/2026 (blocco 3a): zero egress. */
@font-face{
  font-family:"Newsreader";
  src:url("../font/newsreader.woff2") format("woff2");
  font-style:normal;font-weight:400 500;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../font/newsreader-italic.woff2") format("woff2");
  font-style:italic;font-weight:400 500;font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../font/public-sans.woff2") format("woff2");
  font-style:normal;font-weight:400 700;font-display:swap;
}

/* ============================================================
   «ROTATIVA» — lino.css: token, base tipografica e componenti
   condivisi da tutte e 7 le pagine. Qui vivono TUTTE le custom
   property: nessun altro foglio ne dichiara.
   Il registro è quello del periodico stampato: tela di lino
   fredda, fasce a tutta larghezza, un solo punto caldo (sabbia),
   rosso e ottone come inchiostri.
   ============================================================ */

:root{
  /* ---------- tela e carta (raffreddate: G >= R, mai virare al caldo) ---------- */
  --linen:#F0F1EC;            /* fondo di pagina */
  --paper:#FBFBF8;           /* schede, campi, fasce chiare */
  --sand:#F1E6D6;          /* UNICA fascia calda del sito (scelta di Giorgio, 25/7) */
  --border:#C9C6B9;           /* cornice delle schede: filetto, mai colore */
  --field-line:#7D786D;   /* confine dei campi: 3,9:1 su carta, regola 1.4.11 */

  /* ---------- inchiostri ---------- */
  --ink:#24241F;      /* testo corrente — 13,6:1 su lino */
  --gray-1:#57534B;        /* secondario — 6,7:1 */
  --gray-2:#605B53;        /* note e didascalie — 5,9:1 */
  --gray-3:#6B6660;        /* placeholder e meta — 5,0:1 */

  /* ---------- rossi e bordeaux: invariati e caldi ---------- */
  --red:#B21E28;           /* occhielli, cifre, bottone pieno — 5,95:1 su lino */
  --red-deep:#8E1721;
  --bordeaux:#7A1119;
  --bordeaux-deep:#5E0F16;   /* fasce scure */
  --footer:#3A0B10;

  /* ---------- ottone spento ---------- */
  --gold-text:#CFAF66;       /* SOLO sui fondi scuri: 5,6:1 su bordeaux-cupo */
  --gold-rule:#B98F3E;   /* filetti e cornici: mai testo di corpo */
  --bronze:#6E5A2A;          /* l'oro che scrive su fondo chiaro */

  /* ---------- testo sui fondi scuri: sempre tinto, mai grigio ---------- */
  --ivory:#F6EFE9;
  --ivory-body:#E6CFC6;
  --ivory-soft:#D3AAA1;

  /* ---------- materia ---------- */
  --stripes:rgba(246,239,233,.055);
  --glow:rgba(178,30,40,.18);
  --shadow-dark:0 6px 14px rgba(24,8,10,.42);      /* acromatica: sulle fasce scure */
  --shadow-light:0 4px 12px rgba(90,70,40,.14);
  --shadow-lift:0 8px 14px rgba(122,17,25,.14);   /* solo dentro :hover, sfocatura corta */

  /* ---------- caratteri ---------- */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  /* ---------- misure e moto ---------- */
  --container:1200px;
  --container-narrow:800px;
  --gutter:clamp(1.25rem,4vw,1.75rem);
  --header-height:74px;
  --ease-soft:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;line-height:1.65;   /* pubblico over 40: corpo >= 18px */
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2.25rem,1.35rem + 3.1vw,3.5rem);line-height:1.07;letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.375rem);line-height:1.14;letter-spacing:-.01em}
h3{font-size:1.3125rem;line-height:1.3}
/* misura in rem, non in ch: il «ch» di Public Sans è largo e lasciava
   passare righe da 85 caratteri */
p{margin:0;max-width:38rem;text-wrap:pretty}
img{max-width:100%}
ul,ol{margin:0;padding:0}
a{color:var(--red);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red-deep)}
::selection{background:var(--bordeaux);color:var(--paper)}
[id]{scroll-margin-top:calc(var(--header-height) + 1.25rem)}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
.band-dark :focus-visible,.footer :focus-visible{outline-color:var(--gold-text)}
.button-solid:focus-visible,.header-phone:focus-visible,.call-bar:focus-visible{
  outline-color:var(--paper);outline-offset:-5px;
}

/* i disegni riusati con <use>: fuori flusso, mai inline (CSP) */
.icon-defs{position:absolute;width:0;height:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:90;
  background:var(--bordeaux-deep);color:var(--ivory);
  font-weight:600;text-decoration:none;
  padding:.75rem 1.1rem;
}
.skip-link:hover,.skip-link:focus-visible{color:var(--ivory)}
.skip-link:focus-visible{left:12px;top:12px}

/* ============ TELAIO: la gabbia dell'impaginato ============ */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding-inline:var(--gutter)}

/* ============ FASCE: il ritmo verticale del periodico ============ */
.band{padding-block:clamp(3.5rem,5.5vw,5.5rem)}
.band-paper{background:var(--paper)}
.band-warm{background:var(--sand)}
.band-dark{
  position:relative;overflow:hidden;
  background:var(--bordeaux-deep);
  color:var(--ivory-body);
}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--ivory)}
/* le righine: retino di stampa in diagonale, mai a tutta pagina */
.stripes{
  position:absolute;inset:0 0 0 auto;width:46%;
  background-image:repeating-linear-gradient(135deg,var(--stripes) 0 2px,transparent 2px 26px);
  pointer-events:none;
}

/* ============ APERTURA DI SEZIONE: occhiello, tratto, titolo ============ */
/* Il tratto è un elemento vero, non uno pseudo dell'occhiello:
   è l'aggancio della regia e tiene il titolo staccato dall'etichetta. */
.kicker{
  font-size:.9375rem;font-weight:600;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);
}
.band-dark .kicker{color:var(--ivory-soft)}
.rule{
  display:block;width:44px;height:1px;
  margin:.85rem 0 1.05rem;
  background:var(--red);
  transform-origin:left center;
}
.band-dark .rule{background:var(--gold-rule);width:34px}
.section-intro{margin-bottom:clamp(2rem,3.5vw,2.75rem)}
.section-intro-center{text-align:center;max-width:42rem;margin-inline:auto}
.section-intro-center .rule{margin-inline:auto}
.section-intro-center p{margin-inline:auto}

/* ============ BOTTONI: quasi squadrati, ombra con offset ============ */
.button{
  display:inline-block;
  font-family:var(--sans);font-size:1rem;font-weight:700;line-height:1.5;
  letter-spacing:.01em;text-decoration:none;
  padding:.95rem 1.85rem;
  border:1px solid transparent;border-radius:3px;
  min-height:48px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.button-solid{background:var(--red);color:var(--paper);box-shadow:var(--shadow-light)}
.button-solid:hover{background:var(--red-deep);color:var(--paper)}
/* sulle fasce scure l'ombra è acromatica: un alone colorato su fondo cupo è decorazione */
.band-dark .button-solid{background:var(--gold-text);color:#2C1206;box-shadow:var(--shadow-dark)}
.band-dark .button-solid:hover{background:#DCC084;color:#2C1206}
.button-outline{color:var(--red);border-color:var(--red)}
.button-outline:hover{background:var(--red);color:var(--paper)}
.band-dark .button-outline{color:var(--ivory);border-color:rgba(246,239,233,.42)}
.band-dark .button-outline:hover{background:rgba(246,239,233,.12);color:var(--ivory)}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.arrow-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;
  color:var(--red);text-decoration:none;
  padding:.5rem 0;min-height:44px;
}
.arrow-link svg{width:26px;height:9px;transition:transform .25s var(--ease-soft)}
.arrow-link:hover svg{transform:translateX(5px)}
.arrow-link:hover{text-decoration:underline}

/* ============ PASTIGLIA: le icone stanno sempre in un tondo ============ */
.disc{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:#F6E7E2;color:var(--red);
}
.disc svg{width:22px;height:22px}
.disc-large{width:64px;height:64px}
.disc-large svg{width:28px;height:28px}
.disc-check{width:34px;height:34px;background:var(--bordeaux);color:var(--paper)}
.disc-check svg{width:15px;height:15px}

/* ============ STAMPA: la fotografia virata, solo CSS ============ */
.plate{
  position:relative;overflow:hidden;margin:0;
  background-color:#E4E5DE;
  background-image:repeating-linear-gradient(45deg,rgba(36,36,31,.07) 0 1px,transparent 1px 15px);
  /* livello composto a sé (5/9/2026, giro a vista del 3a): la foto col filter e il velo in multiply
     si dipingono UNA volta; quando la scheda si alza o la sezione affiora, si sposta il livello e
     basta. Senza, ogni fotogramma ridipingeva la foto filtrata: schede e reveal a scatti. */
  will-change:transform;
}
/* Viraggio deciso, non cosmetico: sei scatti di provenienza diversa devono
   sembrare stampati con gli stessi due inchiostri, come in un periodico. */
.plate img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) sepia(.16) contrast(1.06)}
/* z-index OBBLIGATORI: il filter sull'img la rende un contesto di impilamento,
   quindi si disegna insieme ai posizionati e, venendo dopo nell'albero, coprirebbe
   il velo. Senza queste due righe il viraggio a due inchiostri non si vede
   (stesso impianto di final-graphics1/css/carta.css:217-226). Non rimuovere. */
.plate::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bordeaux);opacity:.08;mix-blend-mode:multiply;
}
.plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid var(--border)}
/* sul bordeaux la foto va portata dentro la gamma della fascia, o stacca */
.plate-dark{background-color:#6D141C;background-image:repeating-linear-gradient(45deg,rgba(246,239,233,.05) 0 1px,transparent 1px 16px)}
.plate-dark img{filter:grayscale(.7) sepia(.28) contrast(1.1) brightness(.9)}
.plate-dark::before{background:var(--bordeaux-deep);opacity:.24}
.plate-dark::after{border-color:rgba(207,175,102,.34)}
/* ============ NUMERONE e ORARI: la telefonata ============ */
.hotline{
  display:inline-block;text-decoration:none;
  font-family:var(--serif);color:var(--gold-text);
  line-height:1.05;
}
.hotline .hotline-label{
  display:block;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory-soft);
  margin-bottom:.5rem;
}
.hotline .hotline-digits{display:block;font-size:clamp(2.5rem,1.6rem + 3.1vw,3.75rem);letter-spacing:-.01em}
.hotline:hover{color:#DCC084}
.hours{font-size:1rem;color:var(--ivory-soft);margin-top:1.1rem}
.tap-note{display:none;font-size:1rem;color:var(--ivory-soft);margin-top:.9rem}

@media (max-width:900px){
  .stripes{width:100%;opacity:.7}
}
@media (max-width:760px){
  .tap-note{display:block}
}
@media (max-width:360px){
  .hotline .hotline-digits{font-size:2.375rem}
}