/* ==========================================================================
   Home — la fotografia, una promessa, e poi le sezioni vere del sito.

   IL COMMITTENTE HA CONSEGNATO UN MOCKUP, e la §11 in coda è dove questa pagina
   ci è stata portata: apertura come fascia e non come schermo, scheda di ricerca
   appoggiata sul suo bordo, quattro motivi accanto al testo del pannello, e la
   card degli immobili che diventa quella condivisa da tutto il sito.

   LA GRIGLIA DEGLI IMMOBILI RESTA, e vale la pena scriverlo perché per un giro è
   stato il contrario. docs/DESIGN.md §8 registrava la decisione del proprietario
   che la home non portasse card di immobili — una selezione va scelta a mano ogni
   settimana, e una casa venduta resta in vetrina. Il mockup nuovo la selezione ce
   l'ha, e la chiama «I nostri appartamenti»: la domanda è stata riaperta da chi
   l'aveva chiusa. Quello che si è tolto è la SECONDA card (§3), non la banda.

   Le bande si alternano ancora, ed è la regola che tiene su la pagina: fotografia
   scura → bianco → azzurro pallido → carta → bianco → carta. Due fondi uguali di
   fila, o due fondi diversi che si assomigliano, sono il difetto per cui tre
   direzioni prima di questa sono state scartate.
   ========================================================================== */

/* --------------------------------------------------------------- 1. hero */

/*
    L'APERTURA E' UNA FASCIA, NON UNO SCHERMO — e questo commento descriveva
    ancora la pagina di prima.

    Che cosa diceva: che la home dichiarava `hero-page`, cosi' il guscio toglieva
    lo scalino in cima al corpo e la testata galleggiava sopra la fotografia; e
    che l'altezza (52rem) era tarata perche' il NASTRO DELLE LOCALITA' atterrasse
    sulla piega. Nessuna delle due cose esiste piu': il nastro e' stato tolto, la
    testata e' una fascia bianca opaca e in flusso (site.css §27.7) e
    home.html.twig non dichiara piu' `hero-page` — sta scritto nel suo commento,
    con la ragione.

    Che cos'e' l'apertura adesso: una fotografia alta 34rem con una promessa e un
    bottone sopra, e la scheda di ricerca appoggiata sul suo bordo basso. Quella
    misura, il velo e il riempimento li scrive la §11.1, che e' l'ultima e quindi
    l'unica che comanda. Di questa sezione resta in piedi solo quello che la §11
    non ridichiara: il contenitore, il fotogramma, la deriva lenta della
    fotografia e il segnaposto senza fotografia.
*/
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(94svh, 52rem);
    background: var(--night);
    overflow: hidden;
    isolation: isolate;
}

.hero__frame {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__frame > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slow continuous drift on the opening photograph. It is the one piece of
   motion that runs without being triggered, and it is what makes the first
   screen feel like a film rather than a poster. */
@media (prefers-reduced-motion: no-preference) {
    .hero__frame > img {
        animation: hero-drift 28s ease-in-out infinite alternate;
    }
}

@keyframes hero-drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}

/*
    THE SCRIM: ONE RAMP FROM THE BOTTOM, AND NOTHING ABOVE IT.

    The old single gradient ran from 0.94 at the bottom to 0.28 at the very top. That
    0.28 across the whole upper half is what greyed out a bright photograph: the
    German hero is a beach at five in the afternoon and it came out overcast, which is
    an odd thing to sell a house on this coast with. The photograph is chosen by
    nothing but "most recently published", so the scrim has to work over a dark brick
    wall AND over white sand, and a flat veil cannot do both.

    So: a bottom ramp that protects the text and reaches 0 well before the top, and
    nothing at all above it. The middle and the top of the picture — the part somebody
    actually looks at — are left alone.

    The floating header carries its OWN wash, in site.css §23, and that is not a
    detail of where to put a rule. A wash anchored to the hero cannot protect the
    header, because the header is anchored to `--notice-h` and moves down out of it
    the moment the language notice opens. Measured at 320 in German with the notice
    open: the agency's name read 1.78:1 against a sunlit building and the burger
    1.54:1. The scrim has to belong to the thing that moves.

    Measured: the headline's worst case (its brightest underlying pixel) stays above
    4.5:1 in all three languages, and the mono count above 4.5:1. The numbers are in
    the report; nothing here is by eye.

    No `backdrop-filter` in either layer. Two gradients composite for free; a filter
    over a photograph that drifts continuously does not (site.css §3).
*/
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to top,
            rgba(4, 12, 16, 0.95) 0%,
            rgba(4, 12, 16, 0.86) 22%,
            rgba(4, 12, 16, 0.52) 46%,
            rgba(4, 12, 16, 0.16) 70%,
            rgba(4, 12, 16, 0) 84%
        );
}

