/* ==========================================================================
   Experiences — the list and the single page.

   This is the site's unique content and where its SEO value sits, so the single
   page is treated as an article: a full-bleed opening photograph, the text in a
   real measure, the practical facts in a designed block beside it, the gallery,
   and at the foot the properties in that area — the commercial point of the whole
   section. The experience sells the area, the area sells the house.

   Written on the ROLE TOKENS only (docs/DESIGN.md §10), never on a literal
   colour, so every component here is correct on the five grounds these two pages
   use — night, white, paper, pale blue, deep blue — and in dark mode, without one
   extra selector.

   What comes from site.css and is deliberately NOT repeated here: the bands
   (`.sec` and its ground modifiers, `.sec--cut`), the section headers (`.shead`,
   `.snum`, `.arrow`), the filter pills (`.chips`, `.chip`, `.chip--off`), the
   card shell (`.card`, `.card__ph`, `.card__go`, `.card__b`, `.card__loc`,
   `.card__t`), the running-text measure (`.prose`), the results counter
   (`.rescount`) and the reveal (`.rv`). This file styles what the system has no
   name for, and nothing else.
   ========================================================================== */

/* ------------------------------------------------- 1. the split headline

   `.hero h1 .w` in site.css is scoped to the home's hero, and so is the
   reduced-motion rule that puts the words back. Both openings of this section
   therefore declare the entrance for themselves — otherwise a reader with
   reduced motion would get a heading that never becomes visible, which is the
   exact bug docs/DESIGN.md §13 says not to reintroduce. */

.experiences__title .w,
.experience__title .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px);
    animation: up 0.9s var(--e) forwards;
}

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

/* --------------------------------------------- 2. the list, dark opening */

/* A band, not a page header: it has its own ground and its own breathing room,
   so the eye registers where the section begins. */
.experiences__open {
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.experiences__title {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(2.375rem, 6.4vw, 4.75rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
    font-variation-settings: 'opsz' 144;
    text-wrap: initial;      /* the word-by-word split does the breaking */
}

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

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

/* ------------------------------------------ 3. the themes, pale blue band */

/* Plain links, never a form: they are addresses one can share and a search
   engine can follow, and that is the whole reason this section exists.
   `.chips` carries a 22px top margin for the catalogue, where it sits under the
   filter bar; here the section header has already left the room. */
.experiences__chips { margin-top: 0; }

/* The figure inside a pill. No colour of its own: on the solid chip it inherits
   white, on `.chip--off` it inherits `--text-2`, and both pass on their ground —
   a dimmed count would not. */
.experiences__count {
    margin-left: 0.1875rem;
    font-family: var(--m);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ 4. the grid, on white */

/* `.rescount` is the catalogue's results counter, and there it sits above a grid
   on its own line — which is where its 34px of padding comes from. Here it is the
   right-hand item of a section header, and the header has already left the room,
   so the padding has to go. */
.experiences__total {
    margin: 0;
    padding: 0;
}

.experiences__empty {
    max-width: 46ch;
    margin: 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--hair);
}

/* A grid cell, so the card fills the row height: three summaries of two, three
   and two lines otherwise leave three different bottom edges in one row, which is
   the sort of untidiness the owner reads as "not designed". */
.experiences__item {
    display: grid;
    min-width: 0;
}

/* ------------------------------------------------------- 5. the card

   The anchor is the whole card: `.card` gives it the ground, the radius, the
   shadow, the 8px lift, the 1.07 photograph zoom and the arrow badge. What is
   left is the box the photograph is cropped into and the title line, which is
   the one thing the system has no span for. */

.experience-card__ph {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--ph-a);
}

.experience-card__ph > .image,
.experience-card__ph > .image--missing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-card__title {
    display: block;
    margin-top: 0.5625rem;
    font-family: var(--d);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--heading);
    font-variation-settings: 'opsz' 60;
}

/* `.card__t` gives the summary its size, its colour and its margin; a span needs
   to be a block before a margin means anything. */
.experience-card__summary { display: block; }

.experience-card:focus-visible { outline-offset: 3px; }

/* -------------------------------- 6. the single page, opening photograph */

.experience__open {
    display: grid;
    align-items: end;
    min-height: min(76svh, 40rem);
    padding-block: clamp(3rem, 8vw, 5rem);
    overflow: hidden;
    /* Without a stacking context of its own the negative-z photograph would paint
       behind the band's own background, which is to say nowhere. */
    isolation: isolate;
}

.experience__frame {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.experience__frame > .image,
.experience__frame > .image--missing {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The Ken Burns of docs/DESIGN.md §5, and it is the system's own keyframes: the
   one motion on the page that runs without being triggered. */
@media (prefers-reduced-motion: no-preference) {
    .experience__frame > img {
        animation: kb 26s ease-in-out infinite alternate;
    }
}

/* The scrim. Under the caption, over the photograph. */
.experience__open::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(4, 12, 16, 0.94) 0%,
        rgba(4, 12, 16, 0.58) 44%,
        rgba(4, 12, 16, 0.24) 100%
    );
}

