/* =================================================================================================
   PropertyManagement.do base styles: "Caribbean light" (design direction C, chosen by the owner).

   Turquoise sea, sunset coral and warm sand, with the soft round shapes of the sun rising over the
   waves; underneath, a calm, large-type product where every button, step and choice is obvious to
   a 75-year-old. Every page loads this file (the admin shell too).

   Brand, colour treatment "Blend" (the owner's default until they pick): the owner's logo
   (public/assets/img/logo, partials/logo.twig) leads the header and sits as drawn on the light
   footer sand; words are the navy ink taken from the logo; the coral button and lagoon links stay.

   Rules for everyone who styles a page:
   - Use the tokens below (colours, type, spacing, radii, shadows), never raw values.
   - Logical properties only (margin-inline, padding-block, inset-inline-start…): the css-logical
     gate fails the build on left/right, and right-to-left languages then work without overrides.
   - No inline style= or <style> (CSP style-src 'self'); no external fonts or images (fonts are
     self-hosted below, photos live in /assets/img/photos). One coral primary button per screen.
   - The logo is shown as drawn: never recoloured, stretched, cropped or redrawn, never on a dark
     band.
   - Body text is 19 px (1rem here: the root is 118.75 %), line-height 1.6; secondary text is
     never smaller than 0.9rem (17 px); every tap target is at least 48 px (2.55rem) tall.
   - Contrast (WCAG 2.1 AA): ink on shell 13.0:1 (11.2:1 on the footer sand), ink-soft 6.8:1
     (5.9:1 on the footer sand), lagoon-deep links 7.5:1 (6.4:1 on the footer sand), ink on the
     coral button 5.8:1; coral-ink 5.2:1 on shell, 4.9:1 on sand and foam, 4.5:1 on the footer
     sand, so small coral words pass too; coral-icon 4.1:1 on shell (icons need 3:1).

   The component contract (stable class names; the living style guide is /admin/design):

   Layout
     .page                 <main>: a full-bleed grid; direct children sit in the content column
     .bleed                a direct child of .page that spans the whole width (e.g. a photo)
     .band                 a page section with generous vertical space; as a direct child of
                           .page it is full-bleed and its content lines up with the column
     .band-shell/-sand/-foam/-white/-deep   its background (nested bands become rounded panels)
     .wave                 the gentle wave between two bands (partials/wave.twig: from/to colours)
     .stack / .stack-s / .stack-l / .stack-xl   vertical rhythm between children
     .cluster              a wrapping row (buttons, chips) with a gap
     .grid                 auto-fitting cards (min 16rem); .grid-2 / .grid-3 / .grid-4 fixed columns
                           that fold on narrow screens
     .split                text beside media (two columns from 48rem); .split-reverse, .split-center
     .measure              limits a block to a comfortable reading width
     .center               centred text and items
   Type
     h1–h4 (and .h1–.h4 for the look without the level), .display (hero title), .eyebrow (small
     coral label above a title), .lead, .section-head (+ .section-head-center): eyebrow + h2 +
     lead as one block, .hint, .fine
   Links and buttons
     a (lagoon-deep, soft underline), .more (standalone link with a chevron in a circle),
     .back (link with a leading chevron), .link-on-dark
     .button (the coral primary with its lip), .button-secondary (lagoon outline),
     .button-quiet (outline, no lip), .button-danger, .button-small, .button-large,
     .button-wide / .button-block (full width)
   Surfaces
     .card (+ .card-sand, .card-foam, .card-outline, .card-link for a whole-card <a>,
     .card-target for the one link that covers its card, .card-person round,
     .card-business square, .card-photo with .card-body), .card-title
     .notice (+ .notice-ok, .notice-warn, .notice-danger), .chip (+ .chip-sand, .chip-coral,
     .chip-white), .chips, .status (+ .status-todo, .status-doing, .status-done, .status-skip),
     .icon (partials/icon.twig), .icon-tile (+ .icon-tile-round, .icon-tile-coral, .icon-tile-small)
   Photos (partials/photo.twig)
     .photo (a figure), .frame (+ .frame-arch, .frame-arch-tall, .frame-round, .frame-square,
     .frame-landscape, .frame-wide, .frame-natural, .frame-shadow), .photo-note (a caption pill
     inside the frame), .photo-caption (below), .photo-credit, .sunrise (the soft sun behind a photo)
   Progress (partials/progress.twig)
     .progress (the sun on the horizon; data-progress="0…100" in steps of 5), .progress-label,
     .segments (a row of steps, .is-done / .is-current)
   Forms
     label, .field, input/select/textarea (large), .checkbox (a checkbox or radio with its label),
     .choices (+ .choices-grid, .choices-compact) of .choice cards (.choice-icon, .choice-body,
     .choice-title, .choice-help), [aria-invalid="true"], .field-error, .error-text
   Chrome (templates/partials/site_header.twig, site_footer.twig, logo.twig)
     .site-header, .brand, .brand-logo, .site-nav, .header-tools, .lang-pill, .account-slot,
     .site-footer, .footer-* (.footer-grid-full, .footer-cities, .footer-legal),
     .footer-logo, .footer-strip, .copyright, .lang-switcher, .skip-link, .preview-ribbon,
     .lang-banner; .tld (the coral ".do" of a written name)
   ================================================================================================= */

/* ---- Fonts: Nunito (headings, buttons, labels) and Literata (reading text), both SIL Open Font
   License (the OFL.txt next to each family in public/assets/fonts), self-hosted variable WOFF2,
   split by script so a page downloads only what it shows. Chinese uses the system's own CJK font
   (see --body). ---------------------------------------------------------------------------- */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata/literata-italic-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---- Tokens ------------------------------------------------------------------------------------ */

