@charset "UTF-8";
/* ==========================================================================
   FLORAFOTO — Design system
   Direzione: editorial gallery. La pagina si comporta come un catalogo
   d'arte: molta carta, filetti sottili, fotografie che entrano in scena
   come stampe scoperte una alla volta.
   ========================================================================== */

/* --------------------------------------------------------------- 01. FONT */
/* Self-hosted: nessuna chiamata a Google, un round-trip in meno e nessun
   dato utente che esce dal dominio. */

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/instrumentsans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/instrumentsans-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}

/* -------------------------------------------------------------- 02. TOKEN */

:root {
    /* Colore. Il verde del brand è chiarissimo: come testo su crema resterebbe
       a 1,4:1 di contrasto. Vive quindi da accento e campitura, mentre per
       leggere si usano --ink e --sage-deep (5,3:1 su crema, WCAG AA). */
    --cream:      #efebe0;
    --cream-2:    #e7e2d4;
    --paper:      #f6f4ee;
    --sage:       #c2d995;
    --sage-wash:  #dbe9c2;
    --sage-deep:  #4e6828;
    --ink:        #2b2b28;
    /* Scurito rispetto al #6b6b62 iniziale: su --cream-2, che è la campitura
       più scura delle fasce alternate, quel valore si fermava a 4,16:1 e non
       superava la soglia AA. Così tiene 4,69:1 sul fondo peggiore. */
    --ink-2:      #63635a;
    --black:      #16160f;
    --line:       rgba(43, 43, 40, .16);
    --line-soft:  rgba(43, 43, 40, .08);

    --curtain:    var(--cream);

    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-sans:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

    /* Fraunces è variabile su quattro assi: SOFT arrotonda i terminali, WONK
       attiva le forme irregolari. Insieme tolgono al serif la rigidità
       da quotidiano e gli danno il calore giusto per un sito di matrimoni. */
    --fx-display: 'opsz' 144, 'SOFT' 60, 'WONK' 1;
    --fx-text:    'opsz' 20, 'SOFT' 30, 'WONK' 0;

    --gutter:  clamp(1.25rem, 4.5vw, 4.5rem);
    --gap:     clamp(1rem, 2.2vw, 2.25rem);
    --section: clamp(4.5rem, 11vw, 10rem);
    --shell:   1560px;
    --header-h: 100px;

    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

/* --------------------------------------------------------------- 03. BASE */

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

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

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.018em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

::selection { background: var(--sage); color: var(--ink); }

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

.ff-skip {
    position: absolute; left: 1rem; top: -100px; z-index: 999;
    background: var(--ink); color: var(--cream);
    padding: .8rem 1.2rem; font-size: .85rem;
    transition: top .2s var(--ease);
}
.ff-skip:focus { top: 1rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Grana di pellicola sopra tutto: dà alla campitura crema il carattere
   della carta stampata invece del piatto digitale. */
.ff-grain {
    position: fixed; inset: 0; z-index: 900;
    pointer-events: none; opacity: .22; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 04. LAYOUT */

.ff-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.ff-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

/* Utility di colonna per le intestazioni di sezione.
   Sono classi e non attributi style="" proprio perché devono collassare a
   piena larghezza da tablet in giù: uno stile inline batte qualsiasi media
   query, e le colonne resterebbero strette anche su smartphone. */
.ff-c-title   { grid-column: 1 / span 6; }
.ff-c-title-w { grid-column: 1 / span 7; }
.ff-c-title-s { grid-column: 1 / span 5; }
.ff-c-label   { grid-column: 1 / span 4; }
.ff-c-body    { grid-column: 6 / span 7; }
.ff-c-aside   { grid-column: 8 / span 5; align-self: end; }
.ff-c-link    { grid-column: 9 / span 4; align-self: end; }

.ff-section { padding-block: var(--section); position: relative; }
.ff-section--tight { padding-block: calc(var(--section) * .58); }
.ff-section--paper { background: var(--paper); }
.ff-section--cream2 { background: var(--cream-2); --curtain: var(--cream-2); }
.ff-section--dark {
    background: var(--black); color: var(--cream);
    --curtain: var(--black); --line: rgba(239, 235, 224, .16);
}

/* --------------------------------------------------------- 05. TIPOGRAFIA */

.ff-display,
.ff-pagehead__body > h1 {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-weight: 300;
    line-height: .92;
    letter-spacing: -.03em;
    font-size: clamp(3rem, 8.4vw, 8.5rem);
}
.ff-h2 { font-size: clamp(2.1rem, 5vw, 4.4rem); }
.ff-h3,
.ff-split__body > h2:not([class*="ff-h"]) { font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.06; }
.ff-h4 { font-size: clamp(1.12rem, 1.4vw, 1.35rem); line-height: 1.2; }

/* ATTENZIONE — ogni regola contestuale su un <p> dentro un contenitore del
   tema DEVE escludere .ff-label. L'occhiello e' un <p> che vive nello stesso
   contenitore del testo, e un selettore come ".ff-split__body > p" lo prende
   dentro con specificita' maggiore della sua classe: gli cambia font, colore
   e margini senza che si veda nel markup. E' successo tre volte.

   I titoli scritti nell'editor sono blocchi nativi di WordPress: emettono
   <h2 class="wp-block-heading"> e non porteranno mai una classe ff-, perche'
   li scrive Iride. Lo stile arriva quindi dal contenitore, che il tema
   conosce perche' lo stampa lui — vedi la sezione TESTI DALL'EDITOR in fondo. */
/* Le distanze dentro il racconto sono quelle misurate sul mockup, dove
   stavano in style inline. Il titolo respira di piu' quando c'e' un
   occhiello sopra, cioe' quando la sezione e' isolata invece che parte di
   una serie. */
.ff-split__body > h2 { margin-bottom: 1.3rem; }
.ff-split__body > .ff-label + h2 { margin-bottom: 1.5rem; }

/* Etichetta di sezione: maiuscoletto spaziato con un trattino salvia.
   È l'elemento che ricorre in tutta la pagina e tiene insieme il sistema. */
.ff-label {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--font-sans);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--sage-deep);
    margin: 0 0 1.6rem;
}
.ff-label::before {
    content: ''; width: clamp(24px, 3vw, 46px); height: 2px;
    background: var(--sage); flex: none;
}
.ff-section--dark .ff-label { color: var(--sage); }

.ff-lead,
.ff-pagehead__body > p:not(.ff-label),
.ff-hero__text > p:not(.ff-label) {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: clamp(1.2rem, 1.9vw, 1.65rem);
    line-height: 1.42;
    letter-spacing: -.01em;
    color: var(--ink);
    max-width: 46ch;
}

.ff-prose,
.ff-split__body > p:not(.ff-label) { color: var(--ink-2); max-width: 62ch; }
.ff-prose strong,
.ff-split__body > p:not(.ff-label) strong { color: var(--ink); font-weight: 600; }
.ff-section--dark .ff-prose,
.ff-section--dark .ff-split__body > p:not(.ff-label) { color: rgba(239, 235, 224, .72); }
/* margin-bottom e non margin-top fra paragrafi: in flusso normale i margini
   adiacenti si fondono al maggiore, quindi due paragrafi con 1.2rem sopra e
   1.2rem sotto producono 1.2rem, non 2.4. Il mockup usava il margine
   inferiore, e con quello i conti tornano. */
.ff-split__body > p:not(.ff-label) { margin-bottom: 1.4rem; }
.ff-split__body > p:not(.ff-label):last-child { margin-bottom: 0; }
/* L'ultimo paragrafo prima di un collegamento respira di piu'. */
.ff-split__body > p:not(.ff-label):has(+ .ff-link) { margin-bottom: 2rem; }

/* Il testo della frase in evidenza e della colonna di destra sono blocchi
   nativi, quindi arrivano dentro un <p>: gli stili del contenitore devono
   raggiungerli invece di fermarsi al bordo. */
/* La firma e' anche lei un <p> dentro il blockquote, da quando si scrive nella
   pagina: senza l'esclusione questa regola le azzerava il margine inferiore —
   quattordici pixel — e tirava su di altrettanto il blocco delle cifre. */
.ff-manifesto__quote > p:not(.ff-manifesto__sign),
.ff-manifesto__quote > .acf-innerblocks-container > p:not(.ff-manifesto__sign) { font: inherit; color: inherit; margin: 0; max-width: none; }
.ff-c-body > p { color: var(--ink-2); max-width: 62ch; }
.ff-c-body > p + p { margin-top: 1.2rem; }
.ff-c-body > p strong { color: var(--ink); font-weight: 600; }



/* Evidenziatore: una campitura salvia che si apre da sinistra sotto il
   testo, come un segno di matita su una bozza. */
.ff-mark {
    position: relative;
    display: inline;
    background-image: linear-gradient(var(--sage), var(--sage));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% .42em;
    transition: background-size .9s var(--ease-out) .25s;
}
.is-in .ff-mark { background-size: 100% .42em; }

/* Su fondo scuro il tratto da evidenziatore non può funzionare: copre solo
   il terzo inferiore delle lettere, quindi servirebbe un colore del testo
   leggibile sia sul nero della sezione sia sul verde del tratto — e non
   esiste. Lì il segno diventa una sottolineatura e il testo resta crema. */
.ff-section--dark .ff-mark,
.ff-cta .ff-mark {
    background-image: none;
    color: var(--sage);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    text-decoration-color: transparent;
    transition: text-decoration-color .8s var(--ease) .3s;
}
.ff-section--dark .is-in .ff-mark,
.ff-cta .is-in .ff-mark { text-decoration-color: rgba(194, 217, 149, .8); }

.ff-num {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
    font-weight: 200;
    font-size: clamp(3.5rem, 9vw, 9rem);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(43, 43, 40, .25);
    letter-spacing: -.04em;
}


/* -------------------------------------------------------------- 06. LINK */

.ff-link {
    display: inline-flex; align-items: baseline; gap: .45rem;
    font-family: var(--font-sans);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .35rem;
    position: relative;
}
.ff-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--ink);
    transform-origin: right; transition: transform .5s var(--ease-out);
}
.ff-link:hover::after { transform: scaleX(0); }
.ff-link__arrow { transition: transform .4s var(--ease-out); }
.ff-link:hover .ff-link__arrow { transform: translateX(6px); }
.ff-section--dark .ff-link { color: var(--cream); }
.ff-section--dark .ff-link::after { background: var(--sage); }

