/* Hallmark · shape: Photographic (le foto guidano: muro in apertura, vetrina orizzontale a capitoli, la bottega, il biglietto, la via) · genre: editorial · theme: Atelier (deal 1/3, seed historic-italian-family-pastry-a679·0b135af7·2026-10-31·r0) · job: visit · draw: f15b44 · brand: Fossati (spec 2026-10-31)
 * hero: Stage, testo a sinistra, muro di foto a destra · nav: edge-aligned sticky con l'orario di oggi (swap dal search-led: non c'è nulla da cercare) · footer: index columns · imagery: photographs 19 della pasticceria · signature: la vetrina orizzontale con l'aria che cambia colore a ogni capitolo
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: P, il sito mostra più di quanto sostenga; le foto sono l'argomento, tolte le frasi di troppo */
/* Hallmark · waive 29 · fondo animato color carta, fili crema e miele · è l'aria del tema Atelier, tinta dalla categoria della vetrina e mai dietro il testo lungo */
/* Hallmark · waive 83 · 17 foto della pasticceria stessa, galleria per categorie · la richiesta è mostrarle tutte: la vetrina di lavori propri è il contenuto del sito */
/* Hallmark · waive 44c · muro di foto che scorre da cima a fondo a destra · le tre colonne in movimento non hanno un centro da allineare al testo, stanno sul bordo esterno */
/* Hallmark · hero-review: fix · 5 findings · 3 resolved, 2 declined: h1 keeps name and town because the job is being found; desktop logo stays because the owner asked for it visible */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved, 1 declined: Dal nostro laboratorio resta, è il modo in cui la pasticceria si descrive */
/* Hallmark · dismissed 25 · la citazione è una sola frase di Mauro Fossati, su due righe accanto alla foto */
/* Hallmark · answered F15 · il modulo tiene i campi più vicini delle colonne di pagina perché è un solo biglietto */
/* Hallmark · waive 49b · orario di oggi su due righe solo a 320px · l'orario della pasticceria non si accorcia oltre ed è il dato che serve a chi cerca il negozio */
@import url("./tokens.css");
@import url("./base.css");

:root { --bar: 72px; --tabs: 60px; }

html { background: var(--color-paper); scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body { background: transparent; color: var(--color-ink-2); line-height: 1.6; }
h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); line-height: 1.04; }
h3 { font-weight: var(--serif-small); color: var(--color-ink); }
.lead { color: var(--color-ink-2); }
a { text-decoration-color: var(--color-accent); transition: color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-accent); }
a:active { color: var(--color-ink); }
::selection { background: var(--color-ink); color: var(--color-paper); }

.air { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Barra */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); min-height: var(--bar); }
.bar__brand { display: inline-flex; align-items: center; gap: var(--space-sm); justify-self: start; font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-lg); line-height: 1; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.bar__brand img { width: 48px; height: 48px; flex-shrink: 0; }
.bar__links { display: flex; gap: var(--space-lg); font-size: var(--text-sm); }
.bar__links a { text-decoration: none; white-space: nowrap; color: var(--color-ink); }
.bar__links a:hover { text-decoration: underline; color: var(--color-accent); }
.bar__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); min-width: 0; }
.bar__today { margin-right: var(--space-xs); font-size: var(--text-sm); line-height: 1.25; color: var(--color-ink); text-align: right; text-decoration: none; text-wrap: balance; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.icon-link svg { width: 20px; height: 20px; fill: currentColor; }
.icon-link:hover { background: var(--color-ink); color: var(--color-paper); }
.icon-link:active { background: var(--color-ink-2); color: var(--color-paper); }

/* Comandi */
.actions, .socials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.socials { gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); color: var(--color-paper); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--solid { background: var(--color-ink); color: var(--color-paper); }
.btn--solid:hover { background: var(--color-ink-2); color: var(--color-paper); }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.3em; white-space: nowrap; }

