@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #f2eee7; --sheet: #faf8f4; --ink: #2b2724; --ink-soft: #5a4f47; --line: #d7cfc5;
  --terracotta: #a8552f; --accent-text: #313a2b; --button: #985d45; --button-hover: #87503b; --button-ink: #fefdfb; --focus: #a8552f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111821; --sheet: #202b38; --ink: #f7f4f0; --ink-soft: #d7d0c9; --line: #3e4b5a;
    --terracotta: #c96b49; --accent-text: #9cb38c; --focus: #db8a6b;
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.6; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.15; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.barra, main, .piede { width: min(1040px, calc(100% - 32px)); margin-inline: auto; }
.barra { padding: 24px 0; }
.marchio { display: inline-flex; align-items: baseline; gap: 5px; font-family: "Fraunces", Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.045em; text-decoration: none; }
.punto { width: .2em; height: .2em; border-radius: 50%; background: var(--terracotta); }

.apertura { display: grid; gap: 20px; padding: clamp(32px, 7vw, 88px) 0 clamp(32px, 5vw, 56px); }
.eyebrow { color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.apertura h1 { max-width: 18ch; font-size: clamp(36px, 6.5vw, 68px); letter-spacing: -.03em; }
.lead { max-width: 56ch; color: var(--ink-soft); font-size: clamp(17px, 2vw, 20px); }

.prodotti { display: grid; gap: 24px; padding: 24px 0 64px; }
.prodotti h2 { font-size: 26px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.prodotto { display: grid; align-content: start; gap: 14px; padding: 28px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; }
.prodotto h3 { font-size: 32px; }
.sottotitolo { color: var(--accent-text); font-size: 14px; font-weight: 650; }
.prodotto p:not(.sottotitolo):not(.prezzo):not(.nota) { color: var(--ink-soft); }
.prezzo { display: grid; gap: 2px; padding: 14px 0; border-block: 1px solid var(--line); }
.prezzo strong { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 600; }
.prezzo span { color: var(--ink-soft); font-size: 14px; }
.nota { color: var(--ink-soft); font-size: 14px; }
.pulsante { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 20px; color: var(--button-ink); background: var(--button); border-radius: 8px; font-weight: 650; text-decoration: none; }
.pulsante:hover { background: var(--button-hover); }
.chiarimento { max-width: 60ch; color: var(--ink-soft); }

.piede { padding: 24px 0 48px; color: var(--ink-soft); font-size: 14px; border-top: 1px solid var(--line); }