/* Bella Casa — Robertson, Western Cape
   Implementation of the "Bella Casa.dc.html" Claude Design prototype.
   Values (colours, type scale, clamps, radii, spacing) are taken from the design as-is.

   Box model note: the prototype rendered without a box-sizing reset, so its
   `max-width:1080px` containers sized their *content* box to 1080px with the
   gutters added outside. This file uses border-box everywhere and reproduces
   that geometry exactly via `calc(1080px + 2 * var(--gutter))`. */

/* Marcellus and Karla, self-hosted. Both are SIL Open Font License 1.1,
   which permits this. Served from our own origin so the critical path
   never touches fonts.googleapis.com or fonts.gstatic.com. */

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400-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: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-600-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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/karla-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: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/karla-700-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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/karla-700-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: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-400-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;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus-400-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;
}

/* TAN Grandeur, the brand display face, self-hosted like the others. It is the
   face the logo is drawn in, so the headings and the mark now agree.

   The file carries two cmap entries added at build time: U+2011 mapped onto the
   hyphen and U+00A0 onto the space. Neither was in the original, and five
   headings use a non-breaking hyphen ("self-catering", "Wi-Fi") — without them
   those words fall back mid-word to Marcellus, which is very visible. The
   characters keep their non-breaking behaviour; only the drawing comes from
   this font. See tools/build-fonts.py. */
@font-face {
  font-family: 'TAN Grandeur';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/tan-grandeur-400.woff2) format('woff2');
}

:root {
  /* Surfaces */
  --bg:            #faf6ef;
  --bg-band:       #f2ebdf;
  --card:          #ffffff;
  --cream:         #fdf9f2;

  /* Ink */
  --ink:           #2d2823;
  --ink-soft:      #514a42;
  --ink-card:      #3d372f;
  --muted:         #6b6258;
  --muted-light:   #8a8175;

  /* Accent */
  --accent:        #2e6b66;
  --accent-dark:   #1f4a47;
  --accent-deep:   #22504c;

  /* Sampled from the glazed splashback tiles in the hero photograph
     (highlights excluded). 7.55:1 against --cream. */
  --tile:          #2d5762;
  --tile-dark:     #23444d;

  /* Map (from the Robertson Wine Valley artboard) */
  --ochre:         #b0722e;
  --map-tar:       #7fb5ae;
  --map-gravel:    #c2ad84;
  --map-river:     #8fb4c9;

  /* Lines */
  --hairline:      rgba(45, 40, 35, .08);
  --hairline-soft: rgba(45, 40, 35, .07);
  --accent-line:   rgba(46, 107, 102, .35);

  /* Rhythm */
  --gutter:        clamp(20px, 5vw, 48px);
  --pad-y:         clamp(56px, 10vw, 104px);
  --pad-y-sm:      clamp(56px, 10vw, 96px);
  --nav-offset:    76px;

  /* Radii */
  --r-sm:          12px;
  --r-md:          14px;
  --r-lg:          16px;

  /* Type */
  --serif:         'Marcellus', Georgia, 'Times New Roman', serif;
  /* The brand display face, on the hero wordmark alone. It is a hairline
     display cut with ink spanning 1.93em, so at body-adjacent heading sizes it
     costs more readability than it buys. Everything else is Marcellus. */
  --display:       'TAN Grandeur', 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:          'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------- base ---- */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a       { color: var(--accent); }
a:hover { color: var(--accent-dark); }

img { display: block; }

/* <picture> wraps the images for webp fallback; it must not become a box
   of its own, or the grid and flex parents would lay out the wrapper
   instead of the image. */
picture { display: contents; }

/* display:contents promotes the <source> elements to children of that grid or
   flex parent too, and `source` is not display:none in the UA stylesheet — so
   each one becomes a zero-height item that eats a track. That is what pushed
   the location image into column two and its text onto a second row. */
picture > source { display: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: var(--cream);
}

/* ----------------------------------------------------------- container ---- */

.wrap {
  max-width: calc(1080px + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band { background: var(--bg-band); }

/* Every in-page target has to clear the sticky nav. #host and #contact were
   missing, so a jump to either put the heading behind it; #faq and
   #getting-here are linked from the FAQ and the location copy. */
#about, #gallery, #amenities, #sleeping, #location, #nearby, #good-to-know,
#book, #host, #contact, #faq, #getting-here {
  scroll-margin-top: var(--nav-offset);
}

/* --------------------------------------------------------- shared type ---- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 42px);
  line-height: 1.15;
  color: var(--ink);
}

.h2--pretty { text-wrap: pretty; }

.prose {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Stacked body paragraphs need a gap. margin: 0 above is deliberate — a lone
   .prose sits on the section's own rhythm — so the space goes between
   siblings only. The About section has run two paragraphs together since it
   was written; the privacy page has five such pairs. */
.prose + .prose { margin-top: 16px; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.section-head--lg { margin-bottom: 32px; }

/* ---------------------------------------------------------------- nav ----- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 246, 239, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 14px var(--gutter);
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Height-driven: the SVG keeps its own ratio, so the nav row does not shift
   when the mark is swapped. Roughly the cap height the text logo had. */
.nav__logo-img {
  display: block;
  height: 26px;
  width: auto;
}

/* The footer mark is a link home, like the one in the nav. The anchor carries
   the block and the centring so the image keeps its own box. */
.book__logo-link {
  display: block;
  width: min(240px, 62vw);
  margin: 0 auto 26px;
}

.book__logo-link:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 6px;
  border-radius: 4px;
}

.book__logo {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .nav__logo-img { height: 22px; }
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-left: auto;
  align-items: center;
}

.nav__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--accent); }

