/* =========================================================
   SONORA — desert inn & dark-sky retreat
   Day-warm terracotta easing into star-silver night.
   ========================================================= */

:root{
  /* day / warm */
  --gold:#f4b26a;
  --sun:#f6c67a;
  --ember:#e0713f;
  --terracotta:#c96f43;
  --adobe:#b5643c;
  --clay:#8f4a2c;
  --sand:#e6c9a3;
  --cream:#f6ead6;
  --ink:#2c1a11;          /* warm near-black for text on light */
  --ink-soft:#5a3a26;
  /* dusk / night */
  --dusk:#5a4270;
  --mauve:#7a5a7e;
  --indigo:#1a1636;
  --night:#0d0b1f;
  --star:#e4e8fa;
  --star-soft:#aab0d6;
  --faint:#8a90b8;

  --edge: color-mix(in srgb, var(--ink) 14%, transparent);
  --panel-warm: color-mix(in srgb, var(--cream) 90%, transparent);
  --panel-warm-2: color-mix(in srgb, var(--sand) 78%, transparent);

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 66ch;
  --pad: clamp(1.15rem, 5vw, 6rem);
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
*,*::before,*::after{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* no-JS / pre-paint fallback sky */
  background:
    linear-gradient(180deg,
      #f4b26a 0%, #e88a4e 16%, #d0714a 34%,
      #8a5a6a 52%, #4a3b6b 68%, #1c1740 84%, #0d0b1f 100%);
  background-attachment:fixed;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  background:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* fixed sky canvas */
#sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-2;
  display:block;
  pointer-events:none;
}
#grain{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

a{ color:inherit; }
img,svg{ max-width:100%; display:block; }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--night); color:var(--star);
  padding:.7rem 1.1rem; border-radius:0 0 .5rem 0;
  font-size:.85rem; letter-spacing:.03em;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(.7rem,2vw,1.2rem) var(--pad);
  transition:background .5s ease, backdrop-filter .5s ease;
}
.nav--scrolled{
  background:color-mix(in srgb, var(--night) 34%, transparent);
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
}
.nav__mark{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--cream);
}
.nav__sun{
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, var(--sun), var(--ember));
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--gold) 70%, transparent);
}
.nav__word{
  font-family:var(--serif); font-weight:600;
  font-size:1.5rem; letter-spacing:.06em;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.nav__links{
  display:flex; align-items:center; gap:clamp(.9rem,2.4vw,2rem);
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
}
.nav__links a{
  text-decoration:none; color:var(--cream);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  opacity:.9; transition:opacity .25s;
  position:relative;
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px;
  height:1px; background:currentColor; transition:right .3s ease;
}
.nav__links a:hover{ opacity:1; }
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{
  border:1px solid color-mix(in srgb,var(--cream) 60%, transparent);
  padding:.42rem .9rem; border-radius:2rem;
}
.nav__cta:hover{ background:color-mix(in srgb,var(--cream) 16%, transparent); }
@media (max-width:760px){
  .nav__links a:not(.nav__cta){ display:none; }
}

.clock{
  display:flex; align-items:baseline; gap:.2rem;
  font-family:var(--serif); color:var(--cream);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  min-width:64px; justify-content:flex-end;
}
.clock__time{ font-size:1.15rem; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.clock__ampm{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; opacity:.75; font-family:var(--sans); }
@media (max-width:520px){ .clock{ display:none; } }

/* ---------------- shared section chrome ---------------- */
main{ display:block; }
section{ position:relative; }

.section-head{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
}
.section-head--center{ text-align:center; }
.section-head--center .section-kicker{ margin-inline:auto; }
.section-num{
  display:inline-block;
  font-family:var(--serif); font-style:italic;
  font-size:1rem; letter-spacing:.2em;
  opacity:.6; margin-bottom:.4rem;
}
.section-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,7vw,5rem);
  line-height:.98; letter-spacing:-.01em;
}
.section-kicker{
  font-size:clamp(1rem,1.6vw,1.2rem);
  max-width:46ch; margin-top:1rem;
  color:var(--ink-soft);
  line-height:1.55;
}

