/* ==========================================================================
   14 Woodchuck Bay — single-page, photography-led editorial
   Palette from Lake of the Woods lodge blankets: pine green, birch cream,
   bark, one copper accent.
   ========================================================================== */

:root {
  --forest: #1c3a2b;
  --forest-deep: #12241b;
  --moss: #40583f;
  --bark: #241c16;
  --birch: #f6f2e7;
  --paper: #fbf8f0;
  --sand: #ece3d1;
  --sand-deep: #ddd0b6;
  --ember: #9c4c27;          /* 4.9:1 on --paper */
  --ember-light: #da8854;    /* 4.5:1 on --forest (was #d4834f at 4.24 - failed AA) */
  --ink: #1a1713;
  --ink-soft: #453f37;       /* 8.9:1 on --paper */
  --stone: #6c6558;          /* 4.5:1 on --sand (was #6f685b at 4.33 - failed AA) */

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --nav-h: 64px;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-display: clamp(2.5rem, 7vw, 5.6rem);
  --t-h2: clamp(1.7rem, 3.6vw, 2.8rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-lead: clamp(1.3rem, 1.05rem + 1.1vw, 2rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }               /* keep the ratio from width/height attrs */
a { color: inherit; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; inset: 0.75rem auto auto 0.75rem; z-index: 300;
  background: var(--forest); color: var(--birch);
  padding: 0.7rem 1.1rem; border-radius: 2px; text-decoration: none;
}
:focus-visible { outline: 2px solid var(--ember-light); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

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

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 36, 27, 0.93);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(246, 242, 231, 0.14);
  color: var(--birch);
}
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.nav__progress span {
  display: block; height: 100%; background: var(--ember-light);
  transform: scaleX(0); transform-origin: left;
}
.nav__inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.nav__mark svg { width: 14px; height: 22px; fill: var(--ember-light); }
.nav__name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }

.nav__menu { display: flex; align-items: center; gap: 1.05rem; list-style: none; margin: 0; padding: 0; }
.nav__menu a {
  display: inline-block; text-decoration: none;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(246, 242, 231, 0.78);
  padding: 0.75rem 0; position: relative;
  transition: color 0.25s var(--ease);
}
.nav__menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.4rem; height: 1px;
  background: var(--ember-light); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__menu a:hover { color: var(--birch); }
.nav__menu a:hover::after, .nav__menu a.is-current::after { transform: scaleX(1); }
.nav__menu a.is-current { color: var(--birch); }
.nav__cta a {
  border: 1px solid rgba(246, 242, 231, 0.45);
  padding: 0.55rem 1rem; border-radius: 2px; color: var(--birch);
}
.nav__cta a::after { display: none; }
.nav__cta a:hover { background: var(--ember); border-color: var(--ember); }

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0; color: var(--birch);
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav__bars { margin-inline: auto; position: relative; }
.nav__bars::before, .nav__bars::after { content: ''; position: absolute; left: 0; }
.nav__bars::before { top: -7px; }
.nav__bars::after { top: 7px; }
.nav__toggle[aria-expanded='true'] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--forest-deep);
    border-bottom: 1px solid rgba(246, 242, 231, 0.14);
    max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease);
  }
  .nav__menu.is-open { max-height: 30rem; }
  .nav__menu li { border-top: 1px solid rgba(246, 242, 231, 0.09); }
  .nav__menu a { display: block; padding: 0.95rem var(--gutter); }
  .nav__menu a::after { display: none; }
  .nav__cta a { border: 0; border-radius: 0; color: var(--ember-light); }
}

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

