/* ============================================================
   Roy the Boatman — styles
   Editorial-organic. Warm cream, mangrove greens, river teal.
   ============================================================ */

:root {
  /* palette */
  --bg:        #f5efe6;            /* warm cream */
  --bg-2:      #ede4d3;            /* slightly deeper cream for sections */
  --ink:       #1f3d2b;            /* deep mangrove green */
  --ink-soft:  #2f4a36;
  --river:     #3a6b7b;            /* muted teal */
  --sun:       #d97757;            /* terracotta sunset */
  --gold:      #e0a82e;            /* marigold accent */
  --rule:      rgba(31,61,43,0.18);

  /* type */
  --display: 'Fraunces', 'Times New Roman', serif;
  --body:    'Manrope', system-ui, sans-serif;
  --hand:    'Caveat', cursive;

  /* layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --col-text: 46%;
  --col-stage: 54%;
  --section-pad-y: clamp(4rem, 9vh, 7rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1vw + 0.5rem, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* warm paper grain across the entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix type='matrix' values='0 0 0 0 0.12 0 0 0 0 0.24 0 0 0 0 0.17 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.18;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ----------------------------------------------------------
   FIXED MEDIA STAGE (right half of viewport)
   ---------------------------------------------------------- */
.stage {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--col-stage);
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}

.stage-mask {
  position: absolute;
  inset: 0;
  /* gradient blend into the page background — fades hard on the LEFT (center divider) */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.25) 6%,
      rgba(0,0,0,0.85) 18%,
      #000 30%,
      #000 88%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.25) 6%,
      rgba(0,0,0,0.85) 18%,
      #000 30%,
      #000 88%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%);
  mask-composite: intersect;
}

.layer {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms cubic-bezier(.4,.0,.2,1),
              transform 2400ms cubic-bezier(.2,.0,.2,1);
  will-change: opacity, transform;
}
.layer.is-active {
  opacity: 1;
  transform: scale(1.0);
  transition: opacity 1300ms cubic-bezier(.4,.0,.2,1),
              transform 6000ms ease-out;
}
.layer img,
.layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.layer[data-key="watch"] video {
  pointer-events: auto;     /* allow clicking the inline video */
  background: #000;
}

/* subtle film grain over the stage */
.stage-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.22;
}

/* ----------------------------------------------------------
   TOP NAV
   ---------------------------------------------------------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }

.brand {
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand-mark {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0.35em 0.55em;
  border-radius: 999px;
  background: rgba(245,239,230,0.6);
  backdrop-filter: blur(6px);
}
.brand-mark .amp { color: var(--sun); padding: 0 0.1em; }

.topnav nav {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.topnav nav a {
  text-decoration: none;
  color: var(--ink);
  background: rgba(245,239,230,0.6);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  transition: color 240ms;
}
.topnav nav a:hover { color: var(--sun); }
.topnav nav a[aria-current="page"] {
  color: var(--sun);
  border-bottom: 1px solid var(--sun);
  border-radius: 999px 999px 0 0;
}
.topnav nav a.cta {
  background: var(--ink);
  color: var(--bg);
  padding: 0.55rem 1rem;
}
.topnav nav a.cta:hover { background: var(--sun); color: var(--bg); }
.topnav nav a.cta[aria-current="page"] {
  background: var(--sun);
  color: var(--bg);
  border-bottom: none;
  border-radius: 999px;
}

/* ----------------------------------------------------------
   SECTIONS — text on the left, stage shows through on the right
   ---------------------------------------------------------- */
main {
  position: relative;
  z-index: 2;
}

.section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--section-pad-y) var(--gutter);
}
.section--short { min-height: 90vh; }

.section .text {
  width: var(--col-text);
  max-width: 560px;
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* faint horizontal rule between text blocks for editorial feel — disabled on the homepage */
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: calc(var(--col-text) - var(--gutter));
  max-width: 560px;
  height: 1px;
  background: var(--rule);
}
body.home .section + .section::before { display: none; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  margin: 0 0 1.4rem;
}

