@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-latin.woff2') format('woff2'); font-style:normal; font-weight:400 500; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/fonts/fraunces-latin.woff2') format('woff2'); font-style:normal; font-weight:400 500; font-display:swap; }

:root { --ochre:#e8d6a0; --honey:#d8bc7c; --gold:#c8a254; --dark:#2a1508; --cream:#f0e5d2; --brown:#231207; --olive:#506020; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--dark); color:var(--brown); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.site-header, footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(24px,5vw,64px); border-bottom:1px solid #f0e5d21f; background:var(--dark); color:var(--cream); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--cream); font:400 20px Fraunces,serif; text-decoration:none; }
.brand-mark { display:block; width:32px; height:32px; object-fit:contain; }
nav { display:flex; align-items:center; gap:clamp(18px,3vw,42px); }
nav > a, .site-dropdown summary { color:var(--cream); font-size:13px; opacity:.62; text-decoration:none; cursor:pointer; }
nav > a:hover, .site-dropdown summary:hover { opacity:1; }
.site-dropdown { position:relative; }
.site-dropdown summary { list-style:none; }
.site-dropdown summary::-webkit-details-marker { display:none; }
.site-dropdown summary::after { content:'⌄'; margin-left:5px; font-size:15px; }
.site-dropdown-menu { position:absolute; top:calc(100% + 18px); left:-14px; z-index:5; display:grid; min-width:225px; padding:10px; border:1px solid #f0e5d22e; background:var(--brown); box-shadow:0 22px 50px rgb(0 0 0 / 28%); }
.site-dropdown-menu a { padding:10px 12px; color:var(--cream); font-size:12px; white-space:nowrap; opacity:.72; text-decoration:none; }
.site-dropdown-menu a:hover { background:#f0e5d20e; opacity:1; }
.nav-book { padding:10px 20px; background:var(--olive); color:var(--cream)!important; font-size:11px!important; letter-spacing:.1em; opacity:1!important; text-transform:uppercase; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:clamp(36px,7vw,96px); align-items:center; min-height:clamp(500px,70vh,760px); padding:clamp(64px,9vw,120px) clamp(24px,8vw,120px); overflow:hidden; background:var(--ochre); }
.hero::before { content:'UNRAVEL'; position:absolute; top:clamp(45px,6vw,82px); left:clamp(20px,5vw,76px); color:var(--brown); font:400 clamp(76px,14vw,180px)/.84 Fraunces,serif; letter-spacing:-.055em; opacity:.055; pointer-events:none; white-space:nowrap; }
.hero > * { position:relative; z-index:1; }
.eyebrow { margin:0 0 16px; color:var(--olive); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Fraunces,serif; font-weight:400; }
h1 { max-width:760px; margin-bottom:24px; color:var(--brown); font-size:clamp(48px,7.5vw,98px); line-height:.93; letter-spacing:-.04em; }
h2 { margin-bottom:20px; font-size:clamp(32px,5vw,60px); line-height:1.02; letter-spacing:-.035em; }
h3 { margin-bottom:14px; font-size:23px; }
p,li { color:#231207b8; line-height:1.85; }
.intro { max-width:650px; margin-bottom:0; font-size:16px; }
.portrait { overflow:hidden; aspect-ratio:3 / 4; border:0; border-radius:0; background:var(--honey); box-shadow:none; }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; filter:sepia(.26) brightness(.86); }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; font-size:11px; font-weight:500; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:transform .25s ease; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--dark); color:var(--cream); }
.secondary { border:1px solid #23120736; color:var(--brown); }
.section { padding:clamp(66px,9vw,116px) clamp(24px,8vw,120px); background:var(--dark); color:var(--cream); }
.section { content-visibility:auto; contain-intrinsic-size:auto 680px; }
.section.cream { background:var(--honey); color:var(--brown); }
.copy { max-width:800px; }
.copy p { max-width:730px; color:#f0e5d2b0; font-size:15px; }
.cream .copy p { color:#231207b8; }
.copy a { color:inherit; text-decoration-color:var(--gold); text-underline-offset:4px; }
.copy ul { padding-left:20px; }
.copy li { color:#f0e5d2b0; }
.cream .copy li { color:#231207b8; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; max-width:1180px; }
.card { padding:32px; border:0; border-radius:0; background:#f0e5d20b; box-shadow:none; }
.card::before { content:''; display:block; width:28px; height:1px; margin-bottom:25px; background:var(--gold); }
.card h3 { color:inherit; }
.card p { margin:0; color:#f0e5d29c; font-size:13px; line-height:1.8; }
.cream .card { background:#2312070b; }
.cream .card p { color:#231207b8; }
.booking { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; max-width:980px; }
footer { border-top:1px solid #f0e5d21f; border-bottom:0; color:var(--cream); font-size:11px; letter-spacing:.07em; }
footer > span:first-child { font:400 17px Fraunces,serif; letter-spacing:0; }
footer nav { display:flex; flex-wrap:wrap; gap:22px; }
footer a { display:inline-flex; min-height:44px; align-items:center; color:rgb(240 229 210 / 72%); opacity:1; text-decoration:none; }
@media (max-width:860px) { .hero,.grid,.booking { grid-template-columns:1fr; } .portrait { max-width:440px; } }
@media (max-width:760px) { .site-header,footer { align-items:flex-start; flex-direction:column; } nav { width:100%; flex-wrap:wrap; gap:16px; } .site-dropdown-menu { right:auto; left:0; } .button { width:100%; } .hero { min-height:auto; } }

/* Impeccable utility-page refinement */
html { scrollbar-color:var(--gold) var(--dark); }
body::selection { background:var(--olive); color:var(--cream); }
a,summary { -webkit-tap-highlight-color:rgb(200 162 84 / 24%); }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.site-header { position:sticky; top:0; z-index:20; min-height:78px; padding:14px clamp(24px,5.5vw,84px); background:rgb(42 21 8 / 96%); }
.brand { gap:12px; font-size:21px; }
.brand-mark { width:36px; height:36px; }
nav > a,.site-dropdown summary { display:inline-flex; min-height:46px; align-items:center; font-size:14px; opacity:.72; }
.site-dropdown summary:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.site-dropdown-menu { top:calc(100% + 8px); min-width:252px; padding:12px; box-shadow:0 24px 54px rgb(0 0 0 / 26%); }
.site-dropdown-menu a { display:flex; min-height:46px; align-items:center; padding:10px 14px; font-size:13px; }
.nav-book { min-height:46px!important; padding:0 24px; font-size:12px!important; }

.hero { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); min-height:clamp(590px,76vh,790px); padding:clamp(78px,10vw,136px) clamp(24px,8vw,120px); }
.hero::before { top:auto; bottom:clamp(32px,7vw,82px); font-size:clamp(86px,15vw,190px); opacity:.06; }
.hero h1 { max-width:820px; margin-bottom:28px; font-size:clamp(48px,7vw,92px); line-height:.95; letter-spacing:-.035em; text-wrap:balance; }
.intro { max-width:66ch; color:rgb(35 18 7 / 80%); font-size:17px; line-height:1.72; }
.portrait { position:relative; aspect-ratio:4 / 5; }
.portrait img { filter:sepia(.18) brightness(.9) saturate(.86); }
.button { min-height:52px; transition:transform .28s cubic-bezier(.22,1,.36,1),background .28s ease; }
.button:hover { transform:translateY(-3px); }
.button .arrow { position:relative; display:inline-block; width:15px; height:15px; }
.button .arrow::before { content:''; position:absolute; top:2px; right:1px; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; }
.button .arrow::after { content:''; position:absolute; top:7px; left:2px; width:11px; height:1px; background:currentColor; transform:rotate(-45deg); }
.secondary { border-color:rgb(35 18 7 / 30%); }

.section { padding:clamp(82px,10vw,140px) clamp(24px,8vw,120px); }
.section.cream .copy { display:grid; max-width:1100px; grid-template-columns:minmax(220px,.48fr) minmax(0,1fr); column-gap:clamp(42px,8vw,120px); }
.copy h1 { font-size:clamp(48px,7vw,88px); }
.copy h2 { margin:0; padding:36px 0; border-top:1px solid rgb(35 18 7 / 24%); font-size:clamp(30px,3.8vw,48px); line-height:1.05; }
.copy h2:first-child { padding-top:0; border-top:0; }
.copy h2 + p { margin:0; padding:36px 0; border-top:1px solid rgb(35 18 7 / 24%); color:rgb(35 18 7 / 78%); font-size:16px; line-height:1.82; }
.copy h2:first-child + p { padding-top:0; border-top:0; }
.section:first-child { min-height:calc(100svh - 70px); }
footer { padding:28px clamp(24px,5.5vw,84px); }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; }
  .portrait { max-width:520px; }
  .section.cream .copy { grid-template-columns:1fr; }
  .copy h2 { padding-bottom:14px; }
  .copy h2 + p { padding-top:0; border-top:0; }
}

@media (max-width:760px) {
  .site-header { position:relative; gap:12px; }
  .site-header nav { display:grid; width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .site-dropdown { position:static; }
  .site-dropdown summary,.site-header nav > a { width:100%; min-height:48px; justify-content:center; padding:0 6px; border:1px solid rgb(240 229 210 / 15%); font-size:12px; text-align:center; }
  .site-dropdown-menu { position:absolute; top:100%; right:24px; left:24px; min-width:0; padding:5px; box-shadow:0 20px 42px rgb(0 0 0 / 28%); }
  .site-dropdown-menu a { min-height:44px; white-space:normal; }
  .nav-book { min-height:48px!important; }
  .hero { padding-block:80px; }
  .hero h1 { font-size:clamp(44px,13vw,62px); }
  .intro { font-size:16px; }
  .portrait { width:calc(100% - 18px); }
  .button { width:100%; }
  .section { padding-block:74px; }
  .copy h2 { font-size:clamp(32px,10vw,46px); }
  footer nav { align-items:flex-start; flex-direction:column; gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button { transition:none; }
}