/* ==========================================================================
   The institutional pages, and the 404.

   chi-siamo, come-lavoriamo, contatti, vendi-casa, privacy, cookie, grazie:
   nine screens out of one template. These are the pages people actually READ,
   so typography carries them — but they are bands like the rest of the site
   (docs/DESIGN.md §1), because one long centred column is exactly what the
   owner called an online newspaper.

   Everything here reads the role tokens of site.css §1/§10, so each component
   is correct on white, on paper, on pale blue, on night and in dark mode
   without one extra selector.
   ========================================================================== */

/* ------------------------------------------------- 1. the dark opening band

   The shell prints the breadcrumbs above <main>, so on these pages the dark
   opening does not start at the top of the document. Rather than leave a white
   ledge between the header and the band, the breadcrumb strip takes the night
   ground and the whole opening reads as one region.

   Only the tokens are reassigned — the same set .sec--dark uses — so the crumbs
   keep their own rules and their contrast on night is the footer's: 6.2:1. */

/*
    SUPERATA DALLA §10: l'apertura non è più scura, quindi la striscia delle
    briciole non ha più niente a cui attaccarsi. Lasciata qui perché è dove il
    motivo è scritto, e azzerata sotto — un blocco di token reassegnati che non
    reassegna niente è più chiaro di un blocco cancellato, per chi legge il file
    fra sei mesi e si chiede perché le briciole non sono scure come su una
    scheda immobile.
*/
.p-page .breadcrumbs,
.p-not-found .breadcrumbs {
    --ground: var(--night);
    --text-2: rgba(255, 255, 255, 0.62);
    --text-3: rgba(255, 255, 255, 0.55);
    --accent: var(--blue-4);
    --focus: var(--blue-4);
}

.page__open {
    padding-block: clamp(3.25rem, 7vw, 6rem);
}

.page__title {
    font-family: var(--d);
    font-weight: 400;
    font-size: clamp(2.1875rem, 5.6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #fff;
    max-width: 22ch;
    margin: 0.875rem 0 0;
    font-variation-settings: 'opsz' 144;
}

/*
   One word at a time, 90ms apart. The spans exist only once site.js has split
   the heading: with the script off, or when the split is skipped, the heading is
   plain text and perfectly readable.

   `up` is declared in site.css. The reduced-motion restore below is not
   optional: the global block kills the animation with !important, and without
   the end state written back the words would stay at opacity 0 forever — the
   one bug docs/DESIGN.md §13 asks not to reintroduce.
*/
.page__title .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.5rem);
    animation: up 0.9s var(--e) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .page__title .w { opacity: 1; transform: none; }
}

.page__lead {
    max-width: 46ch;
    margin: 1.375rem 0 0;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--text);
}

/* --------------------------------------------------- 2. the prose, on white */

/*
   A band of running text does not need the 130px of a photographic band: the
   opening above already carries 96px of its own, and 226px between the lead and
   the first paragraph reads as a page that lost its thread.
*/
.page__text {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page__prose {
    max-width: 62ch;
    font-size: 1.09375rem;
    line-height: 1.8;
    color: var(--text-2);
}

.page__prose > p { margin: 0 0 1.35em; }
.page__prose > p:last-child { margin-bottom: 0; }

/* The opening paragraph at full strength: the page reads as a text with a
   beginning, not as a slab. */
.page__prose > p:first-child {
    font-size: 1.1875rem;
    color: var(--text);
}

/*
   Privacy and cookie. They are long, and they get read in a hurry by somebody
   looking for one clause, so they get more leading, more space between
   paragraphs and — where there is room in the gutter — a number per paragraph,
   which is what makes a clause quotable over the telephone.
*/
.page__prose--legal {
    font-size: 1.03125rem;
    line-height: 1.85;
    counter-reset: clause;
}

.page__prose--legal > p {
    position: relative;
    margin-bottom: 1.6em;
}

.page__prose--legal > p::before {
    counter-increment: clause;
    content: counter(clause, decimal-leading-zero);
    position: absolute;
    left: -2.4rem;
    top: 0.45em;
    display: none;
    font-family: var(--m);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--text-3);
}

/* 1200px: only from here is the container gutter wider than the number, so it
   can sit outside the measure without ever pushing the document sideways. */
@media (min-width: 75rem) {
    .page__prose--legal > p::before { display: block; }
}

/* ---------------------------------------------- 3. the contact details, paper

   A designed block and not a bulleted list: mono label, value in Inter, one
   hairline per row. What is not configured is not printed, and a freshly
   installed site has almost nothing configured. */

.details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

@media (min-width: 44rem) {
    .details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }
}

@media (min-width: 68rem) {
    .details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.details__item {
    min-width: 0;
    padding: 1.125rem 0;
    border-top: 1px solid var(--hair);
}

.details__item dt {
    font-family: var(--m);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.details__item dd {
    margin: 0.5rem 0 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
    overflow-wrap: anywhere;
}

.details__item a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.details__item a:hover { color: var(--text); }

.details__value--mono {
    font-family: var(--m);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.details__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ------------------------------------------- 4. the reasons, vendi-casa only

   Three of them, numbered, each under a blue rule: the page has to answer "why
   ask you" before it asks for a telephone number. */

.reasons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

@media (min-width: 56rem) {
    .reasons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.25rem;
    }
}

.reasons__item {
    min-width: 0;
    padding-top: 1.25rem;
    border-top: 2px solid var(--fill);
}

.reasons__n {
    display: block;
    font-family: var(--m);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--accent);
}

.reasons__title {
    margin: 0.875rem 0 0;
    font-family: var(--d);
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.reasons__text {
    margin: 0.625rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-2);
}

/* ------------------------------------------- 5. the legal companion cards

   Two cards on the privacy and cookie pages: what to do, and where to go next.
   The consent card is the <li> itself, because consent.js removes the opener's
   closest <li> when there is nothing to measure at all — the card leaves with
   its button instead of explaining a control that is no longer there. */

.prefs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
}

