/* Page composition ownership boundary.
   This file owns page or page-family composition only.
   Reusable shared primitives belong in editorial-base.css.
   Do not add legacy fallback systems here. */

/* Area detail editorial composition.
   Page-specific visual rhythm lives here so shared primitives do not flatten
   the approved Redlands canvas. */

.area-detail{
  --editorial-navy:#0c1a3d;
  --editorial-navy-2:#16275a;
  --editorial-gold:#b8923a;
  --editorial-gold-lt:#d4aa5a;
  --editorial-cream:#f7f4ed;
  --editorial-paper:#fbf8f1;
  --editorial-sand:#e8e1d0;
  --editorial-ink:#1a1a2e;
  --editorial-muted:rgba(26, 26, 46, .66);
  --editorial-rule:rgba(12, 26, 61, .14);
  --editorial-rule-strong:rgba(12, 26, 61, .22);
  --area-page:min(1180px, calc(100vw - 52px));
  --area-article:min(790px, calc(100vw - 52px));
  --area-page-mobile:calc(100vw - 32px);
  background:var(--editorial-paper);
  color:var(--editorial-ink);
  font-family:Raleway, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.72;
  overflow-x:visible;
}

.area-detail *,
.area-detail *::before,
.area-detail *::after{
  box-sizing:border-box;
}

.area-detail a{
  color:inherit;
}

.area-detail .editorial-shell{
  width:var(--area-page);
}

.area-detail .area-eyebrow{
  display:inline-flex;
  margin:0 0 1.1rem;
  --editorial-eyebrow-font-size:.64rem;
  --editorial-eyebrow-font-weight:800;
  --editorial-eyebrow-line-height:1.5;
  --editorial-eyebrow-rule-opacity:.7;
}

.area-detail h1,
.area-detail h2,
.area-detail h3{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:300;
  letter-spacing:-.055em;
  line-height:.9;
}

.area-detail h1{
  max-width:10.6ch;
  color:#fff;
  font-size:clamp(3.35rem, 7.4vw, 7.1rem);
}

.area-detail h1 em{
  display:block;
  color:var(--editorial-gold);
  font-style:italic;
  font-weight:400;
}

.area-detail h2{
  max-width:11.4ch;
  color:var(--editorial-navy);
  font-size:clamp(2.65rem, 5.2vw, 5rem);
}

.area-detail h2 em{
  color:var(--editorial-gold);
  font-style:italic;
  font-weight:400;
}

.area-detail h3{
  color:var(--editorial-navy);
  font-size:clamp(1.55rem, 2.7vw, 2.35rem);
  letter-spacing:-.045em;
}

.area-detail p{
  margin:0;
  color:var(--editorial-muted);
  font-size:clamp(.98rem, 1.12vw, 1.06rem);
  line-height:1.8;
}

.area-caption{
  margin-top:.72rem;
  --editorial-caption-color:rgba(26, 26, 46, .48);
  --editorial-caption-font-size:.66rem;
  --editorial-caption-letter-spacing:.12em;
  --editorial-caption-line-height:1.55;
  --editorial-caption-text-transform:uppercase;
  font-weight:800;
}

.area-hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(620px, 78svh, 780px);
  display:grid;
  overflow:hidden;
  padding:0;
  color:#fff;
  background:var(--editorial-navy);
}

.area-detail--redlands .area-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(8, 18, 50, .98) 0%, rgba(12, 26, 61, .92) 42%, rgba(12, 26, 61, .45) 72%, rgba(12, 26, 61, .82) 100%),
    linear-gradient(180deg, rgba(8, 18, 50, .1), rgba(8, 18, 50, .66)),
    url('/images/gj-monument.jpg') center / cover no-repeat;
}

.area-detail--palisade .area-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(8, 18, 50, .96) 0%, rgba(12, 26, 61, .9) 43%, rgba(12, 26, 61, .42) 72%, rgba(12, 26, 61, .78) 100%),
    linear-gradient(180deg, rgba(8, 18, 50, .08), rgba(8, 18, 50, .62)),
    url('/images/gj-landscape.jpg') center 42% / cover no-repeat;
}

.area-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 74% 14%, rgba(212, 170, 90, .2), transparent 30%),
    linear-gradient(90deg, transparent 0 68%, rgba(247, 244, 237, .08) 68% 68.1%, transparent 68.1%),
    linear-gradient(180deg, transparent 0 84%, rgba(247, 244, 237, .08) 84% 84.12%, transparent 84.12%);
}

.area-hero__grid{
  min-height:inherit;
  display:grid;
  grid-template-columns:minmax(0, .62fr) minmax(260px, .38fr);
  gap:clamp(2rem, 5.2vw, 5.4rem);
  align-items:end;
  padding:clamp(96px, 12vh, 132px) 0 clamp(42px, 7vh, 72px);
}