.ff-btn {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--font-sans);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 1.05em 2.1em;
    border: 1px solid var(--ink);
    background: transparent; color: var(--ink);
    cursor: pointer; position: relative; overflow: hidden;
    /* Il riempimento del bottone sta a z-index -1, cioe' dietro al bottone.
       Senza un contesto suo, quel «dietro» e' dietro a TUTTA la sezione: sopra
       una fotografia — l'apertura e l'invito a scrivere — la salvia finiva
       sotto lo scatto e non si vedeva, mentre il testo al passaggio del mouse
       diventava scuro come se il fondo ci fosse. Scritta scura su fotografia
       scura: il bottone spariva proprio mentre lo si stava per premere.
       isolation confina quel -1 dentro il bottone. */
    isolation: isolate;
    transition: color .45s var(--ease), border-color .45s var(--ease);
}
.ff-btn::before {
    content: ''; position: absolute; inset: 0; background: var(--ink);
    transform: translateY(101%); transition: transform .5s var(--ease-in-out);
    z-index: -1;
}
.ff-btn > * { position: relative; z-index: 1; }
.ff-btn:hover { color: var(--cream); }
.ff-btn:hover::before { transform: translateY(0); }

.ff-btn--fill {
    background: var(--sage); border-color: var(--sage); color: var(--ink);
}
.ff-btn--fill::before { background: var(--sage-deep); }
.ff-btn--fill:hover { color: var(--cream); border-color: var(--sage-deep); }

.ff-section--dark .ff-btn { border-color: rgba(239, 235, 224, .45); color: var(--cream); }
.ff-section--dark .ff-btn::before { background: var(--sage); }
.ff-section--dark .ff-btn:hover { color: var(--ink); border-color: var(--sage); }

/* ------------------------------------------------------------ 07. HEADER */

.ff-header {
    position: fixed; inset: 0 0 auto; z-index: 500;
    transition: background .45s var(--ease), backdrop-filter .45s var(--ease);
}
.ff-header__inner {
    max-width: var(--shell); margin-inline: auto;
    padding: clamp(1rem, 1.6vw, 1.4rem) var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap);
}
.ff-header__rule {
    display: block; height: 1px; background: var(--line);
    transform: scaleX(0); transform-origin: center;
    transition: transform .6s var(--ease-out);
    /* Il filetto viene dopo la navigazione nel DOM: senza questi z-index
       verrebbe disegnato sopra al pannello del sottomenu, tagliandolo. */
    position: relative; z-index: 1;
}
.ff-header.is-stuck {
    background: rgba(239, 235, 224, .82);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.ff-header.is-stuck .ff-header__rule { transform: scaleX(1); }

/* Il marchio calligrafico originale di Florafoto. Essendo inline eredita
   currentColor: inchiostro sull'header crema, crema sul footer scuro. */
.ff-logo {
    display: inline-flex; align-items: center;
    flex: none; color: var(--ink);
}
.ff-logo__svg {
    height: clamp(46px, 3.4vw, 54px);
    width: auto; display: block;
    transition: opacity .45s var(--ease);
}
.ff-logo:hover .ff-logo__svg { opacity: .6; }

.ff-footer__logo {
    height: clamp(46px, 5vw, 68px); width: auto;
    color: var(--cream); margin-bottom: 1.8rem;
}

/* --------------------------------------------------------------- 08. NAV */

.ff-nav { position: relative; z-index: 2; }
.ff-nav__list {
    display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.8rem);
    list-style: none; margin: 0; padding: 0;
}
.ff-nav__item { position: relative; }
.ff-nav__link {
    display: inline-block; padding: .55rem 0;
    font-size: .78rem; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase;
    position: relative;
}
.ff-nav__link::after {
    content: ''; position: absolute; left: 0; bottom: .1rem;
    width: 100%; height: 1px; background: var(--sage-deep);
    transform: scaleX(0); transform-origin: right;
    transition: transform .45s var(--ease-out);
}
.ff-nav__link:hover::after,
.ff-nav__item:focus-within .ff-nav__link::after { transform: scaleX(1); transform-origin: left; }
.ff-nav__link.is-active { color: var(--sage-deep); }
.ff-nav__link.is-active::after { transform: scaleX(1); }

.ff-nav__item.is-cta .ff-nav__link {
    border: 1px solid var(--ink); padding: .7rem 1.3rem;
    transition: background .4s var(--ease), color .4s var(--ease);
}
.ff-nav__item.is-cta .ff-nav__link::after { display: none; }
.ff-nav__item.is-cta .ff-nav__link:hover { background: var(--ink); color: var(--cream); }

.ff-nav__toggle {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: none; border: 0; cursor: pointer; opacity: 0;
    pointer-events: none;
}

.ff-sub {
    position: absolute; top: calc(100% + .9rem); left: -1.4rem;
    min-width: 290px; background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 26px 60px -30px rgba(22, 22, 15, .35);
    padding: .5rem;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease-out), visibility .35s;
}
/* Ponte invisibile sul varco fra la voce e il pannello: senza, spostando il
   puntatore verso il basso si esce dall'area sensibile e il menu si chiude
   prima di poterlo raggiungere. */
.ff-sub::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -1rem; height: 1rem;
}
.ff-nav__item.has-sub:hover .ff-sub,
.ff-nav__item.has-sub:focus-within .ff-sub,
.ff-nav__item.has-sub.is-open .ff-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ff-sub__list { list-style: none; margin: 0; padding: 0; }
.ff-sub__link {
    display: block; padding: .8rem 1rem;
    transition: background .3s var(--ease);
}
.ff-sub__link:hover, .ff-sub__link.is-active { background: var(--sage-wash); }
.ff-sub__label {
    display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.005em;
}
.ff-sub__hint {
    display: block; font-size: .74rem; color: var(--ink-2); margin-top: .15rem;
}

/* --------------------------------------------------- 09. MENU MOBILE */

.ff-burger {
    display: none; align-items: center; gap: .6rem;
    background: none; border: 0; cursor: pointer; padding: .5rem 0;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.ff-burger__box { display: grid; gap: 5px; width: 26px; }
.ff-burger__box i {
    display: block; height: 1.5px; background: var(--ink);
    transition: transform .45s var(--ease-in-out), opacity .3s;
}
.ff-burger[aria-expanded="true"] .ff-burger__box i:first-child { transform: translateY(3.25px) rotate(45deg); }
.ff-burger[aria-expanded="true"] .ff-burger__box i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.ff-drawer {
    position: fixed; inset: 0; z-index: 480;
    display: grid; grid-template-columns: 1fr;
    background: var(--cream);
}
.ff-drawer[hidden] { display: none; }
.ff-drawer__panel {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.5rem;
    overflow-y: auto;
}
.ff-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.ff-drawer__nav > ul > li {
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(20px);
}
.ff-drawer.is-open .ff-drawer__nav > ul > li {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease-out) calc(var(--i) * 55ms + .1s),
                transform .7s var(--ease-out) calc(var(--i) * 55ms + .1s);
}
.ff-drawer__nav > ul > li > a {
    display: flex; align-items: baseline; gap: 1rem;
    padding: .85rem 0;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-size: clamp(1.8rem, 8vw, 3rem);
    line-height: 1;
}
.ff-drawer__num {
    font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
    letter-spacing: .14em; color: var(--sage-deep); flex: none;
}
.ff-drawer__sub {
    display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
    padding: 0 0 1rem 2.4rem !important;
}
.ff-drawer__sub a { font-size: .84rem; color: var(--ink-2); }
.ff-drawer__sub a:hover { color: var(--sage-deep); }
.ff-drawer__foot {
    display: grid; gap: .35rem; padding-top: 2rem;
    font-size: .95rem; color: var(--ink-2);
}
.ff-drawer__media { display: none; }

/* ---------------------------------------------------------- 10. FOTO */

.ff-photo { margin: 0; position: relative; }
.ff-photo__frame {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ratio, 3 / 4);
    background: var(--cream-2);
}
.ff-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.ff-photo__caption {
    margin-top: .9rem;
    font-size: .84rem; letter-spacing: .02em;
    color: var(--ink-2);
}
.ff-photo--cover .ff-photo__frame { height: 100%; aspect-ratio: auto; }

/* Immagine con parallasse: sborda in altezza, e il JS la trasla dentro la
   cornice. Nessun buco ai bordi anche a fine corsa. */
.ff-photo img[data-parallax] {
    height: 124%; top: -12%;
    will-change: transform;
    transform: translate3d(0, var(--py, 0px), 0);
}

/* Rivelazione: la cornice si apre dal basso mentre l'immagine rientra
   dalla scala. Lenta di proposito — è una stampa che viene scoperta. */
.js [data-reveal="photo"] .ff-photo__frame,
.js [data-reveal="photo"] .ff-tile__frame { clip-path: inset(0 0 100% 0); }
.js [data-reveal="photo"] img { transform: scale(1.16); }
.js [data-reveal="photo"] img[data-parallax] { transform: translate3d(0, var(--py, 0px), 0) scale(1.16); }

.js [data-reveal="photo"].is-in .ff-photo__frame,
.js [data-reveal="photo"].is-in .ff-tile__frame {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.25s var(--ease-out);
}
.js [data-reveal="photo"].is-in img {
    transform: scale(1);
    transition: transform 1.5s var(--ease-out);
}
.js [data-reveal="photo"].is-in img[data-parallax] {
    transform: translate3d(0, var(--py, 0px), 0) scale(1);
}

/* --------------------------------------------------- 11. ANIMAZIONI TESTO */

.ff-word {
    display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-bottom: .14em; margin-bottom: -.14em;
}
.ff-word__in { display: inline-block; }
.js [data-reveal="text"] .ff-word__in { transform: translateY(115%); }
.js [data-reveal="text"].is-in .ff-word__in {
    transform: translateY(0);
    transition: transform .95s var(--ease-out) calc(var(--i, 0) * 55ms);
}

.js [data-reveal="up"] { opacity: 0; transform: translateY(30px); }
.js [data-reveal="up"].is-in {
    opacity: 1; transform: none;
    transition: opacity .9s var(--ease-out) var(--d, 0s),
                transform .9s var(--ease-out) var(--d, 0s);
}

.js [data-reveal="fade"] { opacity: 0; }
.js [data-reveal="fade"].is-in {
    opacity: 1; transition: opacity 1.1s var(--ease) var(--d, 0s);
}

