/* ==========================================================================
   GALKADAWALA — one day in a forest that grew back
   The page is a day: JS interpolates --bg / --ink / --accent between
   chapters as you scroll, dawn to night. Nothing here has a fixed
   background except the day itself.

   Type: Young Serif (display) · Alegreya (body) · IBM Plex Mono (field log)
         Caveat (pencil annotations)
   ========================================================================== */

:root {
  --bg: #e3e8db;
  --ink: #26331f;
  --accent: #6e7f5c;
  --firefly: #f2c86b;
  --display: "Fraunces", "Iowan Old Style", serif;
  --body: "Alegreya", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* the "hand" voice is the display face set in italic — one family fewer to
     load, and the annotations still read as an aside rather than body copy */
  --hand: "Fraunces", "Iowan Old Style", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: hidden;
  background-color: var(--bg);
}

/* paper texture: one watercolour sheet (Tones.jpg), used two ways.
   --night (0-1) is written continuously by the day-engine as it scrolls,
   so the crossfade between the two is driven by real interpolated
   opacity rather than a class snapping on and off — the same continuous
   value that already eases --bg/--ink/--accent between chapters. */
.grain, .texture {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.grain {
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.texture {
  background-image: url("../images/Tones.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* 0.34 ≈ the 0.49 baseline, cut by another 30% */
.texture--day   { mix-blend-mode: multiply; opacity: calc(0.34 * (1 - var(--night, 0))); }
/* screened-in for early dusk, then washed back out as the sky goes past
   18:45 and sinks toward true black — no visible paper once it's fully dark */
.texture--night { mix-blend-mode: screen;   opacity: calc(0.34 * var(--night, 0) * (1 - var(--darken, 0))); }

img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }

/* ---------- voices ---------- */
.stamp {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--accent);
  margin-bottom: 26px;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  margin-bottom: 40px;
  max-width: 16em;
}
.display--s { font-size: clamp(28px, 3.2vw, 44px); }
.display--big { font-size: clamp(44px, 7vw, 96px); max-width: none; }

.hand {
  font-family: var(--hand);
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: var(--accent);
}
figcaption.hand { margin-top: 10px; transform: rotate(-1.2deg); }

em { font-style: italic; }

/* ---------- organic image treatment: torn-paper edges ---------- */
/* Every content photo is torn like a print pulled off a stack. The hero
   banner and logos sit outside this rule on purpose — they're chrome,
   not part of the photo story. */
figure img { border-radius: 14px; }

.torn {
  display: block;
  border-radius: 0 !important;
  /* photos sit flat on the page: no drop shadow under the frame */
  filter: none;
}

/* photos sit level and straight-edged across the site; the tilt classes are
   kept only so the rise-in still runs, with no rotation */
.tilt-l.reveal, .tilt-r.reveal { transition-property: opacity, transform; }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ========== LOADER ========== */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: #101a12;
  color: #e4e6d2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
  pointer-events: none; /* never eat the first tap */
}
.loader.is-done { opacity: 0; visibility: hidden; }
/* the logo file is black ink on transparent; inverting it gives light ink on
   the dark loader, and the sepia nudge warms pure white toward the cream #e4e6d2 */
.loader__logo {
  width: clamp(180px, 26vw, 320px); height: auto;
  filter: invert(1) sepia(0.25) brightness(0.92);
}
@media (prefers-reduced-motion: no-preference) {
  .loader__logo { animation: loaderIn 1.2s ease both; }
  @keyframes loaderIn { from { opacity: 0; transform: translateY(6px); } }
}

/* ========== HEADER ========== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 4vw;
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
}
.header.is-solid::before { opacity: 1; }

/* ========== NOTICE ==========
   A client-editable message that sits under the header. Collapsed it is a slim
   pill; clicking drops the full message. Everything is drawn from the theme
   vars, so it tints along with the day cycle instead of fighting it. */
/* floats at the top-right, lined up with the header's right edge — the clock
   owns the bottom-right, so this keeps the two out of each other's way */
.notice {
  position: fixed; z-index: 490;
  top: 84px; right: 4vw;
  width: min(400px, 92vw);
  display: flex; flex-direction: column; align-items: flex-end;
}
.notice__bar { box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 14%, transparent); }
/* a slow drift so it reads as floating over the page, not pinned to it; it
   holds still while open so the message is steady to read */
@media (prefers-reduced-motion: no-preference) {
  .notice__bar { animation: noticeFloat 5s ease-in-out infinite; }
  .notice__bar[aria-expanded="true"] { animation: none; }
  @keyframes noticeFloat { 50% { transform: translateY(-4px); } }
}
.notice__bar {
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 100%;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--ink); text-align: left;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.notice__bar:hover { border-color: var(--accent); }
.notice__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice__chev {
  color: var(--accent); font-size: 11px; line-height: 1;
  transition: transform 0.3s ease;
}
.notice__bar[aria-expanded="true"] .notice__chev { transform: rotate(180deg); }

.notice__panel {
  width: 100%; margin-top: 8px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 16%, transparent);
}
.notice__body { font-size: 16px; line-height: 1.6; }
.notice__body p { margin-bottom: 12px; }
.notice__body p:last-child { margin-bottom: 0; }
.notice__cta {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
/* the panel animates open unless the visitor asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .notice__panel { animation: noticeDrop 0.32s ease both; }
  @keyframes noticeDrop { from { opacity: 0; transform: translateY(-8px); } }
}
@media (max-width: 700px) {
  /* clear of the header, which is taller on a phone than on a laptop */
  .notice { top: 96px; }
  .notice__bar { font-size: 11.5px; padding: 8px 14px; }
}
.header__brand img { height: 46px; transition: filter 0.6s; }
body.is-dark .header__brand img { filter: invert(1) brightness(1.5); }

.header__right { display: flex; align-items: center; gap: 34px; }

/* live 5-day forecast — fetched once on load from a keyless public API
   (Open-Meteo), rendered as one small glyph per day rather than numbers */
.header__weather { display: flex; align-items: center; gap: 14px; }
.header__weather .wx {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  opacity: 0.8; cursor: default;
}
.header__weather .wx__icon { font-size: 17px; line-height: 1; }
.header__weather .wx__day { text-transform: lowercase; }