.area-hero__copy{
  max-width:720px;
}

.area-hero .area-hero__deck{
  max-width:580px;
  margin-top:clamp(1rem, 1.8vw, 1.35rem);
  color:rgba(247, 244, 237, .78);
  font-size:clamp(1rem, 1.32vw, 1.14rem);
  line-height:1.62;
}

.area-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin-top:clamp(1.35rem, 2.4vw, 2rem);
  color:rgba(247, 244, 237, .62);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.5;
  text-transform:uppercase;
}

.area-hero__meta span:not(:last-child)::after{
  content:"·";
  margin-left:1rem;
  color:rgba(212, 170, 90, .68);
}

.area-hero__note{
  align-self:end;
  max-width:300px;
  --editorial-note-border-top:1px solid rgba(212, 170, 90, .42);
  --editorial-note-padding-top:1rem;
  --editorial-note-paragraph-color:rgba(247, 244, 237, .66);
  --editorial-note-paragraph-font-size:.78rem;
  --editorial-note-paragraph-letter-spacing:.04em;
  --editorial-note-paragraph-line-height:1.52;
  --editorial-note-paragraph-text-transform:uppercase;
}

.area-market-read{
  padding:clamp(4.8rem, 7.8vw, 6.8rem) 0;
  background:var(--editorial-paper);
}

.area-market-read__grid{
  display:grid;
  grid-template-columns:minmax(280px, .4fr) minmax(0, .6fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:end;
}

.area-market-read__copy p:not(.editorial-eyebrow){
  max-width:520px;
  margin-top:1.1rem;
}

.area-market-read__panel{
  display:grid;
  gap:clamp(1.3rem, 2.8vw, 2.2rem);
}

.area-market-read__visual{
  width:min(520px, 100%);
  margin:0 0 0 auto;
}

.area-market-read__visual img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  box-shadow:0 22px 58px rgba(12, 26, 61, .12);
}

.area-market-read__stats{
  display:grid;
  gap:1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(12, 26, 61, .22);
}

.area-stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid rgba(12, 26, 61, .12);
  border-bottom:1px solid rgba(12, 26, 61, .12);
}

.area-stat{
  min-height:112px;
  padding:1rem .85rem;
  border-right:1px solid rgba(12, 26, 61, .12);
}

.area-stat:last-child{
  border-right:0;
}

.area-stat strong{
  display:block;
  white-space:nowrap;
  color:var(--editorial-navy);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.75rem, 2.85vw, 2.85rem);
  font-weight:300;
  letter-spacing:-.06em;
  line-height:.9;
}

.area-stat > span{
  display:block;
  margin-top:.68rem;
  color:rgba(26, 26, 46, .54);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.45;
  text-transform:uppercase;
}

.area-market-note{
  color:rgba(26, 26, 46, .52);
  font-size:.78rem;
  line-height:1.55;
}

.area-local-details{
  padding:clamp(5.8rem, 9vw, 8.2rem) 0;
  background:#fff;
}

.area-article{
  width:var(--area-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(160px, .2fr) minmax(0, .8fr);
  gap:clamp(1.6rem, 5vw, 5.4rem);
  align-items:start;
  padding-top:clamp(1.8rem, 3.4vw, 3rem);
  border-top:1px solid rgba(184, 146, 58, .42);
}

.area-article__rail{
  position:sticky;
  top:7rem;
  align-self:start;
  padding-top:.2rem;
}

.area-article__content{
  min-width:0;
}

.area-article__rail .editorial-eyebrow{
  margin-bottom:.7rem;
}

.area-article__rail p{
  max-width:155px;
  margin-inline:auto;
  color:rgba(26, 26, 46, .54);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.62;
  text-align:center;
  text-transform:none;
}

.area-detail .area-article__lead{
  max-width:15.5ch;
  color:var(--editorial-navy);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.35rem, 4.9vw, 4.85rem);
  font-weight:300;
  letter-spacing:-.065em;
  line-height:.9;
}

.area-detail .area-article__lead em{
  color:var(--editorial-gold);
  font-style:italic;
  font-weight:400;
}

.area-article__body{
  display:grid;
  grid-template-columns:minmax(0, .48fr) minmax(0, .52fr);
  gap:clamp(1.6rem, 5vw, 5.4rem);
  margin-top:clamp(2.6rem, 5vw, 4.6rem);
}

.area-article__copy{
  display:grid;
  gap:1.05rem;
}

