:root{--ink:#181814;--paper:#f3f0e8;--line:rgba(24,24,20,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}h1,h2{font-family:"Newsreader",serif;font-weight:400;letter-spacing:-.045em;line-height:.95}h1{font-size:clamp(3.8rem,6.7vw,7rem)}h2{font-size:clamp(2.8rem,5vw,5.2rem)}p{line-height:1.7}.project-header{position:absolute;z-index:10;top:0;width:100%;padding:20px 4vw;display:flex;align-items:center;justify-content:space-between;color:white}.project-header img{width:140px;filter:invert(1)}.project-header nav{display:flex;gap:2rem;text-transform:uppercase;letter-spacing:.13em;font-size:.67rem}.hero{min-height:720px;height:100svh;display:grid;grid-template-columns:42% 58%;background:#ddd}.hero-copy{padding:145px 4vw 8vh;display:flex;flex-direction:column;justify-content:flex-end;color:white;background:linear-gradient(135deg,#4d504a,#7d7f78 50%,#d7d5cf)}.hero-copy .kicker,.section-copy .kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.67rem;font-weight:600}.hero-copy p{max-width:470px}.hero-image{margin:0;overflow:hidden}.hero-image img{height:100%;object-fit:cover}.gallery-link{display:inline-flex;gap:2rem;align-items:center;width:max-content;border-bottom:1px solid;padding-bottom:.4rem;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}.story{padding:7rem 4vw;display:grid;grid-template-columns:.72fr 1.7fr;gap:6vw}.section-copy{position:sticky;top:3rem;align-self:start}.section-copy p{max-width:440px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gallery figure{margin:0;height:590px;overflow:hidden}.gallery img{height:100%;object-fit:cover}.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.5rem 4vw}.facts div{text-align:center;padding:0 2vw;border-right:1px solid var(--line)}.facts div:last-child{border-right:0}.facts h3{text-transform:uppercase;letter-spacing:.14em;font-size:.67rem}.facts p{font-size:.9rem;margin-bottom:.2rem}.facts small{color:#74756f}.cta{display:grid;grid-template-columns:1fr 1fr;min-height:560px}.cta img{height:100%;object-fit:cover}.cta-copy{padding:7vw;background:#eae5da;display:flex;flex-direction:column;justify-content:center}.cta-button{background:var(--ink);color:white;padding:1rem 1.3rem;width:max-content;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}.project-footer{padding:2rem 4vw;display:flex;justify-content:space-between;font-size:.75rem}@media(max-width:850px){.project-header nav{display:none}.project-header img{width:110px}.hero{height:auto;grid-template-columns:1fr}.hero-copy{min-height:560px;padding:130px 6vw 60px}.hero-image{height:65vw;min-height:380px}.story{grid-template-columns:1fr;padding-top:5rem}.section-copy{position:static}.gallery{grid-template-columns:1fr}.gallery figure{height:auto}.facts{grid-template-columns:1fr 1fr}.facts div{padding:2rem;border-bottom:1px solid var(--line)}.cta{grid-template-columns:1fr}.cta img{height:420px}.project-footer{flex-direction:column;gap:.8rem}}

.exterior-gallery figure:nth-child(3n){
  grid-column:1 / -1;
  height:520px;
}

@media(max-width:850px){
  .exterior-gallery figure:nth-child(3n){
    grid-column:auto;
    height:auto;
  }
}


/* Accessible project-page mobile navigation */
.project-menu-toggle{
  display:none;
  min-width:48px;
  min-height:48px;
  padding:.7rem .85rem;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(20,20,18,.2);
  color:white;
  font:inherit;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
}

.project-nav a,
.gallery-link,
.cta-button,
.project-footer a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

@media(max-width:850px){
  .project-header{
    padding:14px 5vw;
  }

  .project-header img{
    width:104px;
  }

  .project-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:12;
  }

  .project-nav{
    display:none !important;
    position:absolute;
    top:76px;
    left:5vw;
    right:5vw;
    padding:1rem;
    gap:.25rem !important;
    flex-direction:column;
    background:rgba(20,20,18,.96);
    box-shadow:0 16px 35px rgba(0,0,0,.22);
  }

  .project-nav.open{
    display:flex !important;
  }

  .project-nav a{
    width:100%;
    padding:.9rem .75rem;
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .project-nav a:last-child{
    border-bottom:0;
  }

  .hero-copy{
    min-height:500px;
    padding:115px 6vw 48px;
  }

  .hero-copy h1{
    font-size:clamp(3.1rem,14vw,5.2rem);
  }

  .hero-copy p{
    max-width:36rem;
  }

  .story{
    padding:4.5rem 6vw;
    gap:3rem;
  }

  .facts div{
    min-height:155px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .cta-copy{
    padding:4.5rem 7vw;
  }

  .cta-button{
    padding:1rem 1.2rem;
  }
}

@media(max-width:560px){
  .project-header{
    padding-left:4vw;
    padding-right:4vw;
  }

  .project-nav{
    left:4vw;
    right:4vw;
  }

  .hero-copy{
    min-height:450px;
    padding:105px 6vw 42px;
  }

  .hero-image{
    min-height:330px;
    height:78vw;
  }

  .facts{
    grid-template-columns:1fr;
    padding:0 6vw;
  }

  .facts div{
    min-height:auto;
    padding:1.65rem .5rem;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .facts div:last-child{
    border-bottom:0;
  }

  .cta img{
    height:72vw;
    min-height:300px;
    max-height:420px;
  }

  .project-footer{
    padding:1.5rem 6vw 2rem;
  }
}

@media(max-width:850px) and (max-height:700px){
  .hero-copy{
    min-height:410px;
    padding-top:100px;
    padding-bottom:36px;
  }

  .hero-copy h1{
    font-size:clamp(2.85rem,11vw,4.5rem);
    margin-bottom:.8rem;
  }

  .hero-copy p{
    margin-bottom:.9rem;
    line-height:1.55;
  }
}


/* Final project-page art-direction pass */
.project-header{
  backdrop-filter:blur(2px) saturate(110%);
}

.hero-copy h1,
.section-copy h2,
.cta-copy h2{
  text-wrap:balance;
}

.hero-copy p{
  max-width:34rem;
}

.gallery figure{
  background:#d8d1c4;
  overflow:hidden;
}

.gallery figure img,
.cta>img,
.hero-image img{
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

.gallery figure:hover img{
  transform:scale(1.018);
}

.story{
  column-gap:clamp(3rem,8vw,10rem);
}

.section-copy p{
  color:#33342f;
}

.facts div{
  border-color:rgba(24,24,20,.14);
}

.cta-copy{
  align-self:center;
}

.cta-button{
  transition:transform .22s ease,opacity .22s ease;
}

.cta-button:hover{
  transform:translateY(-2px);
  opacity:.8;
}

.project-footer{
  border-top:1px solid rgba(24,24,20,.14);
}

@media(max-width:850px){
  .hero-copy h1{
    max-width:9.5ch;
  }

  .story{
    gap:2.5rem;
  }

  .gallery{
    gap:1rem;
  }
}


.project-status-copy{
  margin-top:1.5rem;
  padding-left:1.2rem;
  border-left:2px solid var(--line);
  font-style:italic;
  color:var(--muted);
}

.little-library-gallery figure:last-child{
  grid-column:1 / -1;
  height:620px;
}

.little-library-gallery figure:last-child img{
  object-position:center 48%;
}

@media(max-width:850px){
  .little-library-gallery figure:last-child{
    grid-column:auto;
    height:auto;
  }
}


/* Full-image gallery treatment and lightbox */
.exterior-gallery{
  align-items:start;
}

.exterior-gallery figure,
.exterior-gallery figure:nth-child(3n){
  height:auto;
  grid-column:auto;
  background:transparent;
  cursor:zoom-in;
}

.exterior-gallery figure img{
  width:100%;
  height:auto;
  object-fit:contain;
  transform:none;
}

.exterior-gallery figure:hover img{
  transform:none;
  opacity:.92;
}

.gallery figure{
  position:relative;
  cursor:zoom-in;
}

.gallery figure::after{
  content:"View full image";
  position:absolute;
  right:.8rem;
  bottom:.8rem;
  padding:.55rem .7rem;
  background:rgba(20,20,18,.78);
  color:white;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}

.gallery figure:hover::after,
.gallery figure:focus-within::after{
  opacity:1;
  transform:translateY(0);
}

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,3vw,3rem);
  background:rgba(12,12,10,.94);
}

.image-lightbox.open{
  display:flex;
}

.image-lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:94vw;
  max-height:90vh;
  object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,.38);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  min-width:48px;
  min-height:48px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(20,20,18,.56);
  color:white;
  font:inherit;
  cursor:pointer;
}

