/* Generated from Design/directions/about.py by Web/theme/tools/port.py.
   Edit the prototype and re-run, or adopt this file and delete the
   tool — but do not edit both. */

/* The About hero has no button and a portrait rather than a landscape frame,
   so the two columns centre on each other. */
.about-hero h1{font-size:clamp(38px,4.6vw,64px)}
.about-hero .wrap{align-items:center}
.about-hero .hero-figure{max-width:340px;margin-left:auto}
/* The hero lede size is now shared — see `p.lede` in build.py. The override
   that used to sit here said the same thing as the rule it overrode, which is
   how two values drift apart later. */

/* THE GALLERY. Three across, every cell 3:2, every caption under the same
   hairline — the home page's grid, and the same reason: it is one thing, not
   six things that happen to be near each other. */
.agallery h2{margin:12px 0 clamp(32px,4vw,54px);max-width:18ch}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(16px,2.2vw,32px);row-gap:clamp(30px,3.6vw,52px)}
.agrid figure{margin:0}
/* ⚠ THE TEAM SECTION'S OWN SPACING, added after looking at it on the live site
   rather than after writing it. Measured there: the gap between the lede and
   the first group heading was **0px**, where the same relationship in the
   training register directly above is 50px. The two groups ran straight into
   the introduction with no break at all.

   The cause is that `.lede` and `.tgroup` both carry `margin:0` — the lede from
   main.css's reset, the group because `.tgroup + .tgroup` only spaces a group
   from ANOTHER group, never from what precedes the first one. Nothing was
   wrong in either rule; the combination had simply never occurred before,
   because no other section puts a lede directly above a group.

   The measure is widened for the same reason `.argument .lede` is on the
   audience pages: 32ch sits under a two-word headline in a narrow column, and
   this one introduces a full-width list of five people. It was wrapping to
   three lines in 311px of a 1200px band. */
.team h2{margin:12px 0 16px;max-width:22ch}
.team .lede{max-width:46ch;margin-bottom:clamp(34px,4vw,56px);font-size:var(--t-lead)}

/* The Team and Advisory Board entries, added 26 August. Two rules, and they
   are the only new CSS the three new pages needed — Contact and Questions were
   built entirely from classes that already existed.

   `h4` earns a rule because it has none anywhere and is NOT in main.css's
   `h1,h2,h3,p,ul,figure,blockquote{margin:0}` reset. Left alone it renders at
   the browser's default weight with a 1.33em margin above and below, inside a
   13.5px caption — visibly wrong, and the kind of wrong that looks like a
   mistake rather than a style. h3 was the alternative and is 27px, which is
   larger than the group title above it and would invert the hierarchy.

   `.role` matches `.orgs dt` and `.roster dt` — the small sage label used
   everywhere else on the site for exactly this job. */
/* ⚠ h3 AND h4 BOTH, SINCE 0.4.13, AND THEY MUST LOOK IDENTICAL. A person's name
   is h4 inside a titled group and h3 inside an untitled one — see the renderer.
   Which rank it takes is an outline question and must not be a visual one, so
   the two selectors share one declaration. Without the h3 here the advisory
   names would fall back to main.css's bare `h3{font-size:27px}` and grow. */
.agrid figcaption h3,
.agrid figcaption h4{margin:0 0 3px;font-family:'Cormorant Garamond',serif;
  font-weight:400;font-size:17px;line-height:1.3;color:var(--ink)}
.agrid figcaption .role{margin:0 0 9px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);line-height:1.5}
.agrid figcaption{border-top:1px solid var(--line);margin-top:14px;padding-top:11px;
  font-size:var(--t-detail);line-height:1.6;color:var(--soft)}

/* A label column and a body column. The label sits in the margin rather than
   on top of the text, which is what keeps four hundred words of biography from
   reading as a wall with headings stuck to it. */
