/* Vila Flamuri: global stylesheet.
   Order: tokens, reset, type, layout, pennant and wave, buttons, header and navigation, page header,
   cards, split and media stack, ticks, badges, forms, footer, call bar, placeholders, prose, utilities,
   reduced motion. Home-only rules live in home.css, the booking request in booking.css, motion in
   motion.css.

   Colour rules (every pair is held by _tools/contrast.py, which also keeps the palette at a distance from
   other sites' colours):
   - terracotta is an accent: marks, eyebrows and short labels on sand and white, never body text, and
     never small text on the tint (4.2:1 there), where eyebrows turn petrol
   - on the deep petrol band the accent is --terra-on-dark, which fails on plain petrol (4.4:1)
   - secondary text is --muted on sand, white and tint; on the dark band it is --on-dark-muted
   - --line is decorative; a form field's edge uses --field (3:1 or better)
   The finished page is what this file draws: JavaScript only adds behaviour. */

:root {
  --sand: #F6EAD2;
  --sand-2: #E9DAC2;
  --white: #FFFFFF;
  --petrol: #0E4B57;
  --petrol-deep: #003642;
  --terra: #A9482A;
  --terra-on-dark: #F09A78;
  --ink: #1A2224;
  --muted: #586260;
  --on-dark: #E6EFEE;
  --on-dark-muted: #A8C0C0;
  --line: #DCC9A6;
  --field: #586260;
  /* the chosen stay in the calendar and the message preview; the lighter one is the stay under the pointer */
  --petrol-tint: #E2E9EB;
  --petrol-tint-2: #EFF3F4;
  /* the walk map: land, wood, sea and sand, their lines, and the ink for the names set on sea and sand */
  --map-land: #F1E6CE;
  --map-wood: #D9DEBF;
  --map-sea: #C7DBDC;
  --map-sand: #F4DEA5;
  --map-coast: #9DBFC2;
  --map-path: #A8916A;
  --map-case: #D3BF98;
  --map-sea-ink: #2F5F66;
  --map-sand-ink: #6F4C1C;
  --error: #A3271C;
  --error-bg: #FBE7E3;
  --ok-fg: #1D4F3A;
  --ok-bg: #E3F1E8;
  --todo-fg: #6B4E00;
  --todo-bg: #FFF3C4;
  /* the lightbox backdrop, and what it makes of the lightest page behind it (contrast.py composites) */
  --lightbox-bg: rgba(0, 54, 66, 0.94);
  --lightbox-bg-worst: #0F424D;

  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-text: "Figtree", "Figtree Fallback", Arial, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 54, 66, 0.06), 0 14px 32px -16px rgba(0, 54, 66, 0.22);
  --shadow-2: 0 2px 6px rgba(0, 54, 66, 0.08), 0 24px 48px -20px rgba(0, 54, 66, 0.3);

  --container: 1200px;
  --gutter: clamp(18px, 4.5vw, 44px);
  --section-y: clamp(64px, 8vw, 112px);
  --header-h: 76px;
  --callbar-h: 0px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-ui: 280ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scroll padding at the foot too: up to 860 px the fixed call bar covers the bottom of the screen, and a
   focused field scrolled into view must land above it, not under it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: calc(var(--callbar-h) + 8px); scrollbar-gutter: stable; }
