@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colore ----------------------------------------------------------
     La pagina veste carta e bosco. Il verde acceso vive nelle fotografie,
     non nell'interfaccia. */
  --paper: #f5f3ea;
  --paper-deep: #ebe7da;
  --white: #fdfcf8;
  --ink: #20261e;
  --ink-soft: #5a6355;
  --bosco: #1f3d27;
  --bosco-deep: #14291a;
  --salvia: #71816b;
  --line: #dad5c4;
  --line-dark: rgb(245 243 234 / 0.22);

  --g-50: #f1f7f2;
  --g-100: #e4f0e7;
  --g-200: #c3e2cd;
  --g-300: #69e89e;
  --g-400: #2bde77;
  --g-500: #1cb45d;
  --g-600: #17984e;
  --g-650: #14803f;  --g-700: #116c37;
  --g-800: #0e502a;
  --g-900: #0b3b1f;

  --logo: var(--g-650);  --brand: var(--g-600);
  --brand-warm: var(--g-700);

  --action: var(--g-650);  --action-hover: var(--g-700);
  --action-on: var(--white);  --link: var(--g-700);
  --focus: var(--g-700);

  /* ---- Tipografia ------------------------------------------------------
     Una sola scala, rapporto ~1.2. Nessuna dimensione fuori da questo
     elenco: se ne serve una nuova, si aggiunge qui. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --t-3xs: 0.75rem;  --t-2xs: 0.8125rem;  --t-xs: 0.875rem;  --t-sm: 0.9375rem;  --t-md: 1.0625rem;  --t-lg: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);  --t-xl: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);  --t-2xl: clamp(1.5rem, 1vw + 1.15rem, 1.9rem);  --t-3xl: clamp(2rem, 3vw + 0.75rem, 3.3rem);  --t-4xl: clamp(2.9rem, 6.2vw + 0.5rem, 5.9rem);
  --t-slide: clamp(2.3rem, 3.9vw + 0.5rem, 4.1rem);
  --t-manifesto: clamp(1.8rem, 3vw + 0.6rem, 3.1rem);

  --lh-display: 1.05;
  --lh-title: 1.18;
  --lh-lead: 1.55;
  --lh-body: 1.6;
  --lh-ui: 1.35;
  --lh-micro: 1.4;

  --ls-display: -0.02em;
  --ls-title: -0.012em;
  --ls-normal: 0;
  --ls-maiusc: 0.12em;

  /* ---- Spazio ---------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(5.75rem, 7vw, 9rem);

  /* ---- Impaginazione --------------------------------------------------- */
  --shell-max: 90rem;
  --shell-pad: clamp(1.25rem, 5vw, 4.5rem);
  --shell-gutter: max(var(--shell-pad), calc((100vw - var(--shell-max)) / 2 + var(--shell-pad)));
  --gap: clamp(1rem, 2vw, 2rem);

  /* ---- Movimento ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.6, 0.2, 1);
  --dur: 560ms;
  --dur-fast: 200ms;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

main img,
main video {
  filter: saturate(0.85) sepia(0.07) contrast(1.02) brightness(0.99);
}

.benvenuto__foto img,
.visita__foto img {
  filter: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* ---------- Tipografia ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

h1,
h2 {
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h3,
h4 {
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

p {
  max-width: 62ch;
}

a {
  color: inherit;
  text-decoration: none;
}

p a:not(.linea):not([class*='btn']),
.prose a:not(.linea):not([class*='btn']) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.section--bosco :focus-visible,
.topbar :focus-visible,
.footer :focus-visible,
.newsband :focus-visible,
.menu :focus-visible,
.lente :focus-visible,
.banner :focus-visible,
.testata :focus-visible {
  outline-color: var(--paper);
}

.accent {
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  color: var(--brand-warm);
}

.caption {
  font-family: var(--sans);
  font-size: var(--t-2xs);
  font-weight: 500;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.marginalia {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-xs);
  font-weight: 450;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-normal);
  color: var(--ink-soft);
}

.lead {
  font-size: var(--t-lg);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  color: var(--brand-warm);
}

.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Impaginazione ---------- */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.section {
  padding-block: var(--section);
}

.section:not([class*='--']) + .section:not([class*='--']) {
  padding-top: 0;
}

.section--bosco,
.banner {
  padding-block: calc(var(--section) * 0.78);
}

.footer__grid { padding-block: calc(var(--section) * 0.55); }

.newsband { padding-block: calc(var(--section) * 0.5); }

.section--bosco {
  background: var(--bosco);
  color: var(--paper);
}

.section--bosco .eyebrow { color: var(--g-300); }
.section--bosco .caption { color: rgb(245 243 234 / 0.72); }
.section--bosco .lead { color: rgb(245 243 234 / 0.78); }
.section--bosco .marginalia { color: rgb(245 243 234 / 0.7); }

.bleed-right { margin-right: calc(50% - 50vw); }
.bleed-left { margin-left: calc(50% - 50vw); }

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-normal);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--solid {
  background: var(--action);
  color: var(--white);
}

.btn--solid:hover { background: var(--action-hover); }

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--white);
}

.btn--light {
  border-color: rgb(245 243 234 / 0.55);
  color: var(--white);
}

.btn--light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ---------- Link con filetto ---------- */

.linea {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding-block: 0.35em;
  font-family: var(--sans);
  font-size: var(--t-2xs);
  font-weight: 500;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  color: var(--ink);
}

.linea::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.linea::after { content: '→'; }

.linea:hover::before { opacity: 1; }

.section--bosco .linea { color: var(--g-300); }

/* ---------- Icone ---------- */

.ico {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--lg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
}

/* ---------- Rivelazione ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur) var(--ease-out) var(--d, 0ms),
                transform var(--dur) var(--ease-out) var(--d, 0ms);
  }

  [data-reveal].is-in .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-img > img,
  .reveal-img > video {
    clip-path: inset(0 0 14% 0);
    transition: clip-path var(--dur) var(--ease-out) var(--d, 0ms);
  }

  [data-reveal].is-in .reveal-img > img,
  [data-reveal].is-in .reveal-img > video {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Testata di sezione ---------- */

.head,
.sec-head {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}

.head p,
.sec-head p { max-width: 58ch; color: var(--ink-soft); }

.section--bosco .head p,
.section--bosco .sec-head p { color: rgb(245 243 234 / 0.78); }

.al-shell { padding-inline: var(--shell-gutter); }

.newsband .eyebrow { color: var(--g-300); }
.newsband input::placeholder { color: rgb(245 243 234 / 0.62); }

.footer__title { color: rgb(245 243 234 / 0.62); }

.banner .btn--light {
  background: rgb(10 22 12 / 0.35);
  border-color: rgb(245 243 234 / 0.8);
  backdrop-filter: blur(3px);
}

.banner .btn--light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}