/* Three darker material palettes for the transparent Country Homes signature.
   Walnut is the default; alternatives are confined to the colour review links. */
:root {
  --gold: #d3ad56;
  --green: #afbd87;
  --paper: #f9efdd;
  --ink: #32261e;
  --line: #a1875766;
  --bark: #281f19;
  --cream: #f6e8ce;
  --muted: #cabb9f;
  --leaf: #afbd87;
  --honey: #e2c379;
  --button-ink: #292116;
  --gold-hover: #e0bf72;
  --body-wash: #281f19f5;
  --wood-top: #493422d9;
  --wood-bottom: #2c2018e6;
  --wood-border: #b6986166;
  --menu-surface: #30241c;
  --surface: #423325;
  --surface-raised: #493b29;
  --footer-wash: #24190fde;
  --warm-glow: #88603520;
  --leaf-glow: #81974c14;
  --line-glow: #d3ad5622;
  --gold-glow: #d3ad5630;
  --leaf-light: #afbd8726;
  --picture-mount: #f0dfbe;
  --timber-grain: url('assets/country/fine-timber-grain.svg');
}
:root[data-palette="olive"] {
  --gold: #d6bb67;
  --green: #b0c178;
  --paper: #f0eddc;
  --ink: #293124;
  --line: #8e9b6266;
  --bark: #21291f;
  --cream: #f0eddc;
  --muted: #c2c6ad;
  --leaf: #b0c178;
  --honey: #e0c982;
  --button-ink: #27301d;
  --gold-hover: #e3cf86;
  --body-wash: #21291ff5;
  --wood-top: #41452ccc;
  --wood-bottom: #2c2f21de;
  --wood-border: #aab57466;
  --menu-surface: #2c3324;
  --surface: #35402c;
  --surface-raised: #3d482e;
  --footer-wash: #1e261bde;
  --warm-glow: #9b8b3620;
  --leaf-glow: #8caa4520;
  --line-glow: #b0c17822;
  --gold-glow: #d6bb6730;
  --leaf-light: #b0c17826;
  --picture-mount: #e5e3c8;
}
:root[data-palette="oak"] {
  --gold: #cbb175;
  --green: #aeba91;
  --paper: #eee9db;
  --ink: #303029;
  --line: #a2997566;
  --bark: #252522;
  --cream: #eee9db;
  --muted: #c2bdab;
  --leaf: #aeba91;
  --honey: #deca96;
  --button-ink: #2c2b21;
  --gold-hover: #dcc58f;
  --body-wash: #252522f5;
  --wood-top: #43413bce;
  --wood-bottom: #2c2a26e6;
  --wood-border: #a89f7566;
  --menu-surface: #30302a;
  --surface: #3b3b31;
  --surface-raised: #45453a;
  --footer-wash: #21211cde;
  --warm-glow: #a7985820;
  --leaf-glow: #aeba9114;
  --line-glow: #cbb17522;
  --gold-glow: #cbb17530;
  --leaf-light: #aeba9126;
  --picture-mount: #e6dfcb;
}

