/* Il Frassino, foglio di stile principale.
 * Palette ricavata dalla materia del sito: corteccia, manna, calcare delle Madonie,
 * foglia dell'orniello, linfa azzurrognola appena estratta. */

/* Caratteri ospitati sul sito (licenza SIL OFL 1.1, in static/fonts): nessuna richiesta a server esterni,
 * quindi nessun trasferimento dell'indirizzo IP dei visitatori a Google Fonts. Sottoinsieme latino. */
@font-face {
    font-family: "Gloock";
    src: url("../fonts/gloock-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bark: #34322b;
    --bark-soft: #4a473e;
    --manna: #f6f7f3;
    --stone: #dcd9cf;
    --stone-soft: #ebe9e2;
    --leaf: #55613a;
    --sap: #4f7189;
    --ink: #23221d;
    --ink-muted: #5c5a51;
    --leaf-light: #c5d19a;

    --font-display: "Gloock", "Georgia", "Times New Roman", serif;
    --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.3125rem;
    --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    --step-3: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
    --step-4: clamp(2.8rem, 1.6rem + 6vw, 6.25rem);

    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --wide: 90rem;
    --measure: 38rem;
    --header-h: 4.5rem;
    --radius: 3px;
}

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

[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--manna);
    color: var(--ink);
    font: 400 var(--step-0) / 1.6 var(--font-text);
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sap); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bark); }

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

.visually-hidden,
.hp {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--bark);
    color: var(--manna);
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--manna) 94%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.site-header.is-scrolled { border-bottom-color: var(--stone); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--wide);
    height: var(--header-h);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: none;
    color: var(--ink);
    text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand img { height: 44px; width: auto; }
.brand__text { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; white-space: nowrap; }
.brand__name { color: var(--leaf); }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.4vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: block;
    padding: 0.4rem 0;
    color: var(--ink);
    font-weight: 500;
    font-size: 0.975rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--stone); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--sap); }

.site-nav__cta a {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--leaf);
    border-radius: var(--radius);
    color: var(--leaf);
}
.site-nav__cta a:hover,
.site-nav__cta a[aria-current="page"] { background: var(--leaf); border-color: var(--leaf); color: var(--manna); }

.nav-toggle { display: none; }

/* Nove voci di menu più il marchio richiedono circa 1150 px: sotto si passa al menu a tendina. */
@media (max-width: 72rem) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 0.8rem;
        background: none;
        border: 1px solid var(--stone);
        border-radius: var(--radius);
        color: var(--ink);
        font: 500 0.95rem var(--font-text);
        cursor: pointer;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block;
        width: 18px;
        height: 1.5px;
        background: currentColor;
        transition: transform 0.2s, opacity 0.2s;
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before,
    .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle__bars::before { top: -6px; }
    .nav-toggle__bars::after { top: 6px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

    .site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        background: var(--manna);
        border-bottom: 1px solid var(--stone);
        display: none;
    }
    .site-nav.is-open { display: block; }
    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem var(--gutter) 1.25rem;
    }
    .site-nav a {
        padding: 0.85rem 0;
        font-size: var(--step-1);
        font-family: var(--font-display);
        font-weight: 400;
        border-bottom: 1px solid var(--stone-soft);
    }
    .site-nav li:last-child a { border-bottom: 0; }
    .site-nav a[aria-current="page"] { color: var(--sap); }
    .site-nav {
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
    }
    .site-nav__cta a {
        margin-top: 0.75rem;
        padding: 0.8rem 1rem;
        text-align: center;
        font-family: var(--font-text);
        font-size: 1rem;
        font-weight: 600;
    }
}

/* ---------- Pulsanti ---------- */

.button {
    display: inline-block;
    padding: 0.85rem 1.4rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.975rem;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.button--light { background: var(--manna); border-color: var(--manna); color: var(--bark); }
.button--light:hover { background: transparent; color: var(--manna); }
.button--ghost { color: var(--manna); }
.button--ghost:hover { background: var(--manna); color: var(--bark); }

.text-link { font-weight: 600; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: max(32rem, calc(100svh - var(--header-h)));
    color: var(--manna);
    background: var(--bark);
    overflow: hidden;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Il gradiente occupa solo il terzo inferiore: il resto della foto resta intatto. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(35 34 29 / 0.82) 0%, rgb(35 34 29 / 0.35) 38%, transparent 62%);
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(2.5rem, 6vh, 5rem);
}

.hero__title {
    max-width: 11ch;
    font-size: var(--step-4);
    line-height: 0.95;
    letter-spacing: -0.025em;
}

.hero__lead {
    max-width: 34rem;
    margin: 1.25rem 0 1.75rem;
    font-size: var(--step-1);
    line-height: 1.45;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Intro ---------- */

.intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 5vw, 6rem);
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(4rem, 10vw, 8rem) var(--gutter);
}

.intro__title { font-size: var(--step-3); max-width: 14ch; }
.intro__text { max-width: var(--measure); font-size: 1.125rem; }

@media (max-width: 48rem) {
    .intro { grid-template-columns: 1fr; }
}

/* ---------- Intestazioni di sezione ---------- */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--stone);
}
.section-head h2 { font-size: var(--step-2); }
.section-head p { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

/* ---------- Galleria ---------- */

.gallery {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
}

/* Masonry a colonne CSS: ogni foto mantiene le proprie proporzioni, nessun ritaglio. */
.gallery__grid {
    columns: 3 20rem;
    column-gap: clamp(1rem, 2vw, 2rem);
}

.gallery__item {
    break-inside: avoid;
    margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}

/* Miniatura apribile a schermo intero, usata in tutte le pagine. */
.lb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--stone);
    cursor: zoom-in;
}
.lb img { width: 100%; transition: opacity 0.2s; }
.lb:hover img { opacity: 0.88; }

.gallery__item figcaption { padding-top: 0.85rem; }
.gallery__item h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.gallery__item p {
    max-width: var(--measure);
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Approfondimenti ---------- */

.topics {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
}

.topics__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bark);
    color: var(--manna);
    text-decoration: none;
}
.topic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.topic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(35 34 29 / 0.85), transparent 55%);
}
.topic:hover { color: var(--manna); }
.topic:hover img { transform: scale(1.04); }

.topic__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 1.1rem;
}
.topic__title { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.topic__text { display: block; margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.4; opacity: 0.9; }

/* Sotto i 64rem la griglia diventa una striscia scorrevole con aggancio. */
@media (max-width: 72rem) {
    .topics__list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(13rem, 42%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-right: calc(var(--gutter) * -1);
        padding-right: var(--gutter);
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
    }
    .topics__list li { scroll-snap-align: start; }
}
@media (max-width: 36rem) {
    .topics__list { grid-auto-columns: 72%; }
}

/* ---------- Newsletter ---------- */

.newsletter { background: var(--bark); color: var(--manna); }

.newsletter__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: start;
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
}
.newsletter h2 { font-size: var(--step-3); margin-bottom: 0.75rem; }
.newsletter__intro p { max-width: 30rem; color: var(--stone); }

