@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,20,1&display=swap');

:root {
  --ember: #a94276;
  --onyx: #4b3048;
  --graphite: #4b3048;
  --stone: #735d70;
  --line: #dfc9d1;
  --fog: #fae9ee;
  --paper: #fffaf5;
  --cream: #fffaf5;
  --primrose: #fff1ca;
  --peach: #ffe4d4;
  --lilac: #eee5f5;
  --display: 'Fraunces', Georgia, serif;
  --body: 'DM Sans', Arial, sans-serif;
}
body { font-weight: 400; line-height: 1.55; }
::selection { background: #f1beda; color: var(--onyx); }
.mono { letter-spacing: .055em; }
.pill { border-color: #cfacbb; background: rgba(255,255,255,.28); }
.pill:hover { background: var(--onyx); border-color: var(--onyx); color: var(--paper); }
.eyebrow::before { width: 9px; height: 9px; flex-basis: 9px; }
.text-link { font-weight: 600; text-decoration-thickness: 1px; }

/* The first view uses colour, typography and a gently moving real photograph. */
.hero { background: var(--primrose); color: var(--onyx); padding-bottom: 28px; }
.header { border-bottom-color: #decbb3; }
.wordmark { font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.05; letter-spacing: -.05em; text-transform: none; }
.wordmark span { color: #b46141; }
.nav a { color: var(--onyx); border-color: #cbaeb5; background: rgba(255,255,255,.3); }
.nav a:hover { color: var(--paper); background: var(--onyx); }
.nav a span { color: var(--ember); }
.hero-meta { color: var(--stone); }
.hero-title { margin: 40px 0 30px; font: 500 clamp(72px,10.6vw,145px)/.85 var(--display); letter-spacing: -.07em; text-transform: none; transform: translate3d(0,0,0); }
.hero-title .line-one { font-size: .83em; letter-spacing: -.07em; }
.hero-title .line-two { margin-top: 6px; align-items: flex-end; }
.hero-title .escape { font-size: 1.39em; line-height: .96; letter-spacing: -.065em; background: none; color: #a94276; }
.hero-title h1 { font-weight: 500; }
.hero-aside { max-width: 280px; padding-bottom: 5px; }
.hero-aside p { color: var(--stone); font: 400 19px/1.4 var(--body); letter-spacing: -.025em; }
.hero-aside .text-link { font-weight: 600; color: var(--onyx); }
.hero-image { aspect-ratio: 2.23; background: #e6c7c1; border-radius: 3px; isolation: isolate; }
.hero-image img { transform: translate3d(0,0,0) scale(1.2); filter: saturate(.94) sepia(.06) contrast(.96); will-change: transform; }
.image-label { bottom: 18px; left: 18px; color: var(--onyx); background: rgba(255,250,245,.9); border: 1px solid rgba(255,250,245,.8); backdrop-filter: blur(7px); }
.hero-bottom { color: var(--stone); }
.hero-bottom a { color: var(--onyx); }

/* Soft, alternating surfaces keep the original home's information easy to read. */
.section { padding-top: 110px; padding-bottom: 110px; }
.section-label { color: #a2567e; }
.section-head h2,.intro h2,.faq-heading h2,.contact-copy h2 { color: var(--onyx); font-weight: 500; letter-spacing: -.055em; }
.intro h2,.section-head h2 { line-height: 1.08; }
.section-head p,.detail-row p,.fact span,.photo-caption span,.faqs details p,.contact-copy p,.footer { color: var(--stone); }
.intro-copy { color: #654c61; }
.fact strong { font: 500 52px/1.08 var(--display); letter-spacing: -.05em; color: #ad5480; }
.fact { border-color: var(--line); }
.tour { background: #f9e6ed; }
.tour .section-label { color: #a2567e; }
.photo-button { background: #e7cbd8; }
.photo-button img { filter: saturate(.9); }
.photo-button:hover img { filter: saturate(1.05); }
.photo-button .expand { color: var(--onyx); background: var(--cream); }
.watermark { color: #edcadb; text-transform: none; font-size: clamp(84px,15vw,185px); letter-spacing: -.07em; }
.details-grid { column-gap: 84px; }
.detail-row h3,.photo-caption h3,.place h3 { font-weight: 500; }
.landscape-section { background: var(--lilac); color: var(--onyx); }
.landscape-section .section-head p,.place p,.place .mono { color: var(--stone); }
.landscape-feature>img { filter: saturate(.95) contrast(.98); border-radius: 3px; }
.landscape-caption { color: var(--stone); }
.scenic-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; padding: 76px 0 35px; border-top: 1px solid var(--line); margin-top: 62px; }
.scenic-intro .mono { color: #a2567e; padding-top: 9px; }
.scenic-intro p { max-width: 670px; margin: 0; font: 500 clamp(26px,3vw,39px)/1.15 var(--display); letter-spacing: -.045em; }
.scenic-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 22px; align-items: start; }
.scenic-card { margin: 0; min-width: 0; }
.scenic-card img { height: 330px; width: 100%; object-fit: cover; border-radius: 3px; }
.scenic-card:first-child img { object-position: center; }
.scenic-card figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 13px 0 18px; border-bottom: 1px solid var(--line); }
.scenic-card figcaption span { font: 500 23px/1.1 var(--display); letter-spacing: -.035em; }
.scenic-card figcaption small { color: var(--stone); }
.places { margin-top: 76px; }
.place { border-color: #d6bfdc; }
.place h3 { color: #8d4c83; font-family: var(--display); font-size: 29px; letter-spacing: -.04em; }
.landscape-section .watermark { color: #dfd0ed; }
.contact { background: var(--peach); }
.contact-title { color: #c96886; font-size: clamp(80px,17vw,210px); letter-spacing: -.07em; text-transform: none; }
.footer a:hover { color: #a94276; }

/* The guest guide shares the same warm, legible system. */
.guide-hero { background: var(--primrose); }
.guide-title { font-weight: 500; line-height: .94; letter-spacing: -.065em; text-transform: none; }
.guide-title span { background: none; color: #a94276; }
.guide-welcome p { color: var(--stone); }
.back-home { border-color: #cfacbb; }
.back-home:hover { background: var(--onyx); color: var(--paper); }
.help-note { background: #fae9ee; }
.guide-answer p,.guide-answer li { color: #6e5869; }
.dated-note { border-color: #debfcf; background: #fcf0f4; }
.departure-checklist input { accent-color: #a94276; }
.lightbox,.lightbox::backdrop { background: #4b3048; color: var(--paper); }
.icon-button { border-color: #dec5d8; }
.icon-button:hover { background: var(--paper); color: var(--onyx); }

@media (max-width: 1000px) {
  .hero-title { font-size: 11.2vw; }
  .hero-aside { max-width: 225px; }
  .scenic-intro { grid-template-columns: 1fr 2fr; gap: 28px; }
  .scenic-card img { height: 260px; }
}
@media (max-width: 700px) {
  html,body { overflow-x: clip; }
  .hero { padding-bottom: 22px; }
  .menu-toggle { color: var(--onyx); border-color: #cfacbb; }
  .nav { background: #fff8e8; border-color: #decab8; }
  .nav a { border-bottom-color: #ead4da; background: none; }
  .hero-title { font-size: 15.1vw; margin: 33px 0 28px; }
  .hero-title .line-one { font-size: .91em; }
  .hero-title .line-two { margin-top: 9px; }
  .hero-title .escape { font-size: 1.75em; }
  .hero-aside { max-width: none; margin-top: 28px; }
  .hero-aside p { font-size: 15px; }
  .hero-image { aspect-ratio: 1.04; }
  .hero-image img { transform: translate3d(0,0,0) scale(1.2); }
  .image-label { bottom: 11px; left: 11px; }
  .section { padding-top: 68px; padding-bottom: 68px; }
  .section-head h2,.intro h2 { font-size: 39px; }
  .fact strong { font-size: 43px; }
  .watermark { font-size: 15vw; }
  .scenic-intro { display: block; padding: 45px 0 25px; margin-top: 43px; }
  .scenic-intro .mono { display: block; padding-top: 0; margin-bottom: 18px; }
  .scenic-intro p { font-size: 27px; }
  .scenic-grid { display: block; }
  .scenic-card { margin-bottom: 28px; }
  .scenic-card img { height: auto; aspect-ratio: 1.26; }
  .scenic-card:first-child img { aspect-ratio: 1.5; }
  .places { margin-top: 48px; }
  .contact-title { font-size: 16.4vw; }
  .guide-title { font-size: 13.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image img,.hero-title { transform: none !important; will-change: auto; }
}