@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340..600;1,9..144,400..500&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #1b160f;
  --bg-2: #221b12;
  --surface: #2a2216;
  --surface-2: #362b1a;
  --ink: #f3e9d6;
  --ink-soft: #cdbea0;
  --ink-faint: #8d8064;
  --gold: #cda468;
  --gold-bright: #e9c483;
  --gold-deep: #9c7738;
  --rice: #85a06f;
  --rice-deep: #56693f;
  --line: rgba(243,233,214,0.14);
  --line-strong: rgba(243,233,214,0.28);
  --shadow: 0 24px 54px -28px rgba(0,0,0,0.7);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font:inherit;}
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline: clamp(18px, 5vw, 56px); }
h1,h2,h3{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:560;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:0.6em;
}
.eyebrow::before{ content:""; width:1.4em; height:1px; background:currentColor; display:inline-block; }
.eyebrow.rice{ color:var(--rice); }
.mono{ font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; }
p{ color:var(--ink-soft); margin:0; }
.measure{ max-width:60ch; }
[hidden]{ display:none !important; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:12px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); font-size:0.88rem; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); padding:6px 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--gold-bright); }
.has-drop{ position:relative; }
.drop{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px; margin-top:10px; min-width:190px;
  box-shadow:var(--shadow);
  display:none; flex-direction:column; gap:2px;
}
.has-drop:hover .drop, .has-drop:focus-within .drop{ display:flex; }
.drop a{ padding:9px 12px; border-radius:8px; font-size:0.86rem; }
.drop a:hover{ background:var(--surface-2); }
.nav-cta{
  font-size:0.82rem; font-weight:600; padding:0.65em 1.2em; border-radius:999px;
  background:var(--gold-deep); color:var(--bg); text-decoration:none; white-space:nowrap;
}
.nav-cta:hover{ background:var(--gold); }
.burger{ display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; color:var(--ink); padding:8px 10px; cursor:pointer; }
@media (max-width:860px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
}
#mobile-menu{
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
#mobile-menu .wrap{ display:flex; flex-direction:column; padding-block:10px 18px; gap:2px; }
#mobile-menu a{ text-decoration:none; color:var(--ink-soft); padding:11px 4px; border-bottom:1px solid var(--line); font-size:0.95rem; }
#mobile-menu a.sub{ padding-left:18px; color:var(--ink-faint); font-size:0.88rem; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em; font-weight:600; font-size:0.92rem;
  padding:0.85em 1.6em; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-solid{ background:var(--gold-deep); color:#1b160f; }
.btn-solid:hover{ background:var(--gold); }
.btn-outline{ border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn-rice{ background:var(--rice-deep); color:#eef2e8; }
.btn-rice:hover{ background:var(--rice); }

section{ padding-block: clamp(48px, 8vw, 96px); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px); }
.section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); margin-top:0.4em; }
.section-head .measure{ color:var(--ink-soft); }
.alt{ background:var(--bg-2); }

/* ---------- HOME HERO COLLAGE ---------- */
.collage{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(120px, 15vw);
  gap:6px;
  padding:6px;
}
.collage a, .collage div{ display:block; }
.collage img{ width:100%; height:100%; object-fit:cover; }
.c1{ grid-column:1/3; grid-row:1/3; }
.c2{ grid-column:3/4; grid-row:1/2; }
.c3{ grid-column:4/5; grid-row:1/2; }
.c4{ grid-column:3/4; grid-row:2/3; }
.c5{ grid-column:4/5; grid-row:2/3; }
@media (max-width:700px){
  .collage{ grid-template-columns:repeat(2,1fr); grid-auto-rows:34vw; }
  .c1{ grid-column:1/3; grid-row:1/2; }
  .c2{ grid-column:1/2; grid-row:2/3; }
  .c3{ grid-column:2/3; grid-row:2/3; }
  .c4{ grid-column:1/2; grid-row:3/4; }
  .c5{ grid-column:2/3; grid-row:3/4; }
}

.hero-below{ text-align:center; padding-block: clamp(36px,6vw,64px) clamp(20px,4vw,32px); }
.hero-below img{ height:64px; width:auto; margin:0 auto 22px; }
.hero-below h1{ font-size:clamp(2rem, 4.4vw, 3.1rem); max-width:18ch; margin-inline:auto; }
.hero-below p{ max-width:52ch; margin:1.1em auto 0; font-size:1.05rem; }
.hero-below .btn{ margin-top:1.8em; }

