/* Clean homepage layout — version 14 */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body:has(.home-main){overflow:hidden}
.home-main{height:100svh;min-height:560px}
.home-stage{
  position:relative;
  isolation:isolate;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
}
.home-hero{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:76px 24px 12px;
  overflow:hidden;
  text-align:center;
}
.hero-lockup{
  position:static;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(100%,1180px);
  max-height:100%;
  min-width:0;
  margin:0 auto;
  transform:none;
}
.hero-logo{
  flex:0 1 auto;
  display:block;
  width:clamp(120px,13vw,230px);
  max-height:31vh;
  height:auto;
  margin:0 auto clamp(-28px,-1.8vw,-14px);
  object-fit:contain;
  opacity:.14;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.55));
}
.hero-copy{
  position:static;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  transform:none;
}
.home-hero .hero-copy .eyebrow{
  order:1;
  width:100%;
  max-width:100%;
  margin:0 0 .65rem;
  padding:0 8px;
  font-size:clamp(.54rem,.75vw,.7rem);
  line-height:1.35;
  letter-spacing:.18em;
  white-space:normal;
}
.home-hero .hero-copy h1{
  order:2;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:baseline;
  gap:.18em;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  font-size:clamp(4rem,7.8vw,8.6rem);
  line-height:.82;
  letter-spacing:-.028em;
  white-space:nowrap;
  transform:none;
}
.home-hero .hero-copy h1 span{display:inline;min-width:0}
.home-hero .hero-copy .hero-line{
  order:3;
  width:min(100%,38rem);
  max-width:100%;
  margin:.78rem auto 0;
  padding:0 12px;
  font-size:clamp(.96rem,1.25vw,1.28rem);
  line-height:1.3;
  white-space:normal;
}
.home-featured{
  position:relative;
  z-index:3;
  min-width:0;
  padding:0 4vw clamp(28px,4vh,48px);
}
.home-featured-heading{margin:0 auto 9px}
.home-carousel .carousel-track{grid-auto-columns:min(29vw,430px);padding-inline:52px}
.home-carousel .project-slide .art{aspect-ratio:16/8.5}

@media(max-width:1100px){
  .home-hero{padding:68px 20px 10px}
  .hero-lockup{width:min(100%,720px)}
  .hero-logo{width:clamp(120px,23vw,220px);max-height:27vh;margin-bottom:-20px}
  .home-hero .hero-copy h1{
    flex-direction:column;
    align-items:center;
    gap:0;
    font-size:clamp(3rem,9.2vw,5.8rem);
    line-height:.78;
    white-space:normal;
  }
  .home-hero .hero-copy h1 span{display:block}
  .home-hero .hero-copy .hero-line{font-size:clamp(.92rem,2vw,1.14rem);margin-top:.72rem}
  .home-carousel .carousel-track{grid-auto-columns:min(52vw,430px);padding-inline:4vw}
  .home-featured{padding-inline:20px;padding-bottom:clamp(26px,3.5vh,42px)}
}

@media(max-width:600px){
  .home-main{min-height:540px}
  .home-hero{padding:62px 14px 6px}
  .hero-lockup{width:100%}
  .hero-logo{width:clamp(108px,36vw,158px);max-height:22vh;margin-bottom:-14px}
  .home-hero .hero-copy .eyebrow{margin-bottom:.48rem;font-size:.5rem;letter-spacing:.14em}
  .home-hero .hero-copy h1{font-size:clamp(2.4rem,12vw,3.35rem);line-height:.78;letter-spacing:-.018em}
  .home-hero .hero-copy .hero-line{max-width:20rem;margin-top:.58rem;font-size:clamp(.84rem,3.6vw,.98rem);line-height:1.25}
  .home-featured{padding:0 16px 22px}
  .home-featured-heading{margin-bottom:7px}
  .home-carousel .carousel-track{grid-auto-columns:72vw;gap:12px;padding-inline:0}
  .home-carousel .carousel-control{display:none}
}

@media(max-width:390px){
  .home-hero{padding-top:58px}
  .hero-logo{width:118px;max-height:20vh;margin-bottom:-12px}
  .home-hero .hero-copy h1{font-size:clamp(2.25rem,12.2vw,2.9rem)}
  .home-hero .hero-copy .hero-line{font-size:.84rem}
}

@media(max-height:720px){
  .home-hero{padding-top:58px;padding-bottom:4px}
  .hero-logo{width:clamp(96px,17vh,145px);max-height:20vh;margin-bottom:-12px}
  .home-hero .hero-copy .eyebrow{margin-bottom:.35rem}
  .home-hero .hero-copy h1{font-size:clamp(2.25rem,8.2vh,4.4rem)}
  .home-hero .hero-copy .hero-line{margin-top:.42rem;font-size:clamp(.8rem,2.2vh,.96rem)}
  .home-featured{padding-bottom:16px}
}


/* Version 17 — carousel follows the hero instead of the viewport bottom */
.home-main{
  height:100svh;
  min-height:560px;
}
.home-stage{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
  overflow:hidden;
}
.home-hero{
  flex:0 0 auto;
  min-height:0;
  padding-top:clamp(74px,8vh,112px);
  padding-bottom:clamp(22px,3.2vh,42px);
}
.home-featured{
  flex:0 0 auto;
  margin-top:clamp(12px,2.2vh,28px);
  padding-bottom:clamp(18px,2.5vh,34px);
}
@media(min-height:900px){
  .home-hero{padding-top:clamp(92px,10vh,132px)}
  .home-featured{margin-top:clamp(18px,2.6vh,34px)}
}
@media(max-width:1100px){
  .home-hero{padding-top:clamp(68px,7vh,88px);padding-bottom:20px}
  .home-featured{margin-top:14px}
}
@media(max-width:600px){
  .home-hero{padding-top:64px;padding-bottom:14px}
  .home-featured{margin-top:10px;padding-bottom:18px}
}
@media(max-height:720px){
  .home-hero{padding-top:58px;padding-bottom:8px}
  .home-featured{margin-top:6px;padding-bottom:12px}
}

/* Version 18 — more breathing room between mobile hero and carousel */
@media(max-width:600px){
  .home-featured{
    margin-top:clamp(34px,5.5vh,54px);
  }
}

@media(max-width:600px) and (max-height:720px){
  .home-featured{
    margin-top:clamp(24px,4vh,36px);
  }
}

/* Version 19 — vertically balanced mobile hero spacing */
@media(max-width:600px){
  /* The header is approximately 55px tall. Add the same visual pause above
     the logo that we use below the tagline before Selected Work. */
  .home-hero{
    padding-top:calc(55px + clamp(34px,5.5vh,54px));
  }
}

@media(max-width:600px) and (max-height:720px){
  .home-hero{
    padding-top:calc(55px + clamp(24px,4vh,36px));
  }
}