.header__nav { display: flex; gap: 30px; }
.header__nav a {
  font-family: var(--mono); font-weight: 500;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: lowercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.header__nav a:hover { border-color: var(--ink); }

.header__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.header__burger span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform 0.4s var(--ease); }
body.is-dark .header__burger span { background: #e4e6d2; }
body.menu-open .header__burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .header__burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
body.menu-open .header__burger span { background: #e4e6d2 !important; }

.menu {
  position: fixed; inset: 0; z-index: 400;
  background: #101a12; color: #e4e6d2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 9vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
.menu__links a {
  display: flex; align-items: baseline; gap: 20px;
  font-family: var(--display);
  font-size: clamp(30px, 6.5vw, 46px);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(228, 230, 210, 0.12);
}
.menu__links a span { font-family: var(--mono); font-size: 13px; color: var(--firefly); }
.menu__foot { margin-top: 44px; font-family: var(--mono); font-size: 13px; line-height: 2; opacity: 0.7; }

/* ========== INTRO ==========
   Same treatment as .storyhead in Beginnings: the ink sketch runs the full
   width of the screen at its own aspect ratio, with the headline and copy
   following underneath rather than sitting on top of it. */
.intro { padding: 6vh 0 4vh; }
.intro__head { margin-bottom: 2vh; }
.intro__media figure { margin: 0; }
.intro__media img {
  width: 100%; display: block;
  /* the drawing is ink on pure white with no alpha channel, so multiply is what
     knocks the paper out: white x backdrop = backdrop, and only the linework
     survives. It also means the sketch takes on the page's own paper colour
     instead of sitting on a white card. */
  mix-blend-mode: multiply;
  /* fade the foot of the sketch into the page so it blends with the copy below */
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
/* same box model as .wrap so the headline lines up with everything else */
.intro__content { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.intro__body { max-width: 760px; }
.intro__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  margin: 0 0 32px;
}
.intro__text { font-size: 18px; line-height: 1.7; max-width: 62ch; margin-bottom: 32px; }
.intro__text p { margin-bottom: 20px; }
.intro__credo {
  font-family: var(--display); font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--accent);
  margin-top: 28px !important;
}

/* ========== HERO ========== */
.hero { padding: 0; }
.hero__media {
  height: 62svh; min-height: 380px;
  overflow: hidden;
  /* the body still tucks under the foot of the photo, but only far enough to
     overlap the faded tail of the mask — not the part that still has detail */
  margin-bottom: -7vh;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  mask-image: linear-gradient(180deg, #000 62%, transparent 99%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 99%);
}
/* two photos share the hero frame and cross-fade: stacked in the same box,
   only the .is-active one is opaque. The first is marked active in the HTML,
   so without JavaScript (or with reduced motion) the lake photo simply stays. */
.hero__media--fade { position: relative; }
.hero__media--fade img {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero__media--fade img.is-active { opacity: 1; }
/* the cattle photo is much taller than the frame; hold the crop on the herd
   rather than the empty sky */
.hero__img--cattle { object-position: 50% 62%; }
.hero__body { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.lede-close {
  font-family: var(--display); font-style: italic;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
  color: var(--accent); margin-top: 26px;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7.6vw, 104px);
  line-height: 1.02;
  /* the title is the last thing in the hero now, so its own bottom margin
     would only stack on top of the next chapter's leading space */
  margin: 26px 0 0;
}
/* clear the fixed birdsong pill in the lower-left */
.hero__body { padding-bottom: 34px; }
/* the chapter that follows the hero needs less of a run-up than one that
   follows a full section, since the hero already ends on open ground */
.hero + .chapter { padding-top: 7vh; }

/* ========== CHAPTERS ========== */
.chapter { padding: 9vh 0; }

.chapter--sketch { position: relative; }

/* the architect's sketch, given its own moment before the story starts —
   ink-on-paper (real alpha transparency, no box) running the full width of
   the screen, with the headline following underneath rather than beside it */
.storyhead { margin-bottom: 5vh; }
/* 56% of the full-bleed width it used to run at, centred so it reads as a
   plate on the page rather than a banner across it */
.storyhead__sketch { width: 56%; max-width: 980px; margin: 0 auto; display: block; }
/* same box model as .wrap (max-width + auto-center + 6vw padding) so the
   heading lines up with the body text below it at every viewport width */
.storyhead__text { max-width: 1180px; margin: 0 auto; padding: 1.5vh 6vw 0; }
.storyhead__quote {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45;
  margin-top: 26px; max-width: 22em;
  color: var(--ink); opacity: 0.85;
}

/* ========== SOUND TOGGLE ========== */
.soundwrap {
  position: fixed; left: 24px; bottom: 26px; z-index: 300;
  display: flex; align-items: center; gap: 8px;
}
.sound {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--mono);
  transition: border-color 0.3s;
}
.sound:hover { border-color: var(--ink); }
.sound__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.sound__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 12px; }
.sound__bars i {
  width: 2.5px; height: 4px;
  background: var(--accent);
  border-radius: 2px;
}
.sound.is-on .sound__bars i { animation: eq 0.9s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: 0.15s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: 0.3s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .sound.is-on .sound__bars i { animation: none; height: 9px; } }

/* ========== THE CLOCK (signature) ========== */
.clock {
  position: fixed; right: 26px; bottom: 30px; z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.clock__time { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; }
/* the track is the same hand-drawn pen stroke as the site's rules, turned
   upright; 8px wide so the wobble has room, with the dot riding its centre */
.clock__track {
  position: relative;
  width: 8px; height: 110px;
}
.clock__track::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 110' preserveAspectRatio='none'%3E%3Cpath d='M4.2 1C2.6 15 5.4 28 4 42S2.8 64 4.4 78 5.6 98 3.9 109' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 110' preserveAspectRatio='none'%3E%3Cpath d='M4.2 1C2.6 15 5.4 28 4 42S2.8 64 4.4 78 5.6 98 3.9 109' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.clock__track i {
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* a fixed-height slot sized to the longest word ("the forest that returned",
   146px): the clock is pinned by its bottom edge, so a word that changed
   length used to push the time and the track up and down with it */
.clock__word {
  height: 150px;
  font-family: var(--hand); font-style: italic; font-size: 14px;
  writing-mode: vertical-rl;
  color: var(--accent);
}
@media (max-width: 760px) { .clock { display: none; } }

/* dawn chorus */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vw; align-items: center; }
.split__text p { max-width: 34em; margin-bottom: 22px; }
.split__imgs { position: relative; padding-bottom: 40px; }
.split__imgs figure:first-child { width: 74%; }
.split__imgs--off {
  width: 52%;
  margin-left: auto;
  margin-top: -18%;
}
.split__imgs img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; }
.split__imgs--off img { aspect-ratio: 1/1; }

.fieldnote { margin: 30px 0; }
.fieldnote__head {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}
.fieldnote__data {
  font-family: var(--mono); font-size: 14.5px; line-height: 2.1;
  border-left: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  padding-left: 22px;
  white-space: pre;
}
/* illustrated specimens, spotted here — small enough to read as marginalia
   rather than competing with the real photography across the page */
.fieldnote__specimens {
  display: flex; align-items: flex-end; gap: 18px;
  margin-top: 20px; padding-left: 22px;
}
.fieldnote__specimens img {
  height: 64px; width: auto;
  filter: drop-shadow(0 6px 10px rgba(20, 26, 16, 0.22));
  transition: transform 0.3s var(--ease);
}
.fieldnote__specimens img:hover { transform: translateY(-3px) scale(1.06); }
.fieldnote__specimens .tilt-l { rotate: -8deg; }
.fieldnote__specimens .tilt-r { rotate: 7deg; }

/* yoga */
.yoga { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: center; }
.yoga__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.yoga__text p { max-width: 30em; margin-bottom: 20px; }

/* walking */
.walkgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  margin: 20px auto 70px;
  align-items: start;
}
.walkgrid figure img { width: 100%; object-fit: cover; }
.walkgrid__a { grid-column: 1 / span 5; }
.walkgrid__a img { aspect-ratio: 3/4; }
.walkgrid__b { grid-column: 6 / span 7; }
.walkgrid__b img { aspect-ratio: 16/9.5; }
.walkgrid__c { grid-column: 6 / span 5; margin-top: -12%; }
.walkgrid__c img { aspect-ratio: 16/10; }

.timetable { max-width: 780px; }
.timetable__t { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.timetable__t td {
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  vertical-align: baseline;
}
.timetable__t td:first-child {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
  width: 110px; color: var(--accent);
}
.timetable__note { margin-top: 18px; font-style: italic; font-size: 15.5px; opacity: 0.75; }

/* story */
.story { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 6vw; align-items: center; }
.story__lede {
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.35;
  margin-bottom: 30px;
}
.story__text > p { max-width: 34em; margin-bottom: 22px; }
.story__dates { margin: 36px 0; }
.story__dates div {
  display: grid; grid-template-columns: 92px 1fr; gap: 20px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.story__dates dt { font-family: var(--mono); font-size: 15px; color: var(--accent); }
.story__dates dd { font-size: 16px; }
.story__creed {
  font-family: var(--hand); font-style: italic; font-size: 19px; line-height: 1.45;
  color: var(--accent);
  max-width: 24em;
}
.story__imgs { display: flex; flex-direction: column; gap: 44px; }
.story__imgs img { width: 100%; object-fit: cover; }
.story__imgs figure:nth-child(1) { width: 88%; }
.story__imgs figure:nth-child(1) img { aspect-ratio: 4/2.8; }
.story__after { width: 100%; margin-left: auto; margin-top: -12px; }
.story__after img { aspect-ratio: 4/3.7; }

/* dusk */
.split--dusk { align-items: center; }
.split__solo img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }
/* the closing line of a section — same role as .story__creed, so same setting:
   a touch larger than body copy, tighter leading, italic */
.split__quiet {
  font-family: var(--display); font-style: italic;
  font-size: 19px; line-height: 1.45;
  color: var(--accent); opacity: 0.9;
  max-width: 24em;
}

/* dinner */
.dinner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6vw; align-items: center; }
.dinner__text p { max-width: 30em; margin-bottom: 20px; }
.dinner__img img { width: 100%; aspect-ratio: 4/4.2; object-fit: cover; }
.dinner__hand { font-size: 23px; }
.dinner__note { margin-top: 18px; font-style: italic; opacity: 0.8; }

/* night / fireflies */
.night { position: relative; padding-top: 2vh; padding-bottom: 12vh; }
/* the sunset quote stands alone as its own chapter, so it carries its own
   vertical rhythm instead of inheriting the open-kitchen section's */
.night--dusk { padding-top: 6vh; padding-bottom: 3vh; }
.night--dusk .night__inner { padding-bottom: 0; }
#kitchen { padding-top: 7vh; }
/* a fixed, full-viewport layer rather than one section's canvas, so fireflies
   drift for the whole night stretch of the scroll and fade with --night
   rather than switching on/off at one chapter's edges */
.night__canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.night__inner { position: relative; z-index: 2; text-align: center; padding-bottom: 9vh; }
.night__quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 2.3vw, 31px);
  line-height: 1.4;
  max-width: 30em;
  margin: 0 auto;
}
.night__src { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; opacity: 0.7; }