.experience__caption { position: relative; }

.experience__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    margin: 0 0 0.875rem;
    font-family: var(--m);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.experience__kicker > span + span::before {
    content: '·';
    margin-right: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.experience__title {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2.125rem, 5.6vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-variation-settings: 'opsz' 144;
    text-wrap: initial;
}

.experience__lead {
    max-width: 44ch;
    margin: 1.125rem 0 0;
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.6;
    color: var(--text);
}

/* ------------------------------------- 7. the article and its facts, white */

/* Two columns from 980px, one below it, and every track is minmax(0, 1fr):
   the automatic minimum of an `auto` track is its content, and one unbreakable
   figure in the facts block would otherwise make the document wider than the
   phone (docs/DESIGN.md §15). */
.experience__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 5vw, 3.25rem);
    align-items: start;
}

@media (min-width: 61.25rem) {
    .experience__layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: 4rem;
    }
}

/* The practical facts: a designed block beside the prose, not a table under it.
   Sticky from the width at which there is a second column to be beside. */
.experience-dossier {
    background: var(--ground-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius-l);
    padding: 1.5rem 1.5rem 1.625rem;
}

@media (min-width: 61.25rem) {
    .experience-dossier {
        position: sticky;
        /* --notice-h is measured by site.js while the language notice is on
           screen and 0 the rest of the time: without it the block would sit
           under the notice on a first visit from a foreign browser. */
        top: calc(var(--top-h) + var(--notice-h) + 1.5rem);
    }
}

.experience-dossier__title {
    margin: 0 0 1.125rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--hair);
    font-family: var(--m);
    font-size: 0.65625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.experience-dossier__list { margin: 0; }

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

.experience-dossier__value {
    margin: 0.3125rem 0 0;
    font-size: 0.96875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
}

/* A hairline between rows and never above the first one: `dd + dt` is the join,
   so a dossier of one row carries no stray rule. */
.experience-dossier__value + .experience-dossier__label {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hair);
}

/* Test hook: tests/Functional/ExperiencesTest asserts this class on the values
   that are figures. Keep it on the value element whatever the markup around it. */
.experience-dossier__value--data {
    font-family: var(--m);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.experience-dossier__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    overflow-wrap: anywhere;
}

.experience-dossier__link:hover { color: var(--text); }

/* -------------------------------------------------- 8. the gallery, paper */

/* The first photograph is the wide plate; the rest pair up under it, and a
   trailing odd one widens instead of sitting alone in half a row. A gallery of
   one therefore still reads as a composition rather than as a leftover. */
.experience-gallery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .experience-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .experience-gallery__item:first-child,
    .experience-gallery__item:nth-child(even):last-child { grid-column: 1 / -1; }
}

.experience-gallery__item { min-width: 0; }

.experience-gallery__frame {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    background: var(--ph-a);
    box-shadow: var(--sh);
}

.experience-gallery__item:first-child .experience-gallery__frame,
.experience-gallery__item:nth-child(even):last-child .experience-gallery__frame {
    aspect-ratio: 16 / 9;
}

.experience-gallery__frame > .image,
.experience-gallery__frame > .image--missing {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------ 9. the properties in that area, deep blue */

.experience-properties__item {
    display: grid;
    min-width: 0;
}

/*
   partials/property-card.html.twig belongs to the catalogue page and is styled in
   parts/catalog.css, which this page does not load: one page, one part file
   (docs/DESIGN.md §14). It does not need to be — the partial is built on the
   system's own card vocabulary (`.card`, `.card__ph`, `.card__b`, `.card__loc`,
   `.card__p`, `.card__d`, `.dc`, `.card__go`, `.badge`), all of which live in
   site.css and read the role tokens, so on this deep band the cell arrives with
   the right ground, the right hairline, the price in `--blue-4` and the hover
   lift already correct.

   Two things the system leaves to the page, and they are the only two rules here:
   the inner anchor is not the `.card` element, so it still carries a browser
   underline; and `.card__ph` declares no ratio, so three photographs of three
   proportions would give a row three different heights. Both frame names are
   matched — the partial belongs to another agent and has been through one rename
   already, and a selector that costs nothing is cheaper than a broken row.
*/
.experience-properties .property-card__link {
    color: inherit;
    text-decoration: none;
}

.experience-properties .property-card__frame,
.experience-properties .property-card__photo {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--ph-a);
}

.experience-properties .property-card__frame > .image,
.experience-properties .property-card__frame > .image--missing,
.experience-properties .property-card__photo > .image,
.experience-properties .property-card__photo > .image--missing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   10. The phone and the tablet.

   This file is written mobile-first and its two existing queries are
   `min-width`, so what follows adds at a width rather than undoing at one — with
   one exception that is stated where it happens, because the fault it fixes
   exists only BETWEEN two widths and a range needs two bounds.

   Measured with `Emulation.setDeviceMetricsOverride`, `mobile: true`, at
   320/360/390/430/768/1024 on the seeded database. A headless window clamps at
   about 500 px and then reports the width you asked for, so no figure below came
   from resizing a window.
   ========================================================================== */