/*
    `padding-top` carries the header's own height as well as the breathing room. The
    hero is `align-items: end`, so on a normal screen this padding is never spent —
    it only matters when the caption is taller than the band, which is what a long
    German title on a 320px screen with the language notice open does. Without it the
    first line would slide under the floating brand.
*/
.hero__caption,
.hero > .wrap {
    position: relative;
    padding-top: calc(var(--top-h) + clamp(1.5rem, 5vw, 3rem));
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* (`.hero__eyebrow` stava qui: era il nome dell'agenzia sopra il titolo
   dell'apertura senza fotografia. Il mockup l'apertura la vuole con una promessa
   e basta, e il nome dell'agenzia è nella testata due centimetri più su.) */

/*
    `.hero h1`, NOT `.hero__title`, and the difference was costing the home its
    headline.

    docs/DESIGN.md §15 retires `.hero__title` as a shell class in favour of
    `.hero h1`, and site.css §9 styles the heading under that selector. `.hero h1`
    carries one class and one type, so it weighs 0-1-1; `.hero__title` weighs 0-1-0.
    Source order never enters into it: this file loads second and lost anyway. Four
    declarations here were dead, and the one that mattered was `text-wrap`, because
    site.css sets `text-wrap: initial` on the ground that "the word-by-word split
    does the breaking". It does not — the split wraps each word in an inline-block
    and the browser still chooses the line ends.

    What that cost, measured with the split live:

      en 390   Houses on the Etruscan / Coast          315px over a 78px orphan
      en 1400  Houses on the Etruscan / Coast          734px over 182px, 552px empty
      de 1400  Häuser an der Etruskischen / Küste      857px over 183px, 674px empty
      it 390   Case sulla Costa degli / Etruschi       284px over 112px

    With `balance` the worst rag in any language at any of five widths is 166px and
    every phone width is 72px or less. The class stays on the element in the markup
    because tests/Functional/HomeTest asserts `class="hero__title"`.
*/
.hero h1 {
    font-family: var(--d);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    max-width: 19ch;
    font-variation-settings: 'opsz' 144;
    text-wrap: balance;
}

/* No photograph at all. The opening stays composed on the dark ground — an
   eyebrow, a large title, a rule — instead of showing a hole where a picture
   should be. This is what the agency sees until it uploads. */
.hero--plain {
    min-height: auto;
    /* The header floats over this band too, and there is no body offset under a
       `hero-page` to keep the eyebrow clear of it: the height goes in here. */
    padding-top: calc(var(--top-h) + clamp(2.5rem, 7vw, 5rem));
    padding-bottom: clamp(3.5rem, 9vw, 7rem);
}

.hero--plain::after { display: none; }

.hero--plain h1 { max-width: 24ch; }

/* --------------------------------------------------------------- 2. intro */

.home__intro {
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    line-height: 1.75;
    color: var(--text-2);
}

.home__intro > p:first-child { color: var(--text); }

/* ---------------------------------------------- 3. the selection, on white

   QUI C'ERA UNA SECONDA SCHEDA IMMOBILE, ed è stata tolta: `.featured__*` era la
   card della home — fotografia, località, prezzo, tipologia — mentre il catalogo,
   l'esperienza e la scheda immobile usavano partials/property-card.html.twig.
   Due schede per lo stesso oggetto sono due schede che divergono al primo
   ritocco, ed erano già divergenti: questa non diceva il titolo della casa, non
   diceva quanti ci dormono e su un affitto breve stampava il prezzo di vendita.

   La home adesso include la card condivisa. Quello che le serve per stare in
   piedi senza parts/catalog.css è la §11.4. */

/* ------------------------------------ 4. the section entrances, deep blue */

/* The home's real content. One large photographic block per active category
   with its live count: nothing to choose, nothing that expires. */
.catalogs {
    display: grid;
    gap: 1.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 48rem) {
    .catalogs { grid-template-columns: repeat(2, 1fr); }
}

.catalogs__item { min-width: 0; }

.catalogs__entry {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 15rem;
    padding: 1.75rem;
    border-radius: var(--radius-l);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(150deg, #16414f, #0a1e28);
}

/* The gradient turns blue on hover: the cheapest way to make a whole surface
   feel like a control without putting a border or a button on it. */
.catalogs__entry::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(150deg, var(--blue), var(--blue-3));
    transition: opacity 0.5s var(--e);
}

.catalogs__entry:hover::after { opacity: 1; }
.catalogs__entry:focus-visible { outline: 3px solid var(--blue-4); outline-offset: 3px; }

/*
    `.catalogs__n` IS GONE — the "01" and "02" in the top right corner of the two
    entrance blocks, and it is a removal rather than a repair.

    It was white at 0.42 alpha over the lightest part of an unscrimmed photograph.
    Measured on the rendered pixels: 1.45:1 on the Vendita block (a bright sky) and
    2.75:1 on the Affitti block. Nothing at 1.45:1 is decoration, it is a smudge.

    It could have been rescued by darkening the top of the scrim, and that is the
    trade it was costing: the whole upper third of both photographs held dark for a
    two-character label that repeats nothing. The band already carries its number in
    the header — "02 — Sezioni" — which is the system docs/DESIGN.md §1 describes.
    A second numbering inside it, and a third on each block, is not structure.
*/

.catalogs__body { display: block; }

.catalogs__name {
    display: block;
    font-family: var(--d);
    font-weight: 400;
    font-size: clamp(1.625rem, 3.4vw, 2.375rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
}

.catalogs__count {
    display: block;
    margin-top: 0.625rem;
    font-family: var(--m);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

/* -------------------------------------------- 5. the territory, on paper */

.territory__item { min-width: 0; }

.territory__link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--sh);
    transition: transform 0.4s var(--e), box-shadow 0.4s var(--e);
}

.territory__link:hover { transform: translateY(-0.375rem); box-shadow: var(--sh-2); }
.territory__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.territory__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ph-a);
}

.territory__frame > img,
.territory__frame > .image--missing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--e);
}

.territory__link:hover .territory__frame > img { transform: scale(1.05); }

.territory__body { display: block; padding: 1.125rem 1.25rem 1.25rem; }

.territory__meta {
    display: block;
    font-family: var(--m);
    font-size: 0.65625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.territory__title {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--d);
    font-size: 1.1875rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.territory__summary {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-2);
}

/* -------------------------------------------------------- 6. valuation */

.valuation {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 52rem) {
    .valuation { grid-template-columns: 1fr auto; gap: 3rem; }
}

.valuation__title {
    font-family: var(--d);
    font-weight: 400;
    font-size: clamp(1.625rem, 3.6vw, 2.625rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--heading);
    max-width: 26ch;
    margin: 0;
}

/* The line under a section name, on the two entrance blocks. It is the
   description the agency writes for the catalogue, so the home says what each
   section is instead of only naming it. */
.catalogs__note {
    display: block;
    margin-top: 0.75rem;
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/*
    THE SCRIM WAS UNDER THE PHOTOGRAPH. It is the worst defect this lane found and it
    is pure painting order.

    The gradient was declared as the background of `.catalogs__entry` and the
    photograph is a child at `z-index: -2`. Inside a stacking context the element's
    OWN background paints first and negative-z children paint on top of it — so the
    photograph covered the scrim completely and every word on these two blocks was
    sitting on raw picture. The comment that used to be here said the photograph
    "sits under the gradient, not over it". It did the opposite, and had done since
    the photographs arrived.

    What that measured, on the rendered pixels of the seeded site at 390:

      «Vendita»      2.66:1 mean, 1.29:1 against its brightest pixel
      its note       2.62:1 mean, 1.07:1  — white on white
      «7 IMMOBILI»   3.06:1 mean, 1.21:1
      «4 IMMOBILI»   2.01:1 mean, 1.01:1 against rgb(248,255,255)
      luminance ripple inside the Affitti note's own box: 15.5:1

    These two blocks are, by docs/DESIGN.md §8, the home's real content and the only
    way into the two catalogues from this band.

    The fix is one selector: the scrim moves onto `.catalogs__frame::after`, which is
    inside the frame's own stacking context and therefore paints ABOVE the <img>.
    The hover tint stays on `.catalogs__entry::after` at z-index -1, above the whole
    frame, so it still washes over the photograph.

    The entry keeps its 150deg gradient as its ground: that is what shows when a
    category has no published photograph yet, and it is the only thing that shows.
*/
.catalogs__frame {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    overflow: hidden;
}

.catalogs__frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--e);
}

.catalogs__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(4, 12, 16, 0.94) 0%,
        rgba(4, 12, 16, 0.88) 42%,
        rgba(4, 12, 16, 0.68) 68%,
        rgba(4, 12, 16, 0.42) 88%,
        rgba(4, 12, 16, 0.32) 100%
    );
}

.catalogs__entry:hover .catalogs__frame > img { transform: scale(1.06); }

/* (QUI C'ERA LA VELATURA AZZURRA DELL'HOVER, cinque fermate di
   `rgba(21, 95, 125, …)` e `rgba(28, 123, 161, …)`: il TEAL del disegno
   precedente, scritto a mano e quindi fuori dalla portata della rimappatura dei
   token della §27.1 di site.css. Era anche gia' spenta: la §10 dichiara
   `.catalogs__entry::after { content: none }` e senza `content` lo pseudo-elemento
   non nasce, quindi quelle cinque righe di teal non dipingevano piu' niente da
   quando la lastra scura e' diventata una card chiara. Un colore morto di un
   disegno morto: se ne va invece di aspettare di essere riacceso per sbaglio.) */

@media (min-width: 48rem) {
    .catalogs__entry { min-height: 20rem; }
}

