/* Stivale in Tasca website. One stylesheet; every colour, size and space is a
   token, named after the design-system variables (README.md lists them, and
   the Figma file uses the same names).
   Palette: the app's Modern Maiolica (lib/theme/app_theme.dart). Dark is its
   own palette, not the light one inverted. Every text pair is AA or better,
   checked when the tokens were set (README.md, "Contrast").
   Shape rule: controls 10px, cards 12px, photos and panels 20px, phone
   frames 36px. Nothing else. */

/* The headings' typeface, from this site only (font-src 'self'). One
   variable file per script range: weight 500 to 800 and optical size. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-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: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The app's maiolica motif (lib/widgets/maiolica_motif.dart): four oval
     petals on the diagonals. Used as a mask, so it takes any colour. */
  --maiolica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(16 16)'%3E%3Cellipse cy='-6' rx='4.3' ry='6' transform='rotate(45)'/%3E%3Cellipse cy='-6' rx='4.3' ry='6' transform='rotate(135)'/%3E%3Cellipse cy='-6' rx='4.3' ry='6' transform='rotate(225)'/%3E%3Cellipse cy='-6' rx='4.3' ry='6' transform='rotate(315)'/%3E%3C/g%3E%3Cpath d='M0 13 3 16 0 19ZM32 13 29 16 32 19Z'/%3E%3C/svg%3E");

  /* Colour, light */
  --surface: #faf7ee;            /* limestone */
  --surface-alt: #ffffff;
  --on-surface: #263c51;         /* navy */
  --on-surface-muted: #4f5f6e;
  --primary: #263c51;
  --primary-contrast: #faf7ee;
  --accent: #f2ebc6;             /* soft lemon */
  --accent-contrast: #263c51;
  --sky: #dce8f1;
  --divider: #d8d1bd;
  --danger: #b3261e;
  --success: #2e6b3a;
  --photo-caption-bg: #ffffff;
  --link: #1d5a85;
  --focus: #1d5a85;
  --bezel: #1b2b3b;              /* phone frame */
  --shadow-tint: 38 60 81;       /* navy, for tinted shadows */

  /* Type ramp (px) and families: system fonts only, nothing downloaded */
  /* Bodoni Moda (SIL OFL, assets/fonts/OFL.txt), served from the site
     itself: an Italian typeface (Bodoni worked in Parma) for an Italian
     guide. Latin only; Chinese, Japanese and Korean fall through to the
     system's faces, as in the app. */
  --font-heading: "Bodoni Moda", Georgia, "Noto Serif", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-17: 1.0625rem;
  --text-22: 1.375rem;
  --text-28: 1.75rem;
  --text-34: 2.125rem;
  --text-44: 2.75rem;
  --text-display: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  --leading-body: 1.6;
  --leading-heading: 1.15;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --section-gap: clamp(64px, 9vw, 112px);

  /* Shape and depth */
  --radius-button: 10px;
  --radius-card: 12px;
  --radius-panel: 20px;
  --radius-phone: 36px;
  --border-hairline: 1px;
  --border-focus: 3px;
  --elevation-1: 0 1px 2px rgb(var(--shadow-tint) / 0.08);
  --elevation-phone: 0 32px 64px -24px rgb(var(--shadow-tint) / 0.45), 0 8px 20px -8px rgb(var(--shadow-tint) / 0.25);

  /* Motion: colour changes and a small lift on hover; none when reduced */
  --motion-fast: 150ms;
  --motion-standard: 250ms;
  --motion-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --gutter: var(--space-16);     /* the page's side margin: 32px from 600px */
  --content-max: 1120px;
  --measure: 70ch;
  --target-min: 48px;

  color-scheme: light;
}

/* Bodoni Moda has no Greek letters: a Greek heading would mix it with the
   fallback face letter by letter ("Grand Tour" in Bodoni, the rest in
   Georgia), so on the Greek pages headings are set wholly in the reader's
   own serif. */
html:lang(el) {
  --font-heading: Georgia, "Noto Serif", "Times New Roman", serif;
}