/* Apertura */
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; height: calc(100dvh - var(--bar)); min-height: 620px; }
.hero__text { position: relative; }
.hero__logo { width: clamp(96px, 13dvh, 136px); height: auto; margin-bottom: var(--space-lg); animation: settle 0.7s var(--ease-out) both; }
.hero__text h1 { font-size: clamp(2.75rem, 5vw, 5.25rem); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 11ch; animation: settle 0.7s var(--ease-out) 60ms both; }
.hero__text .lead { max-width: 30ch; margin-block: var(--space-lg) var(--space-xl); animation: settle 0.7s var(--ease-out) 120ms both; }
.hero__text .actions { animation: settle 0.7s var(--ease-out) 180ms both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-self: stretch; height: calc(100dvh - var(--bar)); min-height: 620px; overflow: clip; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 9%, var(--color-ink) 91%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 9%, var(--color-ink) 91%, transparent); }
.wall__col { display: flex; flex-direction: column; gap: var(--space-md); }
.wall__col img { width: 100%; height: auto; flex-shrink: 0; border-radius: 2px; box-shadow: var(--shadow-card); }
.wall__col--up { animation: wall-up 70s linear infinite; }
.wall__col--slow { animation-duration: 90s; }
.wall__col--down { animation: wall-down 80s linear infinite; }
@keyframes wall-up { to { transform: translateY(calc(-50% - var(--space-md) / 2)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - var(--space-md) / 2)); } to { transform: none; } }
.wall:not(.is-running) .wall__col { animation-play-state: paused; }