/* --------------------------------------------------- the measure, both ends

   `.prose` caps at `66ch`, and `ch` in Inter is 11.04 px, so the cap computes
   to 728.6 px. At 768 the container is 728 px, so the story ran the FULL width:
   79 characters on the first line at 19.5 px and about 88 at 17.5 px. That is
   the "online newspaper" the three rejected directions were rejected for, and
   it is the widest thing on the page at exactly the width docs/DESIGN.md says
   nothing is designed for.

   36rem is 576 px: 71 characters at 17.5 px, 64 at 19.5 px. Inside 45-75 at
   both sizes, where 66ch is inside it at neither. Below 430 the container is
   narrower than the cap and nothing changes.

   The list page's introduction had no cap at all — 86 characters a line at 768,
   87 at 1024. It is the same paragraph doing the same job, so it takes the same
   measure. */

.experience__prose,
.experiences__body { max-width: 36rem; }

/* At four words a line the site's 1.78 leading reads as a list of fragments
   instead of a sentence, and 19.5 px in a 280 px column is 29 characters. */
@media (max-width: 30rem) {
    .experience__prose { font-size: 1rem; line-height: 1.62; }
    .experience__prose p:first-child { font-size: 1.0625rem; }
    .experiences__body { line-height: 1.62; }
}

/* ------------------------------------------- the facts block between widths

   The two-column layout starts at 61.25rem. Below 40rem the dossier is a phone
   card and correct. BETWEEN those two it was a panel 728 px wide and 377 px
   tall holding four values of six to thirty characters — "2 h 30" alone on a
   678 px line, four times over. Nine tenths of it was white.

   This is the one `max-width` bound in the file and it is not undoing a wider
   rule: there is no wider rule here, the fault lives strictly inside the range,
   and a bare `min-width: 40rem` would follow the block into the sidebar at
   61.25rem and cap a 336 px column at 416.

   Only the WIDTH was wrong, and it is worth being precise about that: 377 px for
   four facts is the block's designed density — it is 377 px in the sidebar at
   1024 as well, where it is 336 px wide and looks right. So the fix is a cap and
   not a relayout. At 26rem the panel is 416 px, near enough to the 336 px it was
   drawn at, and the 312 px of band left beside it is the same left-aligned
   emptiness the story above it now has (rule 2 of docs/DESIGN.md: nothing is
   centred, so a block that does not need the width simply does not take it).

   Neither a two-column grid nor `columns: 2` was the answer. `dt` and `dd` are
   siblings: a grid gives each its own cell and breaks every label off its value,
   and a column flow puts the join rule of `dd + dt` at the top of column two,
   floating above nothing. */

@media (min-width: 40rem) and (max-width: 61.1875rem) {
    .experience-dossier { max-width: 26rem; }
}

/* ------------------------------------------------ forty-four pixels

   Measured before this block, at every width from 320 to 1024: the theme pills
   37.4 px tall when active and 39.4 px when not — an active pill two pixels
   SHORTER than its neighbours, because `.chip--off` carries a border and
   `.chip` does not, which is visible as a wobble in the row — and the "back to
   the experiences" arrow 19 px tall.

   On the list page the pills ARE the navigation. 44 px is the width of an adult
   fingertip, and one `min-height` on both states settles the wobble at the same
   time. */

.experiences__chips .chip {
    min-height: 2.75rem;
    align-items: center;
}

/* The one arrow on either page: "Esperienze", in the header row of the story
   section. It keeps its type and gains a box — the target grows, the line does
   not move. */
.shead .arrow {
    min-height: 2.75rem;
    align-items: center;
}

/* A link inside the facts block is a phone number or a website and it is the
   one thing on that card anybody taps. */
.experience-dossier__link { min-height: 2.75rem; }

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

   The list and the single experience. The cards are the shared `.card` with a
   frame and a title of their own, so most of §24 arrives; the opening bands, the
   article's fact column and the gallery are this file's and did not.
   ========================================================================== */

/* ---- the two openings --------------------------------------------------- */

.experiences__title,
.experience__title {
    letter-spacing: -0.038em;
    font-variation-settings: 'opsz' 144;
}

.experience__title {
    text-shadow: 0 1px 2px rgba(4, 12, 16, .26), 0 2px 40px rgba(4, 12, 16, .32);
}

.experience__lead { text-wrap: pretty; }

.experience__kicker { letter-spacing: 0.18em; }

/* ---- the card ------------------------------------------------------------

   The same joint the shared card got: a hairline along the bottom of the frame
   and the card's own ground fading up into the photograph. */

