/*
 * Ricette di Natale on the web: the design system's tokens
 * (design_handoff_ricettedinatale/README-designsystem.md), dressed warmer
 * than the app (user request, 16 Oct 2026: «più emozionale, cucinare
 * insieme, baking memories»): the logo's ivory instead of white, real
 * photos of people baking, a band knitted like a Christmas jumper in fir
 * green, fairy lights, snow on the opening photo and handwriting (Caveat,
 * the app's face for the user's notes) as the festive material. Still never
 * Santa hats, candy-cane stripes or a shop's layout. Falling snow is an
 * exception to the design system, for the site only. Light only, as the app.
 * Fonts are served from here: the design system's woff2 files and Caveat,
 * subset to Latin from @expo-google-fonts/caveat (SIL OFL).
 */

@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/playfair-display-latin-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-latin-700-italic.woff2) format("woff2"); }
@font-face { font-family: Caveat; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/caveat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Caveat; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/caveat-latin-600-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-sunken: #f5f1ee;
  --line: #ede6e2;
  --ink: #1f1716;
  --ink-muted: #6e605c;
  --brand: #c41e30;
  --brand-strong: #a11828;
  --brand-soft: #fdedee;
  --on-brand: #ffffff;
  --pine: #1d6a46;
  --pine-soft: #e6f2eb;
  --gold: #a87810;
  --gold-soft: #fbf1da;
  /* The app icon's star; on slate only (CLAUDE.md, «Banner della Home»). */
  --gold-bright: #e3b04b;
  --slate: #363f46;
  /* The page's paper: the logo's warm ivory (user's spec, 16 Oct 2026). */
  --cream: #fefbf2;
  --cream-deep: #f3e8d8;
  /* Text over the photos: the warm dark of a kitchen at night. */
  --night: #1c100a;
  --on-photo: #fff8ef;

  --sans: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --festive: "Playfair Display", Georgia, "Times New Roman", serif;
  --hand: Caveat, "Segoe Print", "Bradley Hand", cursive;

  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --shadow-card: 0 8px 24px rgba(31, 23, 22, 0.08);
  --shadow-float: 0 -8px 32px rgba(31, 23, 22, 0.1);
  --shadow-brand: 0 10px 24px rgba(196, 30, 48, 0.3);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #1d6a46;

  --gutter: 24px;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
:where(ul[role="list"]) { list-style: none; padding: 0; }
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 359px) { :root { --gutter: 16px; } }

/* ── Type ─────────────────────────────────────────────────────────────── */

.caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.kicker { font-family: var(--festive); font-style: italic; font-weight: 600; font-size: 19px; line-height: 26px; color: var(--brand); }
.title-1 { font-size: clamp(24px, 18px + 1.6vw, 34px); line-height: 1.25; font-weight: 600; }
.h2 { font-size: clamp(22px, 18px + 1vw, 28px); line-height: 1.3; font-weight: 600; }

/* ── Controls ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
  font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--brand-strong); }
.btn:focus-visible { border-radius: 999px; }
.btn--sm { min-height: 44px; padding: 0 18px; }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 16px; line-height: 22px; justify-self: start; box-shadow: var(--shadow-brand); }
.btn--light { background: #fff; color: var(--brand); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.btn--light:hover { background: var(--cream); }

.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badges--center { justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px 0 16px; border-radius: 14px;
  background: #000; color: #fff; text-decoration: none;
  transition: transform 0.15s ease;
}
.badge:hover { transform: translateY(-1px); }
.badge:focus-visible { border-radius: 14px; }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.1; }
.badge__txt small { font-size: 12px; font-weight: 400; opacity: 0.85; }
.badge__txt strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
/* Both stores on one row on a phone. */
@media (max-width: 479px) {
  .badges { gap: 10px; }
  .badge { height: 48px; gap: 8px; padding: 0 14px 0 12px; border-radius: 12px; }
  .badge svg { width: 22px; height: 22px; }
  .badge__txt strong { font-size: 16px; }
}