.newsletter__row { display: flex; align-items: flex-start; gap: 0.5rem; }
.newsletter__field { flex: 1 1 10rem; min-width: 0; }
.newsletter__field--wide { flex: 1.6 1 14rem; }
.newsletter__field label { display: block; margin-bottom: 0.35rem; font-size: var(--step--1); color: var(--stone); }
.newsletter .field-error { color: #f0b9a2; }

.newsletter input[type="email"],
.newsletter input[type="text"] {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bark-soft);
    border-radius: var(--radius);
    background: var(--manna);
    color: var(--ink);
    font: inherit;
}

.newsletter button[type="submit"] {
    align-self: flex-start;
    margin-top: calc(var(--step--1) * 1.6 + 0.35rem);
    padding: 0.9rem 1.5rem;
    border: 1px solid var(--manna);
    border-radius: var(--radius);
    background: transparent;
    color: var(--manna);
    font: 600 1rem var(--font-text);
    cursor: pointer;
}
.newsletter button[type="submit"]:hover { background: var(--manna); color: var(--bark); }

.newsletter :focus-visible { outline-color: var(--manna); }

.consent {
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--stone);
}
.consent input { margin-top: 0.2rem; accent-color: var(--leaf); flex: none; }
.consent a { color: var(--manna); }

.form-message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid;
    font-size: 0.95rem;
}
.form-message--ok { border-color: #9cb36a; background: rgb(156 179 106 / 0.12); }
.form-message--error { border-color: #e0a084; background: rgb(224 160 132 / 0.12); }

@media (max-width: 48rem) {
    .newsletter__inner { grid-template-columns: 1fr; }
}
@media (max-width: 26rem) {
    .newsletter__row { flex-direction: column; align-items: stretch; }
    .newsletter__field, .newsletter__field--wide { flex: none; }
    .newsletter button[type="submit"] { margin-top: 0.25rem; }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--stone-soft); color: var(--ink-muted); font-size: var(--step--1); }

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 2rem var(--gutter);
}
.site-footer p { margin: 0; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__copy { flex-basis: 100%; }

/* ---------- Lightbox ---------- */

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(28 27 23 / 0.97);
    color: var(--manna);
}
.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}
.lightbox::backdrop { background: rgb(28 27 23 / 0.97); }

.lightbox__stage {
    display: flex;
    min-height: 0;
    overflow: hidden;
    padding: clamp(3.5rem, 6vh, 4.5rem) clamp(0.5rem, 6vw, 5.5rem) 1rem;
    /* I gesti (swipe, trascinamento, pizzico) sono gestiti in JavaScript con i pointer event. */
    touch-action: none;
    overscroll-behavior: contain;
}

/* margin: auto centra l'immagine senza renderne irraggiungibili i bordi quando è più grande del contenitore. */
.lightbox__img {
    /* flex: none impedisce al contenitore flex di ridurre l'immagine ingrandita alla sua larghezza naturale. */
    flex: none;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.18s;
}

.lightbox.is-zoomed .lightbox__stage { overflow: auto; padding: 0; cursor: grab; scrollbar-width: thin; }
.lightbox.is-zoomed .lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox.is-zoomed .lightbox__img { cursor: inherit; }
.lightbox.is-zoomed .lightbox__caption,
.lightbox.is-zoomed .lightbox__hint,
.lightbox.is-zoomed .lightbox__btn--prev,
.lightbox.is-zoomed .lightbox__btn--next { display: none; }

.lightbox__tools { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.5rem; }
.lightbox__tools .lightbox__btn { position: static; }
.lightbox__btn:disabled { opacity: 0.35; cursor: default; }
.lightbox__hint {
    position: absolute;
    top: 1.6rem;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    color: var(--stone);
    font-size: var(--step--1);
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 52rem) {
    .lightbox__hint { display: none; }
}
.lightbox__img.is-loading { opacity: 0; }

.lightbox__caption {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(1.25rem, 3vh, 2rem);
}
.lightbox__count { margin: 0 0 0.25rem; font-size: var(--step--1); color: var(--stone); font-variant-numeric: tabular-nums; }
.lightbox__title { font-size: var(--step-2); margin-bottom: 0.5rem; }
.lightbox__text { margin-bottom: 0.6rem; color: var(--stone); font-size: 0.975rem; line-height: 1.55; max-height: 7.5em; overflow-y: auto; }
.lightbox__link { color: var(--manna); font-weight: 600; }
.lightbox__link:hover { color: var(--stone); }

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgb(246 247 243 / 0.25);
    border-radius: 50%;
    background: rgb(28 27 23 / 0.55);
    color: var(--manna);
    cursor: pointer;
}
.lightbox__btn:hover { border-color: var(--manna); color: var(--manna); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__btn--close { top: 0.75rem; right: 0.75rem; }
.lightbox__btn--prev,
.lightbox__btn--next { top: 40%; }
.lightbox__btn--prev { left: 0.75rem; }
.lightbox__btn--next { right: 0.75rem; }

@media (max-width: 40rem) {
    .lightbox__btn--prev,
    .lightbox__btn--next { top: auto; bottom: 0.75rem; }
    .lightbox__caption { padding-bottom: 4.5rem; }
}

html.has-lightbox { overflow: hidden; }

/* ---------- Pagine interne ---------- */

.page-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(22rem, 58svh, 38rem);
    color: var(--manna);
    background: var(--bark);
    overflow: hidden;
}
.page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(35 34 29 / 0.8) 0%, rgb(35 34 29 / 0.25) 45%, transparent 70%);
}
.page-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(2rem, 5vh, 3.5rem);
}
.page-hero__title { font-size: var(--step-4); line-height: 0.95; letter-spacing: -0.025em; }
.page-hero__lead { max-width: 36rem; margin: 1rem 0 0; font-size: var(--step-1); line-height: 1.45; }

.article-layout {
    display: grid;
    grid-template-columns: 13rem minmax(0, 46rem);
    justify-content: center;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

.toc {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    font-size: 0.925rem;
}
.toc__title { margin-bottom: 0.75rem; color: var(--ink-muted); font-size: var(--step--1); }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--stone); }
.toc a {
    display: block;
    margin-left: -1px;
    padding: 0.35rem 0 0.35rem 1rem;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="location"] { border-left-color: var(--sap); color: var(--ink); font-weight: 500; }

