/* ============================================================
   A PLACE TO STAY - DESIGN SYSTEM
   ------------------------------------------------------------
   System identity: "HEARTH" - editorial / literary / lived-in.
   A warm-forest lodging mark. Deliberately distinct from the
   other Good Website Co. demos. Do NOT generalize or reuse as
   a template.

   Locked rules:
   - Warm forest palette. Hearth Brick (#9B4A2E) is the single
     signature color, used ONCE per region like a wax seal -
     NEVER as a button fill. Buttons/links are Pine Needle that
     fill on hover. Customers convert by reading.
   - Spectral (the literary display serif - italics carry room
     names, the interstitial quote + the hero) + Hanken Grotesk
     (the humanist body grotesque). Spectral runs delicate at
     size, so display weights are dropped to 300/400 and tracking
     is pulled tighter; Hanken has a tall x-height, so body sits a
     hair smaller and uppercase tracking is widened.
     NO monospace anywhere - small caps carry the labels.
     NO numeric ids/folios/section numbers anywhere.
   - Sharp rectangles, no radius. Generous air, line-height 1.65.
   - Motion: ~0.5s scroll reveals, a slow hero Ken Burns, a brick
     underline on Reserve links, and a card image that eases up
     on hover - all fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---- 1. TOKENS -------------------------------------------- */
:root {
  --pine-needle:      #2D3A2E;
  --pine-needle-deep: #1A241B;
  --hearth-brick:     #9B4A2E;
  --hearth-brick-soft:#B86A4E;
  --linen:            #EAE3D2;
  --linen-light:      #F3EEDD;
  --walnut:           #34281D;   /* darkened a touch for AA on linen */
  --walnut-soft:      #5A4A3C;   /* a11y: ~5.4:1 on linen (was ~4.0:1) */
  --birchbark:        #C9C0AC;
  /* the single counter-note: a cool dusk slate, used only in
     the dusk interstitial scrim + the availability cue dot. */
  --dusk-slate:       #4C5A60;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1140px;
  --measure: 66ch;
  --gutter: clamp(22px, 5vw, 64px);
  --nav-h: 76px;

  --photo-overlay: linear-gradient(
    to top,
    rgba(26, 36, 27, 0.62),
    rgba(26, 36, 27, 0.12)
  );

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---- 2. RESET --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;          /* belt-and-braces: no horizontal scroll on narrow phones */
  background: var(--linen);
  color: var(--walnut);
  font-family: var(--body);
  font-size: 16.5px;          /* Hanken's tall x-height reads a touch larger than Inter */
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.002em;    /* a whisper open, to settle Hanken's tight default fit */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--hearth-brick); color: var(--linen-light); }
:focus-visible { outline: 2.5px solid var(--hearth-brick); outline-offset: 3px; }

/* ---- 2b. SKIP LINK ---------------------------------------- */
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--pine-needle-deep); color: var(--linen-light);
  font-family: var(--body); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.04em; padding: 12px 18px; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 14px; }

/* ---- 3. TYPE PRIMITIVES ----------------------------------- */
/* Spectral is a high-contrast, fairly delicate serif: it wants a
   slightly heavier optical weight than Source Serif did, but TIGHTER
   tracking at size so the thin strokes knit into a solid line. */
.serif { font-family: var(--display); font-weight: 400; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--pine-needle); margin: 0; line-height: 1.1; }
h1 { font-size: clamp(3rem, 6.4vw, 5.2rem); font-weight: 400; letter-spacing: -0.018em; line-height: 1.03; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); font-weight: 500; letter-spacing: -0.012em; }
h3 { font-size: 1.32rem; font-weight: 500; letter-spacing: -0.006em; }
p { margin: 0 0 1.15em; max-width: var(--measure); }
.italic { font-style: italic; }
.subhead { font-family: var(--display); font-weight: 600; letter-spacing: -0.006em; }

/* small caps carry the labels (no mono, no numbers) */
.sc {
  font-family: var(--display);
  font-variant: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.07em;   /* Spectral's small caps sit a touch tighter; open them up */
  font-weight: 500;
}

