/* ── The Boyer Sound: the About page ───────────────────────────────
   Body text in the site's own face (Schibsted) at the site's body size;
   headings Sincerity; quotes the site's copper. Two pictures stacked
   beside the words, the sides swapping each movement; the quote centred
   beneath with equal space above and below. (Newsreader serif removed
   23 Oct; its font files are no longer loaded.) */
.bk{--book:var(--sans)}   /* the site's body face; the serif experiment is gone */
.bk-hero{padding-bottom:clamp(36px,4.5vw,72px)}
.bk-open{grid-column:1/-1;max-width:772px;margin-inline:auto;width:100%}
.bk-hero .bk-open{margin-top:clamp(36px,4.5vw,70px)}
.bk-sub{margin:0 0 clamp(26px,3vw,44px);font-family:var(--book);font-weight:400;font-size:clamp(22px,1.8vw,28px);line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
/* the words */
.bk-text p{margin:0 0 1.1em;font-family:var(--book);font-weight:400;font-size:clamp(17.5px,1.12vw,20px);line-height:1.62;letter-spacing:-.003em;color:var(--ink-soft);text-wrap:pretty;max-width:44ch}
.bk-text p:last-child{margin-bottom:0}
.bk-open .bk-text p,.bk-open p{max-width:none}
.bk-h2{margin:0 0 clamp(24px,2.6vw,38px);font-family:var(--display);font-weight:700;font-size:clamp(32px,3.4vw,56px);line-height:1.05;letter-spacing:-.026em;color:var(--ink);text-wrap:balance}
/* a movement: pictures beside words; the quote carries the space
   between movements, equal above and below */
.bk-ch{row-gap:0;padding-block:0}
.bk-pics{display:grid;gap:clamp(16px,1.6vw,24px);align-content:start}
.bk-fig{margin:0}
.bk-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-2);border-radius:2px}
.bk-fig.is-tall img{aspect-ratio:4/5}
.bk-text{align-self:center}
.bk-pull{grid-column:1/-1;justify-self:center;width:min(100%,900px);margin:clamp(64px,8vw,140px) 0;text-align:center}
.bk-pull .pull{font-size:clamp(26px,2.9vw,50px);line-height:1.18}
.bk-close{padding-bottom:var(--bay)}
@media(max-width:899px){.bk-text{margin-top:clamp(28px,5vw,44px)}.bk-fig.is-tall img{aspect-ratio:4/3}}
/* the opening "decade" section, then The Boyer Sound as its own big title (23 Oct) */
.bk-fig.is-natural img{aspect-ratio:auto;height:auto}
.bk-gap{grid-column:1/-1;height:clamp(64px,8vw,140px)}
.bk-title{font-family:var(--display);font-weight:700;font-size:clamp(46px,7.6vw,126px);line-height:1.03;letter-spacing:-.032em;margin:0;max-width:17ch;text-wrap:balance}
.bk-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.018em}
.bk-second{padding-top:clamp(40px,5vw,90px)}
/* the Vienna room, edge to edge between the first paragraph and the rest */
.bk-bleed{margin:clamp(56px,7vw,120px) 0 clamp(64px,8vw,140px);width:100%}
.bk-bleed img{display:block;width:100%;height:auto}
@media(max-width:899px){.bk-bleed img{height:62svh;object-fit:cover;object-position:52% 50%}}
/* a picture grid from the shows: edge to edge, no gaps — one large, two stacked beside it */
.bk-grid{display:grid;grid-template-columns:2fr 1fr;gap:0;width:100%;margin:0 0 clamp(40px,5vw,90px)}
.bk-g{margin:0;overflow:hidden;background:var(--bg-2)}
.bk-g img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:900px){
  .bk-grid{grid-template-rows:repeat(2,22vw)}
  .bk-g1{grid-column:1;grid-row:1/3}
  .bk-g2{grid-column:2;grid-row:1}
  .bk-g3{grid-column:2;grid-row:2}
  .bk-g2 img{object-position:60% 40%}
}
@media(max-width:899px){
  .bk-grid{grid-template-columns:1fr}
  .bk-g img{height:auto}
}
/* a picture that takes the height of the words beside it */
.bk-ch:has(.bk-fig.is-fill) .bk-pics{align-self:stretch;align-content:stretch}
.bk-fig.is-fill{position:relative;min-height:100%}
.bk-fig.is-fill img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:899px){.bk-fig.is-fill{min-height:0;aspect-ratio:4/3}}