/* Built by scripts/deploy-guide.sh — do not edit. Source: /srv/sbt-ops/workspace/blog-beja-alentejo @import chain. */
/* Webfonts — Google Fonts (no proprietary font files were provided; see readme.md).
   Cormorant Garamond — display serif (headlines, hero)
   Newsreader        — text serif (article prose, standfirsts)
   Karla             — sans (UI, labels, buttons, captions, nav) */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
/* ==== tokens/colors.css ==== */
/* Beja & Alentejo Guide — color tokens
   Palette drawn from the Baixo Alentejo landscape: whitewashed walls,
   terracotta rooftops, olive groves, wheat plains, azulejo blue. */
:root {
  /* Base — warm neutrals */
  --paper: #f7f3ea;          /* page background — whitewash warm white */
  --paper-2: #f0eadb;        /* tinted section background */
  --surface-card: #fffefa;   /* raised cards */
  --ink-1: #26221b;          /* primary text */
  --ink-2: #57503f;          /* secondary text */
  --ink-3: #8a8170;          /* tertiary text, captions */
  --border-1: #e2dbc9;       /* hairline borders */
  --border-2: #cfc6ae;       /* emphasized borders, inputs */

  /* Brand accents */
  --terracotta: #b4552d;     /* primary accent — rooftops, clay */
  --terracotta-deep: #96431f;/* hover / pressed */
  --terracotta-tint: #f3e0d4;/* soft fills, badges */
  --olive: #5f6b3c;          /* secondary accent — olive groves */
  --olive-deep: #4a5430;
  --olive-tint: #e7e9d8;
  --wheat: #c2933a;          /* golden plains — highlights, stars */
  --wheat-tint: #f2e6c9;
  --azulejo: #2e5a70;        /* Beja blue — links, trims */
  --azulejo-deep: #234758;
  --azulejo-tint: #dde8ec;

  /* Dark surface (footers, image protection) */
  --ink-surface: #2b2620;
  --ink-surface-2: #37312a;
  --on-ink: #f4efe4;
  --on-ink-muted: #b3aa97;

  /* Semantic aliases */
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-caption: var(--ink-3);
  --text-link: var(--azulejo);
  --text-on-accent: #fffdf8;
  --surface-page: var(--paper);
  --surface-section: var(--paper-2);
  --accent-primary: var(--terracotta);
  --accent-primary-hover: var(--terracotta-deep);
  --focus-ring: var(--azulejo);

  /* Status */
  --success: #55673a;
  --success-tint: #e5e9d6;
  --warning: #9a7420;
  --warning-tint: #f2e6c9;
  --error: #a03a24;
  --error-tint: #f2ddd5;
  --info: var(--azulejo);
  --info-tint: var(--azulejo-tint);
}
/* ==== tokens/typography.css ==== */
/* Beja & Alentejo Guide — typography tokens */
:root {
  --font-display: "Cormorant Garamond", "Times New Roman", serif; /* headlines */
  --font-body: "Newsreader", Georgia, serif;                      /* prose */
  --font-sans: "Karla", "Helvetica Neue", Arial, sans-serif;      /* UI, labels */

  /* Scale (px) */
  --text-hero: 64px;      /* homepage hero — Cormorant 600 */
  --text-h1: 46px;        /* article titles — Cormorant 600 */
  --text-h2: 33px;        /* section heads — Cormorant 600 */
  --text-h3: 24px;        /* card titles — Cormorant 600 */
  --text-standfirst: 21px;/* deck / intro — Newsreader italic */
  --text-body-lg: 18px;   /* article prose — Newsreader 400 */
  --text-body-md: 16px;   /* general copy */
  --text-ui: 15px;        /* buttons, inputs — Karla 500 */
  --text-caption: 13px;   /* captions, meta — Karla 400 */
  --text-label: 12px;     /* overline labels — Karla 700, letterspaced */

  /* Line heights */
  --leading-display: 1.08;
  --leading-heading: 1.18;
  --leading-body: 1.65;
  --leading-ui: 1.35;

  /* Letterspacing */
  --tracking-display: -0.01em;
  --tracking-label: 0.14em;  /* overline labels, uppercase */
  --tracking-ui: 0.01em;
}
/* ==== tokens/spacing.css ==== */
/* Beja & Alentejo Guide — spacing & layout tokens */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --measure-prose: 68ch;    /* article column */
  --width-content: 1120px;  /* page shell max-width */
  --width-prose: 720px;     /* article column px */
  --gutter: 24px;
}
/* ==== tokens/effects.css ==== */
/* Beja & Alentejo Guide — radii, borders, shadows, motion */
:root {
  /* Corner radii — modest, editorial */
  --radius-xs: 2px;    /* tags, small chips */
  --radius-sm: 4px;    /* buttons, inputs */
  --radius-md: 8px;    /* cards */
  --radius-lg: 14px;   /* dialogs, feature cards */
  --radius-full: 999px;/* pills */

  /* Shadows — soft, warm-tinted, low elevation */
  --shadow-card: 0 1px 2px rgba(43, 38, 32, 0.06), 0 4px 14px rgba(43, 38, 32, 0.05);
  --shadow-raised: 0 2px 6px rgba(43, 38, 32, 0.08), 0 12px 32px rgba(43, 38, 32, 0.10);
  --shadow-overlay: 0 8px 24px rgba(43, 38, 32, 0.16), 0 24px 64px rgba(43, 38, 32, 0.18);

  /* Borders */
  --border-hairline: 1px solid var(--border-1);
  --border-input: 1px solid var(--border-2);

  /* Motion — calm, no bounces */
  --ease-out: cubic-bezier(0.25, 0.6, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 380ms; /* @kind other */

  /* Image protection gradient (text over photos) */
  --protection-gradient: linear-gradient(to top, rgba(38, 30, 22, 0.72), rgba(38, 30, 22, 0.28) 46%, rgba(38, 30, 22, 0) 72%); /* @kind other */
}
/* ==== tokens/base.css ==== */
/* Beja & Alentejo Guide — minimal global defaults */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
  margin: 0;
}
a {
  color: var(--text-link);
  text-decoration-color: color-mix(in oklab, var(--text-link) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--azulejo-deep); }