/* ----------------------------------- 7. LE DUE ENTRATE NELL'APERTURA: NON CI SONO PIU'

   QUI C'ERANO `.hero__ways` E `.hero__way*`, ed erano centoquaranta righe: due
   pastiglie sopra la fotografia, «Vendita · 7 immobili» e «Affitti · 4
   immobili», con la freccia, il fondo traslucido senza `backdrop-filter` (la
   misura che lo vietava era in quel commento: una sola pastiglia sfocata sopra
   una fotografia che deriva triplicava la CPU per fotogramma del processo
   grafico, 0,45 → 1,42 ms), e sotto i 640 pixel un pannello di due righe
   separate da un filetto.

   Il markup non le porta piu': nel mockup l'apertura ha UNA promessa e UN
   bottone, e la scelta fra le sezioni la fa la scheda «Dove vuoi cercare»
   (templates/public/home.html.twig §1 e §5). Un foglio che continua a comporre
   elementi che nessuno stampa e' un foglio in cui non si sa piu' che cosa e'
   vivo — e la prossima persona lo legge come istruzioni.

   La misura sul `backdrop-filter` resta valida per chiunque voglia rimettere una
   superficie traslucida sopra questa fotografia: e' scritta qui apposta, perche'
   non si ripaghi due volte.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   §8. THE REFINEMENT PASS — the home, brought up to site.css §24

   site.css §24 gives the shared system an edge, a light source and a typographic
   scale. The home barely uses the shared components: its selection grid, its two
   entrances and its territory grid are three card types of its own, declared in
   this file, and none of them saw a single line of that pass. Left alone they
   would be the three plainest objects on a site that had just stopped being
   plain — which on the home is the whole first impression.

   Everything below is the same four moves, applied to this page's own classes:
   an edge on every surface, a light source on every dark one, a photograph that
   is framed rather than cropped, and type that is set for its size. No new
   colour, no new motion, no markup change.
   ========================================================================== */

/* ---- the opening ---------------------------------------------------------

   The scrim under the headline is measured (§1) and is not touched. What is
   added is a very wide, very soft shadow on the type itself: it cannot lower the
   contrast the measurement recorded — a shadow only ever darkens what is behind
   the glyph — and over the bright half of a photograph it is the difference
   between type lying on a picture and type standing in front of it. */

.hero h1 {
    text-shadow: 0 1px 2px rgba(4, 12, 16, .28), 0 2px 44px rgba(4, 12, 16, .34);
}

/* (La rifinitura delle due entrate — il gradiente, il filetto di luce e la loro
   versione da telefono — stava qui: e' caduta con gli elementi che componeva.
   La §7 dice che cos'erano e perche' non ci sono piu'.) */

/* ---- the two card types --------------------------------------------------

   `.territory__link` is `.card` under another name: same box, same lift, same
   shadow token. (`.featured__link` stava qui accanto e non c'è più: la §3 dice
   perché.) */

.territory__link {
    border-radius: 18px;
    box-shadow: var(--sh), inset 0 0 0 1px var(--edge);
    transition: transform .5s var(--e), box-shadow .5s var(--e);
}

.territory__link:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-2), inset 0 0 0 1px var(--edge-2);
}

/* The joint between the photograph and the caption: a hairline along the bottom
   edge of the frame and 46px of the card's own ground fading up into the
   picture. Without it the caption looks as though it slid out from under a
   picture that has no bottom. */
.territory__frame {
    box-shadow: inset 0 -1px 0 var(--edge);
}

.territory__frame::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 46px;
    pointer-events: none;
    background: linear-gradient(to top, var(--card), color-mix(in srgb, var(--card) 0%, transparent));
    opacity: .5;
}

.territory__body { padding: 1.25rem 1.375rem 1.375rem; }

.territory__title {
    font-size: 1.22rem;
    letter-spacing: -0.022em;
    font-variation-settings: 'opsz' 48;
}



.territory__meta { letter-spacing: 0.17em; }


/* ---- the two entrances, deep blue ---------------------------------------

   docs/DESIGN.md §8 gives these the room the card grid used to have, so they are
   the largest objects on the home after the opening. They were 15rem tall, which
   at 1400px wide makes each one a 660x240 letterbox — the proportion of a banner
   ad, not of a door into a catalogue. The height now scales with the viewport,
   and the block gains the edge every other surface has.

   The scrim, its painting order and the hover tint are §6's, measured on the
   rendered pixels after a real defect, and are not touched. */

.catalogs__entry {
    min-height: clamp(17rem, 26vw, 23rem);
    padding: 2rem;
    background: linear-gradient(150deg, #17475a, #091c25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--sh-2);
}

.catalogs__name {
    font-variation-settings: 'opsz' 120;
    text-shadow: 0 1px 24px rgba(4, 12, 16, .45);
}

.catalogs__note { margin-top: 0.875rem; }

.catalogs__count {
    margin-top: 0.875rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.74);
}

/* ---- the valuation band -------------------------------------------------

   One heading and one button on 64px of deep blue. The heading was set at the
   same optical size as a card title, which is what made a full-width band read
   as an afterthought. */

.valuation { gap: 2rem; }

.valuation__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    letter-spacing: -0.035em;
    font-variation-settings: 'opsz' 132;
    line-height: 1.04;
}

@media (min-width: 52rem) {
    .valuation { gap: 4rem; }
}

/* ==========================================================================
   9. IL BLOCCO DI SEZIONE LEGGE LA PALETTE

   `.catalogs__entry` è il fondo che si vede quando una categoria non ha ancora
   una fotografia — cioè quello che l'agenzia guarda per settimane, e su una
   home l'oggetto più grande della pagina. Era scritto a mano due volte, `#17475a`
   e `#091c25`, e le due tinte non erano nella palette: erano vicine a `--deep` e
   a `--night` senza esserlo.

   Il costo di una tinta scritta a mano si è visto quando i token sono passati al
   verde (site.css §25, poi rientrata): tutta la pagina è diventata calda e questi
   due blocchi sono rimasti azzurri, perché nessun token li raggiungeva. Adesso il
   gradiente è fatto dei due fondi scuri del progetto, e qualunque cosa succeda
   alla palette succede anche qui.
   ========================================================================== */

.catalogs__entry {
    background: linear-gradient(150deg, var(--deep), var(--night));
}

/* ==========================================================================
   10. IL RIDISEGNO DELLA HOME — le sezioni diventano card, la valutazione
       diventa un invito e non una lastra

   L'apertura resta cinematografica: è l'unico posto del sito in cui una
   fotografia a tutto schermo su fondo notte dice qualcosa, e la §8 di
   docs/DESIGN.md è una decisione del proprietario, non uno stile. Quello che
   cambia è tutto il resto della pagina, che era tre bande scure su cinque.
   ========================================================================== */

/* ---------------------------------------------- 10.1 le sezioni come card */

.home__sections { background: var(--paper); }

.catalogs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalogs__item { min-width: 0; }

/*
    UNA CARD ORIZZONTALE: la fotografia a sinistra, quello che si legge a destra.

    La lastra di prima metteva il testo SOPRA la fotografia, quindi il contrasto
    del nome e del conteggio dipendeva da che cosa c'era sotto — e sotto c'è
    qualunque cosa l'agenzia carichi. Qui la fotografia è una fotografia e il
    testo è testo: due mestieri, due superfici.
*/
.catalogs__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    padding: 0.5rem;
    gap: 0;
    border-radius: 18px;
    background: var(--card);
    background-image: none;
    color: var(--text);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
    transition: transform .4s var(--e), box-shadow .4s var(--e);
}