.experience-card__ph { box-shadow: inset 0 -1px 0 var(--edge); }

.experience-card__title {
    letter-spacing: -0.024em;
    font-variation-settings: 'opsz' 48;
}

/* ---- the article's fact column ------------------------------------------

   A sticky list of labels and values beside the text. It was type on the band
   with a rule above it; it is now a panel, which is what a column that follows
   the reader down the page has to be to stop reading as leftover text. */

.experience-dossier {
    padding: clamp(1.375rem, 2.5vw, 1.75rem);
    border: 0;
    border-radius: var(--radius-l);
    background: var(--card);
    box-shadow: var(--sh), inset 0 0 0 1px var(--edge);
}

.experience-dossier__title { letter-spacing: 0.18em; }

.experience-dossier__link {
    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;
}

.experience-dossier__link:hover { text-decoration-color: currentColor; }

/* ---- the gallery --------------------------------------------------------- */

.experience-gallery__frame {
    box-shadow: var(--sh), inset 0 0 0 1px rgba(8, 22, 29, .10);
    transition: transform .4s var(--e), box-shadow .4s var(--e);
}

.experience-gallery__frame:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-2), inset 0 0 0 1px rgba(8, 22, 29, .14);
}

/* ==========================================================================
   12. «RICHIEDI INFORMAZIONI» — the band that closes an experience page

   The page used to end at the photographs, or at the properties near it, and
   both endings send the reader somewhere else. Somebody who has just read about
   the Etruscan tombs and wants to go on a Saturday had no way to say so from
   here: they had to find «Contatti» in the menu and start again, which is where a
   lead is lost.

   It is a LINK and not a form. The contacts page holds the real one — already
   maintained, translated and rate-limited — and a fourth copy of it here would be
   a fourth place to fix a validation rule. What the band adds is the telephone
   number in full, which is what somebody standing in front of a ruin with a
   signal actually uses.
   ========================================================================== */

.experience-ask__in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 44rem;
    margin-top: 26px;
}

.experience-ask__note {
    margin: 0;
    font-size: 17px;
    line-height: 1.66;
    color: var(--text-2);
}

/* The two actions wrap rather than shrink: a telephone number squeezed onto two
   lines is a number nobody can read back to themselves. */
.experience-ask__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.experience-ask__hours {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14.5px;
    color: var(--text-3);
}

.experience-ask__hours svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    stroke: var(--accent);
    stroke-width: 1.6;
    fill: none;
}

/* ==========================================================================
   13. L'APERTURA DELL'ELENCO DIVENTA CHIARA

   Stessa mossa delle sei pagine istituzionali (parts/page.css §10) e per lo
   stesso motivo: sotto quel nero non c'era una fotografia. La scheda di una
   singola esperienza tiene la sua apertura scura, perché lì una fotografia a
   tutta pagina c'è ed è il punto.
   ========================================================================== */

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

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

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

    .experiences__open-in .snum { grid-column: 1; grid-row: 1; }
    .experiences__open-in .experiences__title { grid-column: 1; grid-row: 2; }
    .experiences__open-in .experiences__body {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: 0.5rem;
    }
}

.experiences__title {
    position: relative;
    margin: 0.5rem 0 0;
    padding-bottom: clamp(1rem, 2vw, 1.375rem);
    max-width: 18ch;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.032em;
    color: var(--heading);
    font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}

/* Il filetto di bronzo appartiene al titolo, non alla banda: su un contenitore
   con la gronda uno sfondo comincia dal margine dello schermo e non da dove
   comincia il testo (parts/page.css §10.1). */
.experiences__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: var(--bronze);
}

.experiences__body {
    max-width: 48ch;
    color: var(--text-2);
}

/* ==========================================================================
   14. LA LINGUA DEL MOCKUP, PORTATA SULLE ESPERIENZE

   Il mockup disegna due schermate e nessuna delle due è questa. La regola è
   quella della specifica: si estende la sua lingua, non se ne inventa una
   seconda — filetto da un pixel, raggio 6, serif a contrasto medio, niente
   ombre dove il mockup non ne ha.

   Le bande non si toccano: l'elenco apre chiaro e la scheda di una singola
   esperienza apre scura perché lì, sotto il nero, una fotografia a tutta pagina
   c'è davvero. È la stessa distinzione della §13, e nel mockup il velo scuro
   sull'hero è esattamente questo.
   ========================================================================== */

/* ----------------------------------------------- 14.1 i due titoli serif

   La §11 li tarava su `opsz 144` e `-0.038em`: il taglio display di Fraunces,
   aste sottilissime e lettere strette una sull'altra. La §27.2 di site.css ha
   portato tutto il sito sul serif del mockup — contrasto medio, `WONK` a zero,
   spaziatura quasi normale — e questo foglio, caricato dopo, era rimasto
   l'ultimo posto in cui il titolo di una pagina parlava ancora la lingua
   vecchia. */