@media (max-width: 64rem) {
    .article-layout { grid-template-columns: minmax(0, 46rem); }
    .toc { position: static; }
    .toc ol {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        border: 0;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    .toc a {
        margin: 0;
        padding: 0.4rem 0.8rem;
        border: 1px solid var(--stone);
        border-radius: 2rem;
        white-space: nowrap;
    }
    .toc a[aria-current="location"] { border-color: var(--sap); }
}

.prose { font-size: 1.0938rem; line-height: 1.7; }
.prose section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose section + section { margin-top: clamp(3rem, 6vw, 4.5rem); }
.prose h2 { font-size: var(--step-3); margin-bottom: 1.25rem; }
.prose p { margin-bottom: 1.1em; }
.prose strong { font-weight: 600; }

.pull {
    margin: 1.5rem 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.4;
    color: var(--bark-soft);
}

.law {
    margin: 1.5rem 0;
    padding: 1.4rem 1.6rem;
    border-left: 3px solid var(--leaf);
    background: var(--stone-soft);
    font-size: 1rem;
}
.law p { margin-bottom: 0.8em; }
.law footer { margin-top: 0.75rem; color: var(--ink-muted); font-size: var(--step--1); }

.figure { margin: 0; }
.figure figcaption { padding-top: 0.5rem; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.45; }
.figure--wide { margin: 2rem 0; }

.media-text {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.5rem;
    align-items: start;
    margin: 1.5rem 0;
}
.media-text--reverse > .figure { order: 2; }

.figure-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.figure-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figure-row .lb { aspect-ratio: 4 / 3; }
.figure-row .lb img { height: 100%; object-fit: cover; }

@media (max-width: 36rem) {
    .media-text { grid-template-columns: 1fr; }
    .media-text--reverse > .figure { order: 0; }
    .figure-row--2 { grid-template-columns: 1fr; }
}

.defs { margin: 1.5rem 0 0; }
.defs dt { font-family: var(--font-display); font-size: var(--step-1); }
.defs dd { margin: 0.2rem 0 1.25rem; }

.table-wrap { margin: 1.75rem 0; overflow-x: auto; }
.compare {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.45;
}
.compare caption { margin-bottom: 0.6rem; text-align: left; color: var(--ink-muted); font-size: var(--step--1); }
.compare th,
.compare td { padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--stone); text-align: left; vertical-align: top; }
.compare thead th { font-weight: 600; border-bottom-color: var(--ink-muted); }
.compare tbody th { font-weight: 500; color: var(--ink-muted); }

.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 1.75rem 0 0;
}
.facts div { padding: 0.9rem 0; border-top: 1px solid var(--stone); }
.facts dt { color: var(--ink-muted); font-size: var(--step--1); }
.facts dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; }
@media (max-width: 36rem) {
    .facts { grid-template-columns: 1fr; }
}

.mini-gallery { columns: 3 11rem; column-gap: 0.75rem; }
.mini-gallery .lb { break-inside: avoid; margin-bottom: 0.75rem; }

.page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--stone);
}
.page-nav__link { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.page-nav__link--next { margin-left: auto; text-align: right; }
.page-nav__hint { color: var(--ink-muted); font-size: var(--step--1); }
.page-nav__title { font-family: var(--font-display); font-size: var(--step-1); }
.page-nav__link:hover .page-nav__title { color: var(--sap); }

/* ---------- Impaginazione editoriale (pagine interne lunghe) ---------- */

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }

.band { --band-bg: var(--manna); padding-block: clamp(4rem, 9vw, 7.5rem); }
.band--top-flush { padding-top: 0; }
.band--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 4.5rem); }
.band--stone { --band-bg: var(--stone-soft); background: var(--stone-soft); }
.band--bark { --band-bg: var(--bark); background: var(--bark); color: var(--manna); }
.band--bark a { color: var(--manna); }
.band--bark .lb { background: var(--bark-soft); }

.hero--page { min-height: clamp(26rem, 78svh, 48rem); }

.chapter { scroll-margin-top: calc(var(--header-h) + 3.25rem); }

.chapter-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.chapter-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.chapter-head .chapter-title { margin-bottom: 0; }
.chapter-head p { max-width: 36rem; color: var(--ink-muted); }
.band--bark .chapter-head p { color: var(--stone); }

.lead {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
    line-height: 1.38;
    color: var(--bark-soft);
}

.subhead { font-size: var(--step-2); margin-bottom: 1rem; }