/* Vetrina. Base: griglia verticale, valida con movimento ridotto, su telefono e senza scorrimento animato */
.journey { padding-block: var(--section-gap-s); }
.journey__track { display: grid; gap: var(--section-gap-s); width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.chapter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--space-xl) var(--gap-columns); scroll-margin-top: var(--bar); }
.chapter__head { grid-column: 1 / -1; display: grid; gap: var(--space-md); justify-items: start; }
.chapter__head h2 { font-size: var(--text-display); line-height: 1; letter-spacing: var(--tracking-statement); text-wrap: balance; max-width: none; }
.chapter__head .lead { max-width: 44ch; }
.hang { margin: 0; min-width: 0; }
.hang--wide { grid-column: span 2; }
.hang__open { display: block; width: 100%; padding: var(--space-xs); border: 0; border-radius: 2px; background: var(--color-card); box-shadow: var(--shadow-card); cursor: zoom-in; transition: transform var(--dur-short) var(--ease-out); }
.hang__open:hover { transform: translateY(-6px); }
.hang__open:active { transform: translateY(-2px); }
.hang__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hang__open img { display: block; width: 100%; height: auto; }
.hang figcaption { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink); }
.chapter__end { display: grid; gap: var(--space-lg); justify-items: start; }
.chapter__end-line { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display-s); line-height: 1.06; letter-spacing: var(--tracking-statement); color: var(--color-ink); text-wrap: balance; }
.journey__tabs { display: none; }
@media (min-width: 60rem) {
  .chapter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapter--fourths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hang--wide { grid-column: auto; }
  .chapter__end { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@supports (animation-timeline: view()) {
  /* Stessa condizione di isPinned in journey.js. Sotto i 60rem resta la griglia verticale. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .journey { padding-block: 0; height: var(--journey-len, 700dvh); view-timeline: --journey block; }
    .journey__pin { position: sticky; top: var(--bar); overflow: clip; }
    .journey__stage { height: calc(100dvh - var(--bar) - var(--tabs)); overflow: clip; container-type: size; touch-action: pan-y pinch-zoom; }
    .journey__track { display: inline-flex; align-items: stretch; width: auto; max-width: none; margin: 0; height: 100%; gap: var(--space-3xl); padding-inline: max(var(--gutter), calc((100cqw - var(--container)) / 2 + var(--gutter))); animation: journey-slide linear both; animation-timeline: --journey; animation-range: contain 0% contain 100%; }
    .chapter { position: relative; display: flex; align-items: center; gap: var(--space-xl); flex-shrink: 0; }
    .chapter__head { align-content: center; gap: var(--space-lg); width: min(36rem, 44cqw); flex-shrink: 0; margin-right: var(--space-xl); }
    .chapter__head h2 { font-size: clamp(3.25rem, 7cqw, 7rem); }
    .chapter__head .lead { max-width: 34ch; }
    .journey .hang { flex-shrink: 0; }
    .journey .hang__open { width: auto; }
    .journey .hang__open img { width: auto; height: calc(var(--h) * 1cqh); max-width: none; }
    .hang--xl { --h: 76; }
    .hang--l { --h: 64; }
    .hang--m { --h: 52; }
    .hang--top { align-self: flex-start; margin-top: var(--space-lg); }
    .hang--low { align-self: flex-end; margin-bottom: var(--space-lg); }
    .chapter__end { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-xl); width: min(32rem, 40cqw); flex-shrink: 0; }
    .chapter__end-line { font-size: clamp(2.25rem, 4cqw, 3.75rem); }
    .journey__tabs { position: relative; display: block; height: var(--tabs); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
    .journey__tabs-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 100%; font-size: var(--text-sm); }
    .journey__tabs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
    .journey__tabs a:hover { color: var(--color-ink); }
    .journey__social { display: inline-flex; gap: var(--space-lg); padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
    .journey__tabs .journey__social a { gap: var(--space-xs); color: var(--color-ink); }
    .journey__social svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
    .journey__tabs a[aria-current="true"] { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.4em; }
    .journey__progress { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--color-ink); transform-origin: left; animation: journey-progress linear both; animation-timeline: --journey; animation-range: contain 0% contain 100%; }
    @keyframes journey-slide { to { transform: translateX(calc(-100% + 100cqw)); } }
    @keyframes journey-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .tab-short { display: none; }
  }
}

/* Sezioni su carta: coprono l'aria */
.paper { position: relative; background: var(--color-paper); padding-block: var(--section-gap); }
.bottega__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; }
.bottega__text { display: flex; flex-direction: column; gap: var(--space-md); }
.bottega__text h2 { max-width: 15ch; margin-bottom: var(--space-sm); font-size: var(--text-section); line-height: 1.06; }
.bottega__text > p { max-width: 52ch; }
.quote { margin: 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.quote p { max-width: 24ch; font-family: var(--font-display); font-weight: var(--statement-weight); font-size: var(--text-3xl); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.quote footer { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.quote cite { font-style: normal; }
/* Colonne proporzionate alla forma delle foto, così le tre foto hanno la stessa altezza; quella centrale scende come nella vetrina. */
.bottega__photos { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.811fr) minmax(0, 1.666fr) minmax(0, 0.758fr); gap: var(--gap-columns); align-items: start; }
.bottega__wide { margin-top: var(--space-xl); }

/* Catering: tre colonne di foto appese sull'aria, la torta di nozze al centro è la più grande */
.catering { padding-block: var(--section-gap) 0; }
.catering__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: start; }
.catering__col { display: grid; gap: var(--space-xl); }
.catering__col--main { margin-top: var(--space-3xl); }
.catering__head { display: grid; gap: var(--space-lg); justify-items: start; }
.catering__head h2 { font-size: clamp(3.25rem, 6vw, 6rem); line-height: 0.98; letter-spacing: var(--tracking-statement); }

/* Recensioni: tre biglietti come quello di Scrivici, sull'aria; quello centrale scende come i quadri della vetrina */
.recensioni { padding-block: var(--section-gap) 0; }
.recensioni h2 { max-width: 18ch; margin-bottom: var(--space-2xl); font-size: var(--text-section); line-height: 1.06; }
.recensioni__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.recensione { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl) clamp(var(--space-lg), 3vw, var(--space-xl)); }
.recensione > * { position: relative; }
.recensione:nth-child(2) { translate: 0 var(--space-xl); }
.recensione__stars { display: flex; gap: var(--space-3xs); color: var(--color-star); }
.recensione__stars svg { fill: currentColor; }
.recensione blockquote { flex: 1; margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink); text-wrap: pretty; }
.recensione__by { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-card-edge); font-size: var(--text-sm); color: var(--color-muted); }
.recensione__by strong { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-md); color: var(--color-ink); }
.recensioni__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: calc(var(--space-xl) * 2); }
.recensioni__note { max-width: 60ch; font-size: var(--text-sm); color: var(--color-ink-2); }
@keyframes card-rise { from { opacity: 0; transform: translateY(var(--space-xl)); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .recensione { animation: card-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}

/* Scrivici: il biglietto sull'aria */
.contact { padding-block: var(--section-gap); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.contact__text { display: grid; gap: var(--space-lg); }
.contact__text h2 { font-size: clamp(4rem, 10vw, 9rem); line-height: 0.98; letter-spacing: var(--tracking-statement); }
.stock { position: relative; border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); }
.stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
.form > * { position: relative; }
.form__house { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); }
.form__house img { width: 40px; height: 40px; flex-shrink: 0; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; align-content: start; }
.field--wide, .form__foot, .form__status { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); color: var(--color-ink); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--space-xs) 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: transparent; color: var(--color-ink); outline: 2px solid transparent; outline-offset: 2px; }
.field textarea { resize: vertical; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--color-ink); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--color-error); }
.field__error { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.field--trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.form__status { min-height: 1lh; color: var(--color-ink); }

/* Dove */
.dove__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); }
.dove__head { grid-column: 1 / -1; display: grid; gap: var(--space-md); }
.dove__head h2 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: 1; letter-spacing: var(--tracking-statement); max-width: 16ch; }
figure { margin: 0; min-width: 0; }
.dove__map { display: flex; flex-direction: column; min-height: 520px; }
.dove__map figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.map-link { position: relative; display: block; flex: 1; min-height: 480px; overflow: hidden; border-radius: 2px; box-shadow: var(--shadow-card); }
.map-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map defs path { stroke: none; }
.map-ground { fill: var(--color-card); }
.map .map-green { fill: var(--map-green); }
.map .map-build { fill: var(--color-paper-2); }
.map .map-water { stroke: var(--map-green); stroke-width: 6px; }
.map .map-foot { stroke: var(--color-rule); stroke-width: 3px; }
.map .map-minor { stroke: var(--color-rule); stroke-width: 7px; }
.map .map-road { stroke: var(--color-paper-3); stroke-width: 13px; }
.map .map-main { stroke: var(--map-main); stroke-width: 18px; }
.map-label { font-family: var(--font-body); font-size: 15px; fill: var(--color-ink-2); paint-order: stroke; stroke: var(--color-card); stroke-width: 3px; }
.map-label--main { font-size: 16px; fill: var(--color-ink); stroke: var(--map-main); }
.map-pin-ring { fill: var(--color-ink); }
.map-name { font-family: var(--font-display); font-weight: var(--serif-small); font-size: 30px; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-card); stroke-width: 6px; }
.dove__info { display: grid; gap: var(--space-xl); align-content: start; }
.hours { width: 100%; border-collapse: collapse; border-top: var(--rule-head) solid var(--color-ink); }
.hours th, .hours td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; color: var(--color-ink); }
.hours thead th { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.hours td { white-space: nowrap; }
.hours tbody th { font-family: var(--font-display); font-weight: var(--serif-small); }
.hours .is-today th, .hours .is-today td { background: var(--map-main); }
.hours .is-today th { padding-left: var(--space-sm); }
.dove__notes { font-size: var(--text-sm); }

/* Piede */
.footer { position: relative; background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl) var(--space-lg); font-size: var(--text-sm); }
.footer a { color: var(--color-paper); text-decoration-color: var(--color-paper-3); }
.footer a:hover, .footer a:active { color: var(--color-paper-2); text-decoration-thickness: 2px; }
.footer :focus-visible { outline-color: var(--color-paper); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: var(--space-xl) var(--gap-columns); }
.footer__brand { display: flex; align-items: center; gap: var(--space-md); font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-xl); line-height: 1.15; }
.footer__brand img { width: 96px; height: 96px; flex-shrink: 0; }
.footer h3 { margin-bottom: var(--space-sm); font-size: var(--text-md); color: var(--color-paper); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink-2); color: var(--color-paper-3); }