body { min-height: 100vh; background: var(--sand); color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, svg { display: block; max-width: 100%; }
/* width and height attributes are the CLS reservation, and the height one is a presentational hint that
   beats aspect-ratio unless height is auto: without this line every aspect-ratio image renders at its full
   natural height */
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--petrol); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-deep); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .site-footer :focus-visible, .lightbox :focus-visible { outline-color: var(--on-dark); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--petrol); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.35rem, 1.5rem + 3.3vw, 4.1rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); font-weight: 600; line-height: 1.2; }
p, li, dd { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem); color: var(--ink); max-width: 60ch; }
.todo { background: var(--todo-bg); color: var(--todo-fg); padding: 0 0.3em; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--sand-2); }
.section--dark { background: var(--petrol-deep); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--flush { padding-top: clamp(8px, 2vw, 24px); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head > * + * { margin-top: 12px; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; max-width: none; }

/* ---------- the logo, the pennant and the wave ---------- */
/* the logo mark (_tools/templates/logo.mjs): its width follows the viewBox; the window and waves take the sea ink */
.logo { height: 52px; width: auto; flex: none; }
.logo__ink { fill: var(--petrol-deep); }
.logo__sea { fill: var(--map-sea-ink); }
.logo__flag { fill: var(--terra); }
.pennant-sm { width: 1em; height: 0.87em; flex: none; fill: var(--terra); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-text); font-size: 0.95rem; font-weight: 700; color: var(--terra); letter-spacing: 0.01em; }
.section--tint .eyebrow { color: var(--petrol); }
.eyebrow--on-dark, .section--dark .eyebrow { color: var(--terra-on-dark); }
.section--dark .pennant-sm { fill: var(--terra-on-dark); }
.wave { width: 96px; height: 10px; overflow: visible; }
.wave path { fill: none; stroke: var(--terra); stroke-width: 2.2; stroke-linecap: round; }
.section--dark .wave path { stroke: var(--terra-on-dark); }

/* ---------- buttons: pills, never boxes ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px; padding: 0.75em 1.5em; border: 1.5px solid transparent; border-radius: var(--pill); font-family: var(--font-text); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.btn .icon { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary { background: var(--petrol); color: var(--white); }
.btn--primary:hover { background: var(--petrol-deep); color: var(--white); }
.btn--outline { border-color: var(--petrol); color: var(--petrol); background: transparent; }
.btn--outline:hover { background: var(--petrol); color: var(--white); }
.btn--light { background: var(--sand); color: var(--petrol-deep); }
.btn--light:hover { background: var(--white); color: var(--petrol-deep); }
.btn--sm { min-height: 42px; padding: 0.55em 1.15em; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--petrol); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link-arrow .icon { width: 1.1em; height: 1.1em; }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow--on-dark, .section--dark .link-arrow { color: var(--on-dark); text-decoration-color: rgba(230, 239, 238, 0.4); }
.link-arrow--on-dark:hover, .section--dark .link-arrow:hover { color: var(--white); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- header and navigation ----------
   Solid, never backdrop-filtered: a filter on the header would make it the containing block of the fixed
   drawer inside it, and the drawer would collapse to the header's height. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--pill); background: var(--petrol-deep); color: var(--white); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--sand); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--petrol-deep); text-decoration: none; border-radius: 8px; }
.brand:hover { color: var(--petrol-deep); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.08em; }
.brand__tag { margin-top: 5px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); }
.site-nav { margin-left: auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav-menu a { position: relative; display: inline-block; padding: 12px 2px; color: var(--petrol); font-weight: 700; font-size: 0.98rem; text-decoration: none; }
.nav-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease); }
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu__lang { display: none; }
/* the drawer's own enquiry pill: the header's hides on the narrowest phones */
.nav-menu__cta { display: none; }
.nav-side { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a, .lang-switch__current { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 6px; border-radius: var(--pill); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--petrol); background: var(--sand-2); }
.lang-switch__current { color: var(--petrol); box-shadow: inset 0 -2px 0 var(--terra); border-radius: 0; }
.nav-toggle { display: none; position: relative; width: 48px; height: 48px; border: 0; border-radius: var(--pill); background: transparent; }
.nav-toggle .bar { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--petrol); border-radius: 2px; transition: transform var(--t-ui) var(--ease), opacity var(--t-fast); }
.nav-toggle .bar:nth-child(2) { top: 17px; }
.nav-toggle .bar:nth-child(3) { top: 23px; }
.nav-toggle .bar:nth-child(4) { top: 29px; }

/* six links, the wordmark and the enquiry pill need about 1,000 px; below that the links move into the
   drawer (main.js closes it on a resize past the same width) */
