/* Alternative editorial composition. The first proposal remains a separate Site. */
:root{--paper:#f6f5f0;--paper-2:#e9e7df;--dark:#1d2725}
.hero-image{background-image:url('assets/nueva-vivienda-jardin.jpeg');background-position:center 56%}
.hero-shade{background:linear-gradient(90deg,rgba(9,20,20,.76) 0%,rgba(9,20,20,.44) 43%,rgba(9,20,20,.02) 76%),linear-gradient(0deg,rgba(5,15,15,.43),transparent 32%)}
.hero h1{max-width:880px;font-size:clamp(64px,6.3vw,102px)}

/* The headline leaves the grid before the two photos enter from different edges. */
.manifesto{position:relative;padding-top:135px;padding-bottom:120px;background:#faf9f5}
.manifesto-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;padding:115px 0 85px}
.manifesto h2{grid-column:1/9;max-width:1000px;font-size:clamp(68px,6.8vw,118px)}
.manifesto-copy{grid-column:9/13;max-width:none;padding:155px 0 0 40px}
.manifesto-copy p:first-child{font-size:20px}
.manifesto-visual{position:relative;width:100%;height:780px}
.manifesto-image{position:absolute;right:0;top:0;width:67%;height:700px;background-image:url('assets/nueva-patio.jpeg');background-size:cover;background-position:center center}
.manifesto-image::after,.manifesto-image span{display:none}
.manifesto-inset{position:absolute;left:4%;top:245px;width:34%;height:445px;object-fit:cover;box-shadow:0 26px 60px rgba(20,33,29,.13)}

/* Project text and media alternate width and vertical alignment. */
.projects{background:#faf9f5;color:var(--ink);padding-top:110px;padding-bottom:130px}
.projects .section-index{border-color:var(--line)}
.projects-heading{padding:125px 0 105px;align-items:start}
.projects-heading h2{margin-left:13%;font-size:clamp(105px,11.4vw,183px)}
.projects-heading p{margin:25px 7% 0 0;max-width:245px}
.project-feature{display:grid;grid-template-columns:minmax(0,7.1fr) minmax(0,4.9fr);gap:0;border:0}
.project-feature .project-photo{height:800px}
.project-feature .project-photo img{object-position:center 52%}
.project-info{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:42px clamp(40px,5vw,95px) 55px;background:#eceae2}
.project-count,.project-location,.project-type{color:#5f6963}
.project-info>div{margin-top:auto}
.project-info h3{font-size:clamp(65px,5.7vw,93px);margin-bottom:19px}
.project-info>div>p:last-child{font-size:18px;line-height:1.47;max-width:440px}
.project-location{text-align:left}
.project-pair{grid-template-columns:minmax(0,4.7fr) minmax(0,7.3fr);gap:clamp(70px,9vw,170px);padding:155px 0 0}
.project-small:first-child{padding-left:10%}
.project-small .project-photo{height:630px}
.project-small:nth-child(2) .project-photo{height:475px}
.project-small-offset{padding-top:220px}
.project-small-info{border-color:var(--line)}
.project-small-info>span{color:#626c65}
.project-small h3{font-size:clamp(56px,5.3vw,80px)}
.project-small p{max-width:430px}
.project-gallery{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:10%;min-height:700px;margin-top:100px;border-top:1px solid var(--line);padding-top:90px}
.project-gallery img{width:100%;height:540px;object-fit:cover}
.project-gallery img:first-child{width:67%;margin-left:17%;object-position:center 45%}
.project-gallery img:last-child{height:390px;margin-top:240px;object-position:center 55%}

/* Reverse the portrait and place the biography on its own axis. */
.studio{background:#e9e7df;padding-top:130px;padding-bottom:180px}
.studio-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(55px,7vw,130px);align-items:start;padding-top:115px}
.studio-photo{grid-column:2;grid-row:1;padding-top:170px}
.studio-photo img{height:690px;object-position:55% center}
.studio-copy{grid-column:1;grid-row:1;max-width:720px;padding-left:7%}
.studio h2{font-size:clamp(104px,10.6vw,170px);margin-bottom:45px}
.studio-copy>p:not(.eyebrow){max-width:560px}
.studio blockquote{margin-left:15%;max-width:580px}

/* One large opening idea, two stacked decisions, and an offset image. */
.process{padding-top:120px;padding-bottom:170px}
.process-head{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:45px;padding:115px 0 110px}
.process-head .eyebrow{grid-column:1;grid-row:1}
.process-head h2{grid-column:2;grid-row:1;max-width:920px;margin-left:10%;font-size:clamp(75px,7.2vw,118px)}
.process-head>p:last-child{grid-column:2;margin-left:10%}
.process-grid{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);border-color:rgba(255,255,255,.3)}
.process-step{min-height:290px;padding:42px 50px 48px 0}
.process-step:first-child{grid-column:1;grid-row:1/3;min-height:580px;padding-right:20%;justify-content:flex-end}
.process-step:first-child>span{margin-bottom:auto}
.process-step:first-child h3{font-size:clamp(55px,5.2vw,80px)}
.process-step:nth-child(2),.process-step:nth-child(3){grid-column:2;padding:34px 5% 34px 9%;border-left:1px solid rgba(255,255,255,.3)}
.process-step:nth-child(2){grid-row:1}
.process-step:nth-child(3){grid-row:2;border-top:1px solid rgba(255,255,255,.3)}
.process-step:nth-child(2) h3,.process-step:nth-child(3) h3{font-size:clamp(42px,4vw,64px)}
.process-step:nth-child(2) p,.process-step:nth-child(3) p{max-width:530px}
.process-media{width:71%;height:620px;margin:120px 0 0 auto}
.process-media p{max-width:670px}

.contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12%;padding-top:145px}
.contact-grid>div:last-child{padding-top:150px}

/* The entrances follow the offset columns without moving the reading order. */
.manifesto-copy.reveal,.project-small-offset.reveal,.studio-photo.reveal{transform:translate(42px,35px)}
.manifesto-copy.reveal.is-visible,.project-small-offset.reveal.is-visible,.studio-photo.reveal.is-visible{transform:none}

@media(max-width:1100px){
  .manifesto-grid{padding-top:85px}
  .manifesto h2{font-size:clamp(65px,6.5vw,95px)}
  .manifesto-copy{padding-top:100px;padding-left:24px}
  .project-feature .project-photo{height:700px}
  .project-info{padding:32px 40px}
  .project-pair{gap:70px}
  .studio-grid{gap:55px}
  .studio-copy{padding-left:0}
  .studio h2{font-size:clamp(85px,9vw,130px)}
}
@media(max-width:760px){
  .hero-image{background-position:60% center}
  .hero-shade{background:linear-gradient(90deg,rgba(9,20,20,.7),rgba(9,20,20,.15)),linear-gradient(0deg,rgba(5,15,15,.65),transparent 60%)}
  .hero h1{font-size:clamp(50px,12vw,76px)}
  .manifesto{padding-top:76px;padding-bottom:100px}
  .manifesto-grid{display:block;padding:64px 0 55px}
  .manifesto h2{font-size:clamp(55px,12.5vw,86px)}
  .manifesto-copy{padding:50px 6% 0 18%}
  .manifesto-visual{height:490px}
  .manifesto-image{width:80%;height:370px}
  .manifesto-inset{left:0;top:235px;width:47%;height:245px}
  .projects{padding-top:80px;padding-bottom:90px}
  .projects-heading{padding:70px 0 50px}
  .projects-heading h2{margin-left:0;font-size:clamp(82px,18vw,130px)}
  .projects-heading p{margin:22px 0 0 28%;max-width:220px}
  .project-feature{display:block}
  .project-feature .project-photo{height:470px}
  .project-info{min-height:0;padding:32px 27px 40px}
  .project-info>div{margin-top:24px}
  .project-info h3{font-size:67px}
  .project-info>div>p:last-child{font-size:16px}
  .project-location{margin-top:12px}
  .project-pair{display:block;padding-top:85px}
  .project-small:first-child{padding-left:0;width:76%}
  .project-small .project-photo{height:430px}
  .project-small-offset{width:83%;margin-left:auto;padding-top:100px}
  .project-small:nth-child(2) .project-photo{height:330px}
  .project-small h3{font-size:55px}
  .project-gallery{min-height:0;margin-top:95px;padding-top:45px;gap:6%}
  .project-gallery img:first-child{width:100%;height:300px;margin:0}
  .project-gallery img:last-child{height:190px;margin-top:120px}
  .studio{padding-top:85px;padding-bottom:100px}
  .studio-grid{display:flex;flex-direction:column;gap:45px;padding-top:70px}
  .studio-copy{order:1}
  .studio-photo{order:2;width:80%;margin-left:auto;padding-top:0}
  .studio-photo img{height:430px}
  .studio h2{font-size:clamp(89px,18vw,135px)}
  .studio blockquote{margin-left:10%}
  .process{padding-top:90px;padding-bottom:110px}
  .process-head{display:block;padding:70px 0 55px}
  .process-head h2,.process-head>p:last-child{margin-left:0}
  .process h2{font-size:clamp(56px,11vw,84px)}
  .process-grid{display:block}
  .process-step:first-child{min-height:330px;padding:35px 12% 35px 0}
  .process-step:nth-child(2),.process-step:nth-child(3){padding:34px 0;border-left:0}
  .process-step:nth-child(2){border-top:1px solid rgba(255,255,255,.3)}
  .process-step:first-child h3{font-size:60px}
  .process-media{width:88%;height:360px;margin:75px 0 0 auto}
  .process-media p{font-size:32px}
  .contact-grid{display:block;padding-top:75px}
  .contact-grid>div:last-child{padding-top:0}
}
@media(max-width:400px){
  .manifesto-copy{padding-left:8%}
  .project-feature .project-photo{height:390px}
  .project-small .project-photo{height:370px}
  .project-small:nth-child(2) .project-photo{height:290px}
  .project-gallery img:first-child{height:250px}
  .project-gallery img:last-child{height:170px}
}
@media(prefers-reduced-motion:reduce){
  .manifesto-copy.reveal,.project-small-offset.reveal,.studio-photo.reveal{transform:none}
}