:root {
  /* Palette */
  --ink: #172f4f;            /* navy ink (from the logo): all text, dark bands, the copyright strip */
  --ink-soft: #455a75;       /* navy soft, secondary text: 6.8:1 on shell, 6.3:1 on sand and foam */
  --lagoon: #22b0aa;         /* the sea: decoration, dotted routes, never text */
  --lagoon-deep: #055c62;    /* links, outline buttons, selected state, focus: 7.5:1 on shell */
  --lagoon-line: #8fd5cd;    /* link underlines, hover borders */
  --foam: #e3f6f3;           /* cool sections, icon tiles, chips */
  --foam-deep: #c4ebe4;
  --coral: #ff8a66;          /* sunset coral: THE primary button (ink text, 5.8:1), the sun */
  --coral-hover: #ff9b7c;    /* (ink text 6.6:1) */
  --coral-deep: #e2623f;     /* the button lip, dashed frames, list markers */
  --coral-icon: #d9482f;     /* red-coral: the one coral detail of a small icon (4.3:1 on white) */
  --coral-ink: #bf3b23;      /* red-coral ink: eyebrows and small coral words (4.5:1 or more on
                                shell, sand, foam, white and the footer sand; white on it 5.4:1) */
  --coral-tint: #ffe7dd;
  --gold: #ffc65c;           /* the top of the sun */
  --gold-tint: #fff2d4;
  --gold-line: #e8a93a;
  --sand: #fbf1e4;           /* warm sections */
  --sand-deep: #efdcc3;      /* borders on sand, dashed separators */
  --shell: #fffaf3;          /* the page */
  --footer-sand: #f6e8d6;    /* the footer only: a deeper sand, so the footer shows where it starts */
  --white: #ffffff;
  --tile-low: #f5fbfa;       /* the lower half of a countdown tile (ink 12.9:1, ink-soft 6.5:1) */
  --field: #6f8d8f;          /* form and checkbox borders (3.6:1, non-text contrast) */
  --on-dark: #e6ecf4;        /* text on navy ink (11.4:1): dark bands, the copyright strip */
  --on-dark-soft: #c9d4e3;   /* quieter text on navy ink (9.0:1) */
  --danger: #a3261b;
  --danger-tint: #fdeceb;
  --ok: #1d6b3a;
  --ok-tint: #e6f4ea;
  --warn: #8a5a00;
  --sand-light: var(--white); /* legacy name: the light card surface the modules use */
  --sun: var(--coral);        /* legacy name: accent borders */
  --sun-text: var(--coral-ink); /* legacy name: accent words and icons */

  /* Type */
  --display: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --body: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", serif;
  --text-s: 0.9rem;          /* 17 px: captions, hints, fine print */
  --text-m: 1rem;            /* 19 px: body */
  --text-l: 1.125rem;        /* 21 px: card text that should stand out */
  --text-xl: 1.25rem;        /* 24 px: leads */
  --h4: 1.125rem;
  --h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  --h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --h1: clamp(2rem, 1.35rem + 3vw, 3.3rem);
  --display-size: clamp(2.3rem, 1.4rem + 4.2vw, 4rem);
  --measure: 66ch;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --band-space: clamp(3rem, 2rem + 4vw, 5.5rem);
  --content: 66rem;
  --content-narrow: 46rem;
  --wave-height: clamp(1.5rem, 1rem + 2vw, 2.75rem);

  /* Shapes */
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(23 47 79 / 0.06), 0 6px 14px -8px rgb(23 47 79 / 0.3);
  --shadow: 0 1px 2px rgb(23 47 79 / 0.06), 0 16px 32px -20px rgb(23 47 79 / 0.42);
  --shadow-l: 0 2px 4px rgb(23 47 79 / 0.05), 0 30px 50px -30px rgb(23 47 79 / 0.55);
  --lip: 0 4px 0 var(--coral-deep), 0 12px 22px -12px rgb(226 98 63 / 0.9);
  --lip-pressed: 0 1px 0 var(--coral-deep);
  --lip-outline: 0 3px 0 rgb(5 92 98 / 0.22);
  --focus: 3px solid var(--lagoon-deep);
  --focus-on-dark: 3px solid #ffd66e;
  --tap: 2.55rem;            /* 48 px */

  /* Icons drawn by CSS (mask images; they take the text colour) */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.6' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M13.6 10.4l5.6 5.6-5.6 5.6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-more-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cpath d='M13.6 10.4l5.6 5.6-5.6 5.6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='15.9' mask='url(%23m)'/%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.3' r='1.5'/%3E%3C/svg%3E");
  --icon-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2L2.6 19.8h18.8z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.6v4.6' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.1' r='1.4'/%3E%3C/svg%3E");
  --icon-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v11H3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  --icon-disc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12.5l3.3 3.3L17 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11.5' mask='url(%23m)'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23055c62' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Legacy names the modules use */
  --display-font: var(--display);
  --radius-card: var(--radius-l);

  color-scheme: light;
}

/* ---- Base elements ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The hidden attribute always wins: a rule such as .button { display: inline-flex } would
   otherwise show an element the markup or a script hid. */
[hidden] { display: none !important; }

