/* ============================================================================
   27-type.css — the display voice, every chapter
   ----------------------------------------------------------------------------
   This began as a pilot scoped to chapter 6 with every rule prefixed
   [data-chapter-body="6"], on the terms written into its own header: "if it
   earns a rollout, drop the prefix". It earned it. The prefix is gone and the
   sheet now dresses all six chapters.

   WHAT IT DOES NOT TOUCH: the palette, the reading measure, and the running
   prose. Body copy stays Source Serif 4 at its established size and leading.
   Everything loud here is FURNITURE — numerals, headings, standfirsts, pull
   quotes, labels and captions. The frame is carefree; the reading stays calm.

   THE FACE: Bricolage Grotesque (SIL OFL 1.1) — a variable grotesque built
   out of deliberately mismatched parts, which is the whole reason it is here.
   Its irregularity is the "carefree" this design was asked for, and it gets
   there without a single decorative flourish. Three axes are in play: wght
   200-800, wdth 75-100 and opsz 12-96, so one file covers a 6rem numeral and
   a 0.7rem label without either looking like the other stretched.

   Why a GROTESQUE against a serif body: the running prose is Source Serif 4
   and it is staying. A second serif would have made every heading argue with
   the paragraph under it; a grotesque separates the roles at a glance, which
   is the older and better magazine answer.

   Self-hosted from files/bricolage-var.woff2 — 131 KB, latin subset — because
   this site makes zero network requests at runtime and that property is worth
   keeping. Fallback is the system sans stack, close enough in width that a
   failed load reflows by very little.

   THE SPINE. Sections 1-3 put a fixed left spine on every section: the numeral,
   its stub and the standfirst rule, always in the same place, with the numeral
   alternating solid/hollow down the page. That is the rhythm device for a long
   chapter. It replaces the alternating left/centre/right section alignment that
   22-variation.css used to supply — running both at once left a heading on the
   left while its own paragraph slid to the right margin, so the section read as
   two pieces that had come apart. See 22-variation.css section 1, which is now
   inert and documents the same trade from the other side.

   STILL CHAPTER-SCOPED: the pack table and its download buttons live in
   27-ch6-packs.css. They are chapter 6 content, not a type decision.
   ========================================================================== */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-stretch:75% 100%;
  font-display:swap;
  src:url("bricolage-var.woff2") format("woff2");
}

:root{
  --disp:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* One tuning per role rather than per rule. opsz is set to the size the role
     actually renders at, which is the entire point of an optical axis: at 96
     the joins tighten and the counters close, at 14 they open up so a label
     does not go spindly. wdth narrows only where a line has to hold a lot. */
  --disp-display:'opsz' 96, 'wdth' 92;
  --disp-mid:'opsz' 32, 'wdth' 100;
  --disp-small:'opsz' 14, 'wdth' 100;
}


/* ---------------------------------------------------------- 1. SECTION HEAD
   A numeral you cannot miss, hung in its own column, with the heading set
   against it and the reading time clipped underneath like a ticket stub. */

.sect > .shead{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,1.8vw,1.6rem);
  row-gap:.5rem;
  margin:0 0 1.5rem;
  max-width:none}

.shead > .n{
  grid-column:1;
  grid-row:1;
  justify-self:center;
  font-family:var(--disp);
  /* Stated rather than assumed: a numeral this size is read as a number, and
     tabular widths keep 01 and 04 in the same column down the page. */
  font-variant-numeric:lining-nums tabular-nums;
  font-variation-settings:'opsz' 96, 'wdth' 78;
  font-size:clamp(3.6rem,7vw,6.4rem);
  font-weight:800;
  line-height:.78;
  letter-spacing:-.03em;
  color:var(--acc);
  /* The numeral is decoration on top of information that already exists in
     the rail and the abstract, so it may be this loud without being the only
     place the section's position is stated. */
  margin-top:.06em}

/* Alternate sections hollow the numeral out. A rhythm you feel scrolling
   rather than read — and the two treatments are the same shape, so nothing
   about the hierarchy changes with it. */
.sect:nth-of-type(even) > .shead > .n{
  color:transparent;
  -webkit-text-stroke:2.5px var(--acc)}

.shead > h2{
  grid-column:2;
  grid-row:1 / 3;
  margin:0;
  align-self:start;
  font-family:var(--disp);
  font-variation-settings:var(--disp-display);
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.028em;
  text-wrap:balance;
  max-width:22ch}

/* Clipped under the numeral like a ticket stub, not orphaned under the
   heading where it reads as part of the sentence. */
.shead > .mins{
  grid-column:1;
  grid-row:2;
  justify-self:center;
  align-self:start;
  margin-top:.15rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--acctxt);
  background:var(--wash);
  border-radius:2px;
  padding:.18rem .5rem .16rem}


/* ------------------------------------------------------------ 2. STANDFIRST
   The brief was a bordered box doing the job of a caption. At the head of a
   section it is really a standfirst, so it is set like one: larger than the
   body, in the display face, with the label hung above it. */

.sect > .brief{
  background:none;
  border:0;
  border-left:3px solid var(--acc);
  border-radius:0;
  padding:.1rem 0 .1rem 1rem;
  margin:0 0 1.5rem}

.sect > .brief > em{
  font-family:var(--mono);
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.16em;
  color:var(--ink3);
  margin-bottom:.4rem}

.sect > .brief p{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-size:1.13rem;
  font-weight:400;
  line-height:1.46;
  letter-spacing:-.006em;
  color:var(--ink)}


/* -------------------------------------------------------------- 3. DROP CAP
   On the first running paragraph of a section only — the one directly after
   the standfirst. Never on a paragraph that follows a figure or a list, where
   a floated capital would collide with what is above it. */