.nav__book {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--tile);
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
}

.nav__book:hover,
.nav__book:focus-visible {
  background: var(--tile-dark);
  color: var(--cream);
}

/* --------------------------------------------------------------- hero ----- */

.hero { position: relative; }

.hero__img {
  width: 100%;
  height: clamp(440px, 72vh, 660px);
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Just the soft wash over the whole photograph now. The backing that has to
     track the text lives on .hero__inner, where the text is. */
  background: linear-gradient(180deg,
    rgba(24, 30, 29, .20) 0%,
    rgba(24, 30, 29, .22) 45%,
    rgba(24, 30, 29, .34) 100%);
}

.hero__inner {
  /* Height comes from the content, not from the hero box. That is what lets
     the backing below track the text instead of guessing at it. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px clamp(48px, 9vh, 84px);
  gap: 18px;
}

/* The dark backing behind the hero text. It is a child of the text block, so it
   is exactly as tall as the text plus a fade above it, whatever the text does.

   It used to be part of .hero__scrim, anchored in pixels from the bottom of the
   hero. That meant any change to the height of the stack slid the top line into
   a lighter band without anything failing loudly: widening the gap between the
   booking buttons did it once, and switching the heading face to TAN Grandeur
   did it again, taking the eyebrow to 1.59:1. Tying it to the content removes
   the class of bug rather than re-tuning the numbers a third time. */
.hero__inner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -76px;
  /* Stops measured in px FROM THE TOP, so the fade lives entirely in the 76px
     of overhang above the first line and everything from the text down is
     solid. Expressed as percentages it faded out exactly where the first line
     sits, which is how the eyebrow ended up at 1.56:1. */
  background: linear-gradient(180deg,
    rgba(16, 22, 21, 0) 0,
    rgba(16, 22, 21, .58) 30px,
    rgba(16, 22, 21, .84) 58px,
    rgba(16, 22, 21, .90) 76px,
    rgba(16, 22, 21, .90) 100%);
  pointer-events: none;
}

/* Lift the text above its own backing. */
.hero__inner > * { position: relative; }

.hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 76px);
  line-height: 1.50;
  color: var(--cream);
}

.hero__lede {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 20px);
  color: rgba(253, 249, 242, .92);
  max-width: 520px;
  line-height: 1.5;
}

/* Booking buttons — opaque "liquid glass" pills.
   Each fill is a gradient mesh: several radial blobs layered over a diagonal
   base, with a specular sheen as the topmost background layer. The sheen is a
   background layer rather than a pseudo-element so it always paints under the
   label. No borders, and no translucency — the glass reads through highlight
   and depth, not transparency. */

/* Four booking platforms, every pill the same size. Grid rather than flex
   because equal columns are what make them match: flex sizes each pill to
   its own label, so "Book on Vrbo" came out 69px narrower than "Book on
   Booking.com". 1fr columns in a shrink-to-fit track take the width of the
   widest label and give it to all four.

   Two up by default, four across only once there is room for four equal
   pills at the widest label — below that a single row would squeeze them.
   Row gap stays the load-bearing one: 12px between two 51px targets is a
   mis-tap that sends someone to the wrong booking site. */