@media (min-width: 52rem) {
    .prefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prefs__card {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    align-content: start;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    background: var(--card);
    box-shadow: var(--sh);
}

.prefs__title {
    margin: 0;
    font-family: var(--d);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.prefs__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-2);
}

/* ------------------------------------------------ 6. what happens next, grazie

   The thank-you page is a confirmation, so it says what the message does next.
   Figures in Fraunces: they are the only ornament the page gets. */

.steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

@media (min-width: 56rem) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.25rem;
    }
}

.steps__item {
    min-width: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hair);
}

.steps__n {
    display: block;
    font-family: var(--d);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.steps__title {
    margin: 0.75rem 0 0;
    font-family: var(--d);
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.steps__text {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-2);
}

/* ------------------------------------------------------- 7. the closing band */

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

.page__closing {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

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

.page__closing-title {
    margin: 0;
    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;
}

/* -------------------------------------------------------------- 8. the form

   The fields themselves are the `.form__*` vocabulary of site.css, so the two
   forms on these pages and the one on the property sheet are the same control
   set. What belongs here is only the measure of the band and the size of the
   heading: a form wider than this stops reading as a conversation. */

.page__form { max-width: 52rem; }

.form__title {
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    max-width: 24ch;
    margin: 0.5rem 0 1.75rem;
}

/* Two of the three forms carry a line of introduction, and `.lead` brings its
   own 32px: the heading gives its own back rather than adding to it. */
.form__title:has(+ .lead) { margin-bottom: 0; }

/*
   The privacy consent is where the law and the money meet, so it is not the
   smallest text on the page: full ink, 15px, and a box big enough to aim at with
   a thumb. The whole label is the target either way.
*/
.page__form .form__consent {
    max-width: 62ch;
    font-size: 0.9375rem;
    color: var(--text);
}

.page__form .form__consent input {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---------------------------------------------------------------- 9. the 404 */

.search {
    max-width: 34rem;
    margin-top: clamp(2rem, 5vw, 2.75rem);
}

.search__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.search__field { flex: 1 1 12rem; min-width: 0; }

/* The placeholder is a hint, and on the night ground it still has to be read:
   --text-3 is 6.2:1 there. */
.search__field::placeholder { color: var(--text-3); opacity: 1; }

.search .cta { flex: 0 0 auto; }

/* The way back: one row per section, hairline between, arrow that moves. It is
   a list of doors, so the whole row is the link. */
.ways {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.ways__item { min-width: 0; }

.ways__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 0;
    border-top: 1px solid var(--hair);
    text-decoration: none;
    color: inherit;
}

.ways__item:last-child .ways__link { border-bottom: 1px solid var(--hair); }

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

.ways__n {
    font-family: var(--m);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--accent);
}

.ways__name {
    font-family: var(--d);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--heading);
    transition: color 0.24s var(--e);
}

.ways__go {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--accent);
    transition: transform 0.3s var(--e);
}

.ways__go svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.ways__link:hover .ways__name { color: var(--accent); }
.ways__link:hover .ways__go { transform: translateX(0.375rem); }

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

   Chi siamo, Come lavoriamo, Vendi casa, Contatti, Privacy, Cookie, Grazie and
   the 404 all render through this file. They are the pages with the least on
   them, which is exactly why they were the ones that read as plain: an opening
   band, one column of prose, and a lot of ground.
   ========================================================================== */

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

   The eyebrow, the title and the lead were one column pinned to the left of a
   1400px band, so on a desktop the opening was type in the left third of a black
   rectangle and nothing in the other two. The lead moves into a second column
   and sits on the title's own baseline: the band fills, nothing is centred, and
   the grid is the one rule 2 of docs/DESIGN.md asks for.

   Under 62rem it is one column exactly as before — a lead beside a title needs
   both to have room, and on a phone neither does. */

@media (min-width: 62rem) {
    .page__open > .container {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        column-gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
    }

    .page__open .snum,
    .page__open .pill { grid-column: 1 / -1; }

    /* Both columns start on the row's top edge. `end` was tried first and is
       wrong here: the lead is often the taller of the two, so aligning the pair
       at the bottom left the title hanging under an empty half-band with the
       eyebrow stranded far above it. Aligned at the top the two columns read as
       one opening; the 0.55rem on the lead is an optical nudge, not a
       measurement — Fraunces at 4rem has more room above its cap than Inter at
       1.15rem does above its x-height, and without it the lead looks high. */
    .page__title {
        grid-column: 1;
        max-width: 15ch;
        margin-top: 0.875rem;
    }

    .page__lead {
        grid-column: 2;
        margin: 1.4rem 0 0;
        max-width: 42ch;
    }
}

/* ---- the prose ----------------------------------------------------------- */

.page__prose > p:first-child {
    letter-spacing: -0.008em;
    line-height: 1.62;
}

/* ---- the contact details -------------------------------------------------

   A grid of rows separated by a hairline at the top of each cell. It worked and
   it was flat: the label, the value and the rule were three greys. The rule now
   fades out towards the right of its own cell, which is the same device the card's
   data row uses, and the values get the air they were short of. */

/* The grid needs air under the section header: `.shead` now closes with a
   hairline of its own (site.css §24.3) and each cell here opens with one, so at
   the header's own 40px the two rules read as a doubled line rather than as two
   different things. */
.details { margin-top: clamp(0.75rem, 2vw, 1.5rem); }

