/* Tropical Waves 5 — Golden Hour Quiet design system (subpage layer) */
:root{
  --sand:#f4efe6; --ink:#2a2620; --gold:#c99a5b; --sea:#7d9d97; --white:#fdfcf9;
  --muted:#565048; --soft:#8a8272; --line:#ddd5c6;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Karla',sans-serif; font-weight:300; color:var(--ink); background:var(--sand); line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* nav (subpage variant: ink on sand from the start) */
header.site{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px clamp(18px,3vw,40px);
  background:color-mix(in srgb, var(--sand) 92%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 #e3dccc;
}
.wordmark{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:16px; letter-spacing:0.3em; text-transform:uppercase; text-decoration:none; }
nav.site-nav{ display:flex; align-items:center; gap:26px; }
nav.site-nav a{ font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; text-decoration:none; color:var(--soft); padding:4px 0; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; }
nav.site-nav a:hover, nav.site-nav a[aria-current="page"]{ color:var(--ink); border-color:var(--gold); }
nav.site-nav a.cta{
  color:var(--ink); font-size:11.5px; letter-spacing:0.24em; border:1px solid rgba(42,38,32,0.45); padding:11px 22px;
  transition:background .35s ease, color .35s ease;
}
nav.site-nav a.cta:hover, nav.site-nav a.cta:focus-visible{ background:var(--ink); color:var(--white); border-color:var(--ink); }
nav.site-nav a.cta:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:760px){ nav.site-nav a:not(.cta){ display:none; } }

/* page hero */
.page-hero{ padding:clamp(52px,9vh,96px) 24px clamp(30px,5vh,52px); text-align:center; }
.page-hero .kicker{ font-size:11.5px; letter-spacing:0.34em; text-transform:uppercase; color:var(--gold); }
.page-hero h1{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.08; margin-top:14px; text-wrap:balance; }
.page-hero p.lede{ max-width:60ch; margin:18px auto 0; font-size:16px; color:var(--muted); }

/* image band */
.band{ position:relative; height:52vh; min-height:340px; overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }
.band figcaption{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:var(--white); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,0.5); }

/* layout */
.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(18px,3.5vw,44px); }
section.pad{ padding:clamp(48px,7vw,90px) 0; }
h2.sec{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.15; text-wrap:balance; }
.rule{ width:52px; height:1px; background:var(--gold); margin-top:22px; }
p.body{ color:var(--muted); font-size:15.5px; max-width:62ch; margin-top:16px; }

/* media row (alternating) */
.media-row{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(24px,4vw,64px); align-items:center; margin-top:clamp(32px,5vw,56px); }
.media-row:nth-of-type(even){ grid-template-columns:0.85fr 1.15fr; }
.media-row:nth-of-type(even) .txt{ order:-1; text-align:right; }
.media-row:nth-of-type(even) .txt p{ margin-left:auto; }
.media-row img{ aspect-ratio:4/3; object-fit:cover; }
.media-row h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.6rem; }
.media-row p{ margin-top:12px; color:var(--muted); font-size:15px; max-width:44ch; }
@media (max-width:760px){
  .media-row, .media-row:nth-of-type(even){ grid-template-columns:1fr; }
  .media-row:nth-of-type(even) .txt{ order:0; text-align:left; }
  .media-row:nth-of-type(even) .txt p{ margin-left:0; }
}

/* facts ledger */
.ledger{ border-top:1px solid var(--line); max-width:560px; }
.ledger .row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #e6dfd1; }
.ledger dt{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--soft); align-self:center; }
.ledger dd{ font-family:'Cormorant Garamond',serif; font-size:17px; text-align:right; }

