/* The Porter Tours: shared styles.
   Direction: a classic hotel lobby. Deep Atlantic navy, discreet brass, warm off-white.
   All colours, type sizes and spacing come from the tokens below; change them here, not inline. */

/* Self-hosted web fonts (SIL Open Font License 1.1, licence texts in assets/fonts/).
   Latin subset covers Portuguese (ã õ ç é). Source Sans 3 is a variable font: one file serves 400 and 600.
   Its latin-ext file only downloads on pages that use those characters (e.g. a name in credits.html). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-600-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colour */
  --navy: #12283a;
  --navy-raised: #1b3850;
  --brass: #c6a46a;         /* on navy only (6.4:1) */
  --brass-ink: #7a5c2c;     /* 5.5:1 on paper, 4.9:1 on stone */
  --paper: #f6f2ea;
  --stone: #eae3d6;
  --ink: #1c2630;
  --ink-muted: #55606b;     /* 5.7:1 on paper, 5.0:1 on stone */
  --on-navy: #f6f2ea;
  --on-navy-muted: #d9dee3; /* 11:1 on navy */
  --line: rgba(28, 38, 48, 0.16);
  --line-on-navy: rgba(198, 164, 106, 0.4);
  --error: #a3261b;         /* 6.3:1 on paper */
  --focus: #c6a46a;
  --placeholder-bg: #f5e3a3; /* legal placeholders, ink text 12:1 */

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-sm: 0.9375rem;
  --size-base: 1.0625rem;
  --size-lg: 1.25rem;
  --size-h3: 1.625rem;
  --size-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --size-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --tracking-caps: 0.14em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --radius: 2px;
  --arch: 999px 999px 0 0;
  --container: 72rem;
  --measure: 38rem;
  --header-h: 4.5rem;
  --shadow-float: 0 4px 14px rgba(18, 40, 58, 0.35); /* navy at 35%, floating WhatsApp button */
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-6); }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
p { margin: 0 0 var(--space-4); }
ul { margin: 0; }

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* On paper, brass alone is too light for a focus ring (WCAG 2.4.7 and 1.4.11): pair it with navy. */
.surface-paper :focus-visible,
main :focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 6px var(--brass); }
.band-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass); box-shadow: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--brass);
  color: var(--navy);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--space-3);
}
.band-navy .eyebrow { color: var(--brass); }

.lede { font-size: var(--size-lg); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-muted); }

/* ---------- Header and navigation ---------- */

.site-header {
  background: var(--navy);
  color: var(--on-navy);
  border-bottom: 1px solid var(--line-on-navy);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-navy);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }

.nav-toggle { display: none; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--on-navy);
  text-decoration: none;
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--brass); }
.site-nav a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }

/* Eight menu items no longer fit on one line below 90rem: the Menu button takes over there. */
@media (max-width: 90rem) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--on-navy);
    border: 1px solid var(--line-on-navy);
    border-radius: var(--radius);
    font: 600 var(--size-sm) / 1 var(--font-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: transform 0.2s ease;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .header-inner { flex-wrap: wrap; }
  .site-nav { width: 100%; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: var(--space-4); }
  .site-nav li + li { border-top: 1px solid var(--line-on-navy); }
  .site-nav a { display: block; padding: var(--space-3) 0; border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
}

/* ---------- Bands and sections ---------- */

.band-navy { background: var(--navy); color: var(--on-navy); }
.band-navy a:not(.button) { color: var(--brass); }
.band-navy .lede, .band-navy .muted { color: var(--on-navy-muted); }
.band-stone { background: var(--stone); }
.section { padding-block: var(--space-8); }
.section-head { max-width: var(--measure); margin-bottom: var(--space-7); }

.page-header { padding-block: var(--space-7) var(--space-8); }
.page-header h1 { max-width: 20ch; }

.rule {
  width: 4rem;
  height: 1px;
  border: 0;
  background: var(--brass);
  margin: var(--space-5) 0;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--on-navy);
  font: 600 var(--size-sm) / 1.2 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--navy-raised); }