/* Dark: its own palette. Applied by the system setting, unless the reader
   chose Light with the toggle; or by the toggle itself. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #121d29;          /* midnight */
    --surface-alt: #1b2b3b;
    --on-surface: #f5f0e3;       /* warm ivory */
    --on-surface-muted: #bccbd6;
    --primary: #b8d4e8;          /* pale coastal blue */
    --primary-contrast: #121d29;
    --accent: #38382a;           /* dark lemon container */
    --accent-contrast: #ebdd9e;
    --sky: #263c51;
    --divider: #3a5066;
    --danger: #f2b8b5;
    --success: #a6d4a9;
    --photo-caption-bg: #1b2b3b;
    --link: #b8d4e8;
    --focus: #b8d4e8;
    --bezel: #0a121a;
    --shadow-tint: 0 0 0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #121d29;
  --surface-alt: #1b2b3b;
  --on-surface: #f5f0e3;
  --on-surface-muted: #bccbd6;
  --primary: #b8d4e8;
  --primary-contrast: #121d29;
  --accent: #38382a;
  --accent-contrast: #ebdd9e;
  --sky: #263c51;
  --divider: #3a5066;
  --danger: #f2b8b5;
  --success: #a6d4a9;
  --photo-caption-bg: #1b2b3b;
  --link: #b8d4e8;
  --focus: #b8d4e8;
  --bezel: #0a121a;
  --shadow-tint: 0 0 0;
  color-scheme: dark;
}

/* Screenshots exist in both themes: show the one matching the page. */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
  :root:not([data-theme="light"]) .only-light { display: none !important; }
}
:root[data-theme="dark"] .only-dark { display: block !important; }
:root[data-theme="dark"] .only-light { display: none !important; }

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

html {
  -webkit-text-size-adjust: 100%;
  /* The sticky header must never cover an anchor target or a focused element. */
  scroll-padding-top: 80px;
}
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgb(var(--shadow-tint) / 0.12); }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-17);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* A word longer than its line (a German compound at 200% text on a
     phone) breaks instead of running off the screen. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--leading-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-16);
  text-wrap: balance;
  /* "anywhere", not "break-word": a heading in a grid or flex column then
     lets the column shrink too, instead of widening it past the screen. */
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.25rem, 1.7rem + 2vw, var(--text-44)); }
h2 { font-size: clamp(var(--text-28), 1.5rem + 1vw, var(--text-34)); margin-top: var(--space-48); }
h3 { font-size: var(--text-22); margin-top: var(--space-32); }
p, ul, ol, table { margin: 0 0 var(--space-16); }
p { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--border-focus) solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the navy tile the focus colour is the tile's own (1.5:1 in light,
   1:1 in dark): the tile's ink instead, 10:1 and more in both themes. */
.tile-strong :focus-visible { outline-color: var(--primary-contrast); }

/* Above the screen until focused, whatever its height: at 200% text it is
   taller than 100px, and a fixed -100px let its foot show over the
   wordmark. */
.skip-link {
  position: absolute;
  left: var(--space-16);
  bottom: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--primary);
  color: var(--primary-contrast);
  z-index: 10;
}
.skip-link:focus { bottom: auto; top: var(--space-8); }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.prose { max-width: var(--measure); }
.lead { font-size: var(--text-22); line-height: 1.45; color: var(--on-surface-muted); }

/* Header: sticky, minimal, slightly translucent over the page */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--border-hairline) solid var(--divider);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  min-height: 64px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--target-min);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-22);
  letter-spacing: -0.01em;
  color: var(--on-surface);
  text-decoration: none;
}
.site-header .wordmark { margin-right: auto; }
.header-tools { display: flex; align-items: center; gap: var(--space-8); }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-12);
  border-radius: var(--radius-button);
  color: var(--on-surface);
  text-decoration: none;
  transition: background-color var(--motion-fast);
}
.site-nav a:hover { background: var(--sky); }
/* "page" on the page itself; "true" on a page inside its section (a
   region's own page, under Regions). */
.site-nav a[aria-current] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* The language and theme buttons' edge is the muted ink, not the divider:
   a control's outline needs 3:1 against the page (the divider is 1.5:1). */
.theme-toggle {
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--space-16);
  border: var(--border-hairline) solid var(--on-surface-muted);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  font-size: var(--text-14);
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.theme-toggle:hover { background: var(--sky); border-color: var(--on-surface); }
.theme-toggle[hidden] { display: none; }

/* Language menu: a native disclosure, so it works with no JavaScript. Each
   language is named in itself (as the app's picker does). */
.lang-menu { position: relative; }
.lang-menu > summary {
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--space-12);
  border: var(--border-hairline) solid var(--on-surface-muted);
  border-radius: var(--radius-button);
  font-size: var(--text-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  justify-content: center;
  gap: var(--space-8);
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.lang-menu > summary:hover { background: var(--sky); border-color: var(--on-surface); }
.lang-menu > summary::after { margin-left: 0; width: 7px; height: 7px; }
.lang-menu[open] > summary { background: var(--sky); }
.lang-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-8));
  z-index: 6;
  /* Never wider than the screen, at any text size: the button sits at the
     header's right edge, so the menu opens leftwards within the page. */
  min-width: min(12rem, calc(100vw - 2 * var(--gutter)));
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 32px -16px rgb(var(--shadow-tint) / 0.35);
}
.lang-menu a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-12);
  border-radius: var(--radius-button);
  color: var(--on-surface);
  text-decoration: none;
}
.lang-menu a:hover { background: var(--sky); }
.lang-menu a[aria-current="true"] { font-weight: 700; background: var(--accent); color: var(--accent-contrast); }
/* The menu is a disclosure, not an answer card: keep the details styling off. */
details.lang-menu, details.lang-menu:hover { background: none; border: 0; margin: 0; }

