/* Nqabara Eco River Lodge
   One stylesheet for the whole site. No framework, no build step.

   Contents
     1. Colours, fonts and sizes
     2. Base elements
     3. Header and menu
     4. Buttons
     5. Photo and video headers (home + inner pages)
     6. Page sections and layouts
     7. Home page
     8. Accommodation
     9. Rates tables
    10. Forms
    11. Contact
    12. Gallery
    13. Reviews (home page)
    14. Experiences and fishing
    15. Booking terms and privacy
    16. Footer
    17. Small helpers

   After editing, bump ?v= on style.css in every page so browsers fetch the new file
   (CSS is cached for 30 days, see site/_headers). */


/* 1. Colours, fonts and sizes
   The palette runs from forest greens to ocean blues. Font sizes go up in steps:
   --step--1 is small print, --step-5 is the home page headline. */

:root {
  --forest: #173f2c;
  --forest-deep: #0f2c1f;
  --mangrove: #4a7350;
  --moss: #dfe8dc;
  --ocean: #0e3a5b;
  --ocean-deep: #0a2a42;
  --surf: #2b7f99;
  --sea-mist: #dcebef;
  --sand: #e3d6b8;
  --mist: #f1f4f0;
  --white: #ffffff;
  --ink: #15241c;
  --ink-soft: #4b5a51;
  --line: #c9d3c8;

  --serif: "Young Serif", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --step-5: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 72rem;
  --radius: 6px;
}


/* 2. Base elements */

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

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
p { margin: 0 0 1em; max-width: 64ch; }

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

:focus-visible { outline: 3px solid var(--surf); outline-offset: 3px; border-radius: 2px; }

/* Keeps headings clear of the sticky header when jumping to #anchors */
[id] { scroll-margin-top: 5.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0.5rem; z-index: 100;
  background: var(--white); padding: 0.5rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { left: 0.5rem; }

/* Centres page content and keeps it off the screen edges */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }


/* 3. Header and menu
   Eight links plus Book now fit on one line from 77rem up.
   Below that the links fold into a dropdown opened by the Menu button (see main.js). */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--forest);
  color: var(--white);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.5rem;
  max-width: 92rem;
}
.brand { color: inherit; text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; }
.brand:hover { color: inherit; }
.brand img { height: 2.75rem; width: auto; }
@media (max-width: 24rem) { .brand img { height: 2.25rem; } }

.nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  color: var(--white); text-decoration: none; font-size: 0.9375rem; white-space: nowrap;
  padding: 0.5rem 0.55rem; border-radius: var(--radius); display: block;
}
.nav-list a:hover { background: rgb(255 255 255 / 0.1); color: var(--white); }
.nav-list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sand); border-radius: 0; }
.nav-list .btn { margin-left: 0.5rem; }

.nav-toggle {
  display: none; background: none; border: 2px solid rgb(255 255 255 / 0.4); color: var(--white);
  font: 600 0.9375rem var(--sans); padding: 0.5rem 0.8rem; border-radius: var(--radius); cursor: pointer;
}

@media (max-width: 77rem) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--forest); padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-list a { padding: 0.8rem 0.55rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); border-radius: 0; }
  .nav-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sand); padding-left: 0.8rem; }
  .nav-list .btn { margin-top: 1rem; border-bottom: 0; padding: 0.95rem; }
}


/* 4. Buttons
   .btn-book is the sand "Book now" style, .btn-ocean the main blue one,
   .btn-ghost an outline. Inside .on-light the outline turns forest green. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.9375rem/1 var(--sans);
  padding: 0.85rem 1.3rem; border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-book { background: var(--sand); color: var(--forest-deep); }
.btn-book:hover { background: var(--white); color: var(--forest-deep); }
.btn-ocean { background: var(--ocean); color: var(--white); }
.btn-ocean:hover { background: var(--surf); color: var(--white); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgb(255 255 255 / 0.12); color: inherit; }
.on-light .btn-ghost { color: var(--forest); }
.on-light .btn-ghost:hover { background: var(--moss); }


/* 5. Photo and video headers
   The photo or video sits behind the text. ::after lays a dark fade over it
   so the white text stays readable whatever the picture. */