.js [data-reveal-group] > * { opacity: 0; transform: translateY(26px); }
.js [data-reveal-group].is-in > * {
    opacity: 1; transform: none;
    transition: opacity .85s var(--ease-out) calc(var(--gi, 0) * 90ms),
                transform .85s var(--ease-out) calc(var(--gi, 0) * 90ms);
}

/* ---------------------------------------------------------- 12. HERO HOME */

.ff-hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(2rem, 7vh, 5rem));
    padding-bottom: clamp(3rem, 8vh, 7rem);
    overflow: hidden;
}
.ff-hero__grid { align-items: end; }

/* Le tre celle dichiarano riga E colonna: è la condizione perché la griglia
   permetta la sovrapposizione invece di spingere gli elementi su righe nuove. */
.ff-hero__text { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; }
.ff-hero__title,
.ff-hero__text > h1 {
    font-size: clamp(2.8rem, 6.4vw, 6.8rem);
    line-height: .93;
    letter-spacing: -.035em;
    font-weight: 300;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.ff-hero__title em,
.ff-hero__text > h1 em {
    font-style: normal;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-weight: 500;
    color: var(--sage-deep);
}
.ff-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .75rem 1.4rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    font-size: .74rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.ff-hero__meta span { display: inline-flex; align-items: center; gap: .7rem; }
.ff-hero__meta span::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--sage); flex: none;
}
.ff-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.ff-hero__main { grid-column: 8 / span 5; grid-row: 1; position: relative; }
/* Il tetto in altezza tiene l'invito all'azione sopra la piega su un portatile
   da 13 pollici, senza rinunciare al formato verticale della fotografia. */
/* Nessuna forma imposta e nessun tetto: la cornice prende quella dello
   scatto, che arriva dall'attributo style della figure. Il tetto in altezza
   c'era, ed era un secondo ritaglio travestito da sicurezza: un verticale
   pieno lo superava e veniva tagliato lo stesso. Se una fotografia e' alta,
   l'apertura e' alta. */

/* La seconda fotografia scavalca la colonna e rompe la griglia: è il
   dettaglio che distingue un'impaginazione editoriale da un template. */
.ff-hero__aside {
    grid-column: 7 / span 3;
    grid-row: 1;
    align-self: end;
    position: relative; z-index: 3;
    margin-bottom: clamp(-1rem, -4vw, -4rem);
    /* Sconfina a sinistra quanto basta a scavalcare la fotografia principale,
       ma non tanto da entrare nella colonna del testo. */
    margin-left: clamp(-1.5rem, -1.5vw, -1rem);
}
.ff-hero__aside::after {
    content: ''; position: absolute; inset: -10px;
    border: 1px solid var(--sage); pointer-events: none;
    opacity: 0; transition: opacity .8s var(--ease) .6s;
}
.ff-hero__aside.is-in::after { opacity: 1; }

.ff-hero__scroll {
    /* Allineato al margine del contenuto, non a quello della finestra:
       sopra i 1560px la pagina è centrata e il gutter non basta più. */
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
    bottom: clamp(1rem, 3vh, 2.5rem);
    display: inline-flex; align-items: center; gap: .8rem;
    font-size: .68rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.ff-hero__scroll i {
    display: block; width: 46px; height: 1px; background: var(--ink-2);
    position: relative; overflow: hidden;
}
.ff-hero__scroll i::after {
    content: ''; position: absolute; inset: 0; background: var(--sage-deep);
    animation: ff-slide 2.4s var(--ease-in-out) infinite;
}
@keyframes ff-slide {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* --------------------------------------------------------- 13. MANIFESTO */

/* La tipografia sta sul paragrafo, in fondo al foglio: il blockquote e'
   display:contents e cio' che gli si mette addosso lo ereditano i figli,
   compresa la firma. */
.ff-manifesto__quote {
}
.ff-manifesto__sign {
    grid-column: 2 / span 9;
    display: flex; align-items: center; gap: 1rem;
    font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2);
}
.ff-manifesto__sign::before {
    content: ''; width: 60px; height: 1px; background: var(--sage-deep);
}

.ff-stats {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-top: clamp(3rem, 6vw, 5.5rem);
    border-top: 1px solid var(--line);
    padding-top: clamp(1.6rem, 3vw, 2.6rem);
}
/* Il margine inferiore va azzerato: la regola globale sui paragrafi è in em,
   e a 64px di corpo produce da sola 74px di vuoto fra cifra ed etichetta. */
.ff-stat__value {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 0;
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    line-height: 1; font-weight: 300; letter-spacing: -.04em;
}
.ff-stat__value sup {
    font-size: .4em; vertical-align: super; color: var(--sage-deep);
    margin-left: .08em; line-height: 0;
}
.ff-stat__label {
    margin: .85rem 0 0;
    font-size: 1rem; line-height: 1.42; color: var(--ink-2);
    max-width: 22ch;
}

/* ------------------------------------------------------------ 14. SERVIZI */

.ff-svc { border-top: 1px solid var(--line); }
.ff-svc__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.ff-svc__media { grid-column: 1 / span 5; }
.ff-svc__body  { grid-column: 7 / span 5; }
.ff-svc__row:nth-child(even) .ff-svc__media { grid-column: 8 / span 5; grid-row: 1; }
.ff-svc__body .ff-num { display: block; margin-bottom: 1.2rem; }
.ff-svc__row:nth-child(even) .ff-svc__body  { grid-column: 2 / span 5; grid-row: 1; }
.ff-svc__media .ff-photo__frame { --ratio: 4 / 3; }
.ff-svc__title { margin-bottom: 1rem; }
.ff-svc__text { margin-bottom: 1.8rem; }

/* All'hover della riga la fotografia respira: un solo gesto, applicato
   con coerenza ovunque nel sito. */
.ff-svc__row .ff-photo img { transition: transform 1.1s var(--ease-out); }
.ff-svc__row:hover .ff-photo img { transform: scale(1.045); }
.ff-svc__row:hover .ff-num { -webkit-text-stroke-color: var(--sage-deep); }
.ff-svc__row .ff-num { transition: -webkit-text-stroke-color .6s var(--ease); }

/* -------------------------------------------------------- 15. PORTFOLIO */

/* Mosaico a colonne invece che a griglia: le fotografie mantengono il loro
   formato nativo — niente ritagli, che su un sito di fotografia è la cosa
   che conta di più — e l'incolonnamento non lascia buchi qualunque sia il
   numero di scatti o il mix fra verticali e orizzontali. */
.ff-mosaic {
    columns: 3;
    column-gap: var(--gap);
    orphans: 1; widows: 1;
}
.ff-mosaic > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--gap);
    width: 100%;
}

.ff-tile {
    display: block; padding: 0; border: 0; background: none;
    cursor: pointer; position: relative; text-align: left;
}
.ff-tile__frame {
    display: block; position: relative; overflow: hidden;
    background: var(--cream-2);
}
.ff-tile img {
    position: static; width: 100%; height: auto;
    transition: transform 1.2s var(--ease-out), filter .7s var(--ease);
}
.ff-tile:hover img { transform: scale(1.05); }
.ff-tile__zoom {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(22, 22, 15, .28), transparent 45%);
    opacity: 0; transition: opacity .5s var(--ease);
}
.ff-tile:hover .ff-tile__zoom, .ff-tile:focus-visible .ff-tile__zoom { opacity: 1; }

.ff-filters {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding: 0; list-style: none;
}
.ff-filter {
    border: 1px solid var(--line); background: transparent;
    padding: .65rem 1.25rem; cursor: pointer;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.ff-filter:hover { border-color: var(--ink); }
.ff-filter[aria-pressed="true"] {
    background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.ff-tile.is-filtered { display: none; }

/* Cursore personalizzato sulle gallerie: un disco salvia che segue il
   puntatore e annuncia l'ingrandimento. Solo desktop e solo con puntatore
   fine, dove non ruba nulla all'accessibilità. */
.ff-cursor {
    position: fixed; top: 0; left: 0; z-index: 700;
    width: 84px; height: 84px; margin: -42px 0 0 -42px;
    border-radius: 50%; background: var(--sage);
    color: var(--ink);
    display: grid; place-items: center;
    font-size: .64rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    pointer-events: none;
    transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(0);
    transition: transform .4s var(--ease-out);
}
.ff-cursor.is-on { transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(1); }

/* ------------------------------------------------------------ 16. METODO */

.ff-steps {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap) var(--gap);
}
.ff-step {
    grid-column: span 3;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    position: relative;
}
.ff-step::before {
    content: ''; position: absolute; top: -1px; left: 0;
    width: 100%; height: 1px; background: var(--sage-deep);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1s var(--ease-out) calc(var(--gi, 0) * 140ms);
}
.ff-steps.is-in .ff-step::before { transform: scaleX(1); }
.ff-step--wide { grid-column: span 4; }
.ff-step__n {
    display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: .2em; color: var(--sage-deep); margin-bottom: 1rem;
}
.ff-step__title { margin-bottom: .7rem; }
.ff-step__text { font-size: .95rem; color: var(--ink-2); }

/* ------------------------------------------------------- 17. LISTA VOCI */

.ff-includes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap); list-style: none; margin: 0; padding: 0;
}
.ff-includes li {
    padding: 1.5rem 0; border-bottom: 1px solid var(--line);
    display: grid; gap: .4rem;
}
.ff-includes__label {
    display: flex; align-items: baseline; gap: .8rem;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em;
}
.ff-includes__label::before {
    content: ''; width: 7px; height: 7px; flex: none;
    background: var(--sage); transform: rotate(45deg);
}
.ff-includes__text { font-size: .92rem; color: var(--ink-2); padding-left: 1.5rem; }

/* ---------------------------------------------------------------- 18. FAQ */

.ff-faq { border-top: 1px solid var(--line); }
.ff-faq__item { border-bottom: 1px solid var(--line); }
.ff-faq__q {
    width: 100%; display: flex; align-items: flex-start; gap: 1.5rem;
    justify-content: space-between; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: clamp(1.3rem, 2.4vw, 2rem) 0;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 500; letter-spacing: -.012em; line-height: 1.3;
    transition: color .35s var(--ease);
}
.ff-faq__q:hover { color: var(--sage-deep); }
.ff-faq__icon {
    flex: none; width: 20px; height: 20px; position: relative; margin-top: .3em;
}
.ff-faq__icon::before, .ff-faq__icon::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: currentColor;
    transition: transform .45s var(--ease-in-out);
}
.ff-faq__icon::after { transform: rotate(90deg); }
.ff-faq__q[aria-expanded="true"] .ff-faq__icon::after { transform: rotate(0); }
.ff-faq__a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease-in-out);
}
.ff-faq__item.is-open .ff-faq__a { grid-template-rows: 1fr; }
.ff-faq__a > div { overflow: hidden; }
.ff-faq__a p {
    max-width: 68ch; color: var(--ink-2);
    padding-bottom: clamp(1.3rem, 2.4vw, 2rem);
}

