:root {
  --ink: #20251d;
  --cream: #f5efe3;
  --paper: #fffaf0;
  --ochre: #a94625;
  --ochre-deep: #75301c;
  --gum: #667059;
  --line: rgba(32, 37, 29, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 "DM Sans", sans-serif; }
img { display: block; width: 100%; }
a { color: inherit; }

.site-header { height: 78px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ochre); color: white; font-size: 11px; letter-spacing: .08em; }
.header-link { text-decoration: none; font-size: 14px; font-weight: 700; border-bottom: 2px solid var(--ochre); }

.hero { min-height: calc(100vh - 78px); position: relative; display: flex; align-items: flex-end; padding: clamp(48px, 8vw, 110px) clamp(22px, 7vw, 100px); color: white; overflow: hidden; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 43%; }
.hero-shade { background: linear-gradient(90deg, rgba(22,27,20,.86) 0%, rgba(22,27,20,.52) 50%, rgba(22,27,20,.12) 100%), linear-gradient(0deg, rgba(22,27,20,.42), transparent 50%); }
.hero-content { position: relative; width: min(760px, 100%); z-index: 1; }
.eyebrow { margin: 0 0 16px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: #efd69a; }
.eyebrow.dark { color: var(--ochre); }
h1, h2, h3 { margin: 0; font-family: "Newsreader", serif; font-weight: 600; line-height: 1.02; }
h1 { font-size: clamp(52px, 8vw, 108px); letter-spacing: -.035em; }
h2 { font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -.025em; }
h3 { font-size: clamp(27px, 3vw, 39px); }
.hero-copy { max-width: 650px; margin: 26px 0 30px; font-size: clamp(17px, 1.6vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; min-height: 52px; padding: 0 23px; align-items: center; justify-content: center; border: 1px solid transparent; text-decoration: none; font-weight: 700; font-size: 14px; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ochre); color: white; }
.button-ghost { border-color: rgba(255,255,255,.6); color: white; }
.button-light { background: var(--paper); color: var(--ochre-deep); }
.booking-card { position: absolute; right: clamp(22px, 6vw, 90px); bottom: 0; z-index: 2; display: flex; color: var(--ink); background: var(--cream); }
.booking-card div { min-width: 150px; padding: 21px 25px; border-left: 1px solid var(--line); }
.booking-card strong, .booking-card span { display: block; }
.booking-card strong { font: 600 32px/1 "Newsreader", serif; }
.booking-card span { margin-top: 6px; font-size: 12px; }

.section { width: min(1240px, calc(100% - 44px)); margin: 0 auto; padding: clamp(75px, 10vw, 140px) 0; }
.intro { display: grid; grid-template-columns: 1fr .85fr; gap: 10vw; align-items: end; }
.intro-copy p { margin: 0 0 18px; font-size: 18px; }
.photo-story { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 360px 290px; gap: 10px; padding: 0 10px; background: var(--paper); }
.photo { margin: 0; overflow: hidden; }
.photo img { height: 100%; object-fit: cover; }
.photo.tall { grid-row: 1 / 3; }
.photo.wide { grid-column: 2 / 4; }
.story-card { padding: clamp(32px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; background: var(--gum); color: white; }
.story-card p:last-child { margin-bottom: 0; }
.section-heading { margin-bottom: 50px; }
.remedy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.remedy-card { background: var(--cream); }
.remedy-card img { aspect-ratio: 16/10; object-fit: cover; }
.remedy-card div { padding: clamp(25px, 4vw, 48px); }
.remedy-card span { color: var(--ochre); font-weight: 700; font-size: 13px; }
.remedy-card p { margin-bottom: 0; }
.remedy-card .duration { margin: 8px 0 12px; color: var(--ochre-deep); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.wellness-note { max-width: 900px; margin: 30px 0 0; padding-left: 18px; border-left: 3px solid var(--ochre); color: #5f625a; font-size: 13px; }
.full-image { position: relative; height: min(78vh, 780px); overflow: hidden; }
.full-image img { height: 100%; object-fit: cover; object-position: center; }
.full-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24,25,20,.72), transparent 60%); }
.full-image-copy { position: absolute; left: clamp(22px, 7vw, 100px); bottom: clamp(35px, 7vw, 90px); z-index: 1; max-width: 720px; color: white; }
.details { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; }
.details dl { margin: 0; }
.details dl div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.details dt { font-weight: 700; color: var(--ochre-deep); }
.details dd { margin: 0; }
.more-photos { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.more-photos img { height: 360px; object-fit: cover; }
.booking { width: min(1340px, calc(100% - 28px)); padding-left: clamp(28px, 7vw, 100px); padding-right: clamp(28px, 7vw, 100px); display: flex; gap: 50px; align-items: center; justify-content: space-between; background: var(--ochre-deep); color: white; }
.booking > div { max-width: 780px; }
.booking p:not(.eyebrow) { max-width: 680px; font-size: 18px; }
.booking .button { flex: 0 0 auto; }
footer { padding: 45px clamp(22px, 6vw, 85px); display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 25px; align-items: center; background: var(--ink); color: #e8e1d5; font-size: 13px; }
footer div:nth-child(2) { text-align: center; color: #d8bb7d; }
footer div:last-child { text-align: right; }

@media (max-width: 900px) {
  .hero { align-items: center; padding-bottom: 150px; }
  .hero-shade { background: linear-gradient(90deg, rgba(22,27,20,.82), rgba(22,27,20,.25)), linear-gradient(0deg, rgba(22,27,20,.45), transparent); }
  .booking-card { left: 0; right: auto; }
  .intro, .details { grid-template-columns: 1fr; gap: 38px; }
  .photo-story { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 300px; }
  .photo.tall { grid-row: auto; }
  .photo.wide { grid-column: 1 / 3; grid-row: 1; }
  .photo-story > .photo:nth-child(3) { display: none; }
  .remedy-grid { grid-template-columns: 1fr; }
  .more-photos { grid-template-columns: 1fr 1fr; }
  .more-photos img:last-child { display: none; }
  .booking { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; }
  footer div:nth-child(2), footer div:last-child { text-align: left; }
}

@media (max-width: 560px) {
  .site-header { height: 68px; }
  .brand { font-size: 13px; }
  .header-link { display: none; }
  .hero { min-height: calc(100svh - 68px); }
  .hero-image { object-position: 35% center; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .booking-card { width: 100%; }
  .booking-card div { flex: 1; min-width: 0; padding: 18px; }
  .photo-story { display: grid; grid-template-columns: 1fr; grid-template-rows: 330px 330px auto; }
  .photo.wide { grid-column: auto; grid-row: auto; }
  .photo-story > .photo:nth-child(3) { display: block; }
  .story-card { min-height: 300px; }
  .details dl div { grid-template-columns: 1fr; gap: 4px; }
  .more-photos { grid-template-columns: 1fr; }
  .more-photos img { height: 300px; }
  .more-photos img:last-child { display: block; }
  .booking .button { width: 100%; text-align: center; }
}