/* =====================================================================
   SHAWANO BAKER MANOR
   ---------------------------------------------------------------------
   Built simple on purpose. The buyers — Dan and Suzi — are older,
   conservative, and unfamiliar with this technology; their mother-in-law
   equivalent has to sell it to them. So: nothing reacts to scroll,
   nothing pops up, nothing moves unless a person asked it to. Big type,
   obvious buttons, one action repeated.

   The palette is sampled from the lodge itself: cedar plank ceilings,
   granite, the burgundy bedding, the green metal roof, the rock bluff.
   ===================================================================== */

:root {
  --paper:    #F2EEE6;   /* warm stone, the ground                       */
  --paper-2:  #E8E2D6;   /* alternate band                               */
  --edge:     #D8CFBE;   /* hairlines                                    */
  --ink:      #241E19;   /* warm near-black, never #000                  */
  --ink-2:    #55493E;   /* body copy, 8.4:1 on the paper                */
  --ink-3:    #7B6E60;   /* quiet meta                                   */
  --cedar:    #8A5A34;   /* the ceilings                                 */
  --wine:     #6E2B2B;   /* the bedding — the one accent, 8.1:1 on paper */
  --wine-lit: #8F3A38;
  --dark:     #221B16;   /* the film ground                              */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:  1140px;
  --pad:   clamp(1.15rem, 5vw, 2.5rem);
  --r:     14px;
}

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

/* The hidden attribute must always win. Without this, any element that
   also has a display-setting class (.btn { display:inline-block } on
   #calPay) renders anyway — author styles beat the UA's [hidden] rule.
   Found 8/28: "Book and pay now" showed with no payment link wired and
   dead-ended at the top of the page. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  /* BIG TYPE IS THE BRIEF. Nothing under 17px on a phone. */
  font-size: 1.075rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 8px; font-size: 1rem;
}
.skip:focus { left: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.wrap.narrow { max-width: 660px; }

h1, h2 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  line-height: 1.08; letter-spacing: -0.014em; margin: 0 0 .5em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 5.4vw, 2.9rem); }
p { margin: 0 0 1rem; }

/* ---------------------------------------------------------------- bar */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem var(--pad);
  background: rgba(242, 238, 230, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--wine); text-decoration: none;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
}
.brand span { color: var(--ink); }

/* ------------------------------------------------------------ buttons */
/* A button looks like a button. No ghosts, no icon-only controls. */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--wine); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  padding: .8rem 1.35rem; border: 2px solid var(--wine);
  border-radius: var(--r); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.btn:hover { background: var(--wine-lit); border-color: var(--wine-lit); }
.btn:focus-visible { outline: 3px solid var(--cedar); outline-offset: 3px; }
.btn-sm { padding: .55rem 1rem; font-size: .95rem; }
.btn-lg { font-size: 1.1rem; padding: .95rem 1.7rem; min-height: 52px; }
.btn-full { width: 100%; }
.btn-quiet {
  background: rgba(255,255,255,.92); color: var(--ink); border-color: rgba(255,255,255,.92);
}
.btn-quiet:hover { background: #fff; border-color: #fff; color: var(--wine); }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88svh, 780px);
  display: flex; align-items: flex-end;
  background: var(--dark); overflow: hidden;
}
.hero-film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(34,27,22,.42) 0%, rgba(34,27,22,.10) 32%,
    rgba(34,27,22,.55) 74%, rgba(34,27,22,.82) 100%);
}
.hero-words {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--pad) clamp(2rem, 6vh, 3.4rem);
  color: #fff;
}
.hero-words h1 {
  color: #fff; font-size: clamp(2.3rem, 9vw, 4.4rem);
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}
.eyebrow {
  font-size: .95rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
  margin: 0 0 .7rem; text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.hero-sub {
  font-size: clamp(1.06rem, 2.4vw, 1.25rem); max-width: 30ch;
  color: rgba(255,255,255,.94); margin-bottom: 1.5rem;
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* -------------------------------------------------------------- bands */
.band { padding-block: clamp(3rem, 8vh, 5.5rem); }
.band-alt { background: var(--paper-2); border-block: 1px solid var(--edge); }
.lede { font-size: clamp(1.08rem, 2.3vw, 1.2rem); max-width: 56ch; color: var(--ink-2); }
.note { font-size: 1rem; color: var(--ink-3); max-width: 62ch; margin-top: 2rem; }
.note.small { font-size: .92rem; margin-top: .5rem; }

/* -------------------------------------------------------------- rooms */
/* A plain gallery. No hover reveals, no lightbox, no carousel — every
   picture is simply visible, which is what a sceptical buyer needs. */
.rooms {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  max-width: var(--wrap); margin: 2.4rem auto 0;
  padding-inline: var(--pad);
}
@media (min-width: 760px) { .rooms { grid-template-columns: 1fr 1fr; } }
.rooms figure { margin: 0; }
.rooms img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: 0 12px 30px -18px rgba(36,30,25,.5);
}
.rooms figcaption {
  margin-top: .7rem; font-size: 1rem; color: var(--ink-2); line-height: 1.5;
}
.rooms figcaption b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- form */
form { margin-top: 1.8rem; }
label {
  display: block; font-weight: 600; color: var(--ink);
  margin: 1.15rem 0 .35rem; font-size: 1.02rem;
}
.hint { display: block; font-weight: 400; font-size: .9rem; color: var(--ink-3); }
input[type=text], textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: #fff; border: 2px solid var(--edge); border-radius: 10px;
  padding: .8rem .9rem; min-height: 52px;
}
textarea { min-height: 108px; resize: vertical; }
input:focus, textarea:focus {
  outline: none; border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(110,43,43,.16);
}
.agree {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 1.6rem 0 .3rem; font-weight: 500; cursor: pointer;
}
.agree input { width: 22px; height: 22px; margin-top: .15rem; flex: none; accent-color: var(--wine); }
.agree span { font-weight: 500; color: var(--ink); }
button.btn { font: inherit; font-weight: 600; }
form .btn-full { margin-top: 1.6rem; }
.receipt {
  margin-top: 1.5rem; background: #fff; border: 2px solid var(--edge);
  border-radius: var(--r); padding: 1.3rem 1.4rem;
}
.receipt h3 { font-family: var(--serif); color: var(--ink); margin: 0 0 .6rem; font-size: 1.4rem; }