/* Barra dei capitoli, fissata sotto l'header. */
.chapter-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: color-mix(in srgb, var(--manna) 94%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--stone);
}
.chapter-bar ol {
    position: relative;
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.chapter-bar ol::-webkit-scrollbar { display: none; }
.chapter-bar a {
    display: block;
    padding: 0.85rem 0 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.chapter-bar a:hover { color: var(--ink); }
.chapter-bar a[aria-current="location"] { color: var(--ink); border-bottom-color: var(--leaf); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.split--text-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
.split__text { max-width: 40rem; font-size: 1.0938rem; line-height: 1.7; }
.split__media--sticky { position: sticky; top: calc(var(--header-h) + 4.5rem); }

.figure--tall .lb { aspect-ratio: 4 / 5; }
.figure--tall .lb img { height: 100%; object-fit: cover; }

.figure-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.figure-pair .lb { aspect-ratio: 4 / 3; }
.figure-pair .lb img { height: 100%; object-fit: cover; }

/* Citazione di legge: virgolette basse come segno grafico, non come decorazione aggiunta. */
.law-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.law-layout__aside { color: var(--ink-muted); }
.law-layout__aside .chapter-title { color: var(--ink); }

.law-quote {
    position: relative;
    margin: 0;
    padding-top: 3.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem);
    line-height: 1.38;
}
.law-quote::before {
    content: "«";
    position: absolute;
    top: -1.2rem;
    left: -0.05em;
    font-size: 6rem;
    line-height: 1;
    color: var(--leaf);
}
/* Su schermi larghi le virgolette sporgono nel margine, allineate alla prima riga. */
@media (min-width: 56.01rem) {
    .law-quote { padding-top: 0; }
    .law-quote::before { top: -2.3rem; left: -0.62em; font-size: 7.5rem; }
}
.law-quote p { margin-bottom: 0.9em; }
.law-quote footer { font: 400 var(--step--1) var(--font-text); color: var(--ink-muted); }

/* Foto a tutta larghezza con frase sovrapposta. */
.photo-quote {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(26rem, 82svh, 52rem);
    margin: 0;
    overflow: hidden;
    background: var(--bark);
    color: var(--manna);
}
.photo-quote img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-quote::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(35 34 29 / 0.78) 0%, rgb(35 34 29 / 0.2) 50%, transparent 75%);
}
.photo-quote figcaption {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(2.5rem, 7vh, 5rem);
}
.photo-quote--right figcaption { display: flex; justify-content: flex-end; text-align: right; }
.photo-quote__text {
    max-width: 22ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.then-now { margin: 0; border-left: 1px solid var(--stone); }
.then-now div { padding: 0.25rem 0 1.5rem 1.5rem; }
.then-now div:last-child { padding-bottom: 0.25rem; }
.then-now dt { font-family: var(--font-display); font-size: var(--step-2); color: var(--leaf); line-height: 1.1; }
.then-now dd { margin: 0.35rem 0 0; color: var(--ink-muted); }
.then-now--spaced { margin: 2rem 0; }

/* Diagramma della sezione del tronco: l'opacità decrescente codifica l'ordine degli anni. */
.trunk { margin: 2.5rem 0 0; }
.trunk svg { display: block; width: 100%; max-width: 32rem; height: auto; }
.trunk__wood { fill: var(--stone-soft); }
.trunk__ring { fill: none; stroke: var(--stone); stroke-width: 1.5; }
.trunk__pith { fill: var(--stone); }
.trunk__side { fill: var(--leaf); }
.trunk__side--2 { opacity: 0.75; }
.trunk__side--3 { opacity: 0.52; }
.trunk__side--4 { opacity: 0.34; }
.trunk__label { font: 400 15px var(--font-text); fill: var(--ink-muted); }
.trunk__name { font-weight: 600; fill: var(--ink); }
.trunk figcaption { margin-top: 0.5rem; color: var(--ink-muted); font-size: var(--step--1); }

.types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.type .lb { aspect-ratio: 3 / 4; }
.type .lb img { height: 100%; object-fit: cover; }
.type h3 { margin: 1.25rem 0 0.5rem; font-size: var(--step-2); }
.type p { color: var(--stone); font-size: 0.975rem; line-height: 1.6; max-width: 32rem; }

.metrics { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--stone); }
.metric + .metric { margin-top: 1.75rem; }
.metric__label { margin-bottom: 0.6rem; font-size: var(--step--1); color: var(--ink-muted); }
.metric__row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}
.metric__track { height: 0.7rem; background: var(--stone-soft); border-radius: 1px; }
.metric__bar { display: block; width: var(--v); height: 100%; background: var(--sap); opacity: 0.55; }
.metric__bar--strong { background: var(--leaf); opacity: 1; }
/* Il valore supera la scala: la barra sfuma verso destra invece di terminare netta. */
.metric__bar--over { mask-image: linear-gradient(to right, #000 80%, transparent); }
.metric__value { font-family: var(--font-display); font-size: 1.15rem; text-align: right; }

/* Le operazioni di raccolta sono una sequenza reale: la numerazione è informativa. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.step {
    counter-increment: step;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bark-soft);
}
.step::before {
    content: counter(step);
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
    line-height: 1;
    color: var(--leaf);
}
.step__title { margin-bottom: 0.4rem; font-size: var(--step-1); }
.step p { color: var(--ink-muted); font-size: 0.975rem; line-height: 1.6; }

.numbers {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.numbers__intro p { color: var(--stone); max-width: 32rem; }
.numbers__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(1rem, 3vw, 2.5rem);
    margin: 0;
}
.numbers__list div { padding: 1.1rem 0 1.4rem; border-top: 1px solid rgb(246 247 243 / 0.18); }
.numbers__list dt { font-size: var(--step--1); color: var(--stone); }
.numbers__list dd {
    margin: 0.3rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
    line-height: 1.05;
}
.numbers__list small {
    display: block;
    margin-top: 0.35rem;
    font: 400 0.875rem / 1.4 var(--font-text);
    color: var(--stone);
}

.masonry { columns: 4 14rem; column-gap: 1rem; }
.masonry .lb { break-inside: avoid; margin-bottom: 1rem; }

@media (max-width: 64rem) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .numbers { grid-template-columns: 1fr; }
}

@media (max-width: 56rem) {
    .split,
    .split--text-wide,
    .law-layout,
    .chapter-head { grid-template-columns: 1fr; }
    .split__media--sticky { position: static; }
    .split--media-right .split__media { order: -1; }
    .split--text-wide { align-items: start; }
    .types { grid-template-columns: 1fr; }
    .type .lb { aspect-ratio: 4 / 3; }
}

@media (max-width: 36rem) {
    .steps { grid-template-columns: 1fr; }
    .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-quote--right figcaption { justify-content: flex-start; text-align: left; }
    .metric__row { grid-template-columns: 5.5rem minmax(0, 1fr) 3.25rem; }
}

/* Variante senza virgolette sporgenti, per citazioni dentro colonne affiancate. */
.law-quote.law-quote--inline { padding-top: 3.75rem; margin: 1.5rem 0; }
.law-quote.law-quote--inline::before { top: -1.2rem; left: -0.05em; font-size: 6rem; }

/* ---------- Linea del tempo ---------- */

.timeline {
    --date-col: 12rem;
    --gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tl {
    position: relative;
    display: grid;
    grid-template-columns: var(--date-col) minmax(0, 46rem);
    gap: 0 var(--gap);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Asse verticale e nodo, centrati nello spazio tra data e testo. */
.tl::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    bottom: -0.7rem;
    left: calc(var(--date-col) + var(--gap) / 2);
    width: 1px;
    background: var(--stone);
}
.band--stone .tl::before { background: #cbc7bb; }
.tl:last-child::before { display: none; }
.tl::after {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: calc(var(--date-col) + var(--gap) / 2 - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--leaf);
    box-shadow: 0 0 0 4px var(--band-bg);
}
.tl__date {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.85rem);
    line-height: 1.1;
    text-align: right;
    color: var(--leaf);
}
.tl__title { margin-bottom: 0.45rem; font-size: var(--step-1); line-height: 1.25; }
.tl__body p { color: var(--ink-muted); line-height: 1.65; }
.tl__quote {
    margin: 0.9rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--leaf);
}
.tl__body .tl__quote p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: var(--bark-soft); }

.era-close {
    max-width: 46rem;
    margin: 0.5rem 0 0 calc(12rem + 2.5rem);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem);
    line-height: 1.45;
}
.era-close strong { font-weight: 400; color: var(--leaf); }

@media (max-width: 48rem) {
    .tl { grid-template-columns: 1fr; padding-left: 1.9rem; }
    .tl::before { left: 5px; top: 0.7rem; }
    .tl::after { left: 0; }
    .tl__date { text-align: left; margin-bottom: 0.35rem; }
    .era-close { margin-left: 0; }
}

/* ---------- Rotte commerciali ---------- */

.routes { margin: 0 0 clamp(3rem, 6vw, 4.5rem); }
.route {
    display: grid;
    grid-template-columns: 16rem 4.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--stone);
}
.route__era { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.route__from { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.route__line { position: relative; height: 1px; background: var(--ink-muted); }
.route__line::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -5px;
    border-left: 9px solid var(--ink-muted);
    border-top: 5.5px solid transparent;
    border-bottom: 5.5px solid transparent;
}
.route__to { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.route__to li { padding: 0.3rem 0.8rem; border: 1px solid var(--stone); border-radius: 2rem; font-size: 0.95rem; }
.route--sicily .route__from { color: var(--leaf); }
.route--sicily .route__line { background: var(--leaf); }
.route--sicily .route__line::after { border-left-color: var(--leaf); }
.route--sicily .route__to li { border-color: var(--leaf); color: var(--leaf); }
.routes figcaption {
    max-width: 46rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--stone);
    color: var(--ink-muted);
    font-size: 0.975rem;
}
@media (max-width: 48rem) {
    .route { grid-template-columns: 1fr; }
    .route__line { width: 3rem; margin: 0.25rem 0; }
}

/* ---------- Regioni di produzione ---------- */

.regions__label { margin: 0 0 0.5rem; font-size: var(--step--1); color: var(--stone); }
.regions__label:not(:first-child) { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(246 247 243 / 0.18); }
.regions__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.regions__list li {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
    line-height: 1.2;
    color: var(--stone);
}
.regions__list--now li { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); color: var(--leaf-light); }

