/* ==================================================================
   Meru Mbega Lodge
   Forest-edge palette: canopy dark, thatch gold, bone paper.
   Type: Archivo (headings) · IBM Plex Sans (text) · IBM Plex Mono
   (measurements and labels) · Tanzaniah (the lodge's own brush hand).
   ================================================================== */

@font-face {
  font-family: "Tanzaniah";
  src: url("../fonts/Tanzaniah.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Colour */
  --ink: #0b110d;
  --bark: #141e17;
  --moss: #223327;
  --thatch: #d9a441;
  --thatch-soft: #e8bd68;
  --bone: #f4f0e6;
  --sand: #e8e1d1;
  --haze: #9fab9d;
  --earth: #1c241e;
  --earth-soft: #5c6660;

  /* Type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --head: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --brush: "Tanzaniah", "Archivo", cursive;

  --h1: clamp(2.6rem, 6.2vw, 5rem);
  --h2: clamp(1.85rem, 3.6vw, 3rem);
  --h3: clamp(1.15rem, 1.7vw, 1.45rem);

  /* Space */
  --wrap: 1220px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4.5rem, 9vw, 8rem);
  --r: 4px;
  --ridge-h: clamp(2.5rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- base --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--thatch); color: var(--ink); }
:focus-visible { outline: 2px solid var(--thatch); outline-offset: 3px; border-radius: 2px; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--thatch); color: var(--ink);
  padding: 0.6rem 1.1rem; font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { transform: translate(-50%, 0); }

/* --- type --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; }

.tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--thatch);
  margin-bottom: 1.1rem;
}
.section--bone .tag { color: #8a6a22; }

.quote {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--thatch);
  margin-block: 0.7rem 1rem;
}
.section--bone .quote { color: #8a6a22; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s, gap 0.25s var(--ease);
}
.link:hover { color: var(--thatch); gap: 0.85rem; }
.ico { width: 1em; height: 1em; }

/* --- layout ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--band); position: relative; }
.section--ink { background: var(--ink); color: var(--bone); }
.section--bone { background: var(--bone); color: var(--earth); }
.section--bone p { color: var(--earth-soft); }
.section--bone h1, .section--bone h2, .section--bone h3 { color: var(--earth); }
.section--ink p { color: #c3ccc1; }

/* Two content blocks in one section always keep a full gap between them. */
.section > .wrap + .wrap { margin-top: clamp(3rem, 6vw, 5rem); }
.section > .wrap + .center { margin-top: clamp(2.5rem, 5vw, 4rem); }

.center { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.row--center { justify-content: center; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.stack { display: grid; gap: clamp(3rem, 5.5vw, 5rem); }

.two { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.two--top { align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; } }

.head-row {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .head-row { grid-template-columns: 1.1fr 0.9fr; }
  .head-row__note { padding-bottom: 0.4rem; }
}
.head-row__note { font-size: 1.05rem; }

/* --- photographs -------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
}
/* The tint is on the image itself, so a caption never sits on a dark block. */
.frame img { width: 100%; height: 100%; object-fit: cover; background: var(--moss); }
/* A framed photograph with a caption lets the caption sit outside the crop. */
.frame:has(figcaption) { overflow: visible; }
.frame:has(figcaption) img { height: auto; border-radius: var(--r); }

/* Captions are asides: quiet, italic, and the same colour as the text. */
figure figcaption {
  margin-top: 0.65rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0;
  color: inherit;
  opacity: 0.55;
}
.section--bone figure figcaption { color: var(--earth); }

/* Text columns breathe. */
.xrow__copy p + p,
.two > div p + p { margin-top: 1.05rem; }
.two > div h2 + p { margin-top: 1.15rem; }

/* --- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 0.65rem 1.05rem; font-size: 0.72rem; }
.btn--block { display: flex; width: 100%; }
.btn--thatch { background: var(--thatch); color: #241a06; }
.btn--thatch:hover { background: var(--thatch-soft); }
.btn--ghost { border-color: rgb(244 240 230 / 0.35); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone); background: rgb(244 240 230 / 0.08); }
.btn--line { border-color: rgb(28 36 30 / 0.3); color: var(--earth); }
.btn--line:hover { border-color: var(--earth); background: rgb(28 36 30 / 0.05); }
.section--ink .btn--line { border-color: rgb(244 240 230 / 0.3); color: var(--bone); }
.section--ink .btn--line:hover { border-color: var(--bone); background: rgb(244 240 230 / 0.08); }

/* --- treeline transition ------------------------------------------ */
.ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--ridge-h);
  background-color: var(--ink);
  pointer-events: none;
  -webkit-mask:
    url("../brand/divider-left.svg") no-repeat left bottom / auto 100%,
    url("../brand/divider-right.svg") no-repeat right bottom / auto 96.4%,
    url("../brand/divider-middle.svg") repeat-x left bottom / auto 22.78%;
  mask:
    url("../brand/divider-left.svg") no-repeat left bottom / auto 100%,
    url("../brand/divider-right.svg") no-repeat right bottom / auto 96.4%,
    url("../brand/divider-middle.svg") repeat-x left bottom / auto 22.78%;
}
/* The treeline overlaps the section above, so it needs room to land in. */
.has-ridge { padding-top: calc(var(--band) - var(--ridge-h) * 0.4); }