/* ---------------------------------------------------------- 18b. VIDEO */

.ff-video { margin: 0; }

/* Il trailer apre la pagina al posto del solito banner fotografico:
   occupa tutta la colonna, come farebbe una stampa a piena pagina. */
.ff-video--hero .ff-video__caption,
.ff-video--wide .ff-video__caption {
    grid-template-columns: 1fr;
    max-width: 62ch;
}

/* Due colonne di solo testo: sostituiscono i blocchi illustrati del template
   generico, perché qui le fotografie ruberebbero la scena ai video. */
.ff-textduo {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
}
.ff-textduo__item { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.ff-video__btn {
    display: block; width: 100%; padding: 0; border: 0; background: none;
    cursor: pointer; position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; background: #000;
}
.ff-video__thumb {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s var(--ease-out), opacity .5s var(--ease);
}
.ff-video__btn:hover .ff-video__thumb { transform: scale(1.04); opacity: .78; }

/* Triangolo disegnato con i bordi: nessuna icona da caricare. */
.ff-video__play {
    position: absolute; top: 50%; left: 50%;
    width: clamp(62px, 7vw, 88px); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--sage);
    display: grid; place-items: center;
    transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.ff-video__play::after {
    content: '';
    border-style: solid;
    border-width: .55em 0 .55em .92em;
    border-color: transparent transparent transparent var(--ink);
    font-size: clamp(16px, 1.8vw, 22px);
    margin-left: .22em;
}
.ff-video__btn:hover .ff-video__play { transform: translate(-50%, -50%) scale(1.1); }
.ff-video__btn:focus-visible .ff-video__play { background: var(--cream); }

/* A player attivo il pulsante lascia il posto all'iframe. */
.ff-video__btn.is-playing { cursor: default; }
.ff-video__btn iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.ff-video__caption {
    display: grid; gap: .35rem; padding-top: 1.1rem;
}
.ff-video__title {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500;
}
.ff-video__desc { font-size: .95rem; color: var(--ink-2); max-width: 58ch; }
.ff-video__credit {
    font-size: .82rem; letter-spacing: .04em; color: var(--ink-2); opacity: .8;
}
.ff-video__consent {
    font-size: .78rem; line-height: 1.5; color: var(--ink-2);
    max-width: 52ch; margin-top: .35rem;
}
.ff-video__consent a { text-decoration: underline; text-underline-offset: .2em; }
.ff-video__consent a:hover { color: var(--sage-deep); }
.ff-section--dark .ff-video__consent { color: rgba(239, 235, 224, .62); }
.ff-section--dark .ff-video__consent a:hover { color: var(--sage); }
.ff-section--dark .ff-video__title { color: var(--cream); }
.ff-section--dark .ff-video__desc { color: rgba(239, 235, 224, .72); }
.ff-section--dark .ff-video__credit { color: rgba(239, 235, 224, .5); opacity: 1; }

/* ------------------------------------------------------- 19. CTA FINALE */

.ff-cta {
    position: relative; overflow: hidden;
    min-height: clamp(520px, 80vh, 840px);
    display: grid; align-items: center;
    isolation: isolate;
}
.ff-cta__bg { position: absolute; inset: 0; z-index: -2; }
.ff-cta__bg .ff-photo, .ff-cta__bg .ff-photo__frame { height: 100%; }
.ff-cta__bg .ff-photo__frame { aspect-ratio: auto; }
/* La velatura deve garantire il contrasto anche quando la fotografia sotto è
   chiarissima — un cielo di montagna, un abito bianco in pieno sole. Con la
   copertura precedente il testo scendeva sotto 3,3:1 su quei soggetti; qui
   resta sopra 5,5:1 anche nel caso peggiore di un fondo bianco. */
.ff-cta::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg,
        rgba(22, 22, 15, .88) 0%,
        rgba(22, 22, 15, .70) 40%,
        rgba(22, 22, 15, .30) 78%,
        rgba(22, 22, 15, .15) 100%);
}
.ff-cta__inner { color: var(--cream); max-width: 44ch; }
.ff-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.ff-cta .ff-link { color: var(--cream); }
.ff-cta .ff-link::after { background: var(--sage); }
.ff-cta__title,
.ff-cta__inner > h2 { font-size: clamp(2.2rem, 5.4vw, 5rem); margin-bottom: 1.4rem; font-weight: 300; }
.ff-cta__text,
.ff-cta__inner > p { color: rgba(239, 235, 224, .8); margin-bottom: 2.4rem; }
.ff-cta .ff-btn { border-color: rgba(239, 235, 224, .5); color: var(--cream); }
.ff-cta .ff-btn::before { background: var(--sage); }
.ff-cta .ff-btn:hover { color: var(--ink); border-color: var(--sage); }

/* --------------------------------------------------------- 20. CONTATTI */

.ff-contact__grid { align-items: start; }
.ff-contact__main { grid-column: 1 / span 6; }
.ff-contact__side { grid-column: 8 / span 5; }
.ff-contact__big {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-size: clamp(1.5rem, 3.2vw, 2.7rem);
    font-weight: 400; letter-spacing: -.025em; line-height: 1.1;
    padding: 1.4rem 0; border-bottom: 1px solid var(--line);
    position: relative; transition: color .4s var(--ease), padding-left .5s var(--ease-out);
}
.ff-contact__big:hover { color: var(--sage-deep); padding-left: 1rem; }
.ff-contact__kicker {
    display: block; font-family: var(--font-sans);
    font-size: .7rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem;
}

.ff-form { display: grid; gap: 1.4rem; }
.ff-field { display: grid; gap: .5rem; }
.ff-field label {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.ff-field input, .ff-field textarea, .ff-field select {
    font: inherit; font-size: 1rem; color: var(--ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--line);
    padding: .8rem 0; border-radius: 0;
    transition: border-color .4s var(--ease);
}
.ff-field input:focus, .ff-field textarea:focus, .ff-field select:focus {
    outline: 0; border-bottom-color: var(--sage-deep);
}
.ff-field textarea { resize: vertical; min-height: 130px; }
.ff-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.ff-form__note { font-size: .78rem; color: var(--ink-2); }

/* ------------------------------------------------------------ 21. FOOTER */

.ff-footer { background: var(--black); color: var(--cream); }
.ff-footer__top { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.ff-footer__grid {
    display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) var(--gap);
    grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
}
.ff-footer__motto {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'SOFT' 90, 'WONK' 1;
    font-size: clamp(1.7rem, 3vw, 2.9rem);
    line-height: 1.08; letter-spacing: -.028em; font-weight: 300;
    margin-bottom: 1.5rem;
}
.ff-footer__sig { font-size: .86rem; color: rgba(239, 235, 224, .58); max-width: 34ch; }
.ff-footer__title {
    font-family: var(--font-sans);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--sage); margin: 0 0 1.4rem;
}
.ff-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ff-footer__col a {
    font-size: .92rem; color: rgba(239, 235, 224, .74);
    transition: color .3s var(--ease);
}
.ff-footer__col a:hover { color: var(--sage); }
.ff-footer__contact address { font-style: normal; display: grid; }
.ff-footer__big {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: 1.1rem !important; color: var(--cream) !important;
    padding: .3rem 0;
}
.ff-footer__big:hover { color: var(--sage) !important; }
.ff-footer__addr {
    font-size: .9rem; color: rgba(239, 235, 224, .58); margin-top: .8rem; line-height: 1.5;
}
.ff-footer__social { margin-top: 1.6rem !important; }

.ff-footer__areas {
    border-top: 1px solid rgba(239, 235, 224, .12);
    padding-block: clamp(2rem, 4vw, 3rem);
}
.ff-areas {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: clamp(.95rem, 1.5vw, 1.2rem);
    color: rgba(239, 235, 224, .62);
}
.ff-areas__sep { color: var(--sage); }

.ff-footer__legal {
    border-top: 1px solid rgba(239, 235, 224, .12);
    padding-block: 1.6rem;
    font-size: .84rem; color: rgba(239, 235, 224, .5);
}
.ff-footer__legalrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.ff-footer__legal p { margin: 0; }
.ff-totop { color: rgba(239, 235, 224, .7); transition: color .3s var(--ease); }
.ff-totop:hover { color: var(--sage); }
.ff-footer__by a { color: rgba(239, 235, 224, .7); transition: color .3s var(--ease); }
.ff-footer__by a:hover { color: var(--sage); }

/* --------------------------------------------------------- 22. BREADCRUMB */

.ff-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    list-style: none; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0;
    font-size: .74rem; letter-spacing: .08em; color: var(--ink-2);
}
.ff-crumbs a:hover { color: var(--sage-deep); }
.ff-crumbs li:not(:last-child)::after { content: '/'; margin-left: .5rem; color: var(--sage-deep); }
.ff-crumbs [aria-current] { color: var(--ink); }

/* -------------------------------------------------- 23. TESTATA INTERNA */