/* ---------- Disputa ---------- */

.debate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.debate__side { padding: 0.5rem clamp(1.5rem, 4vw, 3.5rem) 0.5rem 0; }
.debate__side + .debate__side { padding: 0.5rem 0 0.5rem clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--stone); }
.debate h3 { margin-bottom: 0.75rem; font-size: var(--step-3); }
.debate__side p { max-width: 32rem; color: var(--ink-muted); }
.debate__quote { margin: 1rem 0 0; }
.debate__side .debate__quote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; color: var(--leaf); }
.debate__end {
    grid-column: 1 / -1;
    max-width: 40rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--stone);
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.45;
    text-align: center;
}
@media (max-width: 48rem) {
    .debate { grid-template-columns: 1fr; }
    .debate__side { padding: 0 0 1.5rem; }
    .debate__side + .debate__side { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--stone); }
    .debate__end { text-align: left; }
}

/* ---------- Evento datato ---------- */

.event {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(1.5rem, 6vw, 6rem);
    align-items: start;
}
.event__date {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 1.6rem + 5.5vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--leaf-light);
}
.event__body p { color: var(--stone); }
.event__body .lead { color: var(--manna); }
@media (max-width: 56rem) {
    .event { grid-template-columns: 1fr; }
}

/* ---------- Composizione (barre impilate) ---------- */

