*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Khami-inspired warm palette */
  --cream:#F5F0E8;
  --cream2:#EDE7DA;
  --parchment:#FAF7F2;
  --bark:#3D3530;
  --bark-mid:#6B5F58;
  --bark-soft:#A89E96;
  --bark-faint:#C8BFBA;
  --bark-ghost:rgba(61,53,48,.06);
  --bark-line:rgba(61,53,48,.1);
  --bark-line2:rgba(61,53,48,.06);
  /* glass = warm-tinted frosted */
  --glass:rgba(250,247,242,.78);
  --glass-b:rgba(255,255,255,.5);
  --glass-dark:rgba(245,240,232,.88);
  /* accent: deep warm brown, not blue */
  --accent:#5C4A3A;
  --accent-soft:rgba(92,74,58,.1);
  --orange:#C8651A;
  --orange-soft:rgba(200,101,26,.12);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}
html{background:var(--cream);color:var(--bark);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--sans)}
a{color:inherit;text-decoration:none}

/* ambient — warm sandy gradients */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 80% 55% at 10% -5%, rgba(220,200,170,.35) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 105%, rgba(200,180,150,.25) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 55% 55%, rgba(240,230,210,.2) 0%, transparent 65%);
  pointer-events:none;
}

/* ── nav ── */
nav{
  position:sticky;top:0;z-index:80;height:58px;padding:0 36px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(245,240,232,.85);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--bark-line2);
}
.logo{display:flex;align-items:baseline;gap:2px}
.logo-serif{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:.01em;color:var(--bark);line-height:1}
.logo-serif em{font-style:italic;font-weight:300}
.logo-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:1px;margin-bottom:2px;flex:none}
.nav-links{display:flex;gap:32px;font-size:13px;font-weight:400;color:var(--bark-mid)}
.nav-links a:hover{color:var(--bark)}
.nav-cta{
  font-size:13px;font-weight:500;letter-spacing:.01em;
  background:var(--bark);color:var(--parchment);
  border:none;border-radius:980px;padding:9px 20px;cursor:pointer;
  transition:opacity .15s;
}
.nav-cta:hover{opacity:.8}
@media(max-width:640px){.nav-links{display:none}}

/* ── hero ── */
.hero{padding:80px 36px 24px;max-width:900px;margin:0 auto}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:400;color:var(--bark-mid);letter-spacing:.04em;
  background:var(--glass);border:1px solid var(--glass-b);
  border-radius:980px;padding:6px 16px;margin-bottom:28px;
  backdrop-filter:blur(8px);
}
.eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
/* Khami-style: massive, thin editorial serif */
.hero h1{
  font-family:var(--serif);
  font-size:clamp(44px,7vw,88px);
  font-weight:300;line-height:1.0;
  letter-spacing:-.01em;
  color:var(--bark);margin-bottom:24px;
  max-width:820px;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--bark-mid)}