.button--ghost { background: transparent; color: var(--navy); }
.button--ghost:hover { background: var(--navy); color: var(--on-navy); }
.band-navy .button { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.band-navy .button:hover { background: var(--paper); border-color: var(--paper); }
.band-navy .button--ghost { background: transparent; color: var(--on-navy); border-color: var(--line-on-navy); }
.band-navy .button--ghost:hover { background: var(--navy-raised); color: var(--on-navy); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Grids and cards ---------- */

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) and (max-width: 55.99rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  padding: var(--space-6) var(--space-5);
}
.band-stone .card { background: var(--paper); }
.card h3 { margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }
.card .card-link { margin-top: auto; padding-top: var(--space-4); font-weight: 600; }

.pillar-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--brass-ink);
  margin-bottom: var(--space-3);
}

.check-list, .plain-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 1px;
  background: var(--brass-ink);
}
.band-navy .check-list li::before { background: var(--brass); }
.plain-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.plain-list li:first-child { border-top: 1px solid var(--line); }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; border-top: 1px solid var(--line-on-navy); padding-top: var(--space-5); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.steps h3 { font-size: 1.5rem; }

/* Vehicle option */
.vehicle { border-top-width: 2px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.spec dt { font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.spec dd { margin: 0; }

/* ---------- Tours ---------- */

.note {
  border-left: 2px solid var(--brass-ink);
  padding: var(--space-4) var(--space-5);
  background: var(--stone);
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Quote block (About) ---------- */

.feature-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.35;
  margin: 0;
}

.split { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------- Booking form ---------- */

.form { max-width: 46rem; }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-7); }
.form legend {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-5);
}
.field { margin-bottom: var(--space-5); }
.field-row { display: grid; gap: 0 var(--space-5); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

label, .label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.optional { font-weight: 400; color: var(--ink-muted); }
.hint { display: block; font-size: var(--size-sm); color: var(--ink-muted); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
}
textarea { min-height: 8rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--navy); }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.choice-group.has-error .choice, .vehicle-list.has-error .choice { border-color: var(--error); border-width: 2px; }

.field-error {
  display: block;
  color: var(--error);
  font-weight: 600;
  font-size: var(--size-sm);
  margin-top: var(--space-2);
}
.field-error:empty { display: none; }

.error-summary {
  border: 2px solid var(--error);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background: #fff;
}
.error-summary h2,
.error-summary h3 { font-size: var(--size-h3); color: var(--error); }
.error-summary ul { padding-left: var(--space-5); }
.error-summary a { color: var(--error); font-weight: 600; }

.form-status {
  border-left: 2px solid var(--navy);
  padding: var(--space-4) var(--space-5);
  background: var(--stone);
  margin-top: var(--space-5);
}
.form-status:empty { display: none; }

/* ---------- Contact ---------- */

.contact-list { display: grid; gap: var(--space-5); margin: 0; }
.contact-list dt { font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); }
.contact-list dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; overflow-wrap: anywhere; }
.contact-list dd.contact-text { font-family: var(--font-text); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy-muted);
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--size-sm);
  border-top: 1px solid var(--line-on-navy);
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }
.site-footer .brand { margin-bottom: var(--space-4); }
.site-footer h2 {
  font-family: var(--font-text);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--on-navy); display: inline-block; padding-block: 0.125rem; }
.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-navy);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}
.footer-legal p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .actions { display: none; }
  body { background: #fff; }
}
.site-footer a.brand { display: inline-flex; color: var(--on-navy); }
@media (max-width: 24rem) {
  .site-header .brand { font-size: 1.25rem; gap: var(--space-2); }
  .site-header .brand svg { width: 2rem; height: 2rem; }
  .js .nav-toggle { padding-inline: var(--space-3); }
}