@media (max-width: 1080px) {
  :root { --header-h: 66px; }
  /* the scroll lock pins the body at a negative top, which would carry a sticky header off screen with
     it, close button included; while the drawer is open the header is fixed to the viewport instead */
  .nav-open .site-header { position: fixed; left: 0; right: 0; top: 0; }
  .nav-toggle { display: inline-block; }
  .lang-switch--header { display: none; }
  .nav-side { margin-left: auto; }
  .site-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; margin: 0; padding: 28px var(--gutter) 40px; background: var(--sand); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s linear var(--t-ui); }
  .nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s; }
  .nav-menu { flex-direction: column; align-items: flex-start; gap: 2px; }
  .nav-menu a { font-family: var(--font-display); font-size: 2rem; font-weight: 500; padding: 8px 0; }
  .nav-menu__lang { display: block; margin-top: 24px; }
  .nav-menu__cta { display: block; margin-top: 28px; }
  .nav-menu .nav-menu__cta a { padding: 0.75em 1.6em; font-family: var(--font-text); font-size: 1.05rem; font-weight: 700; color: var(--white); }
  .nav-menu .nav-menu__cta a::after { content: none; }
  .nav-menu .lang-switch a { font-family: var(--font-text); font-size: 0.85rem; font-weight: 700; padding: 0 8px; }
  .nav-menu .lang-switch a::after { content: none; }
  .nav-open .nav-toggle .bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle .bar:nth-child(3) { opacity: 0; }
  .nav-open .nav-toggle .bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 480px) {
  .header-cta { display: none; }
  .brand__name { font-size: 1.15rem; }
  .logo { height: 44px; }
}
/* Without JavaScript the drawer cannot open, so the links stay in a second row of the header. */
@media (max-width: 1080px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header__row { flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .site-nav { position: static; visibility: visible; opacity: 1; transform: none; padding: 0; width: 100%; background: none; order: 3; }
  html:not(.js) .nav-menu { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  html:not(.js) .nav-menu a { font-family: var(--font-text); font-size: 1rem; font-weight: 700; }
  html:not(.js) .lang-switch--header { display: flex; }
  html:not(.js) .nav-menu__lang, html:not(.js) .nav-menu__cta { display: none; }
}

/* ---------- page header (inner pages) ---------- */
.page-header { padding-block: clamp(40px, 6vw, 84px) clamp(24px, 3vw, 40px); }
.page-header .container > * + * { margin-top: 14px; }
.page-header .lead { color: var(--ink); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; color: var(--muted); }
.crumbs li + li::before { content: "/" / ""; margin-right: 10px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrol); font-weight: 600; }
.page-header .crumbs + * { margin-top: 4px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card__media img, .card__media .ph-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; border-width: 0 0 1.5px; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.card__title { font-size: 1.6rem; font-weight: 500; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 3px; }
.card p { color: var(--muted); }
.card__todo { align-self: flex-start; padding: 4px 10px; border-radius: var(--pill); background: var(--todo-bg); color: var(--todo-fg); font-size: 0.85rem; font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.meta li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.meta .icon { width: 1.15em; height: 1.15em; color: var(--petrol); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards--2 { grid-template-columns: 1fr; } }

/* ---------- split and media stack ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split__body > * + * { margin-top: 16px; }
.split__body .wave { margin-top: 12px; }
.media-stack { position: relative; margin-bottom: 8%; }
.media-stack > .ph-photo, .media-stack > picture img, .media-stack > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.media-stack__inset { position: absolute; right: -4%; bottom: -10%; width: 38%; }
.media-stack__inset .ph-photo, .media-stack__inset img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid var(--sand-2); border-radius: var(--radius); box-shadow: var(--shadow-1); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .media-stack { margin-bottom: 0; }
  /* the inset inverts the hierarchy on a phone and is not fetched while hidden */
  .media-stack__inset { display: none; }
}

/* ---------- ticks: pennants for bullets ---------- */
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 11px; background: var(--terra); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }

/* ---------- badges: where to find the house online, no scores ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.badge { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 22px 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); text-decoration: none; transition: border-color var(--t-ui) var(--ease); }
.badge:hover { border-color: var(--petrol); color: var(--ink); }
.badge .icon { width: 28px; height: 28px; color: var(--petrol); }
.badge__txt { display: flex; flex-direction: column; line-height: 1.3; }
.badge__txt b { font-weight: 700; }
.badge__txt > span { font-size: 0.92rem; color: var(--muted); }

/* ---------- distances: the walks and drives listed on the home page's dark band and the location page ---------- */
.dists { display: grid; margin-top: 24px; border-top: 1px solid var(--line); }
.dist { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding-block: 11px; border-bottom: 1px solid var(--line); }
.dist .icon { width: 20px; height: 20px; color: var(--terra); }
/* a walk's number, drawn as its marker on the map is */
.dist__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--petrol); color: var(--white); font-size: 0.8rem; font-weight: 700; }
.dist__what { font-weight: 600; }
.dist__num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.dist__time { min-width: 7.5em; color: var(--muted); font-size: 0.95rem; text-align: right; }
.source-note { font-size: 0.85rem; color: var(--muted); }
.section--dark .dists, .section--dark .dist { border-color: rgba(230, 239, 238, 0.16); }
.section--dark .dist .icon { color: var(--terra-on-dark); }
.section--dark .dist__n { box-shadow: 0 0 0 1.5px var(--on-dark); }
.section--dark .dist__time, .section--dark .source-note { color: var(--on-dark-muted); }
@media (max-width: 480px) {
  .dist { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dist__time { grid-column: 2 / -1; min-width: 0; text-align: left; margin-top: -6px; }
}

/* ---------- the walk map: an SVG the build draws from OpenStreetMap data ----------
   Sizes are in the drawing's own units (600 across); strokes are in screen pixels, so a street is as
   wide on a phone as on a desktop. */
.walkmap-fig { margin: 0; }
.walkmap { width: 100%; height: auto; border-radius: var(--radius-lg); }
.walkmap-fig--light .walkmap { box-shadow: 0 0 0 1px var(--line); }
.walkmap-fig__cap { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.walkmap-fig__cap a { color: inherit; }
.section--dark .walkmap-fig__cap { color: var(--on-dark-muted); }
.wm-land { fill: var(--map-land); }
.wm-wood { fill: var(--map-wood); }
.wm-sea { fill: var(--map-sea); }
.wm-beach { fill: var(--map-sand); }
.wm-coast, .wm-path, .wm-case, .wm-road, .wm-walk-case, .wm-walk, .wm-leader { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wm-coast { stroke: var(--map-coast); stroke-width: 1.5px; }
.wm-path { stroke: var(--map-path); stroke-width: 1.5px; stroke-dasharray: 3 3; }
.wm-case { stroke: var(--map-case); stroke-width: 5.5px; }
.wm-case--major { stroke-width: 9px; }
.wm-road { stroke: var(--white); stroke-width: 3.5px; }
.wm-road--major { stroke-width: 7px; }
.wm-walk-case { stroke: var(--white); stroke-width: 8px; }
.wm-walk { stroke: var(--terra); stroke-width: 4px; }
.wm-leader { stroke: var(--petrol); stroke-width: 1.5px; }
.wm-spot { fill: var(--petrol); }
.walkmap text { font-family: var(--font-text); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke-linejoin: round; }
.wm-name { font-size: 20px; stroke-width: 5px; }
.wm-name--sea { fill: var(--map-sea-ink); stroke: var(--map-sea); font-style: italic; font-weight: 600; letter-spacing: 0.12em; }
.wm-name--beach { fill: var(--map-sand-ink); stroke: var(--map-sand); }
.wm-mark circle { fill: var(--petrol); stroke: var(--white); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.wm-mark text { font-size: 19px; fill: var(--white); stroke: none; }
.wm-home circle { fill: var(--terra); stroke: var(--white); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.wm-home__pole { fill: none; stroke: var(--petrol); stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wm-home__flag { fill: var(--terra); }
.walkmap .wm-home__name { font-family: var(--font-display); font-size: 23px; font-weight: 600; text-anchor: start; fill: var(--petrol); stroke: var(--map-land); stroke-width: 5px; }
.walkmap .wm-time { font-size: 17px; text-anchor: start; fill: var(--terra); stroke: var(--map-land); stroke-width: 5px; }
.walkmap .wm-home__name--left { text-anchor: end; }
.wm-scale path { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.wm-scale text, .wm-north text { font-size: 16px; fill: var(--ink); stroke: var(--map-land); stroke-width: 4px; }
/* the scale sits on the open sea at the top left, its words haloed in the sea's colour */
.wm-scale text { stroke: var(--map-sea); }
.wm-north path { fill: var(--ink); }
@media (forced-colors: active) {
  .walkmap * { forced-color-adjust: none; }
  .wm-land, .wm-wood, .wm-sea, .wm-beach { fill: Canvas; }
  .wm-coast, .wm-path, .wm-road, .wm-leader, .wm-scale path, .wm-home__pole { stroke: CanvasText; }
  .wm-case, .wm-walk-case { stroke: Canvas; }
  .wm-walk { stroke: Highlight; }
  .wm-mark circle, .wm-spot, .wm-home circle, .wm-home__flag, .wm-north path { fill: CanvasText; stroke: Canvas; }
  .wm-mark text { fill: Canvas; }
  .wm-name, .walkmap .wm-time, .walkmap .wm-home__name, .wm-scale text, .wm-north text { fill: CanvasText; stroke: Canvas; }
}

/* ---------- forms (contact page; the booking request is in booking.css) ---------- */
.form-wrap { position: relative; padding: clamp(20px, 4vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.95rem; color: var(--petrol); }
.req { font-weight: 400; font-size: 0.85em; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); }
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(14, 75, 87, 0.22); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: 0.9rem; font-weight: 600; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.form-note { font-size: 0.95rem; }
.form-error-banner { margin-bottom: 18px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--error-bg); color: var(--error); font-weight: 700; }
.form-success { display: none; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok-fg); font-weight: 700; }
.form-success.is-shown, .form-success:target { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--petrol-deep); color: var(--on-dark); padding-top: clamp(52px, 7vw, 84px); padding-bottom: var(--callbar-h); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.2fr; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(36px, 5vw, 56px); }
.brand--footer, .brand--footer:hover { color: var(--on-dark); }
.brand--footer .logo__ink { fill: var(--on-dark); }
.brand--footer .logo__sea { fill: var(--on-dark-muted); }
.brand--footer .logo__flag { fill: var(--terra-on-dark); }
.brand--footer .brand__tag { color: var(--on-dark-muted); }
.footer-tagline { margin-top: 16px; max-width: 34ch; color: var(--on-dark-muted); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(230, 239, 238, 0.35); border-radius: var(--pill); color: var(--on-dark); transition: background-color var(--t-ui), color var(--t-ui); }
.social__link:hover { background: var(--on-dark); color: var(--petrol-deep); }
.footer-h { margin-bottom: 14px; font-size: 0.95rem; font-weight: 700; color: var(--terra-on-dark); }
.site-footer ul { list-style: none; padding: 0; }
.footer-grid ul:not(.social) { display: grid; gap: 4px; }
.footer-link { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--on-dark); text-decoration: none; }
.footer-link:hover { color: var(--white); text-decoration: underline; }
.footer-link .icon { color: var(--terra-on-dark); }
.footer-address { font-style: normal; color: var(--on-dark-muted); margin-bottom: 8px; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid rgba(230, 239, 238, 0.16); font-size: 0.9rem; color: var(--on-dark-muted); }
.footer-base a { color: var(--on-dark); }
.site-footer .lang-switch a { color: var(--on-dark-muted); }
.site-footer .lang-switch a:hover { color: var(--petrol-deep); background: var(--on-dark); }
.site-footer .lang-switch__current { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--terra-on-dark); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* one column on a phone, but the six page links two to a row: the footer was about 1,050 px tall at 390 */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col--nav ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}

/* ---------- call bar: phones and tablets ----------
   Ask for dates (the booking form), then WhatsApp and Call as round buttons named by their labels. The room
   it needs is kept at the foot of the footer, so the dark footer runs on under it. */
.call-bar { display: none; }
@media (max-width: 860px) {
  :root { --callbar-h: calc(76px + env(safe-area-inset-bottom)); }
  .call-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 10px; }
  .call-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--pill); background: var(--white); border: 1.5px solid var(--petrol); color: var(--petrol); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-2); }
  .call-bar__btn--book { flex: 1; min-width: 0; padding-inline: 16px; background: var(--petrol); color: var(--white); }
  .call-bar__btn--book:hover { color: var(--white); background: var(--petrol-deep); }
  .call-bar__btn--icon { flex: none; width: 52px; padding: 0; }
  .call-bar__btn--icon .icon { width: 24px; height: 24px; }
  .call-bar__btn--icon:hover { color: var(--petrol-deep); background: var(--sand); }
  .nav-open .call-bar { display: none; }
  .toast { bottom: calc(var(--callbar-h) + 8px); }
}
/* a tablet gets the bar at a phone's width, not stretched edge to edge */
@media (min-width: 561px) and (max-width: 860px) {
  .call-bar { left: 50%; right: auto; width: 480px; transform: translateX(-50%); }
}