/* ---- 4. LAYOUT -------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 132px); }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.section--linen-light { background: var(--linen-light); }
.section--pine { background: var(--pine-needle); color: var(--linen); }
.section--pine h1, .section--pine h2, .section--pine h3 { color: var(--linen-light); }
.lede { font-size: clamp(1.24rem, 2.1vw, 1.56rem); line-height: 1.46; font-family: var(--display); font-weight: 400; letter-spacing: -0.008em; color: var(--pine-needle); max-width: 30ch; }

/* ---- 5. SECTION LABEL (number-free) ----------------------- */
/* "The Grounds  ───────  Outside, there is more outside"
   The brick tick replaces the retired Roman numeral. */
.rlabel {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.rlabel__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -0.012em; color: var(--pine-needle); white-space: nowrap; display: inline-flex; align-items: baseline; gap: 12px; }
.section--pine .rlabel__title { color: var(--linen-light); }
.rlabel__tick { color: var(--hearth-brick); font-size: 0.7em; transform: translateY(-0.12em); flex: none; } /* brick diamond, the one wax-seal touch */
.rlabel__rule { flex: 1; height: 1px; background: var(--birchbark); transform: translateY(-6px); }
.section--pine .rlabel__rule { background: rgba(201,192,172,0.4); }
.rlabel__meta {
  font-family: var(--display);
  font-variant: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--walnut-soft);
  white-space: nowrap;
}
.section--pine .rlabel__meta { color: var(--birchbark); }
@media (max-width: 620px) {
  .rlabel { flex-wrap: wrap; gap: 8px 14px; }
  .rlabel__rule { display: none; }
}

/* ---- 6. BUTTON (outline, fills on hover - NO color CTA) --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 14px 30px;
  border: 1.5px solid var(--pine-needle);
  border-radius: 0;
  background: transparent;
  color: var(--pine-needle);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.btn .arr { transition: transform 200ms var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }
.btn:hover, .btn:focus-visible { background: var(--pine-needle); color: var(--linen); }
.section--pine .btn { border-color: var(--linen); color: var(--linen-light); }
.section--pine .btn:hover, .section--pine .btn:focus-visible { background: var(--linen); color: var(--pine-needle); }

/* ---- 7. RESERVE LINK (persistent brick underline) --------- */
/* a11y: underline is PRESENT at rest, and grows full on hover. */
.reserve {
  position: relative;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--pine-needle);
  padding-bottom: 3px;
}
.section--pine .reserve { color: var(--linen-light); }
.reserve::before { /* the resting underline - always visible */
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--birchbark);
}
.section--pine .reserve::before { background: rgba(201,192,172,0.5); }
.reserve::after { /* the brick fill, grows on hover */
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--hearth-brick);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}
.reserve:hover::after, .reserve:focus-visible::after { transform: scaleX(1); }

/* ---- 8. NAV (sticky; real hamburger below 800px) ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(234,227,210,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--birchbark);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 34px); align-items: center; }
.nav__links a {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.13em;   /* Hanken caps are airier than Inter; widen the track */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--walnut);
  position: relative;
  padding: 4px 0;
  transition: color 160ms var(--ease);
}
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--hearth-brick); transition: width 200ms var(--ease); }
.nav__links a:hover { color: var(--pine-needle); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--hearth-brick); }
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__cta { display: inline-flex; }
.nav .reserve { color: var(--pine-needle); }

/* hamburger button */
.nav__toggle {
  display: none;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--birchbark); background: transparent;
  cursor: pointer; align-items: center; justify-content: center;
  transition: border-color 180ms var(--ease);
}
.nav__toggle:hover { border-color: var(--pine-needle); }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--pine-needle); position: relative; transition: background-color 180ms var(--ease); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--pine-needle); transition: transform 280ms var(--ease), top 280ms var(--ease); }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* full-screen linen overlay menu */
.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--linen-light);
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
  visibility: hidden;
  display: flex; flex-direction: column;
  padding: clamp(96px, 14vh, 132px) var(--gutter) 40px;
  overflow-y: auto;
}
.menu.open { transform: translateY(0); visibility: visible; }
.menu__label { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.16em; font-size: 1rem; color: var(--walnut-soft); margin-bottom: 8px; }
.menu__close { position: absolute; top: 18px; right: var(--gutter); width: 46px; height: 46px; border: 1px solid var(--birchbark); background: transparent; cursor: pointer; color: var(--pine-needle); display: flex; align-items: center; justify-content: center; }
.menu__close:hover { border-color: var(--pine-needle); }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 3.6rem); letter-spacing: -0.016em;
  color: var(--pine-needle); text-decoration: none;
  padding: 16px 0; border-bottom: 1px solid var(--birchbark);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.menu__links a .ar { font-size: 0.4em; color: var(--hearth-brick); transform: translateY(-0.3em); }