html {
  font-size: 118.75%; /* 19 px: 1rem is the body text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text-m);
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-wrap: break-word; /* a long word or address wraps instead of widening a phone screen */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Long German, Russian, Dutch and Polish words may break at a hyphen in reading text, but only
   long ones, with at least four letters on each side. Bold display words keep six letters on each
   side and break only when long: 13 letters in the biggest titles (h1, .display: a 14-letter
   "Dominikanische" does not fit a 320 px phone otherwise), 16 in the other headings and bold
   labels ("Republik", "Abstimmung", "Dominikanischen" never split; a real compound such as
   "Botschafterprogramms" still can). Buttons and the navigation never break inside a word. The
   :lang() rule matches every element, so these rules name the descendants too. */
:lang(de), :lang(ru), :lang(nl), :lang(pl) { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
:is(h1, .h1, .display):is(:lang(de), :lang(ru), :lang(nl), :lang(pl)),
:is(h1, .h1, .display) :is(:lang(de), :lang(ru), :lang(nl), :lang(pl)) { hyphenate-limit-chars: 13 6 6; }
:is(h2, h3, h4, .h2, .h3, .h4, .eyebrow, .soon-tag, .countdown-status, .countdown-date, .window-prize, .early-who, .program-ambassador-coming, .move-amb-starts, .hub-amb-when-title, .launch-first-title):is(:lang(de), :lang(ru), :lang(nl), :lang(pl)),
:is(h2, h3, h4, .h2, .h3, .h4, .eyebrow, .soon-tag, .countdown-status, .countdown-date, .window-prize, .early-who, .program-ambassador-coming, .move-amb-starts, .hub-amb-when-title, .launch-first-title) :is(:lang(de), :lang(ru), :lang(nl), :lang(pl)) { hyphenate-limit-chars: 16 6 6; }
:is(.button, .site-nav a, .choice-title), :is(.button, .site-nav a, .choice-title) * { hyphens: manual; }
:lang(zh-Hans) { line-height: 1.8; }

/* .h1–.h4 give any element a heading's look (the level stays the markup's job). */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--h1); font-weight: 900; letter-spacing: -0.022em; line-height: 1.06; }
h2, .h2 { font-size: var(--h2); font-weight: 900; letter-spacing: -0.018em; line-height: 1.1; }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); }
h1 { margin-block-end: var(--space-s); }
h2 { margin-block: var(--space-l) var(--space-xs); }
h3 { margin-block: var(--space-m) var(--space-2xs); }
h4 { margin-block: var(--space-s) var(--space-3xs); }
:lang(zh-Hans) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { letter-spacing: 0; line-height: 1.3; }

p, li { max-inline-size: var(--measure); text-wrap: pretty; }
p + p { margin-block-start: var(--space-xs); }
strong, b { font-weight: 700; }
small { font-size: var(--text-s); }
img, svg, video { max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-block-start: 2px dashed var(--sand-deep); margin-block: var(--space-l); }
code, kbd { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }

a {
  color: var(--lagoon-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lagoon-line);
  text-underline-offset: 0.22em;
}
a:hover { color: var(--lagoon-deep); text-decoration-color: currentColor; }
:focus-visible { outline: var(--focus); outline-offset: 3px; }

/* ---- Layout ------------------------------------------------------------------------------------ */

/* <main class="page">: a full-bleed grid. Every direct child sits in the content column (with a
   gutter on each side); a .band, .bleed or .wave spans the whole width. */
.page {
  flex: 1;
  inline-size: 100%;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(100% - 2 * var(--gutter), var(--content))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
  align-content: start;
  padding-block: var(--space-l) var(--space-2xl);
  /* Decorations that reach past the edge (the sunrise behind a photo, a hero shadow) never widen
     a phone screen. clip, not hidden: it makes no scroll container, so sticky children still work. */
  overflow-x: clip;
}
.page > * { grid-column: content; }
.page > :is(.band, .bleed, .wave) { grid-column: full; }
.page:has(> :is(.band, .bleed, .wave):first-child) { padding-block-start: 0; }
.page:has(> :is(.band, .bleed, .wave):last-child) { padding-block-end: 0; }

.band { padding-block: var(--band-space); }
.band > :first-child { margin-block-start: 0; }
.band:is(.band-shell, .band-sand, .band-foam, .band-white, .band-deep) {
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--radius-l);
}
.page > .band {
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
  border-radius: 0;
}
.band-shell { background: var(--shell); }
.band-sand { background: var(--sand); }
.band-foam { background: var(--foam); }
.band-white { background: var(--white); }
.band-deep { background: var(--ink); color: var(--on-dark); }
.band-deep :is(h1, h2, h3, h4) { color: var(--white); }
.band-deep :is(.lead, .hint) { color: var(--on-dark-soft); }
.band-deep a:not(.button), .link-on-dark { color: var(--white); text-decoration-color: rgb(143 213 205 / 0.75); }
.band-deep :focus-visible { outline: var(--focus-on-dark); }

/* The wave between two bands: partials/wave.twig. Its background is the band above, its fill the
   band below. */
.wave {
  display: block;
  inline-size: 100%;
  block-size: var(--wave-height);
  margin-block-end: -1px;
  fill: var(--shell);
}
.wave-from-shell { background: var(--shell); }
.wave-from-sand { background: var(--sand); }
.wave-from-foam { background: var(--foam); }
.wave-from-white { background: var(--white); }
.wave-from-deep { background: var(--ink); }
.wave-to-shell { fill: var(--shell); }
.wave-to-sand { fill: var(--sand); }
.wave-to-foam { fill: var(--foam); }
.wave-to-white { fill: var(--white); }
.wave-to-deep { fill: var(--ink); }
.wave-to-footer { fill: var(--footer-sand); }
.wave-flip { transform: scaleX(-1); }

