/* ===========================================================
   HATTON HAVEN — shared stylesheet
   Tokens: cobalt (deep ocean), cobalt-2 (mid water), turquoise
   (tide pool accent), sand (warm shore), foam (base), ink (text)
   =========================================================== */

:root{
  --cobalt:      #123A5C;
  --cobalt-2:    #2C6489;
  --turquoise:   #2FA89C;
  --turquoise-l: #6FCCC2;
  --sand:        #F1E6CF;
  --foam:        #FAF7F0;
  --ink:         #16232C;
  --ink-soft:    #45565F;
  --white:       #ffffff;

  --display: "Fraunces", "Iowan Old Style", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --max: 1180px;
  --radius: 10px;
  --shadow: 0 18px 40px -18px rgba(18, 58, 92, 0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--foam);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
img.img-fallback{
  min-height:160px;
  background:repeating-linear-gradient(135deg, var(--sand), var(--sand) 12px, var(--foam) 12px, var(--foam) 24px);
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  margin:0 0 .4em;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--cobalt);
}
p{margin:0 0 1em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:var(--turquoise);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--turquoise);
  display:inline-block;
}
:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.52em 1em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn svg{width:12px;height:12px;flex:none;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--turquoise);color:var(--cobalt);}
.btn-primary:hover{background:var(--turquoise-l);}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45);}
.btn-ghost:hover{border-color:var(--white);}
.btn-dark{background:var(--cobalt);color:var(--white);}
.btn-dark:hover{background:#0d2940;}
.btn-outline{background:transparent;color:var(--cobalt);border-color:var(--cobalt);}
.btn-outline:hover{background:var(--cobalt);color:var(--white);}
.btn-row{display:flex;gap:.8em;flex-wrap:wrap;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(18,58,92,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.brand{
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--white);
  font-weight:600;
  display:flex;align-items:center;gap:.5em;
}
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--turquoise-l);
  text-transform:uppercase;
}
.main-nav{display:flex;align-items:center;gap:1.9em;}
.main-nav a{
  font-size:.92rem;
  color:rgba(255,255,255,.82);
  position:relative;
  padding:.3em 0;
}
.main-nav a:hover, .main-nav a.active{color:var(--white);}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--turquoise);
}
.nav-contact{display:flex;gap:.6em;}
.nav-contact .btn{font-size:.62rem;padding:.4em .8em;gap:.3em;}
.nav-contact .btn svg{width:10px;height:10px;}
.nav-toggle{
  display:none;
  background:none;border:0;color:var(--white);
  width:40px;height:40px;cursor:pointer;
}
.nav-toggle svg{width:24px;height:24px;}

@media (max-width: 980px){
  .main-nav{
    position:fixed;inset:78px 0 0 0;
    background:var(--cobalt);
    flex-direction:column;
    align-items:flex-start;
    padding:2em 28px;
    gap:1.4em;
    transform:translateX(100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:1.1rem;}
  .nav-contact{flex-direction:column;width:100%;margin-top:1em;}
  .nav-contact .btn{width:100%;justify-content:center;}
  .nav-toggle{display:block;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:flex-end;
  background:var(--cobalt);
  overflow:hidden;
}
.hero-page{min-height:62vh;}
.hero img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.78;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.78;
  background-position:center;
}
@media (max-width:640px), (prefers-reduced-motion:reduce){
  .hero-video{display:none;}
  .hero{background-image:var(--hero-fallback, none);background-size:cover;background-position:center;}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,58,92,.15) 0%, rgba(15,40,62,.55) 55%, rgba(10,26,40,.92) 100%);
}
.hero-content{position:relative;z-index:2;padding-bottom:64px;width:100%;color:var(--white);}
.hero h1{
  color:var(--white);
  font-size:clamp(2.6rem, 6vw, 5.2rem);
  margin-bottom:.3em;
}
.hero .tagline{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.05rem, 2vw, 1.4rem);
  color:var(--turquoise-l);
  max-width:640px;
  margin-bottom:1.3em;
}
.hero .eyebrow{color:var(--turquoise-l);}
.hero .eyebrow::before{background:var(--turquoise-l);}