.two-col{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.6fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.col-label .eyebrow{margin-bottom:0}
.col-body > p{max-width:62ch;margin-bottom:20px;color:var(--soft);font-size:var(--t-body);
  line-height:1.75}
/* ⚠ THE `.col-body >` PREFIX IS WHAT MAKES THIS WIN. `p.person-note` in
   main.css and `.col-body > p` above are both 0,1,1 and this file loads
   second, so every aside in these sections rendered at body size — 16.5px
   instead of 13.5px, at every width. This stylesheet already documents the
   same collision twice; it had caught a third rule and nobody had measured
   it. 0.4.43. */
.col-body > p.person-note{font-size:var(--t-aside)}
.col-body h2{margin:0 0 22px;max-width:20ch}
/* ⚠ A SPECIFICITY COLLISION, and the same one this project keeps having.
   `.col-body > p` and `p.person-lead` are BOTH 0,1,1. This stylesheet is
   appended after build.py's, so `.col-body > p` won and every display
   paragraph in this section rendered at 16.5px — which is exactly what RJ
   saw: "the body copy in this section is too small." Declared here, after,
   and with the size stated rather than inherited. */
.belief .person-lead{max-width:60ch;font-size:var(--t-lead);
  line-height:1.6;color:var(--ink);margin-bottom:24px}
.belief .person-note,.roles .person-note{max-width:62ch}

/* THE REGISTER. A list of sixteen things is a table, not prose. Two columns —
   what it is, and who awarded it — with a hairline between rows and nothing
   else. */
.training h2{margin:12px 0 clamp(30px,3.6vw,50px);max-width:18ch}
/* The opening claim of the section, and the reason it is here rather than over
   the register: RJ moved the sentence, so the argument now lands beside the
   belief it supports instead of introducing a list that speaks for itself. */
/* `.belief .belief-opener`, not `.belief-opener`. The bare class is 0,1,0 and
   `.col-body > p` is 0,1,1, so the section rule won and this rendered at
   16.5px like everything else — the same collision as the leads below. */
.belief .belief-opener{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:var(--t-open);line-height:1.42;color:var(--ink);max-width:none;
  margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.tgroup + .tgroup{margin-top:clamp(38px,4.5vw,64px)}
.tgroup h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-family:Mulish,sans-serif;font-weight:400;color:var(--sage);margin-bottom:18px}
.register{margin:0;border-top:1px solid var(--line)}
.register > div{display:grid;grid-template-columns:minmax(240px,1.1fr) 1.4fr;
  gap:clamp(14px,2.4vw,40px);padding:15px 0;border-bottom:1px solid var(--line)}
.register dt{font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1.3;
  color:var(--ink)}
.register dd{margin:0;font-size:var(--t-detail);line-height:1.6;color:var(--soft);
  align-self:center}

.orgs{margin:30px 0 0;border-top:1px solid var(--line)}
.orgs > div{display:grid;grid-template-columns:minmax(150px,1fr) 2.4fr;
  gap:clamp(14px,2.4vw,36px);padding:16px 0;border-bottom:1px solid var(--line)}
.orgs dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
  line-height:1.6}
/* ⚠⚠ 56ch ADDED IN 0.4.93, AND IT WAS INVISIBLE AT BOTH WIDTHS ANYONE CHECKS.
   0.4.92 capped the measure after finding 163 blocks over 85 characters — at
   1440px. This one was FINE at 1440 and fine at 375, and ran to **116
   characters at 900px and 99 at 768**, because `.orgs > div` collapses its two
   columns in that band and the description takes the full width.

   ⚠ THE PROJECT HAS NOW MADE THIS EXACT MISTAKE THREE TIMES: `.outcomes dd` was
   found at 20 characters narrow on 1 September and at 95 wide on 4 September,
   eleven releases apart, because each check was made at one width. 0.4.92 then
   fixed the wide end — at one width — and left this. **Check the band between
   the breakpoints. 761–1023 is where two breakpoints doing two jobs leaves a
   layout nobody has looked at.** */
.orgs dd{margin:0;font-size:var(--t-detail);line-height:1.7;color:var(--ink);
  max-width:56ch}