/* --- top bar ------------------------------------------------------ */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgb(11 17 13 / 0.97);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  border-bottom: 1px solid rgb(244 240 230 / 0.1);
}
.topbar.is-stuck {
  background: rgb(11 17 13 / 0.94);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.topbar__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.85rem var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.brand { flex: none; }
/* The bar carries the lodge's own wordmark, drawn by hand and already in
   bone, so it sits on the dark bar without any recolouring. */
.brand {
  display: flex;
  align-items: center;
  line-height: 1;
  transition: opacity 0.25s;
}
.brand__logo {
  display: block;
  width: auto;
  height: clamp(34px, 4.6vw, 46px);
  transition: opacity 0.25s;
}
.brand:hover .brand__logo { opacity: 0.78; }
@media (max-width: 380px) { .brand__logo { height: 30px; } }
.brand--drawer { padding-block: 0.25rem; }
.brand--drawer .brand__logo { height: clamp(34px, 9vw, 44px); }

.mainnav { display: none; margin-inline: auto; gap: clamp(1rem, 2.2vw, 1.9rem); }
@media (min-width: 1080px) { .mainnav { display: flex; } }
.mainnav a {
  position: relative;
  font-family: var(--head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(244 240 230 / 0.82);
  padding-block: 0.4rem;
  transition: color 0.25s;
  /* German labels are longer than English ones; "Über uns" must not break
     across two lines and push the bar out of shape. */
  white-space: nowrap;
}
.mainnav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--thatch);
  transition: width 0.3s var(--ease);
}
.mainnav a:hover { color: var(--bone); }
.mainnav a:hover::after,
.mainnav a[aria-current="page"]::after { width: 100%; }
.mainnav a[aria-current="page"] { color: var(--thatch); }

.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1080px) { .topbar__end { margin-left: 0; } }
.topbar__end .btn { display: none; }
@media (min-width: 640px) { .topbar__end .btn { display: inline-flex; } }
/* The language switch shares this end of the bar, so the booking button has
   less room than it used to. It stays on one line rather than wrapping and
   making the whole bar taller — in German especially, where the label is
   "Verfügbarkeit prüfen". */
.topbar__cta { white-space: nowrap; }

/* --- language switch ---------------------------------------------- */
/* EN and DE side by side, the one you are reading lit up. Each half links
   to the same page in the other language, so nobody loses their place. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgb(244 240 230 / 0.22);
  border-radius: var(--r);
  background: rgb(244 240 230 / 0.05);
}
.lang__opt {
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.55rem 0.6rem;
  border-radius: calc(var(--r) - 2px);
  color: rgb(244 240 230 / 0.6);
  transition: color 0.25s, background-color 0.25s;
}
.lang__opt:hover { color: var(--bone); }
.lang__opt[aria-current="true"] { background: var(--thatch); color: #241a06; }
.lang__opt[aria-current="true"]:hover { color: #241a06; }

/* In the drawer it sits above the booking button, full width, because on a
   phone that menu is the only place with room for it. */
.lang--drawer { margin-bottom: 0.75rem; }
.lang--drawer .lang__opt {
  flex: 1;
  text-align: center;
  padding-block: 0.8rem;
  font-size: 0.82rem;
}

.burger {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid rgb(244 240 230 / 0.25);
  border-radius: var(--r);
  transition: border-color 0.25s, background-color 0.25s;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--bone); }
.burger:hover { border-color: var(--thatch); background: rgb(217 164 65 / 0.1); }
@media (min-width: 1080px) { .burger { display: none; } }