/* ================================================================
   Phase 2: photography, cards, legal pages
   ================================================================ */

[hidden] { display: none !important; }

/* Photos are shown exactly as published (CC BY-SA): no filters, only cropping by object-fit. */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Vehicle photo */
.vehicle-photo { margin: 0 0 var(--space-5); }
.vehicle-photo .photo-frame { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.vehicle-photo figcaption { font-size: var(--size-sm); color: var(--ink-muted); margin-top: var(--space-2); }

.tour-card { padding: 0; overflow: hidden; }
.tour-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.tour-body h3 { margin-bottom: var(--space-4); }
.tour-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); position: relative; }
.tour-media--fallback::before {
  content: "";
  position: absolute;
  inset: 16% 30% 0;
  border: 1px solid var(--brass);
  border-bottom: 0;
  border-radius: var(--arch);
}
.tour-media--fallback::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 16%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--brass);
}
.card-region {
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--space-2);
}
.tour-card .tour-body p { margin-bottom: var(--space-4); }
.tour-card .card-button { margin-top: auto; align-self: flex-start; }

/* Booking consent */
.check-field { display: flex; align-items: flex-start; gap: var(--space-3); }
.check-field input { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; flex: none; accent-color: var(--navy); }
.check-field label { margin: 0; }
.check-field + .hint { margin-top: var(--space-2); }

/* Legal and credits pages */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); margin-top: var(--space-7); }
.legal ul, .legal ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--size-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.legal th { font-weight: 600; background: var(--stone); }
mark.placeholder {
  background: var(--placeholder-bg);
  color: var(--ink);
  font-weight: 600;
  padding: 0 0.2em;
  outline: 1px dashed var(--brass-ink);
}
.credits-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.credits-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* Footer legal links */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.footer-legal-links li { margin: 0; }

/* Utility modifiers replacing former inline styles */
.note--spaced { margin-bottom: var(--space-7); }
.note--spaced-sm { margin-bottom: var(--space-6); }
.fieldset-plain { margin: 0; }
.legend-label { font-family: var(--font-text); font-size: var(--size-base); margin-bottom: var(--space-2); }
.actions--flush { margin-top: 0; }
.hint--after { margin-top: var(--space-3); }

/* Visible photo credit under a card image */
.photo-credit {
  margin: 0;
  padding: var(--space-2) var(--space-5) 0;
  font-size: var(--size-sm);
  color: var(--ink-muted);
}


/* ---------- FAQ ---------- */

.faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--brass-ink); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding-bottom: var(--space-4); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Logo ---------- */

/* Header carries the wordmark only: one line, uppercase, Avenir Roman as in the logo sheet.
   Avenir ships with Apple systems only; other devices fall back to a neutral sans. */
.site-header .brand span {
  font-family: "Avenir", "Avenir Roman", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 30rem) { .site-header .brand span { font-size: 1rem; letter-spacing: 0.1em; } }
@media (max-width: 22.5rem) { .site-header .brand span { font-size: 0.875rem; letter-spacing: 0.08em; } }

.about-logo-frame { display: flex; justify-content: center; }
.about-logo { width: min(24rem, 100%); height: auto; }
.site-footer a.brand { display: inline-block; }
.footer-logo { width: 12rem; height: auto; }

/* ================================================================
   Single page (4 Oct 2026): top bar, hero with quick request form,
   advantages, routes, fleet, featured tours, floating WhatsApp
   ================================================================ */

/* Top bar */
.topbar {
  background: var(--navy);
  border-bottom: 1px solid var(--line-on-navy);
  font-size: var(--size-sm);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-2);
}
.topbar a { color: var(--on-navy-muted); text-decoration: none; padding-block: var(--space-1); }
.topbar a:hover { color: var(--on-navy); text-decoration: underline; }
.topbar :focus-visible { outline-color: var(--brass); }
@media (max-width: 40rem) {
  .topbar-inner { justify-content: space-between; }
  .topbar-label { display: none; }
}