/* rooms */
.rooms__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  margin-bottom: 52px;
}
.rooms__intro { max-width: 40em; font-size: 17.5px; }

/* travelling times — kept as written, one line each */
.distances { margin-top: 9vh; max-width: 720px; }
.distances .fieldnote__head { margin-bottom: 22px; }
.distances__list { list-style: none; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.distances__list li {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  font-size: 16.5px;
}
.distances__btn {
  display: block; width: 100%;
  padding: 13px 2px;
  background: none; border: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: color 0.25s, padding-left 0.25s;
}
.distances__btn:hover { color: var(--accent); padding-left: 10px; }
.distances__btn.is-active {
  color: var(--accent); padding-left: 10px;
  box-shadow: inset 2px 0 0 var(--accent);
}
.distances__hint {
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: lowercase; color: var(--accent); opacity: 0.75;
}
.rooms__note {
  max-width: 44em; margin: 40px 0 0; text-align: left;
  font-family: var(--display); font-style: italic; font-size: 15px;
  /* tighter than body leading — this is a practical footnote, not running copy,
     so the two sentences should read as one small block */
  line-height: 1.5;
  color: var(--ink); opacity: 0.8;
}
/* ---------- room tabs: one bungalow at a time, full attention ---------- */
.roomtabs__nav {
  display: flex; gap: 8px 28px; flex-wrap: wrap;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  margin-bottom: 40px;
}
/* the stamp above sets the section's rhythm; give the tab row the same kind of
   breathing room so it reads as a control strip, not a fourth line of copy */
.rooms__head + .wrap .roomtabs__nav { margin-top: 8px; }
.roomtab {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  background: none; border: 0; color: var(--ink); opacity: 0.55;
  padding: 12px 2px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: opacity 0.25s, border-color 0.25s, color 0.25s;
}
.roomtab:hover { opacity: 0.85; }
.roomtab.is-active { opacity: 1; color: var(--accent); border-color: var(--accent); }

.roompane { display: none; grid-template-columns: 1.05fr 0.95fr; gap: 6vw; align-items: center; }
.roompane.is-active { display: grid; }
.roompane__text h3 { font-family: var(--display); font-weight: 400; font-size: 30px; margin-bottom: 14px; }
.roompane__text > p { font-size: 16px; opacity: 0.9; margin-bottom: 14px; max-width: 34em; }

/* the slider: several torn photos per bungalow, sliding left/right in the
   same frame rather than a static single hero shot */

@media (max-width: 900px) {
  .roompane { grid-template-columns: 1fr; gap: 30px; }
}

/* stay longer */
/* same 52px step from intro copy to content as A Home in the Forest */
.longer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 52px; }
.lcard figure { overflow: hidden; margin-bottom: 20px; }
.lcard img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; }

/* a picture-frame gallery: several images share one frame, crossfading in
   place rather than sitting side by side */
.lcard h3 { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.25; margin-bottom: 12px; }
.lcard h3 span { display: block; font-family: var(--hand); font-style: italic; font-size: 17px; color: var(--accent); }
.lcard p { font-size: 15.5px; }
.lcard__meta { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--accent); }

/* recognition */
.noticed { margin-bottom: 90px; max-width: 760px; }
.noticed__list { list-style: none; }
.noticed__list li {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.noticed__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  color: inherit; text-decoration: none;
}
.noticed__list b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.noticed__list span { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--accent); text-align: right; }

/* locator map: a real map of the region, line-work only (no fills), true
   alpha-fade at the edges — same principle as the sketch on the story page,
   so it reads as part of the paper rather than a widget dropped on top */
.locator { position: relative; height: 68vh; min-height: 460px; margin: 8vh 0; }
/* the small line of text above the lodge pin; a soft halo in the page colour
   keeps it legible where it crosses the map's linework */
.locator__pinlabel {
  font-family: var(--hand); font-style: italic; font-size: 15px;
  color: var(--ink); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg), 0 0 1px var(--bg);
}
#locatorMap {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 32%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 32%, transparent 78%);
}
.locator__label {
  position: absolute; z-index: 3; bottom: 8vh; left: 50%; transform: translateX(-50%);
  font-family: var(--hand); font-style: italic; font-size: 18px; color: var(--ink);
  text-align: center; pointer-events: none;
}
.maplibregl-marker { cursor: default; }

/* destinations map: same line-only treatment, but the fade is applied to the
   canvas alone so pins and labels near the edge stay fully legible */
