/* ============================================================
   In cucina con Johnny Chef — design system
   Palette tenue: crema, salvia, corallo, burro, lavanda, cielo
   ============================================================ */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/Nunito.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --cream: #FFF9F0; --paper: #FFFDF8; --ink: #26354A; --ink-2: #53647A; --line: #E7EEE8;
  --sage: #BFD8C0; --sage-d: #6FA47D; --mint: #CDE7D4; --coral: #FF8E7A; --coral-d: #F2705A;
  --butter: #FFE8A3; --lav: #E3D9F7; --sky: #CFE8F1; --peach: #FFD9C7; --wood: #E8CFA2;
  --r: 22px; --r-lg: 32px; --shadow: 0 10px 30px -12px rgba(38,53,74,.22); --shadow-lg: 0 24px 60px -24px rgba(38,53,74,.35);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(900px 500px at 8% -5%, rgba(191,216,192,.45), transparent 60%),
  radial-gradient(800px 500px at 100% 10%, rgba(255,217,199,.5), transparent 60%),
  radial-gradient(700px 600px at 50% 110%, rgba(227,217,247,.5), transparent 60%); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: rgba(255,142,122,.6); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 12px; z-index: 100; }
.skip:focus { left: 8px; }
.hp { position: absolute !important; left: -9999px; height: 0; overflow: hidden; }
.muted { color: var(--ink-2); }
.only-desktop { display: none; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }

/* ---------- Bottoni ---------- */
.btn { --b: var(--sage); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 800 1rem/1 var(--sans); padding: .95rem 1.5rem; border-radius: 999px; border: 2px solid transparent; background: var(--b); color: var(--ink); cursor: pointer; text-decoration: none; transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s, background .25s; box-shadow: 0 6px 0 -2px rgba(38,53,74,.12); }
.btn:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 12px 24px -10px rgba(38,53,74,.35); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-coral { --b: var(--coral); } .btn-coral:hover { --b: var(--coral-d); }
.btn-butter { --b: var(--butter); } .btn-soft { --b: var(--mint); }
.btn-ghost { background: transparent; border-color: var(--ink); box-shadow: none; } .btn-ghost:hover { background: rgba(38,53,74,.06); }
.btn-lg { padding: 1.1rem 1.8rem; font-size: 1.05rem; } .btn-block { width: 100%; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: rgba(255,142,122,.6); text-underline-offset: 3px; cursor: pointer; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,249,240,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(38,53,74,.07); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-face { width: 52px; height: 50px; flex: none; transition: transform .4s cubic-bezier(.3,1.8,.5,1); }
.brand:hover .brand-face { transform: rotate(-8deg) scale(1.08); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-text b { font: 800 1.12rem/1.1 var(--serif); }
.brand-text small { font-size: .74rem; color: var(--ink-2); letter-spacing: .04em; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav > a { padding: .55rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: .95rem; transition: background .2s, transform .2s; white-space: nowrap; }
.nav > a:hover { background: var(--mint); transform: translateY(-1px); }
.nav > a.on { background: var(--butter); }
.nav > a.nav-spark::after { content: '✦'; color: var(--coral); margin-left: .3rem; font-size: .8em; }
.nav-search { display: none; position: relative; margin-left: .4rem; }
.nav-search input { width: 170px; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: .5rem 2.2rem .5rem 1rem; font: inherit; font-size: .9rem; transition: width .3s, border-color .2s; }
.nav-search input:focus { width: 220px; border-color: var(--sage-d); outline: none; }
.nav-search button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink-2); }
.burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 16px; background: var(--butter); cursor: pointer; position: relative; z-index: 60; }
.burger span { position: absolute; left: 12px; right: 12px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .3s, opacity .2s, top .3s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded=true] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded=true] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; }
.hero-in { display: grid; gap: 2rem; align-items: center; position: relative; z-index: 2; }
.eyebrow { display: inline-block; font: 800 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-d); background: rgba(205,231,212,.6); padding: .5rem .9rem; border-radius: 999px; margin-bottom: 1.1rem; }
.eyebrow-light { background: rgba(255,255,255,.14); color: var(--butter); }
.hero h1 { font-size: clamp(2.3rem, 6.4vw, 4.6rem); font-weight: 800; font-variation-settings: 'opsz' 144; margin-bottom: .45em; }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .34em; background: var(--butter); border-radius: 999px; z-index: -1; transform: rotate(-1.2deg); transform-origin: left; animation: swipe .9s .5s cubic-bezier(.2,.8,.2,1) both; }
.hl2::after { background: var(--peach); animation-delay: .9s; }
@keyframes swipe { from { transform: scaleX(0) rotate(-1.2deg); } to { transform: scaleX(1) rotate(-1.2deg); } }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-2); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.hero-stats { display: flex; gap: 1.8rem; list-style: none; padding: 0; margin: 2rem 0 0; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; } .hero-stats b { font: 800 1.9rem/1 var(--serif); } .hero-stats span { font-size: .85rem; color: var(--ink-2); }
.hero-art { position: relative; min-height: 340px; display: grid; place-items: center; }
.art-disc { position: absolute; width: min(420px, 86%); aspect-ratio: 1; border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%; background: linear-gradient(145deg, var(--mint), var(--sky) 55%, var(--lav)); animation: morph 12s ease-in-out infinite; box-shadow: inset 0 -20px 40px rgba(255,255,255,.4), var(--shadow-lg); }
@keyframes morph { 50% { border-radius: 58% 42% 45% 55% / 45% 58% 42% 55%; transform: rotate(6deg); } }
.art-mascot { position: relative; width: min(300px, 60%); filter: drop-shadow(0 20px 24px rgba(38,53,74,.2)); animation: bob 5s ease-in-out infinite; transition: transform .2s ease-out; }
.art-photo { width: min(400px, 78%); aspect-ratio: 1; filter: none; }
.art-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; border: 8px solid #fff; box-shadow: 0 28px 50px -18px rgba(38,53,74,.45); animation: morph 12s ease-in-out infinite reverse; }
@keyframes bob { 50% { translate: 0 -12px; } }
.mascot .bulb { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: .7; } }
.mascot .eyes { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mascot .spoon { transform-origin: 204px 200px; animation: stir 3s ease-in-out infinite; }
@keyframes stir { 50% { transform: rotate(-9deg); } }
.float { position: absolute; font-size: clamp(1.8rem, 4vw, 2.8rem); filter: drop-shadow(0 8px 6px rgba(38,53,74,.15)); animation: drift 6s ease-in-out infinite; transition: transform .2s ease-out; }
.f1 { top: 6%; left: 10%; } .f2 { top: 14%; right: 6%; animation-delay: -1s; } .f3 { bottom: 12%; left: 4%; animation-delay: -2s; }
.f4 { bottom: 6%; right: 12%; animation-delay: -3s; } .f5 { top: 46%; left: -2%; animation-delay: -4s; } .f6 { top: 40%; right: -1%; animation-delay: -5s; }
@keyframes drift { 50% { translate: 0 -14px; rotate: 8deg; } }
.badge-float { position: absolute; background: #fff; border-radius: 999px; padding: .55rem 1rem; font-weight: 800; font-size: .85rem; box-shadow: var(--shadow); animation: drift 7s ease-in-out infinite; }
.bf1 { top: 18%; left: 0; rotate: -6deg; } .bf2 { bottom: 20%; right: 0; rotate: 5deg; animation-delay: -3s; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0; animation: drift 14s ease-in-out infinite; }
.b1 { width: 380px; height: 380px; background: var(--sage); top: -120px; left: -100px; } .b2 { width: 320px; height: 320px; background: var(--peach); top: 30%; right: -80px; animation-delay: -4s; } .b3 { width: 300px; height: 300px; background: var(--lav); bottom: -120px; left: 35%; animation-delay: -8s; }
.hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 7vw, 90px); z-index: 1; }