.hero {
  position: relative; isolation: isolate;
  min-height: max(460px, min(92vh, 900px));
  display: flex; align-items: flex-end;
  background: var(--forest-deep); color: var(--birch);
  overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
}
@supports (height: 100svh) {
  /* svh ignores the collapsing mobile toolbar, so the hero does not jump. */
  .hero { min-height: max(460px, min(92svh, 900px)); }
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 22, 16, 0.62) 0%, rgba(10, 22, 16, 0.18) 35%, rgba(10, 22, 16, 0.88) 100%);
}
.hero__inner { padding-block: clamp(3rem, 10vh, 6rem) clamp(3rem, 8vh, 5rem); }
.hero__kicker {
  margin: 0 0 1rem;
  font-size: 0.73rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ember-light); font-weight: 600;
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.025em;
  margin: 0 0 1rem; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__sub {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.1rem, 2.3vw, 1.7rem); line-height: 1.3;
  margin: 0 0 1.8rem; max-width: 26ch; text-wrap: balance;
  color: rgba(246, 242, 231, 0.94);
}
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(246, 242, 231, 0.86);
}
/* Separator is inline so it stays with the item it follows. An absolutely
   positioned dot orphaned to the start of the next line when the list wrapped. */
.hero__facts li:not(:last-child)::after {
  content: '·'; margin-inline: 0.7rem; color: var(--ember-light);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2rem;
  margin: 2.2rem 0 0;
}
.hero__cta {
  display: inline-block; padding: 0.55rem 0; text-decoration: none;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--birch); border-bottom: 1px solid var(--ember-light);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__cta:hover { color: var(--ember-light); }
.hero__cta--quiet {
  color: rgba(246, 242, 231, 0.72);
  border-bottom-color: rgba(246, 242, 231, 0.34);
}
.hero__cta--quiet:hover { color: var(--birch); border-bottom-color: var(--birch); }

/* ------------------------------------------------------------ tones ---- */

.sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sec--flush { padding-top: 0; }
.sec--sand { background: var(--sand); }
.sec--forest { background: var(--forest); color: var(--birch); }
.sec--bark { background: var(--bark); color: var(--birch); }
.sec--forest .eyebrow, .sec--bark .eyebrow { color: var(--ember-light); }
.sec--forest .note, .sec--bark .note { color: rgba(246, 242, 231, 0.66); border-color: rgba(246, 242, 231, 0.2); }

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ember);
}
.eyebrow--center { text-align: center; }
.sec__title {
  font-family: var(--serif); font-weight: 400; font-size: var(--t-h2);
  line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 1.8rem; text-wrap: balance;
}
.sec__title--center { text-align: center; margin-bottom: 2.6rem; }

/* One centred column of text. A sticky side-rail left a large empty block
   whenever the copy was short, which read as broken rather than airy. */
.sec__grid { max-width: 780px; margin-inline: auto; }
.sec__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.sec__grid .sec__title { margin-bottom: 0; max-width: 24ch; }

/* ------------------------------------------------------------ prose ---- */

.prose { max-width: none; }
.sec--narrow .prose { max-width: none; }
.prose .line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.06rem, 0.98rem + 0.32vw, 1.24rem);
  line-height: 1.55; letter-spacing: -0.004em;
  margin: 0 0 0.95rem; text-wrap: pretty;
}
.prose .line--lead {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-lead); line-height: 1.22; letter-spacing: -0.02em;
  margin: 1.7rem 0; padding-left: 1.3rem;
  border-left: 3px solid var(--ember); text-wrap: balance;
}
.sec--forest .prose .line--lead, .sec--bark .prose .line--lead { border-left-color: var(--ember-light); }
.prose strong { font-weight: 600; }

.lede { padding-block: clamp(3rem, 7vw, 5rem); }
.lede p {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.42;
  letter-spacing: -0.015em; margin: 0 0 1.3rem; text-wrap: pretty;
}
.lede p:last-child { margin-bottom: 0; color: var(--ink-soft); font-style: italic; }

.note {
  margin: 2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--sand-deep);
  font-size: 0.85rem; line-height: 1.6; color: var(--stone); max-width: 70ch;
}
.note--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------ stats ---- */

.stats__grid {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(2, 1fr);
  background: var(--sand-deep); border: 1px solid var(--sand-deep);
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--paper); padding: clamp(1rem, 3vw, 2rem); }
.stat dd { margin: 0; display: flex; flex-direction: column; }
.stat__v {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.03em;
}
.stat__u {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ember); font-weight: 600; margin-top: 0.4rem;
}
.stat__l { font-size: 0.88rem; color: var(--stone); margin-top: 0.7rem; line-height: 1.45; }