.hero h1 em mark{
  background:var(--orange);
  color:var(--parchment);
  font-style:inherit;
  border-radius:6px;
  padding:0 8px 4px 6px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero-body{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hero p{font-size:15px;font-weight:400;color:var(--bark-mid);line-height:1.65;max-width:400px}
.hero-cta-wrap{display:flex;gap:12px;align-items:center;flex:none}
.hero-cta{
  font-size:14px;font-weight:500;
  background:var(--bark);color:var(--parchment);
  border:none;border-radius:980px;padding:13px 28px;cursor:pointer;
  transition:opacity .15s;letter-spacing:.01em;white-space:nowrap;
}
.hero-cta:hover{opacity:.82}
.hero-link{font-size:13px;color:var(--bark-soft);font-weight:400;cursor:pointer;white-space:nowrap}
.hero-link:hover{color:var(--bark)}

/* ── divider ── */
.divider{border:none;border-top:1px solid var(--bark-line2);max-width:calc(100% - 72px);margin:32px auto 0}

/* ── tabs ── */
.tab-row{
  display:flex;justify-content:center;gap:0;
  margin:32px auto 26px;width:fit-content;
  background:var(--glass);border:1px solid var(--bark-line);
  border-radius:980px;padding:4px;
  backdrop-filter:blur(12px);
}
.tab-btn{
  font-size:13px;font-weight:400;letter-spacing:.02em;
  padding:8px 24px;border:none;border-radius:980px;
  cursor:pointer;color:var(--bark-soft);background:transparent;
  transition:all .18s;
}
.tab-btn.active{
  background:var(--bark);color:var(--parchment);
  font-weight:500;
  box-shadow:0 1px 6px rgba(61,53,48,.18);
}

/* ── search ── */
.search-wrap{max-width:540px;margin:0 auto;position:relative;padding:0 20px}
.search-inner{
  display:flex;align-items:center;gap:11px;
  background:var(--glass-dark);border:1px solid var(--bark-line);
  border-radius:14px;padding:13px 18px;
  backdrop-filter:blur(16px);
  box-shadow:0 2px 12px rgba(61,53,48,.06);
  transition:border-color .15s,box-shadow .15s;
}
.search-inner:focus-within{
  border-color:rgba(92,74,58,.35);
  box-shadow:0 0 0 4px rgba(92,74,58,.07),0 2px 12px rgba(61,53,48,.06);
}
.search-inner svg{flex:none;opacity:.35}
.search-inner input{flex:1;background:none;border:none;outline:none;font-size:14px;color:var(--bark);font-weight:400}
.search-inner input::placeholder{color:var(--bark-soft)}
.search-dd{
  position:absolute;left:20px;right:20px;top:calc(100% + 8px);
  background:rgba(250,247,242,.96);border:1px solid var(--bark-line);
  border-radius:16px;overflow:hidden;display:none;z-index:60;
  backdrop-filter:blur(24px);
  box-shadow:0 8px 32px rgba(61,53,48,.12),0 2px 8px rgba(61,53,48,.06);
}
.search-dd.open{display:block}
.dd-group{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bark-faint);padding:10px 16px 4px}
.dd-row{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;padding:10px 16px;font-size:14px;color:var(--bark);cursor:pointer;text-align:left;transition:background .1s}
.dd-row:hover{background:var(--bark-ghost)}
.dd-kind{font-size:11px;color:var(--accent);font-weight:500}
.dd-empty{padding:16px;font-size:13px;color:var(--bark-soft);text-align:center}

/* ── pills ── */
.pills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:700px;margin:16px auto 0;padding:0 20px}
.pill{
  font-size:12px;font-weight:400;letter-spacing:.02em;
  padding:6px 15px;border-radius:980px;
  border:1px solid var(--bark-line);
  background:var(--glass);color:var(--bark-mid);
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:all .15s;backdrop-filter:blur(8px);
}
.pill:hover{border-color:rgba(92,74,58,.3);color:var(--bark);background:rgba(250,247,242,.9)}
.pill.active{background:var(--bark);color:var(--parchment);border-color:var(--bark);box-shadow:0 2px 8px rgba(61,53,48,.2)}
.pill .rx{display:none;opacity:.6;font-size:10px}
.pill.active .rx{display:inline}

/* ── feed meta ── */
.feed-meta{
  text-align:center;font-family:var(--serif);
  font-size:15px;font-weight:300;font-style:italic;
  color:var(--bark-soft);margin:24px 0 8px;letter-spacing:.01em;
}
.feed-meta b{font-weight:400;font-style:normal;color:var(--bark-mid)}

/* ── feed ── */
.feed{max-width:1280px;margin:10px auto 100px;padding:0 16px;column-count:4;column-gap:12px}
@media(max-width:1100px){.feed{column-count:3}}
@media(max-width:720px){.feed{column-count:2}}
@media(max-width:440px){.feed{column-count:1}}