.cta-pair {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* The width has to be definite or the fr columns fall back to sizing by
     their own contents, which puts Airbnb and Booking.com at different
     widths again. 100% with a cap gives the track a number to divide. */
  width: 100%;
  max-width: 520px;
  justify-content: center;
  gap: 24px 12px;
}

.cta-pair > .btn { min-width: 0; }

@media (min-width: 1100px) {
  .cta-pair {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1060px;
  }
}

/* Below 600px a 2x2 cell is narrower than "BOOK ON BOOKING.COM" (249px), so
   the verb goes and the platform name carries the pill. aria-label keeps the
   full phrase for screen readers. */
@media (max-width: 599px) {
  .btn__verb { display: none; }
}

.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 17px 32px;
  border: none;
  border-radius: 38px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 10px 26px rgba(14, 32, 38, .30),
    0 2px 5px rgba(14, 32, 38, .22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Has to sit after .btn, not before it: same specificity, so the base rule
   would otherwise win on source order and the pill keeps its 32px padding.
   At 320px a 2x2 cell is 130px and the label needs 142px at that padding. */
@media (max-width: 380px) {
  .btn {
    padding-left: 12px;
    padding-right: 12px;
    letter-spacing: .06em;
  }
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  filter: saturate(112%) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 14px 32px rgba(14, 32, 38, .34),
    0 3px 7px rgba(14, 32, 38, .24);
}

/* Deep teal glass — primary over the hero photograph */
.btn--deep {
  color: var(--cream);
  background-color: #2d5762;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(85% 120% at 14% 8%, rgba(122, 190, 199, .75) 0%, rgba(122, 190, 199, 0) 60%),
    radial-gradient(75% 110% at 86% 6%, rgba(58, 142, 134, .62) 0%, rgba(58, 142, 134, 0) 58%),
    radial-gradient(90% 130% at 72% 104%, rgba(14, 44, 52, .85) 0%, rgba(14, 44, 52, 0) 62%),
    radial-gradient(70% 100% at 4% 96%, rgba(21, 66, 74, .70) 0%, rgba(21, 66, 74, 0) 60%),
    linear-gradient(135deg, #37727e 0%, #2d5762 48%, #22434c 100%);
}

/* Warm cream glass — reads as the bright peer on both the photo and the band */
.btn--light {
  color: var(--accent-deep);
  background-color: #f8f2e7;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(85% 120% at 12% 10%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(80% 115% at 88% 8%, rgba(223, 239, 236, .90) 0%, rgba(223, 239, 236, 0) 55%),
    radial-gradient(95% 130% at 76% 102%, rgba(216, 199, 172, .85) 0%, rgba(216, 199, 172, 0) 60%),
    linear-gradient(135deg, #fefbf6 0%, #f5ecdd 55%, #e9d7bf 100%);
}

/* Mid teal glass — the peer on the dark booking band, lifted clear of it */
.btn--mid {
  color: var(--cream);
  background-color: #356b76;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .09) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(85% 120% at 14% 8%, rgba(146, 205, 212, .78) 0%, rgba(146, 205, 212, 0) 60%),
    radial-gradient(78% 112% at 88% 4%, rgba(74, 163, 152, .58) 0%, rgba(74, 163, 152, 0) 56%),
    radial-gradient(92% 132% at 74% 104%, rgba(18, 54, 62, .82) 0%, rgba(18, 54, 62, 0) 62%),
    linear-gradient(135deg, #43828f 0%, #356b76 50%, #27505b 100%);
}

/* Warm sand glass — the third peer on the dark booking band. It has to sit
   between the cream and the teal without reading as a faded version of
   either, so it takes its own hue rather than a tint of --light. */
.btn--sand {
  color: #4a3a22;
  background-color: #e8d6b4;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(85% 120% at 12% 10%, rgba(255, 249, 235, .92) 0%, rgba(255, 249, 235, 0) 58%),
    radial-gradient(80% 115% at 88% 8%, rgba(240, 214, 170, .88) 0%, rgba(240, 214, 170, 0) 55%),
    radial-gradient(95% 130% at 76% 102%, rgba(176, 141, 90, .80) 0%, rgba(176, 141, 90, 0) 60%),
    linear-gradient(135deg, #f6e8cc 0%, #e8d6b4 55%, #d2b483 100%);
}

/* Muted sage glass — the fourth peer. With four platforms the row runs out
   of clearly separated warm faces, so this one goes cool: it is the only
   green in the set, which is what keeps it apart from the sand beside it. */
.btn--sage {
  color: #29372a;
  background-color: #bccdb4;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(85% 120% at 12% 10%, rgba(240, 247, 234, .90) 0%, rgba(240, 247, 234, 0) 58%),
    radial-gradient(80% 115% at 88% 8%, rgba(200, 219, 194, .88) 0%, rgba(200, 219, 194, 0) 55%),
    radial-gradient(95% 130% at 76% 102%, rgba(126, 150, 116, .80) 0%, rgba(126, 150, 116, 0) 60%),
    linear-gradient(135deg, #d8e4cf 0%, #bccdb4 55%, #9db092 100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover,
  .btn:focus-visible { transform: none; }
}

/* -------------------------------------------------------------- facts ----- */

.facts {
  list-style: none;
  margin: 0;
  background: var(--tile);
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 4vw, 44px);
  padding: 18px var(--gutter);
  font-size: 14px;
  letter-spacing: .04em;
}

.facts__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.facts__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(253, 249, 242, .5);
}

/* -------------------------------------------------------------- about ----- */

#about {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
}

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}

.about__figure figcaption {
  font-size: 13px;
  color: var(--muted-light);
  letter-spacing: .03em;
}

/* ------------------------------------------------------------ gallery ----- */

#gallery { padding-bottom: var(--pad-y); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.gallery__item {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery__item--wide { grid-column: 1 / -1; }

.gallery__item .gallery__img { transition: transform .45s ease; }
.gallery__item:hover .gallery__img,
.gallery__item:focus-visible .gallery__img { transform: scale(1.03); }

/* height:auto is load-bearing: the width/height attributes on the <img> are
   presentational hints for the CSS width and height properties, and a fixed
   height silently wins over aspect-ratio. Same for the three rules below. */
.gallery__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}

.gallery__img--wide { aspect-ratio: 21 / 9; }

/* A tall room shot cropped to the 4:3 tile centres on the ceiling; bias the
   crop down so the subject stays in frame. The full photo opens in the viewer. */
.gallery__img--low { object-position: center 72%; }

/* ---------------------------------------------------------- amenities ----- */

.wrap--amenities {
  padding-top: var(--pad-y-sm);
  padding-bottom: var(--pad-y-sm);
}

/* Thirteen amenities in one list is a wall to scan. Three named groups give
   the eye somewhere to land and the document real h3s instead of a flat run. */
.amenities__group {
  margin: clamp(26px, 3vw, 34px) 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  color: var(--ink);
}

.amenities__group:first-of-type { margin-top: 4px; }

.amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.amenity {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ink-card);
}