main { padding: var(--space-48) 0 var(--section-gap); }

/* Buttons: compact, outlined first; filled for the one main action. A long
   label ("Δείτε όλες τις περιφέρειες…") or large text wraps inside the
   button, centred, instead of pushing the page wider than the screen. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 100%;
  padding: var(--space-8) var(--space-24);
  border-radius: var(--radius-button);
  border: 2px solid var(--primary);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast);
}
.button-primary { background: var(--primary); color: var(--primary-contrast); box-shadow: 0 6px 16px -8px rgb(var(--shadow-tint) / 0.6); }
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgb(var(--shadow-tint) / 0.7); }
.button-primary:active { transform: translateY(0) scale(0.98); }
.button-secondary { background: transparent; color: var(--primary); }
.button-secondary:hover { background: var(--sky); }
.button[aria-disabled="true"] {
  border-color: var(--divider);
  color: var(--on-surface-muted);
  background: transparent;
  cursor: default;
}
.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.small { font-size: var(--text-14); color: var(--on-surface-muted); }

/* Sections */
.section { margin-top: var(--section-gap); }
.section > h2:first-child { margin-top: 0; }
.section-lead { max-width: 58ch; color: var(--on-surface-muted); margin-bottom: var(--space-32); }

/* Phone frame around a real screenshot of the app */
.phone {
  margin: 0;
  border-radius: var(--radius-phone);
  border: 8px solid var(--bezel);
  background: var(--bezel);
  box-shadow: var(--elevation-phone);
  overflow: hidden;
}
.phone img { display: block; width: 100%; border-radius: calc(var(--radius-phone) - 8px); }

/* Landing: hero */
.hero {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}
.hero h1 { font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-24); max-width: 13ch; }
.hero .lead { max-width: 30ch; margin: 0; }
.hero-visual {
  position: relative;
  height: 520px;
  border-radius: var(--radius-panel);
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  overflow: hidden;
}
/* Ceramic tiles behind the phones: one per region, in the colour it has in
   the app (RegionColors), then the brand's lemon and sky. */
.tiles {
  position: absolute;
  inset: var(--space-16);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--space-12);
}
.tiles span { border-radius: var(--radius-card); background: var(--tile); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tiles span { background: var(--tile-dark); }
}
:root[data-theme="dark"] .tiles span { background: var(--tile-dark); }
.hero-visual .phone { position: absolute; width: 250px; }
.phone-front { left: 50%; top: 40px; transform: translateX(-50%); z-index: 1; }
.phone-back { display: none; }
.store-note { align-self: center; font-size: var(--text-14); color: var(--on-surface-muted); }

/* The numbers: counted from the app's data at build time */
.stats-band { margin-top: var(--section-gap); }
.stats {
  list-style: none;
  margin: 0;
  padding: var(--space-32) 0;
  display: grid;
  /* minmax(0, …): a long label ("Sehenswürdigkeiten") wraps in its column
     instead of widening it past the screen. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32) var(--space-24);
  border-block: var(--border-hairline) solid var(--divider);
}
.stats li { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--on-surface-muted); hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }

/* Everything in the app: the groups, with New on what came since the last
   summary. The badge is the lemon/navy pair the app tests. */
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
.features-intro .section-lead { max-width: 40ch; }
.features-phone { width: min(240px, 64vw); margin: var(--space-8) auto 0; }
.features-list { display: grid; gap: var(--space-16); min-width: 0; }
.feature-group {
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-panel);
  padding: var(--space-24);
}
.feature-group h2 { margin: 0 0 var(--space-16); font-size: var(--text-22); }
.feature-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.feature-group li { position: relative; padding-left: var(--space-24); line-height: 1.5; }
.feature-group li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
  transform: rotate(45deg);
}
.badge-new {
  display: inline-block;
  margin-left: var(--space-4);
  padding: 0 var(--space-8);
  border-radius: var(--radius-button);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-body);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.new-regions { max-width: 58ch; margin-top: calc(-1 * var(--space-16)); margin-bottom: var(--space-32); font-weight: 600; }

/* The front page's ways into the features and regions pages: a tile per
   group or region, each one link of 48px and more. Feature tiles sit on the
   sky with navy ink (the pair the bento's sky tile uses); region tiles on
   the region's own tint, the pairs the app's contrast test checks. */
