/* site.css: the design system's shared components and the site chrome (header, language line, footer, legal pages, 404,
   page transitions, print). Values: theme.css. Page styles: home.css (home pages), property.css (property pages).

   Motion, in three rules:
   1. The visitor's scroll drives the tour; nothing else moves the page.
   2. A click gets a flight (the map) or a morph (a page transition), and anything new interrupts what is running.
   3. Only the sea and the clouds move on their own, and they settle. Reduced motion cuts positions and keeps only opacity.
   Durations 120/200/360 ms on --ease; the only loop is the scroll-cue bead (home.css).

   The ornament is cut back to three uses: the client's logo in one colour (header, footer), one row of maiolica tiles at
   the top of the footer (.tile-band, once per page) and the arched doorway thumbnails in the closing index (home.css).
   Nothing sits behind text or on the map. */

:root {
  /* Arrow icons for CSS (same drawing as partials/icons.njk): → another page of this site, ↓ further down, ↗ another app or site */
  --i-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h15m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15m-6-6 6 6 6-6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Anchor jumps land below the header bar. Only scroll-padding (a scroll-margin on the targets would add to it), set from
   --anchor-clear; the home tour's full-screen stops cancel it with a negative scroll-margin of the same size (home.css). */
html { --anchor-clear: 5.5rem; scroll-padding-top: var(--anchor-clear); }

/* ---------- Type helpers ---------- */
/* Eyebrow: tracked capitals in ocra. No rule, no ornament. */
.eyebrow { margin: 0 0 var(--s-3); font: 600 var(--fs-label) / 1.35 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocra); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
/* The night band and anything on it: giallo focus ring with a notte gap */
.on-dark, .site-footer, .band-deep, .stop-card-deep { --focus: var(--giallo); --focus-gap: var(--notte); }

/* Facts on one line, separated by a middle dot. When the line wraps, the dot that would start the new line is clipped, so no
   dot ever dangles at a line end or starts a line. Markup: <div class="facts-wrap"><ul class="facts-line"><li>…</li></ul></div> */
.facts-wrap { overflow: hidden; }
.facts-line { --sep: 1.15em; display: flex; flex-wrap: wrap; margin: 0 0 0 calc(-1 * var(--sep)); padding: 0; list-style: none; }
.facts-line > * { white-space: nowrap; }
.facts-line > *::before { content: "·"; display: inline-block; width: var(--sep); text-align: center; text-indent: 0; }
/* A long fact that may wrap (a distance "in linea d'aria"): a hanging indent keeps its second line clear of the clipped dot
   gutter. The dot itself takes no indent (text-indent: 0 above), so it stays between the facts. */
.facts-line > .fact-long, .np-facts > .fact-long { white-space: normal; padding-left: var(--sep); text-indent: calc(-1 * var(--sep)); }

/* ---------- Buttons ----------
   .button = primary (cobalt, one per view). .button-secondary beside it. .button-text is the tertiary, underlined text action.
   .button-icon is a 44 px square with a visually hidden name. .button-light is for the night band only.
   Sizes: .button-small 44 px, default 48 px, .button-large 56 px; .button-block fills its column.
   Arrows trail the label and say where it goes: → another page of this site, ↓ further down this page,
   ↗ another app or site (WhatsApp, email, Booking.com). Leading icons only name the object (pin, photos, menu). */
.button {
  --h: 48px; --px: 22px;
  --bg: var(--cobalt); --fg: #fff; --bd: transparent;
  --shadow-own: inset 0 -1px 0 rgb(0 0 0 / 0.22), 0 1px 2px rgb(14 35 64 / 0.20);   /* a faint glaze at the foot */
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 var(--px);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--r-2);
  box-shadow: var(--shadow-own);
  font: 600 var(--fs-ui) / 1.2 var(--font-text); letter-spacing: 0.005em; text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.button :is(.i, .icon) { width: 18px; height: 18px; flex: none; transition: transform var(--dur-2) var(--ease); }
.button :is(.i-go, .i-down, .i-out, .icon-go, .icon-down, .icon-external) { margin-right: -4px; }
.button:hover :is(.i-go, .icon-go) { transform: translateX(3px); }
.button:hover :is(.i-down, .icon-down) { transform: translateY(2px); }
.button:hover :is(.i-out, .icon-external) { transform: translate(2px, -2px); }
.button:hover { --bg: var(--cobalt-deep); }
.button:active { --bg: var(--cobalt-press); --shadow-own: inset 0 2px 4px rgb(0 0 0 / 0.38); transform: translateY(1px); }

.button-secondary { --bg: var(--paper); --fg: var(--cobalt); --bd: var(--cobalt); --shadow-own: 0 1px 2px rgb(14 35 64 / 0.08); }
.button-secondary:hover { --bg: var(--wash); }
.button-secondary:active { --bg: var(--wash-press); --fg: var(--cobalt-press); --shadow-own: inset 0 1px 3px rgb(14 35 64 / 0.22); }

.button-text {
  --h: var(--target); --px: 2px; --bg: transparent; --fg: var(--cobalt); --shadow-own: 0 0 #0000;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--cobalt) 45%, transparent);
}
.button-text:hover { --bg: transparent; text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; }
.button-text:active { --bg: transparent; --fg: var(--cobalt-press); --shadow-own: 0 0 #0000; text-decoration-thickness: 2px; text-decoration-color: currentColor; }

.button-icon { --h: var(--target); --px: 0; --bg: var(--paper); --fg: var(--ink); --bd: var(--grout); --shadow-own: var(--shadow-1); width: var(--target); }
.button-icon :is(.i, .icon) { width: 20px; height: 20px; }
.button-icon:hover { --bg: var(--paper); --fg: var(--cobalt); --bd: var(--cobalt); }
.button-icon:active { --bg: var(--wash); --fg: var(--cobalt-press); --bd: var(--cobalt); --shadow-own: inset 0 1px 3px rgb(14 35 64 / 0.2); }

.button-light { --bg: var(--calce); --fg: var(--notte); --shadow-own: inset 0 -1px 0 rgb(14 35 64 / 0.16); }   /* on the night band */
.button-light:hover { --bg: #fff; }
.button-light:active { --bg: var(--wall); --fg: var(--notte); }

.button-small { --h: 44px; --px: 16px; font-size: 0.9375rem; gap: 8px; }
.button-large { --h: 56px; --px: 28px; font-size: 1.0625rem; }
.button-block { display: flex; width: 100%; }

/* Disabled keeps its shape: a solid, quiet outline, never a dashed one */
.button:disabled, .button.is-disabled, .button[aria-disabled="true"] {
  --bg: var(--wall); --fg: var(--ink-disabled); --bd: var(--line-quiet); --shadow-own: 0 0 #0000;
  cursor: not-allowed; transform: none;
}
.button-secondary:disabled, .button-secondary.is-disabled, .button-icon:disabled, .button-icon.is-disabled { --bg: var(--paper); }
.button-text:disabled, .button-text.is-disabled, .button-text[aria-disabled="true"] { --bg: transparent; --bd: transparent; text-decoration-color: var(--line-quiet); text-decoration-thickness: 1px; }
.button:disabled :is(.i, .icon), .button.is-disabled :is(.i, .icon) { transform: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

/* ---------- The plaque (targa), the where-line and the arrow link ----------
   The plaque is the glazed street plaque on Sperlonga's houses: white glaze, a cobalt line painted just inside the edge,
   the name in capitals. It carries street names only (the where-line); cobalt on paper is 8.14:1. It keeps to one line
   wherever the name fits, and wraps inside its column (never past the screen) where it doesn't: a long street set in Pages
   CMS, a narrow phone, larger text. */
.targa {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 28px; padding: 4px 11px 3px; border-radius: var(--r-1);
  background: linear-gradient(170deg, #fff 0%, var(--paper) 45%, var(--glass-solid) 100%); color: var(--cobalt);
  font: 600 0.8125rem / 1.2 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere; font-variant-numeric: lining-nums;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--cobalt), 0 1px 2px rgb(14 35 64 / 0.14);
}
.targa-inverse { background: var(--cobalt); color: var(--paper); box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 3px rgb(255 255 255 / 0.9), 0 1px 2px rgb(14 35 64 / 0.24); }
/* Narrow phones: the plaque a little tighter, so a long street name still takes one line; one too long even then wraps */
@media (max-width: 22.4rem) { .targa { padding-inline: 8px; font-size: 0.75rem; letter-spacing: 0.06em; } }
/* Where a house is: its street on a plaque, then the area. Markup: <p class="where"><span class="targa">Via …</span> <span class="where-area">Centro storico</span></p> */
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 var(--s-3); }
.where-area { font: 500 var(--fs-small) / 1.35 var(--font-text); color: var(--ink-2); }
:is(.on-dark, .stop-card-deep) .where-area { color: var(--on-notte-2); }
/* A link to another page of this site, with a trailing → */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); color: var(--cobalt); font-weight: 600; text-decoration: none; }
.link-arrow::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-go) center / contain no-repeat; mask: var(--i-go) center / contain no-repeat; transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover, .link-arrow:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (hover: hover) { .link-arrow:hover::after { transform: translateX(3px); } }