.sect > .brief + p::first-letter{
  font-family:var(--disp);
  font-variation-settings:'opsz' 96, 'wdth' 86;
  font-size:3.2em;
  font-weight:800;
  line-height:.88;
  float:left;
  margin:.04em .11em -.05em 0;
  color:var(--acc)}


/* --------------------------------------------------------------- 4. SUBHEAD
   Was a tiny uppercase sans label with a rule. Same rule, but the words are
   allowed to be words: sentence case, display face, real size. */

.sect h3.subhead{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-size:1.04rem;
  font-weight:650;
  letter-spacing:-.016em;
  text-transform:none;
  color:var(--ink);
  gap:1rem;
  margin:2rem 0 .7rem}


/* ----------------------------------------------------------- 5. PULL QUOTE
   The takeaway is the one sentence a section is worth remembering, so it gets
   the biggest scale jump on the page and a mark to hang from. The left rule
   goes: two devices for one job is one too many. */

.sect > .takeaway{
  position:relative;
  border-left:0;
  padding:.3rem 0 .3rem 2.4rem;
  margin:1.8rem 0 2rem;
  font-family:var(--disp);
  font-variation-settings:var(--disp-display);
  font-size:clamp(1.24rem,1.9vw,1.54rem);
  font-weight:500;
  line-height:1.34;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:pretty}

.sect > .takeaway::before{
  content:"\201C";
  position:absolute;
  left:-.06em;
  top:-.06em;
  font-family:var(--disp);
  font-variation-settings:'opsz' 96, 'wdth' 100;
  font-weight:800;
  font-size:2.4em;
  line-height:.92;
  color:var(--acc)}

.sect > .takeaway em{
  font-style:italic;
  color:var(--acctxt)}


/* ------------------------------------------------------------- 6. ABSTRACT
   The chapter's own table of contents. Numerals in the display face, entries
   in it too — this is the first thing on the page and it should announce the
   voice before the reader has read a sentence. */

.abstract .abstract__h{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-size:.92rem;
  font-weight:650;
  letter-spacing:-.014em;
  text-transform:none;
  color:var(--ink2)}

.abstract .abstract__l a::before{
  font-family:var(--disp);
  font-variant-numeric:lining-nums tabular-nums;
  font-variation-settings:'opsz' 32, 'wdth' 80;
  font-size:1.18rem;
  font-weight:800;
  color:var(--acc);
  letter-spacing:-.03em}

.abstract .abstract__l b{
  font-family:var(--disp);
  font-variation-settings:var(--disp-small);
  font-size:.93rem;
  font-weight:650;
  letter-spacing:-.014em}


/* ----------------------------------------------------------------- 7. CARDS
   A catalogue page. Each card is a specimen label: a name in the display
   face, and the size as a loud tag, because on this page the size IS the
   decision the reader is making. */

.reel .card > b{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-size:1.06rem;
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.18;
  margin-bottom:.45rem}

.reel .card > s{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--acctxt);
  background:var(--wash);
  border-radius:2px;
  padding:.14rem .45rem;
  margin-bottom:.6rem}

.reel .card p > b{
  display:block;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:.1rem}


/* ------------------------------------------------- 8. KEYS, STEPS, CAPTIONS
   The small furniture. Enough of the face to belong to the same page, not so
   much that a caption starts competing with a heading. */

.keys > li > b{
  font-family:var(--disp);
  font-variation-settings:var(--disp-small);
  font-size:.96rem;
  font-weight:700}

.steps .step > h4{
  font-family:var(--disp);
  font-variation-settings:var(--disp-small);
  font-size:.99rem;
  font-weight:650;
  letter-spacing:-.014em}

/* The step counter stays in the base face. A display face at 17px inside a
   20px box is doing a job it is not for — the numeral gets no room to show any
   character at all, so the swap would cost a load and buy nothing. */

.mosaic .t > h4{
  font-family:var(--mono);
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.14em}

.mosaic .t--fact > b{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-weight:600;
  letter-spacing:-.01em}


/* --------------------------------------------------------------- 9. TRY-IT
   The one button on the page. It keeps its dark plate; the title takes the
   display face so it reads as an invitation rather than a form control. */

.tryit b{
  font-family:var(--disp);
  font-variation-settings:var(--disp-mid);
  font-size:.96rem;
  font-weight:650;
  letter-spacing:-.004em}

.tryit s{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em}


/* --------------------------------------------------------------- 10. NARROW
   Under 700px the numeral stops being a column and becomes a line above the
   heading — a 6rem numeral beside a two-line heading on a phone leaves the
   heading about nine characters of width. */

@media (max-width:700px){
  /* Every child must be re-placed, not just the numeral. Releasing .n alone
     left h2 on `grid-column:2` from the wide rule, which forced an implicit
     second track: the first column collapsed to 0 and the numeral printed
     straight through the heading. The numeral and its stub now share one line
     and the heading takes the full width beneath them. */
  .sect > .shead{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem;
                 column-gap:.7rem}
  .shead > .n{grid-column:1;grid-row:1;justify-self:start;
              font-size:3rem;line-height:1;margin-top:0}
  .shead > .mins{grid-column:2;grid-row:1;justify-self:start;align-self:center;
                 margin-top:0}
  .shead > h2{grid-column:1 / -1;grid-row:2;max-width:none}
  .sect > .brief p{font-size:1.02rem}
  .sect > .brief + p::first-letter{font-size:3em}
}

/* An outlined numeral prints as a hollow shape at best and as nothing at
   worst; on paper it goes back to being solid and quiet. */
@media print{
  .shead > .n{color:var(--ink3);-webkit-text-stroke:0}
}