.hero {
  position: relative; color: var(--white);
  min-height: min(92vh, 52rem);
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
}
.hero img, .hero video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(10 30 22 / 0.82) 0%, rgb(10 30 22 / 0.35) 45%, rgb(10 30 22 / 0) 75%);
}
.hero .wrap { padding-block: 4rem clamp(3rem, 8vh, 6rem); }
.hero h1 { font-size: var(--step-5); max-width: 15ch; margin-bottom: 0.35em; }
.hero p { font-size: var(--step-1); max-width: 40ch; opacity: 0.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Shorter version used at the top of every inner page */
.page-hero {
  position: relative; color: var(--white); isolation: isolate;
  min-height: 22rem; display: grid; align-items: end; overflow: hidden;
}
.page-hero img, .page-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(10 30 22 / 0.78), rgb(10 30 22 / 0.1) 70%);
}
.page-hero .wrap { padding-block: 3rem 2.5rem; }
.page-hero h1 { margin-bottom: 0.2em; }
.page-hero p { font-size: var(--step-1); margin: 0; opacity: 0.95; }


/* 6. Page sections and layouts */

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 46rem; }

/* Background colours for alternating sections */
.bg-moss { background: var(--moss); }
.bg-forest { background: var(--forest); color: var(--white); }
.bg-forest a:not(.btn) { color: var(--sand); }
.bg-ocean { background: var(--ocean); color: var(--white); }
.bg-ocean a:not(.btn) { color: var(--sea-mist); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.muted { color: var(--ink-soft); }
.bg-forest .muted, .bg-ocean .muted { color: rgb(255 255 255 / 0.75); }

/* Text beside a photo. Stacks on phones; add .reverse to put the photo on the right. */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split.reverse > :first-child { order: 2; }
}
.split img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.split img.tall-photo { aspect-ratio: 3 / 4; }
@media (min-width: 52rem) { .split img.tall-photo { max-height: 36rem; width: auto; max-width: 100%; margin-inline: auto; } }

/* Full-width photo or video with text on the left */
.feature-band { position: relative; isolation: isolate; color: var(--white); overflow: hidden; }
.feature-band img, .feature-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.feature-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(10 42 66 / 0.88) 0%, rgb(10 42 66 / 0.55) 50%, rgb(10 42 66 / 0.05) 100%);
}
.feature-band .wrap { padding-block: clamp(5rem, 12vw, 9rem); }
.feature-band .content { max-width: 34rem; }

/* Booking prompt near the foot of most pages */
.cta {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between;
}
.cta h2 { margin: 0; max-width: 20ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Portrait video clip used beside text */
.clip-portrait { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 52rem) { .clip-portrait { max-height: 34rem; } }

/* iOS shows its own play button when it won't autoplay (Low Power Mode).
   Hide it; main.js swaps the video for its poster image instead. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }


/* 7. Home page */

/* Intro text with the key facts list beside it */
.intro { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .intro { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.facts { margin: 0; border-top: 2px solid var(--forest); }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

/* River, sea and forest: three portrait clips with text */
.habitats { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 52rem) { .habitats { grid-template-columns: repeat(3, 1fr); } }
.habitat img, .habitat video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.25rem; }
.habitat h3 { font-size: var(--step-2); }
.habitat p { color: var(--ink-soft); }


/* 8. Accommodation */

.stay { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.stay:last-of-type { border-bottom: 0; }
/* One large photo on the left, two smaller ones stacked on the right */
.stay-gallery { display: grid; gap: 0.75rem; grid-template-columns: 2fr 1fr; }
.stay-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.stay-gallery img:first-child { grid-row: span 2; aspect-ratio: 4 / 3.4; }
.stay-gallery img:not(:first-child) { aspect-ratio: 4 / 3; }
.stay .sleeps { font-weight: 600; color: var(--mangrove); margin-bottom: 0.75rem; }

/* List with drawn tick marks (also used on the fishing page) */
.tick-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.tick-list li { padding: 0.45rem 0 0.45rem 1.75rem; position: relative; border-bottom: 1px solid var(--line); }
.tick-list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.95rem;
  width: 0.7rem; height: 0.4rem; border-left: 2px solid var(--mangrove); border-bottom: 2px solid var(--mangrove);
  transform: rotate(-45deg);
}
.bg-forest .tick-list li { border-color: rgb(255 255 255 / 0.15); }
.bg-forest .tick-list li::before { border-color: var(--sand); }

/* Solar, water and waste points on the about page */
.eco-points { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .eco-points { grid-template-columns: repeat(3, 1fr); } }
.eco-points h3 { color: var(--sand); }


/* 9. Rates tables */

.rate-block + .rate-block { margin-top: 3.5rem; }
.rate-block h3 { font-size: var(--step-2); margin-bottom: 0.25em; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 30rem; }
caption { text-align: left; color: var(--ink-soft); padding-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; border-bottom: 2px solid var(--forest); }
td.price, th.price { text-align: right; padding-right: 0; white-space: nowrap; }
td.price { font-weight: 600; font-size: var(--step-1); color: var(--forest); }
tbody th { font-weight: 600; }
/* On phones, let the rate tables wrap so the price column stays on screen */
@media (max-width: 34rem) {
  table { min-width: 0; }
  th, td { padding-right: 0.6rem; }
  td.price { font-size: var(--step-0); }
}

/* Label / value notes under each table */
.rate-notes { display: grid; gap: 0.25rem 2rem; margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
@media (min-width: 40rem) { .rate-notes { grid-template-columns: auto 1fr; } }
.rate-notes dt { font-weight: 600; color: var(--ink); }
.rate-notes dd { margin: 0 0 0.5rem; }

/* Extras price lists, flowing into two columns on wide screens */
.extras { columns: 2 22rem; column-gap: 3rem; margin-top: 2rem; }
.extras-group { break-inside: avoid; margin-bottom: 2rem; }
.extras-group h3 { margin-bottom: 0.25rem; }
.extras-group table { min-width: 0; }
.extras-group td.price { font-size: var(--step-0); }

/* Short price table used on the fishing page */
.price-list { margin-top: 1rem; }
.price-list table { min-width: 0; }
.price-list td.price { font-size: var(--step-0); }

.booking-options { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .booking-options { grid-template-columns: 1fr 1.3fr; } }


/* 10. Forms (enquiry form on rates, message form on contact) */

.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; }
.hint { font-weight: 400; color: var(--ink-soft); }
input, textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 0.75rem 0.85rem; border: 1.5px solid #aebcae; border-radius: var(--radius); background: var(--white);
}
input:focus, textarea:focus, select:focus { outline: 3px solid rgb(43 127 153 / 0.35); border-color: var(--surf); }
textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
.form-status { font-weight: 600; color: var(--forest); margin: 0; min-height: 1.5em; }
.form-status.is-error { color: #a12c1f; }
.form .btn { justify-self: start; }


/* 11. Contact */

.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1fr 1.3fr; } }
.contact-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.contact-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.contact-list span { display: block; color: var(--ink-soft); font-size: 0.9375rem; }
.contact-list a { font-size: var(--step-1); font-family: var(--serif); text-decoration: none; }