.composition { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.composition__row + .composition__row { margin-top: 1.5rem; }
.composition__label { margin-bottom: 0.5rem; font-family: var(--font-display); font-size: var(--step-1); }

.stack {
    display: flex;
    height: clamp(3rem, 2.4rem + 2vw, 4.25rem);
    overflow: hidden;
    border-radius: var(--radius);
}
.stack__seg {
    display: flex;
    align-items: center;
    min-width: 2px;
    padding: 0 0.6rem;
    overflow: hidden;
    border-right: 2px solid var(--band-bg, var(--manna));
    color: var(--manna);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stack__seg:last-child { border-right: 0; }
.stack__seg--mannite { background: var(--leaf); }
.stack__seg--oligo   { background: var(--sap); }
.stack__seg--mono    { background: #8fa8b8; color: var(--ink); }
.stack__seg--acqua   { background: #b9c9d2; color: var(--ink); }
.stack__seg--altro   { background: var(--stone); color: var(--ink); }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.925rem;
}
.legend li { display: flex; align-items: center; gap: 0.5rem; }
.legend__key { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; }
.composition figcaption { margin-top: 1rem; color: var(--ink-muted); font-size: var(--step--1); max-width: 46rem; }

.composition__notes { padding-top: 2rem; border-top: 1px solid var(--stone); }

.factors__title { margin-bottom: 0.75rem; font-size: var(--step--1); color: var(--ink-muted); }
.band--bark .factors__title { color: var(--stone); }
.factors { margin: 0; padding: 0; list-style: none; }
.factors li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--stone);
    font-family: var(--font-display);
    font-size: var(--step-1);
}

/* ---------- Tabella dati ---------- */

.data-table {
    width: 100%;
    max-width: 52rem;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td { padding: 0.8rem 1rem; border-bottom: 1px solid #cbc7bb; text-align: left; }
.data-table thead th { font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--ink-muted); }
.data-table tbody th { font-weight: 500; }
.data-table .num { text-align: right; }
.data-table .is-highlight { background: rgb(85 97 58 / 0.08); }
.data-table thead .is-highlight { color: var(--leaf); }

/* ---------- Mannitolo ---------- */

.molecule {
    margin: 0;
    padding: clamp(1rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--stone);
    border-radius: var(--radius);
}
.molecule .lb { background: #fff; }
.molecule .lb + .lb { margin-top: 1rem; border-top: 1px solid var(--stone-soft); padding-top: 1rem; }
.molecule .lb img { width: 70%; margin: 0 auto; }
.molecule figcaption { margin-top: 1rem; color: var(--ink-muted); font-size: var(--step--1); }

.specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 1.75rem 0;
}
.specs div { padding: 0.75rem 0; border-top: 1px solid var(--stone); }
.specs dt { font-size: var(--step--1); color: var(--ink-muted); }
.specs dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
@media (max-width: 30rem) {
    .specs { grid-template-columns: 1fr; }
}

/* ---------- Confronto manna / mannite ---------- */

.versus { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.versus__row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem clamp(1rem, 3vw, 2.5rem);
    padding: 1rem 0;
    border-top: 1px solid rgb(246 247 243 / 0.18);
    color: var(--stone);
}
.versus__row--head { border-top: 0; padding-top: 0; }
.versus__row--head span {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
    color: var(--manna);
}
.versus__row [role="rowheader"] { font-size: var(--step--1); padding-top: 0.2rem; }
.versus__manna { color: var(--manna); }
.versus__row--head .versus__manna { color: var(--leaf-light); }
@media (max-width: 48rem) {
    .versus__row { grid-template-columns: 1fr 1fr; }
    .versus__row [role="rowheader"] { grid-column: 1 / -1; padding: 0; }
    .versus__row--head span:first-child { display: none; }
}

.mannite-notes .lead { color: var(--manna); }
.mannite-notes p { color: var(--stone); }
.mannite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.mannite-grid .lb { aspect-ratio: 1; background: var(--bark-soft); }
.mannite-grid .lb img { height: 100%; object-fit: cover; }

/* ---------- Usi tradizionali ---------- */

.virtues {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.virtues__group { padding-top: 1.1rem; border-top: 2px solid var(--leaf); }
.virtues__group h3 { margin-bottom: 0.9rem; font-size: var(--step-2); }
.virtues__group ul { margin: 0; padding: 0; list-style: none; }
.virtues__group li {
    padding: 0.7rem 0;
    border-top: 1px solid var(--stone);
    color: var(--ink-muted);
    font-size: 0.975rem;
    line-height: 1.55;
}
.virtues__group li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 64rem) {
    .virtues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
    .virtues { grid-template-columns: 1fr; }
}

/* ---------- Scala delle dosi ---------- */

.dose-chart {
    --label-col: 13rem;
    --value-col: 6rem;
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}
.dose-chart__axis {
    position: relative;
    height: 1.5rem;
    margin: 0 calc(var(--value-col) + 1.5rem) 0.5rem calc(var(--label-col) + 1.5rem);
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.dose-chart__axis span { position: absolute; left: var(--at); transform: translateX(-50%); white-space: nowrap; }
.dose {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, 1fr) var(--value-col);
    column-gap: 1.5rem;
    align-items: center;
    padding: 0.9rem 0;
    border-top: 1px solid #cbc7bb;
}
.dose__use { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.dose__track {
    position: relative;
    height: 0.9rem;
    background: repeating-linear-gradient(to right, #cbc7bb 0 1px, transparent 1px calc(100% / 6));
    border-left: 1px solid #cbc7bb;
    border-right: 1px solid #cbc7bb;
}
.dose__range {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from);
    width: calc(var(--to) - var(--from));
    background: var(--leaf);
    border-radius: 1px;
}
/* Valore soglia: segno verticale invece di un intervallo. */
.dose__range--limit { width: 4px; left: calc(var(--to) - 4px); background: var(--bark); }
.dose__value { margin: 0; font-family: var(--font-display); font-size: 1.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.dose__how { grid-column: 2 / 4; margin: 0.35rem 0 0; color: var(--ink-muted); font-size: 0.925rem; }
.dose-chart figcaption { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #cbc7bb; color: var(--ink-muted); font-size: var(--step--1); }

@media (max-width: 48rem) {
    .dose-chart { --label-col: 0rem; --value-col: 0rem; }
    .dose-chart__axis { margin: 0 0.75rem 0.5rem; }
    .dose { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
    .dose__use { grid-column: 1; }
    .dose__value { grid-column: 2; grid-row: 1; }
    .dose__track { grid-column: 1 / -1; }
    .dose__how { grid-column: 1 / -1; }
}

.dose-notes { align-items: start; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--3 .step::before { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); }
@media (max-width: 36rem) {
    .steps--3 { grid-template-columns: 1fr; }
}

.notice {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--manna);
    border-left: 3px solid var(--bark);
    font-size: 0.975rem;
}
.notice h3 { margin-bottom: 0.75rem; font-size: var(--step-2); }
.notice ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.notice li { margin-bottom: 0.45rem; line-height: 1.5; }
.notice p { color: var(--ink-muted); font-size: var(--step--1); }

/* ---------- Ricette ---------- */

.recipes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
.recipe {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0 1.5rem;
    padding: 1.25rem;
    background: var(--manna);
    border: 1px solid var(--stone);
    border-radius: var(--radius);
    scroll-margin-top: calc(var(--header-h) + 3.25rem);
}
.band:not(.band--stone) .recipe { background: #fff; }
.recipe > .lb { align-self: start; aspect-ratio: 1; background: var(--stone-soft); }
.recipe > .lb img { height: 100%; object-fit: cover; }
.recipe__title { font-size: var(--step-2); margin-bottom: 0.35rem; }
.recipe__summary { color: var(--ink-muted); font-size: 0.95rem; }
.recipe__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1rem; }
.recipe__meta dt { font-size: 0.75rem; color: var(--ink-muted); }
.recipe__meta dd { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.recipe__cols { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--stone); }
.recipe h4 { margin: 0 0 0.6rem; font: 600 var(--step--1) var(--font-text); color: var(--leaf); }
.recipe__ingredients { margin: 0; padding: 0; list-style: none; font-size: 0.925rem; line-height: 1.45; }
.recipe__ingredients li { padding: 0.35rem 0; border-bottom: 1px solid var(--stone-soft); }
.recipe__steps { margin: 0; padding-left: 1.2rem; font-size: 0.925rem; line-height: 1.55; }
.recipe__steps li { margin-bottom: 0.5rem; padding-left: 0.2rem; }
.recipe__steps li::marker { font-family: var(--font-display); color: var(--leaf); }
.recipe__note { margin-top: 0.75rem; color: var(--ink-muted); font-size: var(--step--1); font-style: italic; }

@media (max-width: 72rem) {
    .recipes { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
    .recipe { grid-template-columns: 1fr; padding: 1rem; }
    .recipe > .lb { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
    .recipe__cols { grid-template-columns: 1fr; }
}

/* ---------- Frassino: specie ---------- */

.specs--single { grid-template-columns: 1fr; margin: 0; }

.species {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}
.species__card { border-top: 2px solid var(--stone); padding-top: 1.25rem; }
.species__card--manna { border-top-color: var(--leaf); }
.species__card > .lb { aspect-ratio: 4 / 3; }
.species__card > .lb img { height: 100%; object-fit: cover; }
.species__body { padding-top: 1.1rem; }
.species__latin { font-size: var(--step-2); }
.species__common { margin: 0.2rem 0 0.6rem; color: var(--ink-muted); }
.species__tag {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--stone);
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}
.species__card--manna .species__tag { border-color: var(--leaf); color: var(--leaf); }
.species__facts { margin: 0 0 1rem; }
.species__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid #cbc7bb; font-size: 0.925rem; }
.species__facts dt { color: var(--ink-muted); }
.species__facts dd { margin: 0; text-align: right; font-weight: 500; }
.species__body > p:last-child { color: var(--ink-muted); font-size: 0.975rem; line-height: 1.6; }
@media (max-width: 56rem) {
    .species { grid-template-columns: 1fr; }
    .species__card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; }
    .species__body { padding-top: 0; }
}
@media (max-width: 36rem) {
    .species__card { grid-template-columns: 1fr; }
}

.split__text .subhead { margin-top: 2.5rem; }
.factors--compact li { font-size: 1.1rem; padding: 0.45rem 0; }
.varieties__label { margin: 2rem 0 0.6rem; font-size: var(--step--1); color: var(--ink-muted); }
.varieties { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.varieties li { padding: 0.3rem 0.8rem; border: 1px solid var(--stone); border-radius: 2rem; font-family: var(--font-display); }

/* ---------- Fascia altitudinale ---------- */

.altitude { margin: 0; }
.altitude__scale {
    position: relative;
    height: clamp(20rem, 50vh, 28rem);
    margin-left: 4rem;
    border-left: 1px solid var(--ink-muted);
    background: linear-gradient(to top, var(--stone-soft), var(--manna));
}
/* "--at" è la quota in percentuale della scala 0-1000 m, misurata dal basso. */
.altitude__tick {
    position: absolute;
    bottom: var(--at);
    left: -4rem;
    width: 3.4rem;
    transform: translateY(50%);
    text-align: right;
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.altitude__tick::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.65rem;
    width: 0.4rem;
    height: 1px;
    background: var(--ink-muted);
}
.altitude__band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--from);
    height: calc(var(--to) - var(--from));
    display: grid;
    place-items: center;
    background: var(--leaf);
    color: var(--manna);
    font-family: var(--font-display);
    font-size: var(--step-2);
}
.altitude__above {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(var(--from) + 1rem);
    color: var(--ink-muted);
    font-size: 0.9rem;
}
.altitude figcaption { margin: 0.75rem 0 0 4rem; color: var(--ink-muted); font-size: var(--step--1); }

/* ---------- Calendario dei lavori ---------- */

.calendar { margin: 0 0 clamp(3rem, 6vw, 4.5rem); overflow-x: auto; }
.calendar__grid { min-width: 44rem; }
.calendar__row {
    display: grid;
    grid-template-columns: 15rem repeat(24, minmax(0, 1fr));
    align-items: center;
    min-height: 3.5rem;
    border-top: 1px solid #cbc7bb;
    /* Linee verticali di inizio mese, allineate alle 24 colonne dei mezzi mesi. */
    background:
        repeating-linear-gradient(to right, #cbc7bb 0 1px, transparent 1px calc(100% / 12))
        15rem 0 / calc(100% - 15rem) 100% no-repeat;
}
.calendar__row--head { min-height: 2rem; border-top: 0; background: none; }
.calendar__label { grid-column: 1; grid-row: 1; padding: 0.5rem 1rem 0.5rem 0; }
.calendar__label strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.calendar__label small { display: block; color: var(--ink-muted); font-size: 0.8rem; }
.calendar__month { grid-row: 1; text-align: center; font-size: 0.85rem; color: var(--ink-muted); }
.calendar__bar { grid-row: 1; height: 0.9rem; margin: 0 2px; background: var(--leaf); border-radius: 1px; }
.calendar figcaption { margin-top: 0.75rem; color: var(--ink-muted); font-size: var(--step--1); max-width: 46rem; }

.ceduo { margin-top: 0; }

/* ---------- Superfici ---------- */

.area-chart { margin: 0; }
.area-chart__row { padding: 1rem 0; border-top: 1px solid var(--stone); }
.area-chart__label { margin: 0 0 0.4rem; color: var(--ink-muted); font-size: var(--step--1); }
.area-chart__track { height: 1.6rem; background: var(--stone-soft); }
.area-chart__bar { display: block; width: max(var(--v), 3px); height: 100%; background: var(--leaf); }
.area-chart__value { margin: 0.35rem 0 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.area-chart figcaption { padding-top: 0.75rem; border-top: 1px solid var(--stone); color: var(--ink-muted); font-size: var(--step--1); }

/* ---------- Video ---------- */

.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.video { margin: 0; }
.video__facade,
.video__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bark-soft);
}
.video__facade img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.video__facade--plain { background: linear-gradient(135deg, var(--bark-soft), var(--leaf)); }
#video .chapter-head a { color: var(--manna); }
.video__facade:hover img { opacity: 0.85; }
.video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgb(246 247 243 / 0.92);
    color: var(--bark);
    transform: translate(-50%, -50%);
    transition: transform 0.15s;
}
.video__play svg { width: 1.9rem; height: 1.9rem; margin-left: 0.25rem; fill: currentColor; }
.video__facade:hover .video__play { transform: translate(-50%, -50%) scale(1.06); }
.video__facade:focus-visible { outline-color: var(--manna); }
.video figcaption { margin-top: 0.75rem; color: var(--stone); }
@media (max-width: 48rem) {
    .videos { grid-template-columns: 1fr; }
}

/* ---------- Saggio con immagini a margine ---------- */

.essay-head { max-width: 64rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.essay-head p { color: var(--ink-muted); }

/* La colonna di testo resta a 40rem; le figure flottano nei 22rem a destra senza restringere le righe. */
.essay {
    max-width: 64rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.75;
}
.essay::after { content: ""; display: table; clear: both; }
.essay > p { max-width: 40rem; }
.essay__first::first-letter {
    float: left;
    margin: 0.08em 0.12em 0 0;
    font-family: var(--font-display);
    font-size: 4.4em;
    line-height: 0.82;
    color: var(--leaf);
}
.figure--margin {
    float: right;
    clear: right;
    width: 20rem;
    margin: 0.4rem 0 2rem 2rem;
}
.figure--margin .lb { aspect-ratio: 4 / 5; }
.figure--margin .lb img { height: 100%; object-fit: cover; }
.essay__pull {
    clear: both;
    max-width: 52rem;
    margin: clamp(2rem, 4vw, 3rem) 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--stone);
    border-bottom: 1px solid var(--stone);
}
.essay .essay__pull p {
    max-width: none;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.essay__signature {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--leaf);
}
@media (max-width: 64rem) {
    .figure--margin { float: none; width: auto; max-width: 40rem; margin: 2rem 0; }
    .figure--margin .lb { aspect-ratio: 4 / 3; }
}

/* ---------- Pubblicazioni ---------- */

.pub-group {
    margin: clamp(2rem, 4vw, 3rem) 0 0.5rem;
    font: 600 var(--step--1) var(--font-text);
    color: var(--leaf);
}
.pub-group:first-of-type { margin-top: 0; }
.pubs { margin: 0; padding: 0; list-style: none; }
.pubs > .pub {
    display: grid;
    grid-template-columns: 8rem minmax(0, 46rem);
    gap: 0 2.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--stone);
}
.pub__year { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--leaf); }
.pub__tag {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--stone);
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}
.pub__title { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.3; }
.pub__title-it { margin-bottom: 0.6rem; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; }
.pub__authors { margin: 0; font-size: 0.925rem; }
.pub__source { margin: 0.15rem 0 0; font-size: 0.925rem; color: var(--ink-muted); }
.pub__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin: 1rem 0 0; font-size: 0.925rem; }
.pub__pdf { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.pub__icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

.pubs--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.pubs--compact > .pub { display: block; padding: 0; border: 0; }
.pub__pdf--block {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--stone);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.15s;
}
.pub__pdf--block:hover { color: var(--ink); border-color: var(--leaf); }
.pub__pdf--block .pub__icon { width: 2rem; height: 2rem; color: var(--leaf); }
.pub__pdf--block > span { display: flex; flex-direction: column; gap: 0.35rem; }
.pub__pdf--block .pub__title { margin: 0; font-size: 1.15rem; }
.pub__pdf--block .pub__authors { color: var(--ink-muted); font-size: 0.875rem; }
.pub__size { margin-top: 0.35rem; color: var(--sap); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 56rem) {
    .pubs > .pub { grid-template-columns: 1fr; }
    .pub__year { margin-bottom: 0.5rem; font-size: var(--step-2); }
    .pubs--compact { grid-template-columns: 1fr; }
}