/* Icons: line drawings that take the colour of the text */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 2.25rem; height: 2.25rem; color: var(--brass-ink); margin-bottom: var(--space-3); }

/* Hero: photograph with the quick request form over it.
   The photo itself is untouched (CC BY-SA): text sits on solid panels, never on the image. */
.hero-booking { position: relative; background: var(--navy); }
.hero-booking .hero-booking-photo { height: auto; aspect-ratio: 16 / 9; }
.hero-booking-inner { display: grid; gap: var(--space-5); padding-block: var(--space-6) var(--space-7); }
.hero-booking-intro h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); max-width: 14ch; }
/* The porter figure from the logo, white, as the first thing the eye meets. Decorative (alt=""). */
.hero-figure { width: 9.5rem; height: auto; margin-bottom: var(--space-5); }
@media (min-width: 56rem) { .hero-figure { width: 14rem; margin-bottom: var(--space-6); } }
.hero-sub { font-size: var(--size-lg); color: var(--on-navy-muted); max-width: var(--measure); margin: 0; }
.quick-form-card {
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--brass);
  padding: var(--space-5);
}
.quick-form-title { font-size: var(--size-h3); margin-bottom: var(--space-4); }
.quick-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); max-width: none; }
.quick-form .field { margin-bottom: var(--space-4); }
.quick-form .error-summary { margin-bottom: var(--space-4); }
.hint--below { margin: var(--space-1) 0 0; }
.quick-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quick-form-actions .button { flex: 1 1 10rem; }
.quick-form .hint--after { margin-bottom: 0; }
@media (min-width: 30rem) {
  .quick-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .hero-booking { min-height: 44rem; display: flex; align-items: center; }
  .hero-booking .hero-booking-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero-booking-inner {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: end;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  /* Top-aligned with the form so the whole title and subtitle sit above the fold at 1280x800. */
  .hero-booking-intro { padding: var(--space-6); align-self: start; }
}

/* Advantages */
.advantages-band { background: var(--stone); padding-block: var(--space-7); }
.advantages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); }
@media (min-width: 40rem) { .advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .advantages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.advantage h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.advantage p { margin: 0; color: var(--ink-muted); }

/* Transfers */
.routes-title { margin-bottom: var(--space-2); }
.routes-intro { max-width: var(--measure); }

/* Transfer price table. Each price is a <span class="price">; header navy, rows paper and stone. */
.price-table-wrap { margin-top: var(--space-5); }
.price-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.price-table thead th {
  background: var(--navy);
  color: var(--on-navy);
  text-align: left;
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}
.price-table tbody tr:nth-child(odd) { background: var(--paper); }
.price-table tbody tr:nth-child(even) { background: var(--stone); }
.price-table tbody th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-3) var(--space-4);
}
.price-table td { padding: var(--space-2) var(--space-4); vertical-align: middle; border-left: 1px solid var(--line); }
.price-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.price { font-weight: 600; }
.price-na { color: var(--ink-muted); }
.cell-label { display: none; }
.button--sm { min-height: 2.75rem; padding: var(--space-2) var(--space-4); }
.price-table-note { font-size: var(--size-sm); color: var(--ink-muted); margin-top: var(--space-3); max-width: 48rem; }
.transfers-extra { margin-top: var(--space-6); align-items: start; }
.route-card--tours { background: var(--stone); }
.route-card--tours h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.route-card--tours .card-button { align-self: flex-start; margin-top: auto; }
.route-price-note { max-width: none; }

/* Below 48rem the table becomes one card per destination. Explicit ARIA roles in the HTML keep
   the table semantics in Safari, which drops them when table elements are displayed as blocks. */