.destmap { position: relative; height: 66vh; min-height: 420px; margin: 6vh 0 2vh; }
#destMap { position: absolute; inset: 0; }
#destMap .maplibregl-canvas {
  -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 66% 70% at 50% 50%, #000 55%, transparent 92%);
}
.pin {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); opacity: 0.45;
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
}
.pin--home {
  width: 13px; height: 13px;
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pin.is-active {
  background: #22c55e; opacity: 1;
  transform: scale(1.45);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28);
}
.pin__tip {
  position: absolute; left: 50%; top: -8px;
  transform: translate(-50%, -100%);
  font-family: var(--hand); font-style: italic; font-size: 14px; line-height: 1;
  color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.pin.is-active .pin__tip, .pin--home .pin__tip { opacity: 1; }

/* route readout — floats over the map once a place is chosen */
.routecard {
  position: absolute; z-index: 4; top: 26px; left: 26px;
  max-width: 300px;
  padding: 18px 22px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.routecard.is-in { opacity: 1; transform: none; }
.routecard__place {
  font-family: var(--display); font-size: 21px; line-height: 1.15;
  margin-bottom: 12px;
}
.routecard__legs {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  line-height: 1.9; color: var(--accent);
}
.routecard__time {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-family: var(--hand); font-style: italic; font-size: 15px; color: var(--ink); opacity: 0.85;
}
.routecard__wiki {
  margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  pointer-events: auto;
}
.routecard__wiki a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.routecard__wiki a:hover { border-color: var(--accent); }
@media (max-width: 760px) {
  .destmap { height: 52vh; min-height: 340px; }
  .routecard { top: 14px; left: 14px; right: 14px; max-width: none; padding: 14px 16px 12px; }
  .routecard__place { font-size: 18px; margin-bottom: 8px; }
  .routecard__legs { font-size: 11.5px; line-height: 1.75; }
  .routecard__time { font-size: 17px; }
}

/* contact */
.contact { padding-bottom: 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 30px; }
.contact__big {
  display: block;
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 26px);
  text-decoration: none;
  margin-bottom: 10px;
}
.contact__big:hover { color: var(--accent); }
.contact__addr { margin-top: 22px; font-size: 18px; opacity: 0.85; line-height: 1.65; max-width: 36em; }
.contact__line {
  margin-top: 14px; font-family: var(--display); font-size: 18px;
}
.contact__line a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.contact__line a:hover { color: var(--accent); }
.contact__links { list-style: none; }
/* start both columns' first lines on the same line: the address paragraph's
   top margin and the first link's top padding used to push them apart */
.contact__grid > div > .contact__addr:first-child { margin-top: 0; }
.contact__links li:first-child a { padding-top: 0; }
.contact__links a {
  display: block; padding: 11px 0;
  text-decoration: none;
  font-family: var(--mono); font-size: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transition: color 0.3s, padding-left 0.35s var(--ease);
}
.contact__links a:hover { color: var(--accent); padding-left: 8px; }

/* ---------- enquiry form ----------
   Same language as the rest of the contact page: mono labels, ruled lines
   rather than boxed fields, so it reads like a page of the lodge's notebook. */
.enquiry { margin-top: 72px; max-width: 760px; }
.enquiry__intro { font-size: 18px; line-height: 1.65; opacity: 0.85; margin: 10px 0 30px; max-width: 34em; }
.enquiry__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 28px; }
.enquiry__field { display: flex; flex-direction: column; gap: 8px; grid-column: span 3; }
.enquiry__field--third { grid-column: span 2; }
.enquiry__field--wide { grid-column: 1 / -1; }
.enquiry__field > span {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--accent);
}
.enquiry__field > span i { font-style: normal; opacity: 0.7; }

/* Each field is outlined by one hand-drawn pen line that wobbles and doesn't
   quite close where it began. It's an SVG stretched to the field
   (preserveAspectRatio none) with a non-scaling stroke, so the line stays the
   same weight on a short date box and the long message box. Colours are the
   contact chapter's own ink / accent, since that chapter never changes phase. */