/* ----------------------------------------------------------- traits ---- */

.traits {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: rgba(246, 242, 231, 0.18);
  border: 1px solid rgba(246, 242, 231, 0.18);
}
@media (min-width: 480px) { .traits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .traits { grid-template-columns: repeat(3, 1fr); } }
.trait { background: var(--forest); padding: clamp(1.4rem, 3vw, 2rem); }
.trait__mark svg { width: 12px; height: 20px; fill: var(--ember-light); margin-bottom: 0.85rem; }
.trait h3 { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; margin: 0 0 0.45rem; }
.trait p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: rgba(246, 242, 231, 0.82); }

/* ------------------------------------------------------- photography ---- */

.bleed { margin: 0; position: relative; }
.bleed img { width: 100%; max-height: 82vh; object-fit: cover; }
@supports (height: 100svh) { .bleed img { max-height: 82svh; } }
.bleed figcaption {
  padding-block: 0.85rem 0;
  font-size: 0.85rem; font-style: italic; color: var(--stone);
}

.gal {
  --gal-gap: clamp(0.7rem, 1.4vw, 1.1rem);
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gal-gap);
}
.gal__item { margin: 0; width: 100%; }
@media (min-width: 540px) {
  .gal--2 .gal__item, .gal--3 .gal__item { width: calc((100% - var(--gal-gap)) / 2); }
}
@media (min-width: 980px) {
  .gal--3 .gal__item { width: calc((100% - 2 * var(--gal-gap)) / 3); }
}
/* One image fills its column and centres. It is not automatically a plate. */
.gal--1 { max-width: 900px; margin-inline: auto; }
.gal--1 .gal__item { width: 100%; }
.gal--natural.gal--1 { columns: 1; }
.gal__fig { margin: 0; }

/* Uncropped: the shape of the photograph is part of the argument, so these
   flow in columns at their own aspect ratio rather than being cropped square. */
.gal--natural { display: block; column-gap: var(--gal-gap); }
@media (min-width: 720px) { .gal--natural { columns: 2; } }
.gal--natural .gal__item { width: auto; break-inside: avoid; margin-bottom: var(--gal-gap); }
.gal--natural .gal__btn { aspect-ratio: auto; }
.gal--natural .gal__btn img { height: auto; }
.gal__cap {
  max-width: 640px; margin: 0.85rem auto 0; text-align: center;
  font-size: 0.83rem; font-style: italic; line-height: 1.55; color: var(--stone);
}
.gal__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--sand); border-radius: 2px; overflow: hidden;
  aspect-ratio: 3 / 2;
}
/* Only a document or plan gets the plate treatment, and it opts in. */
.gal__btn--plate {
  aspect-ratio: auto; background: var(--paper);
  border: 1px solid var(--sand-deep); padding: 0.75rem;
}
.gal__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gal__btn--plate img { height: auto; max-height: 68vh; object-fit: contain; }
@supports (height: 100svh) { .gal__btn--plate img { max-height: 68svh; } }
.gal__btn:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .gal__btn img, .gal__btn:hover img { transition: none; transform: none; } }

.photo__missing {
  display: grid; place-content: center; justify-items: center; gap: 0.6rem;
  aspect-ratio: 3 / 2; padding: 1.5rem; text-align: center;
  border: 1px dashed var(--sand-deep); background: var(--sand);
}
.photo__missing svg { width: 18px; height: 28px; fill: var(--moss); opacity: 0.5; }
.photo__missing p { margin: 0; font-family: var(--serif); color: var(--moss); font-size: 0.92rem; }

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