.ff-pagehead {
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ff-pagehead__title { grid-column: 1 / span 8; margin-bottom: 1.6rem; }
.ff-pagehead__lead  { grid-column: 1 / span 6; }


/* Il contenitore unico dell'apertura pagina.
   ACF ammette una sola area InnerBlocks per blocco, quindi occhiello, titolo
   e testo di presentazione stanno in un contenitore solo. display:contents lo
   toglie dal flusso lasciando i figli come elementi della griglia, cosi' le
   colonne restano quelle di sopra e il risultato a video e' identico. */
.ff-pagehead__body { display: contents; }
/* Le distanze verticali le fanno i margini, come nel mockup: senza
   questo la griglia aggiungerebbe il proprio gap fra occhiello, titolo,
   testo e bottone, che li' erano raccolti in due soli contenitori. */
.ff-pagehead .ff-grid { row-gap: 0; }
/* Le distanze verticali qui sono misurate sul mockup, non stimate.
   Diventando elementi della griglia questi tre elementi perdono due
   comportamenti del flusso normale su cui il mockup contava:

   1. l'occhiello tiene il suo margine naturale di 1.6rem, che nella
      griglia produce la stessa distanza del mockup: verificato a font
      caricati, -4px in entrambi.

   2. fra paragrafo e bottone i margini adiacenti si FONDEVANO al maggiore
      dei due (32px); nella griglia non si fondono e si sommavano a 62px.

   Il margine sotto il titolo e' .67em perche' e' quello che il browser
   applica di suo agli h1 nel mockup, dove nessuno lo sovrascrive: 92px a
   questa dimensione, e scala insieme al corpo del testo. */
.ff-pagehead__body > .ff-label { grid-column: 1 / span 8; }
.ff-pagehead__body > h1        { grid-column: 1 / span 8; margin-bottom: .67em; }
.ff-pagehead__body > p:not(.ff-label) { grid-column: 1 / span 6; margin-bottom: 0; }
/* Il margine negativo riproduce un comportamento del mockup: li' il bottone
 sborda dal proprio contenitore e mangia 30px del respiro inferiore della
 sezione, che infatti misura 26px sotto il bottone invece dei 56 di padding.
 Nella griglia non sborda, e senza questo la sezione risulterebbe 30px piu'
 alta del mockup. */
.ff-pagehead__actions          { grid-column: 1 / span 6; margin-top: 2rem;
                                 margin-bottom: -30px;
                                 display: flex; flex-wrap: wrap; gap: 1rem; }

/* Il banner sotto l'apertura di pagina non ha respiro sopra: nel mockup era
   uno style inline sulla sezione, qui e' una regola vera. */
.ff-pagehead + .ff-section--tight { padding-top: 0; }

/* ------------------------------------------------------------ 24. LIGHTBOX */

.ff-lightbox {
    position: fixed; inset: 0; z-index: 800;
    background: rgba(22, 22, 15, .96);
    display: grid; place-items: center;
    padding: clamp(3rem, 8vh, 6rem) clamp(1rem, 6vw, 6rem);
    opacity: 0; transition: opacity .45s var(--ease);
}
.ff-lightbox[hidden] { display: none; }
.ff-lightbox.is-open { opacity: 1; }
.ff-lightbox__figure { margin: 0; max-height: 100%; display: grid; gap: 1rem; }
.ff-lightbox__figure img {
    max-height: min(78vh, 1000px); width: auto; max-width: 100%;
    margin-inline: auto; object-fit: contain;
    opacity: 0; transform: scale(.97);
    transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.ff-lightbox.is-loaded .ff-lightbox__figure img { opacity: 1; transform: none; }
.ff-lightbox figcaption {
    text-align: center; color: rgba(239, 235, 224, .66);
    font-size: .82rem; max-width: 60ch; margin-inline: auto;
}
.ff-lightbox__close, .ff-lightbox__nav {
    position: absolute; background: none; border: 0; cursor: pointer;
    width: 56px; height: 56px; color: var(--cream);
    transition: color .3s var(--ease), transform .4s var(--ease-out);
}
.ff-lightbox__close { top: clamp(.8rem, 3vh, 2rem); right: clamp(.8rem, 3vw, 2.5rem); }
.ff-lightbox__close span, .ff-lightbox__close span::after {
    position: absolute; top: 50%; left: 25%; width: 50%; height: 1.5px;
    background: currentColor; transform: rotate(45deg);
}
.ff-lightbox__close span::after { content: ''; top: 0; left: 0; width: 100%; transform: rotate(-90deg); }
.ff-lightbox__close:hover { color: var(--sage); transform: rotate(90deg); }
.ff-lightbox__nav { top: 50%; margin-top: -28px; }
.ff-lightbox__nav::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
.ff-lightbox__nav--prev { left: clamp(.3rem, 2vw, 2rem); }
.ff-lightbox__nav--prev::before { transform: rotate(45deg); }
.ff-lightbox__nav--next { right: clamp(.3rem, 2vw, 2rem); }
.ff-lightbox__nav--next::before { transform: rotate(-135deg); }
.ff-lightbox__nav:hover { color: var(--sage); }
.ff-lightbox__count {
    position: absolute; bottom: clamp(1rem, 3vh, 2rem); left: 50%;
    transform: translateX(-50%); margin: 0;
    font-size: .74rem; letter-spacing: .18em; color: rgba(239, 235, 224, .5);
}

/* --------------------------------------------------- 25. BLOCCHI TESTUALI */

.ff-split { align-items: center; }
.ff-split__media { grid-column: 1 / span 6; }
.ff-split__body  { grid-column: 8 / span 5; }
.ff-split--flip .ff-split__media { grid-column: 7 / span 6; grid-row: 1; }
.ff-split--flip .ff-split__body  { grid-column: 1 / span 5; grid-row: 1; }

.ff-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ff-related__card {
    display: block; border-top: 1px solid var(--line); padding-top: 1.4rem;
    transition: border-color .5s var(--ease);
}
.ff-related__card:hover { border-color: var(--sage-deep); }
.ff-related__card .ff-photo__frame { --ratio: 4 / 3; margin-bottom: 1.1rem; }
.ff-related__card img { transition: transform 1.1s var(--ease-out); }
.ff-related__card:hover img { transform: scale(1.05); }

/* ---------------------------------------------------- 25b. DIARIO */

.ff-post__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    margin: 0 0 1rem;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.ff-post__cat { color: var(--sage-deep); }
.ff-post__meta > * + *::before {
    content: ''; display: inline-block;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--sage); margin-right: .9rem; vertical-align: middle;
}

/* Articolo in evidenza: fotografia larga e testo che le si appoggia sotto,
   sfalsato, invece della solita colonna a fianco. */
.ff-featured {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    align-items: end;
    margin-bottom: clamp(3.5rem, 8vw, 7rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line);
}
.ff-featured__media { grid-column: 1 / span 7; }
.ff-featured__body  { grid-column: 8 / span 5; }
.ff-featured .ff-photo img { transition: transform 1.1s var(--ease-out); }
.ff-featured:hover .ff-photo img { transform: scale(1.035); }
.ff-featured:hover .ff-link::after { transform: scaleX(0); }

.ff-posts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem) var(--gap);
}
.ff-post__link { display: block; }
.ff-post .ff-photo__frame { margin-bottom: 1.2rem; }
.ff-post .ff-photo img { transition: transform 1.1s var(--ease-out); }
.ff-post__link:hover .ff-photo img { transform: scale(1.05); }
.ff-post__title { margin-bottom: .7rem; transition: color .35s var(--ease); }
.ff-post__link:hover .ff-post__title { color: var(--sage-deep); }
.ff-post__excerpt { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* --- articolo singolo --- */

.ff-article__head { grid-column: 2 / span 8; }

/* La misura di riga resta sotto i 70 caratteri: oltre, l'occhio fatica a
   ritrovare l'inizio della riga successiva. */
.ff-article__body {
    max-width: 68ch;
    margin-inline: auto;
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    line-height: 1.72;
    color: var(--ink);
}
.ff-article__body p { margin-bottom: 1.5em; }
.ff-article__body p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1;
    font-size: 3.6em; line-height: .82;
    padding: .06em .12em 0 0;
    color: var(--sage-deep);
}

.ff-article__sign {
    max-width: 68ch; margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding-top: 2rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.ff-article__avatar { width: 68px; flex: none; border-radius: 50%; overflow: hidden; }
.ff-article__avatar .ff-photo__frame { border-radius: 50%; }
.ff-article__author { font-weight: 600; margin: 0; }
.ff-article__role { font-size: .88rem; color: var(--ink-2); margin: 0; }
.ff-article__sign .ff-link { margin-left: auto; }

/* ------------------------------------------------- 25c. PAGINE LEGALI */

.ff-legal { max-width: 70ch; margin-inline: auto; }
.ff-legal__date {
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-2); margin-top: 1.6rem;
}

.ff-legal p { color: var(--ink-2); line-height: 1.68; }
.ff-legal__foot {
    padding-top: 2rem; border-top: 1px solid var(--line);
    font-size: .95rem;
}
.ff-legal a { text-decoration: underline; text-underline-offset: .2em; }
.ff-legal a:hover { color: var(--sage-deep); }

.ff-footer__legalnav { display: flex; gap: 1.5rem; }
.ff-footer__legalnav a { color: rgba(239, 235, 224, .5); transition: color .3s var(--ease); }
.ff-footer__legalnav a:hover { color: var(--sage); }

/* ------------------------------------------------------------- 26. 404 */

.ff-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; }

/* ========================================================================
   27. RESPONSIVE
   ======================================================================== */