.catalogs__entry:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--edge-2), var(--sh-2);
}

@media (min-width: 46rem) {
    .catalogs__entry {
        grid-template-columns: 15rem minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1.5rem;
    }
}

/* La fotografia perde la velatura nera: non ha più niente da tenere leggibile. */
.catalogs__frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ph-a);
}

@media (min-width: 46rem) {
    .catalogs__frame { aspect-ratio: 4 / 3; }
}

.catalogs__frame > .image,
.catalogs__frame > .ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/*
    LA VELATURA NERA VA TOLTA ESPLICITAMENTE.

    La §6 la dipinge su questo stesso pseudo-elemento — un gradiente da
    rgba(4,12,16,.94) in basso a .32 in cima — perché lì sopra ci andava scritto
    il nome della categoria in bianco. Adesso il nome sta fuori dalla fotografia,
    su un fondo bianco, e la velatura non tiene leggibile più niente: tiene solo
    scura una fotografia. Una regola che dichiara solo `box-shadow` NON la
    sostituisce, la affianca — ed è quello che era successo: tre fotografie quasi
    nere dentro tre card chiare.
*/
.catalogs__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(22, 36, 43, .12);
}

/* La velatura azzurra che la §6 accendeva sull'hover stava sotto l'intera lastra
   (`z-index: -1`) e serviva a far reagire una superficie scura. Sotto una card
   bianca non si vede, e se si vedesse sarebbe una macchia sotto un bordo. */
.catalogs__entry::after { content: none; }

.catalogs__entry:hover .catalogs__frame > .image,
.catalogs__entry:hover .catalogs__frame > img { transform: scale(1.05); }

.catalogs__frame > .image,
.catalogs__frame > img { transition: transform .6s var(--e); }

.catalogs__body {
    display: block;
    min-width: 0;
    padding: 1.125rem 0.75rem 0.75rem;
}

@media (min-width: 46rem) {
    .catalogs__body { padding: 0.5rem 0; }
}

.catalogs__name {
    display: block;
    font-family: var(--d);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.026em;
    font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
    color: var(--heading);
    text-shadow: none;
}

.catalogs__note {
    display: block;
    max-width: 52ch;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-2);
}

/*
    IL CONTO DIVENTA UNA PASTIGLIA, ed è la cosa che decide se uno entra.

    Stava in fondo alla lastra in bianco al 74% sopra una fotografia. Adesso è
    accanto al nome, su un fondo che il progetto sceglie: 6.18:1, misurato, e non
    «dipende dal cielo di quella foto».
*/
.catalogs__count {
    display: inline-flex;
    align-items: center;
    margin-top: 0.875rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    background: var(--icon-box);
    box-shadow: inset 0 0 0 1px var(--edge);
    font-family: var(--m);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-3);
}

/* La freccia: il segno che si entra. Sta a destra su schermo largo e sparisce
   sotto — su un telefono la card è già tutta un bersaglio. */
.catalogs__go {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 0.75rem;
    border-radius: 12px;
    background: var(--icon-box);
    box-shadow: inset 0 0 0 1px var(--edge);
    transition: background .3s var(--e), box-shadow .3s var(--e);
}

@media (min-width: 46rem) {
    .catalogs__go { display: inline-flex; }
}

.catalogs__go svg {
    width: 19px;
    height: 19px;
    stroke: var(--icon-mark);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke .3s var(--e), transform .3s var(--e);
}

.catalogs__entry:hover .catalogs__go {
    background-image: linear-gradient(180deg, var(--fill-top), var(--fill));
    box-shadow: var(--fill-sheen), var(--fill-glow);
}

.catalogs__entry:hover .catalogs__go svg {
    stroke: #fff;
    transform: translateX(2px);
}

/* -------------------------------------- 10.2 la valutazione diventa un invito */

/*
    Era una banda blu profondo alta poco, con un titolo e un bottone: la quarta
    banda scura di una pagina che ne aveva cinque, e l'ultima cosa prima di un
    piè di pagina anch'esso scuro. Due fondi scuri di seguito sono la sola regola
    della §1 che questa pagina stava rompendo.

    Adesso è una card chiara su fondo carta — lo stesso oggetto delle sezioni
    sopra — quindi il piè di pagina torna a essere lo stacco che era.
*/
.valuation__band {
    background: var(--paper);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.valuation {
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--radius-l);
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh);
}

.valuation__title { color: var(--heading); }

/* ==========================================================================
   11. IL MOCKUP DEL COMMITTENTE — la home

   Il committente ha consegnato una schermata della home e una della scheda di un
   appartamento. site.css §27 ha portato il sito al navy su bianco e ha scritto i
   sei pezzi nuovi del disegno; qui c'è quello che di quel disegno appartiene a
   questa pagina sola.

   Che cosa cambia, in una riga: l'apertura smette di essere una lastra alta
   quanto lo schermo con un menu sopra la fotografia e diventa una fascia con una
   PROMESSA e un bottone, con la scheda di ricerca appoggiata sul suo bordo basso;
   il testo del pannello prende un titolo e quattro motivi accanto; la griglia
   degli immobili passa alla card condivisa.

   PERCHÉ IN CODA E NON DENTRO LE SEZIONI DI SOPRA: questo foglio è append-only da
   dieci sezioni, e le §1–§10 restano leggibili con le loro ragioni. Una regola più
   sotto dello stesso peso vince, quindi non c'è niente da cancellare per cambiare
   idea — e, se un giorno il mockup verrà sostituito, questa sezione si toglie in
   blocco.
   ========================================================================== */

/* ------------------------------------------------- 11.1 l'apertura è una fascia

   ERA ALTA QUANTO LO SCHERMO, e adesso non può più esserlo.

   La §1 tarava l'altezza (min(94svh, 52rem)) perché il nastro delle località
   atterrasse sulla piega: il nastro non c'è più, e al suo posto c'è la scheda di
   ricerca, che è l'unica cosa della prima schermata su cui si agisce. Una
   fotografia alta 832 pixel la spingerebbe sotto la piega su ogni portatile —
   cioè si nasconderebbe il modulo per far vedere meglio lo sfondo.

   34rem misurano 544: a 1400x900, con la testata da 88, la scheda di ricerca
   finisce a 600 e sotto restano 300 pixel di «perché sceglierci». Sul telefono
   l'arma dei 62svh la riporta a proporzione della finestra. */
.hero {
    min-height: min(62svh, 34rem);
}