.map-frame { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius); background: var(--moss); }

/* Driving times list on the blue "Getting here" section */
.distances { margin: 0; }
.distances div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.distances dt { opacity: 0.85; }
.distances dd { margin: 0; font-weight: 600; }


/* 12. Gallery
   Filter buttons are shared with the experiences page. */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filters button {
  font: 600 0.9375rem var(--sans); padding: 0.55rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--forest); background: transparent; color: var(--forest);
}
.filters button[aria-pressed="true"] { background: var(--forest); color: var(--white); }

/* Photos in CSS columns, so mixed portrait and landscape shots pack together */
.masonry { columns: 3 18rem; column-gap: 0.75rem; }
.masonry figure { margin: 0 0 0.75rem; break-inside: avoid; }
.masonry button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden;
}
.masonry img { width: 100%; transition: transform 0.4s ease; }
.masonry button:hover img { transform: scale(1.03); }
.masonry figure[hidden] { display: none; }

/* Full-screen photo viewer, a native <dialog> */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
}
.lightbox::backdrop { background: rgb(8 22 16 / 0.92); }
.lightbox-inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; color: var(--white); }
.lightbox-bar { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem; }
.lightbox figure { margin: 0; display: grid; place-items: center; min-height: 0; padding: 0 3.5rem; }
.lightbox img { max-height: calc(100vh - 9rem); max-width: 100%; object-fit: contain; border-radius: 4px; }
.lightbox figcaption { text-align: center; padding: 0.75rem 1rem 1.25rem; opacity: 0.9; }
.lb-btn {
  background: rgb(255 255 255 / 0.12); color: var(--white); border: 0; border-radius: var(--radius);
  font: 600 0.9375rem var(--sans); padding: 0.6rem 0.9rem; cursor: pointer;
}
.lb-btn:hover { background: rgb(255 255 255 / 0.22); }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); font-size: 1.5rem; padding: 0.6rem 0.9rem; }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }
@media (max-width: 40rem) {
  .lightbox figure { padding: 0 0.5rem; }
  .lb-prev, .lb-next { top: auto; bottom: 0.75rem; transform: none; }
}


/* 13. Reviews (home page)
   Guest quotes, then the Tripadvisor score with a bar chart and the Tripadvisor widget. */

