html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: full-bleed bay-and-sunset hero, then alternating calm bands; content column 1120px, prose 64ch */
:root{
  --bay:#123f4a;        /* deep Banderas Bay */
  --bay-2:#1d5a66;
  --sand:#f3f5f3;       /* cool off-white, faint sea tint */
  --paper:#ffffff;
  --ink:#16262a;
  --muted:#5b6d70;
  --line:#d5dfdf;
  --bloom:#b3306a;      /* bougainvillea */
  --bloom-ink:#ffffff;
  --sun:#f1a35c;
  --ph1:#cfe0df; --ph2:#e9d6c8;
  --f-display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --s1:.875rem; --s2:1rem; --s3:1.25rem; --s4:1.75rem; --s5:2.5rem; --s6:clamp(2.75rem,7vw,5.25rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sand:#0e1d21; --paper:#13262b; --ink:#e7eeed; --muted:#9db0b2; --line:#264045;
  --bloom:#e0598f; --bloom-ink:#1a0b12; --bay:#0b2a31; --bay-2:#123f4a; --ph1:#1c3a40; --ph2:#3a2c27; color-scheme:dark}}
:root[data-theme="dark"]{
  --sand:#0e1d21; --paper:#13262b; --ink:#e7eeed; --muted:#9db0b2; --line:#264045;
  --bloom:#e0598f; --bloom-ink:#1a0b12; --bay:#0b2a31; --bay-2:#123f4a; --ph1:#1c3a40; --ph2:#3a2c27; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--sand);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6}
a{color:inherit}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(2.25rem,5vw,3.5rem)}
h3{font-size:var(--s4)}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;font-size:1rem;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.btn-primary{background:var(--bloom);color:var(--bloom-ink)}
.btn-ghost{border:1px solid currentColor}

/* Header */
header.top{position:absolute;inset:0 0 auto;z-index:5;color:#fff}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.brand{font-family:var(--f-display);font-size:1.5rem;text-decoration:none}
nav.links{display:flex;gap:1.5rem;font-size:.95rem}
nav.links a{text-decoration:none;opacity:.9}
nav.links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
nav.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;opacity:1}
nav.links .lang{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.15rem .55rem}
@media (max-width:720px){header.top .wrap{flex-wrap:wrap;row-gap:.5rem}nav.links{width:100%;flex-wrap:wrap;gap:.35rem 1rem;font-size:.85rem}}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(60% 45% at 72% 58%, rgba(241,163,92,.85), rgba(241,163,92,0) 70%),
    linear-gradient(180deg,#2c5f72 0%,#c07a6b 52%,#e9a066 60%,#1b4b57 61%,#0f3540 100%);}
.hero .photo{position:absolute;inset:0}
.hero .photo img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,36,.35),rgba(10,30,36,.15) 40%,rgba(10,30,36,.7))}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(7rem,16vw,11rem) clamp(3rem,7vw,5rem)}
.hero h1{font-size:clamp(3.5rem,11vw,8.5rem);letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:#ffd9b8}
.hero .lede{max-width:34ch;font-size:clamp(1.1rem,2.2vw,1.35rem);margin-top:1.25rem;opacity:.95}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero .btn-primary{background:#b3306a;color:#fff}

/* Fact strip */
.facts{background:var(--bay);color:#e8f1f0}
.facts .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding-block:0}
.fact{padding:1.25rem .75rem;text-align:center}
.fact b{display:block;font-family:var(--f-display);font-weight:400;font-size:2.1rem;line-height:1}
.fact span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
@media (max-width:720px){.fact{padding:1rem .25rem}.fact b{font-size:1.6rem}.fact span{font-size:.6rem;letter-spacing:.06em}}

section{padding-block:var(--s6)}
.section-head{display:grid;gap:.75rem;margin-bottom:var(--s5);max-width:64ch}

/* Intro */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.intro .prose{display:grid;gap:1rem;max-width:58ch;min-width:0}
.intro .prose p:first-child{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2}
@media (max-width:820px){.intro{grid-template-columns:1fr}}

/* Photo frames */
.frame{position:relative;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--ph1),var(--ph2));aspect-ratio:4/3;max-width:100%}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .label{position:absolute;left:.75rem;bottom:.6rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.frame.tall{aspect-ratio:4/5}

/* Bedrooms */
.beds{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.bed{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.bed .frame{border-radius:0}
.bed .body{padding:1.1rem 1.25rem 1.3rem;display:grid;gap:.35rem}
.bed .body .eyebrow{color:var(--bloom)}
.bed h3{font-size:1.6rem}
.bed p{color:var(--muted)}
@media (max-width:820px){.beds{grid-template-columns:1fr}}

/* Amenities */
.amen{background:var(--paper);border-block:1px solid var(--line)}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.5rem}
.amen-col h3{font-size:1.5rem;margin-bottom:.75rem}
.amen-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.amen-col li{display:flex;gap:.6rem;align-items:baseline}
.amen-col li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--bloom);transform:translateY(-.1rem)}
@media (max-width:820px){.amen-grid{grid-template-columns:1fr}}

