/* Placeholder only, on top of web/site.css: a one-screen page on a desktop. */

/* A short page: fixed gaps of 48 to 64px between the blocks, not the spec's long-page 96px, and
   no stretching to fill the window. */
.band > section{padding-top:clamp(3rem,2rem + 2vw,4rem)}
.site-footer{margin-top:clamp(3rem,2rem + 2vw,4rem)}

/* On a wide screen the headline grows past the spec's 44px cap, up to 64px. */
@media (min-width:960px){
  .title-block h1{font-size:clamp(2.75rem,1.2rem + 2.6vw,4rem)}
}

/* The headline's two lines are set by hand, and from 720px each stays on one line: the type stops
   growing where the longer line would outrun the column (100cqi). The optical size is pinned near
   the sizes each range sets, because browsers pick it differently (WebKit sets the font's default,
   20, at every size) and it changes the line's width. Each divisor is the longer line's width in
   em at that optical size, plus 2%: 19.04em at opsz 32, 17.80em at opsz 60. Re-measure if the
   headline's words change. Phones wrap. */
@media (min-width:720px){
  .title-block{container-type:inline-size}
  .title-block h1.set-lines{font-size:min(var(--size-h1),100cqi / 19.4);font-variation-settings:"opsz" 32}
}
@media (min-width:960px){
  .title-block h1.set-lines{font-size:min(clamp(2.75rem,1.2rem + 2.6vw,4rem),100cqi / 18.2);font-variation-settings:"opsz" 60}
}

/* "What we buy" and "Contact" share one band, side by side from 1280px: below that the
   columns are too narrow to keep both headings on one line, so they stack. */
.band .section-head + *{margin-top:0}
@media (min-width:1280px){
  .band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4rem)}
  /* Each column's heading shares one grid row, so the two brick rules line up. */
  .band > section{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}