/* =====================================================================
   RANCHO DEL CUERVO — Desert Oasis
   A field dispatch from the edge of Big Bend.
   Palette: night ink, bone, desert sand, sunset ember.
   ===================================================================== */

:root{
  /* ink + night */
  --ink:      #0e0f12;
  --ink-2:    #090a0c;
  --ink-soft: #15171b;

  /* light / paper */
  --bone:     #ece4d4;
  --bone-dim: rgba(236,228,212,.62);
  --bone-mut: rgba(236,228,212,.40);

  /* desert */
  --sand:     #b8ac93;
  --sage:     #8c9279;

  /* sunset */
  --ember:      #db6a33;
  --ember-soft: #e98a52;
  --ember-deep: #ad4f23;

  --line:      rgba(236,228,212,.13);
  --line-soft: rgba(236,228,212,.07);

  --serif: "Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:  ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw: 1180px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.55vw + .9rem,1.2rem);
  line-height:1.62;
  font-feature-settings:"liga","kern","onum";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}

::selection{background:var(--ember);color:var(--ink)}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* =====================================================================
   Shared type
   ===================================================================== */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sand);
  display:flex; align-items:center; gap:.7em;
  margin-bottom:1.6rem;
}
.eyebrow--light{ color:rgba(236,228,212,.78) }
.eyebrow .num{
  color:var(--ember);
  border:1px solid var(--line);
  padding:.28em .55em;
  border-radius:2px;
  letter-spacing:.1em;
}
.star{ width:1em; height:1em; fill:var(--ember); flex:none; }
.star--xs{ width:.74em; height:.74em; }

.h2{
  font-weight:500;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.018em;
  color:var(--bone);
}
.h2--light{ color:var(--bone) }

.lede{
  font-size:clamp(1.18rem,1.4vw,1.42rem);
  line-height:1.5;
  color:var(--bone);
}
.lede--light{ color:rgba(236,228,212,.86) }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:1.02em 1.6em;
  border-radius:2px;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--ember); color:#160a04; border:var(--bw) solid var(--ember); font-weight:600; }
.btn--solid:hover{ background:var(--ember-soft); border-color:var(--ember-soft); transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--bone); border:var(--bw) solid var(--line); }
.btn--line:hover{ border-color:var(--bone); transform:translateY(-2px); }
.btn--line-light{ border-color:rgba(236,228,212,.3) }
.btn--ghost{ background:transparent; color:var(--bone); border:var(--bw) solid transparent; padding:.7em 1em; }
.btn--ghost:hover{ color:var(--ember-soft) }
.btn--big{ padding:1.25em 2.1em; font-size:.86rem; }

/* =====================================================================
   Top bar
   ===================================================================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--gut);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(12,13,16,.82);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
  padding-top:.8rem; padding-bottom:.8rem;
}
.brand{ display:flex; align-items:center; gap:.6em; margin-right:auto; }
.brand .star{ width:1.05em; height:1.05em; transition:transform .6s var(--ease); }
.brand:hover .star{ transform:rotate(72deg) }
.brand-word{
  font-family:var(--mono);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone);
}
.topnav{ display:flex; gap:1.8rem; }
.topnav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); transition:color .3s var(--ease);
}
.topnav a:hover{ color:var(--bone) }
.topbar-cta{ flex:none }

@media (max-width:880px){
  .topnav{ display:none }
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--gut) 6rem;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0;
  background:#000 url("assets/rancho-5.jpg") center 38% / cover no-repeat;
  transform:scale(1.06);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 78%, rgba(219,106,51,.10), transparent 55%),
    linear-gradient(180deg, rgba(9,10,12,.55) 0%, rgba(9,10,12,.18) 32%, rgba(9,10,12,.35) 62%, rgba(9,10,12,.92) 100%);
}
.hero__inner{ position:relative; max-width:62rem; margin-inline:auto; width:100%; text-align:center; }
.hero__inner .eyebrow{ justify-content:center }
.hero__title{
  font-weight:500;
  font-size:clamp(2.7rem,7vw,6rem);
  line-height:.98;
  letter-spacing:-.026em;
  color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
  margin-bottom:1.6rem;
}
.hero__lede{
  max-width:38rem; margin:0 auto 2.4rem;
  font-size:clamp(1.1rem,1.5vw,1.4rem);
  line-height:1.5;
  color:rgba(236,228,212,.9);
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.hero__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.hero__foot{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem var(--gut);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-mut);
  border-top:1px solid var(--line-soft);
}
.hero__rating{ color:var(--sand) }
.hero__scroll{ display:flex; align-items:center; gap:.7em; }
.hero__scroll span{
  width:1px; height:2.2em; background:linear-gradient(var(--ember),transparent);
  display:inline-block; transform-origin:top;
  animation:scrolldrop 2.2s var(--ease) infinite;
}
@keyframes scrolldrop{ 0%{transform:scaleY(0);opacity:0} 30%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* =====================================================================
   2. THE PLACE
   ===================================================================== */