.link-tiles {
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.feature-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 599px) {
  .feature-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.link-tiles li { --tile-bg: var(--sky); }
.region-tiles li { --tile-bg: var(--tint, var(--sky)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .region-tiles li { --tile-bg: var(--tint-dark, var(--sky)); }
}
:root[data-theme="dark"] .region-tiles li { --tile-bg: var(--tint-dark, var(--sky)); }
.link-tiles a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
  min-height: 80px;
  padding: var(--space-16) var(--space-48) var(--space-16) var(--space-16);
  border-radius: var(--radius-card);
  background: var(--tile-bg);
  color: var(--on-surface);
  text-decoration: none;
  transition: transform var(--motion-standard) var(--ease), box-shadow var(--motion-standard) var(--ease);
}
/* A chevron, so a tile reads as a way in on a phone too, where there is
   no hover. Drawn with borders: no icon file, nothing for a screen reader. */
.link-tiles a::after {
  content: "";
  position: absolute;
  right: var(--space-16);
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.link-tiles a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgb(var(--shadow-tint) / 0.55); }
.tile-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-17); line-height: 1.25; overflow-wrap: anywhere; }
.tile-meta { font-size: var(--text-14); }
.more { margin: 0; }

/* Promises: one large tile with a screen, two small ones */
.bento { display: grid; gap: var(--space-16); }
.bento > * { min-width: 0; }
.tile {
  border-radius: var(--radius-panel);
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  padding: var(--space-32);
}
.tile h3 { margin-top: 0; font-size: var(--text-28); }
.tile p { margin: 0; color: var(--on-surface-muted); max-width: 46ch; }
.tile-strong { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.tile-strong p, .tile-strong a { color: var(--primary-contrast); }
.tile-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
  background: var(--sky);
  border-color: var(--sky);
  padding-bottom: 0;
  overflow: hidden;
}
.tile-feature p { color: var(--on-surface); }
.tile-screen {
  justify-self: center;
  width: min(300px, 100%);
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-phone) var(--radius-phone) 0 0;
  border: 8px solid var(--bezel);
  border-bottom: 0;
  background: var(--bezel);
  box-shadow: var(--elevation-phone);
}
.tile-screen img { display: block; width: 100%; border-radius: calc(var(--radius-phone) - 8px) calc(var(--radius-phone) - 8px) 0 0; }

/* Regions: photos with their caption and credit underneath, never over */
.regions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-24) var(--space-16);
  grid-template-columns: minmax(0, 1fr);
}
/* Each caption on the region's own colour (RegionColors, as on Explore in
   the app): navy or ivory text and the muted text on it are the pairs the
   app's contrast test checks for every region. */
.regions li { --region-bg: var(--tint, var(--surface-alt)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .regions li { --region-bg: var(--tint-dark, var(--surface-alt)); }
}
:root[data-theme="dark"] .regions li { --region-bg: var(--tint-dark, var(--surface-alt)); }
.regions figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--region-bg);
  border-radius: var(--radius-panel);
  overflow: hidden;
  transition: transform var(--motion-standard) var(--ease), box-shadow var(--motion-standard) var(--ease);
}
.regions figure:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgb(var(--shadow-tint) / 0.5); }
.regions img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--sky);
  transition: scale var(--motion-slow) var(--ease);
}
.regions figure:hover img { scale: 1.03; }
.regions figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-16) var(--space-24) var(--space-24); align-content: start; }
.region-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.region-head .badge-new { margin-left: 0; }
/* 12px on a tint: full-strength ink (8.2:1 and up) rather than the muted
   colour (4.8:1 at its lowest, on Umbria's light tint). */
.regions .credit { color: var(--on-surface); }
.region-name { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-22); line-height: 1.2; }

/* The whole card opens the region's page: its name is the link, stretched
   over the card, and the credit's own link sits above it. The cue under the
   towns says so on a phone, where nothing hovers. */
.regions figure { position: relative; }
.region-link { color: inherit; text-decoration: none; }
.region-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.regions .credit a { position: relative; z-index: 1; }
@supports selector(:has(*)) {
  .region-link:focus-visible { outline: none; }
  .regions figure:has(.region-link:focus-visible) { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
}
.region-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--text-14);
  font-weight: 600;
  color: var(--on-surface);
}
.region-more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--motion-standard) var(--ease);
}
.regions figure:hover .region-more::after { translate: 3px 0; }
.regions figure:hover .region-link { text-decoration: underline; text-underline-offset: 0.15em; }