/*
    IL VELO VIENE DA SINISTRA, non dal basso.

    Il testo del mockup sta in alto a sinistra dentro il contenitore, non appoggiato
    al bordo inferiore: la rampa dal basso della §1 proteggeva il punto sbagliato e
    lasciava il titolo sopra qualunque cosa ci fosse nella fotografia.

    Due rampe e non una: quella da sinistra tiene il titolo, quella dal basso tiene
    il bordo su cui si appoggia la scheda di ricerca — bianca su una fotografia
    chiara, altrimenti, la scheda non avrebbe nessun bordo da cui staccarsi.

    I valori sono gli stessi della §1 (0.95 al massimo): la fotografia la sceglie
    l'agenzia e può essere una spiaggia a mezzogiorno, quindi il velo deve reggere
    il caso peggiore, non quello medio.
*/
/*
    IL VELO, MISURATO INVECE CHE STIMATO.

    La prima versione di questa rampa scendeva a 0.62 al 34% e a 0.18 al 62%.
    Misurata sul caso peggiore — una fotografia bianca, cioe' una spiaggia a
    mezzogiorno — il bianco del titolo cadeva a **2,48:1** sul pixel piu' chiaro,
    contro il minimo di 4,5. Il sottotitolo a 4,28. Non era un rischio teorico: il
    titolo finisce al 49% della larghezza, che e' esattamente dove la rampa vecchia
    era gia' scesa sotto 0.40.

    COME SI E' RICALCOLATA. Perche' il bianco regga 4,5:1 sopra una fotografia
    bianca serve un velo di almeno 0.60 di opacita'; il testo arriva al 49%, quindi
    la rampa deve tenersi sopra 0.60 fino a li' e puo' cadere dopo. I nuovi punti
    la tengono a 0.65 al 49% e la lasciano sparire all'88%, dove non c'e' piu'
    niente da leggere e la fotografia deve tornare a essere una fotografia.

    Rimisurato dopo, sullo stesso caso peggiore: titolo 5,56:1 nel punto piu'
    chiaro, sottotitolo 6,68:1, bottone 9,29:1.
*/
.hero::after {
    background:
        linear-gradient(
            to right,
            rgba(12, 26, 44, 0.80) 0%,
            rgba(12, 26, 44, 0.74) 28%,
            rgba(12, 26, 44, 0.64) 52%,
            rgba(12, 26, 44, 0.26) 70%,
            rgba(12, 26, 44, 0) 88%
        ),
        linear-gradient(
            to top,
            rgba(12, 26, 44, 0.55) 0%,
            rgba(12, 26, 44, 0.18) 26%,
            rgba(12, 26, 44, 0) 52%
        );
}

