/* Proposal D: the simple structure of a classic Roman guest-house site. Carved Roman capitals (Marcellus) for headings,
   the "Tralcio" logo (a flowering vine over the name, EB Garamond), Rome's amaranth as the one accent, Figtree for reading. */
:root {
  --bg: #ffffff;
  --marble: #eff0ed;
  --carve: #2b2826;
  --ink: #1d1d1f;
  --muted: #5c5c60;
  --accent: #8a1c3c;
  --accent-strong: #6e1530;
  --accent-ink: #ffffff;
  --field: #1d1d1f;
  --field-ink: #ffffff;
  --field-muted: #b5b5b8;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.15rem);
  --step-sub: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-head: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --step-name: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);

  --gx: max(20px, min(5vw, 80px), env(safe-area-inset-left, 0px));
  --gap: clamp(16px, 2.4vw, 32px);
  --max: 1280px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Figtree", system-ui, sans-serif; font-size: var(--step-body); line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[lang="en"] [lang="it"]:not(html), html:not([lang="en"]) [lang="en"]:not(html) { display: none !important; }

/* Carved capitals: Marcellus, set in caps with open spacing, the way a Roman plaque is cut. */
.carved { font-family: "Marcellus", "Times New Roman", serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.08; text-wrap: balance; }
.wrap { padding-inline: var(--gx); }
.inner { max-width: var(--max); margin-inline: auto; }
.sec { padding-block: 112px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap); align-items: end; }
.sec-head h2 { font-size: var(--step-head); }
.sec-head p { max-width: 48ch; justify-self: end; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 2px; font: inherit; font-size: var(--step-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.button.quiet { background: var(--marble); color: var(--ink); }
.button:active { transform: scale(0.98); }
.link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--accent-strong); } .button.quiet:hover { background: #e3e4e0; } }

/* ---------- header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
/* The logo ("Tralcio"): a flowering vine arching over the name, like a pergola over the terrace. */
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--carve); }
.logo-mark { flex: none; width: 144px; height: 24px; color: var(--accent); }
.logo-name { font-family: "EB Garamond", Georgia, serif; font-size: 1.5625rem; letter-spacing: 0.02em; line-height: 1; text-align: center; }
/* The left padding matches the letter-spacing left after the last letter, so the line centres under the name. */
.logo-name small { display: block; margin-top: 5px; padding-left: 0.22em; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 4px 26px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--step-small); }
.nav a { text-decoration: none; padding: 8px 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 0.875rem; }
.nav a[aria-current="page"] { color: var(--accent); }
@media (hover: hover) { .nav a:hover { color: var(--accent); } }
.lang { display: inline-flex; }
.lang button { font: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; background: none; border: 0; color: inherit; padding: 8px 5px; min-height: 40px; cursor: pointer; opacity: 0.55; }
.lang button[aria-pressed="true"] { opacity: 1; color: var(--accent); }
.menu-btn { display: none; }

/* ---------- home: a title row, then the photos as a mosaic (one large, four small), as on the Airbnb listing ---------- */
.listing { padding-top: 40px; }
.listing-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px var(--gap); }
.listing h1 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); max-width: 16ch; }
.listing .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.photos { position: relative; margin-top: 28px; }
.mosaic { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(400px, 64svh, 600px); }
/* The large photo takes 60% of the row so it leads the first screen.
   Every listing photo is in the mosaic, so the viewer goes through all of them; only the first five show. */