.area-article__copy:first-of-type p:first-child::first-letter{
  float:left;
  margin:.08em .18em 0 0;
  color:var(--editorial-gold, #b8923a);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(3.8rem, 6vw, 5.4rem);
  line-height:.72;
}

.area-detail .area-article__close.editorial-pull{
  max-width:860px;
  margin-top:clamp(2.35rem, 4.8vw, 4.25rem);
  --editorial-pull-border-top:1px solid rgba(184, 146, 58, .48);
  --editorial-pull-padding-top:clamp(1.05rem, 1.8vw, 1.35rem);
  --editorial-pull-color:var(--editorial-navy);
  --editorial-pull-font-size:clamp(1.65rem, 2.45vw, 2.25rem);
  --editorial-pull-letter-spacing:-.04em;
  --editorial-pull-line-height:1.06;
}

.area-article__close p{
  margin:0;
}

.area-detail .area-article__close.editorial-pull p{
  max-width:860px;
  color:var(--editorial-pull-color, var(--editorial-navy));
  font-family:var(--editorial-pull-font-family, "Cormorant Garamond", Georgia, serif);
  font-size:var(--editorial-pull-font-size, clamp(1.55rem, 2.25vw, 2.15rem));
  font-weight:var(--editorial-pull-font-weight, 300);
  letter-spacing:var(--editorial-pull-letter-spacing, -.04em);
  line-height:var(--editorial-pull-line-height, 1.03);
}

.area-related-cta{
  padding:clamp(5.2rem, 8.4vw, 7.4rem) 0;
  background:
    linear-gradient(90deg, var(--editorial-sand, #e8e1d0) 0 34%, var(--editorial-paper, #fbf8f1) 34% 100%);
  color:var(--editorial-ink, #1a1a2e);
}

.area-related-cta__frame{
  display:grid;
  gap:clamp(2.2rem, 4.8vw, 4.4rem);
  padding-top:clamp(2rem, 4vw, 3.6rem);
  border-top:1px solid rgba(12, 26, 61, .16);
}

.area-related-cta__intro{
  display:grid;
  grid-template-columns:minmax(0, .58fr) minmax(260px, .42fr);
  gap:clamp(1.6rem, 4.4vw, 4.4rem);
  align-items:end;
}

.area-related-cta__intro h2{
  max-width:12ch;
  color:var(--editorial-navy);
}

.area-related-cta__intro p:not(.editorial-eyebrow){
  max-width:520px;
  padding-top:1rem;
  border-top:1px solid rgba(184, 146, 58, .42);
  color:rgba(26, 26, 46, .66);
  font-size:.95rem;
  line-height:1.72;
}

.area-related-cta .editorial-eyebrow{
  color:var(--editorial-gold);
}

.area-related-cta__actions{
  display:grid;
  grid-template-columns:minmax(0, .54fr) minmax(260px, .46fr);
  gap:clamp(1.4rem, 4vw, 4rem);
  align-items:start;
  width:min(920px, 100%);
  margin:0 auto;
}

.area-action-group{
  display:grid;
  gap:.9rem;
}

.area-action-group__links{
  --editorial-action-rule-color:rgba(12, 26, 61, .14);
  --editorial-action-link-padding:.95rem 0;
  --editorial-action-link-color:var(--editorial-navy);
  --editorial-action-link-font-size:.68rem;
  --editorial-action-link-arrow-color:var(--editorial-gold);
}

.area-action-group--primary{
  padding:0;
  background:transparent;
  border:0;
}

@media (max-width:1000px){
  .area-detail .editorial-shell{
    width:var(--area-page-mobile);
  }

  .area-hero__grid,
  .area-market-read__grid,
  .area-article{
    grid-template-columns:1fr;
  }

  .area-hero{
    min-height:auto;
  }

  .area-hero__grid{
    min-height:680px;
  }

  .area-hero__note{
    max-width:520px;
  }

  .area-market-read__visual{
    margin-left:0;
  }

  .area-stat-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .area-stat:nth-child(2){
    border-right:0;
  }

  .area-stat:nth-child(-n+2){
    border-bottom:1px solid rgba(12, 26, 61, .12);
  }

  .area-related-cta{
    background:
      linear-gradient(180deg, var(--editorial-sand, #e8e1d0) 0 30%, var(--editorial-paper, #fbf8f1) 30% 100%);
  }

  .area-related-cta__intro,
  .area-related-cta__actions{
    grid-template-columns:1fr;
  }

  .area-article__rail{
    position:static;
  }
}

@media (max-width:640px){
  .area-detail h1{
    font-size:clamp(3.05rem, 16vw, 4.7rem);
  }

  .area-detail h2{
    font-size:clamp(2.55rem, 12vw, 3.9rem);
  }

  .area-hero__grid{
    min-height:620px;
    padding-top:92px;
  }

  .area-stat-grid{
    grid-template-columns:1fr;
  }

  .area-stat{
    border-right:0;
    border-bottom:1px solid rgba(12, 26, 61, .12);
  }

  .area-stat:last-child{
    border-bottom:0;
  }

  .area-article{
    width:var(--area-page-mobile);
    grid-template-columns:1fr;
  }

  .area-article__body{
    grid-template-columns:1fr;
  }

  .area-article__rail{
    position:static;
  }
}