.stack > * + * { margin-block-start: var(--space-s); }
.stack-s > * + * { margin-block-start: var(--space-2xs); }
.stack-l > * + * { margin-block-start: var(--space-m); }
.stack-xl > * + * { margin-block-start: var(--space-xl); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); max-inline-size: none; }
.grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-m); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(ul, ol):is(.grid, .grid-2, .grid-3, .grid-4, .cluster) { list-style: none; padding: 0; }
:is(.grid, .grid-2, .grid-3, .grid-4) > li { max-inline-size: none; }
.split { display: grid; gap: var(--space-xl); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-xl) clamp(2rem, 5vw, 4rem); }
  .split-reverse > :first-child { order: 2; }
}
.split-center { align-items: center; }
.measure { max-inline-size: var(--measure); }
.center { text-align: center; }
.center > :is(p, li, .lead), .center:is(p, li, .lead) { margin-inline: auto; }
.center.cluster, .center .cluster { justify-content: center; }

/* ---- Type utilities ---------------------------------------------------------------------------- */

.display { font-family: var(--display); font-size: var(--display-size); font-weight: 900; letter-spacing: -0.028em; line-height: 1.04; text-wrap: balance; }
.eyebrow {
  font: 800 var(--text-s)/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--coral-ink);
  margin-block-end: var(--space-2xs);
}
.lead { font-size: var(--text-xl); line-height: 1.55; color: var(--ink-soft); margin-block: var(--space-s) var(--space-m); max-inline-size: 44ch; }
.section-head { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-l); max-inline-size: 46rem; }
.section-head > * { margin-block: 0; }
.section-head > .lead { max-inline-size: 44ch; }
.section-head-center { margin-inline: auto; text-align: center; justify-items: center; }
.hint { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.fine { color: var(--ink-soft); font-size: var(--text-s); line-height: 1.5; }
.mark { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 11vw, 5.5rem); letter-spacing: -0.03em; line-height: 1; }

/* ---- Links ------------------------------------------------------------------------------------- */

/* A standalone "more" link: bold words and a chevron in a circle that fills on hover. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: var(--tap);
  font: 800 1.05rem/1.3 var(--display);
  color: var(--lagoon-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lagoon-line);
  text-underline-offset: 0.26em;
}
.more::after {
  content: "";
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  background: currentColor;
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
}
.more:hover { text-decoration-color: currentColor; }
.more:hover::after { -webkit-mask-image: var(--icon-more-on); mask-image: var(--icon-more-on); }
[dir="rtl"] .more::after, [dir="rtl"] .back::before { transform: scaleX(-1); }
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--tap);
  font: 800 1rem/1.2 var(--display);
  color: var(--lagoon-deep);
}
.back::before {
  content: "";
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: currentColor;
  -webkit-mask: var(--icon-back) center / contain no-repeat;
  mask: var(--icon-back) center / contain no-repeat;
}

/* ---- Buttons ----------------------------------------------------------------------------------- */

/* The primary: sunset coral with a darker "lip" under it, pressed down when clicked. Variants only
   change the custom properties, so a module rule that sets background or color still wins. */