.display {
  font-family: var(--display);
  font-weight: 350;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  color: var(--ink);
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--sun);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.section .text p {
  font-size: 1.06rem;
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.callout {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem !important;
  line-height: 1.45;
  border-left: 2px solid var(--sun);
  padding-left: 1.1rem;
  color: var(--ink) !important;
  margin-top: 1.8rem !important;
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}
.ticks li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.7rem;
  height: 1px;
  background: var(--sun);
}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.section--hero { padding-top: calc(var(--section-pad-y) + 2rem); }
.section--hero .display {
  font-size: clamp(3.2rem, 8vw, 7.5rem);
  font-weight: 300;
}
.section--hero .display .line { display: block; }
.section--hero .display .line:nth-child(2) { padding-left: 1.8rem; }

.tagline {
  font-size: 1.15rem !important;
  color: var(--ink) !important;
  margin: 0.4rem 0 2rem !important;
}
.hand {
  font-family: var(--hand);
  font-size: 1.7em;
  color: var(--sun);
  line-height: 0.7;
  margin-right: 0.2em;
  display: inline-block;
  transform: translateY(0.12em) rotate(-3deg);
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}
.cta-row--big { margin-top: 1.4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.3rem;
  border-radius: 999px;
  transition: transform 200ms, background 240ms, color 240ms, box-shadow 240ms;
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 18px 40px -22px rgba(31,61,43,0.7);
}
.btn--primary:hover {
  background: var(--sun);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.fineprint {
  margin-top: 1.6rem !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--river) !important;
}

/* ----------------------------------------------------------
   SECTION--VIDEO  —  TOP / BOTTOM full-bleed layout (Watch only)
   Text + heading on top, video filling the bottom of the screen.
   Opaque background covers the fixed media stage entirely.
   ---------------------------------------------------------- */
.section--video {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--section-pad-y) + 1rem) var(--gutter) 0;
  background: var(--bg);
  position: relative;
  z-index: 5;          /* sits above the fixed stage */
  overflow: hidden;
}

/* hairline rules and warm gradient at top edge to blend with prior section */
.section--video::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8rem;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}

.section--video .text {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-right: 0;
  position: relative;
  z-index: 1;
}
.section--video .display {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
}
.section--video p { max-width: 60ch; }

.video-stage {
  margin: 2.5rem auto 0;        /* center the player below the copy */
  width: 100%;
  max-width: 980px;
  position: relative;
  padding-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blurred ambient backdrop — no longer used now that the player is a
   self-contained, centered element. Element kept in the DOM so the
   thumbnail-swap JS continues to run without errors. */
.video-bg {
  display: none;
}

/* The video itself: shown at native aspect ratio with a framed border */
.video-stage video {
  position: relative;
  z-index: 2;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border: 3px solid var(--ink);
  border-radius: 0.9rem;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.45);
  background: #000;
}

/* ----------------------------------------------------------
   WATCH IT — video thumbnail strip
   ---------------------------------------------------------- */
.thumbs {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.thumb {
  position: relative;
  width: 7.5rem;
  height: 5rem;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--ink);
  transition: transform 200ms, border-color 240ms;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 240ms;
}
.thumb span {
  position: absolute;
  left: 0.55rem;
  bottom: 0.4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--bg);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.thumb:hover { transform: translateY(-2px); }
.thumb:hover img { opacity: 1; }
.thumb.is-active {
  border-color: var(--sun);
}
.thumb.is-active img { opacity: 1; }

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  padding: 3rem var(--gutter) 2.2rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.footer .hand { color: var(--sun); }
.footer p { margin: 0; }