/* Foto ingrandita */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--space-lg); border: 0; background: var(--color-paper); color: var(--color-ink); opacity: 0; transition: opacity var(--dur-long) var(--ease-out), overlay var(--dur-long) allow-discrete, display var(--dur-long) allow-discrete; }
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: var(--space-md); opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: var(--color-paper); }
.lightbox__close { grid-column: 3; grid-row: 1; justify-self: end; background: var(--color-paper); }
.lightbox__figure { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: center; align-content: center; gap: var(--space-sm); height: 100%; min-height: 0; }
.lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 2 * var(--space-lg) - 3rem); width: auto; height: auto; border-radius: 2px; box-shadow: var(--shadow-card); }
.lightbox__figure figcaption { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-title); line-height: 1.2; text-align: center; }
.lightbox__nav--prev { grid-column: 1; grid-row: 2; background: var(--color-paper); }
.lightbox__nav--next { grid-column: 3; grid-row: 2; background: var(--color-paper); }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--color-ink); }
::view-transition-group(lightbox-photo) { animation-duration: var(--dur-long); animation-timing-function: var(--ease-out); }

@media (max-width: 68rem) {
  :root { --bar: 116px; }
  .bar__row { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; padding-block: var(--space-xs) 0; }
  .bar__links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: var(--space-md); overflow-x: auto; }
  .bar__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 60rem) {
  :root { --bar: 113px; }
  html { scroll-padding-top: var(--bar); }
  .bar__brand span { display: none; }
  .bar__row { gap: var(--space-sm); }
  .bar__today { font-size: var(--text-xs); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .wall { height: 70dvh; min-height: 0; }
  .hero__logo { display: none; }
  .hero__text h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); max-width: 14ch; }
  .hero__grid { padding-block: var(--space-lg); gap: var(--space-lg); }
  .hero__text .lead { margin-block: var(--space-md) var(--space-lg); }

  .journey__track { gap: var(--space-3xl); }
  /* scroll-padding-top conta già la barra: con anche il margine i link fermerebbero il capitolo una barra troppo in basso. */
  .chapter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); scroll-margin-top: 0; }
  .chapter__head h2 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hang--wide { grid-column: 1 / -1; }
  .hang__open { padding: var(--space-2xs); }
  /* Le foto affiancate hanno la stessa forma, così didascalie e righe restano allineate. La foto intera si vede ingrandita. */
  .chapter .hang:not(.hang--wide) .hang__open img { aspect-ratio: 4 / 5; object-fit: cover; }

  .bottega__grid, .contact__grid, .dove__grid { grid-template-columns: minmax(0, 1fr); }
  .bottega__grid { gap: var(--space-xl); }
  .quote p { font-size: var(--text-2xl); }
  .bottega__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .bottega__wide { grid-column: 1 / -1; order: 1; margin-top: 0; }
  .catering__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .catering__col--main { margin-top: 0; }
  .catering__col--side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .recensioni h2 { margin-bottom: var(--space-xl); }
  .recensioni__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .recensione { padding: var(--space-xl) var(--space-lg); }
  .recensione:nth-child(2) { translate: none; }
  .recensioni__foot { margin-top: var(--space-xl); }
  .form { padding: var(--space-xl) var(--space-lg); }
  .dove__map { min-height: 0; }
  .map-link { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .lightbox { padding: var(--space-md); }
  .lightbox[open] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .lightbox__close { grid-column: 2; grid-row: 1; }
  .lightbox__figure { grid-column: 1 / -1; grid-row: 2; }
  .lightbox__figure img { max-height: calc(100dvh - 12rem); }
  .lightbox__nav--prev { grid-column: 1; grid-row: 3; }
  .lightbox__nav--next { grid-column: 2; grid-row: 3; }
}