.experiences__title,
.experience__title {
    letter-spacing: -0.011em;
    font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}

/* LA TAGLIA, MISURATA: 42 pixel contro i 30-34 della specifica.

   La §2 ha una riga sola per questo titolo — «H1 scheda 30-34px» — e il clamp si
   fermava a 2.625rem, cioè 42. Non è mezzo passo: accanto a una testata di
   sezione da 32 (§14.5) un H1 da 42 fa una scala a due gradini larghi, e il
   mockup ne ha uno solo. Il minimo resta 30, che è il fondo dello stesso
   intervallo: sul telefono il titolo non ha bisogno di scendere sotto la
   specifica. */
.experiences__title {
    font-size: clamp(1.875rem, 3.4vw, 2.125rem);
    line-height: 1.14;
    padding-bottom: 0;
}

/* Sulla fotografia il titolo può restare grande: è l'H1 dell'hero, e il mockup
   lo scrive fra i 56 e i 64 pixel. Quello che scende è il contrasto delle aste,
   non la taglia. */
.experience__title {
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 1.08;
}

/* Il filetto di bronzo sotto il titolo dell'elenco: nel mockup non c'è. Il bronzo
   è già trasparente (site.css §27.1) ma lo spazio che occupava no — 22 pixel
   sotto il titolo, disegnati per una riga che non si vede più.

   La lineetta davanti all'occhiello se n'è andata da sola: la §27.9 di site.css
   ha scritto `.snum::before { content: none }` per tutto il sito, e le due righe
   che questo foglio teneva provvisoriamente (`.p-experiences .snum::before`) non
   servono più. Tolte: una regola che vive nel foglio comune non si riscrive qui. */
.experiences__title::after { display: none; }

/* ------------------------------------- 14.2 la scheda prende la forma del
   mockup: bordo sottile, fotografia in cima, titolo, meta

   `.card` di site.css è la scheda del disegno precedente: raggio 18, tre strati
   d'ombra, e otto pixel di sollevamento al passaggio del mouse. Nel mockup una
   scheda è un rettangolo con un filetto da un pixel, la fotografia in cima
   ritagliata dallo stesso raggio, e sotto il titolo con la sua riga di dati.
   Non si solleva e non fa ombra; quello che si muove al passaggio del mouse è
   il filetto, e la fotografia che si avvicina — quella resta, perché è il solo
   segno che dice che la cella intera è un collegamento.

   La regola vive qui e non in site.css perché `.card` è di tutti: il catalogo e
   la home hanno la loro scheda immobile (`.property-card`, site.css §27.5.7) e
   questa è la scheda di un'esperienza. Quando le due forme avranno finito di
   assestarsi, sarà una sola e starà là. */
.experience-card {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.25s var(--e);
}

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

/*
    LE COSTOLE, cioè quello che tiene in piedi la forma appena descritta.

    Sono le stesse tre della scheda immobile (site.css §27.8) e fanno lo stesso
    lavoro: l'ancora è una colonna alta quanto la cella, il corpo è la parte che
    cresce, e il finto bottone in fondo ci arriva con `margin-top: auto`. Senza,
    una riga di tre schede con sommari di due, tre e due righe manda i tre bottoni
    a tre altezze diverse — che è il disallineamento che una griglia fa notare per
    primo.

    QUESTE RIGHE NON APPARTENGONO A QUESTO FOGLIO: la stessa scheda si stampa
    anche in fondo alla pagina di un immobile (`.pexp`, templates/public/property.html.twig),
    che carica parts/property.css e NON questo. Il loro posto è site.css accanto
    alla §27.8, ed è segnalato nella consegna.
*/
.experience-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.experience-card .card__b {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Il velo che sfumava il fondo della scheda dentro la fotografia serviva a
   tenere insieme due superfici senza un bordo. Adesso il bordo c'è.

   L'anello intorno alla fotografia (`.experience-card__ph::after`, site.css
   §24.5) non si spegne più da qui: lo fa la §27.9 del foglio comune, insieme a
   quelli della scheda immobile e del mosaico. Una cornice che il mockup vieta si
   toglie in un posto solo. */
.experience-card__ph {
    box-shadow: none;
    border-bottom: 1px solid var(--hair);
}

.experience-card__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 È TESTO, NON UN OCCHIELLO.

    `.card__loc` di site.css è disegnata per stare SOPRA un titolo: 10 pixel,
    maiuscoletto, 1.6 di spaziatura fra le lettere. Da quando la riga è scesa sotto
    il titolo (partials/experience-card.html.twig) quella forma dice la cosa
    sbagliata — un occhiello dopo il suo titolo è un secondo occhiello — e su una
    griglia di nove celle erano nove righe di maiuscoletto piccolo.

    Nel mockup la riga sotto il titolo della scheda è una didascalia: sans, corpo
    normale, 13 pixel, grigia (§2 della specifica, riga «meta, didascalie»). Il
    colore e la famiglia li porta già `.card__loc`; qui cambia la forma. */