.menu__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.menu__foot .reserve { color: var(--pine-needle); font-size: 1rem; align-self: flex-start; }
.menu__foot a.tel { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--pine-needle); text-decoration: none; }
body.menu-open { overflow: hidden; }

@media (max-width: 800px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---- 9. WORDMARK / LOGO ----------------------------------- */
/* Clean lockup: a calm gabled-roof emblem + the name set in
   Spectral, divided by the brick keyline rule. Favicon-safe. */
.wordmark { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--pine-needle); }
.wordmark__mark { width: 38px; height: 38px; flex: none; }
.wordmark__type { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-family: var(--display); font-weight: 600; font-size: 1.36rem; letter-spacing: -0.004em; color: var(--pine-needle); }
.wordmark__rule { width: 100%; height: 1.5px; background: var(--hearth-brick); margin: 5px 0; }
.wordmark__sub { font-family: var(--body); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--walnut-soft); }
@media (max-width: 800px) { .wordmark__name { font-size: 1.2rem; } .wordmark__mark { width: 34px; height: 34px; } }
@media (max-width: 380px) { .wordmark__sub { display: none; } .wordmark__rule { display: none; } }

/* ---- 10. HERO (the moment) -------------------------------- */
.hero { position: relative; background: var(--pine-needle-deep); color: var(--linen); overflow: hidden; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 112%;
  object-fit: cover; object-position: center 42%;
  will-change: transform;
}
/* slow Ken Burns; gated below */
@keyframes kenburns { from { transform: scale(1.0) translateY(0); } to { transform: scale(1.08) translateY(-2%); } }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26,36,27,0.72) 0%, rgba(26,36,27,0.18) 46%, rgba(26,36,27,0.34) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(26,36,27,0.55), transparent 60%); /* vignette toward bottom */
}
.hero__vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 40px rgba(20,28,21,0.55); }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.85) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}
.hero__inner { position: relative; padding-block: clamp(120px, 22vw, 240px); }
.hero__eyebrow {
  font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1;
  letter-spacing: 0.18em; font-size: 1.05rem; font-weight: 500; color: var(--linen-light);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.hero__eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--hearth-brick-soft); flex: none; }
/* THE MOMENT: Spectral pushed into a true display register - a big,
   airy, high-contrast headline. The light weight (300) keeps the thin
   strokes feeling architectural rather than thin; tracking is pulled
   in hard so the line reads as one carved object. */