.lb { position: fixed; inset: 0; z-index: 250; }
.lb[hidden] { display: none; }
/* Opaque: at 0.94 the page behind showed through and fought the caption. */
.lb__backdrop { position: absolute; inset: 0; background: #0a120e; }
.lb__panel {
  position: relative; height: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.5rem; padding: clamp(0.75rem, 3vw, 2rem);
}
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; min-width: 0; }
.lb__fig img {
  max-width: 100%; max-height: 78vh; width: auto; object-fit: contain;
  border-radius: 2px; background: #0b1410;
}
.lb__fig figcaption {
  color: rgba(246, 242, 231, 0.82); font-size: 0.86rem; font-style: italic;
  text-align: center; max-width: 60ch;
}
.lb__close, .lb__nav {
  background: rgba(246, 242, 231, 0.1); color: var(--birch);
  border: 1px solid rgba(246, 242, 231, 0.28); border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer;
  font-size: 1.6rem; line-height: 1; display: grid; place-content: center;
  transition: background 0.2s var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(246, 242, 231, 0.24); }
.lb__close { position: absolute; top: clamp(0.75rem, 3vw, 2rem); right: clamp(0.75rem, 3vw, 2rem); z-index: 2; }
@media (max-width: 640px) {
  .lb__panel {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
  }
  .lb__fig { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .lb__fig img { max-height: 62vh; }
  .lb__nav--prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lb__nav--next { grid-column: 2; grid-row: 2; justify-self: end; }
}
@supports (height: 100svh) {
  @media (max-width: 640px) { .lb__fig img { max-height: 62svh; } }
}

/* ------------------------------------------------------------ quote ---- */

.quote { text-align: center; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.quote__mark svg { width: 96px; height: 51px; fill: var(--ember-light); margin: 0 auto 1.6rem; }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.9rem, 5.4vw, 3.7rem); line-height: 1.08;
  letter-spacing: -0.03em; text-wrap: balance;
}

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

.facts {
  margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--sand-deep); border: 1px solid var(--sand-deep);
}
@media (min-width: 520px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--paper); padding: 1rem 1.25rem; }
.fact dt {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 0.28rem;
}
.fact dd { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.4; }

/* -------------------------------------------------------------- cta ---- */

.cta { text-align: center; }
.cta__mark svg { width: 104px; height: 55px; fill: var(--ember-light); margin: 0 auto 1.5rem; }
.cta h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); margin: 0 0 0.8rem; text-wrap: balance; }
.cta p { margin: 0 auto 0.4rem; color: rgba(246, 242, 231, 0.8); max-width: 48ch; }
/* .cta p sets "margin: 0 auto" to centre; overriding the whole shorthand
   with a 0 side-margin knocked the block off-centre. Keep auto. */
/* --- enquiry form --- */
.form { margin: 2.2rem auto 1.2rem; max-width: 34rem; text-align: left; }
.form__pair { display: grid; gap: 0 0.9rem; }
@media (min-width: 560px) { .form__pair { grid-template-columns: 1fr 1fr; } }
.field { margin: 0 0 0.95rem; max-width: none; }
.field label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(246, 242, 231, 0.7);
}
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--birch);
  background: rgba(246, 242, 231, 0.06);
  border: 1px solid rgba(246, 242, 231, 0.28); border-radius: 2px;
  padding: 0.75rem 0.9rem; min-height: 46px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(246, 242, 231, 0.42); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--ember-light); background: rgba(246, 242, 231, 0.1);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #e08a6a; }
.field__error { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: #e8a184;
  text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { margin: 1.3rem 0 0; }
.form__send .btn { cursor: pointer; font-family: var(--sans); }
.form__send .btn[disabled] { opacity: 0.6; cursor: progress; }
.form__status { margin: 0.9rem 0 0 !important; font-size: 0.9rem; min-height: 1.4em; }
.form__status.is-ok { color: #9fd0a8 !important; }
.form__status.is-err { color: #e8a184 !important; }
.cta__or { margin-top: 1.4rem !important; font-size: 0.9rem; }
.cta__or a { color: var(--ember-light); }
.cta p.cta__meta {
  font-size: 0.83rem; color: rgba(246, 242, 231, 0.55); line-height: 1.7;
}

.btn {
  display: inline-block; padding: 0.95rem 1.9rem;
  max-width: 100%; overflow-wrap: anywhere;
  background: var(--ember); color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ember); border-radius: 2px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--ember-light); border-color: var(--ember-light); }
@media (max-width: 400px) {
  .btn { padding: 0.85rem 1.05rem; font-size: 0.72rem; letter-spacing: 0.07em; }
}

/* ------------------------------------------------------------- foot ---- */

.foot { background: var(--forest-deep); color: rgba(246, 242, 231, 0.74); padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem; font-size: 0.88rem; }
.foot__top {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(246, 242, 231, 0.14);
}
@media (min-width: 700px) { .foot__top { grid-template-columns: 1.6fr 1fr; } }
.foot__mark svg { width: 72px; height: 38px; fill: var(--ember-light); margin-bottom: 0.9rem; }
.foot__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--birch); margin: 0 0 0.35rem; }
.foot__place { margin: 0; line-height: 1.6; }
.foot__contact p { margin: 0 0 0.45rem; }
.foot__contact a:hover { color: var(--ember-light); }
.foot__copy { margin: 1.2rem 0 0; font-size: 0.76rem; color: rgba(246, 242, 231, 0.45); }