/* ── Header and footer ───────────────────────────────────────────────── */

.top { background: var(--cream); }
/*
 * Home: fixed over the photo. Ivory by default (no JavaScript, or scrolled:
 * site.js sets .is-solid), transparent with the light logo while the photo
 * is under it.
 */
.top--over {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(254, 251, 242, 0.94); box-shadow: 0 1px 0 rgba(31, 23, 22, 0.06), 0 8px 24px rgba(31, 23, 22, 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.top__logo { position: relative; }
.top--over .top__logo-light { opacity: 0; transition: opacity 0.35s ease; }
.top--over .top__logo-dark { position: absolute; inset: 0; opacity: 1; transition: opacity 0.35s ease; }
.js .top--over:not(.is-solid) { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js .top--over:not(.is-solid) .top__logo-light { opacity: 1; }
.js .top--over:not(.is-solid) .top__logo-dark { opacity: 0; }
.top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.top__logo { display: block; border-radius: 8px; }
.top__logo img { width: 192px; height: auto; }
@media (max-width: 380px) { .top__logo img { width: 160px; } .top .btn--sm { padding: 0 14px; } }
/* On a phone the header says just "Scarica" (user request, 16 Oct 2026); the label keeps "l'app". */
@media (max-width: 599px) { .top .btn__more { display: none; } }
/*
 * The other editions' wordmark (src/editions.js, 18 Oct 2026): the app's
 * name in the face of "Natale", until each has a logo drawn like logo.svg.
 * Sized so that the longest, "Weihnachtsrezepte", leaves the header's
 * button room on a 320 px phone. Unused on the Italian pages.
 */
.top__logo { text-decoration: none; }
.wordmark { display: block; font-family: var(--festive); font-style: italic; font-weight: 700; font-size: 27px; line-height: 34px; letter-spacing: -0.01em; color: var(--brand); white-space: nowrap; transition: color 0.35s ease; }
/* Over the home's photo, cream like logo-light.svg. */
.js .top--over:not(.is-solid) .wordmark { color: var(--on-photo); }
.wordmark--foot { font-size: 23px; line-height: 29px; }
@media (max-width: 599px) { .top .wordmark { font-size: 23px; } }
@media (max-width: 380px) { .top .wordmark { font-size: 20px; } }

.foot { background: var(--cream-deep); }
* + .knit { margin-top: 32px; }
.tour + .knit, .knit + .tour { margin-top: 0; }
.foot__inner { display: grid; gap: 16px; padding-top: 40px; padding-bottom: 48px; justify-items: start; }
.foot__logo { width: 164px; height: auto; }
.foot__about { font-size: 13px; line-height: 20px; color: var(--ink-muted); max-width: 36em; }
.foot__about a { color: inherit; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__links a { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; padding: 12px 0; }
.foot__links a:hover { color: var(--brand); }

/* ── Home: the opening photo ─────────────────────────────────────────── */

/*
 * A real kitchen at night fills the screen and the words sit on its calm
 * side: left on a computer, the bottom on a phone (the tall photo keeps its
 * people in the upper part). The gradient is the kitchen's own dark, never a
 * grey veil.
 */
.hero { position: relative; isolation: isolate; display: flex; min-height: max(600px, 100svh); color: var(--on-photo); background: var(--night); overflow: hidden; }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo { z-index: -3; }
.hero__photo img { object-fit: cover; object-position: 50% 30%; }
/* The kitchen's own dark under the words, and a little at the top for the transparent header. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(28, 16, 10, 0.55) 0, rgba(28, 16, 10, 0) 150px), linear-gradient(0deg, rgba(28, 16, 10, 0.92) 0%, rgba(28, 16, 10, 0.72) 34%, rgba(28, 16, 10, 0) 62%); }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__drift { position: absolute; left: 0; bottom: -1px; width: 100%; height: 44px; z-index: -1; }
.snow-on .hero__drift { visibility: hidden; }
.hero__inner { display: flex; align-items: flex-end; padding-top: 112px; padding-bottom: 72px; }
.hero__copy { display: grid; gap: 16px; max-width: 560px; }
.hero__title { font-size: clamp(38px, 26px + 3.6vw, 72px); line-height: 1.04; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.hero__title em { font-family: var(--festive); font-style: italic; font-weight: 700; color: var(--gold-bright); letter-spacing: 0; }
.hero__note { font-family: var(--hand); font-weight: 600; font-size: clamp(28px, 22px + 1.4vw, 38px); line-height: 1; color: #f4cf8f; transform: rotate(-3deg); transform-origin: left center; margin: -6px 0 4px 4px; }
.hero__lead { font-size: 17px; line-height: 28px; color: rgba(255, 248, 239, 0.92); max-width: 30em; }
.hero__get { display: grid; gap: 10px; margin-top: 8px; }
.hero__get .caption { color: rgba(255, 248, 239, 0.75); }
@media (min-width: 900px) {
  .hero { min-height: min(920px, max(640px, 100svh)); }
  .hero__photo img { object-position: 70% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(28, 16, 10, 0.5) 0, rgba(28, 16, 10, 0) 160px), linear-gradient(90deg, rgba(28, 16, 10, 0.86) 0%, rgba(28, 16, 10, 0.62) 34%, rgba(28, 16, 10, 0) 64%); }
  .hero__drift { height: 64px; }
  .hero__inner { align-items: center; padding-top: 120px; padding-bottom: 96px; }
}

/* The band knitted like a Christmas jumper: fir green, cream trees and snowflakes. */
.knit { height: 36px; background: var(--pine) url(/img/knit.svg) repeat-x 0 0 / 64px 36px; }

/* The app's recipe screen, drawn: decorative, aria-hidden in the markup. */
.phone {
  justify-self: center;
  width: 320px; aspect-ratio: 9 / 19.2;
  max-width: 100%;
  padding: 10px; border-radius: 48px;
  background: var(--ink);
  box-shadow: 0 30px 60px rgba(31, 23, 22, 0.18), 0 8px 24px rgba(31, 23, 22, 0.12);
}
@media (max-width: 379px) { .phone { zoom: 0.86; } }
.phone__screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--surface); color: var(--ink); }
/* Real screenshots, one at a time, crossfading (site.js turns them). */
.phone__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.7s ease; }
.phone__shot.is-on { opacity: 1; }
.dots { order: 1; display: flex; justify-content: center; margin-top: 8px; }
.dots__dot { width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 12px; }
.dots__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 248, 239, 0.4); transition: background-color 0.3s ease, transform 0.3s ease; }
.dots__dot.is-on::before { background: var(--gold-bright); transform: scale(1.25); }
.dots__pause { width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0; border-radius: 12px; background: none; color: rgba(255, 248, 239, 0.7); cursor: pointer; display: grid; place-items: center; }
.dots__pause:hover { color: var(--on-photo); }
.dots__pause[aria-pressed="false"] .dots__icon--play, .dots__pause[aria-pressed="true"] .dots__icon--pause { display: none; }