/* ----------------------------------------------------- sleeping/cards ----- */

#sleeping, #good-to-know {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.room {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.room img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.room__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.room__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
}

.room__meta {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

/* ----------------------------------------------------------- location ----- */

.wrap--location {
  padding-top: var(--pad-y-sm);
  padding-bottom: var(--pad-y-sm);
}

.location {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.location__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  max-height: 520px;
}

.location__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ------------------------------------------------------- things to do ----- */

/* No bottom padding: #good-to-know supplies the gap below, the same way
   #gallery sits under #about. */
#nearby { padding-top: var(--pad-y); }

.nearby__lede { max-width: 62ch; }

.map {
  margin: clamp(30px, 4vw, 44px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: clamp(18px, 3vw, 30px) 0 0;
  overflow: hidden;
}

.map__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(18px, 3vw, 34px);
}

.map__rule {
  flex: 1;
  height: 1px;
  background: rgba(45, 40, 35, .25);
}

.map__title {
  font-family: var(--serif);
  font-size: clamp(19px, 3vw, 34px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}

.map__badge {
  background: var(--ochre);
  color: var(--cream);
  font-size: clamp(8px, 1.1vw, 10.5px);
  font-weight: 700;
  letter-spacing: .42em;
  text-transform: uppercase;
  padding: 5px 18px 5px 22px;
  border-radius: 2px;
}

/* The artboard is landscape and label-dense. Rather than shrink it to
   illegibility on a phone, it scrolls sideways in its own frame — the page
   itself never scrolls horizontally. */
.map__frame {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px clamp(10px, 2vw, 22px) 0;
}

.map__svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.map__legend {
  list-style: none;
  margin: 0;
  width: 100%;
  background: var(--accent-deep);
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px clamp(16px, 3vw, 30px);
  padding: 13px clamp(18px, 3vw, 34px);
}

.map__key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.map__swatch {
  width: 26px;
  flex: none;
}

.map__swatch--route  { height: 4px; border-radius: 2px; background: var(--ochre); }
.map__swatch--tar    { height: 4px; border-radius: 2px; background: var(--map-tar); }
.map__swatch--gravel { height: 0; border-top: 3px dashed var(--map-gravel); }
.map__swatch--rail   { height: 2px; background: repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 8px); }
.map__swatch--river  { height: 3px; border-radius: 2px; background: var(--map-river); }
.map__swatch--cellar { width: 12px; height: 8px; border-radius: 2px; background: var(--accent); border: 1px solid var(--cream); }

.map__caption {
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--muted-light);
}