@media (max-width: 1180px) {
    .ff-hero__text  { grid-column: 1 / span 7; }
    .ff-hero__main  { grid-column: 8 / span 5; }
    .ff-hero__aside { display: none; }
    .ff-svc__media, .ff-svc__row:nth-child(even) .ff-svc__media { grid-column: span 6; grid-row: 1; }
    .ff-svc__body,  .ff-svc__row:nth-child(even) .ff-svc__body  { grid-column: span 6; grid-row: 1; }
    .ff-svc__row:nth-child(even) .ff-svc__media { grid-column: 7 / span 6; }
    .ff-svc__row:nth-child(even) .ff-svc__body  { grid-column: 1 / span 6; }
    .ff-step, .ff-step--wide { grid-column: span 6; }
    .ff-footer__grid { grid-template-columns: 1fr 1fr; }
    .ff-manifesto__quote, .ff-manifesto__sign { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
    :root { --header-h: 84px; }

    .ff-nav { display: none; }
    .ff-burger { display: inline-flex; }

    .ff-drawer { grid-template-columns: 1fr; }

    .ff-hero { padding-top: calc(var(--header-h) + 2rem); }
    /* Va sbloccata anche la riga: in versione desktop testo e fotografia
       condividono la riga 1 per sovrapporsi, qui devono impilarsi. */
    .ff-hero__grid { align-items: start; }
    .ff-hero__text { grid-column: 1 / -1; grid-row: auto; margin-bottom: 2.25rem; }
    .ff-hero__main { grid-column: 1 / -1; grid-row: auto; }
    .ff-hero__scroll { display: none; }

    .ff-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem var(--gap); }

    .ff-contact__main, .ff-contact__side { grid-column: 1 / -1; }
    .ff-contact__side { margin-top: 3rem; }

    .ff-pagehead__title, .ff-pagehead__lead { grid-column: 1 / -1; }

    /* Da tablet in giù ogni coppia titolo/testo diventa una pila. */
    .ff-c-title, .ff-c-title-w, .ff-c-title-s,
    .ff-c-label, .ff-c-body, .ff-c-aside, .ff-c-link { grid-column: 1 / -1; }
    .ff-c-body, .ff-c-aside, .ff-c-link { align-self: start; margin-top: 1.4rem; }

    .ff-split__media, .ff-split__body,
    .ff-split--flip .ff-split__media, .ff-split--flip .ff-split__body {
        grid-column: 1 / -1; grid-row: auto;
    }
    .ff-split__body { margin-top: 1.8rem; }

    .ff-mosaic { columns: 2; }

    .ff-related { grid-template-columns: 1fr; }
    .ff-textduo { grid-template-columns: 1fr; }
    .ff-posts { grid-template-columns: 1fr 1fr; }
    .ff-featured__media, .ff-featured__body { grid-column: 1 / -1; }
    .ff-featured__body { margin-top: 1.8rem; }
    .ff-article__head { grid-column: 1 / -1; }
    .ff-cursor { display: none; }

    /* La riga legale ha quattro elementi da quando c'è il credito, e quando i
       quattro non ci stanno più flex ne manda l'ultimo a capo da solo, a
       sinistra: sembra un incidente, non una scelta. Da qui in giù li accoppia
       una griglia a due colonne — © e documenti sopra, credito e torna su
       sotto — e la colonna di destra resta a destra come nella riga intera.
       La riga a quattro regge fino a 840px misurati: il cambio arriva prima
       apposta, allo stesso punto in cui la testata diventa un menu a panino,
       così resta margine se i testi si allungano. */
    .ff-footer__legalrow {
        display: grid; grid-template-columns: auto auto;
        row-gap: .9rem; align-items: baseline;
    }
    .ff-footer__legalrow > :nth-child(2n) { justify-self: end; }
}

@media (max-width: 700px) {
    .ff-svc__media, .ff-svc__body,
    .ff-svc__row:nth-child(even) .ff-svc__media,
    .ff-svc__row:nth-child(even) .ff-svc__body { grid-column: 1 / -1; grid-row: auto; }
    .ff-svc__body { margin-top: 1.6rem; }

    .ff-step, .ff-step--wide { grid-column: 1 / -1; }
    .ff-includes { grid-template-columns: 1fr; }
    .ff-field--split { grid-template-columns: 1fr; }
    .ff-footer__grid { grid-template-columns: 1fr; }
    /* Qui tutto il footer diventa una colonna sola: la riga legale la segue,
       invece di restare l'unica cosa affiancata. */
    .ff-footer__legalrow { grid-template-columns: 1fr; row-gap: .7rem; }
    .ff-footer__legalrow > :nth-child(2n) { justify-self: start; }
    .ff-stats { grid-template-columns: 1fr 1fr; }
    .ff-posts { grid-template-columns: 1fr; }
    .ff-lightbox__nav { width: 44px; height: 44px; }
}

@media (hover: none) {
    .ff-cursor { display: none; }
}

/* ------------------------------------------------- 28. MOVIMENTO RIDOTTO */
/* Chi ha attivato la riduzione del movimento nel sistema operativo riceve
   la stessa pagina, ferma. Nessun contenuto viene nascosto. */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .js [data-reveal="photo"] .ff-photo__frame,
    .js [data-reveal="photo"] .ff-tile__frame { clip-path: none !important; }
    .js [data-reveal="photo"] img { transform: none !important; }
    .js [data-reveal="text"] .ff-word__in { transform: none !important; }
    .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
    .ff-photo img[data-parallax] { height: 100%; top: 0; transform: none !important; }
    .ff-mark { background-size: 100% .42em !important; }
}

/* Senza JavaScript non si nasconde nulla: il sito resta completo, solo
   privo di animazioni. Vale anche per i crawler che non eseguono script. */
.no-js [data-reveal], .no-js [data-reveal-group] > * { opacity: 1; transform: none; }
.no-js .ff-drawer { position: static; }

/* La firma della frase in evidenza sul fondo scuro.
   Nel mockup il colore chiaro era forzato con uno style inline sul
   singolo elemento; senza, la firma eredita --ink-2 e sul nero scende a
   3,0:1, sotto la soglia WCAG AA. E' un difetto che si vede solo
   calcolando il contrasto: a occhio sembra soltanto un grigio discreto. */
.ff-section--dark .ff-manifesto__sign { color: rgba(239, 235, 224, .6); }


/* ==========================================================================
   LE STESSE REGOLE, PER IL CONTENITORE CHE ACF INFILA NELL EDITOR

   In pagina i blocchi di testo sono figli diretti dei nostri contenitori:
   ".ff-split__body > p" li raggiunge. Nell editor no — ACF li avvolge in

       <div class="acf-innerblocks-container block-editor-block-list__layout">

   e il combinatore figlio si ferma li. editor.css toglie quel div dal flusso
   con display:contents, ma display:contents non tocca il DOM, e il
   combinatore figlio guarda il DOM: serve anche il percorso con il div in
   mezzo. Sono queste.

   PERCHE STANNO IN FONDO E NON ACCANTO ALL ORIGINALE

   Il primo tentativo le aveva aggiunte alla lista di selettori di ogni regola,
   riscrivendo il file a meta. Lo script di riscrittura ha spezzato cinque
   nomi di classe su una nuova riga — ".
ff-h3" invece di ".ff-h3" — e in CSS
   un selettore non valido dentro un elenco separato da virgole invalida
   TUTTA la regola. Cinque regole sono sparite in silenzio: il titolo grande
   dei racconti, il grassetto nel testo, il colore su fondo scuro, il titolo
   dell apertura home. La parita non poteva accorgersene: confronta lo
   scheletro HTML, non il CSS.

   In fondo al file l aggiunta e per costruzione innocua: se sbaglia, sbaglia
   solo se stessa. Vengono dopo, quindi a parita di specificita vincono loro,
   e in pagina non corrispondono a niente perche il div non esiste.

   NON SI SCRIVONO A MANO: si rigenerano, e check-editor.php verifica che ce
   ne sia una per ogni regola che la richiede.
   ========================================================================== */

.ff-pagehead__body > .acf-innerblocks-container > h1 {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-weight: 300;
    line-height: .92;
    letter-spacing: -.03em;
    font-size: clamp(3rem, 8.4vw, 8.5rem);
    
}

.ff-split__body > .acf-innerblocks-container > h2:not([class*="ff-h"]) {
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 1.06;
    
}

.ff-split__body > .acf-innerblocks-container > h2 {
    margin-bottom: 1.3rem;
    
}

.ff-split__body > .acf-innerblocks-container > .ff-label + h2 {
    margin-bottom: 1.5rem;
    
}

.ff-pagehead__body > .acf-innerblocks-container > p:not(.ff-label),
.ff-hero__text > .acf-innerblocks-container > p:not(.ff-label) {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: clamp(1.2rem, 1.9vw, 1.65rem);
    line-height: 1.42;
    letter-spacing: -.01em;
    color: var(--ink);
    max-width: 46ch;
    
}

.ff-split__body > .acf-innerblocks-container > p:not(.ff-label) {
    color: var(--ink-2);
    max-width: 62ch;
    
}

.ff-split__body > .acf-innerblocks-container > p:not(.ff-label) strong {
    color: var(--ink);
    font-weight: 600;
    
}

.ff-section--dark .ff-split__body > .acf-innerblocks-container > p:not(.ff-label) {
    color: rgba(239, 235, 224, .72);
    
}

.ff-split__body > .acf-innerblocks-container > p:not(.ff-label) {
    margin-bottom: 1.4rem;
    
}

.ff-split__body > .acf-innerblocks-container > p:not(.ff-label):last-child {
    margin-bottom: 0;
    
}

.ff-split__body > .acf-innerblocks-container > p:not(.ff-label):has(+ .ff-link) {
    margin-bottom: 2rem;
    
}

.ff-manifesto__quote > .acf-innerblocks-container > p {
    font: inherit;
    color: inherit;
    margin: 0;
    max-width: none;
    
}

.ff-c-body > .acf-innerblocks-container > p {
    color: var(--ink-2);
    max-width: 62ch;
    
}

.ff-c-body > .acf-innerblocks-container > p + p {
    margin-top: 1.2rem;
    
}

.ff-c-body > .acf-innerblocks-container > p strong {
    color: var(--ink);
    font-weight: 600;
    
}

.ff-hero__text > .acf-innerblocks-container > h1 {
    font-size: clamp(2.8rem, 6.4vw, 6.8rem);
    line-height: .93;
    letter-spacing: -.035em;
    font-weight: 300;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    
}

.ff-hero__text > .acf-innerblocks-container > h1 em {
    font-style: normal;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-weight: 500;
    color: var(--sage-deep);
    
}

.ff-cta__inner > .acf-innerblocks-container > h2 {
    font-size: clamp(2.2rem, 5.4vw, 5rem);
    margin-bottom: 1.4rem;
    font-weight: 300;
    
}

.ff-cta__inner > .acf-innerblocks-container > p {
    color: rgba(239, 235, 224, .8);
    margin-bottom: 2.4rem;
    
}

.ff-pagehead__body > .acf-innerblocks-container > .ff-label {
    grid-column: 1 / span 8;
    
}

.ff-pagehead__body > .acf-innerblocks-container > h1 {
    grid-column: 1 / span 8;
    margin-bottom: .67em;
    
}

.ff-pagehead__body > .acf-innerblocks-container > p:not(.ff-label) {
    grid-column: 1 / span 6;
    margin-bottom: 0;
    
}


/* ==========================================================================
   IL CONTENITORE DEL TITOLO DI SEZIONE ESCE DAL FLUSSO

   .ff-c-title-w teneva insieme occhiello e titolo e li collocava sulle prime
   sette colonne. Era comodo finche' il markup lo scriveva il tema; da quando
   quei due testi li scrive chi pubblica, dentro l'unica area di testo che ACF
   concede per blocco, il contenitore diventa un ostacolo: il paragrafo di
   introduzione gli stava FUORI, e tre elementi in due contenitori diversi non
   possono stare in un'area sola.

   display:contents lo toglie dal flusso senza toglierlo dal DOM: i tre
   elementi tornano figli della griglia e prendono ciascuno la propria
   colonna. E' la stessa cura gia' usata su .ff-pagehead__body.

   LA RIVELAZIONE PASSA SUI FIGLI

   Un elemento display:contents non genera un riquadro, e IntersectionObserver
   guarda i riquadri: data-reveal sul contenitore non scatterebbe mai. Sta sui
   figli, che e' anche piu' fedele — l'occhiello e il titolo compaiono insieme
   come prima, ma ciascuno per conto proprio.
   ========================================================================== */