.enquiry {
  --line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44' preserveAspectRatio='none'%3E%3Cpath d='M7 5C60 2 120 4.5 180 3S268 2 294 5.5C296.5 15 295.5 28 295 39C230 42 160 40 100 41.5S30 42 5.5 40C3.5 30 4.5 16 7 4.5L15 3.5' fill='none' stroke='%2326331f' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --line-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44' preserveAspectRatio='none'%3E%3Cpath d='M7 5C60 2 120 4.5 180 3S268 2 294 5.5C296.5 15 295.5 28 295 39C230 42 160 40 100 41.5S30 42 5.5 40C3.5 30 4.5 16 7 4.5L15 3.5' fill='none' stroke='%236e7f5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --line-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44' preserveAspectRatio='none'%3E%3Cpath d='M7 5C60 2 120 4.5 180 3S268 2 294 5.5C296.5 15 295.5 28 295 39C230 42 160 40 100 41.5S30 42 5.5 40C3.5 30 4.5 16 7 4.5L15 3.5' fill='none' stroke='%23a8431f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M6 6C80 2.5 160 5 220 3.5S286 3 295 6.5C297.5 40 294 80 296 114.5C220 117.5 140 115.5 80 117S20 118 5 115C3 80 5 40 6.5 5.5L16 4' fill='none' stroke='%2326331f' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --box-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M6 6C80 2.5 160 5 220 3.5S286 3 295 6.5C297.5 40 294 80 296 114.5C220 117.5 140 115.5 80 117S20 118 5 115C3 80 5 40 6.5 5.5L16 4' fill='none' stroke='%236e7f5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --box-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M6 6C80 2.5 160 5 220 3.5S286 3 295 6.5C297.5 40 294 80 296 114.5C220 117.5 140 115.5 80 117S20 118 5 115C3 80 5 40 6.5 5.5L16 4' fill='none' stroke='%23a8431f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.enquiry input, .enquiry textarea {
  font: inherit; font-size: 17px; color: var(--ink);
  border: 0; border-radius: 0;
  padding: 12px 16px;
  background: var(--line) center / 100% 100% no-repeat;
}
.enquiry textarea {
  resize: vertical; min-height: 130px; line-height: 1.6;
  background-image: var(--box);
}
.enquiry input:focus, .enquiry textarea:focus { outline: none; }
.enquiry input:focus { background-image: var(--line-on); }
.enquiry textarea:focus { background-image: var(--box-on); }
.enquiry input[aria-invalid="true"] { background-image: var(--line-bad); }
.enquiry textarea[aria-invalid="true"] { background-image: var(--box-bad); }
/* a field only a bot would fill; kept off-screen rather than display:none so
   it still exists in the form that bots read */
.enquiry__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__send {
  margin-top: 34px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 14px 30px; cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.enquiry__send:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.enquiry__send:disabled { opacity: 0.5; cursor: wait; }
.enquiry__status { margin-top: 18px; font-size: 16px; line-height: 1.55; min-height: 1.55em; }
.enquiry__status.is-error { color: #a8431f; }
.enquiry__status a { color: inherit; }
@media (max-width: 700px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__field, .enquiry__field--third { grid-column: 1 / -1; }
}
.way { margin-bottom: 24px; max-width: 34em; }
.way b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; margin-bottom: 6px; }
.way p { font-size: 15.5px; opacity: 0.85; }
.contact__eco { margin-top: 30px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; opacity: 0.6; }

.footer {
  margin-top: 100px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  padding: 40px 6vw 50px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  font-size: 14px;
}
.footer__logo { height: 42px; }

/* ========== HAND-DRAWN RULES ==========
   Every divider on the site is one wobbly pen stroke instead of a ruled line.
   The stroke is an SVG used as a mask on a pseudo-element whose colour comes
   from the theme vars, so the lines still tint with the day cycle. It stretches
   to the rule's length (preserveAspectRatio none) with a non-scaling stroke, so
   long rules wobble gently and short ones more tightly, like a real pen line.
   Link underlines and the active-tab marker stay straight on purpose: a wobble
   under words costs legibility, and the tab marker has to read as a state. */
:root {
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C40 2.6 80 5.4 120 4S200 2.8 240 4.4 330 5.6 370 3.8 450 2.7 490 4.3 570 5.2 599 3.9' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.distances__list, .distances__list li, .roomtabs__nav, .noticed__list li,
.contact__links a, .footer, .menu__links a, .routecard__time { position: relative; }
.distances__list { border-top: 0; }
.distances__list li, .roomtabs__nav, .noticed__list li, .contact__links a, .menu__links a { border-bottom: 0; }
.footer, .routecard__time { border-top: 0; }

.distances__list::before, .footer::before, .routecard__time::before,
.distances__list li::after, .roomtabs__nav::after, .noticed__list li::after,
.contact__links a::after, .menu__links a::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  -webkit-mask: var(--squiggle) center / 100% 100% no-repeat;
  mask: var(--squiggle) center / 100% 100% no-repeat;
  pointer-events: none;
}
.distances__list::before, .footer::before, .routecard__time::before { top: -3px; }
.distances__list li::after, .roomtabs__nav::after, .noticed__list li::after,
.contact__links a::after, .menu__links a::after { bottom: -3px; }
.routecard__time::before { background: color-mix(in srgb, var(--ink) 26%, transparent); }
/* the menu sits on its own dark ground, so its rules are light */
.menu__links a::after { background: rgba(228, 230, 210, 0.28); }

/* ========== HAND-DRAWN OUTLINES ==========
   The outlined controls get the same pen line as the rules: a pill for the
   buttons, a ring for the slider arrows, a soft card for the notice panel. Each
   outline is a masked pseudo-element coloured by --edge, so a control's own
   colour and its hover shade carry over from the plain borders they replace. */
:root {
  --pen-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath d='M32 3.2C72 1.8 130 3 170 4C190.5 4.8 197.8 15 197.3 25.2C196.8 36.5 188.5 46.6 169 46C129 47.6 70 45.8 30 46.6C11 46.2 2.4 36.8 2.8 24.6C3.2 12.8 12.2 4.3 36 3.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M20.5 2.4C31.5 2.1 37.9 9.8 37.6 20.2C37.3 31 29.8 37.9 19.6 37.6C9.2 37.3 2.2 30 2.4 19.4C2.6 9.4 9.6 2.7 23 2.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M10 4.5C80 2.5 160 5 230 3.5S292 4 295.5 10C297.5 40 294.5 80 296 110C294 116 287 117 280 116.5C200 118 120 116 60 117.5S12 117 5.5 112C3 80 5 40 4.5 12C5 6 8 4.8 18 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.enquiry__send, .sound, .notice__bar, .notice__panel { border-style: none; }
.enquiry__send, .notice__bar, .notice__panel { position: relative; }
.enquiry__send::before, .sound::before, .notice__bar::before,
.notice__panel::before {
  content: ""; position: absolute; inset: 0;
  background: var(--edge);
  -webkit-mask: var(--pen-pill) center / 100% 100% no-repeat;
  mask: var(--pen-pill) center / 100% 100% no-repeat;
  pointer-events: none;
  transition: background-color 0.3s;
}
.notice__panel::before { -webkit-mask-image: var(--pen-card); mask-image: var(--pen-card); }

.enquiry__send { --edge: var(--ink); }
.sound { --edge: color-mix(in srgb, var(--ink) 28%, transparent); }
.sound:hover { --edge: var(--ink); }
.notice__bar { --edge: color-mix(in srgb, var(--accent) 45%, transparent); }
.notice__bar:hover { --edge: var(--accent); }
.notice__panel { --edge: color-mix(in srgb, var(--accent) 35%, transparent); }
body.is-dark .footer__logo { filter: invert(1) brightness(1.5); }
.footer__credit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; opacity: 0.55; width: 100%; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .header__nav { display: none; }
  .header__weather { display: none; }
  .header__burger { display: flex; }
  .split, .yoga, .story, .dinner, .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .storyhead__text { padding: 1vh 6vw 0; }
  .longer { grid-template-columns: 1fr; gap: 56px; }
  .walkgrid { grid-template-columns: 1fr; gap: 30px; }
  .walkgrid__a, .walkgrid__b, .walkgrid__c { grid-column: auto; margin-top: 0; }
  .walkgrid__a img { aspect-ratio: 4/3; }
  .hero__media { margin-bottom: -8vh; }
  .chapter { padding: 7vh 0; }
  .story__imgs { flex-direction: column; }
  .dinner__img { order: -1; }
}

/* ========== COPY ABOVE A PAIR OF PHOTOS ==========
   Every chapter that pairs text with two photos (.split and .story) now reads
   top to bottom: the copy in two columns across the page, then the two photos
   underneath as an equal, level pair. This sits last so it outranks the older
   staggered/tilted layout rules above without having to unpick each of them. */
.split, .story { grid-template-columns: 1fr; gap: 48px; align-items: start; }

.split__text, .story__text { column-count: 2; column-gap: 6vw; }
.split__text > *, .story__text > * { break-inside: avoid; }
/* a label or heading that lives inside the copy spans both columns */
.split__text > .stamp, .split__text > h2, .story__text > .stamp { column-span: all; }
.split__text p, .story__text > p { max-width: none; }

/* photos always come after the copy, even where the HTML puts them first */
.split .split__imgs, .story .story__imgs {
  order: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 0;
}
.split .split__imgs figure, .story .story__imgs figure { width: auto; margin: 0; }
.split .split__imgs figure img, .story .story__imgs figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* level, not tilted: keep the rise-in, drop the rotation */
.split__imgs figure.reveal, .story__imgs figure.reveal { transform: translateY(34px); }
.split__imgs figure.reveal.is-in, .story__imgs figure.reveal.is-in { transform: none; }

@media (max-width: 760px) {
  .split__text, .story__text { column-count: 1; }
}
@media (max-width: 520px) {
  .split .split__imgs, .story .story__imgs { grid-template-columns: 1fr; }
}

/* ========== THINGS-TO-DO GALLERY ==========
   A captioned grid of straight-edged photos; each opens larger in a viewer.
   Empty slots show a dashed placeholder until the lodge's photos arrive. */
/* the photos run as a filmstrip under the Explore copy: tall frames in one
   row that scrolls sideways, snapping frame by frame */
.filmstrip { margin-top: 44px; }
.filmstrip__track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 26px;
  scrollbar-width: thin;
  /* fade the right edge so it's clear the row carries on */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.filmstrip__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.filmstrip__track.is-end { -webkit-mask-image: none; mask-image: none; }
.gallery__item { margin: 0; flex: 0 0 min(300px, 72vw); scroll-snap-align: start; }
.filmstrip .gallery__open img, .filmstrip .gallery__ph { aspect-ratio: 4/5; }
.filmstrip__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 4px; }
.filmstrip__hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--accent); }
.filmstrip__nav { display: flex; gap: 10px; }
.filmstrip__btn {
  position: relative; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--ink);
  --edge: color-mix(in srgb, var(--ink) 35%, transparent);
}
.filmstrip__btn::before {
  content: ""; position: absolute; inset: 0; background: var(--edge);
  -webkit-mask: var(--pen-ring) center / 100% 100% no-repeat;
  mask: var(--pen-ring) center / 100% 100% no-repeat;
  transition: background-color 0.3s;
}
.filmstrip__btn:hover:not(:disabled) { --edge: var(--ink); }
.filmstrip__btn:disabled { opacity: 0.3; cursor: default; }
.gallery__open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.gallery__open img, .gallery__ph {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0;
  transition: transform 0.4s var(--ease);
}
.gallery__open:hover img { transform: translateY(-3px); }
.gallery__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gallery__ph {
  display: grid; place-items: center; filter: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.gallery__item figcaption {
  margin-top: 12px;
  font-family: var(--hand); font-style: italic; font-size: 16px;
  color: var(--accent);
}

/* Explore gallery: one photo at a time, running edge to edge across the
   screen at about half its height, fading to the next. The caption and
   arrows sit in a bar underneath, inside the page margins. */
.exgal { margin-top: 44px; }
.exgal__stage {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: 48vh; min-height: 280px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.exgal .gallery__item {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.exgal .gallery__item.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 1.4s ease, visibility 0s;
}
.exgal .gallery__open { height: 100%; }
.exgal .gallery__open img {
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; filter: none; transform: none;
}
.exgal .gallery__open:focus-visible { outline-offset: -4px; }
/* captions live in the bar below; the figure's own stays for the viewer */
.exgal .gallery__item figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.exgal__bar { margin-top: 14px; }
.exgal__cap {
  font-family: var(--mono); font-style: normal;
  font-size: 11.5px; letter-spacing: 0.12em; color: var(--accent);
}
.exgal__count {
  align-self: center; margin-right: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .exgal__stage { height: 40vh; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .exgal .gallery__item, .exgal .gallery__item.is-active { transition: none; }
}

/* viewer */
.lightbox {
  max-width: none; max-height: none; width: 100vw; height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: rgba(10, 14, 10, 0.92); color: #e4e6d2;
}
.lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lightbox__img { max-width: 100%; max-height: 82dvh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.lightbox__cap { font-family: var(--hand); font-style: italic; font-size: 17px; }
.lightbox__close, .lightbox__nav {
  background: none; border: 0; color: #e4e6d2; cursor: pointer;
  font-size: 34px; line-height: 1; padding: 10px; opacity: 0.8;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { position: absolute; top: 14px; right: 18px; }
.lightbox__nav[hidden] { visibility: hidden; display: block; }
@media (max-width: 600px) {
  .lightbox[open] { grid-template-columns: 40px 1fr 40px; }
  .lightbox__nav { font-size: 28px; padding: 6px; }
}

/* ========== TRAVEL LIST BESIDE THE MAP ==========
   The list sits on the left and the map on the right. The map is sticky, so it
   stays in view while the list scrolls past it — every row you pick draws its
   road where you can see it. The map is kept well shorter than the list, and
   the list gets room below its last row, so the map stays pinned all the way
   down; the route card sits across the map's top edge. */
.explorer {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4vw; align-items: start; margin-top: 9vh;
}
/* the room below the last row lives inside the list column: a sticky map is
   held within its container's content, so padding on the container itself
   wouldn't give it anywhere to stay pinned */
.explorer .distances { margin-top: 0; max-width: none; padding-bottom: 22vh; }
.explorer .destmap {
  position: sticky; top: 120px;
  height: min(560px, calc(100vh - 200px)); min-height: 400px;
  margin: 0;
}
.explorer .routecard { top: 16px; left: 16px; right: 16px; max-width: none; }

@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; gap: 24px; }
  .explorer .distances { padding-bottom: 0; }
  /* on a phone the map comes first and stays pinned under the header while
     the list scrolls beneath it */
  .explorer .destmap {
    order: -1; top: 64px; z-index: 5;
    height: 42vh; min-height: 280px;
    background: var(--bg);
  }
  .explorer .routecard { top: 12px; bottom: auto; left: 12px; right: 12px; }
}

/* ========== BIGGER MAP, COMPACT LIST ==========
   The list is a narrow index; the map takes most of the width and height. */
.explorer {
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
  gap: 3vw;
}
.explorer .distances .fieldnote__head { font-size: 11px; margin-bottom: 12px; }
.explorer .distances__list li { font-size: 14px; }
.explorer .distances__btn { padding: 8px 2px; line-height: 1.35; }
.explorer .distances__hint { font-size: 10.5px; margin-top: 12px; }
/* the compact list is shorter than the map, so the pair is sized to fit one
   screen together rather than relying on the map staying pinned */
.explorer { align-items: stretch; }
.explorer .distances { padding-bottom: 0; }
.explorer .destmap {
  position: relative; top: auto;
  height: auto; min-height: min(680px, calc(100vh - 150px));
}
/* let the map run a little past the text column on wide screens */
@media (min-width: 1200px) {
  .explorer { margin-right: calc((1180px - 100vw) / 2 + 2vw); }
}
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; margin-right: 0; }
  .explorer .destmap { height: 52vh; min-height: 320px; top: 64px; }
}
@media (max-width: 900px) {
  .explorer .destmap {
    position: sticky; top: 64px; order: -1;
    height: 52vh; min-height: 320px;
  }
}

/* compact route card: half the size, tucked in the map's top-left corner */
.explorer .routecard {
  right: auto; width: max-content; max-width: min(46%, 280px);
  padding: 10px 14px 9px;
}
.explorer .routecard__place { font-size: 15px; margin-bottom: 4px; }
.explorer .routecard__legs { font-size: 10.5px; line-height: 1.5; }
.explorer .routecard__time { font-size: 12.5px; margin-top: 6px; padding-top: 6px; }
.explorer .routecard__wiki { font-size: 9.5px; margin-top: 5px; }
@media (max-width: 900px) {
  .explorer .routecard { max-width: calc(100% - 24px); }
}

/* ========== FADE FRAMES ==========
   Photos stacked in one frame; the first stays in the flow to set the frame's
   size (from the section's existing aspect-ratio rules), the rest sit exactly
   over it, and only the .is-active one is visible. */
.fadeframe__stack { position: relative; display: block; }
.fadeframe__stack > img { transition: opacity 1.8s ease; }
.fadeframe__stack > img:not(.is-active) { opacity: 0; }
.fadeframe__stack > img + img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0;
}
/* the bungalow frame keeps the slider's old shape and padding */
.roomfade { margin: 0; padding: 18px; }
.roomfade img { width: 100%; aspect-ratio: 4/3.6; object-fit: cover; }
/* a photo's caption sits square under the frame: the hand style's slight tilt
   reads as crooked type against the straight edge of the photo */