.mosaic a { display: block; overflow: hidden; background: var(--marble); }
.mosaic a[hidden] { display: none; }
.mosaic a:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), filter 300ms ease; }
@media (hover: hover) { .mosaic a:hover img { transform: scale(1.03); filter: brightness(0.92); } }
.all-photos { position: absolute; right: 16px; bottom: 16px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 2px; background: #fff; color: var(--ink); font: inherit; font-size: var(--step-small); font-weight: 600; cursor: pointer; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.all-photos:active { transform: scale(0.98); }
@media (hover: hover) { .all-photos:hover { background: var(--marble); } }
/* Without script the tiles link to the full photos, and there is no viewer to open. */
html:not(.js) .all-photos { display: none; }
/* The counter belongs to the phone strip (assets/hero.js). */
.strip-count { display: none; position: absolute; right: 12px; bottom: 12px; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 2px; background: rgba(29, 29, 31, 0.78); color: #fff; font: inherit; font-size: var(--step-small); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform 140ms var(--ease-out); }
.strip-count:active { transform: scale(0.96); }
/* The listing's facts under the photos: where and what it is, its figures and score on the left; the intro on the right. */
.facts { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px calc(var(--gap) * 2); align-items: start; }
.facts .kind { font-size: var(--step-sub); line-height: 1.3; }
.facts .specs { margin-top: 8px; }
.facts .rating { margin-top: 8px; }
.facts .rating b { font-weight: 600; color: var(--accent); }
.facts .intro { max-width: 60ch; }

/* ---------- the house: a small plan with the terrace all round, and the photo of the room pointed at ---------- */
.house { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--gap) * 2); align-items: center; }
.house-plan svg { width: 100%; height: auto; display: block; }
.house-plan .room { fill: var(--marble); transition: fill 240ms var(--ease-out); }
.house-plan .terrace { fill: #e8dcd8; }
/* The walls are the white gaps between the shapes: each shape carries a stroke in the page colour. */
.house-plan path, .plan-draw path { stroke: var(--bg); stroke-width: 6; stroke-linejoin: round; }
/* The hall (disimpegno) is drawn but has no photos, so it is not a link. */
.house-plan .hall, .plan-draw .hall { fill: #f6f6f4; }
.house-plan text { font-family: "Marcellus", serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 17px; fill: var(--ink); pointer-events: none; }
.house-plan a { outline: none; }
.house-plan a:focus-visible .room { stroke: var(--ink); stroke-width: 3; }
.house-plan a.is-active .room { fill: var(--accent); }
.house-plan a.is-active text { fill: #fff; }
@media (hover: hover) { .house-plan a:not(.is-active):hover .room { fill: #e1e2de; } .house-plan a:not(.is-active):hover .terrace { fill: #dfcdc8; } }
.house-pic { display: block; overflow: hidden; background: var(--marble); }
.house-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.house-notes { margin-top: 16px; min-height: 3.1em; }
.house-notes p { max-width: 56ch; }
.house-notes p:not(.on) { display: none; }
.house-notes b { font-weight: 600; }
.house-view .button { margin-top: 28px; }

/* ---------- Rome block ---------- */
.roma { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--gap) * 2); align-items: center; }
/* Two pictures side by side (home and Rome page): a narrow portrait beside a wide one, cropped to its height. */
.pics { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.roma img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pics img + img { aspect-ratio: auto; height: 0; min-height: 100%; object-position: 50% 40%; }
.roma figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.roma h2 { font-size: var(--step-head); }
.roma .txt p { margin-top: 20px; max-width: 44ch; }
.times { margin-top: 28px; display: grid; gap: 4px; max-width: 360px; }
.times li { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; font-variant-numeric: tabular-nums; }
.times b { font-weight: 600; }
.roma .button { margin-top: 32px; }

/* ---------- guests: the score on a marble field, the six marks beside it ---------- */
.guests { background: var(--marble); padding-block: 96px; margin-top: 112px; }
.guests-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--gap) * 2); align-items: end; }
.score h2 { font-size: var(--step-head); }
.score .num { margin-top: 32px; font-family: "Marcellus", serif; font-size: clamp(5rem, 3.5rem + 6vw, 9rem); line-height: 0.9; color: var(--accent); }
.score p:last-child { margin-top: 12px; max-width: 30ch; }
/* Each mark on one line, the category and its score, two columns of three. */
.marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px calc(var(--gap) * 1.5); }
.marks li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; }
.marks b { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.quotes { grid-column: 1 / -1; margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.quotes blockquote { background: var(--bg); padding: 28px; font-size: var(--step-sub); line-height: 1.4; }
.quotes cite { display: block; margin-top: 14px; font-style: normal; font-size: var(--step-small); color: var(--ink); }

/* ---------- contacts + the form that drafts an email to Angela ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--gap) * 2); align-items: start; }
.contact h2 { font-size: var(--step-head); }
.reach { margin-top: 28px; display: grid; gap: 18px; }
.reach dt { font-size: var(--step-small); color: var(--muted); }
.reach dd { margin-top: 2px; font-size: var(--step-sub); }
/* WhatsApp: its symbol right after the number (here and in the footer), in the text's colour. The link is a
   44px square around the symbol, pulled into the line so the row keeps its height. */
/* Where the number and the symbol don't fit on one line (the footer on the narrowest phones), the symbol
   goes under the number rather than breaking it. */
.reach .pair, .foot .pair { display: flex; flex-wrap: wrap; align-items: center; }
.wa { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-block: -10px; color: inherit; }
.wa svg { width: 1.1em; height: 1.1em; fill: currentColor; }
@media (hover: hover) { .reach .wa:hover { color: var(--accent); } .foot .wa:hover { color: var(--field-muted); } }
.host { margin-top: 36px; display: flex; gap: 18px; align-items: start; }
.host img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
.host p { max-width: 46ch; }
.contact .button.quiet { margin-top: 32px; }
.request { background: var(--marble); padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gap); scroll-margin-top: 96px; }
.request h2 { grid-column: 1 / -1; font-size: var(--step-head); }
.request .sub { grid-column: 1 / -1; margin-top: -6px; max-width: 52ch; }
.request label { display: grid; gap: 6px; font-size: var(--step-small); color: var(--muted); min-width: 0; }
.request .wide { grid-column: 1 / -1; }
.request input, .request select, .request textarea { font: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--bg); border: 0; border-radius: 2px; min-height: 50px; padding: 0 14px; width: 100%; }
.request textarea { padding-block: 12px; min-height: 120px; resize: vertical; }
/* On iPhone the native date field adds its padding on top of the full width, runs past the screen's edge and lets
   the whole page slide sideways: without the native look it sizes like the other fields. The date stays on the left. */