/* --- drawer ------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--gut);
  border-bottom: 1px solid rgb(244 240 230 / 0.12);
}

.drawer__close { font-size: 2rem; line-height: 1; width: 44px; height: 44px; }
.drawer__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 2rem var(--gut);
  overflow-y: auto;
}
.drawer__nav a {
  font-family: var(--head);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  font-weight: 700;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.01em;
  padding-block: 0.35rem;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.2s;
}
.drawer.is-open .drawer__nav a,
.drawer.is-open .drawer__foot {
  animation: rise-in 0.45s var(--ease) forwards;
  animation-delay: calc(0.06s * var(--i));
}
.drawer__nav a:hover { color: var(--thatch); }
.drawer__foot {
  padding: 1.25rem var(--gut) 2rem;
  border-top: 1px solid rgb(244 240 230 / 0.12);
  opacity: 0;
  transform: translateY(14px);
}
.drawer__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--haze);
}
.drawer__quick a { border-bottom: 1px solid rgb(217 164 65 / 0.5); padding-bottom: 2px; }
.drawer__quick a:hover { color: var(--thatch); }

@keyframes rise-in { to { opacity: 1; transform: none; } }

/* --- landing hero: the photograph runs full width -------------------- */
.phead--home { min-height: min(92svh, 920px); }
/* A touch more shade behind the headline, since this photograph is bright. */
.phead--home::after {
  background:
    linear-gradient(to top, rgb(11 17 13 / 0.92) 4%, rgb(11 17 13 / 0.4) 58%, rgb(11 17 13 / 0.62)),
    linear-gradient(to right, rgb(11 17 13 / 0.45), rgb(11 17 13 / 0.05) 70%);
}
.phead--home h1 { font-size: var(--h1); line-height: 0.98; }
.phead--home .lede { max-width: 46ch; }
.hero__brush {
  font-family: var(--brush);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--thatch);
  margin-bottom: 0.4rem;
}
.hero__meta {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(244 240 230 / 0.72);
}

.js .phead--home .hero__brush,
.js .phead--home h1,
.js .phead--home .lede,
.js .phead--home .hero__meta {
  opacity: 0;
  animation: rise-in 0.9s var(--ease) forwards;
}
.js .phead--home .hero__brush { animation-delay: 0.15s; }
.js .phead--home h1 { animation-delay: 0.3s; }
.js .phead--home .lede { animation-delay: 0.5s; }
.js .phead--home .hero__meta { animation-delay: 0.65s; }
.js .phead--home .phead__media img { animation: hero-settle 1.8s var(--ease) both; }
@keyframes hero-settle { from { transform: scale(1.05); } to { transform: none; } }

/* --- availability form -------------------------------------------- */
.booknow { background: var(--bark); border-bottom: 1px solid rgb(244 240 230 / 0.08); }
.booknow__in { padding-block: 1.5rem; }
.bookbar {
  display: grid;
  gap: 0.75rem;
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .bookbar { grid-template-columns: 1fr 1fr auto auto; } }
.bookbar__field { display: grid; gap: 0.3rem; }
.bookbar__field label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze);
}
.bookbar input,
.bookbar select {
  min-height: 48px;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid rgb(244 240 230 / 0.2);
  border-radius: var(--r);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bookbar input:focus,
.bookbar select:focus {
  outline: none;
  border-color: var(--thatch);
  box-shadow: 0 0 0 3px rgb(217 164 65 / 0.25);
}
.bookbar input::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(0.4) saturate(3) hue-rotate(5deg); cursor: pointer; }
.bookbar .btn { min-height: 48px; }
.bookbar__field--guests select { min-width: 5.5rem; }
.booknow__note {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--haze);
}