/* a photo's caption is set like the small time stamps — the typewriter face,
   letter-spaced, in the accent colour — and sits square under the frame */
figcaption.fadeframe__cap {
  min-height: 1.3em; transform: none; margin: 12px 0 0;
  font-family: var(--mono); font-style: normal;
  font-size: 12.5px; letter-spacing: 0.14em; line-height: 1.5;
  color: var(--accent);
}

/* arrows on every multi-photo frame: hand-drawn rings like the rest of the
   site's controls, on a soft paper disc so they read over any photo */
.fadeframe__nav {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; pointer-events: none;
}
.fadeframe__arrow {
  position: relative; width: 40px; height: 40px; pointer-events: auto;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 22px; line-height: 1; color: var(--ink);
  opacity: 0.75; transition: opacity 0.25s;
  --edge: color-mix(in srgb, var(--ink) 40%, transparent);
}
.fadeframe__arrow::before {
  content: ""; position: absolute; inset: 0; background: var(--edge);
  -webkit-mask: var(--pen-ring) center / 100% 100% no-repeat;
  mask: var(--pen-ring) center / 100% 100% no-repeat;
}
.fadeframe__arrow:hover, .fadeframe__arrow:focus-visible { opacity: 1; --edge: var(--ink); }
.fadeframe:hover .fadeframe__arrow { opacity: 1; }
/* the hero's photo sits under the headline; keep its arrows in the clear
   upper part of the picture */
.fadeframe--hero .fadeframe__nav { bottom: 30%; padding: 0 3vw; }


/* ========== THEN / TODAY ==========
   One frame: drag the handle to wipe from the bare land to today's forest.
   The range input covers the whole frame, so dragging anywhere (mouse, touch
   or arrow keys) moves the divide. */