@media (max-width: 47.99rem) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table { border: 0; }
  .price-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .price-table tbody tr,
  .price-table tbody tr:nth-child(even) {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--brass);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .price-table tbody th { padding: 0 0 var(--space-2); }
  .price-table td { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-3) 0 var(--space-2); }
  .price-table td:last-child { padding-bottom: 0; }
  .price-table .price-na { display: none; }
  .cell-label { display: block; flex-basis: 100%; font-size: var(--size-sm); font-weight: 600; color: var(--ink-muted); }
}
.included { margin-top: var(--space-7); }
.included h3 { margin-bottom: var(--space-4); }

/* Four-up grid for the featured tours */
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tour-card h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.tour-card .tour-body .tour-duration { font-size: var(--size-sm); font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-3); }
.tours-more { margin: var(--space-6) 0 0; }

/* Fleet */
.fleet-card { padding: var(--space-5); }
.fleet-card .vehicle-photo { margin-bottom: var(--space-4); }
.fleet-card h3 { margin-bottom: var(--space-1); }
.tag {
  margin: 0 0 0 auto;
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--brass-ink);
  border-radius: var(--radius);
  color: var(--brass-ink);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fleet-model { color: var(--ink-muted); margin-bottom: var(--space-4); }
.fleet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; }
.fleet-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.fleet-specs li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.fleet-specs .icon { color: var(--brass-ink); }

/* About */
.about-text { margin-top: var(--space-5); }

/* Team, inside #about */
.team { margin-top: var(--space-8); }
.team-title { margin-bottom: var(--space-5); }
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.team-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); margin-bottom: var(--space-4); }
.team-name { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; margin: 0 0 var(--space-1); }
.team-role { color: var(--ink-muted); font-size: var(--size-sm); margin: 0; }

/* Floating WhatsApp button, on every page */
.whatsapp-float,
.site-footer a.whatsapp-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  border: 1px solid var(--brass);
  box-shadow: var(--shadow-float);
}
.whatsapp-float svg {
  width: 2rem;
  height: 2rem;
  display: block;
}
.whatsapp-float:hover,
.site-footer a.whatsapp-float:hover { background: var(--navy-raised); }
.whatsapp-float:focus-visible,
.site-footer a.whatsapp-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 6px var(--brass); }
/* Room at the end of the page so the button never covers the legal links. */
.site-footer { padding-bottom: calc(var(--space-6) + 4.5rem); }

@media print {
  .topbar, .whatsapp-float, .quick-form-card { display: none; }
}

/* ---------- QA fixes (4 Oct 2026) ---------- */

/* Select drawn the same in every browser (Safari kept its native 28 px control): chevron from two gradients, tokens only. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

/* WebKit focuses the inner segments of date and time, so the field never gets :focus-visible. Same ring as the other fields. */
main input[type="date"]:focus-within,
main input[type="time"]:focus-within {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--brass);
  border-radius: var(--radius);
}


/* Bigger target for the name in the header on narrow screens. */
.site-header .brand { padding-block: var(--space-1); }

/* Floating WhatsApp on small screens: smaller, closer to the corner, and hidden while the hero form
   (which has its own WhatsApp button) is on screen, so it never sits on the hero text. */