/* --- mobile action bar -------------------------------------------- */
.actionbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1px;
  background: rgb(244 240 230 / 0.12);
  border-top: 1px solid rgb(244 240 230 / 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .actionbar { display: none; } }
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 56px;
  padding-inline: 0.9rem;
  background: var(--ink);
  font-family: var(--head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.actionbar .ico { width: 1.05rem; height: 1.05rem; }
@media (max-width: 430px) {
  .actionbar__book .ico { display: none; }
  .actionbar a { padding-inline: 0.7rem; }
}
.actionbar__book { background: var(--thatch); color: #241a06; }
body { padding-bottom: 56px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* --- fact rail ---------------------------------------------------- */
.rail {
  background: var(--bark);
  border-block: 1px solid rgb(217 164 65 / 0.25);
}
.rail__in {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgb(244 240 230 / 0.08);
  padding: 0;
  max-width: var(--wrap);
}
@media (min-width: 720px) { .rail__in { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .rail__in { grid-template-columns: repeat(6, 1fr); } }
.rail__item {
  background: var(--bark);
  padding: 1.5rem clamp(1rem, 2vw, 1.5rem);
}
.rail__item b {
  display: block;
  font-family: var(--head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bone);
}
.rail__item span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--haze);
}

/* --- intro -------------------------------------------------------- */
.intro { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 950px) { .intro { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.intro p + p { margin-top: 1.1rem; }
.intro__media { position: relative; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--small {
  position: absolute;
  right: -0.5rem;
  bottom: -2.5rem;
  width: clamp(120px, 26%, 190px);
  aspect-ratio: 1;
  border: 6px solid var(--bone);
}
@media (max-width: 949px) { .frame--small { display: none; } }

.seen {
  padding-top: 2rem;
  border-top: 1px solid rgb(28 36 30 / 0.15);
}
.seen ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  font-family: var(--head);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 600;
  color: var(--earth);
}
.seen li { position: relative; padding-left: 1.1rem; }
.seen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--thatch);
}

/* --- room cards --------------------------------------------------- */
.rcard { height: 100%; }
.rcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bark);
  border: 1px solid rgb(244 240 230 / 0.08);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.rcard__link:hover { border-color: rgb(217 164 65 / 0.55); transform: translateY(-4px); }
.rcard__media { aspect-ratio: 4 / 3; overflow: hidden; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.rcard__link:hover .rcard__media img { transform: scale(1.05); }
.rcard__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.rcard__body .tag { margin-bottom: 0.7rem; }
.rcard__sum { margin-top: 0.6rem; flex: 1; color: #c3ccc1; }
.rcard__foot {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(244 240 230 / 0.12);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--haze);
}
.rcard__foot b {
  font-family: var(--head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--thatch);
}
.rcard__foot .ico { margin-left: auto; align-self: center; color: var(--thatch); transition: transform 0.3s var(--ease); }
.rcard__link:hover .rcard__foot .ico { transform: translateX(3px); }

/* --- alternating rows --------------------------------------------- */
.xrow { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .xrow { grid-template-columns: 1fr 1fr; }
  .xrow--flip .xrow__media { order: 2; }
}
.xrow__media { aspect-ratio: 4 / 3; }
.xrow__copy p + p { margin-top: 1rem; }
.xrow__copy .tag { margin-bottom: 0.8rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.chips li {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgb(28 36 30 / 0.2);
  border-radius: 999px;
  color: var(--earth-soft);
}
.section--ink .chips li { border-color: rgb(244 240 230 / 0.2); color: var(--haze); }

.spec {
  margin-top: 1.5rem;
  border-top: 1px solid rgb(28 36 30 / 0.15);
}
.spec > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgb(28 36 30 / 0.12);
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--earth-soft);
}
.spec dd { font-family: var(--head); font-weight: 600; font-size: 0.9rem; }

/* --- facility cards ----------------------------------------------- */
.fcard { height: 100%; }
.fcard__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r);
  margin-bottom: 1rem;
}
.fcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.fcard:hover .fcard__media img { transform: scale(1.05); }
.fcard h3 { margin-bottom: 0.45rem; }
.fcard p { font-size: 0.93rem; }

/* --- rate tables --------------------------------------------------- */
.tables { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The tables are wider than a phone, so say so rather than hiding columns. */
@media (max-width: 720px) {
  .table-wrap::after {
    content: "Swipe the table sideways to see every column";
    display: block;
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--earth-soft);
  }
  .section--ink .table-wrap::after { color: var(--haze); }
}
.rates {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: right;
}
.rates caption {
  caption-side: bottom;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  text-align: left;
  color: var(--earth-soft);
}
.section--ink .rates caption { color: var(--haze); }
.rates th,
.rates td { padding: 0.85rem 1rem; }
.rates thead th:first-child { text-align: left; }
.rates thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--earth-soft);
  border-bottom: 1px solid rgb(28 36 30 / 0.25);
  white-space: nowrap;
}
.section--ink .rates thead th { color: var(--haze); border-bottom-color: rgb(244 240 230 / 0.25); }
.rates tbody th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
}
.rates tbody th span {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--earth-soft);
}
.section--ink .rates tbody th span { color: var(--haze); }
.rates td {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rates tbody tr { border-bottom: 1px solid rgb(28 36 30 / 0.12); }
.section--ink .rates tbody tr { border-bottom-color: rgb(244 240 230 / 0.12); }
.rates tbody tr:hover { background: rgb(217 164 65 / 0.07); }
.rates__group th {
  padding-top: 1.75rem;
  font-family: var(--head) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--earth);
}
.section--ink .rates__group th { color: var(--bone); }
.rates__group th span {
  display: inline;
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thatch);
}
.rates__group:hover { background: none; }

.pricetag {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--earth);
  border: 1px solid rgb(217 164 65 / 0.55);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.section--ink .pricetag { color: var(--bone); }

