/* La pagina pubblica di Fervore.
   Stessa identità delle app e della console — carta chiara, inchiostro caldo,
   arancio, titoli in Georgia — ma nessuna somiglianza con un pannello di
   controllo: qui non si amministra niente, si legge cosa c'è stasera. */
:root{
 --bg:#f8f7f3; --paper:#fff; --ink:#252a27; --muted:#787d75; --line:#e8e6df;
 --accent:#c4532b; --soft:#f5e8df; --green:#2e8664; --cancel:#c02a22;
 --shadow:0 18px 50px rgba(42,38,28,.07);
 color-scheme:light;
}
/* Un tema solo, e chiaro.
   La console è chiara, e le app partono chiare: una pagina che si fa scura da
   sola perché il telefono è in modalità notte non è coerenza, è una sorpresa.
   Il fondo è dichiarato esplicitamente, così la pagina non eredita il grigio
   del browser di chi legge. */

*{box-sizing:border-box}
body{
 margin:0;background:var(--bg);color:var(--ink);
 font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:720px;margin:0 auto;padding-inline:20px}

/* --- testata ---------------------------------------------------------- */
/* La testata scorre via: mentre si legge l'elenco non serve, e lasciarla
   appiccicata rubava un quinto di schermo a un telefono insieme ai filtri.
   I filtri restano, perché quelli si usano scorrendo. */
.site-head{border-bottom:1px solid var(--line);background:var(--bg)}
/* Testata e chiusura respirano più del corpo: sono le due fasce che toccano
   i bordi, e lì un margine stretto si vede subito. L'elenco invece resta dov'è. */
.site-head .wrap,.site-foot .wrap{padding-inline:40px}
.site-head .wrap{display:flex;align-items:baseline;gap:12px;padding-block:18px}
/* Il marchio resta in linea, non in flex: così «Crema e dintorni» si allinea
   alla base di «fervore» invece che al fondo dell'immagine. */
.wordmark{text-decoration:none;white-space:nowrap}
.wordmark img{width:38px;height:auto;vertical-align:-7px;margin-right:10px;mix-blend-mode:multiply}
.wordmark span{font:26px Georgia,serif;letter-spacing:-1px}
.wordmark i{color:var(--accent);font-style:normal}
.site-head small{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.site-head .for-organizers{margin-left:auto;font-size:12px;color:var(--accent);font-weight:600;text-decoration:none}
.site-head .for-organizers:hover{text-decoration:underline}

/* --- apertura --------------------------------------------------------- */
.hero{padding-block:44px 30px}
.hero h1{font:400 clamp(30px,7vw,44px)/1.1 Georgia,serif;margin:0 0 14px;letter-spacing:-.8px;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{margin:0;color:var(--muted);max-width:52ch}
.hero .promise{margin-top:12px;font-size:13px}

/* --- filtri ----------------------------------------------------------- */
.filters{position:sticky;top:0;z-index:4;background:var(--bg);padding-block:12px;border-bottom:1px solid var(--line)}
.filter-row{display:flex;gap:7px;flex-wrap:wrap}
.filter-row+.filter-row{margin-top:7px}
.chip{
 border:1px solid var(--line);background:var(--paper);color:var(--ink);
 border-radius:999px;padding:7px 13px;font:inherit;font-size:12px;cursor:pointer;
 white-space:nowrap;transition:background .12s,border-color .12s;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media(prefers-reduced-motion:reduce){.chip{transition:none}}

/* --- giornate --------------------------------------------------------- */
#days{padding-block:8px 20px}
.day{padding-top:26px}
.day-title{
 margin:0 0 4px;font:600 12px/1.4 inherit;letter-spacing:.9px;text-transform:uppercase;
 color:var(--accent);
}
.day-title span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px}

/* --- una riga evento -------------------------------------------------- */
.event{
 display:grid;grid-template-columns:58px 1fr;gap:14px;
 padding:15px 0;border-top:1px solid var(--line);position:relative;
}
.event:target{background:var(--soft);border-radius:12px;padding-inline:12px;margin-inline:-12px}
.when{font-variant-numeric:tabular-nums;padding-top:2px}
.when b{display:block;font-size:14px;font-weight:600}
.when span{display:block;font-size:12px;color:var(--muted)}
.what h3{margin:0 0 3px;font:400 19px/1.25 Georgia,serif;letter-spacing:-.2px}
.what .who,.what .where{margin:0;font-size:13px;color:var(--muted)}
.what .where{margin-top:1px}
.meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.cat{font-size:9px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--accent)}
.badge{
 font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
 color:var(--green);border:1px solid currentColor;border-radius:999px;padding:2px 7px;
}
.price{font-size:12px;color:var(--muted);margin:6px 0 0}
.row-tools{margin-top:8px;display:flex;gap:14px}
.link-button{
 border:0;background:transparent;padding:0;color:var(--accent);
 font:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.link-button:hover{text-decoration:underline}

/* Annullato: il fatto viene prima del titolo, e il titolo si spegne. */
.event.off .what h3,.event.off .who,.event.off .where,.event.off .when{opacity:.55}
.off-stamp{
 display:inline-block;font-size:9px;font-weight:700;letter-spacing:1.1px;
 color:#fff;background:var(--cancel);border-radius:4px;padding:3px 7px;
}
.off-why{margin:6px 0 0;font-size:13px;color:var(--cancel)}

/* --- stati ------------------------------------------------------------ */
.notice{padding:44px 0;color:var(--muted);text-align:center}
.notice strong{display:block;color:var(--ink);font:400 20px/1.3 Georgia,serif;margin-bottom:6px}

/* --- chiusura --------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);margin-top:34px;padding-block:28px 46px;font-size:13px;color:var(--muted)}
.foot-logo{width:62px;height:auto;display:block;margin:20px 0 0;mix-blend-mode:multiply}
.site-foot p{margin:0 0 9px;max-width:56ch}
.site-foot a{color:var(--accent);font-weight:600;text-decoration:none}
.site-foot a:hover{text-decoration:underline}

.toast{
 position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
 background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;
 font-size:13px;box-shadow:var(--shadow);z-index:9;
}

@media(max-width:520px){
 .event{grid-template-columns:50px 1fr;gap:11px}
 .hero{padding-block:32px 22px}
 /* Su un telefono la testata deve stare su una riga: il sottotitolo e il
    tasto per gli organizzatori andavano a capo tutti e due, e tre righe di
    intestazione per una pagina che si legge scorrendo sono troppe. */
 .site-head .wrap,.site-foot .wrap{padding-inline:20px}
 .site-head small{display:none}
 .site-head .for-organizers{white-space:nowrap}
 .wordmark span{font-size:23px}
}