/* gallery grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:clamp(28px,4vw,44px); }
.grid figure{ position:relative; overflow:hidden; }
.grid img{ aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .8s ease; }
.grid figure:hover img{ transform:scale(1.035); }
.grid figcaption{ position:absolute; inset:auto 0 0 0; padding:22px 14px 10px; color:var(--white); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; background:linear-gradient(to top, rgba(26,24,20,0.55), transparent); }
.grid .wide{ grid-column:span 2; }
@media (max-width:640px){ .grid .wide{ grid-column:span 1; } }

/* list rows (explore) */
.list-head{ margin-top:clamp(36px,6vw,64px); }
.area-item{ display:flex; align-items:baseline; gap:22px; padding:18px 0; border-bottom:1px solid #e8e2d5; max-width:760px; }
.area-item .tag{ flex:0 0 110px; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.area-item strong{ font-weight:600; font-size:15.5px; display:block; }
.area-item span{ color:#6c655a; font-size:14.5px; }

/* rules list */
.rules{ margin-top:24px; max-width:640px; }
.rules li{ list-style:none; padding:13px 0; border-bottom:1px solid #e8e2d5; font-size:15px; color:var(--muted); display:flex; gap:14px; }
.rules li::before{ content:"·"; color:var(--gold); font-size:22px; line-height:1; }

/* CTA band */
.cta-band{ background:var(--white); text-align:center; padding:clamp(52px,8vw,96px) 24px; }
.cta-band h2{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.8rem,3.4vw,2.7rem); text-wrap:balance; }
.cta-band p{ margin-top:12px; color:var(--muted); font-size:15px; }
.cta-band .btn{ display:inline-block; margin-top:26px; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; text-decoration:none; background:var(--ink); color:var(--white); padding:16px 34px; border:1px solid var(--ink); transition:background .35s ease; }
.cta-band .btn:hover{ background:#463f34; }
.cta-band .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* footer */
footer.site{ padding:52px 24px; text-align:center; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--soft); }
footer.site .fm{ font-family:'Cormorant Garamond',serif; font-size:15px; letter-spacing:0.3em; color:var(--ink); margin-bottom:10px; }
footer.site nav{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:16px 0 10px; }
footer.site nav a{ text-decoration:none; color:var(--soft); }
footer.site nav a:hover{ color:var(--ink); }

/* reveals */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .grid figure:hover img{ transform:none; }
}

/* explore v2: illustrated map */
.map-fig{ max-width:1120px; margin:0 auto; padding:0 clamp(18px,3.5vw,44px); }
.map-fig svg{ width:100%; height:auto; display:block; background:var(--white); }
.map-fig figcaption{ text-align:center; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--soft); margin-top:12px; }
.map-label{ font-family:'Karla',sans-serif; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; fill:#4c463b; font-weight:400; }
.map-label.sea{ fill:#5f7d78; font-style:normal; }
.map-title{ font-family:'Cormorant Garamond',serif; font-size:24px; fill:var(--ink); }
.map-sub{ font-family:'Karla',sans-serif; font-size:10px; letter-spacing:0.26em; fill:#8a8272; }
.map-walk{ font-family:'Karla',sans-serif; font-size:11px; letter-spacing:0.2em; fill:#a3773d; font-weight:600; }

/* owner's tip */
.tip{ border-left:2px solid var(--gold); background:var(--white); padding:20px 24px; margin:28px 0; max-width:640px; }
.tip .eyebrow{ font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); }
.tip blockquote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.25rem; line-height:1.45; margin-top:8px; color:var(--ink); }

/* day arc */
.day-list{ margin-top:26px; max-width:760px; }

/* explore v3: real aerial pin map */
.airmap{ position:relative; max-width:1280px; margin:0 auto; overflow:hidden; }
.airmap > img{ width:100%; display:block; }
.airmap .scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(26,24,20,0.18), transparent 30%, transparent 72%, rgba(26,24,20,0.35)); pointer-events:none; }
.pin{ position:absolute; transform:translate(-50%,-50%); background:none; border:0; cursor:pointer; padding:10px; }
.pin .dot{ display:block; width:13px; height:13px; border-radius:50%; background:var(--gold); border:2px solid var(--white); box-shadow:0 2px 10px rgba(0,0,0,0.45); transition:transform .25s ease; }
.pin:hover .dot, .pin:focus-visible .dot, .pin.open .dot{ transform:scale(1.45); }
.pin:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:50%; }
.pin.home .dot{ width:17px; height:17px; background:#c65d3b; }
.pin-card{
  position:absolute; z-index:5; width:min(260px, 72vw);
  background:var(--white); padding:16px 18px; text-align:left;
  box-shadow:0 14px 40px rgba(26,24,20,0.3);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.pin-card.on{ opacity:1; transform:none; pointer-events:auto; }
.pin-card strong{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.15rem; display:block; }
.pin-card span{ font-size:13px; color:var(--muted); display:block; margin-top:4px; }
.pin-card a{ display:inline-block; margin-top:10px; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:2px; }
.pin-card a:hover{ color:#a3773d; }
.airmap-caption{ text-align:center; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--soft); margin-top:12px; }
.dir-link{ flex:none; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; color:var(--gold); border-bottom:1px solid transparent; align-self:center; white-space:nowrap; }
.dir-link:hover{ border-color:var(--gold); }
.area-item{ align-items:center; }
.area-item > div{ flex:1; }

/* sunset band video */
.sunset-band{ position:relative; height:56vh; min-height:360px; overflow:hidden; }
.sunset-band video, .sunset-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sunset-band figcaption{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:var(--white); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,0.5); }
.pin-card img{ margin:-16px -18px 12px; width:calc(100% + 36px); max-width:none; display:block; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:60; background:rgba(26,24,20,0.94); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.lb.on{ opacity:1; pointer-events:auto; }
.lb img{ max-width:92vw; max-height:80vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lb .lb-cap{ color:var(--white); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; margin-top:16px; opacity:0.85; }
.lb .lb-count{ position:absolute; top:20px; left:24px; color:var(--white); font-size:12px; letter-spacing:0.2em; opacity:0.7; }
.lb button{ position:absolute; background:none; border:0; color:var(--white); cursor:pointer; font-family:'Karla',sans-serif; padding:14px; opacity:0.8; transition:opacity .2s ease; }
.lb button:hover, .lb button:focus-visible{ opacity:1; }
.lb button:focus-visible{ outline:1px solid var(--gold); }
.lb .lb-x{ top:12px; right:16px; font-size:26px; line-height:1; }
.lb .lb-prev{ left:8px; top:50%; transform:translateY(-50%); font-size:32px; }
.lb .lb-next{ right:8px; top:50%; transform:translateY(-50%); font-size:32px; }
.grid figure{ cursor:zoom-in; }
@media (prefers-reduced-motion: reduce){ .lb{ transition:none; } }

/* ship-gate: AA contrast for small gold text */
.page-hero .kicker, .area-item .tag, .tip .eyebrow, .dir-link{ color:#a3773d; }
.cal-legend, .cal-note{ color:#5f584d; }
/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--white); padding:12px 20px; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; }
.skip:focus{ left:0; }

/* AA contrast + touch-target close-out */
:root{ --soft:#726a5c; }
footer.site{ color:#726a5c; }
nav.site-nav a{ color:#6d6558; }
.cal-dow span{ color:#726a5c; }
.grid figcaption{ font-size:11.5px; }
.area-item .tag{ padding-top:6px; padding-bottom:6px; }
.dir-link{ padding:10px 4px; }
footer.site nav a{ padding:8px 2px; display:inline-block; }