/* Tema "Stadio" — Bar Osteria Stadio, Viareggio.
   Idea: la tovaglietta di carta dell'osteria stampata in blu, con i suoi disegnini di mare,
   la tovaglia a quadretti sotto i piatti e la lavagna scritta col gesso. */

:root {
	--carta: #f6f3ea;
	--carta-2: #ebe5d6;
	--inchiostro: #1b2a5e;
	--attenuato: #4d5c86;
	--linea: #c9ccd6;
	--su-colore: #ffffff;
	--evidenza: #c8372c;
	--libero: #1e7a50;
	--pochi: #b46a00;
	--pieno: #c8372c;
	--ardesia: #26332f;
	--gesso: #f2efe6;
	--gesso-2: #c9d3cf;
	--gesso-giallo: #ffd66b;
	--giallo: #ffc83a;
	--scotch: rgba(236, 224, 186, .88);
	--font-testo: "Literata", Georgia, serif;
	--font-titoli: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--font-gesso: "Caveat", "Comic Sans MS", cursive;
	--raggio: 3px;
	--colonna: 48rem;
}

body {line-height: 1.65; background: var(--carta);}
h1, h2, h3 {color: var(--inchiostro);}
h2 {font-size: 2.1rem; font-weight: 800; letter-spacing: .01em;}
.piatto-nome, .menu-fisso h3 {font-family: var(--font-testo); font-weight: 600;}

/* testata */
.testata {background: var(--carta); border-bottom: 2px solid var(--inchiostro);}
.marchio {font-weight: 800; font-size: 1.55rem; letter-spacing: .01em; color: var(--inchiostro);}
.nav a {font-family: var(--font-titoli); font-weight: 700; font-size: 1.15rem; color: var(--inchiostro);}
.nav a[aria-current] {border-bottom-color: var(--inchiostro);}
.nav .nav-prenota {background: var(--giallo); color: var(--inchiostro); border-radius: var(--raggio);}

/* bottoni */
.bottone {font-family: var(--font-titoli); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; background: var(--inchiostro); border-color: var(--inchiostro);}
.bottone-chiaro {background: transparent; color: var(--inchiostro);}
.bottone-giallo {background: var(--giallo); border-color: var(--giallo); color: var(--inchiostro);}

/* i disegnini della tovaglietta: sullo sfondo dell'apertura e come fregio tra le sezioni */
.fregio {height: 30px; max-width: 72rem; margin: 2.4rem auto; background: url("fregio.svg") repeat-x center / auto 30px; opacity: .6;}

/* apertura: il nome stampato a sinistra, la lavagna a destra */
.apertura-stadio {padding: 2.2rem 1rem 3.2rem; position: relative; background: url("carta.svg");}
.apertura-stadio::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 6 Q8 0 16 6 T32 6' fill='none' stroke='%231b2a5e' stroke-width='2'/%3E%3C/svg%3E") repeat-x center;
}
.apertura-in {max-width: 72rem; margin: 0 auto; display: grid; gap: 2.4rem; align-items: center;}
@media (min-width: 60rem) {.apertura-in {grid-template-columns: 1fr 1.1fr; gap: 3.5rem;}}
.indirizzo-breve {margin: 0 0 .4rem; color: var(--attenuato);}
.apertura-stadio h1 {font-size: clamp(3.4rem, 10vw, 6.6rem); font-weight: 800; line-height: .88; letter-spacing: -.005em; margin: 0 0 1rem; max-width: 7ch;}
.apertura-stadio .apertura-slogan {font-size: 1.3rem; font-style: italic; margin: 0 0 .4rem; max-width: 26em;}