/* ----------------------------------------------------------
   MOBILE  — single column, kill the fixed stage
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --col-text: 100%;
    --col-stage: 100%;
    --section-pad-y: 4rem;
  }

  .stage { display: none; }

  .section {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .section--hero {
    padding-top: 7rem;
    min-height: 92vh;
    justify-content: center;
  }
  .section .text {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }
  .section + .section::before {
    width: calc(100% - var(--gutter) * 2);
  }

  /* mobile inline media — driven by inline --media custom property on each section */
  .section[style*="--media"]::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-top: 2rem;
    background-image: var(--media);
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  #watch::after, .section--video::after { display: none !important; }

  .section--video {
    padding: 5rem var(--gutter) 0;
  }
  .video-stage { margin-top: 1.75rem; padding-bottom: 2rem; }
  .video-stage video { max-height: 70vh; }

  .topnav nav { gap: 0.4rem; }
  .topnav nav a { padding: 0.4rem 0.6rem; font-size: 0.7rem; }
  .topnav nav a[href="#about"],
  .topnav nav a[href="#river"],
  .topnav nav a[href="#cuisine"],
  .topnav nav a[href="#watch"] { display: none; }

  .section--hero .display .line:nth-child(2) { padding-left: 0.8rem; }

  .footer { flex-direction: column; gap: 0.5rem; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .layer,
  .layer.is-active {
    transition: opacity 200ms ease;
    transform: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

/* ============================================================
   .essay layout  —  used by roy.html
   Text-rich, single-column reading layout. Replaces the side-by-side
   stage with a small polaroid-style frame fixed in the top-right corner.
   The frame's media still cross-fades as you scroll between sections.
   ============================================================ */

body.essay main {
  /* modest right gutter — the text flows across the full width and
     fades out behind the polaroid via body.essay::after */
  padding-right: clamp(0px, 6vw, 80px);
}

body.essay .section {
  display: block;
  min-height: auto;
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}
body.essay .section--hero {
  padding-top: 8rem;
  padding-bottom: 1.25rem;
}
body.essay .section .text {
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  padding-right: 0;
}
body.essay .section .text p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 0.85rem;
}
body.essay .section .text p + p { margin-top: 0; }
body.essay .display {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  margin: 0 0 0.9rem;
}
body.essay .section--hero .display {
  font-size: clamp(3rem, 6vw, 5.2rem);
}
body.essay .eyebrow { margin-bottom: 0.9rem; }
body.essay .callout {
  font-size: 1.1rem !important;
  margin-top: 1.1rem !important;
}
body.essay .section + .section::before { display: none; }

/* The polaroid frame — overrides the regular fixed stage */
body.essay .stage {
  position: fixed;
  top: 9rem;
  right: clamp(2.5rem, 5vw, 5rem);
  width: clamp(220px, 18vw, 280px);
  height: auto;
  background: #fbf6ec;
  padding: 14px 14px 70px;
  border-radius: 3px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 30px 60px -20px rgba(31,61,43,0.4),
    0 0 0 1px rgba(31,61,43,0.06);
  transform: rotate(-2.2deg);
  z-index: 4;
  pointer-events: none;
}
/* a little washi-tape strip at the top for the scrapbook feel */
body.essay .stage::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 64px;
  height: 18px;
  background: rgba(224,168,46,0.35);
  border-top: 1px solid rgba(224,168,46,0.55);
  border-bottom: 1px solid rgba(224,168,46,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
body.essay .stage-grain { display: none; }

/* Soft fade so body text dissolves into the page background
   where it would otherwise scroll under the polaroid photo.
   The fade ends just below the bottom edge of the polaroid, so
   text below that invisible line appears at full strength. */
body.essay::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(300px, 26vw, 420px);
  height: clamp(520px, 46rem, 660px);
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg) 82%,
    rgba(245, 239, 230, 0) 100%
  );
  pointer-events: none;
  z-index: 3; /* below .stage (4) and .topnav (20), above body text */
}

body.essay .stage-mask {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
  background: var(--ink);
}

body.essay .layer {
  position: absolute;
  inset: 0;
  margin: 0;
}
body.essay .layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.essay .frame-caption {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0 0.6rem;
  line-height: 1;
}

/* Inline figures inside essay sections — hidden on desktop where the
   fixed polaroid stage handles the imagery. Shown on narrow widths so
   mobile readers actually see the photos in-flow with the copy. */
body.essay .essay-figure { display: none; }

@media (max-width: 900px) {
  body.essay main { padding-right: 0; }
  body.essay .stage { display: none; }
  body.essay::after { display: none; }
  body.essay .section { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  body.essay .section--hero { padding-top: 6.5rem; padding-bottom: 1rem; }

  body.essay .essay-figure {
    display: block;
    max-width: 720px;
    margin: 1.5rem auto 0;
    padding: 0;
  }
  body.essay .essay-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow:
      0 20px 40px -20px rgba(31,61,43,0.35),
      0 0 0 1px rgba(31,61,43,0.08);
  }
  body.essay .essay-figure figcaption {
    margin-top: 0.65rem;
    text-align: center;
    font-family: var(--hand);
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
  }
  body.essay .section--hero .essay-figure { margin-top: 1.1rem; }
}