/* ── card ── */
.card{break-inside:avoid;margin-bottom:12px;position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--cream2)}
.card.hidden{display:none}
.card img{display:block;width:100%;height:auto;object-fit:cover;border-radius:16px;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.card:hover img{transform:scale(1.03)}
.card::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
.card:hover::after{opacity:1}

/* ── pins ── */
.pin{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:rgba(250,247,242,.88);
  border:1.5px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transform:translate(-50%,-50%);z-index:10;padding:0;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(61,53,48,.2);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.pin:hover,.pin.open{
  transform:translate(-50%,-50%) scale(1.22);
  box-shadow:0 4px 18px rgba(61,53,48,.28),0 0 0 4px rgba(92,74,58,.2);
}
.pin-dot{width:7px;height:7px;border-radius:50%;background:var(--bark);transition:background .15s}
.pin.open .pin-dot{background:var(--accent)}
.pin-pulse{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(250,247,242,.55);animation:pp 2.8s ease-out infinite;pointer-events:none}
@keyframes pp{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.pin-pulse{animation:none}}

/* ── callout — warm glass card ── */
.callout{
  position:fixed;z-index:200;width:210px;
  background:rgba(250,247,242,.9);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;padding:15px 17px;
  pointer-events:none;display:none;
  backdrop-filter:saturate(160%) blur(28px);
  -webkit-backdrop-filter:saturate(160%) blur(28px);
  box-shadow:0 8px 36px rgba(61,53,48,.14),0 2px 8px rgba(61,53,48,.06),inset 0 1px 0 rgba(255,255,255,.75);
}
.callout.open{display:block;pointer-events:auto;animation:cIn .18s cubic-bezier(.25,.46,.45,.94)}
@keyframes cIn{from{opacity:0;transform:scale(.94) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}
.callout-label{
  font-family:var(--serif);font-size:13px;font-weight:400;font-style:italic;
  color:var(--accent);margin-bottom:11px;letter-spacing:.01em;
}
.callout dl{display:grid;grid-template-columns:auto 1fr;row-gap:6px;column-gap:12px;margin-bottom:13px}
.callout dt{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bark-soft);align-self:center}
.callout dd{font-size:13px;font-weight:500;text-align:right;color:var(--bark);letter-spacing:-.01em}
.callout-inquire{
  width:100%;background:var(--orange);color:#fff;
  border:none;border-radius:980px;
  padding:10px 0;font-size:12px;font-weight:500;
  letter-spacing:.02em;cursor:pointer;
  transition:opacity .15s;
  box-shadow:0 2px 10px rgba(200,101,26,.25);
}
.callout-inquire:hover{opacity:.85}

/* ── empty ── */
.feed-empty{display:none;text-align:center;padding:80px 20px;color:var(--bark-soft);column-span:all}
.feed-empty.show{display:block}
.feed-empty p{font-family:var(--serif);font-size:18px;font-weight:300;font-style:italic;margin-bottom:16px;line-height:1.6;color:var(--bark-mid)}
.feed-empty button{background:none;border:1px solid var(--bark-line);border-radius:980px;padding:9px 22px;font-size:13px;color:var(--bark-mid);cursor:pointer;transition:all .15s}
.feed-empty button:hover{border-color:var(--bark);color:var(--bark)}

/* ── modal overlay ── */
.overlay{
  position:fixed;inset:0;
  background:rgba(61,53,48,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;z-index:300;padding:20px;
}
.overlay.open{display:flex}

/* ── modal ── */
.modal{
  background:rgba(250,247,242,.92);
  border:1px solid rgba(255,255,255,.65);
  border-radius:24px;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;
  padding:30px 28px;position:relative;
  backdrop-filter:saturate(160%) blur(32px);-webkit-backdrop-filter:saturate(160%) blur(32px);
  box-shadow:0 28px 70px rgba(61,53,48,.18),0 8px 24px rgba(61,53,48,.08),inset 0 1px 0 rgba(255,255,255,.85);
  animation:mIn .22s cubic-bezier(.25,.46,.45,.94);
}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{
  position:absolute;top:16px;right:16px;width:28px;height:28px;
  border-radius:50%;background:rgba(61,53,48,.07);border:none;
  font-size:14px;color:var(--bark-mid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.modal-close:hover{background:rgba(61,53,48,.13);color:var(--bark)}
.m-eyebrow{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--bark-soft);margin-bottom:6px}
.modal h3{
  font-family:var(--serif);font-size:28px;font-weight:300;
  letter-spacing:-.01em;margin-bottom:4px;color:var(--bark);line-height:1.1;
}
.m-ctx{font-size:12.5px;color:var(--bark-mid);background:rgba(92,74,58,.06);border-radius:10px;padding:10px 13px;margin:12px 0 22px;line-height:1.55;font-weight:400}
label{display:block;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bark-soft);margin-bottom:5px}
.field{margin-bottom:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:400px){.frow{grid-template-columns:1fr}}
input[type=text],input[type=email],select,textarea{
  width:100%;background:rgba(255,255,255,.55);border:1px solid var(--bark-line);
  border-radius:10px;padding:10px 13px;font-size:14px;color:var(--bark);
  outline:none;transition:border-color .15s,box-shadow .15s;font-weight:400;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(92,74,58,.4);
  box-shadow:0 0 0 4px rgba(92,74,58,.07);
  background:rgba(255,255,255,.8);
}
textarea{resize:vertical;min-height:64px}
.m-submit{
  width:100%;background:var(--bark);color:var(--parchment);border:none;border-radius:980px;
  padding:14px;font-size:14px;font-weight:500;letter-spacing:.02em;
  cursor:pointer;margin-top:6px;transition:opacity .15s;
}
.m-submit:hover{opacity:.82}
.m-note{font-size:11.5px;color:var(--bark-soft);text-align:center;margin-top:10px;font-weight:400}
.success{display:none;text-align:center;padding:18px 0}
.success.show{display:block}
.success-icon{
  font-family:var(--serif);font-size:40px;font-weight:300;font-style:italic;
  color:var(--accent);margin-bottom:12px;
}
.success h4{font-family:var(--serif);font-size:26px;font-weight:300;letter-spacing:-.01em;margin-bottom:8px;color:var(--bark)}
.success p{font-size:13.5px;color:var(--bark-mid);line-height:1.65;font-weight:400}