.details__item {
    padding: 1.25rem 0 1.375rem;
    border-top: 0;
    background-image: linear-gradient(to right, var(--hair), color-mix(in srgb, var(--hair) 0%, transparent) 88%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
}

.details__item dt { letter-spacing: 0.18em; }

.details__item dd { font-size: 1.09375rem; }

/* An underline that clears the descenders, like every other link in prose. */
.details__item a {
    border-bottom: 0;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: color .2s, text-decoration-color .2s;
}

.details__item a:hover { text-decoration-color: currentColor; }

/* ---- the three numbered blocks ------------------------------------------

   `.reasons` on Vendi casa and `.steps` on Grazie are the same shape: a rule, a
   figure, a title, a paragraph. The rule at the top of each was a flat 2px of
   `--fill` (and a hairline on the steps); it now fades out along its own column,
   which is what stops three heavy blue dashes reading as a table header. */

.reasons__item {
    padding-top: 1.375rem;
    border-top: 0;
    background-image: linear-gradient(to right, var(--fill), color-mix(in srgb, var(--fill) 12%, transparent));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 0;
}

.steps__item {
    padding-top: 1.375rem;
    border-top: 0;
    background-image: linear-gradient(to right, var(--hair), color-mix(in srgb, var(--hair) 0%, transparent));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
}

.reasons__title,
.steps__title {
    font-size: 1.35rem;
    letter-spacing: -0.024em;
    font-variation-settings: 'opsz' 48;
}

.steps__n {
    font-size: 2.4rem;
    letter-spacing: -0.04em;
    font-variation-settings: 'opsz' 120;
}

.reasons__n { letter-spacing: 0.22em; }

/* ---- the legal companion cards ------------------------------------------ */

.prefs__card {
    border-radius: var(--radius-l);
    box-shadow: var(--sh), inset 0 0 0 1px var(--edge);
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: box-shadow .4s var(--e);
}

.prefs__title {
    font-size: 1.3rem;
    letter-spacing: -0.024em;
    font-variation-settings: 'opsz' 48;
}

/* ==========================================================================
   9. I RECAPITI DIVENTANO RIQUADRI

   «Dove trovarci» era tre colonne di testo con un filetto sfumato sopra
   ciascuna: tre etichette in mono e tre valori, appoggiati alla banda. Su una
   banda chiara un dato senza una superficie sotto non è un dato, è una riga di
   testo che sembra caduta lì — e questi tre sono l'indirizzo dell'agenzia, cioè
   la ragione per cui qualcuno apre questa pagina.

   Nel pannello la stessa cosa — un'etichetta smorzata sopra un valore — sta
   dentro un riquadro bianco con il filetto e l'ombra corta. È il componente più
   ripetuto del cruscotto e qui fa esattamente lo stesso lavoro.
   ========================================================================== */

.details {
    gap: 0.875rem;
}

@media (min-width: 44rem) {
    /* Il column-gap da 3rem serviva a tenere separate tre colonne di testo nudo.
       Con il riquadro la separazione la fa il bordo, e uno stacco da 48px fra
       due card le fa leggere come tre bande diverse. */
    .details { column-gap: 0.875rem; }
}

.details__item {
    padding: 1.125rem 1.25rem 1.25rem;
    border-top: 0;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
}

.details__item dd { margin-top: 0.4375rem; }

/* Un recapito è un collegamento nel 90% dei casi — il telefono, l'e-mail — e
   dentro un riquadro il sottolineato pieno diventa la cosa più pesante della
   card. Resta un collegamento e resta evidente, con il filetto a mezza forza che
   si riempie quando lo si punta. */
.details__item a { border-bottom-color: color-mix(in srgb, currentColor 45%, transparent); }
.details__item a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ---- la banda di apertura non è una stanza vuota -------------------------

   `.page__text` porta un paragrafo solo — su «Contatti» sono tre righe — dentro
   5.5rem di respiro sopra e sotto, su una banda bianca larga quanto lo schermo.
   Il risultato misurato a 1440: 246 pixel di altezza per 78 di testo. Non è aria,
   è una stanza vuota con una frase in un angolo.

   Il testo non cambia e la misura di riga nemmeno: cambia quanto vuoto gli sta
   intorno. */
.page__text { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

/* ==========================================================================
   10. IL RIDISEGNO DELLE PAGINE DI CONTENUTO

   Sei pagine — chi siamo, come lavoriamo, vendi casa, contatti, privacy,
   cookie — che erano tutte la stessa cosa: una banda notte con tre parole, una
   banda bianca con un paragrafo, e poi elenchi appoggiati sulla banda.

   Due cambiamenti, e sono gli stessi che hanno cambiato la scheda immobile:
   l'apertura diventa chiara, e gli elenchi diventano oggetti.
   ========================================================================== */

/* ------------------------------------------------- 10.1 l'apertura chiara */

.page__open {
    background: var(--ground);
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.page__open .page__open-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 58rem) {
    .page__open .page__open-in {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 4rem;
    }

    /* Il sopracciglio e il titolo tengono la prima colonna; la riga di apertura
       la seconda, allineata al piede del titolo. */
    /*
        LE RIGHE SONO TRE E CIASCUNO STA NELLA SUA.

        Il blocco della §9 — scritto per l'apertura scura — dava al sopracciglio
        `grid-column: 1 / -1`, cioè una riga tutta sua a tutta larghezza, e
        metteva la riga di apertura nella seconda colonna della riga sotto. Con
        `align-items: end` e la riga di apertura che scavalcava due righe, il
        titolo finiva appeso in fondo a una riga alta quanto tre righe di testo:
        centosettanta pixel di vuoto fra il sopracciglio e il titolo.

        Qui il sopracciglio sta nella prima colonna, il titolo sotto di lui, e la
        riga di apertura occupa la seconda colonna di entrambe le righe partendo
        dall'alto. Le due colonne cominciano insieme, che è la cosa che si legge
        come UNA apertura invece che come due.
    */
    .page__open .page__open-in .snum,
    .page__open .page__open-in .pill { grid-column: 1; grid-row: 1; }

    .page__open .page__open-in .page__title {
        grid-column: 1;
        grid-row: 2;
        max-width: 18ch;
        margin-top: 0.75rem;
    }

    /*
        LA RIGA DI APERTURA STA NELLA RIGA DEL TITOLO, non a cavallo di due.

        Scavalcando anche la riga del sopracciglio, il browser distribuiva su
        ENTRAMBE lo spazio che le serviva: cinque righe di testo facevano
        crescere la riga del sopracciglio di cento pixel, e il titolo scendeva
        con lei. Il sopracciglio è alto sedici pixel e deve restare alto sedici
        pixel.
    */
    .page__open .page__open-in .page__lead {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0.5rem 0 0;
    }
}

/* Il titolo era bianco su nero, scritto a mano e non da un token: su fondo
   chiaro spariva. */
.page__title {
    color: var(--heading);
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}

.page__lead {
    max-width: 46ch;
    color: var(--text-2);
}

/*
    IL FILETTO DI BRONZO STA SOTTO IL TITOLO, non sotto tutta la testata.

    Sotto tutta la testata non ci poteva stare: `.page__open-in` È il contenitore
    con la gronda, e uno sfondo dipinge la scatola del bordo — cioè partiva dal
    margine dello schermo e non da dove comincia il testo, quarantadue pixel più
    a destra. È esattamente l'errore che la §15 di docs/DESIGN.md descrive per la
    scorciatoia `padding`, con un'altra proprietà.

    Sotto il titolo è anche il posto in cui i mockup lo mettono, ed è più giusto:
    è un segno che appartiene al titolo, non una riga che divide due bande. La
    divisione fra l'apertura e quello che segue la fa il cambio di fondo.
*/
.page__title {
    position: relative;
    padding-bottom: clamp(1rem, 2vw, 1.375rem);
}

.page__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: var(--bronze);
}

/* ------------------------------------------- 10.2 gli elenchi diventano card */

/*
    «PERCHÉ A NOI» e «COME FUNZIONA» erano elenchi con un filetto sfumato sopra
    ogni voce: tre colonne di testo appoggiate alla banda. Il numero — 01, 02,
    03 — era grigio chiaro e grande, e faceva da decorazione a una cosa che è una
    SEQUENZA: primo, poi secondo, poi terzo.

    Diventano card con il numero dentro il quadrato che porta ogni icona di
    questo progetto. Il numero smette di essere un ornamento e torna a essere il
    posto nella fila.
*/
.reasons,
.steps {
    gap: 0.875rem;
}

.reasons__item,
.steps__item {
    padding: clamp(1.25rem, 2.6vw, 1.75rem);
    border-top: 0;
    border-radius: var(--radius-l);
    background: var(--card);
    background-image: none;
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
    transition: box-shadow .4s var(--e), transform .4s var(--e);
}

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

.reasons__n,
.steps__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 1rem;
    border-radius: 11px;
    background: var(--icon-box);
    box-shadow: inset 0 0 0 1px var(--edge);
    font-family: var(--m);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--blue-3);
}