.request input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.request input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.request .button { justify-self: start; }
.request .meta { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }

/* ---------- inner pages ---------- */
.page-head { padding-block: 64px 0; }
.page-head h1 { font-size: var(--step-head); }
/* One sentence: on one line on a desktop, evenly broken where it has to wrap. */
.page-head .say { margin-top: 16px; font-size: var(--step-sub); line-height: 1.4; text-wrap: balance; }
.page-head + .sec { padding-top: 64px; }
/* The two park photos under the title, across the page: the first thing on screen. */
.lead-pics { margin-top: 40px; }
.lead-pics .pics { aspect-ratio: 21 / 9; max-height: 62svh; }
.lead-pics img { width: 100%; height: 100%; object-fit: cover; }
.lead-pics figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }

/* the sketch plan: the title across the top, then the plan and the photo of the room side by side, then the
   room buttons under the plan and the caption and note under the photo. The plan takes 4/11 of the width and
   the photo 7/11: at those widths a 3:2 photo is as tall as the plan, and the photo fills the plan's height. */
.plan-box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 1.5); align-items: start; }
.plan-head { margin-bottom: 32px; }
.space .plan-head .say { max-width: none; text-wrap: balance; }
/* The intro's second sentence: "tap a room" on tablet and desktop, "swipe" on a phone, where the plan is a picture. */
.say-swipe { display: none; }
.plan-draw svg { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) {
  .js .plan-draw, .js .plan-view { display: contents; }
  .js .plan-draw svg { grid-area: 1 / 1; }
  .js .plan-stage { grid-area: 1 / 2; align-self: stretch; }
  .js .plan-keys { grid-area: 2 / 1; }
  .js .plan-info { grid-area: 2 / 2; }
}
.plan-draw .room { fill: var(--marble); cursor: pointer; transition: fill 240ms var(--ease-out); }
.plan-draw .room.terrace { fill: #e8dcd8; }
.plan-draw .room:hover { fill: #e1e2de; }
.plan-draw .room.terrace:hover { fill: #dfcdc8; }
.plan-draw .room.is-active, .plan-draw .room.terrace.is-active { fill: var(--accent); }
.plan-draw text { font-family: "Marcellus", serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 20px; fill: var(--ink); pointer-events: none; }
.plan-draw text.is-active { fill: #fff; }
.rooms { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rooms button { font: inherit; font-size: var(--step-small); font-weight: 500; min-height: 44px; padding: 0 8px; border-radius: 2px; border: 0; background: var(--marble); color: var(--ink); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.rooms button[aria-pressed="true"] { background: var(--accent); color: #fff; }
@media (hover: hover) { .rooms button:not([aria-pressed="true"]):hover { background: #e3e4e0; } }
.plan-hint { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
.plan-stage { position: relative; background: var(--marble); }
.plan-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.plan-photo { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plan-prev, .plan-next { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: inherit; font-size: 1.25rem; cursor: pointer; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.plan-prev { left: 12px; } .plan-next { right: 12px; }
.plan-prev[hidden], .plan-next[hidden] { display: none; }
.plan-prev:active, .plan-next:active { transform: scale(0.94); }
@media (hover: hover) { .plan-prev:hover, .plan-next:hover { background: #fff; color: var(--accent); } }
.plan-meta { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-small); color: var(--muted); }
.plan-count { flex: none; font-variant-numeric: tabular-nums; }
html:not(.js) .plan-stage, html:not(.js) .plan-meta { display: none; }
.plan-notes { margin-top: 20px; }
.plan-notes p + p { margin-top: 10px; }
.js .plan-notes p:not(.on) { display: none; }
.plan-notes b { font-weight: 600; }
.plan-sets { margin-top: 20px; display: grid; gap: 10px; }
.plan-set { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.plan-set img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* With script only the room on show keeps its photos, as a row of small ones under the big photo: a tap puts
   one on show, and the one on show is marked underneath. */
.js .plan-sets { margin-top: 8px; }
.js .plan-set:not(.on) { display: none; }
.js .plan-set a { position: relative; display: block; overflow: hidden; background: var(--marble); }
.js .plan-set img { aspect-ratio: 3 / 2; transition: filter 200ms ease; }
.js .plan-set a[aria-current="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--accent); }
@media (hover: hover) { .js .plan-set a:not([aria-current="true"]):hover img { filter: brightness(0.9); } }
.plan-act { margin-top: 28px; }
/* The phone strip's caption and counter (assets/plan.js), under the strip. */
.plan-strip { display: none; margin-top: 12px; justify-content: space-between; gap: 16px; font-size: var(--step-small); color: var(--muted); }
.plan-strip-count { flex: none; font-variant-numeric: tabular-nums; }

/* one block per part of the house, the same template each time */
.space { padding-block: 112px 0; scroll-margin-top: 80px; }
.space-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gap) * 1.5); align-items: start; }
.space h1, .space h2 { font-size: var(--step-head); }
/* A page that opens straight on a block, with no page head above it. */
main > .space:first-child { padding-top: 56px; }
.space .say { margin-top: 16px; font-size: var(--step-sub); line-height: 1.4; max-width: 40ch; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.thumbs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thumbs a { display: block; overflow: hidden; background: var(--marble); }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .thumbs a:hover img { transform: scale(1.05); } }
.feat { padding-top: 6px; }
.feat ul { display: grid; gap: 14px; }
.feat ul + ul { margin-top: 28px; }
.feat li b { display: block; font-weight: 600; }
.feat li > span { display: block; color: var(--muted); }
.feat .acts { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }

.list-band { margin-top: 112px; background: var(--marble); padding-block: 80px; }
.list-band .inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
.list-band h2 { font-size: var(--step-head); }
.list-band ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--gap); }
.list-band li b { display: block; font-weight: 600; }
.list-band li > span { display: block; color: var(--muted); }
/* Getting here (dintorni.html): the heading above, then the four ways in on the same four columns as the metro
   stops just above, in full ink since they are the directions themselves. */
.list-band.arrive .inner { display: block; }
.list-band.arrive h2 { margin-bottom: 36px; }
.list-band.arrive ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gap); }
.list-band.arrive li > span { margin-top: 6px; color: var(--ink); }

/* Rome page: text beside a picture, alternating */
/* A picture and its text side by side, sharing top and bottom edges: the heading starts level with the
   picture's top and the caption ends level with its bottom. Whichever side is taller sets the height; the
   picture is cropped to fill it, or the text opens up between the paragraph and the caption. */
.place { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--gap) * 2); align-items: stretch; }
.place.flip > figure { order: 2; }
.place figure > img, .place .pics { height: 100%; }
.place img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.place .txt { display: flex; flex-direction: column; }
.place h2 { font-size: var(--step-head); margin-top: -0.12em; }
.place .txt p { margin-top: 20px; max-width: 46ch; font-size: 1.25rem; line-height: 1.5; }
.place .txt .cap { margin-top: auto; padding-top: 24px; font-size: var(--step-small); color: var(--muted); }
/* The metro: its heading and sentence on the same columns as the sections above, then Metro A drawn as a line
   from home to the centre, one stop per column, with the minutes on board. */
.metro .sec-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 2); }
.metro .sec-head p { justify-self: start; }
.line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 56px; }
.line li { position: relative; padding-top: 48px; }
.line li::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 24px; height: 24px; box-sizing: border-box; border: 6px solid var(--accent); border-radius: 50%; background: var(--bg); }
.line li.here::before { background: var(--accent); }
.line li:not(:last-child)::after { content: ""; position: absolute; top: 9px; left: 12px; width: calc(100% + var(--gap)); height: 6px; background: var(--accent); }
.line b { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.line li > span { display: block; margin-top: 12px; font-weight: 500; }
.line small { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--muted); }

/* ---------- footer ---------- */
main:has(> .list-band:last-child) + .foot { margin-top: 0; }
.foot { margin-top: 128px; background: var(--field); color: var(--field-ink); padding-block: 72px 28px; }
.foot .inner { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--gap); }
/* On the dark footer: a white name and the vine in a lighter amaranth. */
.foot .logo { color: var(--field-ink); }
.foot .logo-mark { width: 168px; height: 28px; color: color-mix(in srgb, var(--accent) 45%, #ffffff); }
.foot .logo-name { font-size: 1.875rem; }
.foot .logo-name small { margin-top: 7px; padding-left: 0.22em; font-size: 0.75rem; color: var(--field-muted); }
/* The logo and the motto share one centre line, as a single block at the left of the footer. */
.foot .brand { justify-self: start; display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot .motto { margin-top: 20px; font-family: "Marcellus", serif; letter-spacing: 0.04em; font-size: 1.125rem; color: var(--field-muted); max-width: 26ch; }
.foot h2 { font-size: var(--step-small); font-weight: 600; color: var(--field-muted); }
.foot ul { margin-top: 12px; display: grid; gap: 6px; font-size: var(--step-small); }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.legal { grid-column: 1 / -1; margin-top: 56px; display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--field-muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* The large photo settles; the small ones follow it in. "backwards" leaves the hover zoom free afterwards. */
  .mosaic a:first-child img { animation: settle 2400ms var(--ease-out) backwards; }
  .mosaic a:not(:first-child) { animation: rise 800ms var(--ease-out) backwards; }
  .mosaic a:nth-child(n+3) { animation-delay: 70ms; } .mosaic a:nth-child(n+8) { animation-delay: 140ms; } .mosaic a:nth-child(n+11) { animation-delay: 210ms; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
  .plan-photo.swap, .house-pic img.swap { animation: swap 420ms var(--ease-out); }
  @keyframes swap { from { opacity: 0.35; transform: scale(1.015); } to { opacity: 1; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The closing line and button (dintorni.html): less space around it than a full section, since it is one line. */
.sec:has(> .closing) { padding-top: 88px; }
main:has(> .sec:last-child > .closing) + .foot { margin-top: 96px; }
.closing { text-align: center; }
.closing .say { margin-inline: auto; max-width: 36ch; font-size: var(--step-sub); line-height: 1.4; }
.closing .go { margin-top: 28px; }

/* ---------- tablet & phone ---------- */
/* On a tablet the plan and the photo stay side by side, so a tapped room is seen at once: the plan with its
   buttons on the left, the photo, its small photos and the note on the right. The plan's labels grow so they
   still read at this narrower width. (On a phone the plan is a picture in a strip: see the 760px rules.) */
/* Home: below 1024px the house section keeps only its heading, its text and the button to casa.html; the
   small plan, its photo and its line are for desktop (the plan itself is on casa.html). */
@media (max-width: 1023px) {
  .house { display: block; margin-top: 32px; }
  .house-plan, .house-pic, .house-notes { display: none; }
  .house-view .button { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .plan-box { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .plan-draw text { font-size: 24px; }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sec-head, .house, .roma, .facts, .guests-row, .contact, .space-grid, .list-band .inner, .place { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); height: clamp(320px, 46svh, 440px); }
  .sec-head p { justify-self: start; }
  .metro .sec-head { grid-template-columns: 1fr; }
  /* Home, "Roma e dintorni": stacked, it reads heading, text, pictures, then the metro times and the button, so
     the pictures don't read as the end of the house section above. */
  .roma { row-gap: 0; }
  .roma .txt { display: contents; }
  .roma h2 { order: 1; } .roma .txt p { order: 2; } .roma figure { order: 3; margin-top: 28px; }
  .roma .times { order: 4; } .roma .button { order: 5; justify-self: start; }
  .list-band.arrive ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { row-gap: 72px; }
  .guests-row { align-items: start; }
  /* Stacked, each place reads heading, picture, text, caption. */
  .place { row-gap: 20px; }
  .place .txt { display: contents; }
  .place h2 { order: -1; margin-top: 0; }
  .place.flip > figure { order: 0; }
  .place .txt p { order: 1; margin-top: 4px; }
  .place .txt .cap { order: 2; margin-top: -8px; padding-top: 0; }
  .foot .inner { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .foot .brand { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 760px) {
  .top .inner { flex-wrap: wrap; min-height: 64px; }
  /* The number is a full-size tap target too, like the WhatsApp symbol beside it. */
  .reach .pair a[data-phone] { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; color: inherit; cursor: pointer; }
  .js .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 16px; }
  .js .top.is-open .nav { display: flex; }
  .nav a { font-size: 1rem; padding: 10px 0; }
  .lang button { min-width: 44px; min-height: 44px; font-size: 1rem; }
  .lang button:first-child { margin-left: -12px; }
  /* The button says "Menu" when closed and "Chiudi" / "Close" when open. */
  .top.is-open .menu-label, .menu-close { display: none; }
  .top.is-open .menu-close { display: inline; }
  .quotes { grid-template-columns: 1fr; }
  /* On a phone the mosaic becomes a strip under the header, edge to edge, swiped one photo at a time;
     the title and the buttons follow it. */
  .listing { padding-top: 0; }
  .listing .inner { display: flex; flex-direction: column; }
  .photos { order: -1; margin: 0 calc(var(--gx) * -1); }
  .mosaic { display: flex; height: auto; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic a { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .mosaic img { height: auto; aspect-ratio: 5 / 6; }
  .all-photos { display: none; }
  .js .strip-count { display: inline-flex; }
  .listing-title { margin-top: 24px; flex-direction: column; align-items: stretch; }
  .listing .acts { flex-direction: column; }
  /* One main button: "Guarda la casa" turns into a plain underlined link, still a full-size tap target. */
  .listing .acts .button.quiet { min-height: 44px; background: none; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  /* On a phone the metro line runs down the page, the stops one under the other. */
  .line { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; }
  .line li { padding-top: 0; padding-left: 48px; }
  .line li::before { top: 4px; }
  .line li:not(:last-child)::after { top: 16px; left: 9px; width: 6px; height: calc(100% + 56px); }
  .line b { font-size: 2.5rem; }
  /* casa.html on a phone: the plan is a picture, the first slide of one strip with every room photo after it,
     edge to edge and swiped one at a time like the home strip. The viewer, the room buttons, the notes and the
     button are left out; assets/plan.js keeps the caption and the "1 / 17" under the strip. */
  .say-tap { display: none; }
  .say-swipe { display: inline; }
  .plan-box { display: flex; gap: 0; margin-inline: calc(var(--gx) * -1); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .plan-box::-webkit-scrollbar { display: none; }
  .plan-draw, .plan-view, .plan-info, .plan-sets, .js .plan-box .plan-set { display: contents; }
  .plan-keys, .plan-stage, .plan-meta, .plan-notes, .plan-act { display: none; }
  .plan-draw svg, .plan-set a { flex: 0 0 100%; aspect-ratio: 5 / 6; scroll-snap-align: start; scroll-snap-stop: always; }
  .plan-draw svg { order: -1; width: 100%; margin: 0; padding: 28px 20px; background: var(--marble); pointer-events: none; }
  .js .plan-box .plan-set img, .plan-set img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .js .plan-box .plan-set a::after { content: none; }
  /* A picture, so no room is marked. */
  .plan-draw .room.is-active { fill: var(--marble); }
  .plan-draw .room.terrace.is-active { fill: #e8dcd8; }
  .plan-draw text.is-active { fill: var(--ink); }
  .js .plan-strip { display: flex; }
}
@media (max-width: 560px) {
  /* Between sections, 56px on a phone (and the footer as far from the last one); space inside a section stays. */
  .sec { padding-top: 56px; }
  .page-head + .sec { padding-top: 40px; }
  .sec:has(> .closing) { padding-top: 56px; }
  .foot, main:has(> .sec:last-child > .closing) + .foot { margin-top: 56px; }
  .guests { padding-block: 48px; margin-top: 56px; }
  .list-band { margin-top: 56px; }
  /* The form runs edge to edge with its text on the page's edge, and sits right on the footer. */
  .request { grid-template-columns: 1fr; margin-inline: calc(var(--gx) * -1); padding-inline: var(--gx); }
  main:has(> .sec:last-child .request:last-child) + .foot { margin-top: 0; }
  .list-band ul, .list-band.arrive ul { grid-template-columns: 1fr; }
  /* "Dicono di noi": the score sits beside its sentence, and the six marks are three rows of two, each name over its figure. */
  .guests-row { row-gap: 20px; }
  .score { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .score h2 { grid-column: 1 / -1; }
  .score .num { margin-top: 12px; font-size: 4rem; }
  .score p:last-child { margin-top: 12px; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .marks li { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 10px; }
  .marks b { font-size: 1.5rem; }
  .host { flex-direction: column; }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On a phone the two park photos under the title stack, each cropped to 3:2. */
  .lead-pics .pics { grid-template-columns: 1fr; aspect-ratio: auto; max-height: none; }
  .lead-pics img { aspect-ratio: 3 / 2; }
  .lead-pics img + img { aspect-ratio: 3 / 2; height: auto; min-height: 0; object-position: 50% 62%; }
  .place .pics { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .place .txt p { font-size: var(--step-body); }
  .thumbs a:nth-child(5), .thumbs a:nth-child(6) { display: none; }
  .top .logo-mark { width: 120px; height: 20px; } .top .logo-name { font-size: 1.3125rem; }
  /* The plans shrink to the phone's width: larger labels keep them readable. */
  .plan-draw text, .house-plan text { font-size: 22px; }
  .top .logo-name small { margin-top: 4px; padding-left: 0.16em; font-size: 0.625rem; letter-spacing: 0.16em; }
}