/* =========================================================================================
   Additional — page-only composition (loaded after main.css). A holding page: each band says, in
   our own words, something the owner's mentors' company says on its site, so that any band can be
   moved onto another page. When a band moves, its rules move with it (to that page's file, or to
   main.css if two pages share it).
     0  hero ........ the page's name, clear of the header
     1  offer ....... the statement, the button and four figures (Night; main.css §11.11)
     2  coil ........ next to the old coil machine: ticks and a row-by-row comparison beside the drawing
     3  process ..... four steps (main.css §11.15)
     4  reasons ..... six things on a ruled grid (Night)
     5  fits ........ five kinds of place (main.css §11.1), a line under each
     6  know ........ two titled columns (main.css §11.4)
     7  notes ....... two short notes side by side: a machine already there, where we work
     8  word ........ two sentences of the owner's letter beside his portrait (Night)
     9  closing ..... three ticks in a row and the button
   ========================================================================================= */

/* 0 · hero */
.additional-hero{padding-top:calc(var(--hdr) + clamp(3.6rem,10vh,7.5rem));padding-bottom:clamp(2.4rem,4.4vw,4rem)}

/* 1 · offer: the statement a size up from a band heading, the button under its line, the figures below */
.offer__head{display:grid;gap:clamp(1.2rem,2vw,1.8rem);justify-items:start;max-width:1100px;margin-bottom:clamp(2.8rem,5.4vw,5.4rem)}
.offer__head .d1{font-size:clamp(2.4rem,5.2vw,5rem)}
.offer__head .lede{max-width:44ch}

/* 2 · coil: the words and the comparison in the wide column; the drawing holds still beside them while they
   scroll past (it stands centred under them below 760px) */
.coil__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.coil__copy{display:grid;gap:clamp(1.6rem,2.8vw,2.6rem)}
.coil__machine{--machine-w:clamp(200px,19vw,290px);position:sticky;top:calc(var(--hdr) + 2rem);justify-self:center}
/* the comparison: a topic, the old machine, our cooler. Three columns under a row of small capitals; below 760px
   each topic stacks, and the two labels (hidden beside the column heads, still read aloud) show in front of
   their lines */
.versus__head,.versus__row{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1rem,2vw,2rem)}
.versus__head{margin:0;padding-bottom:.7rem;border-bottom:1px solid var(--rule-strong);font-family:var(--f-ui);font-weight:var(--w-label);font-size:.75rem;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--em-small)}
.versus__rows{list-style:none;margin:0;padding:0}
.versus__row{align-items:baseline;padding-block:clamp(.85rem,1.3vw,1.2rem);border-bottom:1px solid var(--rule)}
.versus__topic{font-family:var(--f-display);font-size:clamp(1.1rem,1.35vw,1.35rem);line-height:1.25}
.versus__old{color:var(--fg-soft)}
.versus__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){
  .coil__grid{grid-template-columns:minmax(0,1fr)}
  .coil__machine{position:static;--machine-w:170px}
  .versus__head{display:none}
  .versus__rows{border-top:1px solid var(--rule-strong)}
  .versus__row{grid-template-columns:minmax(0,1fr);row-gap:.3rem}
  .versus__label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;font-family:var(--f-ui);font-weight:var(--w-label);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em-small)}
}

/* 4 · reasons: three across (two, then one), each under a hairline, its numeral large in the band's accent */
.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
.reason{display:grid;align-content:start;gap:.55rem;padding-block:clamp(1.3rem,2vw,1.9rem) clamp(1.8rem,3vw,3rem);border-top:1px solid var(--rule-strong)}
.reason__n{font-family:var(--f-display);font-style:italic;font-size:clamp(2rem,3vw,2.9rem);line-height:1;color:var(--em);font-variant-numeric:lining-nums}
.reason__t{font-family:var(--f-display);font-size:clamp(1.35rem,1.75vw,1.75rem);line-height:1.2;text-wrap:balance}
.reason__d{max-width:30em;color:var(--fg-soft);text-wrap:pretty}
@media (max-width:900px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reasons{grid-template-columns:minmax(0,1fr)}}

/* 5 · fits */
.fits__line{margin-top:.3rem;font-size:.9375rem;line-height:1.5;color:var(--fg-soft);text-wrap:pretty}

/* 7 · notes: two columns, one under the other below 900px; the places as small ruled tags */
.notes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.4rem,5vw,6rem);align-items:start}
.notes__col{display:grid;gap:clamp(1rem,1.6vw,1.4rem);align-content:start;justify-items:start}
.areas{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.areas li{padding:.45rem .9rem;border:1px solid var(--rule-strong);font-family:var(--f-display);font-size:1.0625rem;line-height:1.2}
.areas__note{font-style:italic;color:var(--fg-soft)}
@media (max-width:900px){.notes__grid{grid-template-columns:minmax(0,1fr)}}

/* 8 · word: the portrait (grey, as on Our Approach) beside the quotation */
.word__grid{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.word__portrait{margin:0;width:100%;max-width:340px}
.word__photo{overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.word__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.03)}
.word__copy{display:grid;gap:clamp(1rem,1.6vw,1.4rem);justify-items:start}
.word__quote{margin:0;font-family:var(--f-display);font-size:clamp(1.6rem,2.9vw,2.8rem);line-height:1.22;letter-spacing:-.008em;text-wrap:balance}
.word__quote p::before{content:'\201C'}
.word__quote p::after{content:'\201D'}
.word__by{font-family:var(--f-ui);font-weight:var(--w-label);font-size:.75rem;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--em-small)}
@media (max-width:760px){
  .word__grid{grid-template-columns:minmax(0,1fr)}
  .word__portrait{max-width:220px}
}

/* 9 · closing: the three ticks side by side under the rule. On wide screens the row reaches a gutter past the
   band's text column on each side, so the three stay on one line; narrower, they wrap, centred */
.ticks--row{display:flex;flex-wrap:wrap;justify-content:center;justify-self:stretch;gap:.6rem clamp(1.2rem,2.4vw,2.2rem)}
@media (min-width:900px){.ticks--row{margin-inline:calc(-1 * var(--gutter))}}
.ticks--row li{font-size:clamp(1.05rem,1.25vw,1.25rem)}