.hero h1 {
  color: var(--linen-light);
  max-width: 15ch;
  font-size: clamp(2.4rem, 8vw, 6.6rem);   /* lower floor so the forced line fits a 375px column */
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 0.99;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero__deck { font-family: var(--display); font-size: clamp(1.2rem, 2.3vw, 1.55rem); font-weight: 400; line-height: 1.42; letter-spacing: -0.006em; max-width: 40ch; margin: 28px 0 0; color: var(--linen-light); }
.hero__actions { margin-top: clamp(34px, 5vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.hero__actions .btn { border-color: var(--linen); color: var(--linen-light); }
.hero__actions .btn:hover, .hero__actions .btn:focus-visible { background: var(--linen); color: var(--pine-needle); }
/* the primary Check-dates button reads filled at rest so the book path
   leads; it is Linen (not hearth-brick), preserving the wax-seal rule. */
.hero__actions .btn:not(.btn--ghost) { background: var(--linen-light); color: var(--pine-needle); border-color: var(--linen-light); }
.hero__actions .btn:not(.btn--ghost):hover, .hero__actions .btn:not(.btn--ghost):focus-visible { background: transparent; color: var(--linen-light); border-color: var(--linen); }
/* the secondary "See the rooms" stays a quiet outline */
.btn--ghost { border-color: rgba(234,227,210,0.45); }
.hero__from { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.98rem; color: var(--birchbark); }
.hero__from b { color: var(--linen-light); font-weight: 600; }
/* scroll cue */
.hero__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--birchbark); font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.14em; font-size: 0.8rem; }
.hero__cue .ln { width: 1px; height: 32px; background: linear-gradient(var(--hearth-brick-soft), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 540px) { .hero__cue { display: none; } }

/* ---- 11. BRAND LOCKUP (recurring motif) ------------------- */
.lockup { text-align: center; }
.lockup__top { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.16em; font-size: 1.05rem; color: var(--pine-needle); }
.section--pine .lockup__top, .footer .lockup__top { color: var(--linen-light); }
.lockup__rule { width: 60px; height: 2px; background: var(--hearth-brick); margin: 14px auto; }
.lockup__bottom { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.18em; font-size: 0.85rem; color: var(--walnut-soft); }
.footer .lockup__bottom { color: var(--birchbark); }

/* ---- 12. EDITORIAL TWO-COLUMN ----------------------------- */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.editorial--text-first .editorial__media { order: 2; }
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } .editorial--text-first .editorial__media { order: 0; } }
.editorial__media { position: relative; overflow: hidden; }
.editorial__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pine-needle-deep); transition: transform 1.1s var(--ease); }
.editorial__media:hover img { transform: scale(1.04); }
.editorial figure { margin: 0; }
.editorial figcaption { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--walnut-soft); margin-top: 10px; }

/* ---- 12b. FULL-BLEED INTERSTITIAL (rhythm break) ---------- */
/* the one density change + the counter-note (dusk slate scrim) */
.interstitial { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; background: var(--pine-needle-deep); }
.interstitial__media { position: absolute; inset: 0; overflow: hidden; }
.interstitial__media img { width: 100%; height: 118%; object-fit: cover; object-position: center 35%; background: var(--pine-needle-deep); will-change: transform; }
.interstitial__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,21,0.86) 0%, rgba(20,28,21,0.5) 46%, rgba(76,90,96,0.28) 100%); }
.interstitial__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255,255,255,0.85) 0.5px, transparent 0.6px); background-size: 3px 3px; }
.interstitial .wrap { position: relative; z-index: 2; padding-block: clamp(64px, 9vw, 110px); }
.interstitial blockquote { margin: 0; max-width: 24ch; }
.interstitial__q { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(2.1rem, 5.6vw, 3.9rem); line-height: 1.1; color: var(--linen-light); letter-spacing: -0.018em; }
.interstitial__by { margin-top: 24px; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.1em; font-size: 0.95rem; color: var(--birchbark); display: inline-flex; align-items: center; gap: 12px; }
.interstitial__by::before { content: ""; width: 26px; height: 1px; background: var(--hearth-brick-soft); }

/* ---- 13. CABIN GRID --------------------------------------- */
.cabins { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .cabins { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cabins { grid-template-columns: 1fr; } }

.cabin { display: flex; flex-direction: column; }
.cabin__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pine-needle-deep); }
.cabin__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.cabin__media::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); opacity: 0.5; transition: opacity 0.5s var(--ease); }
.cabin:hover .cabin__media img, .cabin:focus-within .cabin__media img { transform: scale(1.06); }
.cabin:hover .cabin__media::after, .cabin:focus-within .cabin__media::after { opacity: 0.28; }
.cabin__head { display: flex; align-items: baseline; gap: 11px; margin: 18px 0 6px; }
.cabin__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hearth-brick); flex: none; transform: translateY(-2px); } /* the one hearth-brick touch */
.cabin__name { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.62rem; letter-spacing: -0.008em; color: var(--pine-needle); line-height: 1.08; }
.cabin__desc { color: var(--walnut); font-size: 0.98rem; margin: 0 0 16px; }
.cabin__access { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.04em; font-size: 0.84rem; color: var(--walnut-soft); margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; line-height: 1.4; }
.cabin__access span { color: var(--hearth-brick-soft); font-size: 0.7em; flex: none; }
.cabin__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.cabin__rate { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.04em; font-size: 0.9rem; color: var(--walnut-soft); text-align: right; }
.cabin__actions { display: inline-flex; align-items: baseline; gap: 18px; }