.experience-card .card__loc {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/*
    IL FINTO BOTTONE IN FONDO, la stessa cosa che chiude la scheda immobile.

    Misure prese da `.property-card__go` (site.css §27.5.7) e non scelte di nuovo:
    è la stessa scheda del mockup, e due bottoni di altezza diversa sulla stessa
    schermata — una griglia di esperienze sopra una di immobili — sono la
    differenza che si vede senza saper dire cosa si sta vedendo.

    `display: flex` va dichiarato con due classi: `.card__b > span { display: block }`
    (site.css §10) vale 0,2,0 e batte una classe sola, e un blocco non centra il
    proprio testo. Lo stesso problema, e la stessa risposta, della §27.8. */
.card__b > .experience-card__go,
.experience-card__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-family: var(--t);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/*
    E LO STACCO MINIMO DAL TESTO CHE LO PRECEDE.

    `margin-top: auto` spinge il bottone in fondo, ma quando la scheda è la più
    alta della riga non avanza spazio e il bottone finisce attaccato al sommario.
    Il margine non può essere «auto e almeno 14 pixel» nella stessa dichiarazione,
    quindi lo mette chi sta sopra — chiunque sia: il sommario se c'è, la meta se
    manca il sommario, il titolo se manca anche quella. `:has()` è già il modo in
    cui questo progetto lega due elementi vicini (parts/page.css §8).
*/
.experience-card .card__b > *:has(+ .experience-card__go) { margin-bottom: 0.875rem; }

.experience-card:hover .experience-card__go { background: var(--fill-2); }

/* --------------------------------------- 14.3 il dossier e il mosaico

   Stessa mossa delle schede: il pannello dei dati pratici e le fotografie della
   galleria perdono l'ombra e prendono il filetto. Il dossier è la «scheda della
   spalla» del mockup (site.css §27.5.5) con dentro un elenco di dati invece di
   un modulo, e ne prende la forma: bordo da un pixel, raggio 6, niente ombra.

   Le fotografie non si sollevano più. Nel mockup il mosaico della galleria è
   fatto di riquadri fermi con lo stesso raggio del contenitore: un'immagine che
   scappa in su sotto il puntatore è un'animazione che non ha niente da dire —
   la galleria non è un collegamento. */
.experience-dossier {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    box-shadow: none;
}

/*
    E LE FOTOGRAFIE DELLA GALLERIA NON HANNO CORNICE, il filetto che avevano qui
    era esattamente quello che la §3 della specifica vieta: «le fotografie hanno
    lo stesso raggio del contenitore, senza cornice».

    Era stato scritto per sostituire l'ombra che le staccava dal fondo, ma su una
    fascia carta il grigio contro una fotografia non stacca niente: disegna un
    rettangolo intorno all'immagine. Nel mosaico del mockup (§4.9) le celle sono
    affiancate e nude, e la §27.9 di site.css ha appena tolto l'anello dalle
    celle di quello della scheda immobile. Questa era la stessa cornice, in
    un'altra pagina.

    Resta lo stacco che serve davvero: la fotografia riempie il riquadro, il
    riquadro ha il raggio del sistema, e non si solleva sotto il puntatore —
    perché la galleria non è un collegamento e non ha niente da promettere.
*/
.experience-gallery__frame {
    box-shadow: none;
    border: 0;
}

.experience-gallery__frame:hover {
    transform: none;
    box-shadow: none;
}

/* ------------------------------------------------- 14.4 il testo corrente

   IL MEZZO PASSO NON BASTAVA. Misurato sul server di prova: la descrizione di
   un'esperienza a 18 pixel, il corpo dell'elenco a 19, il sommario sopra la
   fotografia a 19. La §2 della specifica ha una riga sola — «testo 15px» — e
   non ne ha una seconda per il testo importante.

   Quindici pixel su una pagina che si legge per righe intere sembrano pochi, ed
   è la ragione per cui il giro precedente si era fermato a 17. Ma il mockup la
   sua pagina di testo non la mostra, e fra il dedurne una scala nuova e
   applicare quella scritta, si applica quella scritta: la stessa misura vale sul
   catalogo, sulla scheda e qui, e il sito parla una lingua sola. L'interlinea
   resta larga, che è quello che rende leggibile un corpo piccolo. */
.experiences__body,
.experience__prose { font-size: 0.9375rem; }

.experiences__body > p:first-child,
.experience__prose > p:first-child { font-size: 0.9375rem; }

/* Il sommario sopra la fotografia è il sottotitolo dell'H1, non testo corrente:
   resta di un passo sopra, che è il salto che il mockup fa fra il titolo
   dell'hero e la riga che gli sta sotto (§4.2). Diciannove pixel erano invece
   un secondo titolo. */
.experience__lead { font-size: 1rem; }

/* La stessa misura per le due righe di testo che restano fuori dalla prosa: la
   nota della banda «Ti interessa?» e la riga dell'elenco vuoto. */
.experience-ask__note,
.experiences__empty { font-size: 0.9375rem; }

/* Le etichette dei dati pratici erano a 10 pixel, cioè sotto l'intervallo della
   specifica per gli occhielli (11-12px, §2): l'unica misura del sito che stava
   più in basso di quella dell'occhiello di sezione. */
.experience-dossier__title,
.experience-dossier__label { font-size: 0.6875rem; }

/* E il valore accanto all'etichetta era a 15.5: mezzo pixel sopra il testo di
   tutto il resto della pagina, che non è una misura diversa — è una svista. */
.experience-dossier__value { font-size: 0.9375rem; }

/* -------------------------- 14.5 le stesse due regole di parts/page.css §11.6

   Ripetute qui, e la ripetizione è il punto: non appartengono a nessuno dei due
   fogli. Sono due conseguenze della §27 di site.css che nessuno ha raccolto, e
   si vedono su ogni pagina pubblica — il bottone fantasma diventato navy su
   navy perché la §27.4 riscrive `.cta` dopo che la §21 ha scritto
   `.cta--ghost`, e le testate di sezione rimaste su `opsz 144` perché la §25.1
   le aveva scritte con un selettore più forte di quello della §27.2.

   Qui il primo si vede sul numero di telefono in fondo alla scheda di
   un'esperienza, che è un bottone che qualcuno preme stando in piedi davanti a
   un posto. Il loro posto vero è site.css: sono segnalate nella consegna. */
.p-experiences .cta--ghost,
.p-experience .cta--ghost {
    background-color: color-mix(in srgb, var(--text) 4%, transparent);
    background-image: none;
}

.p-experiences .shead h2,
.p-experience .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;
}

