/* ============================================================
   CAULFEILD — a mountain residence
   Tokens
   ============================================================ */
:root{
  --ink:        #14181a;
  --panel:      #1b211f;
  --panel-2:    #202723;
  --ivory:      #f1ece1;
  --stone:      #a9a79c;
  --stone-dim:  #7c7a70;
  --brass:      #b8925b;
  --brass-dim:  #8f7048;
  --line:       rgba(241,236,225,.14);
  --line-brass: rgba(184,146,91,.45);

  --display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

img{ display:block; max-width:100%; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; }

a{ color:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-in{ transition-delay:.12s; }
.reveal-delay-2.is-in{ transition-delay:.24s; }

/* ---------- small caps label ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px;
  background:linear-gradient(to bottom, rgba(10,12,11,.75), rgba(10,12,11,0));
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(16,19,18,.92);
  backdrop-filter:blur(10px);
  padding:16px 40px;
  border-bottom:1px solid var(--line);
}
.nav-mark{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  display:flex; align-items:baseline; gap:8px;
}
.nav-mark span{ color:var(--brass); font-style:italic; font-weight:400; }
.nav-links{
  display:flex; gap:38px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
  position:relative;
  padding-bottom:4px;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .3s ease;
}
.nav-links a:hover{ color:var(--ivory); }
.nav-links a:hover::after{ width:100%; }
.nav-links .nav-cta{
  border:1px solid var(--line-brass);
  padding:8px 18px;
  border-radius:2px;
  color:var(--ivory);
}
.nav-links .nav-cta::after{ display:none; }
.nav-links .nav-cta:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  animation:heroSettle 2.4s ease forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(10,12,11,.92) 0%, rgba(10,12,11,.42) 42%, rgba(10,12,11,.08) 68%, rgba(10,12,11,.35) 100%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding:0 40px 84px;
}
.hero-inner{ max-width:var(--wrap); margin:0 auto; }
.hero-eyebrow{
  opacity:0; animation:fadeUp .9s ease .5s forwards;
  font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass); margin-bottom:22px; font-weight:600;
}
.hero h1{
  opacity:0; animation:fadeUp 1s ease .7s forwards;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 6vw, 5.4rem);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 28px;
  max-width:15ch;
}
.hero h1 em{ font-style:italic; color:var(--brass); font-weight:300; }
.hero-sub{
  opacity:0; animation:fadeUp 1s ease .95s forwards;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  font-size:1rem; color:var(--stone);
}
.hero-sub .divider{ width:26px; height:1px; background:var(--line-brass); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

.scroll-cue{
  position:absolute; right:40px; bottom:36px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--stone); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; animation:fadeUp 1s ease 1.3s forwards;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--brass), transparent); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 45%{ transform:scaleY(1); transform-origin:top;} 55%{ transform:scaleY(1); transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  padding:130px 0 100px;
  border-bottom:1px solid var(--line);
}
.intro-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:90px;
  align-items:start;
}
.intro-text p{
  font-family:var(--display);
  font-weight:300;
  font-size:1.55rem;
  line-height:1.5;
  color:#e7e1d3;
  margin:0;
}
.intro-text .drop{
  float:left;
  font-family:var(--display);
  font-size:5.2rem;
  line-height:.78;
  padding:6px 12px 0 0;
  color:var(--brass);
  font-weight:400;
}
.facts{
  border-top:1px solid var(--line);
}
.fact{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.fact .k{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-dim); }
.fact .v{ font-family:var(--display); font-size:1.25rem; color:var(--ivory); text-align:right; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:64px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display); font-weight:400; font-size:clamp(2rem, 3.4vw, 3rem);
  margin:14px 0 0; letter-spacing:-.01em;
}
.section-head p{ max-width:34ch; color:var(--stone); font-size:.95rem; margin:0 0 6px; }

/* ============================================================
   PRINCIPAL ROOMS — alternating editorial rows
   ============================================================ */
.rooms{ padding:110px 0; }
.room-row{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  padding:70px 0; border-bottom:1px solid var(--line);
}
.room-row:first-of-type{ padding-top:0; }
.room-row:last-of-type{ border-bottom:none; padding-bottom:0; }
.room-row.rev .room-media{ order:2; }
.room-row.rev .room-copy{ order:1; }
.room-media{ position:relative; overflow:hidden; border-radius:2px; }
.room-media img{
  width:100%; height:560px; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.room-media:hover img{ transform:scale(1.045); }
.room-media .tag{
  position:absolute; left:18px; bottom:18px;
  background:rgba(15,17,16,.75); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  padding:8px 14px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory);
}
.room-copy .index{ font-family:var(--display); font-size:.95rem; color:var(--brass); letter-spacing:.1em; margin-bottom:16px; display:block; }
.room-copy h3{ font-family:var(--display); font-weight:400; font-size:2.2rem; margin:0 0 20px; }
.room-copy p{ color:var(--stone); font-size:1.02rem; max-width:44ch; }
.room-copy .inset{
  margin-top:26px; display:flex; gap:14px; align-items:center;
}
.room-copy .inset img{ width:96px; height:72px; object-fit:cover; border-radius:2px; }
.room-copy .inset span{ font-size:.82rem; color:var(--stone-dim); max-width:22ch; }

/* full width banner divider */
.banner{
  position:relative; height:56vh; min-height:380px; overflow:hidden;
}
.banner img{ width:100%; height:100%; object-fit:cover; }
.banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,11,.85), rgba(10,12,11,.1) 45%, rgba(10,12,11,.55)); }
.banner-cap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 30px;
}
.banner-cap p{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem, 3vw, 2.6rem); color:var(--ivory); max-width:20ch; line-height:1.3;
}