body {
  background-image: linear-gradient(var(--body-wash), var(--body-wash)), url('assets/country/wood-grain.webp');
  background-size: 100% 100%, 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
header.timber-header, header.timber-header.scrolled {
  color: var(--cream);
  height: 88px;
  padding: 8px 22px;
  gap: 22px;
  border-radius: 8px;
  background-color: var(--menu-surface);
  background-image: radial-gradient(ellipse at 14% 0%, var(--gold-glow), transparent 65%), linear-gradient(180deg, #ffffff06, #00000024), var(--timber-grain);
  background-size: 100% 100%, 100% 100%, 1024px 256px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
  border-color: var(--wood-border);
  border-bottom: 1px solid var(--wood-border);
  box-shadow: inset 0 1px 0 #ffffff09, inset 0 -1px 0 #00000033, 0 12px 32px #08060455;
}
html { scroll-padding-top: 132px; }
header.timber-header .brand { width: clamp(140px,14vw,184px); height: auto; flex-shrink: 0; }
header.timber-header .brand .logo-window { height: auto; }
header.timber-header .brand .logo-window img { max-height: 68px; }
.chapter-menu { top: 116px; max-height: calc(100svh - 136px); }
.timber-mobile { inset: 116px 16px auto !important; max-height: calc(100svh - 136px); }
.cinema > .playback-toggle { top: 126px; }
.gallery-filters { top: 116px; }
.timber-header nav button { color: var(--cream); }
.timber-header nav button span { color: var(--honey); }
.timber-header nav a:after { background: var(--gold); }
.timber-header .menu-toggle span { background: var(--cream); }
.timber-header .brand .logo-window img { filter: drop-shadow(0 1px 1px #0003); }
.timber-header .button, .timber-header .button.gold { background: var(--gold); color: var(--button-ink); border: 1px solid var(--gold); }
.timber-header .button:hover, .timber-header .button.gold:hover { background: var(--gold-hover); color: var(--button-ink); }
.timber-header :focus-visible { outline: 3px solid var(--honey); outline-offset: 4px; }
.chapter-menu {
  background-color: var(--menu-surface);
  background-image: linear-gradient(180deg, #ffffff04, #00000016), var(--timber-grain);
  background-size: 100% 100%, 1024px 256px;
  background-repeat: no-repeat, repeat;
  color: var(--cream);
  border-color: var(--wood-border);
}
.nav-links a { color: var(--cream); border-bottom-color: var(--line); }
.nav-links a:hover { color: var(--honey); }
.nav-links .eyebrow, .nav-links small { color: var(--honey); }
.nav-close { color: var(--cream); }
.timber-mobile {
  background: radial-gradient(ellipse at 10% 0%, var(--warm-glow), transparent 70%) no-repeat, linear-gradient(180deg, #ffffff04, #00000016) no-repeat, var(--timber-grain) center / 1024px 256px repeat var(--menu-surface) !important;
  color: var(--cream);
  border-color: var(--wood-border) !important;
}
.timber-mobile a { color: var(--cream); border-color: var(--line); }
.timber-mobile small, .timber-mobile > .eyebrow { color: var(--honey); }
.timber-mobile a[aria-current=page] { color: var(--honey); }

/* One continuous dark canvas connects the existing interactive chapters. */
.threshold, .room-journey, .service-redesign, .morning.morning-redesign,
.morning-redesign .morning-stage, .atlas, .journal-wall {
  background: radial-gradient(ellipse at 78% 50%, var(--warm-glow), transparent 65%), radial-gradient(ellipse at 12% 65%, var(--leaf-glow), transparent 60%), var(--bark);
  color: var(--cream);
}
.service-redesign:before { background: linear-gradient(var(--body-wash), var(--body-wash)), url('assets/country/a013.webp') center / cover; }
.service-redesign:after { border-color: var(--line); }
.room-journey .room-stage:before { background: var(--line-glow); }
.journal-wall:before { background: repeating-radial-gradient(ellipse at 0 80%, transparent 0 68px, var(--line-glow) 69px 70px, transparent 71px 90px); }
em, .text-button, .cinema-content em, .voyage .postcard small,
.room-journey .section-heading em, .ritual-intro h2 em,
.morning-redesign .morning-caption em, .atlas .section-heading em,
.journal-wall-heading h2 em, .service-redesign .benefits-heading h2 em,
.page-hero-copy em, .threshold-heading h2 em { color: var(--honey); }
.threshold-heading > .eyebrow, .room-journey .section-heading .eyebrow,
.service-redesign .benefits-heading .eyebrow, .service-redesign .benefit-story > .eyebrow,
.ritual-intro .eyebrow, .atlas .eyebrow, .journal-wall-heading .eyebrow,
.page-hero-copy .eyebrow { color: var(--honey); }
.room-journey .room-detail span, .room-journey .room-panel > .eyebrow,
.morning-redesign .morning-caption > .eyebrow, .morning-redesign .morning-controls span,
.wall-copy .eyebrow { color: var(--leaf); }
.room-journey .section-heading > p, .threshold-heading > p:last-child,
.service-redesign .benefits-heading > p:last-child,
.service-redesign .benefit-story > p:not(.eyebrow),
.room-journey .room-panel > p, .room-journey .room-detail p,
.morning-redesign .morning-caption > p:last-child,
.journal-wall-heading > p:last-child, .atlas .section-heading > p,
.browser-copy > p:not(.eyebrow), .table-story > p:not(.eyebrow),
.ledger-grid p, .film-feature p, .question-list details > p,
.location-board p:not(.eyebrow), .destination-chapter p:not(.eyebrow),
.reservation-story > p:not(.eyebrow), .ritual-bottom-note, .atlas-foot,
.wall-footer, .threshold-foot { color: var(--muted); }
.room-journey .room-panel h3, .wall-copy h3, .question-list summary,
.morning-redesign .morning-caption { color: var(--cream); }
.room-preview, .ritual-cutout, .wall-photo { background: var(--picture-mount); border-color: var(--picture-mount); }
.room-journey .image-index { background: var(--menu-surface); }
.room-journey .room-tabs button { color: var(--muted); border-color: var(--line); }
.room-journey .room-tabs button[aria-selected=true] { border-color: var(--gold); color: var(--honey); }
.room-arrows button { border-color: var(--line); color: var(--cream); }
.room-showcase > .playback-toggle, .morning-stage > .playback-toggle,
.cinema > .playback-toggle { background: var(--surface-raised); color: var(--cream); border-color: var(--wood-border); }
.button.gold, .room-journey .room-panel > .button { background: var(--gold); color: var(--button-ink); }
.button.gold:hover, .room-journey .room-panel > .button:hover { background: var(--gold-hover); color: var(--button-ink); }
.button.dark { background: var(--surface); color: var(--cream); }
.button.dark:hover { background: var(--surface-raised); }
.button.outline { border-color: var(--leaf); color: var(--cream); }
.button.outline:hover { background: var(--surface-raised); }
.service-filmstrip .benefit-node { background: var(--surface); color: var(--cream); }
.service-filmstrip .benefit-node.selected { background: var(--gold); color: var(--button-ink); }
.service-filmstrip .benefit-node > span { color: var(--muted); }
.service-filmstrip .benefit-node.selected > span { color: var(--button-ink); }
.service-redesign .benefit-controls button { border-color: var(--wood-border); color: var(--cream); }
.service-redesign .benefit-controls button:hover { background: var(--gold); color: var(--button-ink); }
.morning-redesign .morning-controls, .room-detail, .wall-footer { border-color: var(--line); }
.morning-redesign .morning-controls button { color: var(--muted); }
.morning-redesign .morning-controls button[aria-selected=true] { color: var(--cream); }
.morning-redesign .morning-controls button:before { background: var(--gold); box-shadow: none; }
.benefit-story > span { border-color: var(--line) !important; color: var(--muted) !important; }
.chapter-page-link a { color: var(--honey); border-color: var(--line); }
.browser-tabs button, .table-controls button { color: var(--muted); }
.browser-tabs button[aria-pressed=true], .table-controls button[aria-pressed=true] { color: var(--leaf); border-color: var(--green); }
.gallery-filters { background: var(--bark); }
.gallery-filters button { color: var(--cream); border-color: var(--wood-border); }
.gallery-filters button[aria-pressed=true] { background: var(--gold); color: var(--button-ink); border-color: var(--gold); }
.chapter-cta { background: radial-gradient(ellipse at 50% 50%, var(--warm-glow), transparent 70%); }
.chapter-cta .eyebrow, .contact-details small { color: var(--leaf); }
.reservation-paper { background: var(--picture-mount); background-image: none; color: var(--ink); }
.stay-enquiry input, .stay-enquiry select, .stay-enquiry textarea { background: var(--paper); color: var(--ink); border-color: var(--wood-border); }

footer.timber-footer {
  position: relative;
  background-color: var(--bark);
  background-image: radial-gradient(ellipse at 18% 0%, var(--gold-glow), transparent 65%), linear-gradient(180deg, transparent, #00000030), var(--timber-grain);
  background-size: 100% 100%, 100% 100%, 1024px 256px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--wood-border);
  color: var(--cream);
}
footer.timber-footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 6vw;
  right: 6vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--honey), transparent);
  opacity: .6;
  pointer-events: none;
}
footer.timber-footer .brand, footer.timber-footer .brand img { width: 210px; }
.timber-footer .footer-top .eyebrow { color: var(--honey); }
.timber-footer .footer-top > div > p:not(.eyebrow) { color: var(--muted); }
.timber-footer .footer-word { color: var(--line-glow); }
.timber-footer .footer-bottom { border-color: var(--line); color: var(--muted); }
.timber-footer .photo-credits { color: var(--muted); }
.ambient-light i { background: var(--gold); }
.ambient-light i:nth-child(3n) { background: var(--green); }
.ambient-light:before { background: radial-gradient(ellipse at 12% 35%, var(--gold-glow), transparent 32%), radial-gradient(ellipse at 80% 65%, var(--leaf-light), transparent 35%); }
.ambient-light:after { border-color: var(--line); }

@media (max-width: 750px) {
  html { scroll-padding-top: 110px; }
  header.timber-header, header.timber-header.scrolled { height: 72px; padding: 8px 12px; gap: 10px; border-radius: 6px; }
  header.timber-header .brand { width: clamp(104px,30vw,124px); height: auto; }
  header.timber-header .brand .logo-window { height: auto; }
  header.timber-header .brand .logo-window img { max-height: 56px; }
  .timber-mobile { inset: 94px 16px auto !important; max-height: calc(100svh - 114px); }
  .cinema > .playback-toggle { top: 104px; }
  .gallery-filters { top: 94px; }
  footer.timber-footer .brand, footer.timber-footer .brand img { width: 180px; }
}
@media (max-width: 380px) {
  header.timber-header, header.timber-header.scrolled { padding-inline: 10px; gap: 8px; }
  header.timber-header .brand { width: clamp(94px,28vw,104px); }
}