.region-tagline { font-size: var(--text-14); color: var(--on-surface); }
.region-towns { font-size: var(--text-14); color: var(--on-surface-muted); line-height: 1.5; }
.region-towns strong { color: var(--on-surface); margin-right: var(--space-4); }
.credit { font-size: var(--text-12); color: var(--on-surface-muted); margin-top: var(--space-4); }
.credit a { color: inherit; }

/* A region's own page (/regions/<id>): the hero on the region's colour, as
   its card is, then what the app holds for it. */
.back-link { margin: 0 0 var(--space-24); font-size: var(--text-14); }
.back-link a, .region-pager a { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--target-min); font-weight: 600; }
.back-link a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.region-hero { --region-bg: var(--tint, var(--surface-alt)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .region-hero { --region-bg: var(--tint-dark, var(--surface-alt)); }
}
:root[data-theme="dark"] .region-hero { --region-bg: var(--tint-dark, var(--surface-alt)); }
.region-hero {
  --tile-ink: var(--accent-tile, var(--primary));
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  align-items: center;
  padding: var(--space-48) var(--space-24) var(--space-24);
  border-radius: var(--radius-panel);
  background: var(--region-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .region-hero { --tile-ink: var(--accent-tile-dark, var(--primary)); }
}
:root[data-theme="dark"] .region-hero { --tile-ink: var(--accent-tile-dark, var(--primary)); }
/* A ceramic border along the top: the app's four-petal motif (the corner
   flower of a maiolica tile) repeated in the region's accent, the colour
   the app draws its tab underline in on this tint. Decoration only. */
.region-hero::before {
  content: "";
  position: absolute;
  inset: var(--space-12) 0 auto;
  height: 30px;
  background: var(--tile-ink);
  -webkit-mask: var(--maiolica) 0 0 / 30px 30px repeat-x;
  mask: var(--maiolica) 0 0 / 30px 30px repeat-x;
  opacity: 0.7;
}
/* A trip's hero has no photo beside its words: they take the whole width,
   not the left column beside an empty one. */
.region-hero > :only-child { grid-column: 1 / -1; }
/* The panel clips (for its border): its columns may shrink, so nothing in
   them is cut off at its right edge on a narrow screen or with large text. */
.region-hero > * { min-width: 0; }
.region-hero-frame { overflow: hidden; border-radius: var(--radius-card); }
.region-hero h1 { margin: 0; font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.02em; }
.region-hero .lead { margin: var(--space-16) 0 0; max-width: 30ch; color: var(--on-surface); }
.region-hero .actions { margin-top: var(--space-24); }
/* A trip's note under its two buttons: apart from them, and no extra space
   at the foot of the panel. */
.region-hero .actions + p { margin: var(--space-16) 0 0; max-width: 46ch; }
.region-hero .store-note { color: var(--on-surface); }
.region-hero-photo { margin: 0; min-width: 0; }
.region-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--sky);
}
/* 12px on a tint: full-strength ink, as on the cards. */
.region-hero-photo .credit { display: block; margin-top: var(--space-8); color: var(--on-surface); }
.region-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.highlight-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* The cards only: a walk's stops are a list inside a card, and with a
   descendant selector each stop became a card of its own and lost its
   number. */
.highlight-cards > li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-card);
}
.highlight-body { padding: var(--space-24); }
/* The photo whole, over a blurred copy of itself, as the app's reel shows
   it: never cropped, so a tower keeps its top. */
.highlight-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky); }
.highlight-photo::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--photo) center / cover;
  filter: blur(22px) saturate(1.15);
}
.highlight-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.highlight-cards .credit { margin: var(--space-12) 0 0; }
.highlight-cards h3 { margin: 0; font-size: var(--text-22); line-height: 1.2; }
.highlight-cards p { margin: var(--space-8) 0 0; line-height: 1.5; }
.highlight-cards .highlight-town { margin-top: var(--space-4); font-size: var(--text-14); font-weight: 600; color: var(--on-surface-muted); }
.town-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.town-pills li {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-button);
  background: var(--sky);
  color: var(--on-surface);
  font-size: var(--text-14);
  line-height: 1.6;
}
.region-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--section-gap);
  padding-top: var(--space-24);
  border-top: var(--border-hairline) solid var(--divider);
}
.region-pager a { flex-direction: column; align-items: flex-start; gap: 0; text-decoration: none; }
.region-pager a[rel="next"] { grid-column: 2; align-items: flex-end; text-align: right; }
.pager-label { font-size: var(--text-14); font-weight: 400; color: var(--on-surface-muted); }
.pager-name { font-family: var(--font-heading); font-size: var(--text-22); font-weight: 700; color: var(--link); overflow-wrap: anywhere; }
.region-pager a:hover .pager-name { text-decoration: underline; text-underline-offset: 0.15em; }