.facts{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts .wrap{ display:flex; flex-wrap:wrap; gap:10px 32px; padding-block:16px; font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.02em; color:var(--ink-soft); }
.facts strong{ color:var(--gold-bright); font-weight:500; }

/* ---------- EXPLORE / HOUSE CARDS ---------- */
.houses-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .houses-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .houses-grid{ grid-template-columns:1fr; } }
.house-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.house-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.house-thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); position:relative; }
.house-thumb img{ width:100%; height:100%; object-fit:cover; }
.placeholder-media{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.placeholder-media .initial{ font-family:'Fraunces', serif; font-size:3.4rem; color:rgba(243,233,214,0.9); }
.wood-pattern{ background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px), linear-gradient(120deg, #6b431f, #92602f 45%, #4d3018); }
.bamboo-pattern{ background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 30px), linear-gradient(160deg, #3c4a2e, #56693f 55%, #263420); }
.tbd-pattern{ background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 22px), linear-gradient(160deg, #33291a, #4a3c24 55%, #241d12); }
.pill-tag{ position:absolute; top:12px; left:12px; background:rgba(20,16,10,0.6); color:var(--gold-bright); font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.08em; padding:0.35em 0.7em; border-radius:999px; text-transform:uppercase; }
.house-info{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.house-info h3{ font-size:1.15rem; }
.house-info .meaning{ font-size:0.76rem; color:var(--ink-faint); font-style:italic; }
.house-info .specs-mini{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); margin-top:2px; }
.house-info .go{ margin-top:auto; font-size:0.82rem; font-weight:600; color:var(--gold); }

/* ---------- INTRO / MISSION ---------- */
.intro-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:820px){ .intro-grid{ grid-template-columns:1fr; } }
.intro-grid h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:0.5em; }
.intro-grid p{ margin-top:1.1em; font-size:1.02rem; }
.intro-side{ border-left:1px solid var(--line-strong); padding-left:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:18px; }
.intro-side .figure{ font-family:'Fraunces', serif; font-size:2rem; color:var(--gold); line-height:1; }
.intro-side .cap{ font-size:0.86rem; color:var(--ink-soft); margin-top:0.35em; }

/* ---------- DETAILS (natural materials / saltwater pools) ---------- */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-grid .card-block p{ font-size:0.96rem; }

/* ---------- SHALA FEATURE PHOTO ---------- */
.shala-figure{ margin:0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.shala-figure img{ width:100%; display:block; max-height:560px; object-fit:cover; }
.shala-figure figcaption{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; background:linear-gradient(0deg, rgba(10,8,5,0.78), transparent); color:#f6f1e6; font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; }

/* ---------- GOLDEN HOUR ---------- */
.golden{ display:grid; grid-template-columns:1.5fr 1fr; gap:4px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
@media (max-width:680px){ .golden{ grid-template-columns:1fr; } }
.golden figure{ margin:0; position:relative; height:100%; min-height:260px; }
.golden img{ width:100%; height:100%; object-fit:cover; }
.golden figcaption{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; background:linear-gradient(0deg, rgba(10,8,5,0.78), transparent); color:#f6f1e6; font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; }

/* ---------- RETREAT TEASER ---------- */
.teaser{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px); align-items:center; border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,44px); background:linear-gradient(135deg, var(--surface), var(--bg-2)); }
@media (max-width:820px){ .teaser{ grid-template-columns:1fr; } }
.teaser-icons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.2em; }
.teaser-icons span{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; border:1px solid var(--line-strong); color:var(--rice); padding:0.4em 0.8em; border-radius:999px; }
.teaser-art{ aspect-ratio:1/1; max-width:280px; margin-inline:auto; }

/* ---------- LOCATION ---------- */
.loc{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:820px){ .loc{ grid-template-columns:1fr; } }
.loc-art{ aspect-ratio:1/1; max-width:340px; margin-inline:auto; }
.loc-list{ margin-top:1.4em; display:flex; flex-direction:column; gap:14px; }
.loc-item{ display:flex; gap:12px; align-items:baseline; }
.loc-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; transform:translateY(-3px); }
.loc-item p{ color:var(--ink); font-size:0.98rem; }

/* ---------- BUNGALOW PAGE ---------- */
.crumb{ font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--ink-faint); text-decoration:none; display:inline-flex; align-items:center; gap:0.4em; }
.crumb:hover{ color:var(--gold); }
.house-hero{ position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.house-hero .strip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:8px; padding:8px; overflow-x:auto; }
.house-hero .strip img{ aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.house-hero .banner{ aspect-ratio: 21/9; }
@media (max-width:700px){ .house-hero .banner{ aspect-ratio:4/3; } }
.house-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-top:clamp(26px,4vw,40px); }
.house-head h1{ font-size:clamp(2rem,4vw,2.9rem); }
.house-head .meaning{ font-style:italic; color:var(--ink-faint); font-size:0.9rem; margin-top:0.3em; }
.house-specs{ display:flex; flex-wrap:wrap; gap:10px 22px; font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--ink-soft); padding-block:16px; margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.house-body-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,5vw,56px); margin-top:clamp(32px,5vw,52px); }
@media (max-width:860px){ .house-body-grid{ grid-template-columns:1fr; } }
.amenity-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:0.9em; }
@media (max-width:480px){ .amenity-list{ grid-template-columns:1fr; } }
.amenity-list li{ list-style:none; font-size:0.92rem; color:var(--ink-soft); padding-left:1.1em; position:relative; }
.amenity-list li::before{ content:"\2014"; position:absolute; left:0; color:var(--gold); }
.card-block{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3vw,30px); }
.card-block h3{ font-size:1.2rem; margin-bottom:0.6em; }
.card-block p + p{ margin-top:0.9em; }
.note-list{ margin:0.9em 0 0; padding-left:1.2em; color:var(--ink-soft); }
.note-list li{ margin-bottom:0.55em; }
.house-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:clamp(30px,4vw,44px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); }