/* ---------- Glass: cards over the 3D view ---------- */
.glass, .header-inner {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), var(--shadow-card);   /* a white top edge and a long, soft shadow */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .header-inner { background: var(--glass-solid); }
}

/* ---------- Header ----------
   Home: the glass bar is fixed over the 3D view. Other pages: the same bar, sticky, with a calce band behind it so nothing
   that scrolls under shows above it. Phones: the links fold into the "Menu" button, and the bar tucks away while the
   visitor scrolls down (src/js/site.js). */
.site-header { position: sticky; top: 0; z-index: 40; padding-top: 12px; pointer-events: none; transition: translate var(--dur-3) var(--ease); }
.site-header-over, .page-home .site-header { position: fixed; inset: 0 0 auto; }
body:not(.page-home) .site-header { background: var(--calce); }
.header-inner { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding: 0 10px 0 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), var(--shadow-2); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); color: var(--ink); text-decoration: none; border-radius: var(--r-2); }
.brand .logo, .brand img { width: 32px; height: 32px; flex: none; color: var(--cobalt); }   /* the client's logo, one colour */
.wordmark { font: 600 1.375rem / 1 var(--font-display); letter-spacing: -0.005em; white-space: nowrap; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-small); }
.site-nav { display: flex; align-items: center; }
.site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 14px; border-radius: var(--r-2); color: var(--ink); font-size: 0.96875rem; font-weight: 500; text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current]::after { height: 2px; background: var(--cobalt); }
/* The other language: a plain cobalt item after a hairline, not a button */
.site-nav .lang-switch { display: flex; align-items: center; position: relative; margin-left: 6px; padding-left: 6px; }
.site-nav .lang-switch::before { content: ""; position: absolute; left: 0; top: 50%; height: 20px; margin-top: -10px; width: 1px; background: var(--line); opacity: 0.6; }
.site-nav .lang-switch a { color: var(--cobalt); font-weight: 600; }
.site-nav .nav-properties { display: none; }
.nav-toggle { display: none; }
.nav-toggle .icon { width: 18px; height: 18px; flex: none; }
.nav-toggle[aria-expanded="true"] .icon-menu, .nav-toggle:not([aria-expanded="true"]) .icon-close { display: none; }