/*
    LA TESTATA NON GALLEGGIA PIÙ (site.css §27.7): è una fascia bianca piena, in
    flusso, e la fotografia comincia sotto. Il riempimento che teneva il titolo
    lontano da un menu sovrapposto non ha più niente da evitare, ed erano 88 pixel
    presi al centro dell'immagine.

    Il riempimento in basso invece cresce: la scheda di ricerca sale di 3.5rem sopra
    questo bordo, e senza spazio coprirebbe il bottone.
*/
.hero__caption,
.hero > .wrap {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* Il mockup ha un H1 fra 56 e 64 pixel. La §9 di site.css arriva a 89.6 (5.6rem),
   che su una fascia alta 544 è metà fotografia. */
.hero h1 {
    font-size: clamp(2.125rem, 4.4vw, 3.75rem);
    max-width: 18ch;
}

.hero__cta {
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* Senza fotografia l'apertura resta composta sul fondo scuro, e si tiene
   l'altezza del suo contenuto: `min-height` serve a non tagliare una fotografia,
   e qui non c'è niente da non tagliare. Va ridichiarata perché la regola della
   §1 (`min-height: auto`) sta sopra a quella della fascia qui accanto e pesa
   uguale: senza questa riga il segnaposto diventerebbe una lastra scura alta 544
   pixel con tre righe di testo appoggiate in fondo. */
.hero--plain {
    min-height: auto;
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* ------------------------------------------- 11.2 la scheda di ricerca sospesa

   `.sbox--float` (site.css §27.5.1) sale di 3.5rem con un margine negativo: il
   contenitore che la porta deve stare SOPRA la fotografia nell'ordine di
   impilamento, altrimenti l'ombra della scheda finisce sotto il velo dell'hero.
   La fascia non crea un contesto proprio — `isolation: isolate` isola i figli
   dell'hero, non i suoi fratelli — quindi basta un z-index qui. */
.sbox__hold {
    position: relative;
    z-index: 3;
}

/* ------------------------------------------------- 11.3 perché sceglierci

   Due colonne: a sinistra quello che scrive l'agenzia, a destra quattro motivi
   che non cambiano mai. Sotto i 64rem diventano una colonna sola, con i motivi
   due per riga — quattro colonne su un tablet sono quattro colonne da 90 pixel. */
.why__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 64rem) {
    .why__in { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
}

/*
    I MOTIVI TORNANO DUE PER RIGA MOLTO PRIMA DI 64rem, e il numero qui sopra dice
    perche'.

    La soglia era 63.99rem, cioe' esattamente il punto in cui la colonna di destra
    NASCE: da 64rem in su i quattro motivi si stringono dentro quello che avanza
    accanto alle 23rem del testo, e quello che avanza a 1024 sono 527 pixel.
    Misurato a 1024: quattro colonne da **114 pixel**, con la didascalia mandata a
    **5 e 6 righe** di una quindicina di caratteri l'una e il blocco alto 222 contro
    i 149 di 1440. E' il difetto che questo commento diceva di aver evitato —
    «quattro colonne su un tablet sono quattro colonne da 90 pixel» — spostato di
    un pixel piu' in la'.

    81.25rem (1300) e' la larghezza a cui le quattro colonne tornano a valere 180
    pixel, cioe' la misura a cui la didascalia sta in tre o quattro righe come a
    1440. Sotto, due per riga: a 1024 fanno 251 pixel a colonna.

    Due e quattro, mai tre: i motivi sono quattro, e una griglia da tre lascia il
    quarto da solo su una riga sua.
*/
@media (max-width: 81.24rem) {
    .why .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.why__title {
    margin: 0.625rem 0 0;
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    line-height: 1.15;
}

/*
    IL TESTO DEL PANNELLO TORNA A MISURA DI TESTO.

    La §2 lo tipografava a 17–19 pixel perché era un blocco solo, largo tutta la
    banda, e doveva reggere da solo l'apertura della pagina. Adesso è una colonna
    accanto a quattro riquadri: a 19 pixel diventerebbe l'oggetto più grande della
    sezione dopo il titolo, e il mockup il corpo lo scrive a 15.
*/
/*
    E 15 SONO 0.9375rem, NON 1rem: la riga qui sotto diceva 16 mentre il commento
    qui sopra diceva 15.

    Misurato a 1440: `.home__intro p` rendeva 16 pixel, e gli altri tre corpi di
    testo della stessa pagina — la descrizione della sezione (`.catalogs__note`),
    il sommario dell'esperienza (`.territory__summary`) e quello della scheda
    immobile — rendevano 15. Un solo blocco fuori scala, ed era proprio quello che
    il pannello riempie con parole diverse ogni volta, cioe' il piu' visibile.
*/
.why .home__intro {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ------------------------------------------- 11.4 la griglia degli immobili

   LA CARD È QUELLA CONDIVISA, E LE SUE COSTOLE ADESSO STANNO IN SITE.CSS.

   Qui c'erano tre regole strutturali — la proporzione 3:2 del riquadro della
   fotografia, il corpo come colonna flessibile, e il finto bottone rimesso a
   `flex` contro `.card__b > span { display: block }` — e il commento finiva
   dicendo: «se un giorno queste tre finiscono in site.css accanto alla §27.5.7
   questo blocco si cancella». Ci sono finite (site.css §27.8), insieme a
   `margin-top: auto`, all'ombra spenta e ai pittogrammi della riga dati. Quindi
   il blocco si cancella davvero, invece di restare una seconda copia che alla
   prima modifica fa due schede diverse fra home e catalogo — che e' esattamente
   il difetto che questo giro doveva chiudere.

   Resta solo quello che dipende da questa pagina e da nessun'altra: la cella
   della griglia, il ritaglio della fotografia (parts/catalog.css lo scrive per
   il catalogo, e la home quel foglio non lo carica — una pagina, un foglio,
   docs/DESIGN.md §14), e i due dettagli della riga di testa. */
.home__cards { align-items: stretch; }

.home__card {
    display: flex;
    min-width: 0;
}

.home__card .property-card {
    width: 100%;
    height: 100%;
}

/*
    LA SOTTOLINEATURA, e questa e' la costola che mancava davvero.

    `.property-card__link` e' un <a>, e il foglio di base non gli toglie la
    sottolineatura da nessuna parte: la tolgono parts/catalog.css e
    parts/experiences.css, ognuno per conto suo. La home non carica nessuno dei
    due, quindi ogni scheda della griglia arrivava sottolineata TUTTA — titolo,
    prezzo, pastiglia della tipologia, localita', vani, metri quadri, riferimento
    — perche' la decorazione di un'ancora scende su tutti i suoi discendenti in
    linea, e `text-decoration: none` su un figlio non la ferma. Misurato:
    `text-decoration-line` = underline sulla home, none sul catalogo, stessa
    identica card.

    E' la TERZA copia della stessa riga in tre fogli di pagina: il suo posto e'
    site.css §27.8, accanto alle altre costole della scheda condivisa, e da li'
    cancellerebbe anche le altre due. Sta qui provvisoriamente perche' site.css
    non e' di questa lane, ed e' segnalata nella consegna perche' venga spostata.
*/
.home__card .property-card__link { text-decoration: none; }

/* Il fondo sotto la fotografia: si vede nei millisecondi prima che l'immagine
   arrivi, e per sempre se non c'e'. La proporzione la porta site.css §27.8. */
.home__card .property-card__frame { background: var(--ph-a); }

/* Una fotografia verticale si ritaglia, non si schiaccia, e il segnaposto occupa
   esattamente la stessa scatola. `position: absolute` ha bisogno di un padre
   posizionato, e ce l'ha: `.card__ph` (site.css §10) e' `position: relative`. */
.home__card .property-card__frame > .image,
.home__card .property-card__frame > .ph,
.home__card .property-card__frame > .image--missing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Che cos'è e dov'è sono la stessa domanda: su due righe smettono di esserlo. */
.home__card .property-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
}

.home__card .property-card__top .card__loc { display: inline-flex; margin: 0; }

/*
    (IL FINTO BOTTONE stava qui con `margin-top: auto`, e prima ancora con
    `margin-top: 1rem` — un margine fisso che batteva l'`auto` della §27.5.7 e
    lasciava i bottoni di una riga di tre schede a 52, 52 e 25 pixel dal fondo
    invece che incolonnati. Adesso `auto` e `display: flex` li scrive site.css
    §27.5.7 e §27.8 per tutte le schede del sito: qui non serve piu' niente, e
    misurato dopo la cancellazione i sei bottoni della griglia stanno tutti a 25
    pixel dal fondo della propria scheda.)
*/

/* Il riferimento è l'unica cosa della riga dei dati che non serve a scegliere:
   va all'altro capo, smorzato. Serve quando si telefona. */
.home__card .property-card__reference {
    margin-left: auto;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

/* ----------------------------------------------- 11.5 le testate di sezione

   L'OCCHIELLO NON ABITA PIU' QUI, ED E' ANDATO DOVE CHIEDEVA DI ANDARE.

   Questo blocco ridichiarava `.snum` — misura, spaziatura, grigio, e il trattino
   della §26 di site.css spento — e il commento diceva che era la regola di un
   componente CONDIVISO scritta nel foglio di una pagina sola, segnalata perche'
   venisse portata via. E' successo: sta in site.css §27.9, quindi l'occhiello
   della home e quello del catalogo sono di nuovo la stessa cosa. Riscriverlo qui
   vorrebbe dire rifare due copie che al primo ritocco divergono.

   Sulla home ne resta UNO SOLO, sopra «Perche' sceglierci», che e' l'unico che il
   mockup disegna: le testate di sezione (mockup §4.6) sono H2 a sinistra e «vedi
   tutti» a destra, senza niente sopra il titolo. */

/* ==========================================================================
   11.6 UNA SOLA FORMA DI SCHEDA, SU TUTTA LA PAGINA

   La home porta TRE oggetti fatti a scheda: la griglia degli immobili, le due
   card orizzontali delle sezioni (`.catalogs__entry`) e la griglia del
   territorio (`.territory__*`). La prima e' passata alla scheda condivisa e ha
   preso la forma del mockup (site.css §27.5.7 e §27.8); le altre due sono
   rimaste al disegno di prima — raggio 18, ombra a riposo, sollevamento sotto il
   puntatore, e un anello di cornice intorno alla fotografia. Tre schede in tre
   dialetti sulla stessa schermata: e' la cosa che si vede scorrendo la pagina
   anche senza sapere dire che cosa si sta vedendo.

   Il mockup ne parla una sola (§3 e §4.5 della specifica): filetto da un pixel,
   raggio 6, NIENTE ombra, la fotografia con lo stesso raggio del contenitore e
   senza cornice, e sotto il puntatore il bordo che si scurisce invece della
   scheda che si solleva. Sono gli stessi valori con cui la lane delle esperienze
   ha portato `.experience-card` (parts/experiences.css §14.2) alla forma del
   mockup: qui sono ridichiarati perche' la home quel foglio non lo carica, e
   sono scritti UGUALI apposta — la scheda di un'esperienza dev'essere la stessa
   cosa sulla home e sulla pagina delle esperienze.

   Le regole stanno in coda e non dentro le §5, §8 e §10 per la ragione che la
   §11 dichiara in apertura: quelle sezioni restano leggibili con le loro
   ragioni, e una regola piu' sotto dello stesso peso vince.
   ========================================================================== */

/* ------------------------------------------ 11.6.1 le card delle due sezioni */

/*
    LA FOTOGRAFIA VA FINO AL BORDO, e per questo il riempimento della card sparisce.

    La §10 le aveva dato mezzo rem di riempimento tutto intorno e alla fotografia
    un raggio suo (12px) dentro il raggio della card (18px): due cornici a mezzo
    centimetro l'una dall'altra. Nel mockup la scheda e' UNA cornice sola, la
    fotografia la riempie fino ai lati e fra la fotografia e il testo c'e' un
    filetto invece di un margine — che e' esattamente quello che
    partials/property-card.html.twig fa nella griglia qui sopra.
*/
.catalogs__entry {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color .25s var(--e);
}

/* Il bordo risponde al puntatore, la scheda no: un sollevamento di tre pixel su
   un oggetto che occupa mezza banda e' la pagina che si muove sotto il dito. */
.catalogs__entry:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-2);
}

/*
    L'ANELLO DI MESSA A FUOCO ERA RIMASTO SUL FONDO DI PRIMA.

    La §4 lo aveva scritto `outline: 3px solid var(--blue-4)` quando queste due
    card erano lastre fotografiche su gradiente scuro: `--blue-4` e' il token del
    «blu come TESTO su fondo scuro», e li' era la scelta giusta. La banda adesso e'
    carta e la card e' bianca (§11.6.1 qui sopra), e su quel bianco lo stesso
    anello misura **1,76:1** — sotto il 3:1 che un indicatore di messa a fuoco deve
    tenere, e quindi un contorno che chi arriva col tabulatore non vede.

    La prova che e' una dimenticanza e non una scelta sta a due sezioni di
    distanza: `.territory__link:focus-visible` (§5) usa `var(--focus)`, e lo stesso
    anello sulla scheda accanto, sulla stessa pagina, misura **10,81:1**. Due
    contorni, due colori, uno solo visibile. Adesso e' quello, per tutte e due.
*/
.catalogs__entry:focus-visible { outline-color: var(--focus); }

/*
    LO STACCO FRA LE TRE CARD E' QUELLO DELLE ALTRE DUE GRIGLIE DELLA PAGINA.

    Misurato a 1440: la griglia degli immobili e quella del territorio staccano di
    24 pixel (`.grid`, site.css §3), questa lista staccava di **14** — la §10 le
    aveva dato 0.875rem quando erano due lastre affiancate e non tre schede in
    colonna. Tre elenchi di schede sulla stessa pagina con due ritmi diversi e'
    la cosa che si vede scorrendo senza saper dire che cosa si sta guardando.
*/
.catalogs { gap: 1.5rem; }

/*
    LA CORNICE INTORNO ALLA FOTOGRAFIA SE NE VA — ed e' la stessa mossa che
    site.css §27.9 ha fatto su `.card__ph::after` per tutte le altre.

    `display: none` e non `box-shadow: none`: questo pseudo-elemento la §6 lo
    usava per il velo nero e la §10 lo teneva in vita solo per disegnarci
    l'anello. Senza anello non gli resta niente da fare, e spegnerlo del tutto e'
    l'unico modo di non lasciare in giro un elemento che aspetta un lavoro.
*/
.catalogs__frame {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--hair);
}

.catalogs__frame::after { display: none; }

/* Il riempimento che la card ha perso lo prende il testo: sulla fotografia non
   serviva, accanto alle parole si'. */
.catalogs__body { padding: 1.125rem 1.25rem 1.25rem; }

@media (min-width: 46rem) {
    /* La fotografia riempie l'altezza della riga invece di stare a mezz'aria:
       senza riempimento, una fotografia centrata lascerebbe due strisce di
       bianco sopra e sotto, dentro il bordo. */
    .catalogs__entry { align-items: stretch; }

    .catalogs__frame {
        aspect-ratio: auto;
        height: 100%;
        min-height: 11.5rem;
        border-bottom: 0;
        border-right: 1px solid var(--hair);
    }

    .catalogs__body { align-self: center; padding: 1.5rem 0; }
    .catalogs__go { align-self: center; margin-right: 1.25rem; }
}

/* Un titolo di scheda, non un titolo di sezione. A 1.9rem era 30 pixel, cioe' la
   misura che il mockup da' a un H2 di banda (§2 della specifica): dentro una
   scheda diventava l'oggetto piu' grande della pagina dopo l'apertura. La scala
   e' quella del titolo della scheda immobile qui accanto. */
.catalogs__name {
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    letter-spacing: -0.018em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

/* Il conto prende la forma della pastiglia della tipologia che sta sulla scheda
   immobile (`.tag`, site.css §27.9): filetto e raggio piccolo, non un rettangolo
   pieno con un anello interno. */
.catalogs__count {
    border: 1px solid var(--hair);
    border-radius: var(--radius-s);
    background: none;
    box-shadow: none;
    letter-spacing: 0.1em;
}

/* Il riquadro della freccia e' un riquadro di icona: raggio 10 e filetto, come i
   quattro di «perche' sceglierci» (site.css `.feats__ic`, §3 della specifica).
   Sotto il puntatore si riempie di navy — pieno, senza gradiente e senza alone:
   e' il bottone del mockup. */
.catalogs__go {
    border: 1px solid var(--hair);
    border-radius: var(--radius-xl);
    background: none;
    box-shadow: none;
    transition: background-color .25s var(--e), border-color .25s var(--e);
}

.catalogs__entry:hover .catalogs__go {
    background-image: none;
    background-color: var(--fill);
    border-color: var(--fill);
    box-shadow: none;
}

/* ------------------------------------- 11.6.2 le schede delle esperienze */

/*
    LA STESSA SCHEDA DELLA PAGINA DELLE ESPERIENZE.

    `.territory__*` e' la variante che la home si e' scritta in casa perche' le
    sue schede stavano su una banda diversa. La banda adesso e' bianca come
    l'altra, e quello che resta della variante e' solo il disegno vecchio: ombra,
    sollevamento di sei pixel, raggio 18, e il velo di 46 pixel che sfumava il
    fondo della card dentro la fotografia al posto di un bordo.

    I valori qui sotto sono, uno per uno, quelli di parts/experiences.css §14.2.
    Finche' le due pagine non condividono il partial — e non possono, perche' la
    home non carica quel foglio — condividono almeno i numeri.
*/
.territory__link {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color .25s var(--e);
}

.territory__link:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-2);
}

/* Il velo che teneva insieme fotografia e didascalia senza un bordo: adesso il
   bordo c'e', e due giunti nello stesso punto sono uno di troppo. */
.territory__frame {
    box-shadow: none;
    border-bottom: 1px solid var(--hair);
}

.territory__frame::after { display: none; }

/* Anche l'avvicinamento della fotografia e' quello della scheda condivisa
   (`.card:hover .card__ph > .image`, site.css §10): era 1,05 contro 1,07, che
   non si vede da solo ma si vede fra due griglie sulla stessa pagina. */
.territory__link:hover .territory__frame > img { transform: scale(1.07); }

/* Il corpo e' la scatola di `.card__b` (site.css §24): stesso riempimento, cosi'
   una scheda di un'esperienza sulla home e una sulla pagina delle esperienze si
   sovrappongono invece di somigliarsi. */
.territory__body { padding: 22px 24px 24px; }

/* IL TITOLO VIENE PRIMA DELLA META, e il markup e' cambiato con lui: nella
   scheda del mockup il corpo si legge titolo, poi la riga di dati. */
.territory__title {
    margin-top: 0;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.011em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

/* LA META E' UNA DIDASCALIA, NON UN OCCHIELLO. Era maiuscoletto spaziato di 10
   pixel, cioe' la forma di `.card__loc`, che e' disegnata per stare SOPRA un
   titolo: sotto il titolo un maiuscoletto e' un secondo occhiello, e su una riga
   di tre celle erano tre. Il mockup la scrive come una didascalia — sans, corpo
   normale, 13 pixel, grigia (§2 della specifica). Stessi valori di
   parts/experiences.css §14.2. */
.territory__meta {
    margin-top: 0.375rem;
    font-family: var(--t);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.territory__summary { margin-top: 0.6875rem; }

/*
    IL FINTO BOTTONE IN FONDO, ed e' l'ultima cosa che mancava perche' questa
    scheda e quella della pagina delle esperienze siano lo stesso oggetto.

    Le misure sono quelle di `.property-card__go` (site.css §27.5.7) e di
    `.experience-card__go` (parts/experiences.css §14.2), copiate e non scelte di
    nuovo: sulla stessa schermata c'e' una griglia di immobili sopra una di
    esperienze, e due bottoni di altezza diversa sono la differenza che si vede
    senza saper dire cosa si sta guardando.

    Perche' `margin-top: auto` abbia qualcosa su cui agire servono due colonne
    flessibili: la scheda dentro la cella, e il corpo dentro la scheda. Senza,
    tre sommari di due, tre e due righe lasciano tre bottoni a tre altezze.
*/
.territory__item { display: grid; }

.territory__link { display: flex; flex-direction: column; }

.territory__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.territory__go {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin-top: auto;
    border-radius: var(--radius);
    background: var(--fill);
    color: var(--fill-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.territory__link:hover .territory__go { background: var(--fill-2); }

/* Lo stacco minimo fra il bottone e quello che gli sta sopra: `margin-top: auto`
   spinge in fondo, ma nella scheda piu' alta della riga non avanza spazio e il
   bottone si attacca al sommario. Il margine non puo' essere «auto e almeno 14
   pixel» nella stessa dichiarazione, quindi lo mette chi sta sopra, chiunque sia
   — il sommario, o la meta, o il titolo. */
.territory__body > *:has(+ .territory__go) { margin-bottom: 0.875rem; }

/* ==========================================================================
   11.7 IL RIEMPIMENTO IN BASSO DELL'APERTURA APPARTIENE ALLA SCHEDA DI RICERCA

   La §11.1 aveva allargato il riempimento in fondo alla didascalia — da 2,5–4rem
   a 4–6rem — per una ragione sola: `.sbox--float` sale di 3.5rem sul bordo della
   fotografia, e senza quello spazio coprirebbe il bottone.

   Ma la scheda di ricerca c'e' solo se c'e' un catalogo di affitti brevi con
   almeno una casa pubblicata (home.html.twig §2: una ricerca di disponibilita'
   su un catalogo vuoto puo' solo rispondere «nessun risultato»). Su
   un'installazione appena fatta, o su un'agenzia che le vacanze non le fa, la
   fotografia teneva 32 pixel di vuoto sotto il bottone — misurato a 1440 — per
   una scheda che non c'e'. Un buco riservato a un assente e' il difetto piu'
   difficile da vedere, perche' non manca niente: c'e' solo spazio di troppo.

   `:has(+ .sbox__hold)` legge esattamente la condizione del markup — la scheda
   e' il fratello che segue l'apertura — quindi il foglio non ha bisogno di una
   classe in piu' sul guscio, e non c'e' modo che i due si smentiscano.
   ========================================================================== */
.hero__caption,
.hero--plain { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.hero:has(+ .sbox__hold) .hero__caption,
.hero--plain:has(+ .sbox__hold) { padding-bottom: clamp(4rem, 8vw, 6rem); }

/* ==========================================================================
   11.8 IL VELO DELL'APERTURA, MISURATO ANCHE SU UNO SCHERMO STRETTO

   La §11.1 ha ricalcolato la rampa da sinistra e l'ha rimisurata: sul caso
   peggiore — una fotografia bianca, cioe' una spiaggia a mezzogiorno — titolo
   5,48:1, sottotitolo 6,68:1, bottone 9,28:1 sul pixel piu' chiaro. Quei numeri
   sono stati rifatti in questo giro e tengono. A 1440.

   SOTTO I 1024 NON TENEVANO PIU', e il conto e' semplice: la rampa da sinistra
   scende a 0,26 al 70% della larghezza e a zero all'88%, e piu' lo schermo si
   stringe piu' il testo si allarga in percentuale. Misurato sull'inchiostro vero
   (Range.getClientRects, non la scatola dell'elemento), il sottotitolo arriva a:

     1440   35% della larghezza      velo 0,70     6,68:1
     1024   49%                      velo 0,65     5,5:1
      760   63%                      velo 0,41     2,6:1
      560   86%                      velo 0,03     1,1:1
      390   93%                      velo 0        1,0:1   — bianco su bianco

   A 390 l'ultima parola del sottotitolo e il titolo stanno sulla fotografia nuda.
   Non e' un rischio teorico: la fotografia la sceglie l'agenzia dal pannello e
   sulla costa, d'estate, e' chiara.

   PERCHE' UNA RAMPA DAL BASSO E NON UNA RAMPA PIU' LUNGA. Su uno schermo stretto
   la didascalia occupa tutta la colonna: non esiste un «da sinistra» che protegga
   il testo e lasci libera la fotografia, perche' il testo e' largo quanto la
   fotografia. Quello che resta libero e' l'ALTO — l'apertura e' `align-items:
   end`, quindi il testo sta nel 57% basso della fascia e sopra non c'e' niente
   da leggere.

   Le fermate: 0,82 in fondo, 0,66 al 62% dell'altezza (il titolo comincia al 57%
   dal basso), e poi giu' fino a zero al 92%, dove la fotografia torna a essere
   una fotografia. Un velo di 0,60 e' il minimo perche' il bianco regga 4,5:1
   sopra il bianco; qui il punto piu' debole sotto al testo e' 0,66.

   Il taglio e' a 64rem perche' e' li' che il conto smette di tornare — ed e' lo
   stesso punto in cui «perche' sceglierci» passa a una colonna (§11.3).
   ========================================================================== */
@media (max-width: 63.99rem) {
    /* La rampa da sinistra si spegne: qui non ha piu' niente da proteggere che
       non protegga gia' il velo qui sotto, e sovrapposte darebbero il doppio di
       velo nell'angolo in basso a sinistra. */
    .hero::after { background: none; }

    /*
        IL VELO E' ANCORATO AL TESTO, NON ALLA FASCIA.

        Non e' un dettaglio di dove si scrive la regola. Una rampa misurata in
        percentuali dell'ALTEZZA DELLA FASCIA va bene finche' il testo e' sempre
        alto uguale — e non lo e': il titolo tedesco va su due righe e comincia
        al 73% dal basso invece che al 57%, cioe' dove una rampa tarata
        sull'italiano e' gia' scesa a 0,42. Misurato: 2,58:1 a 320 in tedesco,
        contro 6,08:1 nella stessa posizione in italiano. Il velo deve seguire la
        cosa che protegge, e la cosa che protegge e' la didascalia.

        `.hero__caption` e' `position: relative` (§1) e nell'hero e' il solo
        elemento posizionato: il suo fondo dipinge SOPRA la fotografia
        (`z-index: -2`) e sopra la rampa della fascia (`-1`), e SOTTO il proprio
        testo. Non serve nessuno pseudo-elemento in piu'.

        La sfumatura in cima vive dentro il riempimento: 5–7rem di spazio che
        l'apertura ha comunque, perche' e' `align-items: end` e la didascalia
        cresce verso l'alto. Cosi' il velo non ha un bordo netto e il terzo alto
        della fotografia resta una fotografia.

        Rimisurato sul caso peggiore (fotografia bianca), pixel piu' chiaro sotto
        l'inchiostro, italiano e tedesco a 320, 390, 560 e 768: il piu' basso di
        tutti e' il titolo tedesco a 320.
    */
    .hero__caption {
        padding-top: clamp(5rem, 18vw, 7rem);
        background: linear-gradient(
            to top,
            rgba(12, 26, 44, 0.80) 0%,
            rgba(12, 26, 44, 0.74) 60%,
            rgba(12, 26, 44, 0.68) 80%,
            rgba(12, 26, 44, 0.26) 93%,
            rgba(12, 26, 44, 0) 100%
        );
    }
}