.story .compare {
  order: 2; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; max-width: 100%;
  user-select: none; touch-action: pan-y;
  --pos: 50%;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__then { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__bar {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: #f7f4e4; transform: translateX(-1px); pointer-events: none;
}
.compare__knob {
  position: absolute; top: 50%; left: var(--pos);
  width: 46px; height: 46px; border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: #f7f4e4; color: var(--ink);
  font-family: var(--mono); font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.compare__range:focus-visible ~ .compare__knob { outline: 2px solid var(--accent); outline-offset: 3px; }
.compare__range:focus-visible + .compare__knob,
.compare:focus-within .compare__knob { box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,.25); }
.compare__tag {
  position: absolute; bottom: 14px; z-index: 1; pointer-events: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--ink); background: rgba(247, 244, 228, 0.88); padding: 4px 10px;
}
.compare__tag--then { left: 14px; }
.compare__tag--now { right: 14px; }
@media (max-width: 760px) { .story .compare { aspect-ratio: 4 / 3.4; } }

/* the forest-awakens chapter: copy on the left, the then/today frame beside it */
#landscape .story { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center; }
#landscape .story__text { column-count: 1; }
#landscape .story__text > p { max-width: 34em; }
#landscape .story .compare { order: 0; aspect-ratio: 4 / 3.3; }
@media (max-width: 900px) {
  #landscape .story { grid-template-columns: 1fr; gap: 36px; }
}

/* ========== HOW TO GET THERE ==========
   A drop-down under the contact heading, styled like the notice pill: a
   hand-drawn outlined bar that opens into a paper card. */
.directions { margin-top: 8px; max-width: 760px; }
.directions__bar {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink);
  padding: 11px 22px;
  --edge: color-mix(in srgb, var(--accent) 55%, transparent);
}
.directions__bar::-webkit-details-marker { display: none; }
.directions__bar::before {
  content: ""; position: absolute; inset: 0; background: var(--edge);
  -webkit-mask: var(--pen-pill) center / 100% 100% no-repeat;
  mask: var(--pen-pill) center / 100% 100% no-repeat;
  transition: background-color 0.3s;
}
.directions__bar:hover { --edge: var(--accent); }
.directions__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
.directions__chev { color: var(--accent); font-size: 11px; transition: transform 0.3s ease; }
.directions[open] .directions__chev { transform: rotate(180deg); }
.directions__panel {
  position: relative; margin-top: 14px; padding: 26px 30px 12px;
  background: color-mix(in srgb, var(--bg) 70%, #fff 30%);
  --edge: color-mix(in srgb, var(--accent) 35%, transparent);
}
.directions__panel::before {
  content: ""; position: absolute; inset: 0; background: var(--edge); pointer-events: none;
  -webkit-mask: var(--pen-card) center / 100% 100% no-repeat;
  mask: var(--pen-card) center / 100% 100% no-repeat;
}
.directions__panel h3 {
  font-family: var(--mono); font-weight: 400; font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: lowercase; color: var(--accent); margin: 6px 0 10px;
}
.directions__panel h3 + p { margin-top: 0; }
.directions__panel p { font-size: 16.5px; line-height: 1.6; margin-bottom: 14px; }
.directions__panel p + h3 { margin-top: 26px; }
.directions__lead { font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .directions[open] .directions__panel { animation: noticeDrop 0.32s ease both; }
}
@media (max-width: 700px) { .directions__panel { padding: 22px 20px 8px; } }

/* the shared control sits under a side-by-side pair, spanning both columns */
.split .split__imgs .pairnav, .story .story__imgs .pairnav {
  grid-column: 1 / -1; justify-content: flex-end; margin-top: -8px;
}

/* the directions card floats over the map rather than pushing it down */
.directions { position: relative; z-index: 20; }
.directions__panel {
  position: absolute; top: 100%; left: 0;
  width: min(760px, calc(100vw - 12vw));
  max-height: min(70vh, 640px); overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 92%, #fff 8%);
  box-shadow: 0 22px 50px rgba(20, 26, 16, 0.22);
  padding-top: 34px;
}
.directions__close {
  position: sticky; top: 0; float: right; margin: -22px -14px 0 0; z-index: 1;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  font-size: 22px; line-height: 1; color: var(--ink);
}
.directions__close:hover { color: var(--accent); }

/* arrow rings: inline SVG instead of a masked pseudo-element */
.filmstrip__btn::before, .fadeframe__arrow::before { content: none; }
.pen-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--edge); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; overflow: visible;
  transition: stroke 0.3s;
}
.fadeframe__arrow { backdrop-filter: none; background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* ---------- the star note beside the name ----------
   A small hand-drawn star sits next to "Galkadawala"; pressing it opens a
   note explaining what the name means. It closes from the star, the Escape
   key or a click anywhere outside, like the directions drop-down. */
.starnote { position: relative; display: inline-block; vertical-align: super; }
.starnote__star {
  background: none; border: 0; padding: 0 0 0 8px; cursor: pointer;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1;
  color: var(--accent); transition: transform 0.3s var(--ease), color 0.3s;
}
.starnote__star:hover, .starnote__star[aria-expanded="true"] {
  color: var(--ink); transform: rotate(18deg) scale(1.12);
}
/* a slow glow, so it reads as something to press rather than punctuation */
@media (prefers-reduced-motion: no-preference) {
  .starnote__star { animation: starGlow 2.8s ease-in-out infinite; }
  .starnote__star:hover, .starnote__star[aria-expanded="true"] { animation: none; }
  @keyframes starGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; opacity: 0.85; }
    50% {
      text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent),
                   0 0 22px color-mix(in srgb, var(--firefly) 55%, transparent);
      opacity: 1;
    }
  }
}
.starnote__star:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.starnote__bubble {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 6;
  display: block; width: min(420px, calc(100vw - 12vw));
  padding-right: 44px;
  background: color-mix(in srgb, var(--bg) 88%, #fff 12%);
  padding: 20px 22px;
  font-family: var(--body); font-style: normal; font-size: 16px; line-height: 1.6;
  color: var(--ink); text-wrap: pretty;
  /* the same pen-drawn box as the site's other cards */
  border: 0;
  filter: drop-shadow(0 0 0 transparent);
}
.starnote__bubble::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-mask: var(--pen-card) center / 100% 100% no-repeat;
  mask: var(--pen-card) center / 100% 100% no-repeat;
}
/* the little tail pointing back up at the star */
.starnote__bubble::after {
  content: ""; position: absolute; top: -9px; left: 26px;
  width: 18px; height: 10px;
  background: color-mix(in srgb, var(--bg) 88%, #fff 12%);
  clip-path: polygon(0 100%, 100% 100%, 42% 0);
}
.starnote__bubble[hidden] { display: none; }
/* the note's own close button, in the corner of the bubble */
.starnote__close {
  position: absolute; top: 8px; right: 10px; z-index: 1;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 19px; line-height: 1;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: color 0.3s;
}
.starnote__close:hover { color: var(--ink); }
.starnote__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* on a phone the note opens as a panel at the foot of the screen, which is
   steady wherever the star happens to sit on the page */
@media (max-width: 620px) {
  .starnote__bubble {
    position: fixed; z-index: 500;
    left: 5vw; right: 5vw; bottom: 18px; top: auto; width: auto;
    max-height: 60vh; overflow-y: auto;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 28%, transparent);
  }
  .starnote__bubble::after { display: none; }
}
/* on a wide screen the note opens beside the name instead of over the
   second line of the title */
@media (min-width: 1000px) {
  .starnote__bubble { top: -12px; left: calc(100% + 16px); }
  .starnote__bubble::after {
    top: 22px; left: -9px; width: 10px; height: 18px;
    clip-path: polygon(100% 0, 100% 100%, 0 42%);
  }
}

/* ---------- the three bungalow tabs ----------
   They were easy to read past as a line of small type, so each one is now a
   hand-drawn pill like the site's other controls, with the chosen bungalow
   filled in. A short prompt above says what the row is for. */
.roomtabs__nav {
  gap: 12px 14px;
  margin-bottom: 34px;
  align-items: center;
}
.roomtabs__hint {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  color: var(--accent); margin: 0 0 14px;
}
.roomtab {
  position: relative;
  font-size: 14px; letter-spacing: 0.06em;
  opacity: 1; color: color-mix(in srgb, var(--ink) 78%, transparent);
  padding: 12px 22px;
  border-bottom: 0;
  --edge: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color 0.3s, background-color 0.3s;
}
.roomtab::before {
  content: ""; position: absolute; inset: 0; background: var(--edge);
  -webkit-mask: var(--pen-pill) center / 100% 100% no-repeat;
  mask: var(--pen-pill) center / 100% 100% no-repeat;
  pointer-events: none; transition: background-color 0.3s;
}
.roomtab:hover { opacity: 1; color: var(--ink); --edge: var(--ink); }
.roomtab.is-active {
  color: var(--bg); border-color: transparent;
  background: var(--ink); border-radius: 999px;
  --edge: var(--ink);
}
.roomtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
/* the row no longer needs the drawn rule underneath it */
.roomtabs__nav::after { content: none; }
@media (max-width: 520px) {
  .roomtab { padding: 11px 16px; font-size: 13px; }
}

/* ---------- the photo strips (Explore, Living Lightly, Beginnings) ----------
   One long row at a fixed height: every photograph keeps its own shape and
   they sit edge to edge with no gaps, so the band is always full. The row is
   dragged sideways and runs round for ever; the arrows nudge it along for
   anyone not dragging. Each place is named in the corner of its own photo. */