@media (min-width: 40rem) and (max-width: 60rem) {
  /* Telefono in orizzontale e tablet in verticale: a tutta larghezza una foto riempirebbe più di uno schermo. */
  .chapter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chapter--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hang--wide { grid-column: auto; }
  .hang--wide .hang__open img { aspect-ratio: 4 / 5; object-fit: cover; }
}

@media (max-width: 22.5rem) {
  /* A 320px la terza icona spingerebbe l'orario di oggi su quattro righe: WhatsApp resta in Scrivici, Dove e nel footer. */
  .bar__end .icon-link[aria-label="WhatsApp"] { display: none; }
  .bar__links { gap: var(--space-sm); }
}

@media (max-width: 40rem) {
  /* Quattro voci stanno nella riga senza scorrere; bottega e recensioni si incontrano scendendo. */
  .bar__links a[href="#recensioni"], .bar__links a[href="#bottega"] { display: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .hours th, .hours td { font-size: var(--text-sm); padding-right: var(--space-xs); }
  .wall { gap: var(--space-xs); }
  .wall__col { gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wall__col, .hero__logo, .hero__text h1, .hero__text .lead, .hero__text .actions { animation: none; }
  .btn, a, .hang__open, .icon-link,  .hang__open:hover { transform: none; }
  .lightbox { transition: none; }
}

/* Pagine legali e dati ancora da confermare */
.da-completare { background: var(--color-paper-3); color: var(--color-ink); padding-inline: 0.25em; outline: 1px dashed var(--color-ink-2); }
.form__note a { color: inherit; }
.footer__policy { display: block; margin-top: var(--space-xs); }

.legal-page { background: var(--color-paper); }
.legal-head { border-bottom: var(--rule-hair) solid var(--color-rule); }
.legal-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--space-sm) var(--gutter); }
.legal-head__brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); text-decoration: none; }
.legal { width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-xl); }
.legal h1 { font-size: var(--text-display-s); margin-bottom: var(--space-md); }
.legal h2 { font-size: var(--text-title); line-height: 1.2; margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.legal p + p, .legal ul + p, .legal__scroll + p { margin-top: var(--space-sm); }
.legal ul { margin: var(--space-sm) 0 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); max-width: 65ch; }
.legal__date { font-size: var(--text-sm); color: var(--color-muted); }
.legal__scroll { overflow-x: auto; margin-top: var(--space-sm); }
.legal__table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--text-sm); }
.legal__table th, .legal__table td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.legal-foot { width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--space-md) var(--gutter) var(--space-2xl); font-size: var(--text-sm); }
.legal__back { margin-top: var(--space-lg); }
.form__human { grid-column: 1 / -1; }
.form__human:empty { display: none; }