@media (max-width: 47.99rem) {
  html { --anchor-clear: 5rem; }
  .header-inner { min-height: 60px; padding: 0 8px 0 12px; gap: var(--s-3); }
  .brand { gap: 10px; }
  .brand .logo, .brand img { width: 30px; height: 30px; }
  .wordmark { font-size: 1.1875rem; }
  /* Phones: the bar tucks away while scrolling down and comes back on the way up */
  .site-header.is-tucked { translate: 0 calc(-100% - 24px); }   /* the bar's shadow goes too */
  /* Over the moving map, a phone repaints a blurred panel every frame: a solid one instead */
  .page-home .header-inner { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
  .js .nav-toggle { display: inline-flex; }
  .nav-toggle { --px: 12px; flex: none; }   /* "Menu" and "Chiudi" both fit beside the wordmark (see the 24rem block) */
  .js .site-nav { display: none; }
  .js .site-nav.open {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: block; padding: 6px;
    max-height: calc(100svh - 6rem); overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
    animation: menu-in var(--dur-ui) var(--ease); transform-origin: top right; --focus-gap: var(--paper);
  }
  .site-nav.open ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav.open a { display: flex; min-height: 48px; padding: 0 12px; font-size: 1.0625rem; }
  .site-nav.open a::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; transform: scaleY(0); }
  .site-nav.open a[aria-current]::after { transform: scaleY(1); }
  .site-nav.open .lang-switch { margin: 0; padding: 0; }
  .site-nav.open .lang-switch::before { display: none; }
  .site-nav.open .nav-properties { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--grout); }
  .site-nav.open .nav-properties a { justify-content: space-between; gap: 12px; font-weight: 500; }
  .nav-area { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
  /* Without JavaScript the links stay visible under the brand, and the taller header scrolls away with the page */
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 6px; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
  html:not(.js) .site-nav .lang-switch::before { display: none; }
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .page-home .site-header { position: absolute; }
}
/* Small phones (360–384 px): a smaller wordmark and tighter bar, so the button and its wider "Chiudi" state stay inside
   the bar (the brand name is never hidden: it is the home link's only name) */