/* ---- 14. JOURNAL (list, not cards) ------------------------ */
.journal { border-top: 1px solid var(--birchbark); max-width: 820px; }
.journal__item { display: grid; grid-template-columns: 150px 1fr; gap: 8px 28px; padding: 28px 0; border-bottom: 1px solid var(--birchbark); align-items: baseline; }
.journal__date { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.08em; color: var(--hearth-brick); font-size: 0.95rem; }
.journal__title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.008em; color: var(--pine-needle); margin: 0 0 6px; line-height: 1.14; }
.journal__desc { margin: 0; color: var(--walnut); font-size: 0.98rem; }
@media (max-width: 620px) { .journal__item { grid-template-columns: 1fr; gap: 6px; } }
/* openable journal entries (details/summary, no extra pages) */
.journal__item--open { display: block; padding: 0; }
.journal__item--open > summary { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px 28px; align-items: baseline; padding: 28px 0; cursor: pointer; list-style: none; }
.journal__item--open > summary::-webkit-details-marker { display: none; }
.journal__item--open > summary:hover .journal__title { color: var(--hearth-brick); }
.journal__item--open .journal__more { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--walnut-soft); align-self: center; white-space: nowrap; transition: color 160ms var(--ease); }
.journal__item--open[open] .journal__more { color: var(--hearth-brick); }
.journal__item--open .journal__more .chev { display: inline-block; transition: transform 0.25s var(--ease); }
.journal__item--open[open] .journal__more .chev { transform: rotate(180deg); }
/* homepage teaser: whole row is a link to the full entry */
.journal__item--link { grid-template-columns: 150px 1fr auto; text-decoration: none; color: inherit; transition: none; }
.journal__item--link:hover .journal__title { color: var(--hearth-brick); }
.journal__item--link .journal__more { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--walnut-soft); align-self: center; white-space: nowrap; }
.journal__item--link:hover .journal__more { color: var(--hearth-brick); }
.journal__item--link .journal__more .chev { display: inline-block; transition: transform 0.2s var(--ease); }
.journal__item--link:hover .journal__more .chev { transform: translateX(3px); }
@media (max-width: 620px) { .journal__item--link { grid-template-columns: 1fr; gap: 6px; } .journal__item--link .journal__more { grid-column: 1; justify-self: start; } }
.journal__body { grid-column: 2 / 3; padding: 0 0 32px; max-width: 60ch; }
.journal__body p { color: var(--walnut); font-size: 1rem; }
.journal__body p:last-child { margin-bottom: 0; }
.journal__item--open > summary:focus-visible { outline: 2.5px solid var(--hearth-brick); outline-offset: -4px; }
@media (max-width: 620px) {
  .journal__item--open > summary { grid-template-columns: 1fr; gap: 6px; }
  .journal__item--open .journal__more { grid-column: 1; justify-self: start; margin-top: 4px; }
  .journal__body { grid-column: 1; }
}

/* ---- 15. INQUIRY FORM (styled; mock dialog handles submit) - */
.form { max-width: 640px; }
.form__row { margin-bottom: 22px; }
.form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 540px) { .form__row--split { grid-template-columns: 1fr; } }
.form label { display: block; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.9rem; color: var(--pine-needle); margin-bottom: 7px; }
.form input, .form select, .form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--walnut);
  background: var(--linen-light);
  border: 1px solid var(--birchbark);
  border-radius: 0;
  padding: 12px 14px;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--pine-needle); box-shadow: inset 0 0 0 1px var(--pine-needle); }
.form textarea { resize: vertical; min-height: 110px; }

/* ---- 15b. STICKY RESERVE BAR (the conversion affordance) -- */
.reservebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--pine-needle-deep); color: var(--linen);
  border-top: 2px solid var(--hearth-brick);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.reservebar.show { transform: translateY(0); }