.other-houses{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding-bottom: clamp(40px,6vw,64px); }
.other-houses a{ font-family:'IBM Plex Mono',monospace; font-size:0.78rem; text-decoration:none; color:var(--ink-soft); border:1px solid var(--line-strong); padding:0.6em 1.1em; border-radius:999px; }
.other-houses a:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* ---------- RETREATS PAGE ---------- */
.retreat-hero{ background:linear-gradient(160deg, var(--surface-2), var(--bg)); border-radius:22px; padding:clamp(32px,6vw,60px); }
.retreat-hero h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); max-width:16ch; }
.retreat-hero p{ max-width:56ch; margin-top:1.1em; font-size:1.05rem; }

.stay-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:980px){ .stay-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stay-grid{ grid-template-columns:1fr; } }
.stay-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 18px; display:flex; flex-direction:column; gap:8px; }
.stay-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--rice); }
.stay-card h3{ font-size:1.05rem; }
.stay-card p{ font-size:0.86rem; }

.facility-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .facility-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .facility-grid{ grid-template-columns:1fr; } }
.facility-card{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
.facility-badge{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-deep); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; color:var(--gold-bright); font-size:1.05rem; }
.facility-card h3{ font-size:1rem; }
.facility-card p{ font-size:0.85rem; margin-top:0.3em; }

/* ---------- CONTACT (global) ---------- */
.contact{ background:linear-gradient(135deg, var(--gold-deep), #7a5b26); color:#20180d; border-radius:22px; padding:clamp(32px,6vw,64px); display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; align-items:center; }
.contact h2{ color:#1c1509; font-size:clamp(1.7rem,3vw,2.3rem); max-width:16ch; }
.contact p{ color:rgba(28,21,9,0.75); margin-top:0.8em; max-width:40ch; }
.contact-actions{ display:flex; flex-direction:column; gap:12px; min-width:230px; }
.contact-actions .btn{ justify-content:center; }
.contact-actions .btn-solid{ background:#1c1509; color:var(--gold-bright); }
.contact-actions .btn-solid:hover{ background:#2a2011; }
.contact-actions .btn-outline{ border-color:rgba(28,21,9,0.4); color:#1c1509; }
.contact-actions .btn-outline:hover{ border-color:#1c1509; }
.contact-note{ font-size:0.76rem; color:rgba(28,21,9,0.68); margin-top:2px; }
#contact-band{ padding-block: clamp(48px,8vw,96px); }

footer{ border-top:1px solid var(--line); padding-block:36px 28px; margin-top:8px; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ height:32px; width:auto; }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:0.86rem; }
.foot-links a{ text-decoration:none; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--gold); }
.foot-bottom{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

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