/* ---------- Marquee ---------- */
.marquee { background: var(--paper); border-block: 2px dashed var(--line); overflow: hidden; padding: .9rem 0; }
.marquee-track { display: flex; gap: 2rem; width: max-content; animation: marquee 38s linear infinite; font: 800 1.35rem/1 var(--serif); white-space: nowrap; }
.marquee-track i { color: var(--coral); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sezioni ---------- */
.sec { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--paper); }
.sec-tint { background: linear-gradient(180deg, var(--paper), #F6FAF3 40%, #F6FAF3 60%, var(--paper)); }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.sec-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); } .sub { color: var(--ink-2); font-size: 1.1rem; }

/* ---------- Percorso 10 ricette ---------- */
.trail { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; counter-reset: s; }
.stop > a, .stop > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1.5rem .8rem 1.1rem; border-radius: var(--r); background: var(--c, #E8EFE9); text-decoration: none; height: 100%; transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
.stop.is-open > a:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: var(--shadow-lg); }
.stop-n { position: absolute; top: -14px; left: 50%; translate: -50% 0; background: var(--ink); color: #fff; font: 800 .9rem/1 var(--serif); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(38,53,74,.2); }
.stop-emoji { font-size: 2.2rem; } .stop-t { font: 700 .98rem/1.2 var(--serif); }
.stop.is-locked > div { background: repeating-linear-gradient(135deg, #F3F6F2 0 10px, #EDF2EC 10px 20px); color: var(--ink-2); border: 2px dashed #CBD8CD; }
.stop.is-locked .stop-emoji { filter: grayscale(.6); opacity: .7; } .stop.is-locked .stop-n { background: #9FB2A5; }
.stop em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--coral); color: #fff; padding: .25rem .6rem; border-radius: 999px; }
.stop-star > a, .stop-star > div { background: linear-gradient(135deg, var(--butter), var(--peach), var(--lav)); background-size: 200% 200%; animation: shimmer 6s ease infinite; grid-column: auto; }
.stop-star.is-locked > div { background: linear-gradient(135deg, #FFF3C9, #FFE3D6, #ECE5FA); border: 2px dashed var(--coral); color: var(--ink); }
@keyframes shimmer { 50% { background-position: 100% 100%; } }

/* ---------- Card ---------- */
.grid-cards { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .35s; border: 1px solid rgba(38,53,74,.05); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card-media { position: relative; display: block; aspect-ratio: 4/3; background: var(--c); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media img { transform: scale(1.08) rotate(.5deg); }
.card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.5rem; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 55%), var(--c); }
.pill { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); padding: .35rem .8rem; border-radius: 999px; font-weight: 800; font-size: .78rem; box-shadow: 0 4px 10px rgba(38,53,74,.12); text-decoration: none; }
.pill-lg { position: static; display: inline-block; background: var(--c); font-size: .9rem; padding: .45rem 1rem; margin-bottom: 1rem; box-shadow: none; }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; gap: .9rem; font-size: .82rem; color: var(--ink-2); font-weight: 700; margin-bottom: .45rem; flex-wrap: wrap; }
.card h3 { font-size: 1.35rem; margin-bottom: .4rem; } .card h3 a { text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100%/0 .4em no-repeat; transition: background-size .35s; } .card:hover h3 a { background-size: 100% .4em; }
.card p { color: var(--ink-2); font-size: .98rem; flex: 1; }
.more { font-weight: 800; text-decoration: none; color: var(--coral-d); } .more span { display: inline-block; transition: transform .25s; } .card:hover .more span { transform: translateX(6px); }
.card-soon .card-body h3 { font-size: 1.15rem; }

/* ---------- Categorie ---------- */
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cat-tile { background: var(--c); border-radius: var(--r-lg); padding: 1.6rem 1.2rem; text-decoration: none; display: flex; flex-direction: column; gap: .25rem; min-height: 190px; position: relative; overflow: hidden; transition: transform .25s ease-out, box-shadow .3s; transform-style: preserve-3d; }
.cat-tile:hover { box-shadow: var(--shadow-lg); }
.cat-tile::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.4); right: -40px; bottom: -50px; transition: transform .5s; }
.cat-tile:hover::after { transform: scale(1.6); }
.cat-emoji { font-size: 2.6rem; transition: transform .4s cubic-bezier(.3,1.8,.5,1); } .cat-tile:hover .cat-emoji { transform: scale(1.2) rotate(-10deg); }
.cat-tile b { font: 800 1.4rem/1.1 var(--serif); } .cat-tile small { color: var(--ink-2); font-weight: 700; } .cat-n { margin-top: auto; font-size: .8rem; font-weight: 800; background: rgba(255,255,255,.7); padding: .25rem .7rem; border-radius: 999px; width: fit-content; position: relative; z-index: 1; }

/* ---------- Spotlight Le Originali ---------- */
.spot { position: relative; background: var(--ink); color: #fff; padding: clamp(3.5rem, 8vw, 7rem) 0; overflow: hidden; }
.spot::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 15% 0%, rgba(255,142,122,.25), transparent 70%), radial-gradient(500px 300px at 90% 100%, rgba(207,232,241,.2), transparent 70%); }
.spot-in { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.spot h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); } .spot p { color: #D5E0EA; font-size: 1.1rem; max-width: 34em; }
.spot-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 360px; margin-inline: auto; rotate: 4deg; }
.spot-card span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 1.4rem; font-size: 3.2rem; text-align: center; animation: drift 5s ease-in-out infinite; }
.spot-card span:nth-child(2) { animation-delay: -1.2s; } .spot-card span:nth-child(3) { animation-delay: -2.4s; } .spot-card span:nth-child(4) { animation-delay: -3.6s; }
.spark { position: absolute; color: var(--butter); font-size: 1.8rem; animation: twinkle 3s ease-in-out infinite; }
.s1 { top: 12%; left: 6%; } .s2 { top: 70%; left: 45%; animation-delay: -1s; } .s3 { top: 18%; right: 8%; animation-delay: -2s; } .s4 { bottom: 12%; right: 30%; animation-delay: -.5s; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6) rotate(40deg); } }