@media (max-width: 24rem) {
  .header-inner { padding: 0 6px 0 10px; gap: var(--s-2); }
  .wordmark { font-size: 1.0625rem; }
  .brand { gap: 8px; }
  .brand .logo, .brand img { width: 28px; height: 28px; }
}
/* The smallest phones (320 px): the button keeps its name for screen readers and shows only its icon */
@media (max-width: 22.4rem) {
  .site-header { padding-top: 8px; }
  .header-inner { min-height: 52px; padding: 0 4px 0 10px; }
  .nav-toggle { --px: 0; width: var(--target); }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; scale: 0.98; } }
/* Landscape phones and 400% zoom: the header scrolls away with the page instead of covering it */
@media (max-height: 30rem) {
  .site-header { position: relative; }
  .site-header-over, .page-home .site-header { position: absolute; }
  html { --anchor-clear: 1rem; }
}

/* ---------- The language line: one quiet line in the other language, never a popup (src/js/site.js) ---------- */
.lang-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; width: fit-content; max-width: 100%; margin: 0 0 var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.lang-hint p { margin: 0; }
/* The link and its close button stay together: the × never wraps onto a line of its own */
.lang-hint-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0 12px; }
.lang-hint a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.lang-hint button { display: inline-grid; place-items: center; width: var(--target); height: var(--target); margin-left: -8px; padding: 0; border: 0; border-radius: var(--r-2); background: none; color: inherit; cursor: pointer; }
.lang-hint button:hover { color: var(--cobalt); }
.lang-hint .icon { width: 18px; height: 18px; }
/* Over the hero scrim (white text there is 4.92:1 or more). It starts 12 px below the hint above it: that link's 44 px
   target reaches 11.5 px below its line, and the two must not overlap. */