/* ------------------------------------------------------------- footer */
.foot {
  background: var(--paper-2); border-top: 1px solid var(--edge);
  padding-block: clamp(2.4rem, 6vh, 3.6rem);
  font-size: 1rem; color: var(--ink-2);
}
.foot .small { font-size: .9rem; color: var(--ink-3); }
.foot b { color: var(--ink); }
.foot a { color: var(--wine); }

/* --------------------------------------------------------- dark theme */
/* The viewer's own preference is honoured, but this page commits to its
   paper ground — a warm lodge in a dark shell reads as a different
   building. Only the chrome softens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #EFEAE1; --paper-2: #E4DED2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film { display: none; }
  .hero { background: var(--dark) url("../img/hero-poster.jpg") center / cover no-repeat; }
  .btn { transition: none; }
}

/* the brand wraps at 375px and shoves the button off — shorten it there.
   Caught in a 390px screenshot, not in code. */
.brand .full { display: none; }
@media (min-width: 460px) { .brand .full { display: inline; } .brand .short { display: none; } }
@media (max-width: 459px) {
  .brand { font-size: .98rem; }
  .bar { padding-inline: 1rem; gap: .6rem; }
  .btn-sm { padding: .55rem .85rem; font-size: .92rem; white-space: nowrap; }
}

/* =====================================================================
   HERO — Mason 15 Aug: "make sure the hero photos fill the screen that
   you land on" and "move the title texts and buttons to the lower left."
   ===================================================================== */
.hero { min-height: 100svh; align-items: flex-end; justify-content: flex-start; }
.hero-words {
  max-width: min(var(--wrap), 100%);
  padding-bottom: clamp(2.2rem, 7vh, 4rem);
}
.hero-words h1, .eyebrow, .hero-sub, .hero-btns { text-align: left; }
.hero-sub { max-width: 34ch; }
/* the film is the whole screen; the shade only has to carry type at the
   bottom left, so it is a corner wash rather than a full curtain */
.hero-shade {
  background:
    linear-gradient(180deg, rgba(34,27,22,.34) 0%, rgba(34,27,22,0) 26%),
    linear-gradient(0deg,  rgba(34,27,22,.80) 0%, rgba(34,27,22,.32) 34%, rgba(34,27,22,0) 62%);
}