@media (max-width: 40rem) {
  .whatsapp-float,
  .site-footer a.whatsapp-float { width: 3rem; height: 3rem; right: var(--space-3); bottom: var(--space-3); }
  .whatsapp-float svg { width: 1.625rem; height: 1.625rem; }
  .whatsapp-float.is-hidden,
  .site-footer a.whatsapp-float.is-hidden { visibility: hidden; opacity: 0; }
}
@media (max-width: 40rem) and (prefers-reduced-motion: no-preference) {
  .whatsapp-float { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* Instagram link: icon and handle, same colour as the surrounding links. */
.ig-link,
.site-footer a.ig-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.ig-link .icon { width: 1.125em; height: 1.125em; }

/* RNAAT status line in the footer: same size and colour as the other footer text. */
.footer-licence { margin-top: var(--space-2); }

/* Porto Airport transfer page (6 Oct). */
/* Visible breadcrumb, mirrors the BreadcrumbList in the JSON-LD. */
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--size-sm); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--on-navy-muted); }
.breadcrumb [aria-current="page"] { color: var(--on-navy-muted); }
/* Four arrival steps: two columns on tablets, four on wide screens (declared after .steps so it wins). */
@media (min-width: 40rem) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.after-steps { margin: var(--space-6) 0 0; max-width: var(--measure); }
/* Link from the home transfers section to the airport page. */
.airport-link { margin: var(--space-5) 0 0; font-weight: 600; }
.drive-times-title { margin: var(--space-7) 0 var(--space-4); }
.drive-times { max-width: var(--measure); margin: 0; }
/* Breadcrumb links: at least 24 px tall as a target (WCAG 2.2, 2.5.8). */
.breadcrumb a { display: inline-block; padding-block: var(--space-1); }
/* The link's padding (a bigger tap target) made "Home" sit lower than the current page: line them up by text baseline. */
.breadcrumb ol { align-items: baseline; }

/* ---------- Cookie choice (consent.js) ---------- */
/* Fixed to the bottom, not a modal: the page stays usable, and Accept and Decline carry the same weight. */
.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--navy);
  color: var(--on-navy);
  border-top: 1px solid var(--line-on-navy);
  box-shadow: var(--shadow-float);
}
.consent-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.consent-text { flex: 1 1 22rem; margin: 0; font-size: var(--size-sm); }
.consent-text a { color: var(--brass); }
.consent-actions { display: flex; gap: var(--space-3); flex: 0 0 auto; }
.consent-banner .button { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.consent-banner .button:hover { background: var(--paper); border-color: var(--paper); }
.consent-banner .button:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* The floating WhatsApp button would sit on top of the banner's buttons. */
.consent-open .whatsapp-float { display: none; }
.consent-settings {
  background: none;
  border: 0;
  padding: 0.125rem 0;
  color: var(--on-navy);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.consent-settings:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Private ride calculator (private-ride.html, private-ride.js) ---------- */
.ride-layout { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 56rem) { .ride-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ride-info h2 { font-size: var(--size-h3); margin-top: var(--space-6); }
.ride-info ul { padding-left: var(--space-5); }
.ride-trust {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brass);
  background: var(--stone);
  font-weight: 600;
}
.place-field { position: relative; }
.place-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ink);
  border-top: 0;
  box-shadow: var(--shadow-float);
  max-height: min(16rem, 40vh); /* leaves room for the fixed cookie banner */
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 40rem) {
  /* In the two-column rows the field is half the form: let the list use the form width so addresses stay on one or two lines. */
  .place-list { right: auto; width: max-content; min-width: 100%; max-width: min(34rem, calc(100vw - 2rem)); }
}
.place-option {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  cursor: pointer;
  border-top: 1px solid var(--line);
}
.place-option:hover, .place-option[aria-selected="true"] { background: var(--stone); }
.place-main { font-weight: 600; }
.place-secondary { font-size: var(--size-sm); color: var(--ink-muted); }
.ride-result:empty { display: none; }
.ride-result { margin-bottom: var(--space-4); }
.ride-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--navy);
  color: var(--on-navy);
}
.ride-price-label { font-size: var(--size-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brass); }
.ride-price-value { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; font-weight: 600; }
.ride-price-details { color: var(--on-navy-muted); font-size: var(--size-sm); }
.ride-price-discount { font-weight: 600; }
.ride-note { margin: 0; color: var(--ink-muted); }
.ride-nojs { margin: 0; }
.ride-airport { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--brass); background: var(--stone); }
.ride-airport p { margin: 0 0 var(--space-3); }
.ride-airport-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0; }
.ride-status:empty { display: none; }
.ride-status { margin: var(--space-3) 0 0; font-weight: 600; }
.ride-map { height: 18rem; margin-bottom: var(--space-4); border: 1px solid var(--line); }
.ride-map[hidden] { display: none; }