::selection { background: var(--wheat-tint); }
/* ==== design-system-source/styles.css (imports stripped) ==== */
/* ==== styles.css (imports stripped) ==== */

:root {
  /* Production AA corrections for small tertiary text and wheat badges. */
  --ink-3: #726957;
  --warning: #7d5c12;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration-color: color-mix(in oklab, var(--text-link) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--azulejo-deep);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

::selection {
  background: var(--wheat-tint);
}

.skip-link {
  background: var(--ink-1);
  border-radius: var(--radius-sm);
  color: var(--on-ink);
  font-family: var(--font-sans);
  left: var(--gutter);
  padding: 8px 12px;
  position: fixed;
  top: 12px;
  transform: translateY(-150%);
  z-index: 200;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  margin: 0 auto;
  max-width: var(--width-content);
  padding: 0 var(--gutter);
  width: 100%;
}

.prose-shell {
  margin: 0 auto;
  max-width: var(--width-prose);
  padding: 0 var(--gutter);
}

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border-1);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-shell {
  align-items: center;
  display: flex;
  gap: 32px;
  min-height: 64px;
}

.wordmark {
  color: var(--ink-1);
  flex: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark em {
  color: var(--terracotta);
  font-style: italic;
}

.site-nav {
  display: flex;
  font-family: var(--font-sans);
  gap: 6px;
  margin-left: auto;
}

.nav-link {
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 10px 12px;
  text-decoration: none;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--terracotta-deep);
}

.nav-link[aria-current="page"] {
  font-weight: 700;
}

.icon-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  width: 44px;
}

.icon-btn:hover {
  background: var(--paper-2);
  color: var(--ink-1);
}

.icon-btn:active {
  transform: translateY(1px);
}