.reservebar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 13px 0; }
.reservebar__copy { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.reservebar__rate { font-family: var(--display); font-size: 1.05rem; color: var(--linen-light); }
.reservebar__rate b { font-weight: 600; }
.reservebar__rate i { font-style: italic; color: var(--hearth-brick-soft); }
.reservebar__avail { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--birchbark); display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.reservebar__avail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dusk-slate); box-shadow: 0 0 0 0 rgba(122,170,160,0.5); flex: none; }
.reservebar .btn { border-color: var(--linen); color: var(--linen-light); white-space: nowrap; }
.reservebar .btn:hover, .reservebar .btn:focus-visible { background: var(--linen); color: var(--pine-needle); }
@media (max-width: 540px) {
  .reservebar__inner { padding: 11px 0; }
  .reservebar__avail { display: none; }
  .reservebar .btn { padding: 12px 20px; }
}
@media print { .reservebar { display: none; } }

/* ---- 15c. MOCK INQUIRY DIALOG ----------------------------- */
.dialog-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,28,21,0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 28px);
}
.dialog-scrim.open { opacity: 1; visibility: visible; }
.dialog {
  display: flex; flex-direction: column;
  width: min(100%, 460px); max-height: min(92vh, 760px);
  background: var(--linen-light);
  border: 1px solid var(--birchbark);
  box-shadow: 0 40px 90px -30px rgba(20,28,21,0.7);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease-out);
  overflow: hidden;
}
.dialog-scrim.open .dialog { transform: none; }
.dialog__head { flex: none; padding: 26px 28px 18px; border-bottom: 1px solid var(--birchbark); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialog__kick { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--hearth-brick); }
.dialog__head h3 { font-family: var(--display); font-size: 1.6rem; margin-top: 6px; color: var(--pine-needle); }
.dialog__head h3 em { font-style: italic; }
.dialog__close { flex: none; width: 40px; height: 40px; border: 1px solid var(--birchbark); background: transparent; cursor: pointer; color: var(--pine-needle); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s var(--ease); }
.dialog__close:hover { border-color: var(--pine-needle); }
.dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 28px 8px; }
.dialog__body .form__row { margin-bottom: 18px; }
.dialog__summary { margin-top: 14px; border-top: 1px solid var(--birchbark); padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.dialog__summary .lab { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--walnut-soft); }
.dialog__summary .amt { font-family: var(--display); font-size: 1.4rem; color: var(--pine-needle); }
.dialog__foot { flex: none; padding: 16px 28px 24px; border-top: 1px solid var(--birchbark); }
.dialog__foot .btn { width: 100%; justify-content: center; }
.dialog__trust { margin-top: 14px; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.05em; font-size: 0.88rem; color: var(--walnut-soft); text-align: center; line-height: 1.5; }
/* confirmation state */
.dialog__done { display: none; padding: 40px 28px 38px; text-align: center; overflow-y: auto; }
.dialog.is-done .dialog__body, .dialog.is-done .dialog__foot { display: none; }
.dialog.is-done .dialog__done { display: block; }
.dialog__done .stamp { width: 80px; height: 80px; margin: 0 auto 22px; }
.dialog__done h3 { font-family: var(--display); font-size: 1.7rem; color: var(--pine-needle); }
.dialog__done h3 em { font-style: italic; }
.dialog__done p { margin: 14px auto 0; color: var(--walnut); font-size: 1rem; max-width: 34ch; }
.dialog__done .ref { margin-top: 16px; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.9rem; color: var(--hearth-brick); }
@media print { .dialog-scrim { display: none; } }

/* ---- 13b. ROOM DETAIL PAGE -------------------------------- */
.room__crumb { margin: 0; }
.room-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.room-shot { margin: 0; position: relative; overflow: hidden; }
.room-shot--lead { grid-column: 1 / -1; }
.room-shot img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--pine-needle-deep); }
.room-shot:not(.room-shot--lead) img { aspect-ratio: 4 / 3; }
.room-shot figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: 7px 12px; background: rgba(26,36,27,0.82); color: var(--linen-light); font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.08em; font-size: 0.78rem; }
@media (max-width: 560px) { .room-gallery { grid-template-columns: 1fr; } }