/* E la terza, che qui è la più visibile delle tre: la §27.2 di site.css
   riscrive `h1, h2, h3, h4` con `color: var(--ink)`, cioè un colore letterale
   al posto del token di ruolo `--heading` che la §1 usava. Su una banda chiara
   i due coincidono e non si nota niente; sulla fotografia di apertura di
   un'esperienza — banda scura, `--heading` uguale a bianco — il titolo
   diventava navy sopra un velo navy, praticamente illeggibile.

   Il colore non è nuovo: è quello che la §1 aveva già deciso. Qui i titoli
   tornano a leggere il ruolo invece del valore. */
/* Dentro <main>: la testata e il piè di pagina appartengono ad altri due fogli
   e i loro titoli non sono affare di questo. */
.p-experiences main h1, .p-experiences main h2, .p-experiences main h3, .p-experiences main h4,
.p-experience main h1, .p-experience main h2, .p-experience main h3, .p-experience main h4 {
    color: var(--heading);
}

/* -------------- 14.6 la scheda immobile su questa banda, aggiornata al mockup

   La §9 spiega perché questo blocco esiste: il partial della scheda immobile
   appartiene al catalogo, questa pagina non carica parts/catalog.css, e quello
   che il partial prende da site.css arriva corretto da solo. Quello che non
   arriva va scritto qui, e con il mockup la scheda ha preso due pezzi nuovi che
   ricadono esattamente in quel buco.

   `display: block` sull'ancora è stato tolto, non aggiunto: la §27.5.7 di
   site.css la dichiara colonna flessibile alta quanto la scheda, ed è quella
   colonna che manda il finto bottone in fondo con `margin-top: auto`. La riga
   di questo foglio, più specifica, la stava rimettendo in blocco — e il bottone
   finiva a metà scheda, appoggiato ai dati.

   Il corpo diventa la colonna che cresce: senza, la scheda più corta della riga
   tiene il suo bottone a mezz'aria mentre le altre due l'hanno in fondo, che è
   il disallineamento che una griglia di tre schede fa notare per prima. */
.experience-properties .property-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Le icone dei dati sono disegnate con il tratto, come tutte le icone del
   mockup. Senza una regola che lo dica, un `<path>` senza attributi si riempie
   di nero: su questa banda erano due quadrati neri accanto a «5 Vani». */
.experience-properties .property-card__data { flex-wrap: wrap; align-items: center; }

.experience-properties .property-card__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Il riferimento dell'annuncio, misurato: 16.5 pixel qui contro gli 11 che ha
   sul catalogo, perché a disegnarlo è parts/catalog.css e questa pagina non lo
   carica. Sedici pixel e mezzo fanno di «RIF-101» la riga più grande del corpo
   della scheda — più del titolo dell'immobile. È la stessa scheda: ha la stessa
   misura anche qui. */
.experience-properties .property-card__reference { font-size: 0.6875rem; }

.experience-properties .property-card__fact svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* E il finto bottone si inverte, per la stessa ragione per cui si inverte il
   `.cta` in parts/page.css §11.6: `--fill` e `--night` sono lo stesso #1C3D6E
   dalla §27.1 in poi, e su una banda profonda un pieno navy è un rettangolo del
   colore del fondo. Bianco pieno con il testo navy, come nel piè di pagina del
   mockup. */