/* Resort */
.resort{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.resort .prose{display:grid;gap:1rem;min-width:0}
.note{font-size:.9rem;color:var(--muted);border-left:2px solid var(--line);padding-left:1rem}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.mosaic .frame:first-child{grid-column:span 2;aspect-ratio:16/9}
@media (max-width:820px){.resort{grid-template-columns:1fr}}

/* Location */
.loc{background:var(--bay);color:#e8f1f0}
.loc .eyebrow{color:#9fc4c4}
.loc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.loc-grid .prose{display:grid;gap:1rem;max-width:56ch;min-width:0}
.coords{font-family:var(--f-mono);font-size:.85rem;opacity:.85;display:grid;gap:.25rem}
.compass{aspect-ratio:1;max-width:340px;width:100%;justify-self:center;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06),transparent 60%)}
.compass svg{width:86%;height:86%}
@media (max-width:820px){.loc-grid{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;grid-auto-flow:dense}
.gallery .frame:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:720px){.gallery{grid-template-columns:1fr 1fr}.gallery .frame:nth-child(1){grid-row:span 1;aspect-ratio:4/3}}

/* Book */
.book-sec{background:var(--paper);border-top:1px solid var(--line)}
.book-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.book-grid .prose{display:grid;gap:1.1rem;max-width:56ch;min-width:0}
.book-grid .ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.contact{display:grid;gap:.3rem;padding:1rem 1.2rem;border-radius:8px;border:1px solid var(--line)}
.contact.todo{border-style:dashed;color:var(--muted)}
.contact p{color:var(--muted)}
.links-row{font-size:.9rem}
.links-row a{color:var(--ink);text-underline-offset:3px}
.host{margin:0;display:grid;gap:.75rem;max-width:340px;justify-self:center;width:100%}
.host figcaption{display:grid;gap:.1rem}
.host figcaption b{font-family:var(--f-display);font-weight:400;font-size:1.6rem}
.host figcaption span{color:var(--muted);font-size:.9rem}
@media (max-width:820px){.book-grid{grid-template-columns:1fr}}
.book{text-align:center}
.book .wrap{display:grid;justify-items:center;gap:1.25rem}
.book h2{font-size:clamp(2.5rem,7vw,5rem)}
.book p{max-width:52ch;color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:2rem;font-size:.85rem;color:var(--muted)}
footer .wrap{display:grid;gap:.75rem}

/* Inner pages */
.pagehead{background:var(--bay);color:#fff;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(241,163,92,.45),rgba(241,163,92,0));pointer-events:none}
.pagehead .wrap{position:relative;padding-block:clamp(7.5rem,14vw,9.5rem) clamp(2.5rem,6vw,4rem);display:grid;gap:1rem}
.pagehead .eyebrow{color:#ffe1c7}
.pagehead h1{font-size:clamp(3rem,8vw,6rem)}
.pagehead h1 em{font-style:italic;color:#ffd9b8}
.pagehead p.lede{max-width:52ch;font-size:clamp(1.05rem,2vw,1.25rem);opacity:.92}

.strip{background:var(--paper);border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.25rem}
.strip div{display:grid;gap:.15rem}
.strip b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1}
.strip span{font-size:.85rem;color:var(--muted)}
@media (max-width:720px){.strip .wrap{grid-template-columns:1fr 1fr}}

.guide-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.guide-sec + .guide-sec{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.guide-sec .head{display:grid;gap:.75rem;position:sticky;top:1.5rem}
.guide-sec .head p{color:var(--muted)}
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2rem}
.place{display:grid;gap:.3rem;align-content:start}
.place .kind{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bloom)}
.place h3{font-size:1.5rem}
.place p{color:var(--muted);font-size:.98rem}
.small-note{font-size:.85rem;color:var(--muted);margin-top:1.5rem}
@media (max-width:820px){.guide-sec{grid-template-columns:1fr}.guide-sec .head{position:static}.places{grid-template-columns:1fr}}

.seasons{background:var(--bay);color:#e8f1f0}
.seasons .eyebrow{color:#9fc4c4}
.season-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:var(--s5)}
.season{border-top:1px solid rgba(255,255,255,.25);padding-top:1rem;display:grid;gap:.4rem}
.season .when{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.season h3{font-size:1.6rem}
.season p{opacity:.85;font-size:.98rem}
@media (max-width:820px){.season-grid{grid-template-columns:1fr}}

.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.faq-wrap + .faq-wrap{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.faq-list{display:grid;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-weight:600;font-size:1.05rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--f-mono);color:var(--bloom);font-size:1.2rem;line-height:1}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list summary:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.faq-list .a{padding:0 0 1.25rem;color:var(--muted);max-width:62ch;display:grid;gap:.6rem}
.faq-list .a a{color:var(--ink)}
@media (max-width:820px){.faq-wrap{grid-template-columns:1fr}}

.cta-band{background:var(--paper);border-top:1px solid var(--line)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cta-band h2{font-size:clamp(2rem,4vw,3rem)}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:.75rem}
footer a{color:var(--muted)}
footer .foot-links{display:flex;flex-wrap:wrap;gap:1rem}

.favs-sec{background:var(--sand)}
.favs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.fav{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:1.4rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.fav .kind{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bloom)}
.fav h3{font-size:1.75rem}
.fav p{color:var(--muted);font-size:.98rem;flex:1}
.fav a{font-weight:600;color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--bloom);text-decoration-thickness:2px;margin-top:.4rem}
@media (max-width:980px){.favs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.favs{grid-template-columns:1fr}}
.fav.wide{grid-column:1/-1}
@media (min-width:981px){.fav.wide p{max-width:70ch}}
.fav a + a{margin-top:0}

.story-sec{background:var(--sand);border-top:1px solid var(--line)}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.story .prose{display:grid;gap:1rem;max-width:62ch;min-width:0}
.story .prose p:first-child{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,1.8rem);line-height:1.25}
@media (max-width:820px){.story{grid-template-columns:1fr}}