.room-detail { display: grid; grid-template-columns: 1fr 340px; gap: clamp(36px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .room-detail { grid-template-columns: 1fr; } }
.room-detail__copy p { font-size: 1.06rem; max-width: 60ch; }
.room-book { border: 1px solid var(--birchbark); background: var(--linen-light); padding: clamp(22px, 3vw, 30px); position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 860px) { .room-book { position: static; } }
.room-book__rate { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--birchbark); }
.room-book__rate .lab { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--walnut-soft); }
.room-book__rate .amt { font-family: var(--display); font-size: 1.7rem; color: var(--pine-needle); }
.room-book__total { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.05em; font-size: 0.92rem; color: var(--hearth-brick); margin: 12px 0 20px; }
.room-facts { margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
.room-facts li { font-size: 0.95rem; color: var(--walnut); line-height: 1.45; padding-left: 18px; position: relative; }
.room-facts li::before { content: "\25C6"; position: absolute; left: 0; top: 0.05em; color: var(--hearth-brick-soft); font-size: 0.6em; }

/* ---- 15d. GUEST NOTES (testimonials) ---------------------- */
/* Quiet, editorial proof. A small rating mark (the one hearth-brick
   touch per region) + named, dated guest notes set in Spectral. */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 44px); }
@media (max-width: 820px) { .notes { grid-template-columns: 1fr; max-width: 600px; } }
.note { display: flex; flex-direction: column; gap: 14px; }
.note__stars { display: inline-flex; gap: 3px; color: var(--hearth-brick); font-size: 0.95rem; letter-spacing: 0.08em; }
.note__q { font-family: var(--display); font-weight: 400; font-size: 1.18rem; line-height: 1.42; color: var(--pine-needle); margin: 0; }
.note__by { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.07em; font-size: 0.86rem; color: var(--walnut-soft); display: flex; align-items: center; gap: 10px; margin-top: auto; }
.note__by::before { content: ""; width: 22px; height: 1px; background: var(--hearth-brick-soft); flex: none; }
.notes-rating { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.07em; font-size: 0.95rem; color: var(--walnut-soft); }
.notes-rating b { font-style: normal; font-size: 1.25rem; color: var(--pine-needle); font-variant: normal; letter-spacing: 0; }
.notes-rating .stars { color: var(--hearth-brick); letter-spacing: 0.1em; }

/* ---- 15e. MAP (embedded, real pin) ------------------------ */
.map-embed { position: relative; border: 1px solid var(--birchbark); background: var(--pine-needle-deep); }
.map-embed iframe { display: block; width: 100%; height: clamp(220px, 34vw, 340px); border: 0; filter: saturate(0.82) contrast(0.96); }
.map-cap { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--walnut-soft); margin-top: 10px; }
/* a compact map slot in the footer's Visit column */
.footer .map-embed { margin-top: 12px; border-color: rgba(201,192,172,0.3); }
.footer .map-embed iframe { height: 150px; filter: saturate(0.7) contrast(0.95) brightness(0.92); }

/* ---- 15f. VISIT: LOGISTICS / ACCESS / WHOLE PLACE --------- */
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px) clamp(36px, 6vw, 72px); }
@media (max-width: 720px) { .facts-grid { grid-template-columns: 1fr; } }
.fact h3 { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--pine-needle); margin-bottom: 8px; }
.fact p { margin: 0; color: var(--walnut); }
.access-list { margin: clamp(24px, 3vw, 36px) 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; max-width: 920px; }
@media (max-width: 720px) { .access-list { grid-template-columns: 1fr; } }
.access-list li { font-size: 0.97rem; color: var(--walnut); line-height: 1.5; padding-left: 18px; position: relative; }
.access-list li::before { content: "\25C6"; position: absolute; left: 0; top: 0.15em; color: var(--hearth-brick-soft); font-size: 0.62em; }
.access-list li b { color: var(--pine-needle); font-weight: 600; }
.whole-card { border: 1px solid rgba(201,192,172,0.32); padding: clamp(22px, 3vw, 30px); }
.whole-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(201,192,172,0.18); }
.whole-card__row:first-child { padding-top: 0; }
.whole-card__row .lab { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--birchbark); }
.whole-card__row .val { font-family: var(--display); font-size: 1.15rem; color: var(--linen-light); text-align: right; }
.whole-card__row--contact { border-bottom: 0; }