.nearby__region {
  margin: clamp(30px, 4vw, 44px) 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}

.places {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.place {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}

.place__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.place__name:hover,
.place__name:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.place__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* The closing write-up in Things to do. Same measure as the section lede, so
   the prose and the farm lists read as one column. */
.nearby__prose {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.nearby__prose + .nearby__prose { margin-top: 14px; }

/* The write-up and a preview of the bureau's site, side by side. The text
   keeps the wider column; the panel is secondary. */
.r62 {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(22px, 3.5vw, 40px);
  align-items: start;
}

/* The grid already sets the measure here, so the 62ch cap would only fight it. */
.r62__text .nearby__prose { max-width: none; }

.r62__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--card);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(45, 40, 35, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.r62__card:hover,
.r62__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(45, 40, 35, .1);
}

.r62__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.r62__head { display: block; }

.r62__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.r62__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.22;
  color: var(--ink);
}

/* Their own section names, so the panel says what is behind the link. */
.r62__sections { display: flex; flex-wrap: wrap; gap: 8px; }

.r62__section {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-band);
  font-size: 13px;
  color: var(--ink-card);
}

.r62__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tile);
}

.r62__card:hover .r62__go svg { transform: translateX(3px); }
.r62__go svg { transition: transform .2s ease; }

/* A screenshot dropped into the card takes the top slot at its own ratio. */
.r62__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}

@media (max-width: 860px) {
  .r62 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .r62__card, .r62__go svg { transition: none; }
  .r62__card:hover, .r62__card:focus-visible { transform: none; }
}

.nearby__link {
  font-weight: 600;
  color: var(--tile);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 87, 98, .35);
  /* Padded so the inline target clears 24px, as in the address block. */
  padding: 4px 0 2px;
}

.nearby__link:hover,
.nearby__link:focus-visible { border-bottom-color: var(--tile); }

.nearby__foot {
  margin: clamp(30px, 4vw, 44px) 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* ------------------------------------------------------- good to know ----- */

/* ---------------------------------------------------- address and map ---- */

.addr {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}

.addr__lines {
  margin: 0;
  font-style: normal;
  display: grid;
  gap: 2px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.addr__street {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

.addr__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.addr__link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tile);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 87, 98, .35);
  /* 20px of text is under the 24px minimum target, so pad it out. */
  padding: 5px 0 3px;
}

.addr__link:hover,
.addr__link:focus-visible {
  border-bottom-color: var(--tile);
}

.gmap {
  margin: 26px 0 0;
}

/* The embed is a fixed-ratio box so the iframe cannot collapse before it
   loads, and the border-radius needs the overflow clip to bite. */
.gmap__frame {
  /* Fixed height rather than aspect-ratio: a max-height on a ratio box shrinks
     the width too, and the map should stay full bleed. */
  height: clamp(240px, 34vw, 420px);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  /* Shows through until Google's frame paints, so it reads as a panel rather
     than a broken element on a slow connection. */
  background: #efe9dd;
}

.gmap__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The click-to-load facade. It fills the frame exactly, so swapping it for
   the iframe changes nothing about the layout. */
.gmap__facade {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}

