/* ============================================================
   hdw site kit · HOME
   The home page only, loaded between components and responsive.
   The opening line, five projects, the capabilities. Every value is a token.
   ============================================================ */

/* ---- the opening line ---- */
.home-intro{
  min-height:60svh; /* the work starts here, with the bottom 40% of the screen */
  display:grid;align-content:start;justify-items:start;
}
.home-intro .statement{padding-bottom:var(--s-3);}
.home-intro p{margin:0 var(--edge) var(--s-1);color:var(--ink-3);line-height:var(--lh-text);}
.home-intro a{margin:0 var(--edge);}

/* ---- five projects: two pairs, then one across ---- */
.home-work-head a{color:var(--ink-3);}
@media (hover:hover){ .home-work-head a:hover{color:var(--ink);} }
.home-work-wrap{margin-bottom:var(--s-10);}
.home-work-head{display:flex;justify-content:space-between;align-items:center;gap:var(--x);padding:0 var(--edge);margin-bottom:var(--s-4);}
.works-list.home-work{grid-template-columns:repeat(2,minmax(0,1fr));}
.home-work .work-card{aspect-ratio:1;}
.home-work .work-index-card:nth-child(5){grid-column:1 / -1;}
.home-work .work-index-card:nth-child(5) .work-card{aspect-ratio:16 / 9;}

/* ---- capabilities: a full photograph, the list over it ---- */
.capabilities{
  position:relative;overflow:hidden;background:#000;color:#fff;
  min-height:100svh;display:grid;
}
.cap-bg{position:absolute;inset:0;}
.cap-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);}
.cap-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dur) ease;
}
.cap-img.is-active{opacity:1;}
.cap-img[data-cap="branding"]{object-position:50% 25%;}
.cap-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-7);
  padding:calc(var(--top-h) + var(--s-2)) var(--edge) var(--s-4);
}
.cap-list{width:min(560px,100%);align-self:flex-end;}
.cap-item{border-top:1px solid rgba(255,255,255,.3);padding:var(--s-3) 0;}
.cap-head{
  display:flex;justify-content:space-between;align-items:baseline;width:100%;min-height:40px;
  font-size:var(--fs-title);letter-spacing:var(--track-l);line-height:1;
}
.cap-head::after{content:'+';transition:transform var(--dur-s) ease;}
.cap-item.is-active .cap-head::after{transform:rotate(45deg);}
.cap-body{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--dur) var(--ease), opacity var(--dur-s) ease;
}
.cap-item.is-active .cap-body{opacity:1;}
.cap-desc{line-height:var(--lh-text);margin-bottom:var(--s-3);max-width:var(--measure);}
.cap-body a{display:inline-block;margin:0 0 var(--s-1);}

@media (max-width: 560px){
  .works-list.home-work{row-gap:var(--s-5);}
}