/* ---------- Booking assistant: 4 steps in the home hero (private-ride.js). Reuses .field, .choice, .check-field,
   .spec, .note, .ride-price and the buttons; only what those do not cover is below. ---------- */
.ride-card { container-type: inline-size; }
.ride-card [hidden] { display: none; }

/* Step indicator: an ordered list; the current step carries aria-current="step". */
.wiz-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.wiz-steps-item { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); border-top: 3px solid var(--line); font-size: var(--size-sm); line-height: 1.25; color: var(--ink-muted); overflow-wrap: anywhere; }
.wiz-steps-num { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; line-height: 1; }
.wiz-steps-item.is-done { border-top-color: var(--navy); color: var(--ink); }
.wiz-steps-item[aria-current="step"] { border-top-color: var(--brass-ink); color: var(--ink); font-weight: 600; }

.wiz-body { display: grid; gap: var(--space-5); }
.wiz-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); }
.wiz-title { grid-column: 1 / -1; margin-bottom: var(--space-4); }
@media (min-width: 30rem) { .wiz-step { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vehicles: each option is a .choice (a radio inside a bordered label) with a description and the price. */
.vehicle-list { display: grid; gap: var(--space-3); }
.vehicle-choice { align-items: flex-start; font-weight: 400; }
.vehicle-choice input { flex: none; margin-top: 0.125rem; }
/* Solid colours, not opacity: ink-muted on stone is 5.0:1 for the name, the description and the price. */
.vehicle-choice.is-unavailable { background: var(--stone); cursor: not-allowed; }
.vehicle-choice.is-unavailable .vehicle-name, .vehicle-choice.is-unavailable .vehicle-desc, .vehicle-choice.is-unavailable .vehicle-price, .vehicle-choice.is-unavailable .vehicle-price small { color: var(--ink-muted); }
.vehicle-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vehicle-name { font-weight: 600; }
.vehicle-desc { font-size: var(--size-sm); color: var(--ink-muted); }
.vehicle-price { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.vehicle-price small { display: block; font-family: var(--font-text); font-size: var(--size-sm); font-weight: 400; color: var(--ink-muted); text-align: right; }

.wiz-extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); }
.wiz-extras .check-field { grid-column: 1 / -1; }
.wiz-extras .field { display: flex; flex-direction: column; justify-content: flex-end; }
.wiz-pay { flex-direction: column; align-items: stretch; }
@media (min-width: 30rem) { .wiz-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Summary beside the steps when the card is wide enough, below them when it is not. */
.wiz-aside { padding: var(--space-4); background: var(--stone); border-top: 2px solid var(--brass); }
.wiz-aside-title { font-size: var(--size-lg); margin-bottom: var(--space-3); }
.wiz-aside .wiz-spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wiz-aside .wiz-spec dd { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.wiz-spec dd { overflow-wrap: anywhere; }
/* Below 30rem a label column next to a value column leaves the value about 60 to 110 px, and words broke in the middle ("Comfor/t")
   in the final summary and in the confirmation. The label goes above the value, as in the side summary. */
@media (max-width: 29.99rem) {
  .wiz-spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wiz-spec dd { margin-bottom: var(--space-2); }
}
@container (min-width: 38rem) {
  .wiz-body.has-aside { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
}

.wiz-nav { flex-wrap: wrap-reverse; margin-top: var(--space-3); }
/* The card is wider than before to hold the vehicle list beside the summary; the intro keeps its content. */
@media (min-width: 68rem) { .hero-booking-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); } }

/* ---------- Blog (15 Oct) ---------- */
/* Generated pages: blog.html and blog/<slug>.html are written by blog/build.py. Same tokens as the rest of the site. */
.blog-intro { max-width: var(--measure); }
.blog-empty { max-width: var(--measure); }
.post-card h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--brass-ink); }
.post-card .tour-body .post-date { font-size: var(--size-sm); font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-3); }

