/* The opening project story: an editorial collage, in ordinary vertical flow. */
.project-introduction { background: #fff; color: #000; padding: clamp(80px,8.333vw,160px) var(--gutter) clamp(80px,8.333vw,160px); overflow: clip; scroll-margin-top: 96px; }
.intro-composition { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); column-gap: clamp(20px,2.083vw,40px); row-gap: clamp(64px,6.25vw,120px); max-width: 1680px; margin-inline: auto; align-items: start; }
.intro-welcome { grid-column: 2 / 12; grid-row: 1; max-width: 1280px; font-size: clamp(34px,3.333vw,64px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-transform: uppercase; margin-block-end: 16px; }
.intro-photo { min-width: 0; position: relative; margin: 0; overflow: hidden; background: #fff; }
.intro-photo-mask,.intro-photo-drift { width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden; }
.intro-photo img { position: absolute; inset-inline-start: 0; inset-block-start: -6%; width: 100%; height: 112%; object-fit: cover; }
.intro-interior { grid-column: 1 / 5; grid-row: 2; aspect-ratio: 4 / 5; margin-block-start: clamp(80px,8.333vw,160px); }
.intro-interior img { object-position: 44% center; }
.intro-entrance { grid-column: 6 / 13; grid-row: 2; aspect-ratio: 3 / 2; }
.intro-belonging { grid-column: 2 / 6; grid-row: 3; max-width: 460px; margin-block-start: clamp(24px,3.333vw,64px); }
.intro-copy { font-size: clamp(20px,1.25vw,24px); line-height: 1.5; font-weight: 300; }
.intro-family { grid-column: 7 / 13; grid-row: 3; aspect-ratio: 5 / 4; }
.intro-family img { object-position: 51% center; }
.intro-community { grid-column: 1 / 8; grid-row: 4; max-width: 950px; font-size: clamp(36px,3.75vw,72px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; text-transform: uppercase; margin-block-start: clamp(40px,5.208vw,100px); }
.intro-fountain { grid-column: 9 / 13; grid-row: 4; aspect-ratio: 4 / 5; margin-block-start: 0; }
.intro-fountain img { object-position: 65% center; }
.intro-courtyard { grid-column: 2 / 8; grid-row: 5; aspect-ratio: 3 / 2; }
.intro-closing { grid-column: 9 / 13; grid-row: 5; align-self: center; max-width: 420px; }
.intro-photo.is-revealing .intro-photo-mask,.intro-photo.is-revealing .intro-photo-drift { will-change: transform; }
.intro-photo.is-unavailable { background: #b9bdaf; }
.intro-photo.is-unavailable .intro-photo-mask { visibility: visible !important; transform: none !important; }
.intro-photo.is-unavailable .intro-photo-drift { transform: none !important; }
html[dir='rtl'] .intro-welcome,html[dir='rtl'] .intro-community { text-transform: none; letter-spacing: 0; line-height: 1.3; }
html[dir='rtl'] .intro-copy { line-height: 1.7; }
@media(min-width:1921px) { .project-introduction { padding-inline: max(var(--gutter),calc((100vw - 1680px)/2)); } }
@media(max-width:1199px) and (min-width:900px) { .intro-welcome { grid-column: 1 / 12; } .intro-belonging { grid-column: 1 / 6; } .intro-community { font-size: 42px; } .intro-closing { grid-column: 8 / 13; } }
@media(max-width:899px) {
  .project-introduction { padding: 88px 24px; }
  .intro-composition { grid-template-columns: repeat(6,minmax(0,1fr)); column-gap: 24px; row-gap: 64px; }
  .intro-welcome { grid-column: 1 / 7; grid-row: 1; font-size: clamp(30px,4.8vw,44px); margin-block-end: 0; }
  .intro-interior { grid-column: 1 / 3; grid-row: 2; margin-block-start: 80px; aspect-ratio: 3 / 4; }
  .intro-entrance { grid-column: 3 / 7; grid-row: 2; aspect-ratio: 4 / 3; }
  .intro-belonging { grid-column: 2 / 7; grid-row: 3; margin: 0; max-width: 540px; }
  .intro-family { grid-column: 1 / 6; grid-row: 4; }
  .intro-community { grid-column: 1 / 7; grid-row: 5; margin: 0; font-size: clamp(34px,5.7vw,48px); max-width: 680px; }
  .intro-fountain { grid-column: 4 / 7; grid-row: 6; margin: 0; }
  .intro-courtyard { grid-column: 1 / 5; grid-row: 7; margin-block-start: -40px; aspect-ratio: 4 / 3; }
  .intro-closing { grid-column: 2 / 7; grid-row: 8; max-width: 520px; }
}
@media(max-width:599px) {
  .project-introduction { padding: 72px 20px; }
  .intro-composition { column-gap: 12px; row-gap: 40px; }
  .intro-welcome { font-size: clamp(26px,6.9vw,36px); line-height: 1.16; }
  .intro-interior { grid-column: 1 / 4; grid-row: 3; margin-block-start: -16px; aspect-ratio: 4 / 5; }
  .intro-entrance { grid-column: 2 / 7; grid-row: 2; aspect-ratio: 4 / 3; }
  .intro-belonging { grid-column: 1 / 7; grid-row: 4; margin-block: 8px; }
  .intro-copy { font-size: 18px; line-height: 1.5; }
  .intro-family { grid-column: 1 / 7; grid-row: 5; }
  .intro-community { grid-row: 6; font-size: clamp(30px,8vw,42px); margin-block: 16px; }
  .intro-fountain { grid-column: 3 / 7; grid-row: 7; aspect-ratio: 4 / 5; }
  .intro-courtyard { grid-column: 1 / 6; grid-row: 8; margin-block-start: 0; aspect-ratio: 4 / 3; }
  .intro-closing { grid-column: 1 / 7; grid-row: 9; margin-block: 8px; }
}