/* ---------- About ---------- */
.about { display: grid; gap: 2rem; align-items: center; }
.about-art { display: grid; place-items: center; } .about-bubble { width: min(300px, 70%); background: linear-gradient(145deg, var(--mint), var(--sky)); border-radius: 50% 50% 50% 12%; padding: 2rem; box-shadow: var(--shadow-lg); }
.about h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }

/* ---------- Footer ---------- */
.footer-news { background: linear-gradient(135deg, var(--sage), var(--mint) 45%, var(--sky)); padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; }
.footer-news-in { display: grid; gap: 1.5rem; align-items: center; }
.footer-news h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.site-footer { background: var(--ink); color: #D5E0EA; padding-top: 3rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.3); }
.site-footer .linkish { color: #fff; }
.site-footer h3 { font: 800 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--butter); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; padding-bottom: 2rem; }
.f-brand { grid-column: 1 / -1; } .f-brand .brand-text b { color: #fff; } .f-brand .brand-text small { color: #9FB2C6; }
.ai-line { margin-top: 1rem; font-size: .9rem; background: rgba(255,255,255,.08); padding: .8rem 1rem; border-radius: 16px; max-width: 34em; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.3rem; font-size: .82rem; color: #9FB2C6; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.footer-bottom p { margin: 0; }

/* ---------- Form ---------- */
.nl-form { display: grid; gap: .8rem; }
.nl-row { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.fld { display: grid; gap: .3rem; } .fld span { font-weight: 800; font-size: .82rem; }
.fld input, .fld textarea { width: 100%; border: 2px solid transparent; background: #fff; border-radius: 16px; padding: .85rem 1rem; font: inherit; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: border-color .2s, box-shadow .2s; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 5px rgba(255,142,122,.2); }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--coral-d); flex: none; }
.form-msg { margin: 0; font-weight: 800; min-height: 1.2em; font-size: .92rem; } .form-msg.ok { color: #2F7A45; } .form-msg.err { color: #C0392B; }
.ts-slot { min-height: 0; }
.cm-form { display: grid; gap: 1rem; background: var(--mint); border-radius: var(--r-lg); padding: 1.5rem; margin-top: 1.5rem; }
.cm-form h3 { margin: 0; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: rgba(38,53,74,.55); backdrop-filter: blur(6px); animation: fade .3s both; }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: min(860px, 100%); max-height: 92vh; overflow: auto; background: var(--cream); border-radius: 36px; display: grid; box-shadow: var(--shadow-lg); animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.modal-sm { width: min(520px, 100%); }
@keyframes pop { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); transition: transform .3s; } .modal-x:hover { transform: rotate(90deg); }
.modal-art { display: none; background: linear-gradient(160deg, var(--mint), var(--sky), var(--lav)); padding: 2rem; place-items: center; } .modal-art .mascot { width: 220px; animation: bob 4s ease-in-out infinite; }
.modal-body { padding: clamp(1.4rem, 4vw, 2.4rem); } .modal-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.switch { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border-radius: 16px; padding: 1rem; margin-bottom: .7rem; }
.switch input { width: 20px; height: 20px; margin-top: .25rem; accent-color: var(--coral-d); } .switch span { display: grid; } .switch small { color: var(--ink-2); }

/* ---------- Cookie ---------- */
.cookie { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: center; animation: pop .6s .3s cubic-bezier(.2,1.4,.4,1) both; }
.cookie[hidden] { display: none; }
.cookie-in { background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 1.1rem 1.3rem; display: grid; gap: .9rem; max-width: 880px; font-size: .92rem; }
.cookie-in p { margin: 0; } .cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; } .cookie-actions .btn { padding: .75rem 1.2rem; font-size: .92rem; }

/* ---------- Pagine interne ---------- */
.crumbs { font-size: .85rem; color: var(--ink-2); font-weight: 700; padding-block: 1rem; } .crumbs a { text-decoration: none; } .crumbs i { font-style: normal; opacity: .5; margin: 0 .2rem; }
.crumbs-wrap { padding-top: .3rem; }
.cat-hero { background: linear-gradient(135deg, var(--c), #fff 140%); padding: 1rem 0 3rem; position: relative; overflow: hidden; border-radius: 0 0 48px 48px; margin-bottom: 2.5rem; }
.cat-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin-bottom: .2em; }
.cat-hero-emoji { position: absolute; right: 6%; top: 12%; font-size: clamp(4rem, 12vw, 9rem); opacity: .5; animation: drift 7s ease-in-out infinite; }
.cat-hero-sm { padding-bottom: 2rem; } .cat-hero-sm h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.with-side { display: grid; gap: 2rem; padding-bottom: 3rem; }
.empty { text-align: center; padding: 4rem 1rem; } .empty > span { font-size: 4.5rem; display: block; animation: bob 4s ease-in-out infinite; } .empty p { color: var(--ink-2); }
.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; } .pager a { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border-radius: 50%; font-weight: 800; text-decoration: none; box-shadow: var(--shadow); } .pager a.on { background: var(--coral); }
.big-search { display: flex; gap: .6rem; max-width: 560px; } .big-search input { flex: 1; border: 2px solid #fff; border-radius: 999px; padding: .9rem 1.3rem; font: inherit; }

/* ---------- Articolo ---------- */
.preview-bar { background: var(--butter); text-align: center; padding: .6rem; font-weight: 800; position: sticky; top: 70px; z-index: 40; }
.post { min-width: 0; }
.post-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
.byline { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; } .byline small { display: block; color: var(--ink-2); }
.byline-av { width: 52px; height: 50px; background: var(--mint); border-radius: 50%; padding: 4px; flex: none; overflow: hidden; }
.ai-note { background: var(--lav); border-radius: 18px; padding: .8rem 1.1rem; font-weight: 700; font-size: .92rem; margin: 0 0 1.4rem; display: flex; gap: .6rem; align-items: center; }
.post-hero { margin: 0 0 1.8rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .post-hero img { width: 100%; height: auto; max-height: 560px; object-fit: cover; }
.prose { font-size: 1.08rem; } .prose-page { font-size: 1.05rem; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.8em; } .prose h3 { font-size: 1.3rem; margin-top: 1.5em; }
.prose img { border-radius: var(--r); margin: 1.5rem 0; }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; background: var(--butter); border-radius: var(--r); font: italic 600 1.15rem/1.5 var(--serif); }
.prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--coral); }
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; display: block; overflow-x: auto; } .prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; } .prose th { background: var(--mint); }
.prose code { background: var(--mint); padding: .1rem .4rem; border-radius: 6px; }
.prose hr { border: 0; border-top: 2px dashed var(--line); margin: 2rem 0; }
.lead + .prose { margin-top: 1rem; }

/* ---------- Ricetta ---------- */
.recipe { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(1.2rem, 3vw, 2.2rem); margin: 2.5rem 0; border: 2px solid var(--mint); }
.recipe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; background: var(--c); margin: calc(-1 * clamp(1.2rem, 3vw, 2.2rem)); margin-bottom: 1.3rem; padding: 1.4rem clamp(1.2rem, 3vw, 2.2rem); border-radius: 28px 28px 0 0; }
.recipe-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); } .recipe-head .eyebrow { background: rgba(255,255,255,.6); margin-bottom: .6rem; }
.chips { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.chips li { background: var(--cream); border-radius: 18px; padding: .7rem 1rem; display: grid; } .chips small { color: var(--ink-2); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; } .chips b { font: 800 1.1rem/1.2 var(--serif); }
.recipe-cols { display: grid; gap: 2rem; } .recipe h3 { font-size: 1.4rem; }
.ingr ul { list-style: none; padding: 0; margin: 0; } .ingr li { border-bottom: 1px dashed var(--line); padding: .5rem 0; } .ingr label { display: flex; gap: .7rem; cursor: pointer; align-items: flex-start; }
.ingr input { width: 20px; height: 20px; margin-top: .25rem; accent-color: var(--sage-d); flex: none; } .ingr input:checked + span { text-decoration: line-through; opacity: .5; }
.ingr-group { font: 800 .85rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--sage-d); padding-top: 1rem !important; border: 0 !important; }
.steps ol { list-style: none; padding: 0; margin: 0; counter-reset: st; display: grid; gap: 1rem; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; }
.steps li::before { content: counter(st); width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: #fff; font: 800 1.2rem/44px var(--serif); text-align: center; box-shadow: 0 5px 0 rgba(38,53,74,.12); }
.tips { background: var(--butter); border-radius: var(--r); padding: 1rem 1.3rem; margin-top: 1.5rem; } .tips p { margin: .3rem 0 0; }

.notes-box { background: var(--lav); border-radius: var(--r); padding: 1rem 1.3rem; margin: 2rem 0; font-size: .95rem; } .notes-box p { margin: .3rem 0; } .notes-box ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
ul.plain { list-style: none; padding: 0; }
/* ---------- Banner ---------- */
.banner { position: relative; margin: 0; } .banner-label { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); opacity: .75; margin-bottom: .3rem; font-weight: 800; }
.banner img { border-radius: var(--r); width: 100%; height: auto; box-shadow: var(--shadow); }
.banner-side { max-width: 320px; } .banner-side .promo, .banner-side img { aspect-ratio: 1; }
.in-banner { margin: 1.6rem 0; }
.promo { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: var(--r); background: linear-gradient(135deg, var(--sky), var(--lav)); text-decoration: none; box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
.promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.promo-ico { font-size: 2.4rem; animation: bob 3s ease-in-out infinite; } .promo-txt { display: grid; flex: 1; line-height: 1.3; } .promo-txt small { color: var(--ink-2); }
.promo-btn { background: var(--ink); color: #fff; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 800; white-space: nowrap; font-size: .9rem; }
.promo-side { flex-direction: column; justify-content: center; text-align: center; background: linear-gradient(160deg, var(--sky), var(--mint) 55%, var(--lav)); } .promo-side .promo-ico { font-size: 4rem; }

/* ---------- Sidebar ---------- */
.side-sticky { display: grid; gap: 1.4rem; align-content: start; }
.side-card { background: #fff; border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--shadow); } .side-card h3 { font-size: 1.2rem; }
.side-nl { background: linear-gradient(160deg, #fff, #F3FAF5); } .side-nl p { font-size: .9rem; color: var(--ink-2); }
.side .nl-form .fld span { font-size: .75rem; } .side .check { font-size: .72rem; }
.side-cats ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .side-cats a { display: flex; align-items: center; gap: .6rem; background: var(--c); padding: .6rem .9rem; border-radius: 14px; text-decoration: none; font-weight: 800; transition: transform .2s; } .side-cats a:hover { transform: translateX(5px); } .side-cats small { margin-left: auto; background: rgba(255,255,255,.7); padding: 0 .55rem; border-radius: 999px; }

/* ---------- Condivisione / commenti ---------- */
.post-foot { margin: 2rem 0; } .share { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-weight: 800; padding: 1rem 1.2rem; background: #fff; border-radius: 999px; box-shadow: var(--shadow); } .share a { background: var(--mint); padding: .3rem .8rem; border-radius: 999px; text-decoration: none; font-size: .9rem; }
.comments { margin-top: 2.5rem; } .comment { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px dashed var(--line); } .comment p { margin: .3rem 0 0; }
.comment-av { width: 44px; height: 44px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; font: 800 1.1rem var(--serif); flex: none; }
.notice.ok { background: var(--mint); padding: .8rem 1rem; border-radius: 14px; font-weight: 700; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) { .nl-row { grid-template-columns: 1fr 1fr; } .trail { grid-template-columns: repeat(3, 1fr); } .cat-tiles { grid-template-columns: repeat(3, 1fr); } .grid-cards { grid-template-columns: repeat(2, 1fr); } .chips { grid-template-columns: repeat(3, 1fr); } .cookie-in { grid-template-columns: 1fr auto; align-items: center; } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .f-brand { grid-column: auto; } }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1.15fr .85fr; } .footer-news-in { grid-template-columns: 1fr 1.2fr; gap: 3rem; }
  .trail { grid-template-columns: repeat(5, 1fr); } .trail .stop:nth-child(even) { margin-top: 28px; } .trail .stop-star { grid-column: auto; }
  .cat-tiles { grid-template-columns: repeat(5, 1fr); } .cat-tile:nth-child(even) { margin-top: 20px; }
  .grid-cards { grid-template-columns: repeat(3, 1fr); } .grid-cards .card-big { grid-column: span 2; flex-direction: row; } .card-big .card-media { aspect-ratio: auto; flex: 1.1; min-height: 320px; } .card-big .card-body { flex: 1; justify-content: center; } .card-big h3 { font-size: 1.8rem; }
  .grid-cards.grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-cards.grid-3 { grid-template-columns: repeat(3, 1fr); }
  .spot-in { grid-template-columns: 1.2fr .8fr; } .about { grid-template-columns: .6fr 1.4fr; }
  .modal-card { grid-template-columns: .85fr 1.15fr; } .modal-sm { grid-template-columns: 1fr; } .modal-art { display: grid; }
  .with-side { grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; } .side-sticky { position: sticky; top: 92px; }
  .only-desktop { display: block; }
  .recipe-cols { grid-template-columns: .85fr 1.15fr; gap: 2.5rem; }
}
@media (min-width: 1180px) { .nav-search { display: block; } }
@media (max-width: 1179px) and (min-width: 900px) { .brand-text small { display: none; } .nav > a { padding: .5rem .65rem; } }
@media (max-width: 899px) {
  .burger { display: block; }
  .nav { position: fixed; inset: 0; z-index: 55; flex-direction: column; justify-content: center; align-items: stretch; gap: .4rem; padding: 5rem 2rem 2rem; background: var(--cream); transform: translateY(-102%); transition: transform .5s cubic-bezier(.7,0,.2,1); visibility: hidden; }
  .nav.open { transform: none; visibility: visible; }
  .nav > a { font: 800 1.9rem/1.2 var(--serif); padding: .6rem 1rem; }
  .nav.open > a { animation: slidein .5s both; } .nav.open > a:nth-child(2) { animation-delay: .05s; } .nav.open > a:nth-child(3) { animation-delay: .1s; } .nav.open > a:nth-child(4) { animation-delay: .15s; } .nav.open > a:nth-child(5) { animation-delay: .2s; } .nav.open > a:nth-child(6) { animation-delay: .25s; } .nav.open > a:nth-child(7) { animation-delay: .3s; }
  @keyframes slidein { from { opacity: 0; transform: translateX(-30px); } }
  .nav-search { display: block; margin: 1rem 0 0; } .nav-search input, .nav-search input:focus { width: 100%; font-size: 1rem; padding: .8rem 1.2rem; }
  .brand-text small { display: none; }
  body.nav-open { overflow: hidden; }
  .banner-side { max-width: 100%; margin-inline: auto; } .banner-side .promo, .banner-side img { aspect-ratio: auto; } .banner-side .promo-side { flex-direction: row; text-align: left; } .banner-side .promo-side .promo-ico { font-size: 2.4rem; }
  .art-mascot { width: 220px; } .hero-art { min-height: 300px; }
  .card-big .card-media { aspect-ratio: 4/3; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } }

/* ---------- Stampa ---------- */
@media print {
  .site-header, .footer-news, .site-footer, .side, .banner, .in-banner, .comments, .post-foot, .cookie, .modal, .no-print, .marquee, .related, .ai-note + .post-hero { display: none !important; }
  body { background: #fff; font-size: 12pt; } body::before { display: none; } .with-side { display: block; } .recipe { box-shadow: none; border: 1px solid #ccc; } .post-hero { box-shadow: none; max-height: 240px; overflow: hidden; }
}