/* ---------- Rassegna stampa ---------- */

.press {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
}
.press__item { margin: 0; }
/* I ritagli sono pagine di giornale: inquadratura dall'alto, dove stanno testata e titolo. */
.press__thumb { aspect-ratio: 3 / 4; background: var(--manna); box-shadow: 0 1px 0 var(--stone), 0 0 0 1px var(--stone); }
.press__thumb img { height: 100%; object-fit: cover; object-position: top; }
.press__item figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.6rem; }
.press__title { font-family: var(--font-display); font-size: 1.1rem; }
.press__pages { color: var(--ink-muted); font-size: var(--step--1); white-space: nowrap; }

/* ---------- Poesia a fronte ---------- */

.poem { max-width: 58rem; }
.poem__head,
.poem__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
}
.poem__head { margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgb(246 247 243 / 0.18); color: var(--stone); font-size: var(--step--1); }
.poem__stanza + .poem__stanza { margin-top: 1.75rem; }
.poem__line { margin: 0; align-items: baseline; }
.poem__scn {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.55;
    color: var(--manna);
}
.poem__line--indent .poem__scn { padding-left: clamp(2rem, 6vw, 5rem); }
.poem__it { color: var(--stone); font-size: 0.95rem; line-height: 1.55; }
.poem__author { margin-top: 2rem; font-family: var(--font-display); font-size: var(--step-1); color: var(--leaf-light); }
@media (max-width: 40rem) {
    .poem__head { display: none; }
    .poem__line { grid-template-columns: 1fr; gap: 0; margin-bottom: 0.45rem; }
    .poem__it { font-size: 0.85rem; }
    .poem__line--indent .poem__it { padding-left: clamp(2rem, 6vw, 5rem); }
}