/* ----------------------------------------------------------- reveal ---- */

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

@media print {
  .nav, .hero__cue, .lb, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .sec--forest, .sec--bark, .foot { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   Property at a glance
   ========================================================================== */

.glance__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .glance__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .glance__grid { grid-template-columns: repeat(3, 1fr); } }
.glance__col h3 {
  font-family: var(--serif); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.04em; margin: 0 0 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--sand-deep);
}
.glance__col dl { margin: 0; }
.glance__row {
  display: grid; grid-template-columns: 1fr; gap: 0.1rem;
  padding: 0.55rem 0; border-bottom: 1px solid rgba(221, 208, 182, 0.5);
}
@media (min-width: 420px) { .glance__row { grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline; } }
.glance__row dt {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone);
}
.glance__row dd { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.45; }

/* --- map: present but deliberately not dominant --- */
.map { margin-top: clamp(2rem, 4vw, 3rem); }
.map__frame {
  border: 1px solid var(--sand-deep); border-radius: 2px; overflow: hidden;
  background: var(--sand); line-height: 0;
}
.map__frame iframe { width: 100%; height: clamp(230px, 32vw, 340px); border: 0; }
.map__note {
  margin: 0.75rem 0 0; font-size: 0.83rem; line-height: 1.6; color: var(--stone);
}
.map__note a { color: var(--ember); }

/* ==========================================================================
   Why Woodchuck cards
   ========================================================================== */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--sand-deep); border: 1px solid var(--sand-deep);
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); padding: clamp(1.4rem, 3vw, 2.1rem); }
.card__mark svg { width: 12px; height: 20px; fill: var(--ember); margin-bottom: 0.9rem; }
.card h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.16rem;
  margin: 0 0 0.5rem; line-height: 1.25;
}
.card p { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--ink-soft); }

/* ==========================================================================
   Owner-identified destinations
   ========================================================================== */

/* Matches the 780px centred column the prose above it sits in. Without the
   auto margin this block hung off the left edge of the 1200px wrap and did
   not line up with anything. Given a panel so it reads as a deliberate
   module rather than stray text floating under the chapter. */
.places {
  max-width: 780px; margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2rem);
  background: var(--sand); border: 1px solid var(--sand-deep); border-radius: 2px;
}
.places h3 {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 1rem;
}
.places ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
@media (min-width: 620px) { .places ul { grid-template-columns: repeat(2, 1fr); gap: 0.55rem 2rem; } }
.places li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--sand-deep);
}
.places__name { font-family: var(--serif); font-size: 1.05rem; }
.places__note { font-size: 0.85rem; color: var(--stone); }
.places__caveat { margin: 1rem 0 0; font-size: 0.78rem; color: var(--stone); font-style: italic; }

/* ==========================================================================
   Photo deck
   ========================================================================== */

.deck__intro {
  text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 46ch; font-size: 0.92rem; color: var(--stone);
}
.deck__group + .deck__group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.deck__title {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stone); margin: 0;
}
.deck__title::after {
  content: ''; flex: 1; height: 1px; background: var(--sand-deep);
}
.deck .gal { margin-top: clamp(1rem, 2vw, 1.4rem); }

/* ==========================================================================
   Looking ahead
   ========================================================================== */