/* ============================================================
   .article layout  —  used by river.html
   Standard tourist-magazine article. Centered text column with
   images placed inline at natural break points. No fixed stage,
   no cross-fade — figures flow with the page.
   ============================================================ */

body.article .stage { display: none; }

body.article main {
  position: relative;
  z-index: 2;
  padding: 7rem 0 4rem;
  background: var(--bg);
}

body.article .article-col {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

body.article .article-col h1,
body.article .article-col h2,
body.article .article-col h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 350;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
body.article .article-col h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 0.96;
  margin: 0 0 1rem;
}
body.article .article-col h1 em {
  font-style: italic;
  color: var(--sun);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
body.article .article-col h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  margin: 3rem 0 0.9rem;
}
body.article .article-col h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 1.6rem 0 0.5rem;
  color: var(--river);
}
body.article .article-col p {
  font-size: 1.07rem;
  line-height: 1.7;
  margin: 0 0 1.05rem;
  color: var(--ink-soft);
  max-width: none;
}
body.article .article-col p.lead {
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 1.4rem;
}
body.article .article-col .tagline {
  font-size: 1.18rem;
  color: var(--ink) !important;
  margin: 0 0 1.6rem !important;
}
body.article .article-col blockquote.callout {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.45;
  border-left: 3px solid var(--sun);
  padding: 0.3rem 0 0.3rem 1.4rem;
  margin: 2rem 0;
  color: var(--ink);
  background: none;
}
body.article .article-col ul.ticks {
  margin: 0.8rem 0 1.4rem;
}
body.article .article-col ul.ticks li {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}
body.article .article-col ul.ticks li strong { color: var(--ink); }

body.article .section-rule {
  width: 60px;
  height: 1px;
  background: var(--rule);
  margin: 3rem auto;
  border: none;
}

/* Figure treatments — placed as direct children of main, between .article-col blocks */
body.article main > figure {
  margin: 2.6rem 0;
}
body.article main > figure img {
  width: 100%;
  height: auto;
  display: block;
}
body.article main > figure figcaption {
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--river);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.75rem;
  text-align: center;
  padding: 0 var(--gutter);
}

/* full-bleed — edge to edge of viewport */
body.article main > .figure-full img {
  width: 100vw;
  max-height: 78vh;
  object-fit: cover;
}

/* wide — between the text column and full-bleed */
body.article main > .figure-wide {
  width: min(1080px, 92vw);
  margin-left: auto;
  margin-right: auto;
}
body.article main > .figure-wide img {
  max-height: 70vh;
  object-fit: cover;
  border-radius: 0.4rem;
}

/* pair — two images side by side */
body.article main > .figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: min(1080px, 92vw);
  margin-left: auto;
  margin-right: auto;
}
body.article main > .figure-pair img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.4rem;
}

/* a quote section with a full-bleed image background */
body.article main > .quote-block {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  background-size: cover;
  background-position: center;
  color: var(--bg);
  text-align: center;
  margin: 3rem 0;
  overflow: hidden;
}
body.article main > .quote-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,30,20,0.30), rgba(15,30,20,0.72));
}
body.article main > .quote-block blockquote {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.35;
  max-width: 740px;
  margin: 0 auto;
  color: #fff;
}
body.article main > .quote-block cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--hand);
  font-size: 1.4rem;
  color: var(--gold);
  font-style: normal;
}

@media (max-width: 700px) {
  body.article main { padding-top: 5.5rem; }
  body.article main > .figure-pair {
    grid-template-columns: 1fr;
  }
  body.article main > .figure-full img { max-height: 60vh; }
}

/* ============================================================
   .booking layout  —  used by book.html
   Single-screen tourist booking dashboard:
     left  = quick facts + included list
     right = sticky contact card with WhatsApp / Call buttons
   FAQ + location below the fold (optional scroll)
   ============================================================ */

body.booking .stage { display: none; }

body.booking main {
  position: relative;
  z-index: 2;
  padding: 6.5rem var(--gutter) 4rem;
  background: var(--bg);
}