/* ---------- wave divider (signature element) ---------- */
.tideline{
  width:100%;height:34px;
  display:block;
  margin:0;
}
.tideline path{stroke:var(--turquoise);stroke-width:2;fill:none;}
.tideline.on-dark path{stroke:var(--turquoise-l);opacity:.65;}
.section-sand{background:var(--sand);}
.section-cobalt{background:var(--cobalt);color:var(--white);}
.section-cobalt h2, .section-cobalt h3{color:var(--white);}
.section-foam{background:var(--foam);}
.section{padding:88px 0;}
@media (max-width:720px){.section{padding:58px 0;}}

/* ---------- ledger / stat strip (data, not decoration) ---------- */
.ledger{
  display:flex;flex-wrap:wrap;
  gap:0;
  border-top:1px solid rgba(18,58,92,.18);
  border-bottom:1px solid rgba(18,58,92,.18);
}
.ledger .item{
  flex:1 1 160px;
  padding:1.1em 1.4em;
  border-right:1px solid rgba(18,58,92,.18);
}
.ledger .item:last-child{border-right:0;}
.ledger .num{
  font-family:var(--mono);
  font-size:1.5rem;
  color:var(--cobalt);
  display:block;
}
.ledger .label{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.section-cobalt .ledger{border-color:rgba(255,255,255,.22);}
.section-cobalt .ledger .item{border-color:rgba(255,255,255,.22);}
.section-cobalt .ledger .num{color:var(--white);}
.section-cobalt .ledger .label{color:var(--turquoise-l);}
@media (max-width:720px){.ledger .item{flex:1 1 45%;}}

/* ---------- intro / two-col ---------- */
.intro-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;
}
.intro-grid .lede{
  font-family:var(--display);
  font-style:italic;
  font-size:1.35rem;
  color:var(--cobalt);
}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr;gap:32px;}}

/* ---------- property cards ---------- */
.stay-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;
}
@media (max-width:980px){.stay-grid{grid-template-columns:1fr;}}
.stay-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .25s ease;
}
.stay-card:hover{transform:translateY(-6px);}
.stay-card .photo{height:230px;overflow:hidden;}
.stay-card .photo img{width:100%;height:100%;object-fit:cover;}
.stay-card .body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.stay-card h3{font-size:1.45rem;margin-bottom:.25em;}
.stay-card .facts{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase;
  margin-bottom:.9em;
}
.stay-card p{color:var(--ink-soft);font-size:.95rem;flex:1;}
.stay-card .more{
  font-family:var(--mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--cobalt);display:inline-flex;align-items:center;gap:.4em;margin-top:.6em;
}
.stay-card:hover .more{color:var(--turquoise);}

/* ---------- gallery strip ---------- */
.gallery-strip{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
  height:560px;
}
.gallery-strip a:nth-child(1){grid-row:1 / 3;}
.gallery-strip a{display:block;overflow:hidden;border-radius:6px;}
.gallery-strip img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.gallery-strip a:hover img{transform:scale(1.05);}
@media (max-width:860px){
  .gallery-strip{grid-template-columns:1fr 1fr;height:auto;}
  .gallery-strip a:nth-child(1){grid-row:auto;grid-column:1/3;height:260px;}
  .gallery-strip a{height:160px;}
}

/* ---------- property detail layout ---------- */
.detail-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:56px;align-items:start;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}
.booking-card{
  background:var(--cobalt);color:var(--white);
  border-radius:var(--radius);
  padding:34px 30px;
  position:sticky;top:100px;
}
.booking-card h3{color:var(--white);font-size:1.25rem;}
.booking-card .btn-row{flex-direction:column;align-items:stretch;margin-top:1.2em;}
.booking-card .btn{justify-content:center;}
.booking-card .fine{font-size:.82rem;color:var(--turquoise-l);margin-top:1.2em;margin-bottom:0;}

.amenity-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1em;}
.chip{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;
  background:var(--sand);color:var(--cobalt);
  padding:.55em 1em;border-radius:999px;
  display:inline-flex;align-items:center;gap:.5em;
}
.chip svg{width:13px;height:13px;}

