/* ============================================================
   hdw site kit · RESPONSIVE
   Every width change lives here, and this file loads last.
   ============================================================ */

@media (max-width: 900px){
  :root{ --fs-menu:20px; --fs-title:24px; --row-gap:72px; }
  .menu{width:100vw;}
  body.has-menu .top{color:var(--panel-ink);}
  .menu-links a{line-height:26px;}
  .statement{padding-bottom:var(--s-8);}
  .row > .row-label{grid-column:1 / -1;margin-bottom:var(--s-4);}
  .row > .row-body{grid-column:1 / -1;}
  .works,.works-list,.works.is-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cols.is-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot-col{grid-column:span 6;}
  .cta-band h2{grid-column:1 / 7;}
  .cta-band .btn{grid-column:7 / -1;}
}
@media (max-width: 560px){
  :root{ --top-h:64px; }
  .works{grid-template-columns:1fr;}
  /* the work page keeps two across on a phone, so 19 projects are not 19 screens */
  .works-list{row-gap:var(--s-5);}
  .work-row{flex-direction:column;gap:3px;}
  .work-row > :last-child{text-align:left;}
  .cols,.cols.is-3,.row-body > .split{grid-template-columns:1fr;row-gap:var(--s-5);}
  .record{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;}
  .records.is-pairs .record{grid-template-columns:minmax(0,1fr) minmax(0,2fr);}
  .records.is-people .record{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* the email address needs the width */
  .foot-col:nth-child(-n+2){grid-column:1 / -1;}
  .cta-band{row-gap:var(--s-4);}
  .cta-band h2,.cta-band .btn{grid-column:1 / -1;}
  .works.is-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  ul.cols{row-gap:var(--s-1);}
  .list-ruled{grid-template-columns:1fr;}
  .fields{grid-template-columns:1fr;}
  .qa-row{grid-template-columns:1fr;row-gap:3px;}
  .qa-q,.qa-a{grid-column:auto;}
  .step{grid-template-columns:32px minmax(0,1fr);}
  .step > .n,.step > div{grid-column:auto;}
  .step > div{grid-template-columns:1fr;row-gap:3px;}
  .step h3,.step p{grid-column:auto;}
}