.reasons__title,
.steps__title { margin-top: 0; }

/* --------------------------------------- 10.3 la chiusura e le card legali */

/* `.prefs__card` era già una card: adesso porta lo stesso filetto e la stessa
   ombra corta di tutte le altre, invece di una ricetta sua. */
.prefs__card {
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
}

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

/*
    La striscia delle briciole torna chiara: l'apertura sotto di lei non è più
    una banda notte (§10.1), e una fascia nera fra la testata e una pagina bianca
    è esattamente la ledge che la §1 di questo foglio voleva evitare — al
    contrario.

    SOLO `.p-page`. La pagina 404 tiene la sua apertura scura: non è nel menu,
    non ci si arriva per scelta, ed è l'unica pagina in cui una banda nera è il
    messaggio invece che una decorazione. Là la ledge chiara sarebbe il difetto
    che la §1 descrive, quindi la regola di sopra le resta buona.
*/
.p-page .breadcrumbs {
    --ground: var(--w);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --accent: var(--blue-3);
    --focus: var(--blue-3);
}

/* ==========================================================================
   11. LA LINGUA DEL MOCKUP, PORTATA SU QUESTE PAGINE

   Il mockup del committente non disegna nessuna delle sette pagine che passano
   di qui: disegna la home e la scheda di un appartamento. Quello che si porta
   non è quindi un disegno, è la sua GRAMMATICA — filetto da un pixel invece
   dell'anello di ombre, raggio piccolo e costante, un serif a contrasto medio
   al posto del display, e i moduli con i campi affiancati e il bottone pieno a
   tutta larghezza in fondo.

   Quello che NON si tocca sono le bande e i loro fondi. La sequenza
   bianco → carta → azzurro → profondo è letta banda per banda da
   tests/Functional/PageTest su sette pagine, e cambiarla sarebbe una decisione
   di struttura travestita da ritocco di grafica.
   ========================================================================== */

/* ------------------------------------------ 11.1 il titolo scende di taglia

   La §10.1 tarava il titolo su `opsz 144` — il taglio display di Fraunces, aste
   sottilissime e grazie affilate — e lo lasciava salire fino a 68 pixel. Nel
   mockup, fuori dall'hero, i serif stanno fra i 28 e i 34 pixel e hanno
   contrasto MEDIO: la §27.2 di site.css lo ha già deciso per tutti i titoli del
   sito, e questa era l'unica riga rimasta a scavalcarla.

   Non è una finezza tipografica. Un titolo display sopra un paragrafo Inter è
   la firma del disegno precedente, ed è la prima cosa che si vede aprendo «Chi
   siamo». */
