/* Componenti condivisi delle sottopagine: barra in alto, footer, dialog della privacy.
   Gli stessi valori della home (assets/build/site.*.css: .top, .foot, dialog.tro). Non si ridefiniscono altrove. */
/* Tema: solo scuro, su ogni pagina e nella home (Fabio, 22 ottobre 2026: niente più chiaro, niente selettore).
   Gli stessi valori di brand/tokens.css. Le pagine non ridefiniscono questi colori.
   .palco: un riquadro scuro con i colori del tema (demo del Lab, slide social, illustrazioni delle regole). */
/* font del sito (tokens.css): una pagina li riceve da qui, i file si dichiarano con @font-face nella sua build */
:root{--f-display:"Anybody","Arial Narrow",system-ui,sans-serif;--f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
/* misure, spazi, raggi, ombre e tempi: copiati da brand/tokens.css (componenti.py controlla che restino uguali) */
:root{--max:1120px;--gutter:clamp(16px,4vw,56px);--top-h:58px;--measure:64ch;--measure-lead:42ch;--tap:44px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--r-ui:0;--r-pill:999px;--r-tile:20%;--r-window:18px;--shadow-hard:6px 6px 0 var(--brand);--shadow-dialog:10px 10px 0 var(--brand);--t-fast:.2s;--t-fade:.35s;--t-move:.5s;--ease:cubic-bezier(.2,.8,.2,1);--fs-label:12px;--fs-note:14px;--fs-ui:16px;--fs-text:18px;--fs-title-s:20px;--fs-card:26px;--z-bar:50;--z-toast:80;--z-game:94;--z-skip:120}
:root,.palco{color-scheme:dark;--paper:#0F1015;--wash:#1B1D25;--wash2:#23252F;--line:#2C2F39;--line2:#4A4E5C;--muted:#A0A4B0;--ink:#ECEDF2;--link:#8F8FFF;--on-link:#0F1015;--brand:#2B2BEA;--on-brand:#FFFFFF;--yellow:#FFC53D;--lilac:#8F8FFF;--coral:#FF7A66;--green:#2DD4A7;--pink:#FF6EB4;--on-yellow:#15161B;--dot:#22242C}
.palco{color:var(--ink)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skiplink{position:absolute;left:-999px;top:8px;z-index:var(--z-skip);background:var(--ink);color:var(--paper);padding:10px 14px}
.skiplink:focus{left:8px}

.sitebar{box-sizing:border-box;min-height:calc(env(safe-area-inset-top,0px) + 57.6875px);position:sticky;top:0;z-index:var(--z-bar);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) 12px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sitebar .brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:28px;position:relative}
/* aree da 44 px senza alzare la barra: la zona cliccabile si allunga sopra e sotto */
.sitebar .brand::after{content:"";position:absolute;inset:-8px 0}
.sitebar .brand-logo{width:26px;height:28px;flex:none;overflow:visible;color:var(--ink)}
.sitebar .brand-name svg{display:block;width:auto;height:auto}
/* percorso a briciole dopo il nome: stesso mono del selettore di lingua; i passaggi sono link, l'ultima voce è la pagina */
.sitebar .path{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.sitebar .crumbs{min-width:0}
.sitebar .crumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;min-width:0}
.sitebar .crumbs li{display:flex;align-items:center;gap:10px;min-width:0}
/* le voci prima dell'ultima non si stringono: se manca spazio si accorcia solo la pagina corrente, coi puntini */
.sitebar .crumbs li:not(:last-child){flex:none}
/* su telefono restano la prima voce e la pagina corrente: quelle in mezzo (es. Exploded UI in una scheda) lasciano spazio */
@media (max-width:480px){.sitebar .crumbs li:not(:first-child):not(:last-child){display:none}}
.sitebar .sep{font-family:var(--f-mono);font-size:var(--fs-note);color:var(--muted)}
.sitebar .sect{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;min-height:28px;display:inline-flex;align-items:center;padding:var(--s-1) 0;white-space:nowrap}
.sitebar a.sect:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.sitebar .sect[aria-current="page"]{color:var(--ink);display:block;line-height:20px;overflow:hidden;text-overflow:ellipsis}
/* targhetta accanto alla voce (Beta): pillola come i tag delle schede, ma col colore del testo */
.sitebar .crumbs .chip{flex:none;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--muted);padding:var(--s-1) var(--s-2);border-radius:var(--r-pill)}
@media (max-width:420px){.sitebar .crumbs li:has(.chip){gap:6px}.sitebar .crumbs .chip{padding:3px 6px;letter-spacing:.04em}}
.sitebar :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (max-width:560px){.sitebar .brand-name{display:none}}

.sitefoot{padding:clamp(56px,8vw,96px) 0 28px;border-top:1px solid var(--line);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5}
.sitefoot .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* la porta in cima al footer: stessi valori della home (.door-row in site.*.css) */
.door-row{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(56px,8vw,96px)}
.door-line{display:grid;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 78;font-size:clamp(34px,6vw,94px);line-height:.98;margin:0;max-width:16ch;text-wrap:balance}
.door-line > span{grid-area:1/1;align-self:end}
.door-line .dl-b,.door-line.shut .dl-a{visibility:hidden}
.door-line.shut .dl-b{visibility:visible}
.door{position:relative;flex:none;width:clamp(64px,6.6vw,92px);aspect-ratio:.62;box-sizing:border-box;margin:0;padding:0;border:2px solid var(--ink);border-bottom:0;background:none;color:inherit;perspective:320px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.door:focus-visible{outline-offset:6px}
.door-light{position:absolute;inset:3px 3px 0;background:var(--yellow);box-shadow:0 0 22px 2px rgba(255,197,61,.45);transition:opacity .35s ease .25s,box-shadow .35s ease .25s}
.door i{position:absolute;inset:3px 3px 0;background:var(--link);transform-origin:left center;transform:rotateY(-58deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.door i::after{content:"";position:absolute;right:14%;top:52%;width:12%;aspect-ratio:1;border-radius:50%;background:var(--paper)}
@media (hover:hover){.door:not(.shut):hover i{transform:rotateY(-46deg);transition-duration:.6s}}
.door.shut i{transform:rotateY(0deg);transition:transform .42s cubic-bezier(.6,0,.95,.45)}
.door.shut .door-light{opacity:0;box-shadow:none}
.door.thud{animation:thud .38s ease-out}
.door.creak i{animation:creak 1.6s ease-in-out}
@keyframes thud{0%{transform:none}25%{transform:translateX(-2px) rotate(-.8deg)}50%{transform:translateX(2px) rotate(.6deg)}75%{transform:translateX(-1px)}100%{transform:none}}
@keyframes creak{0%,100%{transform:rotateY(-58deg)}35%{transform:rotateY(-68deg)}70%{transform:rotateY(-52deg)}}
@media (prefers-reduced-motion:reduce){.door i,.door-light{transition:none !important}.door.thud,.door.creak i{animation:none}}
.sitefoot .foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,4vw,64px);padding-block:28px 40px;border-top:1px solid var(--ink)}
.sitefoot .foot-k{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3)}
.sitefoot .foot-k2{margin-top:28px}
.sitefoot .foot-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sitefoot .foot-links a,.sitefoot .mail a{color:var(--ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0}
.sitefoot .foot-links a:hover,.sitefoot .mail a:hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}
.sitefoot .mail{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin:0}
.sitefoot .mail a{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-note);overflow-wrap:anywhere}
.sitefoot .mail button{font:600 var(--fs-note) var(--f-body);color:var(--ink);background:none;border:1px solid var(--line);padding:6px 12px;min-height:var(--tap);cursor:pointer}
.sitefoot .foot-legal{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;justify-content:space-between;padding-top:var(--s-4);border-top:1px solid var(--line);font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sitefoot .linkish{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;margin:0;padding:0;min-height:var(--tap);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sitefoot a.linkish{display:inline-flex;align-items:center}
.sitefoot :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (max-width:760px){.sitefoot .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

.sitedlg{border:0;padding:0;width:min(620px,calc(100vw - 32px));max-height:min(84svh,760px);background:var(--wash);color:var(--ink);outline:1px solid var(--line);box-shadow:var(--shadow-dialog);overscroll-behavior:contain;font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5}
.sitedlg::backdrop{background:rgba(0,0,0,.72)}
.sitedlg-in{position:relative;padding:clamp(22px,4vw,36px)}
.sitedlg h2{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 88;font-size:clamp(34px,4.4vw,52px);line-height:1;margin:0 0 .3em}
.sitedlg-x{position:sticky;top:12px;float:right;z-index:1;width:44px;min-height:var(--tap);margin:-8px -8px 0 12px;padding:0;background:var(--paper);border:1.5px solid var(--line);color:var(--ink);font-size:var(--fs-title-s);line-height:1;cursor:pointer}
.sitedlg .pv-body{max-width:60ch}
.sitedlg .pv-body h3{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 96;font-size:var(--fs-title-s);line-height:1.2;margin:26px 0 6px}
.sitedlg .pv-body p{margin:0 0 10px}
.sitedlg .pv-body a{color:var(--link)}
.sitedlg .pv-body .pv-date{margin-top:22px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Disegni delle schede (DESIGN.md, Illustrazioni). Il riquadro prende .palco .dotgrid: scuro in ogni tema, puntini ogni 12 px.
   SVG con viewBox 240×140; i colori arrivano solo da queste classi, mai scritti nel disegno. */
.dotgrid{background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:12px 12px}
.f-blue{fill:var(--brand)} .f-white{fill:#fff;color:#fff} .f-ink{fill:var(--ink)} .f-dim{fill:var(--muted)} .f-muted{fill:var(--line2)}
.f-line{fill:var(--line)} .f-wash{fill:var(--wash)} .f-wash2{fill:var(--wash2)} .f-paper{fill:var(--paper)}
.f-yellow{fill:var(--yellow)} .f-lilac{fill:var(--lilac)} .f-coral{fill:var(--coral)} .f-green{fill:var(--green)} .f-pink{fill:var(--pink)}
.s-line{stroke:var(--line2);stroke-width:1} .s-paper{stroke:var(--paper);stroke-width:1.5;stroke-linejoin:round}
.s-dash{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4} .s-guide{fill:none;stroke:var(--pink);stroke-width:1.5;stroke-dasharray:3 4}
.s-blue{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round} .s-handle{stroke:var(--muted);stroke-width:1}
.t-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em} .t-chip{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.04em}
.t-glyph{font-family:var(--f-display);font-weight:800}

/* Preferenze di accessibilità del sistema (DESIGN.md, regola 1 e Tema): cambiano il sito solo per chi le ha attivate.
   «Aumenta contrasto» (macOS, iOS, Windows): testo secondario più chiaro e bordi da 3:1, gli stessi valori di brand/tokens.css.
   Contrasto elevato di Windows (forced-colors): i colori li sceglie il sistema e le ombre spariscono. I disegni sul palco
   restano com'erano; bottoni, campi, tag e dialog prendono un bordo; il focus usa Highlight; le icone il colore del testo.
   Sta dentro il blocco che aggiorna_home.py copia nel foglio della home, così vale anche lì; gli !important battono i fogli
   delle pagine, che arrivano dopo, ma solo con il contrasto elevato attivo. */
@media (prefers-contrast:more){:root,.palco{--muted:#C4C7D0}:root{--line:#6B7080}}
@media (forced-colors:active){
  .palco{forced-color-adjust:none}
  svg:not(.palco svg){color:inherit !important}
  :is(.btn,.sp-btn,.tag,.chip,input,select,textarea,dialog):not(.palco *){border:1.5px solid CanvasText !important}
  :is(.btn,.sp-btn):not(.palco *){border-color:ButtonText !important}
  :focus-visible{outline:2px solid Highlight !important}
  .mn-btn i,.mn-btn i::before,.door i{forced-color-adjust:none;background:ButtonText !important}
  .door i::after{background:ButtonFace !important}
  .door-light{forced-color-adjust:none;background:Highlight !important;box-shadow:none !important}
}

/* Menu della barra (DESIGN.md, Componenti), ultimo a destra su ogni pagina: Gratis per te, Lingua.
   Bottone vuoto quadrato (bordo --line, poi --ink), pannello squadrato come i dialog con l'ombra dura 6 px in --brand.
   Sta qui, dentro il blocco che aggiorna_home.py copia nel foglio della home: --brand ha il valore di riserva perché la home non lo definisce. */
.mn{position:relative;flex:none}
.mn-btn{position:relative;width:32px;height:32px;box-sizing:border-box;margin:0;padding:0;display:grid;place-items:center;background:none;border:1.5px solid var(--line);border-radius:var(--r-ui);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-btn::after{content:"";position:absolute;inset:-7px}
.mn-btn:hover,.mn-btn[aria-expanded="true"]{border-color:var(--ink)}
.mn-btn i,.mn-btn i::before{display:block;width:12px;height:1.5px;background:currentColor}
.mn-btn i{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mn-btn i::before{content:"";position:absolute;inset:0;transform:rotate(90deg)}
.mn-btn[aria-expanded="true"] i{transform:rotate(45deg)}
.mn-panel{position:absolute;right:0;top:calc(100% + 14px);z-index:1;width:min(280px,calc(100vw - 32px));box-sizing:border-box;padding:18px 20px 4px;background:var(--wash);color:var(--ink);outline:1px solid var(--line);box-shadow:var(--shadow-hard);font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5;text-align:left}
.mn-panel[hidden]{display:none}
.mn-k{margin:0;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mn-links{list-style:none;margin:6px 0 10px;padding:0}
.mn-links a{display:flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:600;text-decoration:none}
.mn-links a:hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}
/* Lingua: una riga alta 52 px, scelte in mono, quella attiva in --ink e sottolineata */
.mn-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;box-sizing:border-box;border-top:1px solid var(--line)}
.mn .lang{display:flex;align-items:center;gap:2px;min-height:var(--tap);font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--muted)}
.mn .lang :is(a,button){font:inherit;letter-spacing:inherit;color:var(--muted);background:none;border:0;margin:0;padding:0 var(--s-1);min-width:var(--tap);min-height:var(--tap);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.mn .lang :is(a,button)::after{content:none}
.mn .lang :is(a,button):hover{color:var(--ink)}
.mn .lang :is(a[aria-current="page"],button[aria-pressed="true"]){color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:default}
.mn :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mn-btn i{transition:none}}

/* Schede animate: le stesse regole delle otto card del design system (DESIGN.md, Movimento).
   Il contenitore ha la classe .anim, ogni figlio è una scheda con il disegno (.thumb) e il testo (.body).
   Il disegno si muove al passaggio del mouse, al focus da tastiera o, su touch, quando la scheda arriva a metà schermo
   (classe .on da componenti.js; la lista prende .has-on). Su touch le altre schede si attenuano: disegno a .4, testo a .8. */
.anim svg *{transform-box:fill-box;transform-origin:center}
.anim :is(.a-grow,.a-shrink,.a-dim,.a-tilt,.a-big,.a-back,.a-away,.a-press,.a-fill){transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.anim .a-big{transform-origin:left bottom}
.anim .a-fill{transform-origin:left center}
@media (hover:none){.anim>* .thumb,.anim>* .body{transition:opacity .35s} .anim.has-on>:not(.on) .thumb{opacity:.4} .anim.has-on>:not(.on) .body{opacity:.8}}
.anim>:is(:hover,:focus-visible,.on) .a-grow{transform:scale(1.18)}
.anim>:is(:hover,:focus-visible,.on) .a-shrink{transform:scale(.45);opacity:.35}
.anim>:is(:hover,:focus-visible,.on) .a-dim{opacity:.45}
.anim>:is(:hover,:focus-visible,.on) .a-pulse{animation:ds-pulse 1.2s ease-in-out infinite}
.anim>:is(:hover,:focus-visible,.on) .a-tilt{transform:rotate(-7deg) scale(1.06)}
.anim>:is(:hover,:focus-visible,.on) .a-hop{animation:ds-hop .6s cubic-bezier(.3,0,.3,1) .1s}
.anim>:is(:hover,:focus-visible,.on) .a-big{transform:scale(1.12)}
.anim>:is(:hover,:focus-visible,.on) .a-back{transform:translateX(8px);opacity:.55}
.anim>:is(:hover,:focus-visible,.on) .a-nod{animation:ds-nod .9s ease-in-out}
.anim>:is(:hover,:focus-visible,.on) .a-away{transform:translateX(-14px) scale(.85);opacity:.25}
.anim>:is(:hover,:focus-visible,.on) .a-ants{animation:ds-ants .9s linear infinite}
.anim>:is(:hover,:focus-visible,.on) .a-press{transform:scale(.86)}
.anim>:is(:hover,:focus-visible,.on) .a-settle{animation:ds-settle .8s cubic-bezier(.3,1.6,.5,1)}
.anim>:is(:hover,:focus-visible,.on) .a-pop{animation:ds-pop .5s cubic-bezier(.3,1.8,.5,1) .55s backwards}
.anim>:is(:hover,:focus-visible,.on) .a-fill{transform:scaleX(1.72)}
.anim>:is(:hover,:focus-visible,.on) .a-late{animation-delay:.7s}
.anim>:is(:hover,:focus-visible,.on) .a-d1{animation-delay:.08s}
.anim>:is(:hover,:focus-visible,.on) .a-d2{animation-delay:.16s}
.anim>:is(:hover,:focus-visible,.on) .a-d3{animation-delay:.24s}
.anim>:is(:hover,:focus-visible,.on) .a-d4{animation-delay:.32s}
@keyframes ds-pulse{50%{transform:scale(1.35)}}
@keyframes ds-hop{40%{transform:translateY(-6px)}}
@keyframes ds-nod{25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes ds-ants{to{stroke-dashoffset:-8}}
@keyframes ds-settle{0%{transform:translateY(-14px)}}
@keyframes ds-pop{from{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){.anim *{animation:none !important;transition:none !important}}

/* fabiostaiano.it/fuori-frame · pagina d'atterraggio della newsletter (traffico da storie e post).
   Colori del tema, .palco, .dotgrid, barra e footer arrivano da componenti.css: qui non si ridefiniscono.
   Campo e bottone copiano i valori del modulo della home (.nl in site.*.css). Interfaccia squadrata. */
@font-face{font-family:'Anybody';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(/fonts/anybody-latin-wdth-normal.woff2) format('woff2-variations');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;src:url(/fonts/instrument-sans-latin-wdth-normal.woff2) format('woff2-variations');}
@font-face{font-family:'Martian Mono';font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(/fonts/martian-mono-latin-wdth-normal.woff2) format('woff2-variations');}

:root{
  --f-display:"Anybody","Arial Narrow",system-ui,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --top-h:60px; --tap:44px; --max:1120px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--fs-text); line-height:1.5; overflow-x:hidden; }
a{ color:var(--link); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
[hidden]{ display:none !important; }
.label{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.page{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.ff-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; padding:clamp(28px,7vw,96px) 0 clamp(40px,6vw,72px); }
.ff-hero .label{ display:block; margin-bottom:var(--s-4); }
.ff-hero .ff-shot .label{ display:inline; margin:0; }
.ff-hero h1{ margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 120; font-size:clamp(40px,4.6vw,64px); line-height:1.04; letter-spacing:-.02em; }
.ff-hero .lead{ max-width:32rem; margin:20px 0 0; font-size:clamp(18px,2vw,21px); color:var(--muted); }
.ff-hero .lead strong{ color:var(--ink); font-weight:600; }

/* il modulo: l'unico blocco blu della pagina, come la sezione newsletter della home */
.ff-form{ --link:#2B2BEA; --on-link:#FFFFFF; display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:28px; padding:var(--s-5); background:var(--link); color:var(--on-link); }
.ff-form :focus-visible{ outline-color:var(--on-link); }
.ff-form label{ flex-basis:100%; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; }
.ff-form input{ flex:1 1 220px; min-width:0; min-height:var(--tap); font:inherit; font-size:var(--fs-ui); padding:14px 16px; border:1.5px solid var(--on-link); border-radius:var(--r-ui); background:var(--paper); color:var(--ink); }
.ff-form input[aria-invalid="true"]{ outline:3px solid var(--on-link); outline-offset:2px; }
.ff-form input::placeholder{ color:var(--muted); opacity:1; }
.ff-form button[type="submit"]{ flex:none; min-height:var(--tap); font:600 var(--fs-ui) var(--f-body); padding:14px 24px; background:var(--on-link); color:var(--link); border:1.5px solid var(--on-link); border-radius:var(--r-ui); cursor:pointer; }
.ff-form button[type="submit"]:hover{ opacity:.86; }
.ff-form button[disabled]{ opacity:.5; cursor:default; }
.ff-note{ flex-basis:100%; margin:var(--s-1) 0 0; font-size:var(--fs-ui); font-weight:600; line-height:1.4; }
.ff-note:empty{ display:none; }
.ff-small{ flex-basis:100%; margin:0; font-size:var(--fs-note); line-height:1.45; opacity:.9; }
.ff-small a{ padding:2px 0; font-weight:600; color:inherit; text-underline-offset:3px; }
/* iscrizione riuscita: il campo sparisce e al suo posto c'è la conferma, come sulla home (.nl-done in site.*.css) */
.ff-form.done input,.ff-form.done button[type="submit"],.ff-form.done label{ display:none; }
.ff-form.done .ff-note{ margin:0; }
.ff-done{ flex-basis:100%; }
.ff-done:focus{ outline:none; }
.ff-done-h{ margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 88; font-size:clamp(34px,4.4vw,52px); line-height:1; letter-spacing:-.012em; }
.ff-done-p{ max-width:36rem; margin:14px 0 0; font-size:var(--fs-text); line-height:1.5; }
.ff-done-p strong{ font-weight:700; overflow-wrap:anywhere; }
.ff-done-act{ margin:var(--s-3) 0 var(--s-1); }
.ff-again{ min-height:var(--tap); padding:0; font:600 var(--fs-ui) var(--f-body); color:inherit; background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (prefers-reduced-motion: no-preference){ .ff-done:not([hidden]){ animation:ff-in .4s cubic-bezier(.2,.7,.2,1); } }
@keyframes ff-in{ from{ opacity:0; transform:translateY(8px); } }

/* il logo di Fuori Frame sul palco scuro, in ogni tema */
.ff-shot{ position:relative; margin:0; aspect-ratio:12/7; border:1px solid var(--line); overflow:hidden; }
.ff-logo{ display:grid; place-items:center; }
.ff-logo svg{ width:68%; height:auto; }

.cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px clamp(24px,4vw,56px); border-top:1px solid var(--line); padding-block:clamp(40px,6vw,64px) clamp(48px,7vw,80px); }
.cols section{ min-width:0; }
.cols .label{ display:block; margin-bottom:10px; }
.cols h2{ margin:0 0 10px; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.1; }
.cols p{ margin:0; color:var(--muted); }

@media (max-width:860px){
  .ff-hero{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .cols{ grid-template-columns:minmax(0,1fr); }
  .ff-form{ padding:20px; margin-inline:calc(var(--gutter) * -1); }
  .ff-form input,.ff-form button[type="submit"]{ flex:1 1 100%; }
}

/* fabiostaiano.it/newsletter · archivio di Fuori Frame. Tema, barra, footer da componenti.css;
   hero, modulo e dialog da fuori-frame-sorgenti/ff.css (incluso prima di questo file). Interfaccia squadrata. */

/* apertura: la stessa di /tools/ (etichetta, titolo enorme, frase), poi il modulo largo quanto la frase */
.hero{ padding:clamp(48px,10vw,120px) 0 clamp(40px,6vw,72px); }
.hero h1{ margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 140; font-size:clamp(64px,15vw,190px); line-height:.86; letter-spacing:-.03em; }
.hero h1.nl-logo{ font-size:0; line-height:0; }
.nl-logo svg{ display:block; width:clamp(300px,58vw,640px); height:auto; color:var(--ink); }
.hero > p{ max-width:36rem; margin:var(--s-6) 0 0; font-size:clamp(18px,2.2vw,22px); color:var(--muted); }
.hero > p strong{ color:var(--ink); font-weight:600; }
.hero > .label{ display:block; margin-bottom:var(--s-4); }
.hero .ff-form{ max-width:36rem; margin-top:var(--s-6); }

/* modulo in fondo al numero: titolo e frase sopra il campo, nello stesso blocco blu */
.nl-ft{ flex-basis:100%; margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.05; letter-spacing:-.01em; }
.nl-fp{ flex-basis:100%; margin:0 0 var(--s-2); font-size:var(--fs-ui); line-height:1.45; }

/* elenco dei numeri */
.nl-archivio{ border-top:1px solid var(--line); padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,96px); }
.nl-archivio > h2{ margin:0 0 var(--s-5); }
.nl-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-5); }
.nl-item a{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(20px,3vw,40px); align-items:center; color:inherit; text-decoration:none; }
.nl-th{ border:1px solid var(--line); overflow:hidden; }
.nl-th img{ display:block; width:100%; height:auto; }
.nl-item .label{ margin:0 0 10px; }
.nl-item h3{ margin:0 0 10px; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 112; font-size:clamp(28px,3.2vw,40px); line-height:1.02; letter-spacing:-.02em; }
.nl-item h3 + p{ margin:0 0 var(--s-4); color:var(--muted); max-width:36rem; }
.nl-more{ font-weight:600; color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.nl-item a:hover h3{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.nl-empty{ margin:0; max-width:36rem; font-size:var(--fs-text); color:var(--muted); }

/* il numero: una colonna da lettura, come l'email ma più larga */
.nl-art{ max-width:680px; margin:0 auto; padding:clamp(28px,6vw,72px) 0 clamp(48px,7vw,88px); font-size:var(--fs-text); line-height:1.65; }
.nl-art p{ margin:0 0 20px; }
.nl-art .nl-k{ margin:0 0 14px; }
.nl-meta{ margin:0 0 28px !important; }
.nl-h1{ margin:0 0 var(--s-5); font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 112; font-size:clamp(44px,7vw,72px); line-height:.95; letter-spacing:-.03em; }
.nl-lead{ font-size:var(--fs-title-s); color:var(--muted); }
.nl-rule{ border:0; border-top:1px solid var(--line); margin:48px 0 36px; }
.nl-h2{ margin:0 0 20px; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 112; font-size:clamp(30px,4vw,40px); line-height:1.02; letter-spacing:-.02em; }
.nl-steps{ list-style:none; margin:8px 0 20px; padding:0; }
.nl-steps li{ display:grid; grid-template-columns:44px minmax(0,1fr); }
.nl-n{ font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.9; color:var(--muted); }
.nl-steps p{ margin:0 0 var(--s-4); }
.nl-code{ margin:8px 0 28px; padding:18px 20px; background:var(--wash); border:1px solid var(--line); }
.nl-code figcaption{ display:block; margin:0 0 10px; }
.nl-code pre{ margin:0; white-space:pre-wrap; font:var(--fs-label)/1.75 var(--f-mono); color:var(--ink); }
.nl-fig{ margin:12px 0 28px; }
.nl-fig .palco{ border:1px solid var(--line); background:var(--paper); }
.nl-fig img{ display:block; width:100%; height:auto; }
.nl-fig-s .palco{ max-width:420px; }
.nl-fig figcaption{ display:block; margin:10px 0 0; }
.nl-card{ margin:12px 0 14px; padding:26px 26px 28px; background:var(--wash); border:1.5px solid var(--ink); box-shadow:var(--shadow-hard); }
.nl-card .nl-k{ margin:0 0 10px; }
.nl-card p:last-child{ margin-bottom:0; }
.nl-ct{ margin:0 0 var(--s-3) !important; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.05; letter-spacing:-.02em; }
.nl-act{ margin:var(--s-2) 0 0 !important; }
.nl-btn{ display:inline-flex; align-items:center; min-height:var(--tap); padding:14px 24px; font:600 var(--fs-ui)/1.2 var(--f-body); background:var(--ink); color:var(--paper); text-decoration:none; }
.nl-btn:hover{ opacity:.86; }
.nl-news{ list-style:none; margin:var(--s-1) 0 var(--s-2); padding:0; border-bottom:1px solid var(--line); }
.nl-news li{ display:flex; gap:var(--s-4); justify-content:space-between; align-items:baseline; padding:13px 0; border-top:1px solid var(--line); }
.nl-news p{ margin:0 !important; font-size:var(--fs-ui); line-height:1.5; color:var(--muted); }
.nl-news strong{ color:var(--ink); }
.nl-news a{ flex:none; color:var(--link); text-decoration:none; padding-block:var(--s-1); }
.nl-news a:hover{ text-decoration:underline; }
.nl-box{ margin:var(--s-7) 0 var(--s-6); }
.nl-sig-a{ margin:0 0 var(--s-1) !important; color:var(--muted); }
.nl-sig{ font-family:var(--f-display); font-weight:800; font-size:var(--fs-card); letter-spacing:-.02em; }
.nl-back{ margin:40px 0 0 !important; padding-top:var(--s-5); border-top:1px solid var(--line); }

@media (max-width:760px){
  .nl-item a{ grid-template-columns:minmax(0,1fr); }
  .nl-news li{ flex-direction:column; gap:var(--s-1); }
  .nl-card{ padding:22px 20px 24px; }
}