/* A look inside: real screens, scroll sideways on a phone */
.screens {
  list-style: none;
  margin: 0;
  padding: var(--space-8) var(--space-16) var(--space-24);
  margin-inline: calc(-1 * var(--space-16));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 280px);
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-16);
}
.screens li { scroll-snap-align: start; }
.screens figure { margin: 0; }
.screens figcaption { padding-top: var(--space-16); font-size: var(--text-14); color: var(--on-surface-muted); max-width: 30ch; }
.screens-note { margin-top: var(--space-24); }

/* The front page's last section: the app and its button again, so a reader
   who scrolled to the end need not go back to the top for it. On the lemon
   in the lemon's ink, the pair the app tests; the button is the hero's. */
.cta-band {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  justify-items: start;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-panel);
  background: var(--accent);
  color: var(--accent-contrast);
}
/* Each part no wider than its column, so its words wrap inside it. */
.cta-band > * { max-width: 100%; }
/* The icon is lemon too: an edge and a shadow keep it a tile on the band. */
.cta-band img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 var(--border-hairline) rgb(var(--shadow-tint) / 0.14), 0 8px 18px -10px rgb(var(--shadow-tint) / 0.6);
}
.cta-band h2 { margin: 0 0 var(--space-8); }
.cta-band p { margin: 0; max-width: 40ch; }
.cta-band .actions { margin-top: 0; }
.cta-band .store-note { color: var(--accent-contrast); }
/* The icon beside the words, the button under them; all three in a row
   only where the words keep a readable width beside a long button label
   ("Für Android herunterladen"). */
@media (min-width: 600px) {
  .cta-band { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-24); padding: var(--space-32); }
  .cta-band .actions { grid-column: 2; }
}
@media (min-width: 960px) {
  .cta-band { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-32); padding: var(--space-32) var(--space-48); }
  .cta-band .actions { grid-column: auto; }
}

/* The shared-link page's card */
.card {
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}
.card > :last-child { margin-bottom: 0; }

.note {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}
.note a { color: inherit; }

/* FAQ, Privacy and Sources: sections with their headings listed beside them.
   On a phone the list is one row under the page title that scrolls sideways
   and stays at the top of the screen; from 960px it is a column on the left
   that stays in view. Plain links, so it works with no JavaScript at all;
   sections.js only marks the section being read. */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.doc-index {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-inline: calc(-1 * var(--space-16));
  padding: var(--space-8) 0;
  background: var(--surface);
  border-bottom: var(--border-hairline) solid var(--divider);
}
.doc-index ul {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0 var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
}
.doc-index ul::-webkit-scrollbar { display: none; }
.doc-index li { flex: none; }
.doc-index a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-16);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-button);
  color: var(--on-surface);
  font-size: var(--text-14);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.doc-index a:hover { background: var(--sky); }
.doc-index a[aria-current="location"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
  font-weight: 700;
}
.doc-body { min-width: 0; }
.doc-section { scroll-margin-top: 80px; }
.doc-section + .doc-section { margin-top: var(--space-48); }
.doc-section > h2 { margin-top: 0; font-size: var(--text-28); }
.doc-section > p, .doc-section > ul { max-width: var(--measure); }
details {
  background: var(--surface-alt);
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-12);
  transition: border-color var(--motion-fast);
}
details:hover { border-color: var(--on-surface-muted); }
summary {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--target-min);
  padding: var(--space-16) var(--space-24);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  /* Its words are a flex item: "anywhere" lets a long one break rather
     than push the question past the screen at large text. */
  overflow-wrap: anywhere;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--motion-fast);
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
details > div { padding: 0 var(--space-24) var(--space-8); max-width: var(--measure); color: var(--on-surface-muted); }

/* Tables (sources, credits) */
.credits-group > .table-wrap { max-width: none; padding: 0; margin: 0 var(--space-16) var(--space-16); color: inherit; }
.credits-group summary { font-family: var(--font-heading); font-size: var(--text-22); }
.table-wrap {
  overflow-x: auto;
  border: var(--border-hairline) solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
  margin-bottom: var(--space-24);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--text-14); margin: 0; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-12) var(--space-16);
  border-bottom: var(--border-hairline) solid var(--divider);
}
tbody tr:last-child td { border-bottom: 0; }
th { font-weight: 700; background: var(--accent); color: var(--accent-contrast); }
caption { text-align: left; color: var(--on-surface-muted); padding: var(--space-12) var(--space-16) 0; caption-side: top; }

.changelog { list-style: none; padding: 0; }
.changelog > li { border-left: 3px solid var(--primary); padding-left: var(--space-24); margin-bottom: var(--space-24); }
.changelog h3 { margin-top: 0; }