/* ------------------------------------------------------------- story */
.kicker {
  font-family: var(--sans); font-size: .92rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--cedar);
  margin: 0 0 .7rem;
}
.story .lede { margin-bottom: 1.15rem; }
.story .lede b { color: var(--ink); }
.story-img { margin: 2.4rem 0; }
.story-img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* -------------------------------------------------------------- area */
.area-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.area-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--edge);
  align-items: baseline;
}
.area-list li:last-child { border-bottom: 1px solid var(--edge); }
.area-list b { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
.area-list span {
  font-family: var(--sans); font-weight: 700; color: var(--wine);
  font-size: 1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.area-list em {
  grid-column: 1 / -1; font-style: normal;
  color: var(--ink-3); font-size: .98rem; line-height: 1.5;
}

/* =====================================================================
   HERO, corrected 15 Aug — Mason: "the hero is not fit to the landing
   screen and is too big so some of the photo is cut off," and "remove
   the background bar on the top."

   THE CROP WAS THE REAL FAULT. object-fit:cover fills a tall phone by
   cutting the sides off a 16:9 film — the machine chose what to lose.
   So there are now TWO films: a portrait one composed for the phone
   (each shot cropped 9:16 at a chosen centre, from 24MP stills, so
   nothing that matters leaves frame) and the landscape one for desktop.
   Neither is cropped by the browser.
   ===================================================================== */
.hero { min-height: 100svh; height: 100svh; }
.hero-film { object-fit: cover; }
.hero-tall { display: block; }
.hero-wide { display: none; }
@media (min-width: 820px) {
  .hero-tall { display: none; }
  .hero-wide { display: block; }
}

/* ---- THE BAR DROPS ITS BACKGROUND OVER THE HERO ----------------------
   Mason's standing call, first made on JAS 8/11: no border, no plate —
   the logo and the buttons sit on the film itself. It only takes a
   ground once you have scrolled past the hero. */
.bar {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.bar .brand, .bar .brand span { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.bar .btn-sm {
  background: rgba(34,27,22,.42); border-color: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bar .btn-sm:hover { background: var(--wine); border-color: var(--wine); }

/* past the hero it takes the paper ground back so the ink stays readable */
body.scrolled .bar {
  background: rgba(242, 238, 230, 0.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--edge);
}
body.scrolled .bar .brand { color: var(--wine); text-shadow: none; }
body.scrolled .bar .brand span { color: var(--ink); text-shadow: none; }
body.scrolled .bar .btn-sm {
  background: var(--wine); border-color: var(--wine);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- the words, hard into the lower-left corner --------------------- */
.hero-words { padding-bottom: clamp(2.6rem, 8vh, 4.2rem); }
.hero-words h1 { margin-bottom: .45rem; }
.hero-sub { margin-bottom: 1.6rem; max-width: 26ch; }

/* ---------------------------------------------------------------------
   THE BAR SITS ON THE FILM, IT DOES NOT PUSH IT DOWN.
   `position: sticky` keeps the bar IN the flow, so it was stealing ~110px
   off the top of a 100svh hero — that was the pale strip above the video,
   and it was also what pushed the second button below the fold. Fixed
   takes it out of the flow entirely, so the film gets the whole screen.
   Caught in a 390px screenshot, not in the code.
   --------------------------------------------------------------------- */
.bar { position: fixed; left: 0; right: 0; top: 0; }

/* the hero owns the full screen and the words clear the fixed bar */
.hero { padding-top: 0; }
.hero-words { padding-bottom: clamp(1.6rem, 5vh, 3rem); }

/* every band below has to clear the fixed bar when jumped to by anchor */
.band { scroll-margin-top: 72px; }

/* on a phone the type comes down a step so the whole block — eyebrow,
   headline, sub and BOTH buttons — lands inside the first screen */
@media (max-width: 560px) {
  .hero-words h1 { font-size: clamp(2.05rem, 8.4vw, 2.9rem); }
  .hero-sub { font-size: 1.02rem; margin-bottom: 1.15rem; max-width: 30ch; }
  .hero-btns { gap: .55rem; }
  .hero-btns .btn-lg { font-size: 1.04rem; padding: .82rem 1.3rem; min-height: 48px; }
  .eyebrow { font-size: .86rem; margin-bottom: .5rem; }
}

/* ---------------------------------------------------------------------
   THE WORDS BELONG TO THE CORNER, NOT TO A COLUMN.
   Measured, not guessed: .hero-words was inheriting the 1140px centred
   wrap, so on a 1280 screen the block started 110px in and ran 1140px
   wide — which reads as a centred column however far down it sits.
   The container now hugs the left edge and only the TEXT is width-capped.
   --------------------------------------------------------------------- */
.hero-words {
  max-width: none; margin: 0; width: auto;
  padding-left: clamp(1.15rem, 4vw, 3.2rem);
  padding-right: clamp(1.15rem, 4vw, 3.2rem);
}
.hero-words h1 { max-width: 15ch; }
.hero-words .hero-sub { max-width: 32ch; }
.hero-words .hero-btns { max-width: 34rem; }

/* (THE ROOM PANELS block removed 8/15 by framework-check: the snap
   mechanic it styled was replaced by the measured-transform tour and no
   .panel/.rooms-track markup exists anywhere. Dead code confuses the
   next clone — see the taste log on the snap-on-root-scroller lesson.) */

/* =====================================================================
   THE AREA RAIL — the one horizontal move on the site. You drive
   outward from the front door, nearest first.
   ===================================================================== */
.rail {
  display: flex; gap: 1rem; list-style: none;
  margin: 2rem 0 .6rem; padding: .4rem clamp(1.15rem, 5vw, 2.5rem) 1.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
.place {
  flex: 0 0 min(16rem, 74vw); scroll-snap-align: start;
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 1.2rem 1.25rem 1.35rem;
  display: flex; flex-direction: column;
}
.place-time { display: flex; align-items: baseline; gap: .3rem; margin: 0 0 .5rem; }
.place-time b {
  font-family: var(--serif); font-size: 2.5rem; line-height: 1;
  color: var(--wine); font-variant-numeric: tabular-nums;
}
.place-time span {
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.place h3 {
  font-family: var(--sans); font-size: 1.06rem; font-weight: 700;
  color: var(--ink); margin: 0 0 .4rem; line-height: 1.3;
}
.place p { font-size: .96rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.place.is-star { border-color: var(--wine); border-width: 2px; }
.rail-hint {
  text-align: right; padding-inline: clamp(1.15rem, 5vw, 2.5rem);
  margin: 0; font-size: .88rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 900px) { .rail-hint { display: none; } }

/* ------------------------------------------------------------ reviews */
.reviews .stars { color: var(--wine); letter-spacing: .1em; font-size: .8em; }

/* =====================================================================
   THE CALENDAR
   ===================================================================== */
.cal { margin-top: 2rem; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: 1.2rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.cal-label { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: 0; font-weight: 600; }
.cal-nav {
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
  background: none; border: 1px solid var(--edge); border-radius: 10px;
  width: 44px; height: 44px; color: var(--ink);
}
.cal-nav:hover { border-color: var(--wine); color: var(--wine); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em; padding-bottom: .35rem;
}
.cal-day {
  font: inherit; font-size: 1rem; cursor: pointer;
  aspect-ratio: 1; min-height: 42px;
  background: #fff; border: 1px solid var(--edge); border-radius: 9px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cal-day:hover:not(:disabled) { border-color: var(--wine); color: var(--wine); }
.cal-day.is-past { opacity: .3; cursor: default; background: transparent; border-color: transparent; }
.cal-day.is-taken {
  cursor: not-allowed; color: var(--ink-3); background: var(--paper-2);
  border-color: var(--paper-2); text-decoration: line-through;
}
.cal-day.is-in, .cal-day.is-out { background: var(--wine); border-color: var(--wine); color: #fff; font-weight: 700; }
.cal-day.is-between { background: rgba(110,43,43,.12); border-color: transparent; }
.cal-pad { aspect-ratio: 1; }
.cal-status { margin: .9rem 0 0; font-size: .96rem; color: var(--ink-3); line-height: 1.5; }
.cal-status.cal-live { color: var(--wine); font-weight: 600; }
.cal-sel {
  margin-top: 1rem; padding: .9rem 1rem; background: #fff;
  border: 2px solid var(--wine); border-radius: 10px;
}
.cal-sel b { display: block; color: var(--ink); font-size: 1.1rem; }
.cal-sel span { display: block; color: var(--ink-2); font-size: .98rem; margin-top: .2rem; }
#calPay { margin-top: 1rem; }

/* =====================================================================
   THE FULL-QUALITY PASS — 15 Aug evening. Layout modelled on the luxury
   pattern (minimal poetic hero, one-line supporting copy, the accolade
   given its own moment, booking always reachable in the bar).
   ===================================================================== */

/* ---- kill the two retired experiments so they cannot resurface ------ */
.story-img { display: none; }

/* ---- the dropdown ---------------------------------------------------- */
.bar-nav { display: flex; align-items: center; gap: .6rem; }
.menu { position: relative; }
.menu-btn {
  font: inherit; font-size: .98rem; font-weight: 600; cursor: pointer;
  color: #fff; background: transparent; border: 0;
  padding: .55rem .7rem; border-radius: 10px;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.menu-btn .chev { font-size: .8em; opacity: .8; }
.menu-btn:hover { color: var(--sun, #EFD9B4); }
body.scrolled .menu-btn { color: var(--ink); text-shadow: none; }
body.scrolled .menu-btn:hover { color: var(--wine); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 13.5rem; margin: 0; padding: .45rem; list-style: none;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(36,30,25,.4);
}
.menu-panel li a {
  display: block; padding: .68rem .85rem; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.menu-panel li a:hover { background: var(--paper-2); color: var(--wine); }

/* ---- the story sits centred between the hero and the tour ----------- */
.story { display: flex; align-items: center; min-height: 74svh; }
.story-center { text-align: left; }
.story-quote { margin: 1.4rem 0 1.1rem; padding: 0; border: 0; }
.story-quote p {
  font-family: var(--serif); font-size: clamp(1.18rem, 2.6vw, 1.45rem);
  line-height: 1.55; color: var(--ink-2); margin-bottom: 1.05rem;
}
.story-quote cite {
  display: block; font-style: normal; font-family: var(--sans);
  font-size: .95rem; font-weight: 600; color: var(--ink-3); margin-top: .4rem;
}
.story-bridge { font-size: 1.06rem; color: var(--ink-2); max-width: 58ch; }
.text-link {
  display: inline-block; margin-top: .6rem;
  font-weight: 700; color: var(--wine); text-decoration: none;
  border-bottom: 2px solid rgba(110,43,43,.28); padding-bottom: 2px;
  transition: border-color 160ms ease;
}
.text-link:hover { border-color: var(--wine); }

/* ---- THE TOUR: sideways on your own scroll --------------------------- */
.tour { background: var(--paper); }
.tour-head { padding-block: clamp(2.6rem, 7vh, 4.5rem) 0; }
.tour-run { position: relative; }               /* height set by JS       */
.tour-pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.tour-track {
  display: flex; gap: clamp(1rem, 3vw, 2.4rem);
  padding-inline: clamp(1.15rem, 5vw, 3.2rem);
  will-change: transform;
}
.tour-card {
  flex: 0 0 auto; margin: 0;
  width: min(78vw, 880px);
}
@media (max-width: 640px) { .tour-card { width: 86vw; } }
.tour-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: 0 18px 44px -22px rgba(36,30,25,.45);
}
@media (min-height: 700px) {
  .tour-card img { aspect-ratio: auto; height: min(62svh, 640px); }
}
.tour-card figcaption { padding: .85rem .2rem 0; }
.tour-card h3 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 .2rem;
}
.tour-card figcaption p {
  margin: 0; color: var(--ink-2); font-size: 1rem; max-width: 44ch;
}
/* no JS, or reduced motion: the same cards as a quiet column */
.no-js .tour-run, .tour-static .tour-run { height: auto !important; }
.no-js .tour-pin, .tour-static .tour-pin { position: static; height: auto; overflow: visible; }
.no-js .tour-track, .tour-static .tour-track {
  flex-direction: column; transform: none !important;
  max-width: var(--wrap); margin: 0 auto; padding-block: 1.5rem;
}
.no-js .tour-card, .tour-static .tour-card { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .tour-run { height: auto !important; }
  .tour-pin { position: static; height: auto; overflow: visible; }
  .tour-track { flex-direction: column; transform: none !important;
    max-width: var(--wrap); margin: 0 auto; padding-block: 1.5rem; }
  .tour-card { width: 100%; }
  .tour-card img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---- the rail's first card arrives whole ----------------------------- */
.rail {
  scroll-padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

/* ---- the scorerow: their Airbnb category ratings --------------------- */
.scorerow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin: 2rem 0;
  background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r);
  overflow: hidden;
}
.scorerow > div { background: var(--paper); padding: 1rem .6rem; text-align: center; }
.scorerow dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.scorerow dd {
  margin: .25rem 0 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .scorerow { grid-template-columns: 1fr 1fr; } }
/* the one sentence that sells the whole place — set as the section's own
   voice, bigger than any card, before the grid of ordinary reviews */
.destination-quote {
  margin: 2.2rem 0 0; padding: 0;
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.35; color: var(--ink);
}
.destination-quote em { font-style: italic; color: var(--wine); }
.destination-quote cite {
  display: block; margin-top: .7rem; font-family: var(--sans, inherit);
  font-style: normal; font-size: .85rem; color: var(--ink-3, var(--ink-2));
}
@media (min-width: 720px) {
  .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; align-items: start; }
}
.review-card {
  margin: 1.8rem 0 0; padding: 1.5rem 1.6rem;
  background: var(--paper-2); border-left: 3px solid var(--wine);
  border-radius: 0 var(--r) var(--r) 0;
}
.review-card blockquote {
  margin: 0; font-family: var(--serif);
  font-size: clamp(1.12rem, 2.4vw, 1.32rem); line-height: 1.55; color: var(--ink);
}
.review-card figcaption {
  margin-top: .8rem; font-size: .94rem; font-weight: 600; color: var(--ink-3);
}
.reviews .stars { color: var(--wine); letter-spacing: .08em; }

/* ---- the rate line above the calendar -------------------------------- */
.cal-rate { font-size: 1.12rem; color: var(--ink); margin: 0 0 1.2rem; }
.cal-rate b {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cal-rate .hint { display: block; margin-top: .15rem; }
.cal-min {
  display: block; margin-top: .45rem;
  color: var(--wine); font-weight: 600; font-size: .96rem;
}

/* ---- the map ---------------------------------------------------------- */
.map-frame {
  margin: 2rem auto 0; max-width: var(--wrap);
  padding-inline: var(--pad);
}
/* ⚠️ No iframe here any more (15 Aug, late): OSM's embed went WebGL and
   rendered nothing on machines without it. manor.js lays raster tiles
   straight into .map-canvas — see the note in index.html. */
.map-canvas {
  display: block; position: relative; overflow: hidden;
  width: 100%; height: 440px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--paper-2);
}
@media (max-width: 640px) { .map-canvas { height: 380px; } }
.map-tile {
  position: absolute; width: 256px; height: 256px;
  max-width: none;                    /* the global img rule would squash it */
  filter: saturate(.82) contrast(.98);/* settle OSM's palette into the page */
}
.map-pin {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 42px; transform: translate(-50%, -100%);
  background: var(--wine);
  clip-path: polygon(50% 100%, 8% 42%, 14% 16%, 50% 0, 86% 16%, 92% 42%);
}
.map-pin::after {
  content: ""; position: absolute; left: 50%; top: 13px;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%); background: var(--paper);
}
.map-attr {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  font-size: .72rem; color: var(--ink-3);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: .15rem .5rem; border-top-left-radius: var(--r);
}
.map-attr a { color: inherit; }
.map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.2rem; }
.map-foot .note { margin: 0; }

/* ---- reveals: one soft rise per heading ------------------------------ */
.rv2 { opacity: 0; transform: translateY(16px);
  transition: opacity .65s ease, transform .65s ease; }
.rv2.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv2 { opacity: 1; transform: none; transition: none; }
}

/* ---- subpages --------------------------------------------------------- */
.sub-main { padding-top: 76px; }
.sub-img { margin: 2.2rem auto; max-width: var(--wrap); padding-inline: var(--pad); }
.sub-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 16/9;
  object-fit: cover; border-radius: var(--r);
}
.prose h3 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 2.2rem 0 .6rem;
}
.amen-grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr; margin-top: 1.4rem;
}
@media (min-width: 820px) { .amen-grid { grid-template-columns: 1fr 1fr; } }
.amen-col h3 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.35rem; margin: 1.6rem 0 .5rem;
}
.amen-col ul { margin: 0; padding-left: 1.15rem; }
.amen-col li { margin-bottom: .45rem; color: var(--ink-2); }
.amen-col .fine { display: block; font-size: .88rem; color: var(--ink-3); }

/* ---- verification round 2 fixes (CDP screenshots, 15 Aug night) ----- */
/* the bar wrapped both labels onto two cramped lines at 390 */
.brand, .brand span, .menu-btn { white-space: nowrap; }
@media (max-width: 459px) {
  .bar { gap: .45rem; padding-inline: .8rem; }
  .brand { font-size: .95rem; gap: .4rem; }
  .brand svg { width: 22px; height: 22px; }
  .menu-btn { padding: .5rem .45rem; font-size: .92rem; }
}
/* reveals: quicker and smaller, so slow scrolling never reads as broken */
.rv2 { transform: translateY(10px); transition-duration: .42s, .42s; }

/* (15 Aug's fixed-iframe-height rules removed 15 Aug with the iframe
   itself — .map-canvas above carries the same fixed heights.) */

/* ================= 8/15 late additions =================
   Mason: "use more photos after the area section… don't just drop a
   photo in… minimal but not plain — little hints of premium touches."
   Everything below is that pass: the two featured attractions with the
   owners' own photos and words, the diptych interlude, the booking-side
   photograph, the history strip on the story page, and the .ph settle —
   a photo treatment distinct from the rv2 text rise: the image eases
   from 1.045 scale to rest as it fades in, caption following. */

/* ---- .ph: the photo-settle reveal --------------------------------- */
.ph { opacity: 0; }
.ph img { transform: scale(1.045); }
.ph, .ph img {
  transition: opacity .85s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.ph figcaption { opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease .3s, transform .6s ease .3s; }
.ph.in, .ph.in figcaption { opacity: 1; transform: none; }
.ph.in img { transform: none; }
.ph-2 { transition-delay: .12s; } .ph-2 img { transition-delay: .12s; }
.ph-3 { transition-delay: .24s; } .ph-3 img { transition-delay: .24s; }
/* photographs must never be hostage to JS or motion settings */
.no-js .ph, .no-js .ph img, .no-js .ph figcaption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ph, .ph img, .ph figcaption { opacity: 1; transform: none; transition: none; }
}
/* same guard the reveals always needed: text may not require JS */
.no-js .rv2 { opacity: 1; transform: none; }

/* ---- the two featured attractions --------------------------------- */
.area-features {
  display: grid; gap: clamp(1.6rem, 4vw, 2.6rem);
  grid-template-columns: 1fr; margin-top: clamp(2.4rem, 6vh, 4rem);
}
@media (min-width: 860px) { .area-features { grid-template-columns: 1fr 1fr; } }
.area-feature { margin: 0; overflow: hidden; }
.area-feature .af-media { overflow: hidden; border-radius: var(--r); }
.area-feature img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); border: 1px solid var(--edge);
}
.area-feature figcaption { padding: 1.1rem .2rem 0; }
.af-time {
  font-family: var(--serif); font-style: italic; color: var(--cedar);
  font-size: 1.05rem; margin: 0 0 .15rem;
}
.area-feature h3 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 0 0 .45rem;
}
.area-feature figcaption p { font-size: 1rem; line-height: 1.6; margin-bottom: .5rem; }
.af-addr { color: var(--ink-3); font-size: .92rem !important; }
.af-credit { color: var(--ink-3); font-size: .8rem !important; }

/* ---- the interlude diptych ---------------------------------------- */
.interlude { background: var(--dark); padding-block: 0 clamp(2rem, 5vh, 3.4rem); }
.diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.diptych figure { margin: 0; }
.diptych img {
  display: block; width: 100%; height: clamp(420px, 78svh, 720px);
  object-fit: cover;
}
.interlude-line {
  color: var(--paper); text-align: center; margin: 0 auto;
  padding-top: clamp(1.6rem, 4vh, 2.6rem);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}
.interlude-line span {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fff; margin-bottom: .3rem;
}

/* ---- the booking side photograph ---------------------------------- */
.booking-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .booking-grid { grid-template-columns: minmax(0, 620px) 1fr; align-items: start; }
}
.booking-side { margin: 0; }
.booking-side img {
  display: block; width: 100%; height: auto; max-height: 78svh;
  object-fit: cover; border-radius: var(--r);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 44px -26px rgba(36,30,25,.55);
}
.booking-side figcaption {
  margin-top: .7rem; font-size: .95rem; color: var(--ink-3);
  border-left: 2px solid var(--cedar); padding-left: .7rem;
}
@media (max-width: 979px) { .booking-side { max-width: 560px; } }

/* ---- the history strip (story page) ------------------------------- */
.history {
  display: grid; gap: clamp(1.6rem, 4vw, 2.4rem);
  grid-template-columns: 1fr; margin: clamp(2.2rem, 6vh, 3.6rem) auto;
}
@media (min-width: 820px) {
  .history { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}
.hist { margin: 0; }
.hist img {
  display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--edge);
  background: #fff; padding: 6px;                /* the archival mat */
  box-shadow: 0 14px 30px -22px rgba(36,30,25,.6);
}
.hist figcaption { margin-top: .8rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.hist figcaption b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.35rem; color: var(--ink); margin-bottom: .15rem;
}
.hist-src { display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-3); }

/* ?fx=off — the verification hook's CSS side: reveals snap to done. */
.fx-off .rv2, .fx-off .ph, .fx-off .ph img, .fx-off .ph figcaption {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ================= 8/15, the last-touches pass =================
   Mason: one bold hero line; booking on one desktop screen; the photo
   stutter on mobile; every photograph used once; small premium touches. */

/* ---- hero: one bold line, words carried by a corner scrim ---------- */
.eyebrow-rule {
  display: inline-block; width: 34px; height: 2px;
  background: #D3B489; vertical-align: middle; margin-right: .6rem;
}
.hero-words h1 { font-size: clamp(2.4rem, 7.4vw, 4.5rem); }
.hero-sub { max-width: 44ch; }
/* the shade earns the corner: a low radial pool under the words, so the
   type never fights the photograph and never needs a box */
.hero-shade {
  background:
    radial-gradient(115% 85% at 16% 92%, rgba(24,18,13,.66) 0%, rgba(24,18,13,.28) 38%, transparent 62%),
    linear-gradient(180deg, rgba(34,27,22,.40) 0%, rgba(34,27,22,.06) 34%,
                            rgba(34,27,22,.30) 72%, rgba(34,27,22,.62) 100%);
}
/* a tailored base: the wine hairline the whole palette hangs from */
.hero { border-bottom: 4px solid var(--wine); }

/* ---- booking on one desktop screen --------------------------------- */
.booking { padding-block: clamp(2.2rem, 5vh, 3.4rem); }
.booking .cal { margin-top: 0; }
@media (min-width: 980px) {
  .booking-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; }
  .booking-col h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); }
  .booking-col .lede { margin-bottom: .6rem; }
}
@media (max-width: 979px) { .booking .cal { margin-top: 1.4rem; } }