/* --- extras cards -------------------------------------------------- */
.xcard {
  height: 100%;
  border: 1px solid rgb(244 240 230 / 0.14);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.xcard--light { background: var(--sand); border-color: transparent; }
.xcard__price {
  font-family: var(--head);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--thatch);
}
.section--bone .xcard__price { color: #8a6a22; }
.xcard__unit {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haze);
  margin-top: 0.4rem;
}
.section--bone .xcard__unit { color: var(--earth-soft); }
.xcard h3 { margin: 1rem 0 0.4rem; }
.xcard p { font-size: 0.93rem; }

.terms { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
.terms li { position: relative; padding-left: 1.4rem; color: #c3ccc1; }
.terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--thatch);
}
.paylist { display: grid; gap: 1rem; }
.paylist > div { display: grid; gap: 0.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(244 240 230 / 0.12); }
.paylist dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--thatch);
}
.paylist dd { color: #c3ccc1; }

.phead__note {
  margin-top: 1.25rem;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--bone);
  border-left: 2px solid var(--thatch);
  padding-left: 0.8rem;
}
.phead__note b { font-family: var(--head); font-size: 1.05rem; }

.drawer__rate {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--haze);
}

/* --- notes, price cards ------------------------------------------- */
.note {
  height: 100%;
  background: var(--sand);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.section--ink .note { background: var(--bark); }
.note h3 { margin-bottom: 0.5rem; }
.note .tag { margin-bottom: 0.8rem; }

.pcard {
  height: 100%;
  background: var(--sand);
  border-radius: var(--r);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pcard h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 0.7rem; }
.pcard p { flex: 1; margin-bottom: 1.5rem; }

/* --- years (about) ------------------------------------------------ */
.years { display: grid; gap: 0; border-top: 1px solid rgb(244 240 230 / 0.15); }
.years li {
  display: grid;
  gap: 0.4rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgb(244 240 230 / 0.15);
}
@media (min-width: 700px) { .years li { grid-template-columns: 9rem 1fr; align-items: baseline; } }
.years b {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--thatch);
}
.years span { color: #c3ccc1; }

/* --- find / diagram ----------------------------------------------- */
.find { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .find { grid-template-columns: 1fr 1fr; } }
/* The map is a reference drawing, not a hero: it keeps to the text column. */
.wrap.roadmap { max-width: var(--wrap); }
.roadmap a,
.roadmap figcaption { display: block; max-width: min(680px, 100%); }
/* Beside a column of text the map simply fills its half. */
.roadmap--side a,
.roadmap--side figcaption { max-width: 100%; }
.roadmap img {
  width: 100%;
  border-radius: var(--r);
  background: var(--bone);
}
/* The map carries small print, so on a phone it opens full size in a tap. */
@media (max-width: 760px) {
  .roadmap figcaption::after {
    content: " Tap the map to open it full size.";
    opacity: 0.85;
  }
}
.find__map img,
.diagram img {
  width: 100%;
  background: var(--bone);
  border-radius: var(--r);
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.facts { margin-top: 1.5rem; display: grid; gap: 0.55rem; }
.facts li { display: flex; gap: 0.9rem; align-items: baseline; }
.facts b {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--thatch);
  min-width: 4.5rem;
}
.section--bone .facts b { color: #8a6a22; }
.facts span { color: var(--earth-soft); }

/* --- video -------------------------------------------------------- */
.video { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .video { grid-template-columns: 0.85fr 1.15fr; } }
.video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--bark); }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.3s, transform 0.6s var(--ease); }
.video__play:hover img { opacity: 0.9; transform: scale(1.03); }
.video__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 76px;
  height: 76px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--thatch);
  color: var(--ink);
  transition: transform 0.3s var(--ease);
}
.video__play:hover .video__btn { transform: scale(1.08); }
.video__btn svg { width: 30px; height: 30px; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- page head ---------------------------------------------------- */
.phead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(62svh, 620px);
  padding-block: 9rem clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media img,
.phead__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.phead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(11 17 13 / 0.93) 5%, rgb(11 17 13 / 0.45) 60%, rgb(11 17 13 / 0.65));
}
.phead__in { max-width: 54rem; }
.phead .lede { margin-top: 1.2rem; color: rgb(244 240 230 / 0.85); max-width: 52ch; }

/* --- booking band ------------------------------------------------- */
.band {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(11 17 13 / 0.78);
}
.band__in { max-width: 44rem; }
.band h2 { margin-bottom: 1rem; }
.band p { color: rgb(244 240 230 / 0.82); }