/* Footer */
.site-footer {
  border-top: var(--border-hairline) solid var(--divider);
  background: var(--surface-alt);
  padding: var(--space-48) 0 var(--space-32);
  font-size: var(--text-14);
  color: var(--on-surface-muted);
}
.footer-grid { display: grid; gap: var(--space-24); }
.footer-grid p { max-width: 44ch; margin: var(--space-8) 0 0; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); list-style: none; padding: 0; margin: 0; }
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--on-surface);
  font-weight: 600;
}
.footer-meta { margin-top: var(--space-32); padding-top: var(--space-16); border-top: var(--border-hairline) solid var(--divider); }
.footer-meta p { margin: 0; }

/* On a phone the header scrolls away and the section list stays instead:
   two sticky bars would take a third of the screen. */
@media (max-width: 959px) {
  .site-header { position: static; }
  html { scroll-padding-top: 72px; }
  .doc-section { scroll-margin-top: 72px; }
}

/* Tablet: 8 columns */
@media (min-width: 600px) {
  :root { --gutter: var(--space-32); }
  .doc-index { margin-inline: calc(-1 * var(--space-32)); }
  .doc-index ul { padding: 0 var(--space-32); }
  .screens { margin-inline: calc(-1 * var(--space-32)); padding-inline: var(--space-32); scroll-padding-inline: var(--space-32); }
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A region alone on the last row takes the row, as the app draws it. */
  .regions li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .region-hero { padding: var(--space-64) var(--space-32) var(--space-32); }
  .hero-visual { height: 600px; }
  .hero-visual .phone { width: 280px; }
  .phone-front { left: 7%; transform: none; }
  .phone-back { display: block; right: 6%; top: 120px; width: 230px !important; transform: rotate(4deg); }
}
/* The numbers, by the width the text has rather than the screen's: these
   breakpoints are in em, which grow with the reader's text size, so at
   200% text a phone keeps one number to a row and a tablet two, where
   "322" in four columns would run into the next. At the default text size
   they are 320px and 600px. */
@media (max-width: 19.99em) {
  .stats, .region-stats { grid-template-columns: minmax(0, 1fr); }
  .region-pager { grid-template-columns: minmax(0, 1fr); }
  .region-pager a[rel="next"] { grid-column: 1; align-items: flex-start; text-align: left; }
}
@media (min-width: 37.5em) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats li + li { border-left: var(--border-hairline) solid var(--divider); padding-left: var(--space-24); }
  /* A region's numbers: three to a row, no rule before a row's first. */
  .region-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .region-stats li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}

/* Desktop: 12 columns, 1120px content */
@media (min-width: 960px) {
  main { padding-top: var(--space-64); }
  .hero { grid-template-columns: 6fr 5fr; gap: var(--space-64); }
  .region-hero { grid-template-columns: 5fr 6fr; gap: var(--space-48); padding: var(--space-64) var(--space-48) var(--space-48); }
  .hero-visual { height: 620px; }
  .bento { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  .tile-feature { grid-row: span 2; grid-template-rows: auto 1fr; }
  .tile-screen { height: 340px; align-self: end; }
  .regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32) var(--space-24); }
  .regions li:last-child:nth-child(odd) { grid-column: auto; }
  .regions li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .regions li:last-child:nth-child(3n + 1) figure { display: grid; grid-template-columns: 2fr 1fr; }
  .regions li:last-child:nth-child(3n + 1) img { aspect-ratio: 2 / 1; height: 100%; }
  .regions li:last-child:nth-child(3n + 1) figcaption { align-content: center; padding: var(--space-32); }
  .features { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-64); align-items: start; }
  .features-intro { position: sticky; top: 104px; }
  .features-phone { width: 260px; margin: var(--space-32) 0 0; }
  .screens {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding: var(--space-48) 0 0;
    gap: var(--space-32);
  }
  .screens li:nth-child(even) { transform: translateY(calc(-1 * var(--space-48))); }
  .doc-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-48); }
  .doc-index {
    top: 88px;
    align-self: start;
    margin-inline: 0;
    padding: 0;
    border: 0;
    background: none;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
  }
  .doc-index ul { display: block; padding: 0; overflow: visible; }
  .doc-index a {
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
    padding: var(--space-8) var(--space-12);
    min-height: var(--target-min);
    white-space: normal;
    line-height: 1.35;
    font-size: var(--text-17);
  }
  .doc-index a[aria-current="location"] {
    background: var(--accent);
    color: var(--accent-contrast);
    border-left-color: var(--primary);
  }
  .doc-section { scroll-margin-top: 88px; }
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
  /* If the header's one row still wraps (French or Greek just over
     960px), the buttons go to the right of the second line, not alone at
     its left. */
  .site-header .wrap { justify-content: flex-end; }
}
/* A small laptop or a tablet on its side: the header's links a little
   closer together, so that every language's header fits on one row from
   about 1000px (French needed 973px; 945px is there at 1024). */