/* ---------------- HERO ---------------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--pad) 3rem;
  max-width:var(--maxw); margin:0 auto;
}
.hero__eyebrow{
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(4.4rem,24vw,22rem);
  line-height:.82; letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:0 4px 40px color-mix(in srgb,var(--gold) 40%, transparent);
}
.hero__line{ display:block; }
.hero__sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,3vw,2.1rem);
  line-height:1.35; max-width:22ch;
  margin-top:1.6rem; color:var(--clay);
}
.hero__meta{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:2.4rem;
}
.hero__note{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.hero__scroll{
  margin-top:auto; padding-top:3rem;
  display:flex; align-items:center; gap:1rem;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__scrollline{
  flex:1; max-width:160px; height:1px;
  background:linear-gradient(90deg, currentColor, transparent);
  position:relative; overflow:hidden;
}
.hero__scrollline::after{
  content:""; position:absolute; top:0; left:0; height:100%; width:34%;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
  animation:scrollpip 2.6s ease-in-out infinite;
}
@keyframes scrollpip{ 0%{transform:translateX(-40%);} 100%{transform:translateX(320%);} }

/* buttons */
.btn{
  display:inline-block; text-decoration:none;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:2.4rem;
  border:1px solid var(--clay); color:var(--clay);
  transition:background .3s, color .3s, transform .3s, box-shadow .3s;
}
.btn:hover{
  background:var(--clay); color:var(--cream); transform:translateY(-2px);
  box-shadow:0 10px 30px color-mix(in srgb,var(--clay) 40%, transparent);
}
.btn--solid{
  background:var(--clay); color:var(--cream); border-color:var(--clay);
  cursor:pointer;
}
.btn--solid:hover{ background:var(--ink); border-color:var(--ink); }

/* ---------------- INTRO ---------------- */
.intro{
  max-width:820px; margin:0 auto;
  padding:clamp(3rem,10vw,8rem) var(--pad);
}
.intro::before{
  content:""; display:block; width:64px; height:1px;
  background:linear-gradient(90deg,var(--clay),transparent);
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
/* lift dark reading text off the shifting sky */
.intro__lead,.intro__body,
.menu__course,.menu__list li,.table__note,.rooms__foot{
  text-shadow:0 1px 0 color-mix(in srgb,var(--cream) 30%, transparent);
}
.intro__lead{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.28; color:var(--ink);
}
.dropcap{
  float:left; font-family:var(--serif); font-weight:600;
  font-size:5.4rem; line-height:.72; padding:.35rem .6rem 0 0;
  color:var(--terracotta);
}
.intro__body{
  margin-top:1.8rem; max-width:var(--measure);
  font-size:1.08rem; color:var(--ink-soft);
}

/* ---------------- CASITAS ---------------- */
.casitas{ padding:clamp(3rem,8vw,7rem) 0; }
.rooms{
  list-style:none; padding:clamp(2rem,4vw,3.5rem) var(--pad) 0;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.8rem);
}
.room{
  grid-column:span 1;
  background:var(--panel-warm);
  border:1px solid var(--edge);
  border-radius:1.1rem;
  overflow:hidden;
  display:flex; flex-direction:column;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 20px 50px -30px rgba(60,30,10,.5);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.room:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(60,30,10,.6); }