/* Same doubled hairline as `.clients .roster` on Corporates: the table's last
   row carries a bottom border and `p.person-note` beneath it carries a top
   border of its own, at a different width — two rules 22px apart, reading as
   an empty row. Drop the one at the join and let the note keep its rule. */
.roles .orgs > div:last-child{border-bottom:0}

/* THE NAME. The approved passage on the left, the mark at size on the right —
   this is the one page that is *about* the mark, so it appears whole. */
.aname h2{margin:12px 0 clamp(28px,3.5vw,44px);max-width:20ch}
.name-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.name-copy p{max-width:56ch;margin-bottom:19px;color:var(--soft);font-size:var(--t-body);
  line-height:1.78}
.name-copy strong{color:var(--ink);font-weight:600}
.mark-figure{margin:0;display:flex;justify-content:center}
/* The category, set as letterspaced small caps rather than the literal
   capitals RJ typed. Same emphasis; capitals inside a serif paragraph read as
   raised voice, which is the one register this brand does not use. */
.sysname{font-family:Mulish,sans-serif;font-size:.78em;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink)}
.name-negative{color:var(--ink)}

/* THE ENDING. RJ: "the last two lines could be more emphasised." Display
   scale, full width, one line each, with the second stepping down — it is the
   qualification, not a second claim. */
/* ⚠ 52ch SINCE 0.4.65, AND IT IS PAIRED WITH A COPY CHANGE. RJ, 1 September:
   *"Lets take this as one block in the same font size."* The two sentences were
   merged into a single paragraph in the page's Closing lines box, so the
   `p + p` rule below never fires and the whole statement sets at 40px in ink.
   30ch was the measure for ONE SHORT LINE EACH; the merged block ran to seven
   lines in it. At 52ch it sets in four. **If the copy is ever split back into
   two paragraphs, put this back to 30ch** — the step-down rule below only reads
   correctly at the narrow measure. */
.name-closing{margin-top:clamp(40px,5vw,72px);padding-top:clamp(32px,3.6vw,48px);
  border-top:1px solid var(--line);max-width:52ch}
.name-closing p{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(24px,3vw,40px);line-height:1.22;color:var(--ink)}
.name-closing p + p{margin-top:16px;font-size:clamp(19px,2.2vw,29px);color:var(--soft)}


/* THE FAQ. A plain list with room around it — no accordion. A page this quiet
   does not need things that open and shut, and six answers do not need
   hiding. */
.faq h2{margin:12px 0 clamp(30px,4vw,52px);max-width:20ch}
.qa{margin:0;border-top:1px solid var(--line)}
.qa > div{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.5fr);
  gap:clamp(20px,3vw,56px);padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line)}
.qa dt{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(20px,2.1vw,26px);line-height:1.35;color:var(--ink)}
.qa dd{margin:0;font-size:var(--t-body);line-height:1.78;color:var(--soft);max-width:56ch}

@media (max-width:900px){
  .agrid{grid-template-columns:1fr 1fr}
  .two-col,.name-grid,.qa > div,.register > div,.orgs > div{
    grid-template-columns:1fr}
  .about-hero .hero-figure{max-width:none;margin-left:0}
}

/* The phone. Most of About stacks at the 900px step above; what is left is
   the gallery, which is three across, and the trainings register. See the
   note in `audience.py` for why a shared phone block cannot reach these. */

/* ⚠ `.pullquote` USED TO BE DUPLICATED HERE AND IS NOW IN main.css — 0.4.102.
   About, Home and the five audience pages all use the component, and Home
   loads main.css alone, so a third copy was the point at which duplicating
   stopped being the cautious option. Do not re-add it here. */

@media (max-width:760px){
  .agrid{grid-template-columns:1fr 1fr;gap:14px}
  .register > div,.qa > div{gap:8px}

  /* ⚠ THE ASSIGNMENTS MOVED OUT OF THIS BLOCK IN 0.4.43 and now sit with the
     rules themselves, because the inversion was never mobile-only — measured at
     761, 900, 1024 and 1280, the lead lost to the body at every one of them.
     The tokens change at this breakpoint; the assignments do not need to. */
}