@media (min-width: 960px) and (max-width: 1199px) {
  .site-header .wrap { column-gap: var(--space-12); }
  .site-nav a { padding: 0 var(--space-8); }
  .theme-toggle { padding: 0 var(--space-12); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Arrival: the hero's words, then its tiles in reading order, then the
     phones. Individual translate/scale, so the phones keep their own
     transforms. Once only, on load. */
  .hero-copy > * { animation: rise var(--motion-slow) var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .tiles span { animation: tile-in 700ms var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
  .hero-visual .phone { animation: rise 700ms var(--ease) 250ms both; }
  .hero-visual .phone-back { animation-delay: 380ms; }

  /* Sections ease up as they scroll into view, where the browser can tie
     the motion to the scroll itself; elsewhere they are simply there.
     Done within their first 160px on screen, whatever their height: ended
     at 60% of the way in, a tall tile's heading was still half faded while
     it was being read. */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 160px;
    }
    /* A region's photo drifts closer as the page scrolls past it. */
    .region-hero-frame img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 100%;
    }
  }

  /* Between pages: the site's own cross-fade, and a region's photo flying
     from its card into its page (both carry view-transition-name
     region-<id>), where the browser can. Elsewhere pages simply load. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: var(--motion-slow); animation-timing-function: var(--ease); }
  .site-header { view-transition-name: site-header; }
}
@keyframes drift {
  from { scale: 1; }
  to { scale: 1.08; }
}
@keyframes rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes tile-in {
  from { opacity: 0; scale: 0.85; }
  to { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
  .button-primary:hover, .regions figure:hover, .link-tiles a:hover { transform: none; }
  .regions figure:hover img { scale: none; }
}

/* Chinese, Japanese and Korean: break lines between phrases and words, not
   inside them, and give headings room (13ch is a measure for Latin text). */
:lang(ja) { word-break: auto-phrase; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(zh) .hero h1, :lang(ja) .hero h1, :lang(ko) .hero h1 { max-width: 11em; }
/* Greek words run long: at 13ch the hero heading took six lines. A little
   smaller and wider keeps it to four, like the English. */
:lang(el) .hero h1, :lang(el) .region-hero h1 { font-size: calc(var(--text-display) * 0.82); max-width: 17ch; }
:lang(zh) .lead, :lang(ja) .lead, :lang(ko) .lead { max-width: 26em; }
.hero > * { min-width: 0; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { overflow-wrap: anywhere; }

/* Phone and tablet header: the language and theme buttons beside the
   wordmark (on a phone the theme button is in the footer), the page links
   in one row underneath. Wrapped, the links took two lines on a phone in
   English and three in some languages, and a tablet's header three rows;
   now they scroll sideways, edge to edge, and the row's end fades out, as
   the app's tab bar does, to say there is more. theme.js scrolls the
   current page's link into view. */
@media (max-width: 719px) {
  .header-tools .theme-toggle { display: none; }
  .wordmark { font-size: var(--text-17); }
}
@media (max-width: 959px) {
  /* At the right even on a line of their own (large text), so the
     language menu, which opens leftwards from its button, stays on screen. */
  .header-tools { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    /* The screen's width exactly: no wider than it (min-width: 0, or the
       row grows to its links and the page scrolls sideways). */
    flex-basis: calc(100% + 2 * var(--gutter));
    min-width: 0;
    position: relative;
    margin: 0 calc(-1 * var(--gutter)) var(--space-4);
  }
  .site-nav ul {
    overflow-x: auto;
    scrollbar-width: none;
    /* The first link's words on the wordmark's edge; room at the end to
       scroll the last link clear of the fade; 6px above and below for the
       focus ring, which a scrolling row would otherwise cut. */
    padding: 6px calc(var(--gutter) + var(--space-32)) 6px calc(var(--gutter) - var(--space-12));
    margin-block: -6px;
  }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav li { flex: none; }
  .site-nav::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--space-32);
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
  }
}
.theme-toggle-footer { justify-self: start; }
@media (min-width: 720px) { .theme-toggle-footer { display: none; } }

/* Ready-made trips and small-town walks (/trips, /walks): the highlight
   cards' shape, the trip's name as its link, the stops as a numbered list. */
.highlight-cards h3 a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.highlight-cards h3 a:hover { color: var(--primary); }
.walk-stops { margin: var(--space-12) 0 0; padding-inline-start: 1.4em; line-height: 1.5; }
.walk-stops li + li { margin-top: var(--space-8); }
.walk-stops .stop-next { display: block; font-size: var(--text-14); color: var(--on-surface-muted); }