/* ── Baubles: the recipe's time, servings and difficulty ─────────────── */

.baubles { display: flex; justify-content: space-between; gap: 12px; max-width: 360px; margin: 24px 0; }
.bauble { display: flex; flex-direction: column; align-items: center; }
.bauble::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--gold); border-radius: 50%; margin-bottom: 7px; }
.bauble__ball {
  position: relative;
  width: 104px; height: 104px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 8px; text-align: center;
}
.bauble__ball::before { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 8px; transform: translateX(-50%); border-radius: 3px 3px 0 0; background: var(--gold); }
.bauble__ball::after { content: ""; position: absolute; top: 14px; left: 18px; width: 18px; height: 9px; border-radius: 5px; background: #fff; opacity: 0.7; transform: rotate(-35deg); }
.bauble__ball strong { font-size: 15px; line-height: 20px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.bauble__ball small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.bauble--brand .bauble__ball { background: var(--brand-soft); color: var(--brand); }
.bauble--pine .bauble__ball { background: var(--pine-soft); color: var(--pine); }
.bauble--gold .bauble__ball { background: var(--gold-soft); color: var(--gold); }
.bauble__ball strong, .bauble__ball small { color: var(--ink); }
.bauble__ball small { color: var(--ink-muted); }

/* ── Home: sections ──────────────────────────────────────────────────── */

.section { padding-block: 56px; }
.section__head { display: grid; gap: 6px; }
.section__lead { color: var(--ink-muted); max-width: 40em; }

/* Handwriting: short notes only, like the ones on a family recipe card. */
.hand { font-family: var(--hand); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--ink-muted); }
.hand--red { color: var(--brand); transform: rotate(-2deg); transform-origin: left center; justify-self: start; }

.lights { display: flex; justify-content: center; overflow: hidden; pointer-events: none; }
.lights svg { flex: none; max-width: none; }

/* Recipes as photos laid on the table: a white border, a strip of tape, a handwritten title. */
.polaroids {
  display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 20px;
  margin-top: 16px;
  padding: 28px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 32px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.polaroids::-webkit-scrollbar { display: none; }
/* Each tilts by its own fixed amount (in CSS: the page's CSP allows no inline style). */
.polaroid { --tilt: -2deg; scroll-snap-align: start; transform: rotate(var(--tilt)); transition: transform 0.25s ease; }
.polaroid:nth-child(8n + 2) { --tilt: 1.6deg; }
.polaroid:nth-child(8n + 3) { --tilt: -1deg; }
.polaroid:nth-child(8n + 4) { --tilt: 2.2deg; }
.polaroid:nth-child(8n + 5) { --tilt: 1.2deg; }
.polaroid:nth-child(8n + 6) { --tilt: -1.8deg; }
.polaroid:nth-child(8n + 7) { --tilt: 2deg; }
.polaroid:nth-child(8n + 8) { --tilt: -1.4deg; }
.polaroid:hover { transform: rotate(0deg) translateY(-4px); }
.polaroid a {
  position: relative; display: grid; gap: 2px;
  padding: 10px 10px 14px; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(31, 23, 22, 0.08), 0 12px 28px rgba(31, 23, 22, 0.14);
  color: var(--ink); text-decoration: none;
}
.polaroid a:focus-visible { border-radius: 4px; }
.polaroid a::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 76px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(243, 232, 216, 0.82); box-shadow: 0 1px 2px rgba(31, 23, 22, 0.12);
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; background: var(--cream-deep); margin-bottom: 8px; }
.polaroid__title { font-family: var(--hand); font-weight: 600; font-size: 23px; line-height: 1.05; min-height: 2.1em; }
.polaroid__meta { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
@media (min-width: 960px) {
  .polaroids { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); overflow: visible; }
}

/* The app, on fir green under the knitted band. */
.tour { background: var(--pine); color: var(--on-photo); padding-block: 64px 72px; }
.tour .hand--red, .tour__note, .tour__arrow { color: var(--gold-bright); }
.tour .phone { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.2); }
.tour__inner { display: grid; gap: 48px; align-items: center; }
.tour__phone { position: relative; justify-self: center; display: grid; justify-items: center; }
/* Under the phone, pointing up at it, as written on the side of a recipe card. */
.tour__note { order: 3; margin-top: 4px; text-align: center; transform: rotate(-3deg); }
.tour__arrow { order: 2; margin-top: 12px; transform: scaleY(-1) rotate(-20deg); }
.tour__copy { display: grid; gap: 6px; }
.features { display: grid; margin-top: 16px; }
.feature { border-top: 1.5px dashed rgba(255, 248, 239, 0.28); transition: opacity 0.4s ease; }
.feature:last-child { border-bottom: 1.5px dashed rgba(255, 248, 239, 0.28); }
/* Each feature is a button: tapping it shows its screen on the phone. */
.feature__btn {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
  width: calc(100% + 24px); margin-inline: -12px; padding: 18px 12px;
  border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 0.25s ease;
}
.feature__btn:hover { background: rgba(255, 248, 239, 0.06); }
/* An edition without screens of its app (src/home/, `screens: null`): the same row, nothing to tap. */
.feature__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 18px; }
.feature__btn:focus-visible { border-radius: 16px; }
.feature__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--pine); display: grid; place-items: center; transition: background-color 0.4s ease, color 0.4s ease; }
.feature__title { display: block; font-size: 18px; line-height: 26px; font-weight: 600; }
.feature__text { display: block; font-size: 15px; line-height: 24px; color: rgba(255, 248, 239, 0.82); margin-top: 2px; }
/* The feature the phone is showing. */
.features.is-turning .feature:not(.is-on) { opacity: 0.55; }
.feature.is-on .feature__icon { background: var(--gold-bright); color: var(--night); }
@media (min-width: 900px) {
  .tour { padding-block: 88px; }
  .tour__inner { grid-template-columns: 400px minmax(0, 1fr); gap: 80px; }
  .tour__phone { justify-self: start; }
}