.gmap__sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Not a map of anywhere — a suggestion of streets, so the panel reads as a
     map waiting to load rather than a blank rectangle. */
  opacity: .9;
}

.gmap__prompt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.gmap__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(35, 68, 77, .22);
  transition: background .18s ease, transform .18s ease;
}

.gmap__note {
  font-size: 13px;
  color: var(--ink-soft);
  /* Says where the click goes before it goes there. */
  background: rgba(253, 249, 242, .82);
  padding: 3px 10px;
  border-radius: 999px;
}

.gmap__facade:hover .gmap__cta,
.gmap__facade:focus-visible .gmap__cta {
  background: var(--tile-dark);
  transform: translateY(-1px);
}

.gmap__facade:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .gmap__cta { transition: none; }
  .gmap__facade:hover .gmap__cta,
  .gmap__facade:focus-visible .gmap__cta { transform: none; }
}

.gmap__cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------------------------------- getting here steps ---- */

.steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
  max-width: 62ch;
}

.steps__item {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}

.steps__item strong {
  font-weight: 600;
  color: var(--ink);
}

.getting-here__cards {
  margin-top: 30px;
}

.note {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}

.note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------- host ----- */

.host {
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--pad-y);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.host__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 34px;
}

.host__title {
  font-size: clamp(26px, 4vw, 34px);
  line-height: normal; /* the design's host heading sets no line-height */
}

/* Two hosts sit side by side on anything wider than a phone and stack below
   it. The avatar keeps its own rule so a single host would still render. */
.hosts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 48px;
}

.hosts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Fixed rather than min-width: content sizing made the two cards differ by
     3px purely because one phone number's digits are narrower than the
     other's. 190px clears the widest label and does not move when a number
     changes. Narrow screens wrap to one per row. */
  flex: 0 0 190px;
}

.hosts__name {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
  margin-top: 4px;
}

.hosts__role {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hosts__contact {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.hosts__contact a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 87, 98, .3);
  padding-bottom: 1px;
}

.hosts__contact a:hover,
.hosts__contact a:focus-visible { border-bottom-color: var(--accent-deep); }

.host__lede {
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.host__email {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.host__email a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 87, 98, .3);
  padding-bottom: 1px;
}

.host__email a:hover,
.host__email a:focus-visible { border-bottom-color: var(--accent-deep); }

.host__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------- book ----- */

.book {
  background: var(--accent-deep);
  color: var(--cream);
}

.book__inner {
  /* Wider than the 720px reading column the rest of the page uses, because
     four equal "Book on ..." pills need ~1035px to sit on one line. The
     prose is capped separately, so the column widens without the lede or
     the title going with it. */
  max-width: calc(1040px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(64px, 12vw, 110px) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.book__title {
  margin: 0;
  max-width: 720px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 46px);
  line-height: 1.15;
  text-wrap: pretty;
}

.book__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(253, 249, 242, .8);
  max-width: 440px;
}

.book__updated {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(253, 249, 242, .42);
}

/* The footer carried no navigation at all, so the only way back up was the
   browser. It doubles as the About and Contact entry points a crawler looks
   for when it is judging whether a site says who is behind it. */
.book__nav {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  max-width: 720px;
}

.book__nav a {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(253, 249, 242, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 249, 242, .22);
  padding-bottom: 2px;
}

.book__nav a:hover,
.book__nav a:focus-visible {
  color: var(--cream);
  border-bottom-color: rgba(253, 249, 242, .7);
}

.book__contact {
  margin: 22px 0 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(253, 249, 242, .72);
}

.book__place {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(253, 249, 242, .55);
}

/* ----------------------------------------------------------- lightbox ---- */

.lb {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: hidden;
}

.lb::backdrop { background: rgba(20, 26, 28, .93); }

.lb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 9vh, 88px) clamp(60px, 10vw, 104px);
}

.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}

.lb__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 3vh, 26px);
  margin: 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: 14px;
  letter-spacing: .03em;
  color: rgba(253, 249, 242, .82);
}

.lb__count {
  color: rgba(253, 249, 242, .5);
  font-variant-numeric: tabular-nums;
}

.lb__btn,
.lb__close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--cream);
  background: rgba(253, 249, 242, .12);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .2s ease;
}

.lb__btn:hover,
.lb__close:hover,
.lb__btn:focus-visible,
.lb__close:focus-visible { background: rgba(253, 249, 242, .26); }