/* --- gallery ------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.filters button {
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgb(28 36 30 / 0.2);
  border-radius: 999px;
  color: var(--earth);
  transition: all 0.25s;
}
.filters button:hover { border-color: var(--earth); }
.filters button.is-on { background: var(--earth); border-color: var(--earth); color: var(--bone); }

/* --- gallery masonry ------------------------------------------------ */
/* Without JavaScript the photographs simply flow in columns. */
.shots { columns: 4 240px; column-gap: clamp(0.7rem, 1.4vw, 1rem); }
.shot {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: clamp(0.7rem, 1.4vw, 1rem);
  break-inside: avoid;
  padding: 0;
}
/* With JavaScript each photograph is placed, and moves when you filter. */
.js .shots { position: relative; columns: auto; column-gap: normal; }
.js .shot {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  filter: blur(10px);
  will-change: transform, width, height, opacity;
  transition:
    transform 0.7s var(--ease),
    width 0.7s var(--ease),
    height 0.7s var(--ease),
    opacity 0.6s var(--ease),
    filter 0.6s var(--ease);
}
.js .shot.is-placed { opacity: 1; filter: blur(0); }
.js .shot.is-gone { opacity: 0; pointer-events: none; }

.shot__box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--sand);
  box-shadow: 0 10px 40px -14px rgb(0 0 0 / 0.45);
  transition: transform 0.35s var(--ease);
}
.shot:hover .shot__box { transform: scale(0.97); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__cap {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgb(11 17 13 / 0.85), transparent);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s;
}
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap { opacity: 1; }
.shot[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(7 11 8 / 0.985);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig { display: grid; gap: 1rem; justify-items: center; min-width: 0; }
.lightbox__fig img {
  max-width: 100%;
  max-height: 78svh;
  width: auto;
  border-radius: var(--r);
}
.lightbox__fig figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--haze);
  text-align: center;
  margin: 0;
}
.lightbox__nav {
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
  border: 1px solid rgb(244 240 230 / 0.25);
  border-radius: 50%;
  color: var(--bone);
  transition: border-color 0.25s, background-color 0.25s;
}
.lightbox__nav:hover { border-color: var(--thatch); background: rgb(217 164 65 / 0.12); }
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  color: var(--bone);
}

/* --- contact & form ----------------------------------------------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 950px) { .contact { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.contact__side .tag { margin-top: 2.2rem; }
.contact__side .tag:first-child { margin-top: 0; }
.contacts { display: grid; gap: 0.9rem; }
.contacts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.contacts a:first-child {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.02rem;
  border-bottom: 1px solid rgb(217 164 65 / 0.5);
}
.contacts a:hover { color: #8a6a22; }
.section--ink .contacts a:hover { color: var(--thatch); }
.contacts span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--earth-soft);
}
.section--ink .contacts span { color: var(--haze); }
.wa {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgb(28 36 30 / 0.25);
  border-radius: 999px;
}
.wa:hover { border-color: var(--thatch); color: #8a6a22; }
address { font-style: normal; color: var(--earth-soft); }

.form, .sent {
  background: var(--sand);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.form h2, .sent h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.5rem; }
.form__hint { font-size: 0.92rem; margin-bottom: 1.75rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--earth-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bone);
  border: 1px solid rgb(28 36 30 / 0.18);
  border-radius: var(--r);
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--thatch);
  box-shadow: 0 0 0 3px rgb(217 164 65 / 0.25);
}
.field.is-bad input,
.field.is-bad select { border-color: #a3401f; }
.err { font-family: var(--mono); font-size: 0.7rem; color: #a3401f; }
.err:empty { display: none; }
.sent[hidden] { display: none; }
.sent .link { margin-top: 1.5rem; }
.map { height: 100%; min-height: 340px; border-radius: var(--r); overflow: hidden; }
.map iframe { width: 100%; height: 100%; min-height: 340px; filter: grayscale(0.25) contrast(1.05); }
.diagram { margin-top: 1.5rem; }
.paypal { font-family: var(--mono); font-size: 0.9rem; margin-block: 1rem; }
.paypal a { border-bottom: 1px solid rgb(217 164 65 / 0.6); }

.oops { min-height: 70svh; display: grid; place-content: center; text-align: center; }
.oops .tag { text-align: center; }

/* --- footer ------------------------------------------------------- */
.footer { position: relative; background: var(--ink); padding-top: clamp(3rem, 6vw, 5rem); }
.footer__in { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 800px) { .footer__in { grid-template-columns: 1.4fr 0.8fr 1.2fr; } }
/* The mark, painted cream, set to the width of the line of text below it. */
/* The mountain, the mbega and the name, exactly as drawn. The artwork
   carries its own bone keyline, which is what lets it read on the dark
   footer, so nothing here recolours or filters it. */