/* E LA TAGLIA SCENDE ANCORA, perché il giro precedente aveva corretto il taglio
   del serif e non la misura: 42 pixel misurati contro i «30-34» che la §2 della
   specifica scrive per un H1 fuori dall'hero. Il massimo va a 2.125rem, cioè 34,
   il tetto di quell'intervallo; il minimo resta 30, il suo fondo. Sotto i 34 il
   titolo della pagina e la testata di sezione (32, §11.6) tornano a essere due
   gradini vicini di una scala sola, che è come il mockup li scrive. */
.page__title {
    font-size: clamp(1.875rem, 3.4vw, 2.125rem);
    line-height: 1.14;
    letter-spacing: -0.011em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
    padding-bottom: 0;
}

/* Il filetto di bronzo sotto il titolo nel mockup non c'è. Il bronzo è già
   trasparente (site.css §27.1), ma lo pseudo-elemento restava lì a tenere in
   piedi il `padding-bottom` che gli faceva posto: 22 pixel di vuoto sotto ogni
   titolo, disegnati per una riga che non si vede più. Lo stacco fra l'apertura
   e la banda sotto lo fa il cambio di fondo, come su tutto il resto del sito. */
.page__title::after { display: none; }

/* La lineetta di bronzo davanti all'occhiello non si spegne più da qui: la §27.9
   di site.css ha scritto `.snum::before { content: none }` per tutto il sito, che
   è dove quella regola doveva stare e dove era stata segnalata. Le due righe che
   questo foglio teneva provvisoriamente sono state tolte: una regola che vive nel
   foglio comune non si riscrive in quello di pagina. */

/*
    LA PASTIGLIA DELLA PAGINA «GRAZIE» ERA RIMASTA UN COMPONENTE DA FONDO SCURO.

    `.pill` è disegnata per stare sopra una fotografia: fondo nero traslucido,
    bordo bianco al 20%, testo bianco. Da quando l'apertura è chiara (§10.1) era
    una barra grigia con dentro del testo bianco — e larga mezza colonna, perché
    dentro una griglia un elemento senza `justify-self` si stira fino al bordo
    della sua traccia. Era il primo oggetto della pagina che conferma l'invio di
    una richiesta, cioè il punto in cui qualcuno controlla se è andata bene.

    Diventa quello che il mockup usa per dire una cosa sola: un rettangolo pieno
    navy, largo quanto il suo testo.
*/
.p-page .page__open .pill {
    justify-self: start;
    width: fit-content;
    border-color: transparent;
    border-radius: var(--radius-s);
    background-color: var(--fill);
    background-image: none;
    color: var(--fill-text);
}

/* La riga di apertura scende con il titolo: misurata a 17.3 pixel, cioè dentro i
   «17-18» che la specifica non ha. Resta un passo sopra il testo corrente — è il
   sottotitolo dell'H1, come quello sotto l'H1 dell'hero del mockup (§4.2) — e un
   passo sotto il titolo, che adesso si ferma a 34. */
.page__lead {
    font-size: clamp(0.9375rem, 1.1vw, 1rem);
    color: var(--text-2);
}

/* ----------------------------------------------------- 11.2 la prosa

   E QUI IL GIRO PRECEDENTE SI ERA FERMATO A META'. Il ragionamento era che il 15
   del mockup è testo di scheda e non una pagina che si legge per righe intere,
   quindi 17 — misurati, con il primo paragrafo a 18.

   Il ragionamento era plausibile e resta un'invenzione: la §2 della specifica ha
   una riga sola, «testo 15px», e non ne ha una seconda per le pagine di testo. Fra
   dedurre una scala che il mockup non mostra e applicare quella che scrive, si
   applica quella che scrive — altrimenti «Chi siamo» e la scheda di un immobile
   sono due siti.

   Quello che tiene in piedi un corpo di 15 pixel su una pagina lunga è
   l'interlinea, e quella non si tocca: 1.8 qui, 1.85 sulle pagine legali. La
   misura di 62ch non cambia — a corpo più piccolo sono righe più corte in pixel,
   cioè esattamente il verso giusto. */
.page__prose { font-size: 0.9375rem; }
.page__prose--legal { font-size: 0.9375rem; }

/* Il primo paragrafo resta «a piena forza», ma la forza è il colore: `--text`
   invece di `--text-2`, che la §2 di questo foglio gli dà già. Un mezzo passo di
   corpo in più su una pagina che ne ha uno solo faceva due misure dove la
   specifica ne ha una. */
.page__prose > p:first-child { font-size: 0.9375rem; }

/*
    E CON LA PROSA SCENDE TUTTO IL TESTO CORRENTE DI QUESTE PAGINE, perché era
    rimasto sparso in tre posti che nessuno guardava insieme. Misurati sul server
    di prova, a 1440:

      · il valore di un recapito (§9)              17.5px
      · l'etichetta di un recapito (§3)            10px, cioè sotto l'occhiello
      · la riga di introduzione di un modulo       19.8px

    Diciannove pixel e otto per la riga che introduce il modulo di valutazione
    erano la misura più grande di tutta la banda: più del testo della pagina, più
    delle etichette dei campi, e a due centimetri da un'intestazione di 32. La
    specifica dà 15 al testo e 11-12 alle etichette; qui vanno tutti e tre.
*/
.details__item dd { font-size: 0.9375rem; }
.details__item dt { font-size: 0.6875rem; }

/* `.lead` è di site.css e la usano anche altre pagine: si restringe alla banda
   del modulo, che è l'unico posto in cui questo foglio la stampa. */