.place{ padding:clamp(5rem,12vw,9rem) 0 0; }
.manifesto{
  font-weight:500;
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin-bottom:clamp(2.2rem,5vw,3.5rem);
  text-wrap:balance;
}
.place__cols{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,4rem);
  max-width:62rem;
}
.place__cols .lede{ color:var(--bone) }
.place__cols p:last-child{ color:var(--bone-dim); font-size:1.06rem; }
@media (max-width:720px){ .place__cols{ grid-template-columns:1fr } }

/* full-bleed image band */
.band{
  position:relative; margin-top:clamp(3.5rem,8vw,6rem);
  overflow:hidden;
}
.band img{ width:100%; height:clamp(320px,52vh,640px); object-fit:cover; filter:saturate(1.02) contrast(1.03); }
.band--tall img{ height:clamp(420px,72vh,820px) }
.band__cap{
  position:absolute; left:var(--gut); bottom:1.1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(236,228,212,.82); text-shadow:0 1px 14px rgba(0,0,0,.7);
}
.band__quote{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:var(--gut); text-align:center;
  background:linear-gradient(90deg, rgba(9,10,12,.45), rgba(9,10,12,.1) 45%, rgba(9,10,12,.5));
}
.band__quote p{
  font-size:clamp(1.6rem,4.2vw,3.2rem); line-height:1.12; font-style:italic; color:#fff;
  letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.6); max-width:20ch;
}

/* =====================================================================
   3. WHY YOU COME
   ===================================================================== */
.why{ padding:clamp(5rem,12vw,9rem) 0 0; }
.why__grid{
  display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:820px){ .why__grid{ grid-template-columns:1fr } }

.forlist{ list-style:none; margin-top:2.4rem; }
.forlist li{
  padding:1.15rem 0; border-top:1px solid var(--line);
  font-size:1.05rem; color:var(--bone-dim);
}
.forlist li:last-child{ border-bottom:1px solid var(--line) }
.forlist span{ display:block; color:var(--bone); font-style:italic; font-size:1.18rem; margin-bottom:.15rem; }

/* sky readout panel */
.sky{
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.8rem 1.7rem;
  background:linear-gradient(180deg, rgba(21,23,27,.9), rgba(9,10,12,.6));
  position:sticky; top:6rem;
}
.sky__label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); margin-bottom:1.4rem;
}
.sky__moon{
  display:block;
  width:78px; height:78px; border-radius:50%;
  margin:0 auto 1.1rem;
  background:#0c0d10;
  box-shadow:inset 0 0 0 1px rgba(236,228,212,.16), 0 0 38px rgba(236,228,212,.10);
  /* lit fraction painted by JS via --lit gradient */
  background-image:linear-gradient(90deg, #e9e3d2 50%, #15171b 50%);
  position:relative; overflow:hidden;
  transition:background-image .6s var(--ease);
}
.sky__phase{ text-align:center; font-style:italic; font-size:1.25rem; color:var(--bone); }
.sky__illum{ text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--bone-mut); margin-top:.3rem; }
.sky__rule{ border:0; border-top:1px solid var(--line); margin:1.4rem 0; }
.sky__data div{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; }
.sky__data dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-mut); }
.sky__data dd{ font-size:.92rem; color:var(--bone); text-align:right; }

/* =====================================================================
   4. THE LEDGER
   ===================================================================== */
.ledger{ padding:clamp(5rem,12vw,9rem) 0 clamp(4rem,9vw,7rem); }
.ledger .lede{ max-width:46rem; margin-top:1.4rem; color:var(--bone-dim); }
.ledger__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,6vw,4rem);
}
@media (max-width:680px){ .ledger__grid{ grid-template-columns:1fr } }
.ledger__head{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); padding-bottom:1rem; margin-bottom:.4rem; border-bottom:1px solid var(--line);
  font-weight:400;
}
.check,.bring{ list-style:none }
.check li,.bring li{
  display:flex; align-items:baseline; gap:.85em;
  padding:.78rem 0; border-bottom:1px solid var(--line-soft);
  font-size:1.06rem; color:var(--bone);
}
.check li::before{ content:"✓"; color:var(--sage); font-family:var(--mono); font-size:.9em; flex:none; }
.bring li::before{ content:"+"; color:var(--ember); font-family:var(--mono); font-weight:700; flex:none; }

.nothere{
  margin-top:clamp(3rem,7vw,5rem);
  border:1px solid var(--line);
  border-left:3px solid var(--ember);
  border-radius:3px;
  padding:clamp(1.8rem,4vw,2.6rem);
  background:linear-gradient(180deg, rgba(173,79,35,.06), transparent);
}
.nothere__lead{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember-soft); margin-bottom:1.4rem;
}
.nothere__lead em{ font-style:italic; text-transform:none; letter-spacing:0; }
.nothere__list{
  list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 0.7rem;
}
.nothere__list li{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--bone-dim);
  border:1px solid var(--line); border-radius:100px;
  padding:.42em 1em;
  position:relative;
}
.nothere__list li::after{
  content:""; position:absolute; left:14%; right:14%; top:51%; height:1px;
  background:var(--ember); opacity:.55; transform:rotate(-4deg);
}
.nothere__note{ margin-top:1.6rem; font-style:italic; color:var(--bone); font-size:1.1rem; max-width:48rem; }