.sleep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:1.5em;}
.sleep-card{border-radius:8px;overflow:hidden;background:var(--white);box-shadow:var(--shadow);}
.sleep-card img{height:160px;width:100%;object-fit:cover;}
.sleep-card .cap{padding:.9em 1em;}
.sleep-card .cap b{display:block;font-size:.92rem;}
.sleep-card .cap span{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);}

/* ---------- cross links ---------- */
.cross-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;}
@media (max-width:760px){.cross-grid{grid-template-columns:1fr;}}
.cross-card{
  position:relative;border-radius:var(--radius);overflow:hidden;height:220px;
}
.cross-card img{width:100%;height:100%;object-fit:cover;}
.cross-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,58,92,0) 30%, rgba(10,26,40,.88) 100%);}
.cross-card .label{
  position:absolute;left:20px;bottom:18px;z-index:2;color:var(--white);
}
.cross-card .label .eyebrow{margin-bottom:.3em;}
.cross-card .label h4{color:var(--white);margin:0;}

/* ---------- host / about ---------- */
.host-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;align-items:center;}
@media (max-width:860px){.host-grid{grid-template-columns:1fr;}}
.host-portrait{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:1/1;
}
.host-portrait img{width:100%;height:100%;object-fit:cover;}
.host-team{display:flex;gap:30px;margin-top:1.6em;flex-wrap:wrap;}
.host-team .who{font-family:var(--mono);font-size:.85rem;color:var(--cobalt);}
.host-team .who b{display:block;color:var(--ink);font-family:var(--body);font-size:1rem;}

/* ---------- contact band ---------- */
.contact-band{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
}
.contact-band h2{margin-bottom:.2em;}
.contact-band .num{font-family:var(--mono);font-size:1.1rem;color:var(--turquoise-l);}

/* ---------- archive gallery (real, self-hosted host photos) ---------- */
.archive-note{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);
  margin:.6em 0 1.6em;
}
.archive-note svg{width:15px;height:15px;color:var(--turquoise);flex:none;}
.archive-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;
}
.archive-grid figure{margin:0;background:var(--white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);}
.archive-grid img{width:100%;height:150px;object-fit:cover;}
.archive-grid figcaption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
  color:var(--ink-soft);padding:.6em .8em;
}

/* ---------- neighborhood strip ---------- */
.neighborhood-strip{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:36px;
}
.neighborhood-strip a{border-radius:8px;overflow:hidden;display:block;height:130px;position:relative;}
.neighborhood-strip img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.neighborhood-strip a:hover img{transform:scale(1.08);}
.neighborhood-strip span{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg, rgba(18,58,92,0), rgba(10,26,40,.82));
  color:var(--white);font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  padding:1.6em .6em .4em;text-transform:uppercase;
}
@media (max-width:860px){.neighborhood-strip{grid-template-columns:repeat(3,1fr);}}
@media (max-width:500px){.neighborhood-strip{grid-template-columns:repeat(2,1fr);}}

/* ---------- photos-coming-soon placeholder (honest, no fake photos) ---------- */
.photo-placeholder{
  border:1.5px dashed var(--cobalt-2);
  border-radius:var(--radius);
  background:var(--sand);
  padding:48px 32px;
  text-align:center;
  color:var(--ink-soft);
}
.photo-placeholder svg{width:30px;height:30px;color:var(--cobalt-2);margin-bottom:.6em;}
.photo-placeholder p{margin:0 auto;max-width:440px;font-size:.92rem;}
.photo-placeholder .label{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cobalt);display:block;margin-bottom:.5em;
}

/* ---------- host avatar placeholder (no local host photo available) ---------- */
.avatar-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, var(--cobalt-2), var(--cobalt));
  color:var(--turquoise-l);
  font-family:var(--display);
  font-size:5rem;
}

.site-footer{background:var(--cobalt-2);color:var(--white);padding:60px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:32px;}}
.footer-grid h4{color:var(--turquoise-l);font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1em;}
.footer-grid a, .footer-grid p{color:rgba(255,255,255,.85);font-size:.92rem;}
.footer-grid li a{display:inline-flex;align-items:center;gap:.5em;}
.footer-grid svg{width:14px;height:14px;flex:none;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7em;}
.footer-brand{font-family:var(--display);font-size:1.5rem;color:var(--white);margin-bottom:.4em;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:46px;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,.6);
}