/* ATREZZO / TEAM HODNETT · A SENSE OF PLACE
   Immersive, full-bleed editorial location stories.
   Original six communities, destinations and scroll selection are preserved.
   A sticky photo backdrop, native scroll and right-hand legibility gradient.
   Without script / with reduced motion, the original image-and-article layout remains. */

/* The source introduction now lives beside the index for a clean non-JS fallback. */
.place-index.atg1:not(.is-immersive) .atg1-index__content {min-width:0}
.place-index.atg1:not(.is-immersive) .place-index-intro {display:block;max-width:100%;margin:0 0 44px}
.place-index.atg1:not(.is-immersive) .place-index-intro h2 {margin:17px 0 20px}
.place-index.atg1:not(.is-immersive) .place-index-intro p {margin:0;max-width:480px}

.place-index.atg1.is-immersive:not(.is-reduced){
  background:#0a0d10;
  color:#fff;
  --place-photo-zoom:1.04;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index{
  background:#0a0d10;
  padding:0!important;
  color:#fff;
  overflow:visible!important;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__layout{
  position:relative;
  display:block!important;
  width:100%;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  isolation:isolate;
  background:#0a0d10;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage{
  position:sticky!important;
  top:0!important;
  display:block!important;
  width:100%;
  height:100svh!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden;
  z-index:0;
  background:#13171a;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transform:scale(1.095);
  transition:opacity .8s cubic-bezier(.22,.65,.2,1), transform .18s linear;
  will-change:opacity,transform;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__photo.is-active{
  opacity:1;
  transform:scale(var(--place-photo-zoom,1.04));
}
/* The subject remains legible on the left; the copy sits on a blackened right. */
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(2,4,5,.01) 0%,
      rgba(2,4,5,.06) 32%,
      rgba(2,4,5,.30) 52%,
      rgba(2,4,5,.58) 72%,
      rgba(2,4,5,.73) 100%),
    linear-gradient(0deg,rgba(0,0,0,.23),transparent 30%,rgba(0,0,0,.05));
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage-meta{
  z-index:2;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(22px,3.5svh,45px);
  color:#f6f4ef;
  font-size:10px;
  letter-spacing:.17em;
}
.place-index.atg1.is-immersive:not(.is-reduced) .sample-image-note{
  z-index:2;
  left:var(--gutter);
  bottom:clamp(9px,1.8svh,23px);
  font-size:9px;
  color:rgba(255,255,255,.58);
}
/* Pull the copy into the sticky photo's space; normal scrolling drives chapters. */
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__content{
  position:relative;
  z-index:3;
  margin-top:-100svh;
  min-width:0;
  pointer-events:none;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro,
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entries{
  pointer-events:auto;
  margin-left:auto;
  margin-right:var(--gutter);
  width:min(520px,43vw);
  max-width:calc(100% - var(--gutter) - var(--gutter));
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
  min-height:100svh;
  padding:clamp(100px,15svh,180px) 0 clamp(100px,12svh,155px);
  margin-bottom:0!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:0;
  color:#fff;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro .eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  font-weight:600;
  color:#d6bd89;
  margin:0 0 26px;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro h2{
  font:400 clamp(44px,4.7vw,74px)/1.08 var(--sans);
  letter-spacing:-.06em;
  color:#fff;
  margin:0 0 27px!important;
  text-wrap:balance;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro p{
  color:rgba(255,255,255,.84);
  font-size:clamp(14px,1.08vw,17px);
  line-height:1.85;
  max-width:480px;
  margin:0;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entries{
  border-top:1px solid rgba(255,255,255,.26);
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry{
  min-height:85svh;
  border-bottom:1px solid rgba(255,255,255,.26);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  gap:clamp(14px,2.8svh,23px);
  padding:clamp(90px,12svh,150px) 0;
  background:transparent;
  scroll-margin-top:0;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry:last-child{border-bottom:0}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-header{
  color:#d8c397;
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-header svg{
  color:rgba(255,255,255,.83);
  width:22px;
  height:22px;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry h3,
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry.is-active h3{
  font:400 clamp(45px,4.4vw,75px)/1.07 var(--sans);
  letter-spacing:-.055em;
  color:#fff;
  margin:0;
  max-width:100%;
  transform:none;
  transition:opacity .35s ease, color .35s ease;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry:not(.is-active) h3{opacity:.78}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry h3 a.community-name{
  display:inline;
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  border:0;
  padding:0;
  text-transform:none;
  text-decoration:none;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry p{
  color:rgba(255,255,255,.80);
  font-size:clamp(14px,1.07vw,16px);
  line-height:1.85;
  max-width:440px;
  margin:0;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry .place-guide-link{
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  display:inline-flex;
  gap:17px;
  align-items:center;
  margin-top:7px;
  border-bottom:1px solid rgba(255,255,255,.75);
  padding:0 0 10px;
  text-transform:uppercase;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry .place-guide-link:hover,
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry h3 a.community-name:hover{
  color:#e4ca96;
  border-color:#e4ca96;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__mobile-photo{display:none!important}
.place-index.atg1.is-immersive:not(.is-reduced) :is(a,button):focus-visible{
  outline:2px solid #eed8a5;
  outline-offset:6px;
}
/* Tablets: keep a right-side text column without squeezing navigation. */
@media(max-width:1023px) and (min-width:768px){
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro,
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entries{
    width:min(490px,50vw);
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage:after{
    background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.78) 100%);
  }
}
/* Phones: full-screen photos still transition on scroll. The gradient comes
   up from below because a right-only gradient would leave narrow copy illegible. */
@media(max-width:767px){
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage:after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,.28) 25%,
      rgba(0,0,0,.49) 49%,
      rgba(0,0,0,.83) 77%,
      rgba(0,0,0,.92) 100%);
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__photo{
    object-position:50% center;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro,
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entries{
    width:auto;
    max-width:none;
    margin-left:24px;
    margin-right:24px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
    min-height:100svh;
    padding:105px 0 85px;
    justify-content:flex-end;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro .eyebrow{
    font-size:10px;
    margin-bottom:20px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro h2{
    font-size:clamp(40px,10vw,54px);
    letter-spacing:-.052em;
    line-height:1.1;
    margin:0 0 24px!important;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro p{
    font-size:14px;
    line-height:1.72;
    max-width:340px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry{
    min-height:94svh;
    padding:110px 0 95px;
    justify-content:flex-end;
    gap:16px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry h3,
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry.is-active h3{
    font-size:clamp(36px,9.4vw,50px);
    letter-spacing:-.05em;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry p{
    font-size:13px;
    line-height:1.73;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-header{
    font-size:9px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage-meta{
    left:24px;right:24px;bottom:22px;
    font-size:9px;
  }
  .place-index.atg1.is-immersive:not(.is-reduced) .sample-image-note{
    left:24px;bottom:8px;font-size:8px;
  }
}
/* Reduced motion: original article list and inline photographs stay usable.
   The active image is not pinned and no scrolling animation runs. */
.place-index.atg1.is-reduced .atg1-index__content{position:relative;margin:0}
.place-index.atg1.is-reduced .place-index-intro{display:block;margin:0 0 40px;max-width:760px}
.place-index.atg1.is-reduced .place-index-intro h2{margin:20px 0}
.place-index.atg1.is-reduced .place-index-intro p{margin:0}
.place-index.atg1.is-reduced .atg1-index__entries{width:100%;max-width:100%}
.place-index.atg1.is-reduced .atg1-index__entry{min-height:0}
.place-index.atg1.is-reduced .atg1-index__mobile-photo{display:block;max-height:480px}
@media(max-width:767px){
  .place-index.atg1.is-reduced .atg1-index{padding:65px 24px}
  .place-index.atg1:not(.is-immersive) .place-index-intro{display:block;margin:0 0 35px}
}
@media(prefers-reduced-motion:reduce){
  .place-index.atg1 .atg1-index__photo,
  .place-index.atg1 .atg1-index__entry h3{transition:none!important;transform:none!important}
}

/* Verified photo credit without obstructing the immersive viewport. */
.place-index .place-photo-credits{
  margin:0;
  padding:13px var(--gutter);
  background:#0e1012;
  color:rgba(255,255,255,.68);
  font:400 10px/1.65 var(--sans,Arial,sans-serif);
  letter-spacing:.01em;
}
.place-index .place-photo-credits a{
  color:#ead3a3;
  text-decoration:underline;
  text-underline-offset:3px;
}
.place-index .place-photo-credits a:hover,.place-index .place-photo-credits a:focus-visible{color:#fff}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry h3,
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry p,
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro h2,
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro p{
  text-shadow:0 2px 19px rgba(0,0,0,.38);
}
@media(max-width:767px){
  .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__stage:after{
    background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.17) 25%,rgba(0,0,0,.36) 49%,rgba(0,0,0,.71) 77%,rgba(0,0,0,.85) 100%);
  }
  .place-index .place-photo-credits{padding:12px 24px;font-size:9px}
}

/* Optional user-supplied Westlake residence feature, shown only when the file exists. */
.westlake-architecture-photo{margin:0 0 clamp(30px,4vw,55px);padding:0;max-width:100%}
.westlake-architecture-photo img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover;object-position:center}
.westlake-architecture-photo figcaption{padding-top:13px;color:#727272;font:400 11px/1.6 var(--sans,Arial,sans-serif);letter-spacing:.04em}


/* NOV 2026 — Separate introductory photography and unhurried community stories.
   No scroll hijacking: native scrolling and a sticky reading column create a
   genuine pause, while the background has enough distance for subtle zoom. */
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__photo{
 transition:opacity 1.15s cubic-bezier(.22,.65,.2,1),transform .22s linear;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry{
 display:block;
 position:relative;
 box-sizing:border-box;
 min-height:172svh;
 padding:0;
 background:transparent;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-content{
 position:sticky;
 top:clamp(132px,23svh,248px);
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 justify-content:center;
 gap:clamp(14px,2.8svh,23px);
 width:100%;
 max-width:100%;
 padding:24px 0 clamp(70px,10svh,115px);
 box-sizing:border-box;
}
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-content h3,
.place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-content p{
 margin:0;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
 min-height:115svh;
}
/* Keep the mobile reading block above the bottom edge and fully legible. */
@media(max-width:767px){
 .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry{
  min-height:150svh;
  padding:0;
 }
 .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-content{
  top:clamp(110px,28svh,235px);
  padding:22px 0 75px;
  gap:16px;
 }
 .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
  min-height:110svh;
 }
}
@media(max-width:767px) and (max-height:680px){
 .place-index.atg1.is-immersive:not(.is-reduced) .atg1-index__entry-content{
  top:96px;
  gap:12px;
 }
}
@media(prefers-reduced-motion:reduce){
 .place-index.atg1 .atg1-index__entry-content{position:static!important}
}
.place-index.atg1.is-reduced .atg1-index__entry-content{
 position:static!important;
 width:100%;
 padding:0;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:18px;
}


/* 2026-11-09 | Introductory reading hold.
   The introduction now uses the same native sticky/pause model as every
   community: the photograph slowly zooms while the text stays readable.
   Scrolling remains entirely user-controlled. */
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
 display:block!important;
 position:relative;
 box-sizing:border-box;
 min-height:176svh;
 padding:0;
}
.place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro__content{
 position:sticky;
 top:clamp(132px,23svh,245px);
 width:100%;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 justify-content:center;
 gap:0;
 padding:24px 0 clamp(80px,10svh,120px);
 box-sizing:border-box;
}
@media(max-width:767px){
 .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro{
  min-height:163svh;
  padding:0;
 }
 .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro__content{
  top:clamp(120px,31svh,260px);
  padding:20px 0 clamp(72px,9svh,95px);
 }
}
@media(max-width:767px) and (max-height:680px){
 .place-index.atg1.is-immersive:not(.is-reduced) .place-index-intro__content{
  top:100px;
  padding-bottom:60px;
 }
}
.place-index.atg1.is-reduced .place-index-intro__content{
 position:static!important;
 display:block;
 padding:0;
}
@media(prefers-reduced-motion:reduce){
 .place-index.atg1 .place-index-intro__content{position:static!important}
}