.room--wide{
  grid-column:span 2;
  flex-direction:row;
}
.room__body{ padding:clamp(1.4rem,3vw,2.4rem); flex:1; }
.room__no{
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  color:var(--adobe); letter-spacing:.15em; margin-bottom:.5rem;
}
.room__name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1;
  color:var(--ink); margin-bottom:.7rem;
}
.room__desc{ color:var(--ink-soft); font-size:1rem; max-width:44ch; }
.room__spec{
  list-style:none; margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--clay);
}
.room__art{
  min-height:180px; flex:1;
  background-size:cover; background-position:center;
  position:relative;
}
.room--wide .room__art{ min-width:38%; }
/* generated painterly "photographs" via layered gradients */
.room__art--ocotillo{
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(246,198,122,.7), transparent 60%),
    linear-gradient(180deg,#e79a55,#b5643c 60%,#6d3a24);
}
.room__art--ocotillo::after,
.room__art--saguaro::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 46%, rgba(45,20,10,.55) 47%, transparent 49%),
    linear-gradient(90deg, transparent 62%, rgba(45,20,10,.4) 63%, transparent 66%);
}
.room__art--mesa{
  background:
    linear-gradient(180deg,#f0b168 0%, #d67c4c 40%, #7a4a63 100%),
    #d67c4c;
  clip-path:none;
}
.room__art--mesa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, #5a3a55 55%, #3a2740 100%);
  clip-path:polygon(0 70%,18% 60%,34% 66%,52% 52%,70% 60%,86% 50%,100% 58%,100% 100%,0 100%);
}
.room__art--arroyo{
  background:
    radial-gradient(140% 120% at 80% 10%, rgba(246,198,122,.55), transparent 55%),
    linear-gradient(180deg,#caa06f,#8f5a3c 60%,#4c2f24);
}
.room__art--saguaro{
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(246,198,122,.6), transparent 60%),
    linear-gradient(180deg,#e89a57,#a85a38 55%,#5a3324);
}
.rooms__foot{
  max-width:var(--maxw); margin:2rem auto 0; padding:0 var(--pad);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--clay); max-width:min(58ch, 90vw);
}

/* ---------------- THE TABLE ---------------- */
.table{ padding:clamp(3rem,9vw,8rem) 0; }
.menu{
  max-width:var(--maxw); margin:clamp(2rem,4vw,3.5rem) auto 0;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);
}
.menu__course{
  font-family:var(--serif); font-style:italic;
  font-size:1.3rem; color:var(--adobe);
  padding-bottom:.7rem; margin-bottom:.7rem;
  border-bottom:1px solid var(--edge);
}
.menu__list{ list-style:none; }
.menu__list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0;
  border-bottom:1px dotted color-mix(in srgb,var(--ink) 22%, transparent);
  font-size:1.02rem; color:var(--ink);
}
.menu__list li span{ max-width:32ch; }
.menu__list em{ color:var(--clay); font-style:italic; font-family:var(--serif); opacity:.8; }
.table__note{
  max-width:var(--maxw); margin:2.4rem auto 0; padding:0 var(--pad);
  color:var(--ink-soft); font-style:italic; font-family:var(--serif);
  font-size:1.2rem; max-width:min(60ch,90vw);
}

/* ---------------- STARGAZING (night text) ---------------- */
.stars-sec{
  padding:clamp(4rem,12vw,10rem) 0;
  color:var(--star);
}
.stars-sec .section-num{ color:var(--star-soft); opacity:.8; }
.stars-sec .section-title{ color:var(--star); text-shadow:0 2px 30px rgba(0,0,0,.6); }
.stars-sec .section-kicker{ color:var(--star-soft); }

.constel{
  max-width:var(--maxw); margin:clamp(2.5rem,5vw,4rem) auto;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2.4rem);
}
.constel__card{
  text-align:center; color:var(--star);
  border:1px solid color-mix(in srgb,var(--star) 16%, transparent);
  border-radius:1rem; padding:1.6rem 1rem 1.3rem;
  background:color-mix(in srgb,var(--night) 30%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:border-color .4s, transform .4s;
}
.constel__card:hover{ border-color:color-mix(in srgb,var(--star) 45%, transparent); transform:translateY(-4px); }
.constel__card svg{ width:70%; max-width:150px; margin:0 auto .9rem; color:var(--star); }
.constel__card figcaption{ display:flex; flex-direction:column; gap:.25rem; }
.constel__card strong{ font-family:var(--serif); font-weight:500; font-size:1.35rem; letter-spacing:.03em; }
.constel__card span{ font-size:.82rem; color:var(--star-soft); line-height:1.4; }

.stars-prose{
  max-width:760px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem);
}
.stars-prose p{ font-size:1.06rem; color:var(--star-soft); }
.stars-prose p:first-child{ color:var(--star); font-family:var(--serif); font-size:1.3rem; line-height:1.4; }