/* ---------- Moduli ---------- */

.hero--short { min-height: clamp(18rem, 42svh, 26rem); }

.button--dark { background: var(--bark); border-color: var(--bark); color: var(--manna); cursor: pointer; font-family: var(--font-text); }
.button--dark:hover { background: var(--leaf); border-color: var(--leaf); color: var(--manna); }

.field-error { margin: 0.4rem 0 0; color: #a3442a; font-size: 0.875rem; }

.form { display: grid; gap: 1.25rem; }
.form__note { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form__field label { display: block; margin-bottom: 0.4rem; font-weight: 500; font-size: 0.95rem; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #bdb9ad;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
}
.form textarea { resize: vertical; min-height: 10rem; }
.form input:focus-visible,
.form textarea:focus-visible { outline: 2px solid var(--sap); outline-offset: 1px; border-color: var(--sap); }
.form [aria-invalid="true"] { border-color: #a3442a; }
.form .button { justify-self: start; }
.consent--light { color: var(--ink-muted); }
.consent--light a { color: var(--sap); }
.form .form-message--ok { border-color: var(--leaf); background: rgb(85 97 58 / 0.1); }
.form .form-message--error { border-color: #a3442a; background: rgb(163 68 42 / 0.08); }
@media (max-width: 36rem) {
    .form__row { grid-template-columns: 1fr; }
}

.contact {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.contact__list { margin: 2rem 0 0; }
.contact__list div { padding: 0.9rem 0; border-top: 1px solid var(--stone); }
.contact__list dt { font-size: var(--step--1); color: var(--ink-muted); }
.contact__list dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: var(--step-1); }
.contact__list a { color: var(--ink); text-decoration-color: var(--stone); }
.contact__list a:hover { color: var(--sap); }
@media (max-width: 56rem) {
    .contact { grid-template-columns: 1fr; }
}

.contact__note { margin-top: 2rem; padding: 1.25rem 1.4rem; background: var(--stone-soft); border-left: 3px solid var(--leaf); }
.contact__note h3 { margin-bottom: 0.5rem; font-size: var(--step-1); }
.contact__note p { color: var(--ink-muted); font-size: 0.95rem; }
.form__mode { margin: 0; padding: 0.8rem 1rem; background: rgb(85 97 58 / 0.1); border-left: 3px solid var(--leaf); font-size: 0.95rem; }
.form__mode a { white-space: nowrap; }
.newsletter__intro a { color: var(--manna); }

.message-page { min-height: 50vh; }
.message-page__inner { max-width: 40rem; }
.message-page form { margin-top: 1.5rem; }

/* Pulsante per aprire a schermo intero le foto a tutta larghezza con testo sovrapposto. */
.photo-quote__zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgb(246 247 243 / 0.35);
    border-radius: 2rem;
    background: rgb(28 27 23 / 0.55);
    color: var(--manna);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: zoom-in;
}
.photo-quote__zoom::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    background: currentColor;
    /* Icona lente come maschera, così prende il colore del testo. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M7.5 10.5h6M10.5 7.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M7.5 10.5h6M10.5 7.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.photo-quote__zoom:hover { background: rgb(28 27 23 / 0.8); border-color: var(--manna); color: var(--manna); }
.photo-quote__zoom:focus-visible { outline-color: var(--manna); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* ---------- Pagina legale (privacy) ---------- */

.legal-head { padding-block: clamp(3rem, 6vw, 4.5rem); }
.legal-head .chapter-title { max-width: 20ch; }

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 46rem) 17rem;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.legal { font-size: 1.0625rem; line-height: 1.7; }
.legal section { padding-top: 0.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal section + section { margin-top: 2.25rem; }
.legal h2 { margin-bottom: 0.9rem; font-size: var(--step-2); }
.legal h3 { margin: 1.4rem 0 0.5rem; font-size: var(--step-1); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.45rem; }
.legal code { font-size: 0.9em; }
.legal__updated { margin-top: 1.5rem; font-weight: 600; }
.legal-table { min-width: 36rem; max-width: none; font-size: 0.925rem; font-variant-numeric: normal; }
.legal-table th, .legal-table td { vertical-align: top; line-height: 1.5; }
.legal-table tbody th { width: 30%; }

.legal-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; display: grid; gap: 2rem; }
.legal-aside .toc { position: static; }
.legal-laws ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--stone); }
.legal-laws li { padding: 0.35rem 0 0.35rem 1rem; font-size: 0.875rem; line-height: 1.4; }

@media (max-width: 64rem) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-aside { position: static; }
    .legal-aside .toc { display: none; }
}

/* ---------- Banner dei cookie ---------- */

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 90;
    width: min(56rem, calc(100% - 2rem));
    transform: translateX(-50%);
    background: var(--bark);
    color: var(--manna);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
.cookie-banner__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    align-items: end;
    padding: 1.4rem 3.5rem 1.4rem 1.6rem;
}
.cookie-banner h2 { margin-bottom: 0.4rem; font-size: var(--step-1); }
.cookie-banner p { margin: 0; color: var(--stone); font-size: 0.925rem; line-height: 1.55; }
.cookie-banner a { color: var(--manna); }
.cookie-banner__status { margin-bottom: 0.4rem !important; color: var(--leaf-light) !important; }
.cookie-banner__actions { display: flex; gap: 0.6rem; }
/* Accetta e Rifiuta hanno lo stesso peso visivo, come richiesto dalle linee guida del Garante. */
.cookie-banner__btn {
    min-width: 7.5rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--manna);
    border-radius: var(--radius);
    background: var(--manna);
    color: var(--bark);
    font: 600 0.95rem var(--font-text);
    cursor: pointer;
}
.cookie-banner__btn:hover { background: var(--stone); border-color: var(--stone); }
.cookie-banner__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--stone);
    cursor: pointer;
}
.cookie-banner__close:hover { color: var(--manna); background: rgb(246 247 243 / 0.1); }
.cookie-banner__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cookie-banner :focus-visible { outline-color: var(--manna); }
@media (max-width: 40rem) {
    .cookie-banner { bottom: 0; width: 100%; border-radius: 0; }
    .cookie-banner__inner { grid-template-columns: 1fr; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
    .cookie-banner__text { padding-right: 2rem; }
    .cookie-banner__actions > * { flex: 1; }
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sap);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    cursor: pointer;
}
.link-button:hover { color: var(--bark); }

/* ---------- Movimento ridotto ---------- */

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

@media (max-width: 23rem) {
    .brand__text { display: none; }
}