.button {
  --button-bg: var(--coral);
  --button-bg-hover: var(--coral-hover);
  --button-ink: var(--ink);
  --button-border: transparent;
  --button-shadow: var(--lip);
  --button-shadow-pressed: var(--lip-pressed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 3rem;
  padding-block: 0.55rem;
  padding-inline: 1.5rem;
  border: 2px solid var(--button-border);
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
  font: 800 1.05rem/1.2 var(--display);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.button:hover { background: var(--button-bg-hover); color: var(--button-ink); }
.button:active { transform: translateY(3px); box-shadow: var(--button-shadow-pressed); }
.button:focus-visible { outline: var(--focus); outline-offset: 4px; }
.button .icon { inline-size: 1.3em; block-size: 1.3em; stroke-width: 2; }
.button .icon-32 { stroke-width: 2.6; }
.button-secondary, .button-quiet {
  --button-bg: var(--white);
  --button-bg-hover: var(--foam);
  --button-ink: var(--lagoon-deep);
  --button-border: var(--lagoon-deep);
  --button-shadow: var(--lip-outline);
  --button-shadow-pressed: 0 1px 0 rgb(5 92 98 / 0.22);
}
.button-quiet { --button-bg: transparent; --button-shadow: none; --button-shadow-pressed: none; }
.button-danger {
  --button-bg: var(--white);
  --button-bg-hover: var(--danger-tint);
  --button-ink: var(--danger);
  --button-border: var(--danger);
  --button-shadow: 0 3px 0 rgb(163 38 27 / 0.2);
  --button-shadow-pressed: none;
}
.button-small { min-block-size: var(--tap); padding-block: 0.35rem; padding-inline: 1.1rem; font-size: 0.95rem; gap: 0.45rem; }
.button-large { min-block-size: 3.4rem; padding-inline: 2rem; font-size: 1.15rem; }
.button-wide, .button-block { inline-size: 100%; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.band-deep .button:focus-visible { outline: var(--focus-on-dark); }

/* ---- Icons ------------------------------------------------------------------------------------- */

/* Line icons (templates/partials/icon.twig) take the text colour; one detail in coral. */
.icon {
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-32 { stroke-width: 2.1; }
.icon .icon-dot { fill: currentColor; stroke: none; }
.icon .icon-accent { fill: var(--coral); }
.icon .icon-accent-line { stroke: var(--coral-icon); }
.icon .icon-accent-gold { fill: var(--gold); }
.icon .icon-accent-soft { fill: var(--gold-tint); }
.icon .icon-accent-tint { fill: var(--coral-tint); }
.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 20px;
  background: var(--foam);
  color: var(--ink);
}
.icon-tile .icon { inline-size: 2.2rem; block-size: 2.2rem; }
.icon-tile-round { border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--sand-deep); }
.icon-tile-coral { border-radius: 50%; background: var(--coral-tint); }
.icon-tile-small { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; }
.icon-tile-small .icon { inline-size: 1.7rem; block-size: 1.7rem; }

/* ---- Cards ------------------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}
.card-sand { background: var(--sand); box-shadow: none; }
.card-foam { background: var(--foam); box-shadow: none; }
.card-outline { box-shadow: none; border-color: var(--sand-deep); }
.card-person { border-radius: var(--radius-xl); }
.card-business { border-radius: var(--radius-s); }
.card-title { font: 800 1.3rem/1.25 var(--display); color: var(--ink); margin: 0; }
.card-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card-link:hover { color: var(--ink); border-color: var(--lagoon-line); transform: translateY(-2px); }
/* The one link inside a card that makes the whole card clickable. */
.card-target { text-decoration: none; }
.card-target::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card-target:hover) { border-color: var(--lagoon-line); }
.card-target:focus-visible { outline: none; }
.card:has(.card-target:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.card-photo { padding: 0; overflow: hidden; border: 0; }
.card-photo > .frame, .card-photo > .photo { border-radius: 0; }
.card-body { padding: clamp(1.1rem, 3vw, 1.6rem); }
.card-body > * + * { margin-block-start: var(--space-2xs); }

/* ---- Chips and status pills -------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; max-inline-size: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.2rem;
  padding-block: 0.25rem;
  padding-inline: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--foam);
  box-shadow: inset 0 0 0 1.5px var(--foam-deep);
  font: 700 0.95rem/1.2 var(--display);
  color: var(--ink);
  max-inline-size: 100%;
}
.chip .icon { inline-size: 1.35em; block-size: 1.35em; }
.chip-sand { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.chip-coral { background: var(--coral-tint); box-shadow: inset 0 0 0 1.5px #ffcbb8; }
.chip-white { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }

/* A status always has a shape AND a word: an empty ring (to do), a half sun (in progress), a
   ticked disc (done), a ring with a line through it (not needed). Colour is never the only
   signal. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.2rem;
  padding-block: 0.2rem;
  padding-inline: 0.6rem 0.95rem;
  border: 2px solid var(--field);
  border-radius: var(--radius-pill);
  background: var(--white);
  font: 800 0.95rem/1.2 var(--display);
  color: var(--ink);
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}
.status-todo { border-style: dashed; }
.status-doing { background: var(--gold-tint); border-color: var(--gold-line); }
.status-doing::before { background: linear-gradient(90deg, transparent 50%, var(--coral-icon) 50%); border-color: var(--coral-icon); }
.status-done { background: var(--ok-tint); border-color: var(--ok); }
.status-done::before {
  border: 0;
  background: var(--ok);
  -webkit-mask: var(--icon-disc-check) center / contain no-repeat;
  mask: var(--icon-disc-check) center / contain no-repeat;
}
.status-skip { background: var(--sand); border-color: var(--sand-deep); color: var(--ink-soft); }
.status-skip::before { background: linear-gradient(currentColor, currentColor) center / 60% 2.5px no-repeat; }

/* ---- Notices ----------------------------------------------------------------------------------- */

.notice {
  position: relative;
  padding-block: 1rem;
  padding-inline: 3.4rem 1.25rem;
  border-radius: var(--radius);
  background: var(--foam);
  color: var(--ink);
  border-inline-start: 0;
}
.notice::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.1rem;
  inset-block-start: 1.1rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}
.notice-ok { background: var(--ok-tint); }
.notice-ok::before { background: var(--ok); -webkit-mask-image: var(--icon-ok); mask-image: var(--icon-ok); }
.notice-warn { background: var(--gold-tint); }
.notice-warn::before { background: var(--warn); -webkit-mask-image: var(--icon-alert); mask-image: var(--icon-alert); }
.notice-danger { background: var(--danger-tint); box-shadow: inset 0 0 0 2px rgb(163 38 27 / 0.35); }
.notice-danger::before { background: var(--danger); -webkit-mask-image: var(--icon-alert); mask-image: var(--icon-alert); }
.notice > :first-child { margin-block-start: 0; }
.notice > * + * { margin-block-start: var(--space-2xs); }

/* ---- Forms ------------------------------------------------------------------------------------- */

form .field { display: grid; gap: 0.35rem; margin-block-end: 1.25rem; max-inline-size: 32rem; }
label, legend { font-family: var(--display); font-weight: 800; }
label { line-height: 1.35; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; font-size: var(--text-l); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="number"], input[type="url"], input[type="search"], select, textarea {
  font: 400 1rem/1.4 var(--body);
  min-block-size: 3rem;
  padding-block: 0.55rem;
  padding-inline: 0.85rem;
  border: 2px solid var(--field);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  max-inline-size: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--lagoon-deep); outline-offset: 2px; }
textarea { resize: vertical; }
/* The drawn chevron replaces the native arrow on the site; the admin shell (which sets its own
   select background) keeps the native one. */