/* la lavagna: ardesia nella cornice di legno, scritta col gesso (anche quella del giorno nella pagina del menu) */
.ardesia-posto {padding: .6rem .4rem 0 0;}
.ardesia, .lavagna {
	position: relative; color: var(--gesso); font-family: var(--font-gesso); font-size: 1.4rem; line-height: 1.2;
	padding: 1.3rem 1.6rem 1.4rem; border: 14px solid #7a4e2b; border-image: linear-gradient(135deg, #a06a3b, #6b4122 35%, #93603a 55%, #5e3a1e) 1;
	background: radial-gradient(ellipse at 22% 18%, rgba(255, 255, 255, .08), transparent 45%), radial-gradient(ellipse at 78% 75%, rgba(255, 255, 255, .06), transparent 50%), linear-gradient(160deg, #2e3c38, #1f2a27);
	box-shadow: 0 24px 40px -22px rgba(40, 25, 10, .65), inset 0 0 50px rgba(0, 0, 0, .45);
	text-shadow: 0 0 1px rgba(255, 255, 255, .45), 0 0 8px rgba(255, 255, 255, .12);
}
.ardesia {transform: rotate(-1deg);}
.ardesia .lavagna {padding: 0; margin: 0 0 .9rem; border: 0; outline: 0; background: none; box-shadow: none;}
.lavagna h2, .ardesia-titolo {font: 700 2.3rem/1 var(--font-gesso); color: var(--gesso); margin: 0;}
.lavagna-data {font-size: 1.2rem; color: var(--gesso-2); margin: .1rem 0 .5rem;}
.lavagna-voci li {border-top: 0; padding: .2rem 0;}
.voce-nome {font-weight: 700;}
.voce-prezzo {font: 700 1.6rem/1.1 var(--font-gesso); color: var(--gesso-giallo);}
.voce-prezzo small {font-size: 1.1rem; color: var(--gesso-2);}
.voce-desc {font-size: 1.15rem; color: var(--gesso-2);}
.esaurito .voce-nome {opacity: .75; text-decoration-thickness: 2px;}
.voce-esaurito {font-size: 1.3rem; color: #ff9f8c; display: inline-block; transform: rotate(-4deg);}
.ardesia .lavagna + .ardesia-titolo {padding-top: .8rem; border-top: 2px dashed rgba(242, 239, 230, .3);}
.ardesia-righe {list-style: none; margin: .3rem 0 0; padding: 0;}
.ardesia-righe a {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .9rem; color: inherit; text-decoration: none; padding: .1rem 0;}
.ardesia-chi {min-width: 5.5rem; color: var(--gesso-2);}
.ardesia-cosa {font: 700 clamp(1.9rem, 4.2vw, 2.6rem)/1.1 var(--font-gesso); color: var(--gesso-giallo);}
.ardesia-righe a:hover .ardesia-cosa, .ardesia-righe a:focus-visible .ardesia-cosa {text-decoration: underline wavy 2px;}
.ardesia-nota {margin: .6rem 0 0; padding-right: 5rem;}
.ardesia-nota a {color: var(--gesso);}
.ardesia-piede {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: .8rem 0 0;}
.ardesia-piede .bottone {text-shadow: none;}
.ardesia-pesce {position: absolute; right: 1rem; bottom: .7rem; width: 5rem; fill: none; stroke: rgba(242, 239, 230, .5); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}
@media (prefers-reduced-motion: no-preference) {
	.ardesia h2, .ardesia .lavagna-data, .ardesia li, .ardesia-titolo, .ardesia-nota, .ardesia-piede {animation: gesso .7s ease-out both;}
}
@keyframes gesso {from {clip-path: inset(-20% 100% -20% 0);} to {clip-path: inset(-20% 0 -20% 0);}}

/* il timbro rosso sulla tovaglietta, accanto al nome */
.apertura-testo {position: relative;}
.timbro {position: absolute; top: 2.2rem; right: 0; width: clamp(6rem, 14vw, 8.2rem); color: var(--evidenza); opacity: .85; transform: rotate(14deg); fill: none; stroke: currentColor;}
.timbro circle {stroke-width: 2.4;}
.timbro circle + circle {stroke-width: 1.2;}
.timbro text {font: 700 12.5px var(--font-titoli); letter-spacing: .04em; fill: currentColor; stroke: none;}
.timbro-pesce {stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}

/* la lavagna nella pagina del menu */
.lavagna {margin-top: 2.5rem;}

/* striscia dei piatti: foto appoggiate sulla tovaglia a quadretti, fermate con lo scotch */
.striscia {
	margin: 0; padding: 2rem 0 1.4rem; background-color: #fff;
	background-image: linear-gradient(90deg, rgba(27, 42, 94, .2) 50%, transparent 0), linear-gradient(rgba(27, 42, 94, .2) 50%, transparent 0);
	background-size: 34px 34px;
}
.striscia-testa {align-items: center;}
.striscia-testa h2, .striscia-testa a {background: var(--carta); padding: .15rem .9rem; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5);}
.striscia-testa h2 {font-size: 2.3rem; transform: rotate(-1.2deg);}
.striscia-testa a {font-family: var(--font-titoli); font-weight: 700; font-size: 1.15rem; color: var(--inchiostro); transform: rotate(1.5deg);}
.striscia-piatti {gap: 1.4rem; padding-top: 1.2rem; padding-bottom: 1.4rem;}
.striscia-piatti a, .galleria-griglia figure {position: relative; background: #fff; padding: .55rem .55rem .7rem; box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .5);}
.striscia-piatti li:nth-child(odd) a, .galleria-griglia figure:nth-child(odd) {transform: rotate(-1.5deg);}
.striscia-piatti li:nth-child(even) a, .galleria-griglia figure:nth-child(even) {transform: rotate(1.3deg);}
.striscia-piatti a::before, .galleria-griglia figure::before {content: ""; position: absolute; z-index: 1; top: -.55rem; left: 50%; width: 4.4rem; height: 1.15rem; background: var(--scotch); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);}
.striscia-piatti img {border-radius: 0;}
.striscia-nome {font-family: var(--font-testo); font-size: 1rem; color: var(--inchiostro);}
.striscia-piatti a:hover {box-shadow: 0 0 0 2px var(--inchiostro), 0 12px 20px -12px rgba(0, 0, 0, .5);}

/* racconti: la foto è una stampa appoggiata sulla carta */
.racconto {margin: 2.6rem 0;}
.racconto-foto {border-radius: 0; border: .6rem solid #fff; box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .55); transform: rotate(-1.2deg);}
.racconto.a-destra .racconto-foto {transform: rotate(1.2deg);}
.racconto h2 {font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: .95; font-weight: 800;}

/* citazioni: la fascia del mare, con le onde sopra e sotto, tre voci affiancate */
.citazioni {
	background: var(--inchiostro); color: #fff; margin: 3.5rem 0 1rem; padding: 4rem max(1rem, calc((100% - 72rem) / 2)) 3.6rem; position: relative;
	display: grid; gap: 2.2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.citazioni::before, .citazioni::after {
	content: ""; position: absolute; left: 0; right: 0; height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 0H32V6Q24 12 16 6T0 6Z' fill='%23f6f3ea'/%3E%3C/svg%3E") repeat-x;
}
.citazioni::before {top: -1px;}
.citazioni::after {bottom: -1px; transform: rotate(180deg);}
.citazione {margin: 0;}
.citazione blockquote {font-family: var(--font-testo); font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.45; color: #fff;}
.citazione blockquote::before {content: "\201C"; display: block; font: 800 4.2rem/.7 var(--font-titoli); color: var(--giallo); margin-bottom: .1rem;}
.citazione figcaption {color: #aab6d6; font-family: var(--font-titoli); font-size: 1.1rem; letter-spacing: .03em;}

/* come funziona (solo con le prenotazioni online) */
.turni-casa {list-style: none; padding: 0; margin: 1.5rem 0 0;}
.turni-casa li {display: grid; grid-template-columns: 6rem 1fr; gap: 0 1rem; padding: .8rem 0; border-top: 1px solid var(--linea); align-items: baseline;}
.turni-casa strong {font: 700 1.25rem var(--font-titoli);}
.turni-ore {font: 800 1.9rem/1 var(--font-titoli);}
.turni-ore i {font: italic 400 1rem var(--font-testo); padding: 0 .2em;}
.turni-giorni {grid-column: 2; color: var(--attenuato);}

/* scatti rubati: polaroid con la didascalia scritta a mano */
.galleria h2 {font-size: 2.4rem;}
.galleria-griglia {grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2.2rem 1.8rem; margin-top: 1.6rem;}
.galleria-griglia figure {padding-bottom: .2rem;}
.galleria-griglia img {aspect-ratio: 1; border-radius: 0;}
.galleria-griglia figcaption {font: 700 1.45rem/1.2 var(--font-gesso); color: var(--inchiostro); text-align: center; margin: .35rem 0 .1rem;}

/* in fondo: menu fissi, eventi, orari e dove siamo affiancati */
.in-fondo {display: grid; gap: 1rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; padding-bottom: 3.5rem;}
.in-fondo h2 {margin-top: .4rem;}

/* menu fissi: il cartoncino stampato con la doppia cornice */
.menu-fisso {background: #fff; border: 0; border-radius: 0; outline: 2px solid var(--inchiostro); outline-offset: -8px; box-shadow: 0 0 0 1px var(--linea); padding: 1.5rem 1.6rem 1.2rem; text-align: center;}
.menu-fisso h3 {flex-direction: column; align-items: center; gap: .1rem; font-size: 1.25rem;}
.menu-fisso-prezzo {font: 800 2rem/1 var(--font-titoli);}
.menu-fisso ul {list-style: none; padding: 0; margin: .8rem 0;}
.menu-fisso li {padding: .15rem 0;}
.menu-fisso li + li::before {content: "~"; display: block; color: var(--attenuato); line-height: 1;}

/* carta */
.piatto {border-bottom: 1px dashed var(--linea);}
.piatto-prezzo {font: 700 1.35rem/1.2 var(--font-titoli);}
.piatto-prezzo small {font-family: var(--font-testo); font-size: .8rem;}
.consigliato .piatto-nome::after {color: var(--inchiostro);}
.indice-carta a {font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; border-color: var(--inchiostro); color: var(--inchiostro); border-radius: var(--raggio);}
.categoria h2 {border-bottom: 2px solid var(--inchiostro); padding-bottom: .2rem;}
.tavolo {background: var(--giallo); color: var(--inchiostro); font-family: var(--font-titoli); font-weight: 800; font-size: 1.3rem;}

/* prenotazione */
.passo legend {font-size: 1.7rem; font-weight: 800;}
.scelte span {font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 700;}
.scelte span small {font-family: var(--font-testo); font-size: .75rem;}
.scelte input:checked + span {background: var(--inchiostro); border-color: var(--inchiostro);}
.cal-giorno {font-family: var(--font-titoli); font-size: 1.2rem; background: var(--carta-2);}
.cal-giorno[aria-pressed] {border-color: var(--inchiostro); background: var(--giallo); color: var(--inchiostro);}
.cal-testa strong {font: 800 1.4rem var(--font-titoli);}
.riepilogo {font: 700 1.5rem/1.2 var(--font-titoli);}
.bottone-grande {background: var(--giallo); border-color: var(--inchiostro); color: var(--inchiostro); font-size: 1.4rem;}

/* piede: i disegnini in bianco sul blu */
.piede {background: var(--inchiostro); color: #dfe5f2; position: relative;}
.piede::before {content: ""; display: block; height: 30px; margin: -.5rem auto 1.2rem; max-width: 72rem; background: url("fregio.svg") repeat-x center / auto 30px; filter: invert(1) brightness(2); opacity: .35;}
.piede a {color: #fff;}
.piede-firma {color: #aab6d6;}
.piede strong {font: 800 1.3rem var(--font-titoli);}

/* russo: Big Shoulders non ha il cirillico, si usa Oswald con lo stesso taglio stretto (Caveat il cirillico ce l'ha) */
html:lang(ru) {--font-titoli: "Oswald", "Arial Narrow", sans-serif;}
html:lang(ru) .apertura-stadio h1 {font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: .95;}

/* orari in breve, sotto il nome */
.orari-breve {margin: .2rem 0 1.1rem;}
.orari-breve ul {gap: .05rem 1.1rem;}
.ob-cosa {font: 700 1.15rem/1.5 var(--font-titoli); letter-spacing: .02em;}
.ob-ore {font: 800 1.2rem/1.5 var(--font-titoli);}
.orari-breve a {font-family: var(--font-titoli); font-weight: 700; font-size: 1rem; color: var(--inchiostro);}

/* ferie: prima una striscia gialla, poi il cartello appeso alla porta, col suo spago */
.ferie-striscia {background: var(--giallo); color: var(--inchiostro);}
.ferie-striscia strong {font: 800 1.2rem var(--font-titoli); text-transform: uppercase; letter-spacing: .03em;}
.ferie {background: url("carta.svg"); padding: 1.5rem 1rem 3rem; border-bottom: 2px solid var(--inchiostro);}
.ferie-cartello {
	position: relative; max-width: 30rem; margin-top: 3rem; border: 0; border-radius: 4px; padding: 1.8rem 2rem 1.7rem;
	outline: 3px solid var(--evidenza); outline-offset: -11px; box-shadow: 0 20px 32px -18px rgba(40, 25, 10, .55); transform: rotate(-2deg);
}
.ferie-cartello::before {
	content: ""; position: absolute; left: 50%; top: -2.9rem; width: 12rem; height: 3.2rem; transform: translateX(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M60 5L14 31M60 5l46 26' fill='none' stroke='%237a5a3a' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='5' r='3.6' fill='%23555'/%3E%3Ccircle cx='14' cy='30' r='2.4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Ccircle cx='106' cy='30' r='2.4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ferie-cartello .ombrellone {width: 5rem; color: var(--inchiostro);}
.ferie h2 {font: 800 clamp(2.5rem, 7vw, 3.6rem)/.95 var(--font-titoli); color: var(--evidenza); text-transform: uppercase; letter-spacing: .02em; margin: .4rem 0 .5rem;}
.ferie-riapre {font: 700 1.9rem/1.15 var(--font-gesso); color: var(--inchiostro);}
.ferie-testo {font-style: italic; color: var(--attenuato);}

/* logo in testata: la cloche con Burlamacco */
.marchio-logo {height: 4.6rem; margin: -.7rem 0;}
@media (max-width: 40rem) {.marchio-logo {height: 3.4rem; margin: -.4rem 0;}}

/* pranzo / cena nel menu */
.servizi button {font-family: var(--font-titoli); font-size: 1.15rem; letter-spacing: .02em;}