/* ---------- placeholders: clearly unfinished, never mistaken for a broken image ---------- */
.ph-photo { display: grid; place-items: center; width: 100%; padding: 12px; border: 1.5px dashed var(--field); border-radius: var(--radius-lg); background: var(--sand-2); color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.section--tint .ph-photo { background: var(--sand); }
.ph-photo--hero { aspect-ratio: 3 / 2; }
.ph-photo--photo { aspect-ratio: 4 / 3; }
.ph-photo--tall { aspect-ratio: 3 / 4; }
.ph-photo--square { aspect-ratio: 1; }
.ph-photo--wide { aspect-ratio: 16 / 9; }

/* ---------- numbered photo captions (the home teaser, the gallery), solid sand so their contrast never
   depends on the photograph behind them ---------- */
.photo-cap { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--pill); background: var(--sand); color: var(--ink); font-size: 0.8rem; font-weight: 700; line-height: 1.2; pointer-events: none; }
.photo-cap__n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol); color: var(--white); font-size: 0.72rem; }

/* ---------- inner pages ---------- */
/* a split whose media column comes first on wide screens */
@media (min-width: 861px) { .split--flip > :first-child { order: 2; } }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 860px) { .split--even { grid-template-columns: 1fr; } }
/* what the owner has not confirmed yet: shown in the preview, and the launch gate fails while one remains */
.todo-note { display: inline-block; padding: 6px 14px; border-radius: var(--pill); background: var(--todo-bg); color: var(--todo-fg); font-size: 0.88rem; font-weight: 700; }
.plain-list { display: grid; gap: 10px; }
.plain-list li { position: relative; padding-left: 22px; }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); }
.link-list { display: grid; gap: 12px; }
.meta--lg li { font-size: 1.02rem; }