.lb__btn {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}

.lb__btn--prev { left: clamp(8px, 2vw, 24px); }
.lb__btn--next { right: clamp(8px, 2vw, 24px); }

.lb__close {
  top: clamp(10px, 2vh, 22px);
  right: clamp(10px, 2vw, 24px);
  width: 44px;
  height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item .gallery__img,
  .lb__btn,
  .lb__close { transition: none; }
  .gallery__item:hover .gallery__img,
  .gallery__item:focus-visible .gallery__img { transform: none; }
}

/* ------------------------------------------------------- mobile book ----- */

/* The booking CTAs live at the top of the hero and again in the footer. On a
   phone that leaves the middle of a long page with nothing to act on, and
   both sit outside the thumb zone. This bar is phone-only and additive — the
   desktop layout is untouched. */

.bookbar { display: none; }

@media (max-width: 700px) {
  .bookbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 246, 239, .93);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hairline);
  }

  .bookbar__btn {
    /* Three platforms share the bar, so the widest label decides the type
       size: "BOOKING.COM" has to fit a third of a 320px screen without
       wrapping, which is what the reduced tracking and padding buy. The
       46px floor is the tap target and is not negotiable. */
    /* Four labels fit one row from about 340px up. Narrower than that they
       cannot: "BOOKING.COM" alone wants ~109px, and a quarter of a 320px
       screen is 68px. Below the breakpoint they go 2x2 instead of being
       squeezed until the label wraps inside its own pill. */
    flex: 1 1 auto;
    min-width: 72px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: none;
    border-radius: 38px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .45),
      0 4px 14px rgba(14, 32, 38, .22);
  }

  .bookbar__btn--deep {
    color: var(--cream);
    background-color: #2d5762;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, 0) 60%),
      linear-gradient(135deg, #37727e 0%, #2d5762 50%, #22434c 100%);
  }

  .bookbar__btn--light {
    color: var(--accent-deep);
    background-color: #f8f2e7;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(135deg, #fefbf6 0%, #f5ecdd 55%, #e9d7bf 100%);
  }

  .bookbar__btn--sand {
    color: #4a3a22;
    background-color: #e8d6b4;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(135deg, #f6e8cc 0%, #e8d6b4 55%, #d2b483 100%);
  }

  .bookbar__btn--sage {
    color: #29372a;
    background-color: #bccdb4;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .54) 0%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(135deg, #d8e4cf 0%, #bccdb4 55%, #9db092 100%);
  }

  /* Two up, two down — a balanced pair of rows beats one orphan button
     stretched across the full width. */
  @media (max-width: 340px) {
    .bookbar__btn { flex-basis: calc(50% - 4px); }
  }

  /* Reserve the bar's height inside the footer rather than on <body>: padding
     on the body would leave a cream strip below the dark band, visible through
     the bar's blur. */
  .book__inner { padding-bottom: calc(clamp(64px, 12vw, 110px) + 76px); }
}


/* ------------------------------------------------- fast facts ----- */

/* A definition list rather than a table: it is the same information the prose
   already carries, in the shape an extractor (or a guest skimming) can read
   without parsing sentences. */
.facts-table__title {
  margin: clamp(28px, 3.2vw, 38px) 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}

.facts-table {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.facts-table__row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.facts-table dt {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: center;
}

.facts-table dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .facts-table__row { grid-template-columns: 1fr; padding: 12px 0; }
}

/* =========================================================== area guide ===
   The "Things to do near Robertson" page. It reuses the home page's sections,
   cards and place lists; these are the few pieces it needs of its own. */

.wrap--tight {
  padding-top: var(--pad-y-sm);
  padding-bottom: var(--pad-y-sm);
}

.guide-head {
  padding-top: calc(var(--nav-offset) + clamp(28px, 5vw, 56px));
  padding-bottom: clamp(10px, 2vw, 20px);
}

.crumbs {
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--muted);
}

.crumbs a { color: var(--tile); text-decoration: none; border-bottom: 1px solid rgba(45, 87, 98, .3); }
.crumbs a:hover { border-bottom-color: var(--tile); }
.crumbs span[aria-hidden] { margin: 0 6px; color: var(--muted-light); }

/* The guide's h1 sits on the page background rather than over a photograph,
   so it does not want the hero title's weight or its scrim-facing colour. */
.h1--guide {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}