.footer__mark {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 1.25rem;
}
.footer__brand p { max-width: 34ch; color: var(--haze); font-size: 0.93rem; margin-bottom: 1.25rem; }
.footer__nav ul, .footer__contact ul { display: grid; gap: 0.7rem; }
.footer__nav a, .footer__contact a { color: rgb(244 240 230 / 0.85); transition: color 0.25s; }
.footer__nav a:hover, .footer__contact a:hover { color: var(--thatch); }
.footer__contact li { display: grid; gap: 0.15rem; }
.footer__contact span, .footer__nav span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--haze);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(244 240 230 / 0.1);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--haze);
}

/* --- scroll reveals ----------------------------------------------- */
.js .rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .rise { opacity: 1; transform: none; }
}

/* --- full-width view band ------------------------------------------ */
.viewband { position: relative; }
.viewband img { width: 100%; height: clamp(16rem, 46vw, 34rem); object-fit: cover; }
.viewband figcaption {
  position: absolute;
  right: var(--gut);
  bottom: 1rem;
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: rgb(11 17 13 / 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(244 240 230 / 0.9);
}

/* --- stacked reading blocks ---------------------------------------- */
/* Words first, at a comfortable measure; photographs underneath.      */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 68ch; }
.prose .lede { margin-top: 1.15rem; }
.prose p + p,
.prose ul + p { margin-top: 1.05rem; }
.prose h2 + p { margin-top: 1.15rem; }
.prose .row { margin-top: 1.75rem; }
.prose .facts { margin-top: 1.5rem; }

.mediarow {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 40%, 340px), 1fr));
}
.mediarow .frame img { aspect-ratio: 4 / 3; }

.wideshot { overflow: visible; }
.wideshot img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); }
@media (max-width: 700px) { .wideshot img { aspect-ratio: 3 / 2; } }