:where(body:not(.admin)) select {
  appearance: none;
  padding-inline-end: 2.8rem;
  background-image: var(--icon-select);
  background-repeat: no-repeat;
  background-size: 1.3rem;
  background-position: right 0.85rem center;
}
:where([dir="rtl"] body:not(.admin)) select { background-position: left 0.85rem center; }
::placeholder { color: #5f7b80; opacity: 1; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); background-color: #fffafa; box-shadow: inset 0 0 0 1px var(--danger); }
.field-error label { color: var(--danger); }
.error-text { display: flex; gap: 0.45rem; align-items: flex-start; color: var(--danger); font-weight: 700; }
.error-text::before {
  content: "";
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
  margin-block-start: 0.15em;
  background: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}
input[inputmode="numeric"].code-input { letter-spacing: 0.4em; font: 700 1.6rem/1.2 var(--display); max-inline-size: 12rem; }

/* Checkboxes and radios: drawn large and clear, still the real native control underneath. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: 2px solid var(--field);
  border-radius: 7px;
  background: var(--white);
  cursor: pointer;
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--white);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.1s ease;
}
input[type="radio"]::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform 0.1s ease;
}
input:is([type="checkbox"], [type="radio"]):checked { background: var(--lagoon-deep); border-color: var(--lagoon-deep); }
input:is([type="checkbox"], [type="radio"]):checked::before { transform: scale(1); }
input:is([type="checkbox"], [type="radio"]):hover { border-color: var(--lagoon-deep); }
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: var(--focus); outline-offset: 3px; }
input:is([type="checkbox"], [type="radio"]):disabled { opacity: 0.5; cursor: not-allowed; }
.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 700; cursor: pointer; }
.checkbox input { margin-block-start: 0.1rem; }

/* Choice cards: the whole card is the label of its checkbox or radio (one question per screen). */
.choices { display: grid; gap: 0.9rem; }
.choices-grid { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.choices-compact { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.6rem; }
.choice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  min-block-size: 3.5rem;
  padding-block: 1.1rem;
  padding-inline: 1.1rem;
  border: 2px solid var(--sand-deep);
  border-radius: 22px;
  background: var(--white);
  font-family: var(--body);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.choice:hover { border-color: var(--lagoon-line); }
.choice:has(input:checked) { border-color: var(--lagoon-deep); background: var(--foam); box-shadow: inset 0 0 0 1px var(--lagoon-deep); }
.choice:has(input:checked) .icon-tile { background: var(--white); }
.choice:has(input:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.choice input { margin-block-start: 0.15rem; }
.choice input:focus-visible { outline: none; }
.choice-icon { flex: none; line-height: 0; color: var(--ink); }
.choice-body { display: grid; gap: 0.2rem; }
.choice-title { font: 800 1.15rem/1.3 var(--display); color: var(--ink); }
.choice-help { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }

/* ---- Photos ------------------------------------------------------------------------------------ */

/* partials/photo.twig renders <picture> (WebP + JPEG) inside a frame. People are always round,
   businesses square, places in soft arches or rounded rectangles. */
.photo { margin: 0; }
.frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-l);
  background: var(--foam);
  isolation: isolate;
}
.frame picture { display: block; inline-size: 100%; block-size: 100%; }
.frame img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.frame-natural img { block-size: auto; }
.frame-landscape { aspect-ratio: 3 / 2; }
.frame-wide { aspect-ratio: 16 / 9; }
.frame-arch { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius-l) var(--radius-l) / 40% 40% var(--radius-l) var(--radius-l); }
.frame-arch-tall { aspect-ratio: 1 / 2; border-radius: 50% 50% 18px 18px / 25% 25% 18px 18px; }
.frame-round { aspect-ratio: 1; border-radius: 50%; }
.frame-square { aspect-ratio: 1; border-radius: var(--radius-s); }
.frame-shadow { box-shadow: var(--shadow-l); }
.photo-note {
  position: absolute;
  inset-inline-start: 0.75rem;
  inset-block-end: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  max-inline-size: calc(100% - 1.5rem);
  padding-block: 0.35rem;
  padding-inline: 0.6rem 0.8rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.93);
  box-shadow: 0 6px 16px -10px rgb(23 47 79 / 0.6);
  font: italic 400 0.85rem/1.35 var(--body);
  color: var(--ink);
}
.photo-note::before, .photo-caption::before {
  content: "";
  flex: none;
  inline-size: 1.05em;
  block-size: 1.05em;
  margin-block-start: 0.15em;
  background: var(--coral-icon);
  -webkit-mask: var(--icon-camera) center / contain no-repeat;
  mask: var(--icon-camera) center / contain no-repeat;
}
.frame-round .photo-note, .frame-arch .photo-note { inset-inline: 1rem; inset-block-end: 1rem; inline-size: fit-content; margin-inline: auto; }
.photo-caption {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-block-start: 0.7rem;
  font: italic 400 var(--text-s)/1.45 var(--body);
  color: var(--ink-soft);
}
.photo-credit { font-style: normal; white-space: nowrap; }
:lang(zh-Hans) :is(.photo-note, .photo-caption) { font-style: normal; }
/* The soft sun behind a hero photo. */
.sunrise { position: relative; isolation: isolate; padding-block-start: 1.5rem; padding-inline-end: 1.5rem; }
.sunrise::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -6%;
  inset-inline-end: -10%;
  inline-size: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffc9a0 0, #ffe0c6 36%, rgb(255 238 222 / 0) 70%);
}

/* ---- Progress: the sun rising along the horizon ------------------------------------------------ */