/* `display` compreso: `.card__b > span { display: block }` di site.css è più
   specifico di `.property-card__go`, quindi il finto bottone arrivava qui come
   un blocco con il testo appoggiato a sinistra invece che centrato. */
.experience-properties .property-card__go {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    background: var(--w);
    color: var(--blue);
}

.experience-properties .property-card__link:hover .property-card__go {
    background: var(--blue-l);
    color: var(--blue);
}

/* Il filetto sotto le testate di sezione: la §27.3 di site.css lo spegne con
   `.shead`, ma sulle bande scure la §26 lo aveva scritto con `.sec--dark
   .shead` — un selettore più specifico, che vince comunque. Restava quindi una
   lineetta color bronzo sotto «Immobili in questa zona», l'ultimo bronzo
   rimasto sul sito. Anche questa appartiene a site.css. */
.p-experiences .shead,
.p-experience .shead { background-image: none; }

/* ==========================================================================
   15. LA RIFINITURA — quattro dettagli misurati

   Stesso giro di parts/page.css §12: il committente ha chiesto di limare, e qui
   c'è solo quello che si misura prima e dopo. Nessuna banda cambia fondo,
   nessun componente cambia forma.
   ========================================================================== */

/* --------------- 15.1 l'occhiello torna attaccato al titolo dell'elenco

   Stessa coppia e stessa misura di parts/page.css §12.1: dentro ogni `.shead`
   del sito l'occhiello sta dodici pixel sopra il suo titolo, e l'apertura di
   questa sezione ne teneva VENTI — i dodici del margine dell'occhiello più gli
   otto che `.experiences__title` si dava da sé (§13). Venti e dodici sulla
   stessa schermata, su due copie dello stesso oggetto.

   A due colonne il titolo e il corpo partono adesso dalla stessa ordinata,
   perché è la riga che dichiarano di condividere. */
.experiences__title { margin-top: 0; }

@media (min-width: 58rem) {
    .experiences__open-in .experiences__body { margin-top: 0; }
}

/* ----------------------- 15.2 il titolo dell'esperienza non lascia orfani

   MISURATO SU «Il Castello Pasquini e il suo parco», che è il titolo più lungo
   delle otto esperienze in archivio: a 1440 andava a capo dopo «suo» e lasciava
   la parola «parco» da sola sulla seconda riga — 154 pixel su una riga larga
   845, cioè il 18%. A 1024 lo stesso, 121 su 663.

   `text-wrap: initial` era scritto qui e sull'altro titolo con la spiegazione
   «lo spezzettamento parola per parola fa già gli a capo»: è vero per l'hero
   della home, dove il titolo è scritto a mano e sta su una riga, e non lo è
   qui, dove il titolo arriva dall'archivio e nessuno sa quanto è lungo. Il
   bilanciamento funziona anche con gli span del `data-split` — verificato
   forzandolo dal browser prima di scriverlo — e dà «Il Castello Pasquini / e il
   suo parco»: ultima riga a 349 pixel su 845, quattro parole
   invece di una.

   La §27.2 di site.css lo dà già a `h1, h2, h3, h4` per tutto il sito: questa
   riga non introduce una regola, toglie l'eccezione. */
.experience__title { text-wrap: balance; }

/* ------------------------ 15.3 la fotografia della galleria smette di
   occupare lo schermo intero

   È l'esempio che il committente ha fatto, sulla scheda di un immobile: il
   mosaico era alto 880 pixel su una finestra di 844 ed è stato portato a 505.
   La galleria di un'esperienza aveva la stessa forma di difetto e nessuno
   l'aveva guardata: la prima fotografia è la «lastra» larga, prende tutte e due
   le colonne e tiene il taglio 16/9 — su un contenitore da 1312 pixel fanno
   738 di altezza, l'87% di una finestra da 844.

   E non è un caso di confine: tutte e otto le esperienze in archivio hanno
   esattamente UNA fotografia in galleria, quindi la lastra larga è ciò che si
   vede sempre — sotto una copertina che ne occupa già il 76%. Due schermate
   della stessa cosa, una sopra l'altra.

   Il tetto è la misura che il sito ha già scelto per un blocco fotografico a
   contenitore pieno: 505 pixel, cioè il mosaico della scheda immobile. Il
   taglio resta 16/9 dove ci sta (sul telefono la lastra è alta 197 e non tocca
   il tetto); dove non ci sta, la fotografia riempie il riquadro e viene tagliata
   al centro, che è quello che `object-fit: cover` fa già qui sopra. */
.experience-gallery__item:first-child .experience-gallery__frame,
.experience-gallery__item:nth-child(even):last-child .experience-gallery__frame {
    width: 100%;
    max-height: 31.5rem;
}