.exgal__stage { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; }
.exgal__stage::-webkit-scrollbar { display: none; }
.exgal__stage.is-dragging { cursor: grabbing; }
.exgal__track { display: flex; height: 100%; width: max-content; }
.exgal__track .gallery__item {
  position: relative; height: 100%; flex: 0 0 auto; margin: 0;
  opacity: 1; visibility: visible;
}
.exgal__track .gallery__open { height: 100%; }
.exgal__track .gallery__open img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: none;
}
/* the name sits on the photograph itself */
.exgal__track .gallery__item figcaption {
  position: absolute; clip-path: none; width: auto; height: auto; overflow: visible;
  left: 16px; bottom: 14px; margin: 0; max-width: calc(100% - 32px);
  font-family: var(--hand); font-style: italic; font-size: 16px; line-height: 1.3;
  color: #f4f1e8; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.gallery__credit {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.08em;
  opacity: 0.85;
}

/* a chapter laid out the other way round: writing on the left, photograph on
   the right. On a phone both stack as usual, photograph first. */
@media (min-width: 901px) {
  .yoga--flip { grid-template-columns: 1fr 1.2fr; }
  .yoga--flip .yoga__img { order: 2; }
  .yoga--flip .yoga__text { order: 1; text-align: right; }
  /* the writing runs to the photograph's edge, so the lines align on the
     right rather than trailing off towards it */
  .yoga--flip .yoga__text p, .yoga--flip .yoga__text h2 { margin-left: auto; }
}

/* ---------- the phone ----------
   The opening photograph gives the headline room, the round controls are
   thumb-sized, and the strips keep their drag. */
@media (max-width: 760px) {
  .hero__media { height: 54svh; min-height: 300px; }
  .filmstrip__btn, .fadeframe__arrow { width: 46px; height: 46px; }
  .exgal__bar { margin-top: 12px; }
  .exgal__cap { font-size: 11px; }
  /* the notices read as name then note, each on its own line, rather than
     two narrow columns that break a title across three lines */
  .noticed__list a { display: block; }
  .noticed__list b { display: block; }
  .noticed__list span { display: block; text-align: left; margin-top: 3px; }
}
/* A pair gathered into one frame on a phone: it leads the chapter, reaches
   past the page margins to the screen's edges, and fills that width. (It is
   lifted out of the text block, so these rules stand on their own.) */
@media (max-width: 760px) {
  .is-merged {
    display: block; order: -1;
    margin: 0 -6vw 20px; width: auto;
  }
  .is-merged figure, .is-merged figure:first-child { width: 100%; max-width: none; margin: 0; padding: 0; }
  .is-merged figure img { width: 100%; aspect-ratio: 4/3.1; object-fit: cover; }
}
/* on a phone the sketch has the width to itself, so it can run much larger
   than the 56% plate it sits at on a laptop */
@media (max-width: 760px) {
  .storyhead__sketch { width: 92%; }
}

/* ---------- the menu on a phone ----------
   Eleven chapters at 30px ran off the bottom of the screen, so the list is
   set smaller and tighter, scrolls if it still needs to, and the floating
   note steps out of the way while the menu is open. */
@media (max-width: 760px) {
  .menu { justify-content: flex-start; padding: 88px 8vw 32px; overflow-y: auto; }
  .menu__links a { font-size: 19px; padding: 9px 0; gap: 12px; }
  .menu__links a span { font-size: 11px; }
  .menu__foot { margin-top: 26px; font-size: 11.5px; line-height: 1.9; }
}
body.menu-open .notice { opacity: 0; pointer-events: none; }
.notice { transition: opacity 0.3s; }
/* the route lists inside the directions panel */
.directions__list { list-style: none; margin: 10px 0 16px; }
.directions__list li { position: relative; padding: 4px 0 4px 18px; }
.directions__list li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 7px; height: 1px; background: var(--accent);
}

/* ---------- volume slider beside the sound toggle ----------
   While the sound is on there is a small level icon beside the toggle. It
   opens the slider when pressed, and the slider tucks itself away a few
   seconds after the last touch, so it is never left sitting on the page. */
.volume {
  display: flex; align-items: center;
  height: 40px; padding: 0 5px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  color: var(--ink);
}
.sound:not(.is-on) + .volume { display: none; }
.volume__btn {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 5px; cursor: pointer;
  background: none; border: 0; color: var(--ink); border-radius: 50%;
}
.volume__btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.volume__btn svg circle { fill: var(--bg); }
.volume__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.volume input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 0; opacity: 0; margin: 0; height: 22px; background: transparent; cursor: pointer;
  transition: width 0.35s var(--ease), opacity 0.25s, margin 0.35s var(--ease);
}
.volume.is-open input[type="range"] { width: 96px; opacity: 1; margin: 0 8px 0 4px; }
.volume input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%),
              color-mix(in srgb, var(--ink) 22%, transparent) var(--fill, 50%));
}
.volume input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.volume input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.volume input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.volume input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .soundwrap { left: 12px; bottom: 16px; gap: 6px; }
  .volume.is-open input[type="range"] { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .volume input[type="range"] { transition: none; } }

/* ---------- More about Galkadawala ----------
   Sits on the same side as Follow us, directly beneath it, and is set larger
   than the small mono links it used to be: the heading in the darker ink and
   each entry in the display serif, like the names in the Follow us list. */
.noticed { margin-bottom: 64px; }
.moreabout { max-width: 760px; margin-bottom: 90px; }
.moreabout .fieldnote__head {
  font-size: 13.5px; letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--ink) 80%, var(--accent));
  margin-bottom: 16px;
}
.moreabout .contact__links li:first-child a { padding-top: 14px; }
.moreabout .contact__links a {
  font-family: var(--display); font-size: 24px; line-height: 1.3;
  padding: 15px 0;
}
.moreabout .contact__links a:hover { padding-left: 10px; }
@media (max-width: 760px) {
  .moreabout .contact__links a { font-size: 21px; padding: 13px 0; }
}

/* a photographer's credit laid over the corner of the photo itself, so it
   takes no room of its own and shows only while that photograph is up */
.fadeframe { position: relative; }
figcaption.fadeframe__cap--over {
  position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; min-height: 0;
  font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.1em;
  color: #f4f1e8; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
  pointer-events: none; transform: none;
}
figcaption.fadeframe__cap--over:empty { display: none; }

/* ---------- the header with two more headings ----------
   Follow us and More about Galkadawala join the top menu, so the row is
   wider: its links never wrap, and the burger takes over a little earlier
   than before so the row never runs into the weather strip. */
.header__nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .header__nav { display: none; }
  .header__burger { display: flex; }
}
/* the header links land with the heading clear of the fixed header */
#follow, #more { scroll-margin-top: 120px; }

/* ---------- Follow us: darker type ----------
   The heading and the small notes beside each name were set in the pale green
   accent, which read faint on the paper; they now take the dark ink, and the
   names themselves go to full ink. */
.noticed .fieldnote__head { color: var(--ink); font-size: 13.5px; }
.noticed__list b { color: var(--ink); }
.noticed__list span { color: color-mix(in srgb, var(--ink) 82%, var(--accent)); }

/* the Designed by line sits at the right-hand end of the footer's top row,
   across from the logo and copyright; the other credit drops beneath */
.footer__credit--design { width: auto; margin-left: auto; text-align: right; order: 1; }
.footer__credit:not(.footer__credit--design) { order: 2; }

/* ---------- the sound controls stay out of the way ----------
   With a mouse they sit almost transparent, so they don't cover the page
   (the footer text runs underneath them), and come fully into view when the
   pointer is over them or they are being used. A touch screen has no hover,
   so there they stay as they were. */
@media (hover: hover) {
  .soundwrap { opacity: 0.22; transition: opacity 0.35s ease; }
  .soundwrap:hover,
  .soundwrap:focus-within,
  .soundwrap:has(.volume.is-open) { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .soundwrap { transition: none; }
}