.hero-copy .lang-hint { margin: var(--s-3) 0 var(--s-4); color: #fff; text-shadow: 0 1px 12px rgb(4 20 40 / 0.35); --focus: #fff; --focus-gap: rgb(var(--scrim-rgb)); }
.hero-copy .lang-hint a, .hero-copy .lang-hint button:hover { color: #fff; }
.hero-copy .lang-hint a { text-decoration-color: rgb(255 255 255 / 0.6); }

/* ---------- Footer: one row of maiolica tiles, then the night band ---------- */
.site-footer { background: var(--notte); color: var(--on-notte); }
.site-footer a { color: inherit; }
/* Four quarter-arcs and a giallo centre; tiles side by side join the arcs into circles */
.tile-band {
  height: 36px; background-color: var(--notte-2); background-size: 36px 36px; background-position: center top; border-bottom: 1px solid rgb(185 195 211 / 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M0 22A22 22 0 0 0 22 0M26 0A22 22 0 0 0 48 22M48 26A22 22 0 0 0 26 48M22 48A22 22 0 0 0 0 26' fill='none' stroke='%236B80A6' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='24' r='2.6' fill='%23E6B547'/%3E%3C/svg%3E");
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
.site-footer .brand { color: var(--on-notte); }
.site-footer .brand .logo { color: var(--on-notte); }
.footer-tagline { margin: var(--s-3) 0 0; color: var(--on-notte-2); }
.footer-title { margin: 0 0 var(--s-2); font: 600 var(--fs-label) / 1.3 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--giallo); }
.footer-links, .site-footer .contact-list { margin: 0; padding: 0; list-style: none; }
/* List links: no underline at rest, a giallo underline on hover and focus. Every link is 44 px tall. */
.footer-links a, .site-footer .contact-list a { display: inline-flex; align-items: center; min-height: var(--target); margin-inline: -4px; padding-inline: 4px; color: var(--on-notte); text-decoration: none; border-radius: var(--r-1); }
/* Contact rows keep the Alloggi rows' rhythm: a one-line row is 44 px with its line in the middle, and an address that wraps
   keeps the same space above its first line and below its last, so each first line sits level with the Alloggi row beside it
   and wrapped rows stay apart (8 px where the lh unit is unknown) */
.site-footer .contact-list a, .site-footer .contact-list .contact-missing { align-items: flex-start; padding-block: 8px; padding-block: calc((var(--target) - 1lh) / 2); }
.footer-links a:hover, .site-footer .contact-list a:hover, .footer-links a:focus-visible, .site-footer .contact-list a:focus-visible { text-decoration: underline; text-decoration-color: var(--giallo); text-underline-offset: 0.3em; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-4) var(--s-6); border-top: 1px solid rgb(185 195 211 / 0.2); font-size: var(--fs-small); color: var(--on-notte-2); }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0; padding: 0; list-style: none; }
.footer-legal a, .footer-credit { display: inline-flex; align-items: center; min-height: var(--target); margin-inline: -4px; padding-inline: 4px; color: var(--on-notte-2); text-decoration: none; border-radius: var(--r-1); }
.site-footer .footer-legal a, .site-footer .footer-credit { color: var(--on-notte-2); }
.footer-legal a:hover, .footer-credit:hover, .footer-legal a:focus-visible, .footer-credit:focus-visible { color: var(--on-notte); text-decoration: underline; text-decoration-color: var(--giallo); text-underline-offset: 0.3em; }
@media (max-width: 47.99rem) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ---------- Plain pages: legal pages and the like ---------- */
.page .section:first-of-type { padding-block-start: clamp(2.5rem, 6vw, 4.5rem); }
.container.prose { max-width: none; }
.prose > * { max-width: 42rem; }
.prose h1 { margin: 0 0 var(--s-3); }
.prose h2 { font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem); line-height: 1.15; margin: 2.5rem 0 0.6rem; }
.prose h3 { margin: 1.75rem 0 0.4rem; font: 600 var(--fs-h4) / 1.3 var(--font-text); letter-spacing: -0.005em; }
.prose p, .prose ul, .prose ol { margin-block: 0 1rem; }
.prose li + li { margin-top: 0.35rem; }
/* Lists in running text: the small cobalt diamond of the property page's facilities and rules (property.css), not the
   browser's disc. Numbered lists keep their numbers; a list with its own class styles itself. */