.stars-facts{
  list-style:none; max-width:var(--maxw); margin:clamp(2.5rem,6vw,4.5rem) auto 0;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.5rem);
  text-align:center;
}
.stars-facts li{ display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.fact__num{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1;
  color:var(--gold);
  text-shadow:0 0 30px color-mix(in srgb,var(--gold) 40%, transparent);
}
.fact__label{ font-size:.9rem; color:var(--star-soft); max-width:24ch; line-height:1.45; }

/* ---------------- THE LAND ---------------- */
.land{ padding:clamp(3rem,9vw,8rem) 0; color:var(--star); }
.land .section-num{ color:var(--star-soft); }
.land .section-title{ color:var(--star); }
.land .section-kicker{ color:var(--star-soft); }
.trails{
  max-width:var(--maxw); margin:clamp(2rem,4vw,3.5rem) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.2rem);
}
.trail{
  border-top:1px solid color-mix(in srgb,var(--star) 26%, transparent);
  padding-top:1.2rem;
}
.trail h3{
  font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--star);
  margin-bottom:.6rem; line-height:1.15;
}
.trail h3 span{ font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:inline-block; }
.trail p{ color:var(--star-soft); font-size:1rem; }
.flora{
  max-width:var(--maxw); margin:clamp(2.5rem,5vw,4rem) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,4vw,3rem); align-items:start;
}
.flora__h{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold); }
.flora__p{ color:var(--star-soft); max-width:58ch; font-size:1.06rem; }

/* ---------------- RESERVATIONS ---------------- */
.reserve{ padding:clamp(3rem,9vw,8rem) 0 clamp(4rem,10vw,9rem); color:var(--star); }
.reserve .section-num{ color:var(--star-soft); }
.reserve .section-title{ color:var(--star); }
.reserve .section-kicker{ color:var(--star-soft); }
.rform{
  max-width:760px; margin:clamp(2.4rem,5vw,3.6rem) auto 0; padding:0 var(--pad);
  display:flex; flex-direction:column; gap:1.1rem;
}
.rform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.rform__row:nth-of-type(2){ grid-template-columns:2fr 1fr 1.4fr; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field__label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--star-soft); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--star);
  background:color-mix(in srgb,var(--night) 40%, transparent);
  border:1px solid color-mix(in srgb,var(--star) 24%, transparent);
  border-radius:.7rem; padding:.8rem .9rem;
  width:100%;
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold);
  background:color-mix(in srgb,var(--night) 55%, transparent);
}
.field select option{ color:#111; }
.rform__foot{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:.4rem; }
.rform__msg{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold); min-height:1.4em; }

/* ---------------- FOOTER ---------------- */
.foot{
  color:var(--star);
  padding:clamp(3rem,7vw,6rem) var(--pad) 2.4rem;
  border-top:1px solid color-mix(in srgb,var(--star) 14%, transparent);
  max-width:var(--maxw); margin:0 auto;
}
.foot__top{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.foot__mark{ font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,8vw,4.2rem); letter-spacing:.04em; color:var(--star); }
.foot__tag{ font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.foot__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin:2.6rem 0; padding:2.2rem 0;
  border-top:1px solid color-mix(in srgb,var(--star) 12%, transparent);
  border-bottom:1px solid color-mix(in srgb,var(--star) 12%, transparent);
}
.foot__h{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }
.foot__cols p{ color:var(--star-soft); font-size:.98rem; line-height:1.6; }
.foot__cols a{ color:var(--star-soft); }
.foot__cols a:hover{ color:var(--star); }
.foot__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--faint);
}
.foot__base a{ text-decoration:none; color:var(--gold); }
.foot__base a:hover{ text-decoration:underline; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scrollline::after{ animation:none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:860px){
  .menu, .constel, .stars-facts, .trails{ grid-template-columns:1fr; }
  .stars-prose{ grid-template-columns:1fr; }
  .stars-facts{ grid-template-columns:repeat(3,1fr); gap:1rem; }
  .flora{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .rooms{ grid-template-columns:1fr; }
  .room--wide{ grid-column:span 1; flex-direction:column; }
  .room--wide .room__art{ min-height:150px; }
  .rform__row, .rform__row:nth-of-type(2){ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr; gap:1.6rem; }
  .stars-facts{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .menu__list li span{ max-width:24ch; }
}