/* ==========================================================================
   Residences Worldwide — page-specific styles
   Dark cinematic variant of the PLM system. Loaded AFTER css/site.css.
   New section patterns only: dark hero, statement, how-it-works phases,
   editorial atlas, dark closing CTA. Shared chrome/buttons come from site.css.
   ========================================================================== */

/* This page runs on the dark base end-to-end (mirrors the .dc.html root). */
.rw-page { background: var(--dark); color: var(--cream); }

/* ---------- reveal delay / duration helpers (match source timings) ---------- */
.rw-slow { transition-duration: 1s; }
.rw-d1 { transition-delay: .1s; }
.rw-d2 { transition-delay: .2s; }

/* ==========================================================================
   HERO (dark, cinematic, parallax)
   ========================================================================== */
.rw-hero {
  position: relative; overflow: hidden;
  min-height: 92vh; display: flex; align-items: flex-end;
}
.rw-hero__img {
  position: absolute; top: -8%; left: 0;
  width: 100%; height: 116%; object-fit: cover; display: block;
}
.rw-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,11,.5) 0%, rgba(20,16,11,.28) 38%, rgba(20,16,11,.88) 100%);
}
@media (max-width:600px){
  .rw-hero__scrim {
    background: linear-gradient(180deg, rgba(20,16,11,.55) 0%, rgba(20,16,11,.42) 45%, rgba(20,16,11,.94) 100%);
  }
}
.rw-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 160px clamp(22px,5vw,32px) clamp(60px,9vh,110px);
}
.rw-hero h1 {
  font-family: 'Playfair Display', serif; font-weight: 300;
  font-size: clamp(46px,8vw,120px); line-height: 0.98;
  letter-spacing: -0.015em; margin: 24px 0 0; max-width: 13ch;
  text-shadow: 0 2px 22px rgba(15,12,8,.55), 0 1px 4px rgba(15,12,8,.5);
}
.rw-hero h1 em {
  font-style: italic; font-weight: 400; color: #D8BE8A;
  text-shadow: 0 2px 18px rgba(15,12,8,.7), 0 1px 3px rgba(15,12,8,.6);
}
.rw-hero__lead {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(22px,2.6vw,30px); color: rgba(247,245,240,.9); margin-top: 26px;
  text-shadow: 0 1px 16px rgba(15,12,8,.5);
}

/* gold eyebrow with leading rule (gold-light variant on dark) */
.rw-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-light);
  text-shadow: 0 1px 14px rgba(15,12,8,.75);
}
.rw-eyebrow__rule { width: 28px; height: 1px; background: var(--gold-light); display: inline-block; }

/* shared label (how-it-works / atlas eyebrow without a rule) */
.rw-label {
  font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-light);
}

/* ==========================================================================
   WHAT IT IS — centered statement
   ========================================================================== */
.rw-statement {
  position: relative; overflow: hidden;
  padding: clamp(80px,13vh,150px) clamp(22px,5vw,32px);
}
.rw-statement__inner {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto; text-align: center;
}
.rw-statement p {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(26px,3.4vw,44px); line-height: 1.3;
}

/* ==========================================================================
   HOW IT WORKS — three phases
   ========================================================================== */
.rw-how { padding: 0 clamp(22px,5vw,32px) clamp(80px,13vh,140px); }
.rw-how__inner { max-width: 1200px; margin: 0 auto; }
.rw-how__label {
  border-bottom: 1px solid rgba(247,245,240,.16);
  padding-bottom: 18px; margin-bottom: 50px;
}
.rw-how__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr));
  gap: clamp(30px,4vw,56px);
}
.rw-phase__num { font-family: 'Playfair Display', serif; font-size: 56px; line-height: 1; color: var(--gold-light); }
.rw-phase__rule { height: 1px; background: rgba(247,245,240,.2); margin: 22px 0; }
.rw-phase h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 26px; }
.rw-phase p { color: rgba(247,245,240,.72); font-size: 15.5px; margin-top: 12px; line-height: 1.7; }
.rw-how__who {
  margin-top: 56px; max-width: 70ch; color: rgba(247,245,240,.66);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(18px,2vw,23px); line-height: 1.5;
}

/* ==========================================================================
   THE ATLAS — editorial places band
   ========================================================================== */
.rw-atlas {
  position: relative; overflow: hidden; background: #13110D;
  padding: clamp(80px,13vh,140px) clamp(22px,5vw,32px);
}
.rw-atlas__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.rw-atlas__head { text-align: center; margin-bottom: clamp(44px,7vh,72px); }
.rw-atlas__head h2 {
  font-family: 'Playfair Display', serif; font-weight: 300;
  font-size: clamp(34px,4.6vw,60px); line-height: 1.04; margin-top: 18px;
}
.rw-atlas__list { border-top: 1px solid rgba(247,245,240,.16); }
.rw-place {
  display: grid;
  grid-template-columns: 60px minmax(160px,1fr) minmax(150px,0.8fr) minmax(200px,1.4fr);
  gap: 20px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid rgba(247,245,240,.16);
}
.rw-place__num { font-size: 11px; letter-spacing: .2em; color: var(--gold-light); }
.rw-place__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(26px,3vw,40px); line-height: 1;
}
.rw-place__coords {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px;
  letter-spacing: .06em; color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.rw-place__note { font-size: 14.5px; line-height: 1.6; color: rgba(247,245,240,.7); }

@media (max-width: 680px) {
  .rw-place { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
}

/* ==========================================================================
   CLOSING CTA (dark, transparent over the page base)
   ========================================================================== */
.rw-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(80px,13vh,150px) clamp(22px,5vw,32px);
}
.rw-cta__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.rw-cta h2 {
  font-family: 'Playfair Display', serif; font-weight: 300;
  font-size: clamp(34px,4.8vw,62px); line-height: 1.04;
}
.rw-cta h2 em { font-style: italic; font-weight: 400; color: var(--gold-light); }