/* =====================================================================
   5. BIG BEND
   ===================================================================== */
.bigbend{ position:relative; }
.bigbend__media{ position:relative; overflow:hidden; }
.bigbend__media img{ width:100%; height:clamp(300px,48vw,560px); object-fit:cover; }
.bigbend__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,10,12,.15), rgba(9,10,12,.65) 78%, var(--ink));
}
.bigbend__body{ padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(4rem,9vw,7rem); margin-top:-2px; }
.dist{ margin:clamp(2rem,5vw,3rem) 0 2rem; max-width:48rem; }
.dist__row{
  display:flex; align-items:baseline; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.dist__place{ font-size:1.15rem; color:var(--bone); flex:none; }
.dist__dots{ flex:1; border-bottom:1px dotted var(--bone-mut); transform:translateY(-.3em); }
.dist__val{ font-family:var(--mono); font-size:.86rem; letter-spacing:.06em; color:var(--ember-soft); flex:none; }
.bigbend__note{ color:var(--bone-dim); max-width:42rem; font-size:1.1rem; }

/* =====================================================================
   6. FIELD NOTES
   ===================================================================== */
.notes{ padding:clamp(5rem,12vw,8rem) 0; border-top:1px solid var(--line-soft); }
.notes .h2{ margin-top:.4rem }
.notes__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(2.5rem,6vw,4rem);
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:820px){ .notes__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .notes__grid{ grid-template-columns:1fr } }
.note{ background:var(--ink); padding:clamp(1.6rem,3vw,2.2rem); transition:background .4s var(--ease); }
.note:hover{ background:var(--ink-soft) }
.note__h{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember-soft); margin-bottom:.9rem; font-weight:400;
}
.note p{ color:var(--bone-dim); font-size:1.02rem; }

/* =====================================================================
   7. FUTURE
   ===================================================================== */
.future{
  position:relative;
  background:#000 url("assets/rancho-2.jpg") center 60% / cover no-repeat fixed;
  padding:clamp(6rem,14vw,11rem) 0;
}
.future::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(9,10,12,.93) 0%, rgba(9,10,12,.78) 45%, rgba(9,10,12,.45) 100%);
}
.future__wrap{ position:relative; }
.future__text{ max-width:40rem; }
.roadmap{ list-style:none; margin-top:2.2rem; }
.roadmap li{
  display:flex; align-items:baseline; gap:1.1em;
  padding:1.05rem 0; border-top:1px solid var(--line);
  font-size:1.12rem; color:var(--bone);
}
.roadmap li:last-child{ border-bottom:1px solid var(--line) }
.roadmap__tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember-soft); border:1px solid var(--line); border-radius:100px;
  padding:.4em .85em; flex:none; min-width:6.4em; text-align:center;
}

/* =====================================================================
   8. FINAL CTA
   ===================================================================== */
.cta{ position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden; }
.cta__media{
  position:absolute; inset:0;
  background:#000 url("assets/rancho-4.jpg") center 42% / cover no-repeat;
  transform:scale(1.05); will-change:transform;
}
.cta__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 60%, transparent, rgba(9,10,12,.55)),
    linear-gradient(180deg, rgba(9,10,12,.7) 0%, rgba(9,10,12,.2) 30%, rgba(9,10,12,.55) 75%, rgba(9,10,12,.95) 100%);
}
.cta__inner{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding:6rem var(--gut); text-align:center; }
.cta__title{
  font-weight:500; font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1.04; letter-spacing:-.02em;
  color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.55); margin-bottom:1.4rem; text-wrap:balance;
}
.cta__lede{ font-size:clamp(1.1rem,1.6vw,1.4rem); color:rgba(236,228,212,.9); max-width:34rem; margin:0 auto 2.4rem; }
.cta__fine{ margin-top:1.6rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-mut); }

/* =====================================================================
   Footer
   ===================================================================== */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(3.5rem,8vw,5.5rem) 0 2.5rem; }
.footer__grid{
  display:grid; grid-template-columns:1.3fr 1.1fr auto; gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr; gap:2.4rem } }
.brand--footer .star{ width:1.1em; height:1.1em; }
.footer__tag{ margin-top:1.1rem; color:var(--bone-dim); font-size:1rem; max-width:34rem; }
.footer__meta div{ display:flex; flex-direction:column; gap:.2rem; padding:.55rem 0; border-bottom:1px solid var(--line-soft); }
.footer__meta dt{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mut); }
.footer__meta dd{ color:var(--bone); font-size:.98rem; }
.footer__cta{ display:flex; justify-content:flex-start; }
.footer__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-mut);
}

/* =====================================================================
   Reveal-on-scroll
   ===================================================================== */
.js .reveal{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll span{ animation:none }
  .hero__media,.cta__media{ transform:none }
  .future{ background-attachment:scroll }
}

/* iOS: fixed bg attachment is janky/unsupported — fall back */
@media (hover:none){
  .future{ background-attachment:scroll }
}