.page__form .lead { font-size: 0.9375rem; }

/* ------------------------------- 11.3 le superfici perdono l'anello di ombre

   La §9 e la §10.2 costruivano ogni superficie con `inset 0 0 0 1px var(--edge)`
   più un'ombra corta, e al passaggio del mouse la sollevavano di tre pixel. Era
   il vocabolario del disegno precedente: una scheda doveva SEMBRARE appoggiata
   sulla pagina.

   Nel mockup una scheda è un rettangolo con un filetto da un pixel e basta. Non
   si solleva, non fa ombra, e al passaggio del mouse quello che cambia è il
   filetto — che è anche l'unica cosa che si può cambiare senza far muovere il
   testo che ha dentro.

   Il filetto torna un `border` e smette di essere un anello. L'anello serviva a
   comporre bordo e ombra nella stessa dichiarazione, per muoverli insieme
   (site.css §1): con l'ombra spenta non c'è più niente da comporre, e un bordo
   vero è quello che il resto del mockup usa. */
.reasons__item,
.steps__item,
.prefs__card,
.details__item {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.25s var(--e);
}

/* Il recapito non è nell'elenco: un riquadro che si accende al passaggio del
   mouse promette che ci si può cliccare sopra, e lì dentro il collegamento è
   il numero di telefono, non la scheda. */
.reasons__item:hover,
.steps__item:hover,
.prefs__card:hover {
    transform: none;
    border-color: var(--line-2);
    box-shadow: none;
}

/* Il quadrato del numero prende la forma del riquadro che il mockup mette
   intorno a ogni icona — `.feats__ic` di site.css §27.5.2: bordo da un pixel,
   raggio 10, niente fondo. Qui dentro c'è una cifra invece di un'icona, ma il
   lavoro è lo stesso, e il numero resta quello che è: il posto nella fila. */
.reasons__n,
.steps__n {
    border: 1px solid var(--hair);
    border-radius: var(--radius-xl);
    background: none;
    box-shadow: none;
    font-family: var(--t);
    font-weight: 600;
    color: var(--accent);
}

/* I titoli dentro le schede erano tarati su `opsz 48` dalla §8, che è ancora il
   taglio display: la §27.2 di site.css li vuole tutti sullo stesso serif, e
   questo foglio, caricato dopo, la stava scavalcando su ogni h2 e h3 che
   nomina. */