.prose ul:not([class]) { list-style: none; padding-left: 0; }
.prose ul:not([class]) > li { position: relative; padding-left: 24px; }
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; rotate: 45deg; border: 1.5px solid var(--marker, #1D4F91); }
.prose .updated { margin: 0 0 var(--s-7); font-size: var(--fs-small); color: var(--ink-2); }
.prose .draft-note { margin: 0 0 var(--s-5); }
/* "The text of this page is in English only", in the page's language, above the legal text (layouts/policy.njk) */
.prose .text-lang { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 404: the page in the visitor's language, with every property ---------- */
.notfound + .notfound { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--grout); }
/* The visitor's language has the h1; the other block (shown only without JavaScript) has an h2 at the h2 size */
.notfound h1, .notfound h2 { margin: 0 0 var(--s-3); }
.notfound h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.012em; }
.notfound .lead { margin: 0 0 var(--s-6); }
.notfound-guess { margin: 0 0 var(--s-4); font-weight: 600; }
.notfound-list { max-width: 40rem; margin: 0 0 var(--s-5); padding: 0; list-style: none; border-top: 1px solid var(--grout); }
.notfound-list li { border-bottom: 1px solid var(--grout); }
.notfound-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 18px; grid-template-rows: auto auto; column-gap: var(--s-4); align-items: center; min-height: 76px; padding: 10px 8px; color: var(--ink); text-decoration: none; border-radius: var(--r-2); transition: background-color var(--dur-2) var(--ease); }
.notfound-list a:hover { background: var(--wash); }
.notfound-list img, .notfound-img-empty { grid-row: 1 / 3; width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-2); }
.notfound-img-empty { background: var(--wall); }
.notfound-name { align-self: end; font: 500 1.375rem / 1.15 var(--font-display); font-variation-settings: "opsz" var(--opsz-small); }
.notfound-area { align-self: start; font-size: var(--fs-small); color: var(--ink-2); }
.notfound-list .icon { grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--cobalt); transition: transform var(--dur-2) var(--ease); }
.notfound-list a:hover .icon { transform: translateX(3px); }

/* ---------- Gentle entrances as sections come into view (src/js/site.js adds .is-in); visible without JavaScript ---------- */
.js .reveal { opacity: 0; translate: 0 18px; transition: opacity 0.7s var(--ease), translate 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Page transitions: the photo and the name move from what was clicked (partials/view-transitions.njk) ---------- */
@view-transition { navigation: auto; }
/* On the bar, not on .site-header: a view-transition-name makes an element a backdrop root, and the bar's blur would then
   see nothing behind it */
.header-inner { view-transition-name: site-header; }
::view-transition-group(*) { animation-duration: var(--dur-page); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root) { animation: 180ms var(--ease-exit) both vt-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 10px; } }
::view-transition-image-pair(photo) { overflow: clip; border-radius: var(--r-2); }
::view-transition-old(photo), ::view-transition-new(photo) { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Preferences ---------- */
/* More contrast, or less transparency: solid panels, nothing shows through */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-solid); }
  .glass, .header-inner { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Windows high contrast: the system's colours, with visible edges on every control */
@media (forced-colors: active) {
  .button { border: 2px solid ButtonText; }
  .button:not(.button-secondary, .button-text, .button-icon, .button-light) { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
  .header-inner, .glass, .targa { border: 1px solid CanvasText; }
  .link-arrow::after { forced-color-adjust: none; background: LinkText; }
  .tile-band { forced-color-adjust: none; }
  :focus-visible { outline: 2px solid Highlight; }
}
/* Reduced motion: no movement; colour changes stay */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .js .reveal { translate: none; }
  .button:active { transform: none; }
  .button:hover :is(.i, .icon), .link-arrow:hover::after, .notfound-list a:hover .icon { transform: none; }
}

/* ---------- Print: the content and the credit; no header, no menus ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .skip-link, .announcement, .lang-hint { display: none !important; }
  .site-footer { background: none; color: #000; padding: 0; }
  .tile-band, .footer-grid, .footer-legal { display: none; }
  .footer-bottom { border-top: 1px solid #bbb; color: #000; }
  .site-footer .footer-credit { color: #000; }
  .js .reveal { opacity: 1; translate: none; }
  a { color: #000; }
}

/* ---------- Focus: one ring everywhere (keep this block last) ----------
   A 2 px gap in the surface colour, then a 2 px ring: cobalt on light, glass, the map and photos; giallo on the night band.
   The gap and the ring differ by 7.41:1, so one of them always clears 3:1 against whatever is behind.
   The transparent outline is what forced-colours mode shows. Buttons keep their own shadow underneath. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus), var(--shadow-own, 0 0 #0000); }
[tabindex="-1"]:focus-visible { box-shadow: none; }   /* headings and <main> focused by script show no ring */
.site-nav.open a:focus-visible, .notfound-list a:focus-visible { box-shadow: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--focus-gap); }   /* inside clipped panels the ring is drawn inward */