/* ---- ask: form + the quiet aside ----------------------------------- */
.ask-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .ask-grid { grid-template-columns: minmax(0, 620px) 1fr; align-items: start; }
}
.ask-side { margin: 0; }
.ask-side figure { margin: 0; }
.ask-side img {
  display: block; width: 100%; height: auto; max-height: 52svh;
  object-fit: cover; border-radius: var(--r); border: 1px solid var(--edge);
  box-shadow: 0 18px 44px -26px rgba(36,30,25,.55);
}
.ask-side figcaption {
  margin-top: .7rem; font-size: .95rem; color: var(--ink-3);
  border-left: 2px solid var(--cedar); padding-left: .7rem;
}
.welcome-back {
  background: var(--paper-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--cedar);
  border-radius: 10px; padding: .8rem 1rem; font-size: .98rem;
}
.welcome-back a { color: var(--wine); }

/* quick answers — native details, styled calm */
.qa { margin-top: 2rem; }
.qa-head {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.35rem; margin: 0 0 .6rem;
}
.qa details { border-bottom: 1px solid var(--edge); }
.qa summary {
  cursor: pointer; list-style: none; position: relative;
  padding: .85rem 2rem .85rem 0; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%;
  transform: translateY(-50%); color: var(--wine);
  font-family: var(--serif); font-size: 1.3rem;
}
.qa details[open] summary::after { content: "\2212"; }
.qa details p { margin: 0 0 .95rem; font-size: .98rem; color: var(--ink-2); }