/* ---- 16. THE FRAMING LINE (intentional-demo note) --------- */
.framing-line { background: var(--linen-light); border-top: 1px solid var(--birchbark); border-bottom: 1px solid var(--birchbark); }
.framing-line .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-block: 22px; }
.framing-line__seal { flex: none; }
.framing-line p { font-family: var(--body); font-size: 0.95rem; line-height: 1.7; color: var(--walnut); max-width: none; flex: 1; min-width: 260px; margin: 0; }
.framing-line p b { color: var(--pine-needle); font-weight: 600; }
.framing-line p a { color: var(--hearth-brick); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }

/* ---- 17. FOOTER ------------------------------------------- */
.footer { background: var(--pine-needle-deep); color: var(--birchbark); }
.footer__lockup { padding-block: clamp(48px, 7vw, 80px); border-bottom: 1px solid rgba(201,192,172,0.18); }
.footer__cols { display: grid; grid-template-columns: 80px 1fr 1fr 1fr; gap: 40px; padding-block: clamp(40px, 6vw, 64px); align-items: start; }
@media (max-width: 820px) { .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__stamp { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__cols { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--linen-light); margin: 0 0 14px; font-weight: 600; }
.footer a { color: var(--birchbark); text-decoration: none; transition: color 160ms var(--ease); }
.footer a:hover { color: var(--linen-light); }
.footer li { margin-bottom: 9px; font-size: 0.95rem; }
.footer__gwc { grid-column: 1 / -1; margin-top: 8px; }
.footer__gwc a { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-variant: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--birchbark); }
.footer__gwc a:hover { color: var(--linen-light); }
.footer__colophon { text-align: center; font-size: 0.78rem; color: var(--walnut-soft); padding-bottom: 30px; }
.footer__colophon { color: #9C8F7B; } /* a11y bump on deep ground */
.footer__stamp svg { width: 80px; height: 80px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 18. SCROLL REVEAL (~0.5s, gated) --------------------- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); will-change: opacity, transform; }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal="2"] { transition-delay: 0.09s; }
html.js [data-reveal="3"] { transition-delay: 0.18s; }
html.js [data-reveal="4"] { transition-delay: 0.27s; }

/* ---- 19. MOTION GUARD ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reserve::after { transform: scaleX(1); }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__img { animation: none !important; }
}

/* ---- 20. GWC DEMO ATTRIBUTION CHIP (number-free) ---------- */
.specimen { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 11px; padding: 9px 13px 9px 11px; border-radius: 12px; background: rgba(26,36,27,0.9); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border: 1px solid rgba(155,74,46,0.45); color: var(--linen-light); text-decoration: none; box-shadow: 0 18px 40px -26px rgba(26,36,27,0.7); transition: transform 0.22s var(--ease), border-color 0.22s var(--ease); }
.specimen:hover { transform: translateY(-2px); border-color: var(--hearth-brick-soft); }
.specimen:focus-visible { outline: 2.5px solid var(--hearth-brick-soft); outline-offset: 3px; }
.specimen .seal { flex: none; }
.specimen .stxt { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--body); }
.specimen .stxt b { font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hearth-brick-soft); }
.specimen .stxt small { font-size: 9.5px; letter-spacing: 0.04em; color: rgba(234,227,210,0.78); margin-top: 2px; }
/* the chip pulls up when the sticky reserve bar is showing, so they don't stack */
.reservebar.show ~ .specimen, body.bar-up .specimen { bottom: 74px; }
@media (max-width: 540px) { .specimen { left: 10px; bottom: 10px; } .specimen .stxt small { display: none; } body.bar-up .specimen { bottom: 66px; } }
@media print { .specimen { display: none; } }