.ff-c-title-w { display: contents; }

.ff-c-title-w > .ff-label,
.ff-c-title-w > h2,
.ff-c-title-w > .acf-innerblocks-container > .ff-label,
.ff-c-title-w > .acf-innerblocks-container > h2 { grid-column: 1 / span 7; }

/* Il ritmo verticale di prima, ora che i tre elementi sono figli della griglia.
   Diventando elementi di griglia perdono due comportamenti del flusso:
   1. fra occhiello e titolo si aggiungeva il row-gap della griglia (31,68px)
      sopra al margine dell'occhiello, e la distanza passava da 26 a 57px;
   2. l'occhiello e' inline-flex, quindi in flusso stava su una riga di testo
      alta 28px e ne restavano 10 sopra di lui. Da elemento di griglia la sua
      scatola e' alta quanto il contenuto e quei 10px sparivano.
   Misurato prima e dopo: occhiello a 40, titolo a 84, introduzione a 138. */
.ff-grid:has(> .ff-c-title-w) { row-gap: 0; }
/* justify-self perche' l'occhiello e' inline-flex: in flusso la sua scatola
   era larga quanto il testo, da elemento di griglia si stirerebbe a tutta la
   colonna. Non si vede — il testo resta a sinistra — ma la riga salvia che lo
   precede e' agganciata alla scatola, e una scatola larga la sposterebbe. */
.ff-c-title-w > .ff-label { margin-top: 10px; justify-self: start; }


/* .ff-c-title esce dal flusso come .ff-c-title-w: occhiello, titolo e il testo
   che li accompagna devono essere tutti e tre figli della griglia, ciascuno
   nella propria colonna, per stare in un'unica area di testo.

   Le tre correzioni di ritmo sono quelle gia' misurate: il row-gap non si
   somma al margine dell'occhiello, l'occhiello riprende i 10px che in flusso
   gli dava la riga di testo, e nessuno dei due si stira all'altezza della riga. */
.ff-c-title { display: contents; }

.ff-c-title > .ff-label,
.ff-c-title > h2,
.ff-c-title > .acf-innerblocks-container > .ff-label,
.ff-c-title > .acf-innerblocks-container > h2 { grid-column: 1 / span 6; }

.ff-grid:has(> .ff-c-title) { row-gap: 0; }

.ff-c-title > .ff-label,
.ff-c-title > .acf-innerblocks-container > .ff-label { margin-top: 10px; justify-self: start; }

.ff-c-title > .ff-label,
.ff-c-title > h2,
.ff-c-title > .acf-innerblocks-container > .ff-label,
.ff-c-title > .acf-innerblocks-container > h2,
.ff-c-title-w > .ff-label,
.ff-c-title-w > h2,
.ff-c-title-w > .acf-innerblocks-container > .ff-label,
.ff-c-title-w > .acf-innerblocks-container > h2 { align-self: start; }
/* Il testo affiancato copre le due righe del titolo.

   Ha align-self:end, cioe' si appoggia al fondo della propria riga. Finche'
   occhiello e titolo stavano in un contenitore solo, quella riga era alta
   quanto i due messi insieme e il fondo coincideva col fondo del titolo. Ora
   che sono due righe distinte, il paragrafo cadeva nella seconda e si
   appoggiava a quella: quindici pixel piu' in basso, su una sezione sola —
   quella dello showreel, l'unica dove il paragrafo e' piu' alto del titolo.

   Dichiarargli le due righe gli restituisce il fondo di prima. */
.ff-c-title > .ff-c-aside,
.ff-c-title > .ff-c-link,
.ff-c-title > .acf-innerblocks-container > .ff-c-aside,
.ff-c-title > .acf-innerblocks-container > .ff-c-link,
.ff-c-title-w > .ff-c-aside,
.ff-c-title-w > .ff-c-link,
.ff-c-title-w > .acf-innerblocks-container > .ff-c-aside,
.ff-c-title-w > .acf-innerblocks-container > .ff-c-link { grid-row: 1 / span 2; }


/* La citazione e la firma sono due testi scritti nella pagina, quindi devono
   stare nella stessa area — e ACF ne concede una sola per blocco. Il
   <blockquote> esce dal flusso e la sua tipografia passa al paragrafo che
   contiene: i due diventano figli della griglia, ciascuno con la sua colonna.

   Il <blockquote> resta nel markup perche' e' l'elemento giusto per una
   citazione: quello che perde e' solo la scatola. */
.ff-manifesto__quote { display: contents; }