.icon-btn:focus-visible,
.btn:focus-visible,
.tag:focus-visible,
.input:focus,
.select:focus,
.radio input:focus-visible,
.check input:focus-visible,
.dialog-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.menu-toggle {
  display: none;
  margin-left: auto;
}

.overline {
  color: var(--terracotta);
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  letter-spacing: var(--tracking-ui);
  min-height: 44px;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  color: var(--text-on-accent);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-2);
  color: var(--ink-1);
}

.hero .btn-secondary {
  border-color: rgba(244, 239, 228, 0.5);
  color: var(--on-ink);
}

.btn-secondary:hover {
  background: var(--surface-card);
  border-color: var(--ink-2);
  color: var(--ink-1);
}

.hero .btn-secondary:hover {
  background: rgba(244, 239, 228, 0.1);
  color: var(--on-ink);
}

.btn-md {
  font-size: 15px;
  padding: 10px 20px;
}

.btn-lg {
  font-size: 16px;
  padding: 13px 28px;
}

.hero {
  align-items: flex-end;
  display: flex;
  min-height: 520px;
  overflow: hidden;
  position: relative;
}

.hero-compact {
  min-height: 380px;
}

.photo {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.photo::before {
  background: var(--photo-bg, linear-gradient(125deg, #e8d9b4, #d3bd8a 55%, #b9a678));
  content: "";
  inset: 0;
  position: absolute;
}

.photo::after {
  bottom: 8px;
  color: rgba(43, 38, 32, 0.55);
  content: attr(data-label);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  position: absolute;
  right: 10px;
}

.photo-wheat {
  --photo-bg: linear-gradient(125deg, #e8d9b4, #d3bd8a 55%, #b9a678);
}

.photo-olive {
  --photo-bg: linear-gradient(125deg, #d8dcc2, #b9c19a 55%, #99a37b);
}

.photo-terracotta {
  --photo-bg: linear-gradient(125deg, #e8cbb4, #d8ab8a 55%, #c08d6d);
}

.photo-street {
  --photo-bg: linear-gradient(125deg, #efe9da, #ded2b8 60%, #c9b895);
}

.hero::after {
  background: var(--protection-gradient);
  content: "";
  inset: 0;
  position: absolute;
}

.hero-content {
  max-width: 720px;
  padding-bottom: 56px;
  position: relative;
  z-index: 1;
}

.hero-compact .hero-content {
  max-width: 680px;
  padding-bottom: 44px;
}

.hero h1 {
  color: var(--on-ink);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  margin: 12px 0 16px;
}

.hero-compact h1 {
  font-size: var(--text-h1);
  margin: 10px 0;
}

.hero-lede {
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 50ch;
  opacity: 0.9;
}

.hero-compact .hero-lede {
  font-size: 20px;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.section {
  padding: 72px 0;
}

.section-tight-bottom {
  padding-bottom: 72px;
  padding-top: 0;
}

.section-alt {
  background: var(--paper-2);
  border-top: 1px solid var(--border-1);
}

.section-dark {
  background: var(--ink-surface);
  color: var(--on-ink);
}

.section-head {
  align-items: baseline;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.section-head h2,
.dark-copy h2 {
  font-size: var(--text-h2);
}

.section-head h2 {
  margin-top: 8px;
}

.section-head a {
  flex: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.cards-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-wrap {
  position: relative;
}

.card {
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: inherit;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  min-height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

a.card:hover {
  box-shadow: var(--shadow-raised);
  color: inherit;
  transform: translateY(-1px);
}

.card-media {
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
  flex: none;
  overflow: hidden;
  position: relative;
}

.card-media .photo::after {
  content: "photo placeholder";
}

.card-media-pending {
  color: var(--ink-3);
  display: grid;
  font-size: 12px;
  place-content: center;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px 20px;
}

.card-overline {
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.card-title {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  margin: 0;
}

.card-excerpt {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.card-meta {
  color: var(--ink-3);
  font-size: 13px;
  margin-top: auto;
  padding-top: 4px;
}

.tag-row {
  align-items: center;
  border-top: 1px solid var(--border-1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 40px;
}

.tag-label {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
}

.tag {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  min-height: 44px;
  padding: 5px 14px;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.tag:hover {
  border-color: var(--ink-2);
  color: var(--ink-1);
}

.tag-active,
.tag-active:hover {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--on-ink);
}

.dark-feature {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.1fr 1fr;
  padding: 72px 0;
}

.dark-copy h2 {
  color: var(--on-ink);
  margin: 10px 0 14px;
}

.dark-copy p {
  color: var(--on-ink-muted);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 52ch;
}

.feature-photo {
  border-radius: var(--radius-md);
  height: 320px;
  overflow: hidden;
  position: relative;
}

.newsletter {
  background: var(--paper-2);
  border-top: 1px solid var(--border-1);
}

.newsletter-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 56px var(--gutter);
}

.newsletter-copy {
  flex: 1 1 320px;
}

.newsletter h2 {
  font-size: 33px;
}

.newsletter p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  margin: 8px 0 0;
  max-width: 48ch;
}

.newsletter-form {
  align-items: flex-start;
  display: flex;
  flex: 1 1 320px;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  gap: 6px;
}

.field-label {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 700;
}

.field-wrap {
  align-items: center;
  display: flex;
  position: relative;
}

.field-icon {
  color: var(--ink-3);
  display: flex;
  left: 12px;
  pointer-events: none;
  position: absolute;
}

.input,
.select {
  background: var(--surface-card);
  border: var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 15px;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.input {
  padding: 10px 14px;
}

.input-with-icon {
  padding-left: 38px;
}

.input::placeholder {
  color: var(--ink-3);
}

.input:hover,
.select:hover {
  border-color: var(--ink-3);
}

.input:focus,
.select:focus {
  border-color: var(--azulejo);
  box-shadow: 0 0 0 3px var(--azulejo-tint);
}

.select-wrap {
  display: inline-flex;
  position: relative;
  width: 100%;
}

.select {
  appearance: none;
  cursor: pointer;
  padding: 10px 38px 10px 14px;
}

.select-chevron {
  color: var(--ink-3);
  display: flex;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.page-title-block {
  padding: 56px 0 32px;
}

.breadcrumb {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--ink-3);
}

.page-title {
  font-size: var(--text-h1);
  margin: 12px 0 16px;
}

.standfirst {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--text-standfirst);
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 20px;
}

.meta-row {
  align-items: center;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px;
  gap: 14px;
}

.badge {
  align-items: center;
  border-radius: var(--radius-full);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  white-space: nowrap;
}

.badge-terracotta {
  background: var(--terracotta-tint);
  color: var(--terracotta-deep);
}

.badge-olive {
  background: var(--olive-tint);
  color: var(--olive-deep);
}

.badge-wheat {
  background: var(--wheat-tint);
  color: var(--warning);
}

.badge-azulejo {
  background: var(--azulejo-tint);
  color: var(--azulejo-deep);
}

.badge-neutral {
  background: var(--paper-2);
  color: var(--ink-2);
}

.lead-image-section {
  padding: 0 0 40px;
}

.lead-figure {
  margin: 0;
}

.lead-photo {
  border-radius: var(--radius-md);
  height: 440px;
  overflow: hidden;
  position: relative;
}

.lead-figure figcaption {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  margin-top: 10px;
}

.article-body {
  padding-bottom: 64px;
}

.article-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) 260px;
  margin: 0 auto;
  max-width: var(--width-content);
  padding: 0 var(--gutter) 72px;
}

.article-main {
  max-width: var(--width-prose);
}

.article-aside {
  align-self: start;
  position: sticky;
  top: 92px;
}

.article-aside-card {
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  padding: 18px;
}

.article-aside-card h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.article-aside-card p,
.article-aside-card li {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.article-aside-card p {
  margin: 0 0 14px;
}

.article-aside-card ul {
  margin: 0;
  padding-left: 18px;
}

.article-body h2 {
  font-size: var(--text-h2);
  margin: 40px 0 16px;
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body p {
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  margin: 0 0 24px;
}

.route-progress {
  background: var(--terracotta);
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 70;
}

.route-hero {
  align-items: flex-end;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}

.route-hero::after {
  background: linear-gradient(
    to top,
    rgba(30, 21, 14, 0.88) 0%,
    rgba(30, 21, 14, 0.48) 48%,
    rgba(30, 21, 14, 0.22) 72%,
    rgba(30, 21, 14, 0.44) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
}

.route-hero-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.route-hero-inner {
  padding-bottom: 72px;
  padding-top: 112px;
  position: relative;
  z-index: 1;
}

.hero-breadcrumb {
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  font-family: var(--font-sans);
  font-size: 13px;
  gap: 8px;
  margin-bottom: 16px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
}

.route-hero .overline {
  color: var(--terracotta-tint);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.route-hero h1 {
  color: var(--on-ink);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  margin: 12px 0 16px;
  max-width: 14ch;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

.route-hero-lede {
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: 21px;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 62ch;
  opacity: 0.94;
}

.route-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.route-chip-row-hero {
  margin-bottom: 24px;
}

.route-chip {
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 12px;
}

.route-chip-light {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--on-ink);
}

.route-chip-olive {
  background: var(--olive-tint);
  border-color: transparent;
  color: var(--olive-deep);
}

.route-chip-warning {
  background: var(--warning-tint);
  border-color: transparent;
  color: var(--warning);
}

.route-chip-terracotta {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--text-on-accent);
}

.route-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--on-ink);
}

.route-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--on-ink);
}

.route-summary-section {
  position: relative;
  z-index: 2;
}

.route-summary-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  display: grid;
  gap: 18px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -38px;
  padding: 20px 24px;
}

.route-summary-label {
  color: var(--ink-3);
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.route-summary-card strong,
.route-map-sticky strong {
  color: var(--ink-1);
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
}

.route-summary-note {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}

.route-body-section {
  padding: 36px 0 72px;
}

.route-layout {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 720px) minmax(300px, 1fr);
}

.route-article {
  min-width: 0;
}

.route-article h2 {
  font-size: var(--text-h2);
  margin: 40px 0 16px;
  scroll-margin-top: 88px;
}

.route-article > h2:first-child {
  margin-top: 0;
}

.route-article p {
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  margin: 0 0 22px;
}

.route-article .callout p {
  color: var(--ink-2);
  font-size: 17px;
  margin: 0;
}

.callout-warning {
  background: var(--warning-tint);
}

.route-glance-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin: 0 0 28px;
  padding: 24px 26px;
}

.route-glance-card p {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 14px;
}

.route-glance-list {
  display: grid;
  font-family: var(--font-sans);
  font-size: 15px;
  gap: 9px;
  line-height: 1.45;
  list-style: none;
  margin: 0;
  padding: 0;
}

.route-glance-list a {
  align-items: flex-start;
  color: var(--ink-1);
  display: flex;
  gap: 12px;
  text-decoration: none;
}

.route-glance-list a:hover {
  color: var(--terracotta-deep);
}

.route-glance-list span {
  color: var(--terracotta);
  flex: none;
  font-weight: 700;
  min-width: 24px;
}

.route-leg {
  background: var(--paper-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin: 48px 0 28px;
  padding: 20px 24px;
  scroll-margin-top: 88px;
}

.route-leg span {
  color: var(--terracotta);
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-transform: uppercase;
}

.route-leg h2 {
  font-size: 27px;
  margin: 8px 0 0;
}

.route-stop,
.route-lunch {
  margin: 0 0 34px;
  padding-left: 56px;
  position: relative;
  scroll-margin-top: 88px;
}

.route-stop h3,
.route-lunch h2 {
  font-size: 24px;
  margin: 0 0 8px;
}

.route-lunch h2 {
  font-size: var(--text-h2);
}

.route-stop p,
.route-lunch p {
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.route-stop-number {
  align-items: center;
  background: var(--terracotta);
  border-radius: 50%;
  color: var(--text-on-accent);
  display: flex;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 2px;
  width: 34px;
  z-index: 1;
}

.route-stop-number-start {
  background: var(--olive);
}

.route-stop-number-finish {
  background: var(--terracotta-deep);
}

.route-stop-number-lunch {
  background: var(--wheat);
}

.route-stop-line {
  background: var(--border-2);
  bottom: -20px;
  left: 16px;
  position: absolute;
  top: 44px;
  width: 2px;
}

.route-stop-image,
.route-figure img {
  aspect-ratio: 43 / 24;
  border-radius: var(--radius-md);
  display: block;
  height: auto;
  margin: 0 0 14px;
  object-fit: cover;
  width: 100%;
}

.route-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.map-pill {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-full);
  color: var(--terracotta-deep);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 18px;
  text-decoration: none;
}

.map-pill:hover {
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}

.route-connector {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  margin: -16px 0 30px;
  padding-left: 56px;
}

.route-editorial-cta {
  border-bottom: 1px solid var(--border-1);
  border-top: 1px solid var(--border-1);
  margin: 0 0 34px;
  padding: 20px 2px;
}

.route-editorial-cta p {
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}

.route-figure {
  margin: 10px 0 0;
}

.route-figure figcaption,
.route-map-caption {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.route-muted {
  color: var(--ink-3) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  margin-bottom: 18px !important;
}

.route-lunch-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.route-lunch-card {
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
}

.route-lunch-card h3 {
  font-size: 22px;
  margin: 0;
}

.route-free-afternoon {
  background: var(--olive-tint);
  border-radius: var(--radius-md);
  margin: 48px 0 22px;
  padding: 26px 28px;
}

.route-free-afternoon h2 {
  font-size: 27px;
  margin: 8px 0 12px;
}

.route-free-afternoon p {
  margin: 0;
}

.route-dark-cta {
  background: var(--ink-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  margin-top: 8px;
  padding: 30px 32px;
}

.route-dark-cta .overline {
  color: var(--terracotta-tint);
}

.route-dark-cta p {
  color: var(--on-ink);
  font-size: 17px;
  margin-bottom: 20px;
}

.route-map-panel {
  min-width: 0;
}

.route-map-sticky {
  position: sticky;
  top: 88px;
}

.route-map {
  background: var(--paper-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  height: min(620px, calc(100vh - 210px));
  min-height: 420px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.route-map-fallback {
  display: grid;
  font-family: var(--font-sans);
  font-size: 14px;
  inset: 0;
  margin: 0;
  place-items: center;
  position: absolute;
  text-align: center;
}

.map-number {
  align-items: center;
  background: var(--terracotta);
  border: 2px solid #fffdf8;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  color: #fffdf8;
  display: flex;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  width: 30px;
}

.map-number-start {
  background: var(--olive);
}

.map-number-finish {
  background: var(--terracotta-deep);
}

.map-number-lunch {
  background: var(--wheat);
}

.map-number.is-active {
  box-shadow: 0 0 0 4px rgba(180, 85, 45, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: scale(1.28);
}

.section-title {
  font-size: var(--text-h2);
  margin: 0 0 24px;
}

.route-faq {
  border-top: 1px solid var(--border-1);
}

.route-faq .prose-shell {
  padding-bottom: 72px;
  padding-top: 48px;
}

.route-faq h2 {
  font-size: var(--text-h2);
  margin: 0 0 24px;
}

.route-faq details {
  border-bottom: 1px solid var(--border-1);
  margin: 0 0 18px;
  padding: 0 0 18px;
}

.route-faq summary {
  align-items: center;
  color: var(--ink-1);
  cursor: pointer;
  display: flex;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 44px;
}

.route-faq summary::marker {
  color: var(--terracotta);
}

.route-faq p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  margin: 12px 0 0;
}

.callout {
  background: var(--paper-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin: 0 0 24px;
  padding: 20px 24px;
}

.callout-terracotta {
  background: var(--terracotta-tint);
  border-color: color-mix(in oklab, var(--terracotta) 24%, var(--border-1));
}

.callout-label {
  align-items: center;
  color: var(--olive-deep);
  display: flex;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: var(--tracking-label);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.callout-terracotta .callout-label {
  color: var(--terracotta-deep);
}

.callout ul {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}

.route-list {
  border-left: 1px solid var(--border-1);
  counter-reset: route;
  list-style: none;
  margin: 0 0 32px;
  padding: 0 0 0 22px;
}

.route-list li {
  counter-increment: route;
  margin: 0 0 18px;
  position: relative;
}

.route-list li::before {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-full);
  color: var(--terracotta-deep);
  content: counter(route);
  display: flex;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  left: -35px;
  position: absolute;
  top: 2px;
  width: 24px;
}

.route-list h2,
.route-list h3 {
  font-size: 24px;
  margin: 0 0 4px;
}

.route-list p {
  margin-bottom: 0;
}

blockquote {
  border-left: 2px solid var(--terracotta);
  margin: 32px 0;
  padding: 4px 0 4px 24px;
}

blockquote p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.filter-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.sort-control {
  margin-left: auto;
  width: 170px;
}

.tour-grid {
  align-items: start;
  display: grid;
  gap: 64px;
  grid-template-columns: 1.2fr 1fr;
}

.tour-copy h2 {
  font-size: var(--text-h2);
  margin: 0 0 8px;
}

.tour-copy > p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 54ch;
}

.stops {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stop {
  align-items: flex-start;
  display: flex;
  gap: 16px;
}

.stop-icon {
  align-items: center;
  background: var(--terracotta-tint);
  border-radius: var(--radius-sm);
  color: var(--terracotta-deep);
  display: flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.stop h3 {
  font-size: 22px;
  margin: 0 0 4px;
}

.stop p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 48ch;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.offer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0 0;
}

.offer-panel {
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.offer-panel h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.offer-panel p {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.enquiry-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 28px 30px;
}

.enquiry-card h2 {
  font-size: 26px;
  margin: 0 0 6px;
}

.enquiry-card p {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 14px;
  margin: 0 0 22px;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row > * {
  flex: 1;
}

.choice-group {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  gap: 8px;
}

.choice-title {
  font-size: 13px;
  font-weight: 700;
}

.radio,
.check {
  align-items: center;
  color: var(--ink-1);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 15px;
  gap: 10px;
  line-height: 1.35;
  min-height: 44px;
}

.radio input,
.check input {
  appearance: none;
  background: var(--surface-card);
  border: var(--border-input);
  cursor: pointer;
  display: grid;
  flex: none;
  height: 18px;
  margin: 0;
  place-content: center;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  width: 18px;
}

.radio input {
  border-radius: 50%;
}

.radio input:checked {
  border-color: var(--olive);
  border-width: 2px;
}

.radio input:checked::before {
  background: var(--olive);
  border-radius: 50%;
  content: "";
  height: 9px;
  width: 9px;
}

.check input {
  border-radius: var(--radius-xs);
}

.check input:checked {
  background: var(--olive);
  border-color: var(--olive);
}

.check input:checked::before {
  background: var(--text-on-accent);
  clip-path: polygon(14% 47%, 0 62%, 40% 100%, 100% 16%, 84% 3%, 39% 70%);
  content: "";
  height: 10px;
  width: 10px;
}

.site-footer {
  background: var(--ink-surface);
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 56px var(--gutter) 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand .wordmark {
  color: var(--on-ink);
}

.footer-brand p {
  color: var(--on-ink-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 36ch;
}

.footer-col {
  color: var(--on-ink-muted);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 14px;
  gap: 10px;
}

.footer-col b {
  color: var(--on-ink);
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer-col a {
  color: var(--on-ink-muted);
  text-decoration: none;
}

.footer-bar {
  border-top: 1px solid var(--ink-surface-2);
}

.footer-bar-inner {
  color: var(--on-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 12.5px;
  gap: 16px;
  justify-content: space-between;
  padding: 18px var(--gutter);
}

.toast-zone {
  bottom: 24px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  z-index: 90;
}

.toast {
  align-items: flex-start;
  animation: toast-in var(--duration-base) var(--ease-out);
  background: var(--ink-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  color: var(--on-ink);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 14px;
  gap: 10px;
  line-height: 1.45;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 16px;
}

.toast-dot {
  background: #a3b57e;
  border-radius: 50%;
  flex: none;
  height: 8px;
  margin-top: 5px;
  width: 8px;
}

.dialog-scrim {
  animation: fade-in var(--duration-base) var(--ease-out);
  background: rgba(38, 30, 22, 0.5);
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  position: fixed;
  z-index: 100;
}

.dialog {
  animation: rise-in var(--duration-base) var(--ease-out);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-sans);
  max-width: 480px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 28px 30px;
  width: 100%;
}

.dialog-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dialog-title {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  margin: 0;
}

.dialog-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  margin: -8px -8px 0 0;
  padding: 0;
  width: 44px;
}

.dialog-body {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.dialog-body p {
  margin: 0;
}

.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  :root {
    --text-hero: 52px;
    --text-h1: 40px;
    --text-h2: 30px;
  }

  .cards-grid,
  .dark-feature,
  .tour-grid,
  .article-layout,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dark-feature,
  .tour-grid {
    gap: 40px;
  }

  .route-summary-card {
    grid-template-columns: 1fr 1fr;
  }

  .route-layout {
    grid-template-columns: 1fr;
  }

  .route-map-panel {
    order: -1;
  }

  .route-map-sticky {
    position: static;
  }

  .route-map {
    height: 420px;
    min-height: 0;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 18px;
    --text-hero: 42px;
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 23px;
  }

  .header-shell {
    gap: 10px;
    min-height: 62px;
  }

  .wordmark {
    font-size: 20px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .search-button {
    display: none;
  }

  .site-nav {
    background: var(--paper);
    border-bottom: 1px solid var(--border-1);
    border-top: 1px solid var(--border-1);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    margin: 0;
    padding: 8px var(--gutter) 12px;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-link {
    min-height: 44px;
    padding: 10px 4px;
  }

  .hero {
    min-height: 570px;
  }

  .hero-compact {
    min-height: 420px;
  }

  .hero-content {
    padding-bottom: 42px;
  }

  .hero-actions,
  .newsletter-form,
  .form-row {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .section {
    padding: 56px 0;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .cards-grid,
  .dark-feature,
  .tour-grid,
  .article-layout,
  .offer-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }

  .feature-photo {
    height: 260px;
  }

  .newsletter-inner {
    padding: 44px var(--gutter);
  }

  .lead-photo {
    height: 300px;
  }

  .route-hero {
    min-height: auto;
  }

  .route-hero-inner {
    padding-bottom: 34px;
    padding-top: 72px;
  }

  .route-hero h1 {
    font-size: 32px;
    max-width: 14ch;
  }

  .route-hero-lede {
    font-size: 18px;
    line-height: 1.5;
  }

  .route-chip-row-hero {
    margin-bottom: 18px;
  }

  .route-summary-card,
  .route-lunch-grid {
    grid-template-columns: 1fr;
  }

  .route-body-section {
    padding-bottom: 56px;
  }

  .route-glance-card {
    padding: 20px;
  }

  .route-stop,
  .route-lunch {
    padding-left: 48px;
  }

  .route-connector {
    padding-left: 48px;
  }

  .route-free-afternoon,
  .route-dark-cta {
    padding: 24px;
  }

  .filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sort-control {
    margin-left: 0;
    width: 100%;
  }

  .dialog {
    padding: 24px;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 16px;
    --text-hero: 37px;
    --text-h1: 32px;
  }

  .wordmark {
    font-size: 18px;
  }
}