/* apartments: the photographs always take the wider column (their sizes assume it), on the left or, flipped,
   on the right */
.unit-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.unit-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.unit-split--flip .unit-photos { order: 2; }
.unit-split .split__body > * + * { margin-top: 16px; }
@media (max-width: 860px) {
  .unit-split, .unit-split--flip { grid-template-columns: 1fr; }
  .unit-split--flip .unit-photos { order: 0; }
}
/* one large photograph and a row of small ones, all opening the lightbox */
.u-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.u-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-photo--main { grid-column: 1 / -1; }
.u-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.u-photo--main img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.unit__ask { margin-top: 24px; }

/* the villa: the text beside two square photographs */
.grounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: center; }
.grounds__fig { position: relative; margin: 0; }
.grounds__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 860px) { .grounds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grounds .split__body { grid-column: 1 / -1; } }

/* a closing band that sends the visitor to the booking form: plain petrol, so it never runs into the deep
   petrol footer below it as one undivided dark block */
.section--dark.cta-band { background: var(--petrol); }
.cta-band__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.cta-band__inner > * + * { margin-top: 14px; }

/* FAQ: native details, a topic list that stays in view on wide screens */
.faq-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-toc ul { display: grid; gap: 0; }
.faq-toc a { color: var(--petrol); font-weight: 700; }
.faq { max-width: 760px; }
.faq__group + .faq__group { margin-top: clamp(32px, 5vw, 56px); }
.faq__group h2 { font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem); margin-bottom: 8px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: rotate(45deg); transition: transform var(--t-ui) var(--ease); }
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 0 18px; max-width: 64ch; }
.faq__a > * + * { margin-top: 10px; }
.faq__more { margin-top: 32px; font-weight: 600; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-toc { position: static; }
  .faq-toc ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}