.ahead__sub {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  margin: 2.2rem 0 1rem; color: var(--birch);
}
.ahead__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.9rem;
}
.ahead__list li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.97rem; line-height: 1.7; color: rgba(246, 242, 231, 0.86);
}
.ahead__list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 7px; height: 7px; transform: rotate(45deg); background: var(--ember-light);
}
.ahead .prose + .ahead__sub { margin-top: 2.4rem; }
.ahead__cta { margin: 2.4rem 0 0; }
.btn--quiet {
  background: transparent; color: var(--birch);
  border-color: rgba(246, 242, 231, 0.45);
}
.btn--quiet:hover { background: var(--ember); border-color: var(--ember); color: #fff; }

/* Extra breathing room for the story and the closing chapters. */
.sec--spacious { padding-block: clamp(4.5rem, 11vw, 9rem); }

/* ==========================================================================
   Honeypot — off-screen, never announced, never focusable
   ========================================================================== */

.field--trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   Nav: nine labels plus the brand and Enquire overflow a 1200px wrap and wrap
   onto a second line. Give the bar its own wider container, stop labels
   breaking mid-phrase, and fall back to the compact menu sooner.
   -------------------------------------------------------------------------- */
.nav .wrap { max-width: 1440px; }
.nav__name { white-space: nowrap; }
.nav__menu a { white-space: nowrap; }

@media (max-width: 1300px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--forest-deep);
    border-bottom: 1px solid rgba(246, 242, 231, 0.14);
    max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease);
  }
  .nav__menu.is-open { max-height: 34rem; }
  .nav__menu li { border-top: 1px solid rgba(246, 242, 231, 0.09); }
  .nav__menu a { display: block; padding: 0.9rem var(--gutter); }
  .nav__menu a::after { display: none; }
  .nav__cta a { border: 0; border-radius: 0; color: var(--ember-light); }
}

/* The closing paragraph sat flush against the last proposal bullet. */
.ahead__list + .prose { margin-top: 1.8rem; }

/* Short destination names kept their note on the same line while longer ones
   wrapped, so the list read unevenly. Always break after the name. */
.places__name { flex: 1 0 100%; }

/* --------------------------------------------------------------------------
   Photo deck: two large frames per row rather than three small ones. A
   three-column grid left a single orphan whenever a group held four images,
   and made a dedicated photo deck feel like a thumbnail wall.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .gal--wide:not(.gal--1) .gal__item { width: calc((100% - var(--gal-gap)) / 2); }
}
@media (min-width: 980px) {
  /* overrides the three-up rule for deck galleries only */
  .gal--wide.gal--3 .gal__item { width: calc((100% - var(--gal-gap)) / 2); }
}
.deck .gal--1 { max-width: 1120px; }
.deck .gal { --gal-gap: clamp(0.8rem, 1.6vw, 1.3rem); }

/* --------------------------------------------------------------------------
   The deck breaks out of the 1200px editorial grid. Inside it, two-up frames
   were only ~580px, which is not what a dedicated photo section is for.
   Widening the container roughly doubles them on a large screen while the
   editorial galleries beside the text keep the narrower measure.
   -------------------------------------------------------------------------- */
.deck > .wrap { max-width: min(95vw, 1760px); }
.deck .deck__intro { max-width: 46ch; }
.deck .sec__title--center { max-width: 24ch; margin-inline: auto; }

/* A lone image still centres inside the deck's wider container. */
.deck .gal--1 { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Four images in a three-column grid leave one stranded on its own row.
   A 2x2 block reads better and makes each frame ~590px rather than ~375px.
   The deck already runs two-up, so it is excluded.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .gal--of-4:not(.gal--natural):not(.gal--wide) .gal__item {
    width: calc((100% - var(--gal-gap)) / 2);
  }
}

/* --------------------------------------------------------------------------
   Inline links in the footer, map note and CTA were only ~17px tall, under
   the 24px minimum target size. Padding lifts them without changing the
   visual rhythm.
   -------------------------------------------------------------------------- */
.foot__contact a,
.map__note a,
.cta__or a {
  display: inline-block; padding-block: 4px;
}