/* ---- amenities page photos ----------------------------------------- */
.amen-photos {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: 1fr; margin: 2rem auto;
}
@media (min-width: 700px) { .amen-photos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .amen-photos { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.amen-photos figure { margin: 0; }
.amen-photos img {
  display: block; width: 100%; height: clamp(260px, 38svh, 420px);
  object-fit: cover; border-radius: var(--r); border: 1px solid var(--edge);
}

/* ---- mobile: the scroll stutter (8/15) ------------------------------
   Two costs found: backdrop-filter blurring every frame behind the bar,
   and the .ph scale transition compositing full-width photographs while
   the thumb is still moving. Neither earns its price on a phone. */
@media (max-width: 640px) {
  .bar { -webkit-backdrop-filter: none; backdrop-filter: none;
         background: rgba(242, 238, 230, .97); }
  .ph img { transform: none; transition: opacity .85s ease; }
}
/* the eyebrow held one line on desktop but wrapped at 390 — verified */
@media (max-width: 480px) {
  .eyebrow { font-size: .8rem; letter-spacing: .09em; }
  .eyebrow-rule { width: 26px; margin-right: .45rem; }
}

/* ---------------------------------------------------------------------
   WAYS TO PAY — Mason 8/28 round 2: names only, tucked under the rate
   in the booking column so it fills the space beside the calendar.
   No links, no handles; details travel in the owners' confirmation. */
.payways { margin-top: 1.6rem; padding-top: 1.15rem; border-top: 1px solid var(--edge); }
.payways-head {
  margin: 0 0 .3rem; font-family: var(--serif); font-weight: 600;
  color: var(--ink); font-size: 1.05rem;
}
.payways-row { margin: 0; font-size: .98rem; color: var(--ink-2); }
.payways-note { margin: .45rem 0 0; font-size: .9rem; color: var(--ink-3); max-width: 46ch; }