.ff-manifesto__quote > p:not(.ff-manifesto__sign),
.ff-manifesto__quote > .acf-innerblocks-container > p:not(.ff-manifesto__sign) {
    grid-column: 2 / span 9;
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-size: clamp(1.7rem, 3.6vw, 3.4rem);
    line-height: 1.14;
    letter-spacing: -.022em;
    font-weight: 300;
    color: inherit;
    max-width: none;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
/* La firma tiene il suo margine inferiore anche da ultimo figlio.

   Entrando nel blockquote e' diventata l'ultimo paragrafo del suo contenitore,
   e la regola che azzera il margine dell'ultimo paragrafo gliel'ha tolto:
   quattordici pixel
   che tiravano su di altrettanto il blocco delle cifre. Prima era un fratello
   del blockquote e di paragrafi dopo di lei ce n'erano. */
.ff-manifesto__quote > .ff-manifesto__sign,
.ff-manifesto__quote > .acf-innerblocks-container > .ff-manifesto__sign { margin-bottom: 1.15em; }


/* ==========================================================================
   LE SEZIONI DI UN DOCUMENTO LEGALE SI NUMERANO DA SOLE

   Prima ogni sezione era un <section> con dentro un <h2> e uno <span> col
   numero, perche' il numero lo scriveva il template contando le voci di un
   ripetitore. Ora il documento si scrive di seguito, come un documento: solo
   titoli e paragrafi.

   Il numero lo mette un contatore. Chi scrive aggiunge un titolo e il numero
   arriva da se' — anche se ne inserisce uno in mezzo, cosa che con la
   numerazione scritta a mano avrebbe voluto dire rinumerare tutto.

   La riga sopra e il respiro erano del <section>: passano al titolo, che e'
   quello che apre la sezione.
   ========================================================================== */

.ff-legal { counter-reset: ff-sezione; }

.ff-legal > h2,
.ff-legal > .acf-innerblocks-container > h2 {
    counter-increment: ff-sezione;
    display: flex; gap: 1rem; align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 1.1rem;
    font-size: clamp(1.12rem, 1.4vw, 1.35rem);
    line-height: 1.2;
}
.ff-legal > h2::before,
.ff-legal > .acf-innerblocks-container > h2::before {
    content: counter(ff-sezione, decimal-leading-zero);
    font-family: var(--font-sans);
    font-variation-settings: normal;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    color: var(--sage-deep); flex: none;
}

/* L'ultimo paragrafo di una sezione tiene il respiro che prima dava il
   padding inferiore del <section>. */
.ff-legal > p,
.ff-legal > .acf-innerblocks-container > p { margin-bottom: 1.1rem; }
.ff-legal > p:has(+ h2),
.ff-legal > .acf-innerblocks-container > p:has(+ h2) { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.ff-legal > ul,
.ff-legal > ol,
.ff-legal > .acf-innerblocks-container > ul,
.ff-legal > .acf-innerblocks-container > ol { margin: 0 0 1.1rem; padding-left: 1.4em; }
.ff-legal > ul li,
.ff-legal > ol li,
.ff-legal > .acf-innerblocks-container > ul li,
.ff-legal > .acf-innerblocks-container > ol li { color: var(--ink-2); line-height: 1.68; margin-bottom: .4em; }
.ff-legal > ul li::marker,
.ff-legal > ol li::marker,
.ff-legal > .acf-innerblocks-container > ul li::marker,
.ff-legal > .acf-innerblocks-container > ol li::marker { color: var(--sage-deep); }


/* ==========================================================================
   IL CORPO DI UN ARTICOLO

   Fino a ieri qui era vestito solo il paragrafo. Bastava, perche' gli articoli
   importati sono file di paragrafi e nient'altro. Ma il diario si scrive in
   Gutenberg, e chi scrive usa quello che l'editor offre: elenchi, grassetti,
   collegamenti, citazioni, sottotitoli. Senza una regola, tutto quello usciva
   con gli stili di ripiego del browser.

   OGNI REGOLA E' SCRITTA DUE VOLTE, A MANO

   In pagina il corpo sta in .ff-article__body. Nel canvas quel contenitore non
   esiste — il contenuto di un articolo e' il contenuto della richiesta, senza
   involucro — e al suo posto c'e' il body con .editor-styles-wrapper e
   .post-type-post.

   La prima stesura generava la seconda meta' con uno script che riscriveva
   questo file. Ha spezzato i commenti sulle virgole e ha saltato tutte le
   regole scritte su piu' righe: collegamenti e citazioni sono rimasti senza
   stile nell'editor. E' la trappola gia' scritta in CLAUDE.md — le modifiche
   massicce a un foglio di stile si fanno aggiungendo in fondo — in cui sono
   cascato una seconda volta. Scritte a mano non possono divergere di nascosto:
   si vedono.
   ========================================================================== */

/* I sottotitoli dentro un articolo sono h2 e h3: l'h1 e' il titolo del pezzo.
   Sopra respirano il doppio di quanto respirano sotto — e' il modo in cui una
   pagina di testo dice «qui comincia un'altra cosa» senza righe orizzontali. */
.ff-article__body h2,
.ff-article__body h3,
.ff-article__body h4,
.editor-styles-wrapper.post-type-post h2,
.editor-styles-wrapper.post-type-post h3,
.editor-styles-wrapper.post-type-post h4 {
    font-family: var(--font-display);
    font-variation-settings: var(--fx-display);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.018em;
    color: var(--ink);
    margin: 2.4em 0 .7em;
}
.ff-article__body h2,
.editor-styles-wrapper.post-type-post h2 { font-size: 1.62em; }
.ff-article__body h3,
.editor-styles-wrapper.post-type-post h3 { font-size: 1.3em; }
.ff-article__body h4,
.editor-styles-wrapper.post-type-post h4 { font-size: 1.1em; }
.ff-article__body > :first-child { margin-top: 0; }

/* Gli elenchi tengono la misura del testo e non si appiccicano al paragrafo
   che li introduce. Il punto e' salvia: e' l'unico posto del corpo articolo
   dove il colore d'accento compare, e non e' testo. */
.ff-article__body ul,
.ff-article__body ol,
.editor-styles-wrapper.post-type-post ul,
.editor-styles-wrapper.post-type-post ol {
    margin: 0 0 1.5em;
    padding-left: 1.4em;
}
.ff-article__body li,
.editor-styles-wrapper.post-type-post li { margin-bottom: .5em; }
.ff-article__body li::marker,
.editor-styles-wrapper.post-type-post li::marker { color: var(--sage-deep); }

/* Il grassetto e' piu' scuro del testo intorno, non piu' nero: il corpo
   dell'articolo e' gia' --ink, e un peso 600 basta a farlo staccare. */
.ff-article__body strong,
.ff-article__body b,
.editor-styles-wrapper.post-type-post strong,
.editor-styles-wrapper.post-type-post b { font-weight: 600; color: var(--ink); }
.ff-article__body em,
.ff-article__body i,
.editor-styles-wrapper.post-type-post em,
.editor-styles-wrapper.post-type-post i { font-style: italic; }

/* I collegamenti dentro il testo devono VEDERSI. Sottolineati in verde scuro,
   con la riga staccata dalla base delle lettere e spessa abbastanza da non
   sparire sul crema. Il verde chiaro come testo non si usa mai: 1,4:1. */
.ff-article__body a,
.editor-styles-wrapper.post-type-post a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-decoration-color: var(--sage-deep);
    text-decoration-thickness: 1.5px;
    text-underline-offset: .2em;
    font-weight: 500;
    transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.ff-article__body a:hover,
.editor-styles-wrapper.post-type-post a:hover {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

/* La citazione non e' un paragrafo rientrato: e' un cambio di voce. Serif,
   piu' grande, con la riga salvia a sinistra che la tiene. */
.ff-article__body blockquote,
.editor-styles-wrapper.post-type-post blockquote {
    margin: 2em 0;
    padding-left: 1.4em;
    border-left: 2px solid var(--sage);
    font-family: var(--font-display);
    font-variation-settings: var(--fx-text);
    font-size: 1.18em;
    line-height: 1.42;
    color: var(--ink);
}
.ff-article__body blockquote p,
.editor-styles-wrapper.post-type-post blockquote p { margin-bottom: .6em; }
.ff-article__body blockquote p:last-child,
.editor-styles-wrapper.post-type-post blockquote p:last-child { margin-bottom: 0; }
.ff-article__body blockquote cite,
.editor-styles-wrapper.post-type-post blockquote cite {
    display: block;
    font-family: var(--font-sans);
    font-size: .72em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-style: normal;
    margin-top: .8em;
}

.ff-article__body figure,
.editor-styles-wrapper.post-type-post figure { margin: 2.4em 0; }
.ff-article__body img,
.editor-styles-wrapper.post-type-post img { max-width: 100%; height: auto; }
.ff-article__body figcaption,
.editor-styles-wrapper.post-type-post figcaption {
    font-size: .82em;
    color: var(--ink-2);
    margin-top: .7em;
    line-height: 1.5;
}

.ff-article__body hr,
.editor-styles-wrapper.post-type-post hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.6em 0;
}


/* ---------------------------------------------------- 27. MODULO DEL PLUGIN

   Il modulo esce da Formidable con la sua marcatura. Il suo foglio di stile
   e' spento in tutto il sito, quindi qui non si sovrascrive niente: si veste
   da zero, con lo stesso aspetto dei campi disegnati a mano — etichetta
   piccola in maiuscoletto, campo senza cornice, una riga sotto.

   Il bottone non compare in questo capitolo perche' non ne ha bisogno: il
   modulo lo emette gia' con le classi ff-btn del resto del sito.

   Se Iride aggiunge un campo dal pannello, il campo nuovo eredita tutto
   quello che sta qui sotto senza che nessuno debba tornarci. E' il motivo
   per cui si veste la marcatura del plugin invece di sostituirla. */

/* LE TRE REGOLE DI SERVIZIO CHE IL PLUGIN DAVA PER SCONTATE.

   Spegnendo il suo foglio si spegne anche quello che ci teneva nascosto:
   sono uscite in pagina la legenda per chi legge con la voce — «Richiesta di
   un servizio», stampata sopra il primo campo — e il campo trappola
   dell'antispam, con la sua etichetta «se sei un essere umano, lascia questo
   campo vuoto». Il campo trappola lo abbiamo risolto all'origine, mettendo a
   «none» l'impostazione del plugin, che allora lo nasconde scrivendolo
   nell'elemento. La legenda no: quella sta qui.

   Nascosta agli occhi ma non alla voce, che e' tutto il suo scopo: display
   none la toglierebbe anche a chi ne ha bisogno. */
.ff-form--frm .frm_screen_reader {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden;
    word-wrap: normal;
}

.ff-form--frm .frm_hidden,
.ff-form--frm input.frm_hidden { display: none; }

.ff-form--frm .frm_none_container .frm_primary_label { display: none; }

.ff-form--frm fieldset {
    border: 0; margin: 0; padding: 0; min-width: 0;
}

.ff-form--frm .frm_fields_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

/* Ogni campo prende tutta la riga: le due colonne servono solo alle coppie
   affiancate, che sono l'eccezione. */
.ff-form--frm .frm_form_field {
    display: grid; gap: .5rem;
    align-content: start;
    grid-column: 1 / -1;
    margin: 0;
}

.ff-form--frm .frm_half { grid-column: span 1; }

.ff-form--frm .frm_primary_label {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
    margin: 0;
}

/* L'asterisco degli obbligatori: verde scuro, che sul crema fa 5,3 a 1. Il
   rosso di serie non e' nella tavolozza del sito e non serve a niente, visto
   che l'informazione la porta gia' aria-required. */
.ff-form--frm .frm_required { color: var(--sage-deep); }

.ff-form--frm input[type="text"],
.ff-form--frm input[type="email"],
.ff-form--frm input[type="tel"],
.ff-form--frm input[type="url"],
.ff-form--frm input[type="number"],
.ff-form--frm input[type="date"],
.ff-form--frm textarea,
.ff-form--frm select {
    font: inherit; font-size: 1rem; color: var(--ink);
    background: transparent;
    border: 0; border-bottom: 1px solid var(--line);
    padding: .8rem 0;
    border-radius: 0;
    width: 100%;
    transition: border-color .4s var(--ease);
}

.ff-form--frm input:focus,
.ff-form--frm textarea:focus,
.ff-form--frm select:focus {
    outline: 0; border-bottom-color: var(--sage-deep);
}

.ff-form--frm textarea { resize: vertical; min-height: 130px; }

.ff-form--frm .frm_description {
    font-size: .78rem; color: var(--ink-2);
}

/* Il consenso: casella e testo su una riga, e il testo torna leggibile —
   l'etichetta di gruppo qui sopra e' in maiuscoletto, questa e' una frase da
   leggere. */
.ff-form--frm .frm_opt_container { display: grid; gap: .6rem; }

.ff-form--frm .frm_checkbox label,
.ff-form--frm .frm_radio label {
    display: flex; gap: .8rem; align-items: flex-start;
    font-size: .85rem; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--ink-2);
    line-height: 1.5;
}

.ff-form--frm .frm_checkbox input,
.ff-form--frm .frm_radio input {
    width: auto; flex: none; margin-top: .28rem;
    accent-color: var(--sage-deep);
}

/* Gli errori. Il rosso e' l'unico colore fuori tavolozza del sito, e sta qui
   perche' un errore che non si distingue non e' un errore: 6,79 a 1 sul crema
   e 6,25 sul fondo peggiore, calcolati, non scelti a occhio. */
.ff-form--frm .frm_error,
.ff-form--frm .frm_error_style {
    font-size: .8rem; color: #8f2f22;
}

.ff-form--frm .frm_error_style {
    padding: 1rem 1.2rem;
    border-left: 2px solid #8f2f22;
    background: rgba(143, 47, 34, .06);
    grid-column: 1 / -1;
}

.ff-form--frm .frm_blank_field input,
.ff-form--frm .frm_blank_field textarea,
.ff-form--frm .frm_blank_field select {
    border-bottom-color: #8f2f22;
}

.ff-form--frm .frm_submit { margin-top: .6rem; }

/* Il messaggio dopo l'invio prende il posto del modulo: e' la sola cosa che
   resta in pagina, quindi non e' una riga di servizio. */
.frm_message {
    padding: 1.6rem 1.8rem;
    border-left: 2px solid var(--sage-deep);
    background: var(--cream-2);
}
.frm_message p { margin: 0; }

/* Il calendario del campo data. Il plugin lo apre con jQuery, e il suo
   aspetto stava nel foglio che abbiamo spento: senza queste righe uscirebbe
   nudo, con i bordi del browser. */
#ui-datepicker-div {
    background: var(--cream);
    border: 1px solid var(--line);
    padding: .8rem;
    font-family: var(--font-sans);
    font-size: .85rem;
    box-shadow: 0 18px 50px rgba(22, 22, 15, .13);
    z-index: 60;
}
#ui-datepicker-div .ui-datepicker-title {
    text-align: center; font-weight: 600;
    letter-spacing: .04em; padding-bottom: .5rem;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    cursor: pointer; color: var(--sage-deep); padding: 0 .4rem;
}
#ui-datepicker-div th {
    font-size: .68rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
    padding: .3rem 0;
}
#ui-datepicker-div td a,
#ui-datepicker-div td span {
    display: block; padding: .35rem .5rem;
    text-align: center; color: var(--ink); text-decoration: none;
}
#ui-datepicker-div td a:hover { background: var(--sage); }
#ui-datepicker-div .ui-state-active { background: var(--sage-deep); color: var(--cream); }

@media (max-width: 720px) {
    .ff-form--frm .frm_fields_container { grid-template-columns: 1fr; }
    .ff-form--frm .frm_half { grid-column: 1 / -1; }
}