.page__closing-title,
.prefs__title,
.reasons__title,
.steps__title {
    letter-spacing: -0.011em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

.page__closing-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.prefs__title,
.reasons__title,
.steps__title { font-size: 1.25rem; }

/* -------------------------------- 11.4 il modulo prende la forma del mockup

   «Hai una domanda?» nel mockup è: tre campi in riga — nome, email, telefono —
   poi l'area di testo a tutta larghezza, poi il bottone navy pieno che chiude
   il modulo da un bordo all'altro.

   `.form` di site.css è una griglia a due colonne, e i due partial hanno
   smesso di chiedere la riga intera per il nome: qui si aggiunge la terza
   colonna, e solo da 50rem in su. Sotto restano le due di site.css, perché tre
   campi affiancati su un telefono sono tre campi da sessanta pixel.

   La regola sta in questo foglio e non in site.css perché vale per i moduli di
   QUESTE pagine, che hanno tutta la larghezza della banda. Il modulo della
   scheda immobile vive in una colonna stretta accanto alla fotografia, e lì tre
   colonne sarebbero il difetto invece della correzione. */
@media (min-width: 50rem) {
    .page__form .form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Il bottone pieno a tutta larghezza, e sotto di lui — non accanto — la riga
   che dice entro quanto si risponde. Erano affiancati: un bottone largo quanto
   il suo testo e una frase grigia alla sua destra sono due cose che si
   contendono la stessa riga, e nel mockup il bottone chiude il modulo. */
.page__form .form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.page__form .form__actions .cta { width: 100%; }

/* Il raggio dei campi non si patcha più da qui: la §27.9 di site.css ha scritto
   `.form__field { border-radius: var(--radius) }` per tutto il sito — un raggio
   solo, che è quello che la §3 della specifica chiede — e la pezza locale che
   questo foglio teneva è stata tolta. Misurato dopo: 6px sul campo di ricerca del
   404 e sui campi del modulo, gli stessi del bottone che gli sta accanto. */

/* ----------------------------------------------- 11.5 il 404 e i suoi elenchi

   La pagina 404 tiene la sua apertura scura — è l'unica del file a non essere
   una pagina istituzionale, e il test lo verifica — ma parla la stessa lingua
   di tutte le altre: il campo di ricerca ha il raggio di sopra, e i nomi delle
   sezioni scendono dal display alla scala del mockup. Restano righe e non
   schede: una lista di porte è un elenco, e il mockup i suoi elenchi
   («Informazioni utili») li fa esattamente così. */
/* 22 pixel misurati: il nome di una sezione era grande quanto un H3 e mezzo. La
   §2 dà 19-21 al titolo di un blocco, e questi sono titoli di blocco messi in
   fila — il taglio è lo stesso dell'elenco «Informazioni utili» del mockup. */
.ways__name {
    font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
    letter-spacing: -0.011em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

.ways__n { font-family: var(--t); }

/* -------------------------- 11.6 due regole che dovrebbero stare in site.css

   Nessuna delle due è una scelta di questa pagina: sono due conseguenze della
   §27 che non sono state raccolte, e si vedono su tutto il sito pubblico. Sono
   scritte qui, ristrette alle pagine di questo foglio, perché su queste pagine
   una delle due rende un bottone illeggibile — e sono segnalate nella consegna
   perché il loro posto è site.css, in un blocco solo invece che in cinque.

   1. IL BOTTONE FANTASMA È DIVENTATO UN BOTTONE PIENO CON IL TESTO SCURO.
      La §27.4 chiude con `.cta { background: var(--blue) }` e sta DOPO la §21,
      dove `.cta--ghost` dichiara il suo `background-color`. Stessa specificità,
      vince chi viene dopo: da lì in poi il fantasma è un rettangolo navy con
      sopra `color: var(--text)`, cioè navy su navy — un contrasto intorno a
      1.3:1, che non è una sfumatura di gusto ma un pulsante che non si legge.
      «Scrivi una email» su Contatti e le chiusure di Chi siamo e Grazie sono
      esattamente quel bottone.

   2. LE TESTATE DI SEZIONE SCRIVONO ANCORA IN DISPLAY.
      La §27.2 tara il serif del mockup su `h1, h2, h3, h4`, ma la §25.1 aveva
      già scritto `.shead h2` — un selettore più specifico, e quindi più forte,
      qualunque sia l'ordine. «Dove trovarci» resta su `opsz 144` mentre il
      titolo della pagina sopra di lui è già passato a 40: due serif diversi
      nella stessa schermata.

      Con la taglia succede la stessa cosa e il risultato si vede peggio: `h2`
      arriva a 52.8 pixel, il titolo della pagina si ferma a 42, e la testata
      di una sezione risulta PIÙ GRANDE del titolo che la contiene. Il mockup
      scrive le sue testate di sezione fra 28 e 32 (§2 della specifica), e da
      lì escono i 32 di questa regola. */
.p-page .cta--ghost,
.p-not-found .cta--ghost {
    background-color: color-mix(in srgb, var(--text) 4%, transparent);
    background-image: none;
}

.p-page .shead h2,
.p-not-found .shead h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.16;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
    letter-spacing: -0.011em;
}

/* Il titolo del modulo è la testata della sua banda e va misurato con le altre:
   la §8 lo lasciava salire a 40 pixel, che accanto a una testata di sezione da
   32 lo faceva leggere come il titolo della pagina. */
.form__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.16;
}

/* 3. E LA TERZA, CHE È LA PIÙ GROSSA: UN BOTTONE NAVY SU UNA BANDA NAVY.

   La §27.1 ha portato `--night` a #1C3D6E e `--blue` allo STESSO #1C3D6E: sono
   la stessa cifra, scritta in due token. Un `.cta` pieno su una banda scura è
   quindi un rettangolo del colore esatto del fondo su cui sta — non un contrasto
   basso, proprio lo stesso colore. Su questo foglio è il bottone «Cerca» del
   404, cioè l'unico comando della sola pagina da cui bisogna uscire; su
   `sec--deep` (#16325C contro #1C3D6E) non sparisce ma ci va vicino, e il
   perimetro di un comando vuole 3:1 (WCAG 1.4.11).

   La risposta è quella di sempre quando un pieno finisce su un fondo del suo
   stesso colore: si inverte. Bianco pieno, testo navy — che è anche il modo in
   cui il mockup scrive i suoi unici due comandi su scuro, nel piè di pagina.

   Anche questa appartiene a site.css, accanto ai token che l'hanno prodotta: là
   sarebbe una riga sola su `.sec--dark, .sec--deep, .hero, .foot`, cioè il
   blocco che già reassegna tutto il resto per le bande scure. */
.p-page .sec--dark .cta:not(.cta--ghost),
.p-page .sec--deep .cta:not(.cta--ghost),
.p-not-found .sec--dark .cta:not(.cta--ghost),
.p-not-found .sec--deep .cta:not(.cta--ghost) {
    background: var(--w);
    color: var(--blue);
}

.p-page .sec--dark .cta:not(.cta--ghost):hover,
.p-page .sec--deep .cta:not(.cta--ghost):hover,
.p-not-found .sec--dark .cta:not(.cta--ghost):hover,
.p-not-found .sec--deep .cta:not(.cta--ghost):hover {
    background: var(--blue-l);
    color: var(--blue);
}

/* 4. E I TITOLI SULLE BANDE SCURE SONO TORNATI SCURI.

   La §1 di site.css scrive `h1, h2, h3, h4 { color: var(--heading) }`, e
   `--heading` è un token di ruolo: vale `--ink` su bianco e `#fff` sulle bande
   scure, che è tutto il motivo per cui i componenti di questo progetto non
   hanno bisogno di un selettore `.sec--dark .qualcosa`.

   La §27.2 riscrive la stessa regola con `color: var(--ink)` — un valore
   letterale al posto del ruolo — e viene dopo. Da quel momento ogni titolo su
   una banda scura è navy su navy: si vede sulla fotografia di apertura di
   un'esperienza (parts/experiences.css §14.5, dove l'H1 era diventato
   illeggibile) e su ogni testata di sezione delle bande `sec--dark` e
   `sec--deep`.

   Qui i titoli tornano a leggere il ruolo. Non è un colore nuovo: è quello che
   la §1 aveva già deciso, ristretto alle pagine di questo foglio finché la
   correzione non torna dov'è nata. */
/* Dentro <main> e non su tutta la pagina: la testata e il piè di pagina sono di
   altri due fogli, e una regola che ridipinge i loro titoli da qui sarebbe una
   sorpresa per chi li sta scrivendo. Qui serve il corpo della pagina. */
.p-page main h1, .p-page main h2, .p-page main h3, .p-page main h4,
.p-not-found main h1, .p-not-found main h2, .p-not-found main h3, .p-not-found main h4 {
    color: var(--heading);
}

/* 5. E l'ultimo bronzo rimasto sul sito: il filetto sotto le testate di
   sezione. La §27.3 lo spegne con `.shead`, ma la §26 lo aveva scritto anche
   come `.sec--dark .shead` / `.sec--deep .shead`, che sono più specifici e
   vincono qualunque sia l'ordine. Su queste pagine è la lineetta color bronzo
   sotto la chiusura di «Chi siamo» e «Come lavoriamo». */
.p-page .shead,
.p-not-found .shead { background-image: none; }

/* ==========================================================================
   12. LA RIFINITURA — quattro dettagli misurati, non un ridisegno

   Il committente ha guardato il risultato e ha chiesto di limare. Qui ci sono
   solo cose che si misurano prima e dopo: nessuna banda cambia fondo, nessun
   componente cambia forma.
   ========================================================================== */

/* ------------------- 12.1 l'occhiello torna attaccato al suo titolo

   L'OCCHIELLO E IL TITOLO SONO UNA COPPIA SOLA, E SUL SITO AVEVA QUATTRO
   DISTANZE DIVERSE. Misurate a 1440 sul server di prova:

     · dentro ogni `.shead` (nove volte sulle mie pagine)     12px
     · l'apertura dell'elenco delle esperienze                20px
     · l'apertura del 404                                     26px
     · l'apertura delle sei pagine istituzionali              44px

   I 44 non erano una scelta: erano tre spazi sommati senza che nessuno li
   guardasse insieme — `margin-bottom: 12px` dell'occhiello (site.css), il
   `row-gap: 1.25rem` della griglia dell'apertura (§10.1), e il `margin-top` del
   titolo, 0.875rem qui sotto e 0.75rem dentro la §10.1. Su una banda che apre la
   pagina, quarantaquattro pixel fra un occhiello alto diciotto e il titolo lo
   fanno leggere come due blocchi invece che come una testata.

   Dodici, come dentro ogni testata di sezione: la griglia non porta più spazio
   fra le righe e il titolo non porta più margine, così l'unico spazio che resta
   è quello che l'occhiello ha già. Lo stacco fra il titolo e la riga di apertura
   resta dov'era — i 22px che `.page__lead` si dà da sé.

   Effetto secondario e voluto: a due colonne le due tracce cominciano adesso
   alla STESSA ordinata (prima il titolo stava a 238 e la riga di apertura a
   234), che è quello che il commento della §10.1 dichiarava di fare. */
.page__open .page__open-in { row-gap: 0; }

.page__open .page__title,
.page__open .page__open-in .page__title { margin-top: 0; }

/* A una colonna la riga di apertura tiene il suo stacco dal titolo; a due sta
   accanto al titolo e parte dalla sua stessa riga. */
.page__open .page__open-in .page__lead { margin-top: 1.375rem; }

/*
    E VALE ANCHE PER IL 404, che l'aveva perso.

    Il 404 apre con la stessa forma a due colonne ma senza `.page__open-in`: il suo
    sommario sta dentro un `.container` nudo, quindi la regola non lo raggiungeva e
    si teneva i 22px che `.page__lead` si da' da se'. Misurato sull'inchiostro vero
    (Range.getClientRects, non la scatola): su «Chi siamo» e «Contatti» le due
    colonne cominciano a 3 pixel l'una dall'altra, sul 404 a 25. Era l'unica
    apertura a due colonne disallineata del sito.
*/
@media (min-width: 58rem) {
    .page__open .page__open-in .page__lead,
    .page__open > .container > .page__lead { margin-top: 0; }
}

/* ---------------- 12.2 i riquadri che non si possono premere non si accendono

   La §11.3 ha tolto il sollevamento a tutte le superfici e ha lasciato il
   filetto che si scurisce sotto il puntatore — `--hair` #e3e8ef → `--line-2`
   #b9c3d1 — a `.reasons__item`, `.steps__item` e `.prefs__card`.

   Su `.prefs__card` è giusto: dentro c'è un bottone o un collegamento. Sugli
   altri due no, e si conta: le tre ragioni di «Vendi casa» e i tre passaggi di
   «Grazie» contengono ZERO elementi premibili (misurato:
   `item.querySelectorAll('a,button').length === 0` su tutte e sei), e il
   `cursor` resta `auto`. Un riquadro che si accende quando ci passi sopra
   promette che ci si può cliccare: è esattamente la ragione per cui la §11.3
   aveva già tenuto `.details__item` fuori dall'elenco, e questi due erano
   rimasti dentro.

   Restano riquadri, restano con il loro filetto: semplicemente non rispondono a
   un gesto a cui non hanno niente da rispondere. */
.reasons__item:hover,
.steps__item:hover { border-color: var(--hair); }

/* ---------------------------- 12.3 il telefono e l'email si possono premere

   Sono i due collegamenti per cui esiste la pagina «Contatti», e su un telefono
   erano due bersagli alti DICIANNOVE pixel: misurati a 390 con Chrome,
   `347 7221506` 93×19 e `casecostatoscana@gmail.com` 220×19, contro i 44×44 che
   il committente chiede e i 24×24 minimi di WCAG 2.5.8.

   Erano alti diciannove perché sono testo dentro un `<dd>` e nient'altro: un
   collegamento in linea è alto quanto la sua riga. Diventano blocchi in linea
   con l'imbottitura che porta la riga a 44, senza spostare il testo — il
   margine negativo restituisce alla card i pixel che l'imbottitura le toglie,
   così l'etichetta sopra e il valore sotto restano dove erano.

   Solo dove il dito è lo strumento: da 44rem in su il puntatore è preciso e un
   recapito torna a essere una riga di testo. */
@media (max-width: 43.99rem) {
    .details__item a {
        display: inline-block;
        min-height: 44px;
        padding-block: 0.6875rem;
        margin-block: -0.6875rem;
    }
}