/* The app's Home banner, stitched like a patch, under a string of lights. */
.countdown { padding-top: 24px; }
.countdown .lights { margin-bottom: -26px; position: relative; z-index: 1; }
.banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 56px 28px 44px; border-radius: var(--radius-2xl);
  /* A glow of light behind the number, the red deepening towards the edges. */
  background: radial-gradient(90% 75% at 50% 38%, #d8323f 0%, var(--brand) 48%, #9a1523 100%);
  color: var(--on-brand); box-shadow: var(--shadow-brand);
}
.banner::before { content: ""; position: absolute; inset: 10px; z-index: 1; border: 2px dashed rgba(255, 255, 255, 0.42); border-radius: 24px; pointer-events: none; }
.banner > :not(.sky) { position: relative; z-index: 2; }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky__stars { position: absolute; inset: 0; }
.sky .star { transform-box: fill-box; transform-origin: center; opacity: 0.8; }
/* The comet's head is at the right end of its box; the box is tilted along its path. */
.comet { position: absolute; left: -20%; top: 10%; width: 230px; height: 60px; margin: -48px 0 0 -212px; opacity: 0; transform: rotate(24deg); transform-origin: 212px 48px; }
@media (min-width: 720px) { .comet { transform: rotate(12deg); } }
.banner__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; margin-bottom: 4px; }
.banner__eyebrow { font-family: var(--hand); font-weight: 600; font-size: 28px; line-height: 1.1; }
.banner__title { font-size: clamp(26px, 20px + 1.8vw, 38px); line-height: 1.2; font-weight: 700; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 12px; }
.banner__count { font-family: var(--festive); font-style: italic; font-weight: 700; font-size: 2.1em; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 28px rgba(255, 231, 168, 0.45); }
/* On a phone the number takes its own line, above the words. */
@media (max-width: 599px) { .banner__title { flex-direction: column; align-items: center; gap: 0; } .banner { padding-inline: 22px; } }
.banner__text { max-width: 34em; opacity: 0.95; }
.banner__cta { justify-self: center; margin-top: 16px; position: relative; }
.banner--slate .banner__cta { color: var(--slate); }
.banner--pine .banner__cta { color: var(--pine); }
.banner--slate { background: radial-gradient(90% 75% at 50% 38%, #4a555e 0%, var(--slate) 50%, #252b30 100%); box-shadow: 0 10px 24px rgba(54, 63, 70, 0.3); }
.banner--slate .banner__icon, .banner--slate .banner__count { color: var(--gold-bright); }
.banner--pine { background: radial-gradient(90% 75% at 50% 38%, #2a8a5c 0%, var(--pine) 50%, #134a30 100%); box-shadow: 0 10px 24px rgba(29, 106, 70, 0.3); }

/* ── Shared recipe ───────────────────────────────────────────────────── */

.recipe__inner { padding: 0; }
.recipe__photo { aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; overflow: hidden; background: var(--cream-deep); }
.recipe__photo img { width: 100%; height: 100%; object-fit: cover; }
.recipe__sheet {
  position: relative; margin-top: -32px;
  padding: 28px var(--gutter) 8px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--cream); box-shadow: var(--shadow-float);
}
.recipe__inner--plain .recipe__sheet { margin-top: 0; box-shadow: none; padding-top: 24px; }
.recipe__sheet .title-1 { margin-top: 2px; }
.recipe__region { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 4px; }
.recipe__text { font-size: 16px; line-height: 26px; margin-bottom: 28px; max-width: 36em; }
.recipe__club { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 20px 0 8px; }

/* The way into the app, over the home page's kitchen at night. */
.getapp {
  display: grid; gap: 10px; padding: 28px 24px; border-radius: var(--radius-xl);
  color: var(--on-photo); scroll-margin-top: 24px;
  background: linear-gradient(90deg, rgba(28, 16, 10, 0.9) 0%, rgba(28, 16, 10, 0.72) 60%, rgba(28, 16, 10, 0.5) 100%), var(--night) url(/img/hero-wide.jpg) 70% 40% / cover;
  box-shadow: 0 14px 32px rgba(28, 16, 10, 0.22);
}
.getapp__note { color: #f4cf8f; transform: rotate(-2deg); transform-origin: left center; justify-self: start; }
.getapp__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.getapp p:not(.hand) { color: rgba(255, 248, 239, 0.86); }
.getapp .badges { margin-top: 6px; }
.getapp .badge { box-shadow: 0 0 0 1px rgba(255, 248, 239, 0.35); }
.openapp { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; justify-self: start; color: var(--gold-bright); }
.openapp::after { content: "›"; font-size: 20px; margin-left: 6px; line-height: 1; }

@media (min-width: 900px) {
  .recipe__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 40px var(--gutter) 56px; align-items: start; }
  .recipe__inner--plain { grid-template-columns: minmax(0, 640px); justify-content: center; }
  /* The photo as a polaroid laid on the table, like the home page's. */
  .recipe__photo {
    position: sticky; top: 32px; aspect-ratio: 3 / 4; max-height: calc(100vh - 64px); overflow: visible;
    padding: 14px 14px 56px; background: #fff; border-radius: 4px; transform: rotate(-1.5deg);
    box-shadow: 0 1px 2px rgba(31, 23, 22, 0.08), 0 18px 40px rgba(31, 23, 22, 0.16);
  }
  .recipe__photo::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(243, 232, 216, 0.85); box-shadow: 0 1px 2px rgba(31, 23, 22, 0.12); }
  .recipe__photo img { border-radius: 2px; }
  .recipe__sheet { margin-top: 0; padding: 8px 0 0; box-shadow: none; border-radius: 0; background: none; }
}

/* ── 404 ─────────────────────────────────────────────────────────────── */

.empty { display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: 56px; padding-bottom: 56px; max-width: 560px; }
.empty__mark { width: 72px; height: auto; margin-bottom: 8px; }
.empty p { color: var(--ink-muted); }
.empty .badges { margin: 8px 0; }

/* ── /scarica ────────────────────────────────────────────────────────── */

.get { display: grid; gap: 40px; align-items: center; padding-top: 24px; padding-bottom: 72px; }
.get__copy { display: grid; gap: 14px; }
.get__title { font-size: clamp(32px, 22px + 2.6vw, 54px); line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.get__lead { font-size: 17px; line-height: 28px; color: var(--ink-muted); max-width: 32em; margin-bottom: 8px; }
.get__photo {
  order: 2; position: relative; justify-self: center; width: min(76vw, 360px);
  padding: 12px 12px 48px; background: #fff; border-radius: 4px; transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(31, 23, 22, 0.08), 0 18px 40px rgba(31, 23, 22, 0.16);
}
.get__photo::before { content: ""; position: absolute; top: -14px; left: 50%; width: 100px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(243, 232, 216, 0.85); box-shadow: 0 1px 2px rgba(31, 23, 22, 0.12); }
.get__photo img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }
@media (min-width: 900px) {
  .get { grid-template-columns: 380px minmax(0, 1fr); gap: 88px; padding-top: 56px; padding-bottom: 96px; }
  .get__photo { order: 0; }
}

/* ── Motion: only for whoever has not asked for less ─────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: closer 18s ease-out both; }
  .hero__title { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  /* The handwriting writes itself, left to right. */
  .hero__note { animation: write 1.4s cubic-bezier(0.45, 0, 0.3, 1) 0.8s both; }
  .hero__lead { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }
  .hero__get { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s both; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Polaroids drop on the table one after the other and settle at their tilt. */
  .js .polaroids[data-reveal] { opacity: 1; transform: none; }
  .js .polaroids[data-reveal] .polaroid { opacity: 0; transform: translateY(-40px) rotate(calc(var(--tilt) - 10deg)); }
  .js .polaroids.is-in .polaroid { opacity: 1; transform: rotate(var(--tilt)); transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.3, 1.35, 0.5, 1); }
  .js .polaroids.is-in .polaroid:hover { transform: rotate(0deg) translateY(-4px); transition-delay: 0s; }
  .polaroids.is-in .polaroid:nth-child(2) { transition-delay: 0.08s; }
  .polaroids.is-in .polaroid:nth-child(3) { transition-delay: 0.16s; }
  .polaroids.is-in .polaroid:nth-child(4) { transition-delay: 0.24s; }
  .polaroids.is-in .polaroid:nth-child(5) { transition-delay: 0.32s; }
  .polaroids.is-in .polaroid:nth-child(6) { transition-delay: 0.4s; }
  .polaroids.is-in .polaroid:nth-child(7) { transition-delay: 0.48s; }
  .polaroids.is-in .polaroid:nth-child(8) { transition-delay: 0.56s; }

  .tour .phone { animation: float 7s ease-in-out infinite; }

  /* The countdown's sky: five paces of twinkling, a comet every 11 s. */
  .sky .tw1 { animation: twinkle 3.1s ease-in-out infinite; }
  .sky .tw2 { animation: twinkle 4.3s ease-in-out -1.2s infinite; }
  .sky .tw3 { animation: twinkle 2.6s ease-in-out -0.7s infinite; }
  .sky .tw4 { animation: twinkle 5.2s ease-in-out -2.9s infinite; }
  .sky .tw5 { animation: twinkle 3.7s ease-in-out -1.9s infinite; }
  .comet { animation: comet 11s ease-in 1.5s infinite; }

  /* Two groups of bulbs light up in turn: one change every 1.6 s. */
  .lights .bulb__glow { animation: glow 3.2s ease-in-out infinite; }
  .lights .bulb__glass { animation: glass 3.2s ease-in-out infinite; }
  .lights .bulb--b .bulb__glow, .lights .bulb--b .bulb__glass { animation-delay: -1.6s; }
}
@keyframes closer { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.65); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes comet {
  0% { left: -10%; top: 12%; opacity: 0; }
  2% { opacity: 1; }
  12% { opacity: 1; }
  16% { left: 112%; top: 74%; opacity: 0; }
  100% { left: 112%; top: 74%; opacity: 0; }
}
@keyframes glow { 0%, 42%, 100% { opacity: 1; } 50%, 92% { opacity: 0.15; } }
@keyframes glass { 0%, 42%, 100% { opacity: 1; } 50%, 92% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}