.article-header h1 { max-width: 26ch; }
.article-meta { margin: 0; font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--on-navy-muted); }
.article-wrap { max-width: 49rem; }
.article-hero { margin: var(--space-6) 0 0; }
.article-hero img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--stone); }
@media (min-width: 40rem) { .article-hero img { aspect-ratio: 16 / 9; } }
/* Portrait photos: shown whole, centred on stone, never taller than the screen is comfortable with. */
.article-hero.is-portrait, .article-figure.is-portrait { background: var(--stone); }
.article-hero.is-portrait img, .article-figure.is-portrait img { width: auto; max-width: 100%; max-height: 36rem; margin-inline: auto; aspect-ratio: auto; object-fit: contain; background: transparent; }
.article-body { padding-block: var(--space-6) var(--space-7); overflow-wrap: anywhere; }
.article-body > p:first-child { font-size: var(--size-lg); }
.article-body h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); margin: var(--space-7) 0 var(--space-4); }
.article-body h3 { margin: var(--space-6) 0 var(--space-3); }
.article-body ul, .article-body ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.article-body li { margin-bottom: var(--space-2); }
.article-body blockquote { margin: 0 0 var(--space-4); padding-left: var(--space-5); border-left: 3px solid var(--brass); color: var(--ink-muted); }
.article-body hr { width: 4rem; height: 1px; border: 0; background: var(--brass); margin: var(--space-6) 0; }
.article-figure { margin: var(--space-6) 0; }
.article-figure img { width: 100%; height: auto; background: var(--stone); }
/* "Where to eat" and "Nearby": set apart on stone, same brass top rule as the cards. */
.article-box { background: var(--stone); border-top: 2px solid var(--brass); padding: var(--space-5); margin: var(--space-7) 0; }
.article-box h2 { margin-top: 0; }
.article-box > :last-child { margin-bottom: 0; }
.article-end { padding-block: var(--space-8); }
.article-end .lede { margin-bottom: 0; }
.article-end h2 { max-width: 20ch; }
.article-pager { padding-block: var(--space-7); }
.article-pager ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .article-pager ul { grid-template-columns: 1fr 1fr; } .article-pager li:only-child.is-next { grid-column: 2; } }
.pager-link { display: block; height: 100%; padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--brass); color: var(--ink); text-decoration: none; }
.pager-link:hover .pager-title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--brass-ink); }
.pager-label { display: block; font-size: var(--size-sm); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brass-ink); margin-bottom: var(--space-2); }
.pager-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.is-next .pager-link { text-align: right; }
.credits-article { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-3); }

/* Google rating badge at the top of the footer (16 Oct): large on purpose, stars and score in brass on navy. */
.site-footer .review-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--navy-raised); border: 1px solid var(--line-on-navy); border-radius: var(--radius);
  color: var(--on-navy); text-decoration: none;
}
.site-footer .review-badge:hover, .site-footer .review-badge:focus-visible { border-color: var(--brass); }
.review-badge-stars { color: var(--brass); font-size: 1.75rem; letter-spacing: 0.12em; line-height: 1; }
.review-badge-score { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--on-navy); }
.review-badge-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 14rem; }
.review-badge-text strong { font-size: var(--size-lg); font-weight: 600; }
.review-badge-text span { color: var(--on-navy-muted); font-size: var(--size-sm); }
.review-badge-cta {
  background: var(--brass); color: var(--navy); font-weight: 600; padding: 0.75rem 1.25rem;
  border-radius: var(--radius); min-height: 2.75rem; display: inline-flex; align-items: center;
}
@media (max-width: 40rem) { .site-footer .review-badge { padding: var(--space-4); } .review-badge-cta { width: 100%; justify-content: center; } }