.quotes { display: grid; gap: 2.5rem 3rem; margin-top: 2rem; }
@media (min-width: 44rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--serif); font-size: var(--step-1); line-height: 1.4; color: var(--forest); margin: 0 0 1rem; }
.quote figcaption { font-size: var(--step--1); color: var(--ink-soft); }
.quote figcaption strong { display: block; font-weight: 600; color: var(--ink); }

.rating-grid { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .rating-grid { grid-template-columns: 1fr 1.4fr; gap: 5rem; } }
.rating-score { font-family: var(--serif); font-size: var(--step-1); margin: 0; color: var(--ink-soft); }
.rating-score span { display: block; font-size: clamp(5rem, 3rem + 8vw, 8.5rem); line-height: 0.95; color: var(--forest); }
.rating-word { font-family: var(--serif); font-size: var(--step-2); margin: 0.75rem 0 0.5rem; }

/* Bar chart. Each bar's length comes from --v, set inline in the HTML (e.g. style="--v:72.3%"). */
table.bars { min-width: 0; }
.bars th, .bars td { border-bottom: 0; padding: 0.4rem 0; vertical-align: middle; }
.bars th { width: 6.5rem; font-weight: 400; color: var(--ink-soft); }
.bars td:nth-child(2) { width: 100%; padding-right: 0.75rem; }
.bar {
  display: block; height: 0.75rem; width: max(var(--v), 0px); min-width: 0;
  background: var(--forest); border-radius: 0 4px 4px 0;
}
.bar-value { text-align: right; font-weight: 600; width: 2.5rem; }
.bars-note { font-size: var(--step--1); margin-top: 0.5rem; }

/* The Tripadvisor widget sets a fixed width and its own fonts. These overrides
   (with !important, because its styles are inline) make it fill the column. */
.ta-widget { margin-top: 2rem; max-width: 46rem; background: var(--white); border-radius: var(--radius); padding: 1rem; }
.rating-grid .ta-widget { margin-top: 0; }
.ta-widget #CDSWIDSSP { width: 100% !important; max-width: 100%; }
.ta-widget .TA_links a { font-weight: 600; }
.ta-widget .widSSPQuote, .ta-widget .widSSPQuote * { font-size: 1rem !important; line-height: 1.5 !important; }
.ta-widget .widSSPQuote { margin-bottom: 0.6rem !important; }
.ta-widget .widSSPH11 { font-size: 0.8125rem !important; }


/* 14. Experiences and fishing */

/* Experience cards. Filtering just sets the hidden attribute (see main.js). */
.xp-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.xp[hidden] { display: none; }
.xp-media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.xp h3 { margin-bottom: 0.4em; }
.xp p { margin-bottom: 0.6rem; }
.xp-meta { font-size: var(--step--1); font-weight: 600; color: var(--mangrove); }
.xp-link { font-weight: 600; }

/* Large photo links at the foot of the about page */
.explore-links { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 48rem) { .explore-links { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.explore-link { display: block; color: var(--ink); text-decoration: none; }
.explore-link img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.explore-title { display: block; font-family: var(--serif); font-size: var(--step-2); color: var(--forest); }
.explore-link:hover .explore-title { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; }
.explore-text { display: block; color: var(--ink-soft); margin-top: 0.25rem; max-width: 46ch; }

/* Row of bird photos with captions */
.photo-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
@media (min-width: 48rem) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.photo-grid figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.4rem; }
.bg-forest .photo-grid figcaption { color: rgb(255 255 255 / 0.75); }

.bird-list { columns: 2 14rem; column-gap: 2rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bird-list li { padding: 0.35rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.15); break-inside: avoid; }


/* 15. Booking terms and privacy */

.legal { max-width: 46rem; }
.legal h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.legal ul { padding-left: 1.25rem; margin: 0 0 1em; }
.legal li { margin-bottom: 0.6rem; max-width: 64ch; }


/* 16. Footer */

.site-footer { background: var(--ocean-deep); color: rgb(255 255 255 / 0.85); padding-block: 4rem 2rem; font-size: 0.9375rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--sand); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h2 { font-size: var(--step-1); color: var(--white); margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.4rem; }
.footer-logo { width: 13rem; height: auto; margin-bottom: 1.25rem; }
.footer-base {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: rgb(255 255 255 / 0.6);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer .footer-legal a { color: inherit; }
.site-footer .footer-legal a:hover { color: var(--sand); }


/* 17. Small helpers
   Kept last so they win over section styles. */

.space-top { margin-top: 2rem; }
.space-top-lg { margin-top: 4.5rem; }
.flush-top { padding-top: 0; }

/* Hidden on screen but still read out by screen readers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Form buttons while sending */
button[disabled] { opacity: 0.6; cursor: progress; }