:root {
  --cream: #F8F0E1;
  --greige: #EBE0CD;
  --ink: #403F2B;
  --body: #383838;
  --taupe: #8B7E74;
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--serif);font-size:16px;line-height:1.85;font-weight:400}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none}
header.nav{
  position:sticky;top:0;z-index:50;min-height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;background:var(--greige);
}
.logo{font-size:22px;letter-spacing:.28em;color:var(--ink)}
nav.links{display:flex;gap:22px;flex-wrap:wrap}
nav.links a{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
nav.links a:hover{opacity:.6}

/* Hero — font size derived from viewport width so the tracked wordmark
   ("ALEOMANDRA": 10 glyphs + .30em tracking) never clips at any width. */
.hero{position:relative;min-height:92vh;overflow:hidden;background:#1a1914}
.hero img{width:100%;height:92vh;object-fit:cover;filter:brightness(.72)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cream);text-align:center;padding:24px}
.hero h1{margin:0;font-size:clamp(34px,7.6vw,124px);font-weight:400;letter-spacing:.30em;text-indent:.30em;line-height:.95;white-space:nowrap}
.hero p.sub{margin:18px 0 0;font-family:var(--sans);font-weight:300;font-size:clamp(12px,1.5vw,16px);letter-spacing:.42em;text-indent:.42em}
.hero p.tagline{margin:26px 0 0;font-style:italic;font-size:clamp(16px,2vw,22px);letter-spacing:.06em;opacity:.9}

.spec{
  background:var(--cream);padding:30px 24px 30px;text-align:center;
  font-family:var(--sans);font-weight:300;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)
}
.spec span{white-space:nowrap;margin:0 10px}
.btns{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 26px;border-radius:13px;font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:opacity .2s;border:0}
.btn:hover{opacity:.75}
.btn-dark{background:#000;color:rgba(254,250,240,.92)}
.btn-light{background:var(--cream);color:#000;border:1px solid #000}

section.block{padding:76px 20px}
#description.block{padding-top:56px}
section.alt{background:var(--greige)}
.inner{max-width:1180px;margin:0 auto}
.panel{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch}
.panel.reverse{grid-template-columns:.9fr 1.1fr}
.panel .txt{padding:64px 48px;max-width:600px}
.panel img,.panel video{width:100%;height:100%;object-fit:cover;min-height:420px;display:block}
.panel .imgstack{display:grid;gap:10px;align-content:start}
.panel .imgstack img,.panel .imgstack video{min-height:0;height:clamp(220px,24vw,320px);width:100%;object-fit:cover;display:block}
h2{font-size:27px;font-weight:400;color:var(--ink);margin:0 0 22px}
h3.lvl{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin:26px 0 8px}
h3.lvl:first-child{margin-top:0}
p.lead{margin:0 0 1.1em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}
.cols p,.dash{margin:0 0 .4em}
.layout-cols{align-items:start}
.ulink{border-bottom:1px solid var(--taupe)}
.mosaic{columns:3;column-gap:10px}
.mosaic img{width:100%;margin:0 0 10px;break-inside:avoid}

/* Sunset band — the page scrolls over a fixed sunset near the end. */
.sunsetband{
  min-height:62vh;display:flex;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;
  background:url("../images/guest/grade-2.jpg") center/cover no-repeat fixed #1a1914;
}
.sunsetband p{
  margin:0;max-width:560px;color:var(--cream);font-style:italic;
  font-size:clamp(19px,2.4vw,26px);letter-spacing:.04em;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}

/* Video band — short muted loop of the bay, full width. */
.videoband{background:#1a1914;line-height:0}
.videoband video{width:100%;max-height:72vh;object-fit:cover;display:block}

/* Lightbox — tap any photo for fullscreen; swipe / arrows to browse. */
.panel img,.imgstack img,.mosaic img{cursor:pointer}
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,12,.96);touch-action:pan-y;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:86vh;object-fit:contain;cursor:default}
.lightbox button{
  position:absolute;border:0;background:none;color:rgba(254,250,240,.85);
  font-family:var(--sans);font-weight:300;cursor:pointer;padding:16px;line-height:1;
}
.lightbox .lb-close{top:8px;right:8px;font-size:30px}
.lightbox .lb-prev{left:2px;top:50%;transform:translateY(-50%);font-size:34px}
.lightbox .lb-next{right:2px;top:50%;transform:translateY(-50%);font-size:34px}
.lightbox .lb-count{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  color:rgba(254,250,240,.7);font-family:var(--sans);font-weight:300;
  font-size:12px;letter-spacing:.18em;
}
form.inq{max-width:520px;margin:0 auto}
form.inq label{display:block;font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:18px 0 6px;color:var(--taupe)}
form.inq input[type=date]{color:var(--body)}
form.inq input,form.inq textarea{
  width:100%;border:0;border-bottom:1px solid var(--taupe);padding:8px 0;border-radius:0
}
form.inq input:focus,form.inq textarea:focus{outline:none;border-bottom-color:var(--ink)}
form.inq textarea{min-height:110px;resize:vertical}
.form-note{margin-top:18px;font-family:var(--sans);font-weight:300;font-size:12px;color:var(--taupe);text-align:center}
footer{padding:38px 20px 50px;text-align:center;font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.08em;color:var(--ink);line-height:2}
footer .mhte{color:var(--taupe)}

@media(max-width:860px){
  nav.links{gap:14px}
  nav.links a{font-size:10px;letter-spacing:.12em}
  /* Show the aerial photo (nearly) whole on phones instead of cropping it
     to fill the viewport — natural aspect ratio, dark letterbox if needed. */
  .hero{min-height:0}
  .hero img{height:auto;max-height:80vh}
  /* iOS ignores fixed attachment — fall back to a normal photo band */
  .sunsetband{background-attachment:scroll;min-height:44vh}
  .panel,.panel.reverse{grid-template-columns:1fr}
  .panel .txt{padding:40px 22px;max-width:none}
  /* landscape video keeps its natural frame on phones — no zoom-crop */
  .panel video{min-height:0;height:auto}
  .cols{grid-template-columns:1fr}
  .mosaic{columns:2}
  .hero h1{letter-spacing:.20em;text-indent:.20em;font-size:clamp(30px,8.4vw,64px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}