/* ============================================================
   THE DIRECTORY — brass plaque room list (signature element)
   ============================================================ */
.directory{ padding:120px 0; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.directory-cols{ display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.directory-col h4{
  font-family:var(--body); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  margin:0 0 8px; font-weight:600;
}
.directory-col .col-count{ font-family:var(--display); font-size:2.6rem; margin:0 0 34px; font-weight:400; }
.dir-row{
  display:grid; grid-template-columns:44px 62px 1fr; gap:22px; align-items:center;
  padding:20px 0; border-top:1px solid var(--line);
  cursor:default;
}
.directory-col .dir-row:last-child{ border-bottom:1px solid var(--line); }
.dir-num{ font-family:var(--display); color:var(--stone-dim); font-size:1.1rem; }
.dir-thumb{ width:62px; height:62px; border-radius:2px; overflow:hidden; background:var(--panel-2); }
.dir-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dir-row:hover .dir-thumb img{ transform:scale(1.12); }
.dir-thumb.empty{ display:flex; align-items:center; justify-content:center; }
.dir-thumb.empty span{ font-family:var(--display); font-style:italic; color:var(--brass-dim); font-size:1.1rem; }
.dir-name{ font-family:var(--display); font-size:1.15rem; margin:0 0 4px; }
.dir-desc{ font-size:.86rem; color:var(--stone); margin:0; }

/* ============================================================
   WELLNESS mosaic
   ============================================================ */
.wellness{ padding:120px 0; }
.mosaic{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:130px;
  gap:14px;
}
.tile{ position:relative; overflow:hidden; border-radius:2px; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.tile:hover img{ transform:scale(1.06); }
.tile .tile-label{
  position:absolute; left:0; right:0; bottom:0; padding:18px;
  background:linear-gradient(to top, rgba(10,12,11,.88), transparent);
}
.tile .tile-label b{ display:block; font-family:var(--display); font-weight:400; font-size:1.05rem; }
.tile .tile-label span{ font-size:.78rem; color:var(--stone); }
.t-gym{ grid-column:span 3; grid-row:span 3; }
.t-theater{ grid-column:span 3; grid-row:span 3; }
.t-spa{ grid-column:span 2; grid-row:span 2; }
.t-sauna{ grid-column:span 2; grid-row:span 2; }
.t-steam{ grid-column:span 2; grid-row:span 2; }

.wine-note{
  margin-top:40px; padding-top:30px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.wine-note .eyebrow{ margin:0; }
.wine-note p{ margin:0; color:var(--stone); font-size:.95rem; max-width:56ch; }

/* ============================================================
   GROUNDS mosaic
   ============================================================ */
.grounds{ padding:120px 0; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.grounds-grid{
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:640px;
}
.grounds-grid .g-main{ grid-row:1/3; position:relative; overflow:hidden; border-radius:2px; }
.grounds-grid .g-side{ position:relative; overflow:hidden; border-radius:2px; }
.grounds-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.grounds-grid a:hover img, .grounds-grid .g-main:hover img, .grounds-grid .g-side:hover img{ transform:scale(1.05); }
.g-cap{ position:absolute; left:20px; bottom:20px; }
.g-cap b{ font-family:var(--display); font-weight:400; font-size:1.3rem; display:block; }
.g-cap span{ font-size:.76rem; color:var(--stone); text-transform:uppercase; letter-spacing:.1em; }
.g-main::after, .g-side::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,11,.75), transparent 55%); }

/* ============================================================
   AMENITY STRIP (icons row)
   ============================================================ */
.amenity-strip{ padding:90px 0; }
.amenity-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.amenity-item{ background:var(--ink); padding:38px 34px; }
.amenity-item h4{ font-family:var(--display); font-weight:400; font-size:1.3rem; margin:0 0 12px; }
.amenity-item p{ color:var(--stone); font-size:.9rem; margin:0; }
.amenity-item .glyph{ color:var(--brass); font-size:1.4rem; margin-bottom:16px; display:block; }

/* ============================================================
   CTA / FOOTER
   ============================================================ */
.cta{
  position:relative; min-height:78vh; display:flex; align-items:center;
  overflow:hidden;
}
.cta-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,10,9,.96), rgba(8,10,9,.55) 55%, rgba(8,10,9,.75)); }
.cta-content{ position:relative; z-index:2; width:100%; text-align:center; padding:80px 40px; }
.cta-content .eyebrow{ justify-content:center; display:block; margin-bottom:24px; }
.cta-content h2{
  font-family:var(--display); font-weight:400; font-size:clamp(2.2rem, 5vw, 4rem);
  margin:0 0 30px; letter-spacing:-.01em;
}
.cta-content h2 em{ color:var(--brass); font-style:italic; font-weight:300; }
.cta-content p.lede{ color:var(--stone); max-width:52ch; margin:0 auto 44px; font-size:1.05rem; }
.cta-buttons{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:16px 36px; text-decoration:none;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  transition:all .3s ease; border-radius:2px;
}
.btn-primary{ background:var(--brass); color:var(--ink); font-weight:600; }
.btn-primary:hover{ background:#cba976; }
.btn-ghost{ border:1px solid var(--line-brass); color:var(--ivory); }
.btn-ghost:hover{ background:rgba(184,146,91,.12); }

.footer{
  padding:50px 0 38px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer .nav-mark{ font-size:.95rem; }
.footer small{ color:var(--stone-dim); font-size:.78rem; letter-spacing:.03em; }
.footer .foot-links{ display:flex; gap:26px; list-style:none; padding:0; margin:0; }
.footer .foot-links a{ color:var(--stone); text-decoration:none; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.footer .foot-links a:hover{ color:var(--brass); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .wrap{ padding:0 26px; }
  .nav{ padding:20px 24px; }
  .nav-links{ position:fixed; inset:0 0 0 auto; width:78%; max-width:340px; background:rgba(14,17,16,.98);
    flex-direction:column; align-items:flex-start; padding:100px 34px 34px; gap:26px;
    transform:translateX(100%); transition:transform .4s ease; }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; z-index:110; cursor:pointer; padding:6px;
  }
  .nav-toggle span{ width:22px; height:1px; background:var(--ivory); }

  .intro-grid{ grid-template-columns:1fr; gap:50px; }
  .facts{ border-top:none; }

  .room-row{ grid-template-columns:1fr; gap:34px; padding:50px 0; }
  .room-row.rev .room-media{ order:1; } .room-row.rev .room-copy{ order:2; }
  .room-media img{ height:400px; }

  .directory-cols{ grid-template-columns:1fr; gap:60px; }

  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .t-gym, .t-theater{ grid-column:span 2; grid-row:span 2; }
  .t-spa, .t-sauna, .t-steam{ grid-column:span 1; grid-row:span 2; }

  .grounds-grid{ grid-template-columns:1fr; grid-template-rows:auto; height:auto; }
  .grounds-grid .g-main{ height:380px; grid-row:auto; }
  .grounds-grid .g-side{ height:220px; }

  .amenity-grid{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .hero-content{ padding-bottom:60px; }
  .hero h1{ max-width:none; }
  .scroll-cue{ display:none; }
  .intro{ padding:90px 0 70px; }
  .intro-text .drop{ font-size:3.6rem; }
  .rooms{ padding:70px 0; }
  .directory{ padding:80px 0; }
  .wellness, .grounds{ padding:80px 0; }
  .cta-buttons{ flex-direction:column; width:100%; }
  .btn{ text-align:center; }
  .footer{ flex-direction:column; text-align:center; }
}