/* contact: two ways to ask side by side, then the details */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-block > * + * { margin-top: 14px; }
.contact-block h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.contact-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.details { display: grid; gap: 14px; margin-top: 18px; }
/* baseline: a 44 px link beside its label otherwise sits 8 px low */
.details__row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.details dt { color: var(--muted); font-weight: 700; }
.details dd { margin: 0; }
/* standalone links are tap targets: 44px tall however short their text */
.details dd a, .faq-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.book-now { padding: clamp(20px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.contact-block .book-now { margin-top: 28px; }
.book-now > * + * { margin-top: 12px; }
@media (max-width: 860px) { .contact-grid, .contact-details { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .details__row { grid-template-columns: 1fr; gap: 2px; } }

/* privacy */
.prose--policy .details { margin-top: 1em; }
.policy-date { margin-top: 2.5em; color: var(--muted); font-size: 0.95rem; }

/* ---------- prose ---------- */
.prose { max-width: 62ch; }
.prose--policy > section:first-child h2 { margin-top: 0.4em; }
.prose h2 { font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem); margin-top: 2em; margin-bottom: 0.5em; }
.prose p + p { margin-top: 0.9em; }
.prose ul { margin-top: 0.8em; padding-left: 1.2em; }
.prose .link-list { padding-left: 0; }
.prose li + li { margin-top: 0.4em; }
.other-langs { margin-top: 1.4em; }

/* ---------- utilities ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: min(92vw, 460px); padding: 14px 20px; border-radius: var(--radius-sm); background: var(--petrol-deep); color: var(--on-dark); box-shadow: var(--shadow-2); transform: translateX(-50%); font-weight: 600; }
/* always in the page as an empty live region (main.js); only its message makes it appear */
.toast:not(.is-shown) { opacity: 0; pointer-events: none; }
.is-todo { text-decoration-style: dotted; }

/* ---------- reduced motion ---------- */
@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; }
  /* the drawer and its links must be visible at once, or focus cannot move into it */
  .site-nav, .site-nav * { transition-duration: 0s !important; }
}