.lightbox-close{
  top:1rem;
  right:1rem;
  font-size:1.6rem;
}

.lightbox-prev,
.lightbox-next{
  top:50%;
  transform:translateY(-50%);
  font-size:1.5rem;
}

.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

.lightbox-caption{
  position:absolute;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%);
  max-width:min(760px,80vw);
  color:rgba(255,255,255,.82);
  text-align:center;
  font-size:.78rem;
}

body.lightbox-open{
  overflow:hidden;
}

@media(max-width:850px){
  .gallery figure::after{
    display:none;
  }

  .lightbox-prev{left:.35rem}
  .lightbox-next{right:.35rem}
  .lightbox-close{top:.35rem;right:.35rem}
  .image-lightbox{padding:3.5rem .6rem 3rem}
  .image-lightbox img{max-width:96vw;max-height:84vh}
}


/* Design-before-build process */
.design-process{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(3rem,7vw,8rem);
  padding:clamp(5rem,9vw,10rem) 6vw;
  background:#ebe7dc;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.design-process-copy{
  align-self:center;
  max-width:42rem;
}

.design-process-copy h2{
  margin:1rem 0 1.75rem;
  font-family:"Newsreader",serif;
  font-size:clamp(3.2rem,5vw,6rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.045em;
}

.design-process-copy p:not(.kicker){
  color:var(--muted);
  line-height:1.75;
}

.design-process-copy p + p{
  margin-top:1.1rem;
}

.design-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:start;
}

.design-comparison figure{
  margin:0;
}

.design-comparison img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:#d5d0c4;
}

.design-comparison figcaption,
.gallery-with-design figcaption{
  padding-top:.7rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.gallery-with-design figure:has(figcaption){
  height:auto !important;
  background:transparent;
}

.gallery-with-design figure:has(figcaption) img{
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:#dedad0;
}

@media(max-width:900px){
  .design-process{
    grid-template-columns:1fr;
    gap:3.5rem;
    padding:5rem 6vw;
  }
}

@media(max-width:620px){
  .design-comparison{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .design-process-copy h2{
    font-size:clamp(3rem,13vw,4.4rem);
  }
}


/* Unified site navigation: project pages now match the homepage menu. */
.project-nav .project-nav-cta{
  border:1px solid rgba(255,255,255,.7);
  padding:.8rem 1rem;
}

@media(max-width:850px){
  .project-nav{
    padding:2rem 4vw;
    gap:0 !important;
  }

  .project-nav a{
    padding:1.25rem .1rem;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:none;
  }

  .project-nav .project-nav-cta{
    margin-top:1.35rem;
    padding:1rem;
    border:1px solid rgba(255,255,255,.7);
    text-transform:none;
  }
}