.diagram--wide { max-width: 44rem; }
.diagram--wide img { width: 100%; }
.section > .wrap.map { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- the header's booking button, held back while the hero shows one - */
.topbar__cta { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
body.cta-waiting .topbar__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}

/* --- the availability form inside the hero -------------------------- */
.bookbar--hero {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(244 240 230 / 0.15);
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.bookbar--hero .bookbar__field--guests { grid-column: 1; }
.bookbar--hero .btn { grid-column: 2; align-self: end; }
@media (max-width: 420px) {
  .bookbar--hero { grid-template-columns: 1fr; }
  .bookbar--hero .bookbar__field--guests,
  .bookbar--hero .btn { grid-column: 1; }
}
.hero__aside { margin-top: 1.5rem; }

/* The bottom bar on phones is a small utility strip, not a second banner:
   it stays put so booking is always one tap away. */

/* The story column: photographs stacked beside the text. */
.about__media { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: start; }
.about__media .frame img { aspect-ratio: 4 / 3; }

/* The parent company's seal, centred between the two footer lines. */
.footer__seal {
  height: 58px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.25s;
}
.footer__seal:hover { opacity: 1; }
@media (max-width: 640px) {
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__seal { order: -1; height: 56px; margin-bottom: 0.25rem; }
}

/* ==================================================================
   Consent
   Nothing from another company loads until the guest allows it, so the
   map and the film each need somewhere to say so, and the banner needs
   dressing in the lodge's colours instead of Klaro's mint green.
   ================================================================== */

/* --- the map, before permission ----------------------------------- */
.map { position: relative; }
.map__ask {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  min-height: 340px;
  padding: 2.5rem var(--gut);
  text-align: center;
  background: var(--bark);
}
.map__ask p { max-width: 46ch; color: #c3ccc1; font-size: 0.95rem; }
.map__note { font-family: var(--mono); font-size: 0.76rem; color: var(--haze); }
.map iframe { display: none; }
.map.is-allowed iframe { display: block; }
.map.is-allowed .map__ask { display: none; }

/* --- the film ------------------------------------------------------ */
/* The note sits over the still, so nobody presses play without knowing
   what pressing play loads. */
.video__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 2.5rem 1rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
  color: var(--bone);
  background: linear-gradient(to top, rgb(11 17 13 / 0.92), transparent);
  pointer-events: none;
}
.video__frame.is-allowed .video__note { display: none; }

/* --- footer: imprint, privacy, and the way back into the panel ----- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(244 240 230 / 0.1);
}
.footer__legal a,
.footer__prefs {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--haze);
  transition: color 0.25s;
}
.footer__legal a:hover,
.footer__prefs:hover { color: var(--thatch); }

/* --- the consent banner (Klaro) ------------------------------------ */
/* Klaro takes every colour from a custom property, so most of the theming
   is done by redefining those rather than by out-shouting its stylesheet.
   The rules below that are layout and type, which properties cannot reach.
   Klaro's own selectors run three and four classes deep, so these are
   deliberately specific — shorter ones silently lose. */
.klaro {
  --font-family: var(--sans);
  --title-font-family: var(--head);
  --font-size: 0.95rem;
  --border-radius: var(--r);

  --green1: var(--thatch);          /* accept button, links, switches on */
  --green2: var(--thatch-soft);
  --green3: var(--thatch-soft);
  --blue1: var(--thatch);

  --dark1: var(--ink);              /* the bar, and the panel behind it */
  --dark2: #2f3a31;                 /* secondary buttons and rules */
  --dark3: var(--haze);             /* the small print under each switch */
  --light1: var(--bone);            /* body text */
  --light2: rgb(244 240 230 / 0.16);
  --light3: var(--haze);
  --white2: #2f3a31;                /* a switch in the off position */
  --white3: var(--haze);            /* the knob on it */
  --button-text-color: var(--bone);
}

/* ---- the bar along the foot of the page ---------------------------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-top: 1px solid rgb(217 164 65 / 0.4);
  box-shadow: 0 -14px 44px rgb(0 0 0 / 0.55);
}
/* The bar spans the window, but its words line up with the rest of the
   page rather than stretching across the whole of a wide screen. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.35rem var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin: 0;
  flex: 1 1 32rem;
  max-width: 74ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c3ccc1;
}
/* The three controls travel together instead of the link drifting off. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
  flex: none;
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  gap: 0.6rem;
  margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn { margin: 0; }

@media (max-width: 720px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    width: 100%;
    justify-content: space-between;
  }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { flex: 1 1 auto; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn { flex: 1; }
}

/* ---- the panel behind "choose myself" ------------------------------ */
@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro { max-width: 660px; }
}
.klaro .cookie-modal .cm-modal .cm-header {
  padding: 1.5rem 1.6rem 1.15rem;
  border-bottom-color: rgb(244 240 230 / 0.14);
}
.klaro .cookie-modal .cm-modal .cm-header h1.title {
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  letter-spacing: -0.01em;
}
.klaro .cookie-modal .cm-modal .cm-body { padding: 1.35rem 1.6rem; }
.klaro .cookie-modal .cm-modal .cm-body > p {
  margin-top: 0;
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.klaro .cookie-modal .cm-modal .cm-footer {
  padding: 1.15rem 1.6rem 1.3rem;
  border-top-color: rgb(244 240 230 / 0.14);
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
/* Declining sits apart from the two ways of agreeing. */
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn { margin-right: 0; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cn-decline { margin-right: auto; }
/* On a phone three buttons cannot share a row without one falling awkwardly
   onto the next. They stack full width instead, in the order they are read:
   decline, save what you picked, allow everything. */
@media (max-width: 520px) {
  .klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .klaro .cookie-modal .cm-modal .cm-footer .cm-btn.cn-decline { margin-right: 0; }
}
/* Klaro links itself at the foot of the panel; the privacy policy is where
   this site says what it uses. Specific enough to beat Klaro's own
   ".klaro .cookie-modal p { display: block }", which is why it is this long. */
.klaro .cookie-modal .cm-modal .cm-footer p.cm-powered-by { display: none; }

/* ---- rows and switches --------------------------------------------- */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service { padding-block: 0.3rem; }
.klaro .cookie-modal .cm-modal .cm-body .cm-list-title {
  font-family: var(--head);
  font-size: 0.95em;
}
.klaro .cookie-modal .cm-modal .cm-body .cm-list-description { line-height: 1.55; }
.klaro .cookie-modal .cm-modal .cm-body .cm-caret {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--thatch);
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
/* An off switch reads as off, an on switch wears the lodge's gold. */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #2f3a31;
  box-shadow: none;
}
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before { background-color: var(--haze); }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { background-color: #241a06; }
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  box-shadow: 0 0 0 2px var(--thatch);
}

/* ---- buttons, cut from the same cloth as the site's own -------------- */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
/* Thatch is a light colour, so the filled button needs dark letters. */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success { color: #241a06; }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover { background-color: var(--thatch-soft); }
/* Only allowing is filled in. Declining, and saving a part-choice, are
   outlined — but declining stays exactly as easy to find as agreeing. */
.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background-color: transparent;
  border-color: rgb(244 240 230 / 0.4);
  color: var(--bone);
}
.klaro .cookie-modal .cm-btn.cn-decline:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover {
  background-color: rgb(244 240 230 / 0.1);
  border-color: var(--bone);
  color: var(--bone);
}