body.booking .booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* ----- LEFT COLUMN ----- */
body.booking .booking-main h1 {
  font-family: var(--display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--ink);
}
body.booking .booking-main h1 em {
  font-style: italic;
  color: var(--sun);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
body.booking .booking-main .lead {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2rem;
}

body.booking .quick-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 2.4rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
body.booking .fact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.55rem;
  border-right: 1px solid var(--rule);
}
body.booking .fact:last-child { border-right: none; }
body.booking .fact-icon {
  width: 22px;
  height: 22px;
  color: var(--sun);
  margin-bottom: 0.25rem;
}
body.booking .fact-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  margin: 0;
}
body.booking .fact-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

body.booking .included {
  margin-top: 0;
}
body.booking .included h2 {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  margin: 0 0 1rem;
}
body.booking .included ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.5rem;
}
body.booking .included li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.4;
}
body.booking .included li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.95rem;
  height: 0.55rem;
  border-left: 2px solid var(--sun);
  border-bottom: 2px solid var(--sun);
  transform: rotate(-45deg);
}

/* ----- RIGHT COLUMN — sticky booking card ----- */
body.booking .book-card {
  position: sticky;
  top: 6rem;
  align-self: start;
  background: #fbf6ec;
  border: 1px solid var(--rule);
  border-radius: 0.9rem;
  padding: 1.8rem 1.6rem 1.7rem;
  box-shadow:
    0 30px 60px -28px rgba(31,61,43,0.4),
    0 0 0 1px rgba(31,61,43,0.04);
}
body.booking .book-card-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
body.booking .book-card-title {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
body.booking .book-card-rate {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
}
body.booking .book-card-rate strong { color: var(--ink); }

body.booking .book-card .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.95rem 1rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
}
body.booking .book-card .btn:last-of-type { margin-bottom: 0; }

body.booking .book-card-reply {
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
body.booking .book-card-reply::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4caf50;
  box-shadow: 0 0 0 4px rgba(76,175,80,0.18);
}

body.booking .book-card-divider {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 1.4rem 0 1rem;
}
body.booking .book-card-send-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  margin: 0 0 0.55rem;
  text-align: center;
}
body.booking .book-card-send {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
body.booking .book-card-send li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
body.booking .book-card-send li::before {
  content: '›';
  color: var(--sun);
  font-weight: 700;
}

/* ----- BELOW THE FOLD — FAQ + location ----- */
body.booking .below {
  max-width: 1200px;
  margin: 5rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
body.booking .below h2 {
  font-family: var(--display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 1.4rem;
  color: var(--ink);
}

body.booking .faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
body.booking .faq details:first-of-type { border-top: 1px solid var(--rule); }
body.booking .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0.2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 240ms;
}
body.booking .faq summary::-webkit-details-marker { display: none; }
body.booking .faq summary:hover { color: var(--sun); }
body.booking .faq summary::after {
  content: '';
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 280ms ease, border-color 280ms;
  flex-shrink: 0;
}
body.booking .faq details[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--sun);
}
body.booking .faq details[open] summary { color: var(--sun); }
body.booking .faq details p {
  margin: 0 0 1.2rem;
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

body.booking .location {
  position: relative;
}
body.booking .location-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
body.booking .location-card {
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 50px -28px rgba(31,61,43,0.3);
  background: #fbf6ec;
}
body.booking .location-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
body.booking .location-card iframe {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
  background: var(--ink);
}
body.booking .location-card .location-meta {
  padding: 1.1rem 1.2rem;
  background: #fbf6ec;
}
body.booking .location-card .location-meta .eyebrow {
  margin-bottom: 0.4rem;
}
body.booking .location-card .location-meta p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}

/* ----- MOBILE  ≤900px ----- */
@media (max-width: 900px) {
  body.booking main { padding-top: 5.5rem; }

  body.booking .booking-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* booking card moves up between the lead and the quick facts */
  body.booking .book-card {
    order: 1;
    position: static;
    margin: 0.5rem 0 0.5rem;
  }
  body.booking .booking-main { order: 2; }

  body.booking .quick-facts {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
  }
  body.booking .fact {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0.4rem;
  }
  body.booking .fact:nth-last-child(-n+2) { border-bottom: none; }

  body.booking .included ul {
    grid-template-columns: 1fr;
  }

  body.booking .below {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }
}