.progress { --p: 0; position: relative; block-size: 2.4rem; }
.progress-track {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.4rem;
  block-size: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--foam-deep);
  overflow: hidden;
}
.progress-track::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--p) * (100% - 2.4rem) + 1.2rem); /* up to the middle of the sun */
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}
[dir="rtl"] .progress-track::before { background: linear-gradient(270deg, var(--gold), var(--coral)); }
.progress-sun {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: calc(var(--p) * (100% - 2.4rem));
  inline-size: 2.4rem;
  block-size: 1.2rem;
  border-radius: 2.4rem 2.4rem 0 0;
  background: linear-gradient(var(--gold), var(--coral));
}
.progress-ticks {
  position: absolute;
  inset-inline: 1.2rem;
  inset-block-end: 0.4rem;
  block-size: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-ticks i { inline-size: 0.3rem; block-size: 0.3rem; border-radius: 50%; background: var(--white); }
.progress-label { font: 900 1.45rem/1.2 var(--display); letter-spacing: -0.01em; }
.progress[data-progress="5"] { --p: 0.05; }
.progress[data-progress="10"] { --p: 0.1; }
.progress[data-progress="15"] { --p: 0.15; }
.progress[data-progress="20"] { --p: 0.2; }
.progress[data-progress="25"] { --p: 0.25; }
.progress[data-progress="30"] { --p: 0.3; }
.progress[data-progress="35"] { --p: 0.35; }
.progress[data-progress="40"] { --p: 0.4; }
.progress[data-progress="45"] { --p: 0.45; }
.progress[data-progress="50"] { --p: 0.5; }
.progress[data-progress="55"] { --p: 0.55; }
.progress[data-progress="60"] { --p: 0.6; }
.progress[data-progress="65"] { --p: 0.65; }
.progress[data-progress="70"] { --p: 0.7; }
.progress[data-progress="75"] { --p: 0.75; }
.progress[data-progress="80"] { --p: 0.8; }
.progress[data-progress="85"] { --p: 0.85; }
.progress[data-progress="90"] { --p: 0.9; }
.progress[data-progress="95"] { --p: 0.95; }
.progress[data-progress="100"] { --p: 1; }
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; list-style: none; padding: 0; max-inline-size: none; }
.segments li { block-size: 0.7rem; border-radius: var(--radius-pill); background: var(--sand-deep); max-inline-size: none; }
.segments .is-done { background: linear-gradient(90deg, var(--gold), var(--coral)); }
.segments .is-current { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint); }

/* ---- Site chrome: header ----------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 10;
  padding-block: 0.6rem;
  padding-inline: 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font: 800 1rem/1.2 var(--display);
}
.skip-link:focus { inset-block-start: 1rem; color: var(--white); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-block: 0.4rem;
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
  background: var(--shell);
  transition: padding-block 0.2s ease;
}
/* Nothing in the header may be wider than the screen: a long word wraps, the page never scrolls
   sideways. */
.site-header > * { min-inline-size: 0; max-inline-size: 100%; }

/* The owner's logo (partials/logo.twig) leads the header: 132 px wide on a computer (96 px once the
   page scrolls and the sticky header turns compact), 108 px on a phone. The files are trimmed to
   the artwork (8 px of clear space in the 1558 px master), so no negative margins. Never recolour
   or stretch it. */
.brand {
  display: block;
  flex: none;
  border-radius: var(--radius-s);
  line-height: 0;
  text-decoration: none;
}
.brand picture { display: block; }
.brand-logo { display: block; inline-size: 132px; max-inline-size: none; block-size: auto; transition: inline-size 0.2s ease; }
/* The coral ".do" when the name is written out in words (the admin header). */
.tld { color: var(--coral-ink); }

/* Main navigation: four plain words, always visible (no hidden menu to discover, no script). Every
   link is at least 52 px tall. Below 62rem the navigation takes its own row under the brand and
   the account button; on a phone it becomes a 2 × 2 grid of large buttons. */
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; }
.site-nav li { max-inline-size: none; }
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-block: 0.4rem;
  padding-inline: 1rem;
  border-radius: var(--radius-pill);
  font: 700 1rem/1.2 var(--display); /* a little lighter than the headings, so the logo leads */
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.site-nav a:hover { background: var(--foam); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--foam); color: var(--lagoon-deep); box-shadow: inset 0 0 0 2px var(--foam-deep); }

.account-slot { flex: none; }
.account-slot .button { max-inline-size: 100%; overflow-wrap: anywhere; }
.account-slot .icon { inline-size: 1.25em; block-size: 1.25em; }

/* The language pill and the account button, side by side at the end of the header. */
.header-tools { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.lang-pill {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--sand-deep);
  background: var(--white);
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.04em;
  color: var(--lagoon-deep);
  text-decoration: none;
}
.lang-pill:hover { background: var(--foam); color: var(--lagoon-deep); box-shadow: inset 0 0 0 1.5px var(--lagoon-line); }

/* On a computer the header stays at the top while the page scrolls (a light, see-through shell
   with a hairline), so "Cities" and "For companies" are always one click away. */
@media (min-width: 62.01rem) {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    background: rgb(255 250 243 / 0.96);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 1px 0 rgb(239 220 195 / 0.8);
  }
  .site-header.is-compact { padding-block: 0.3rem; box-shadow: 0 6px 20px rgb(23 43 77 / 0.08); }
  .site-header.is-compact .brand-logo { inline-size: 96px; }
  .site-header.is-compact .site-nav a { min-block-size: 2.55rem; }
  :target, [id] { scroll-margin-block-start: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .brand-logo { transition: none; }
}

@media (max-width: 62rem) {
  .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  .account-slot { margin-inline-start: auto; }
  .header-tools { margin-inline-start: auto; }
  .header-tools .account-slot { margin-inline-start: 0; }
}
@media (max-width: 36rem) {
  .site-header { gap: 0.6rem 0.75rem; padding-block: 0.5rem 0.75rem; }
  .brand-logo { inline-size: 108px; }
  /* The sign-in pill keeps its border but loses its lip, so the logo leads. */
  .account-slot .button { box-shadow: none; }
  .site-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .site-nav ul:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-nav a { border-radius: 16px; padding-inline: 0.5rem; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--sand-deep); font-size: 0.95rem; }
  .account-slot .button { padding-inline: 0.9rem; }
  .header-tools { gap: 0.45rem; }
}
@media (max-width: 23.75rem) {
  .brand-logo { inline-size: 100px; }
}
@media (max-width: 22.5rem) {
  .account-slot .icon { display: none; }
  .site-nav a { font-size: 0.9rem; padding-inline: 0.3rem; }
}

/* ---- Site chrome: footer ----------------------------------------------------------------------- */

/* A light footer in its own deeper sand, so the owner's logo sits on it as drawn (no plaque) and a
   page that ends on a sand section still shows where the footer starts; a thin navy strip with
   the copyright closes the page. */
.site-footer {
  position: relative;
  padding-block: var(--space-xl) 0;
  background: var(--footer-sand);
  color: var(--ink);
  font-size: 0.95rem;
}
/* The wave that carries the page into the footer: drawn above the footer, over the page's
   bottom space, so it meets whatever section comes last. */
.site-footer > .wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% - 1px);
  background: transparent;
  fill: var(--footer-sand);
}
.site-footer a { color: var(--lagoon-deep); text-decoration-color: var(--lagoon-line); }
.site-footer a:hover { color: var(--lagoon-deep); text-decoration-color: currentColor; }
.footer-grid {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.25fr); }
  .footer-about { grid-column: auto; }
}
.footer-brand { margin: 0; line-height: 0; }
.footer-brand picture { display: block; }
.footer-logo { display: block; inline-size: 160px; max-inline-size: none; block-size: auto; margin-block: -10px -5px; }
.footer-about p:not(.footer-brand) { margin-block-start: var(--space-xs); max-inline-size: 36ch; font-size: 1rem; line-height: 1.6; }
.footer-heading { margin: 0 0 0.35rem; font: 800 1.05rem/1.3 var(--display); letter-spacing: 0; color: var(--ink); }
/* The footer links ("About PropertyManagement.do") and the language switcher: plain lists without bullets,
   each link at least 48 px tall. */
.footer-nav ul, .lang-switcher ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lang-switcher ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-nav li, .lang-switcher li { max-inline-size: none; }
.footer-nav a, .lang-switcher a { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: var(--tap); padding-block: 0.3rem; }
.lang-switcher a { font-family: var(--display); font-weight: 700; }
.lang-switcher a[aria-current="true"] {
  padding-inline: 0.6rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--foam);
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
}
.lang-switcher a[aria-current="true"]::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
/* The full footer (every page but the reduced legal frame): the brand, the city links (the
   directory's most important pages, two columns), owners, companies, then legal + language. */
.footer-cities ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.footer-cities .footer-all { font-family: var(--display); font-weight: 800; }
.footer-legal { display: grid; gap: var(--space-m); align-content: start; }
.footer-legal .lang-switcher ul { grid-template-columns: repeat(2, max-content); gap: 0 0.75rem; }
@media (min-width: 40rem) {
  .footer-grid-full .footer-cities { grid-column: 1 / -1; }
  .footer-grid-full .footer-cities ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .footer-grid-full { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid-full .footer-about { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
  .footer-grid-full .footer-about p:not(.footer-brand) { margin-block-start: 0; max-inline-size: 52ch; }
  .footer-grid-full .footer-cities { grid-column: auto; }
  .footer-grid-full .footer-cities ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The copyright strip: navy ink with light words (11.4:1), under a small wave. */
.footer-strip { margin-block-start: var(--space-xl); }
.footer-strip > .wave { block-size: clamp(1rem, 0.8rem + 1vw, 1.5rem); }
.site-footer .copyright {
  max-inline-size: none;
  margin: 0;
  padding-block: 0.9rem 1.3rem;
  padding-inline: max(var(--gutter), (100% - var(--content)) / 2);
  background: var(--ink);
  color: var(--on-dark);
}

/* ---- Banners ----------------------------------------------------------------------------------- */

/* Shown only to previewers while the public still sees the coming-soon (or maintenance) page. */
.preview-ribbon {
  max-inline-size: none;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  background: var(--coral-ink);
  color: var(--white);
  font: 800 0.95rem/1.3 var(--display);
  text-align: center;
}

/* The language suggestion (js/lang-suggest.js). */
.lang-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: center;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background: var(--ink);
  color: var(--white);
  font: 700 1rem/1.3 var(--display);
}
.lang-banner a { color: var(--white); text-decoration-color: rgb(143 213 205 / 0.75); }
.lang-banner button {
  min-block-size: 2.4rem;
  padding-inline: 1rem;
  border: 2px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font: 800 0.95rem/1.2 var(--display);
  cursor: pointer;
}
.lang-banner :focus-visible { outline: var(--focus-on-dark); }

/* ---- Page patterns ----------------------------------------------------------------------------- */

.hero { text-align: center; padding-block: var(--space-xl); }
.hero .lead { margin-inline: auto; }
.error-page { text-align: center; padding-block: var(--space-2xl); }
.error-page::before {
  content: "";
  display: block;
  inline-size: 6rem;
  block-size: 3rem;
  margin-inline: auto;
  margin-block-end: var(--space-m);
  border-radius: 6rem 6rem 0 0;
  background: linear-gradient(var(--gold), var(--coral));
  box-shadow: 0 1.1rem 0 -0.8rem var(--lagoon);
}
.error-page p { margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Motion, contrast modes and print ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .sunrise::before { animation: rd-rise 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes rd-rise { from { transform: translateY(2rem) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  input[type="checkbox"], input[type="radio"] { appearance: auto; }
  input[type="checkbox"]::before, input[type="radio"]::before { content: none; }
  .button, .card, .chip, .status, .notice { border: 2px solid CanvasText; }
}
@media print {
  .wave, .skip-link, .lang-banner, .preview-ribbon, .site-nav, .account-slot { display: none !important; }
  body { background: var(--white); }
  .band, .page > .band { background: none; padding-block: var(--space-m); }
  .site-footer, .site-footer .copyright { background: none; color: var(--ink); }
  .card { box-shadow: none; border-color: var(--sand-deep); }
}