/* ============================================================
   First Principles Leadership: design system
   Phase 3 rebuild. Warm neutrals, one confident accent.
   Type carries the "researched" half of the brief, palette the
   "personable" half. See DESIGN-NOTES.md.
   ============================================================ */

/* ---------- Fonts (self hosted, no third party requests) ---------- */
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-400-normal.02194deb.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-400-italic.882b7c15.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-600-normal.f2b7e1cf.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-700-normal.7691c51b.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-400-normal.0f73f35e.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-600-normal.14527d19.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-700-normal.ae35266f.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Warm neutrals */
  --paper:      #FBF8F3;   /* page ground */
  --paper-alt:  #F3EDE4;   /* alternating band */
  --paper-deep: #EAE0D2;   /* cards on alt band, rules */
  --rule:       #DED4C6;
  --ink:        #1E1A15;   /* 16.3:1 on paper */
  --ink-soft:   #4A423A;   /*  9.3:1 on paper */
  --ink-muted:  #6B6156;   /*  5.7:1 on paper */

  /* Single confident accent */
  --ember:      #B8471F;   /* 5.0:1 on paper, white on it 5.3:1 */
  --ember-deep: #8E3516;   /* 7.4:1 on paper, body links + hover */
  --ember-wash: #F7E7DC;
  --ember-lift: #E8A17F;   /* accent on dark, 7.7:1 on night */

  /* Dark band */
  --night:      #241E18;
  --night-soft: #33291F;
  --night-rule: #4A3D31;

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.9375rem);
  --step-3:  clamp(1.8125rem, 1.55rem + 1.3vw, 2.625rem);
  --step-4:  clamp(2.1875rem, 1.72rem + 2.35vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.72rem + 3.9vw, 4.5rem);

  /* Space */
  --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;     --sp-6: 4.5rem;  --sp-7: 6.5rem;

  --measure: 66ch;
  --wide: 1180px;
  /* The reading column. Sized close to the measure itself, so prose fills
     its container rather than leaving a third of the band empty beside it. */
  --mid: 44rem;
  --radius: 3px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;
  letter-spacing:-0.012em;margin:0 0 var(--sp-3);text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
h4{font-size:var(--step-0);font-family:var(--sans);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;font-size:var(--step--1)}
p{margin:0 0 var(--sp-3);max-width:var(--measure)}
a{color:var(--ember-deep);text-decoration-thickness:1px;text-underline-offset:0.18em}
a:hover{color:var(--ember)}
ul,ol{max-width:var(--measure);padding-left:1.2em}
li{margin-bottom:var(--sp-2)}
blockquote{margin:var(--sp-4) 0;padding-left:var(--sp-3);
  border-left:3px solid var(--ember);font-family:var(--serif);
  font-size:var(--step-1);line-height:1.45;color:var(--ink-soft)}
blockquote cite{display:block;margin-top:var(--sp-2);font-family:var(--sans);
  font-size:var(--step--1);font-style:normal;color:var(--ink-muted)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--sp-5) 0}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem, var(--wide));margin-inline:auto}
.wrap-mid{width:min(100% - 2.5rem, var(--mid));margin-inline:auto}
.wrap-mid p,.wrap-mid ul,.wrap-mid ol,.wrap-mid .lede{max-width:none}
.band{padding-block:var(--sp-6)}
.band--tight{padding-block:var(--sp-5)}
.band--alt{background:var(--paper-alt)}
.band--night{background:var(--night);color:var(--paper)}
.band--night h1,.band--night h2,.band--night h3{color:var(--paper)}
.band--night a{color:var(--ember-lift)}
.band--night p{color:#E4DCD1}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:60ch}
.eyebrow{font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ember-deep);
  margin:0 0 var(--sp-2)}
.band--night .eyebrow{color:var(--ember-lift)}
.grid{display:grid;gap:var(--sp-4)}
@media(min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .grid--split{grid-template-columns:1.05fr 0.95fr;gap:var(--sp-5);align-items:center}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--ember);
  color:#fff;padding:.6rem 1rem;border-radius:var(--radius)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:700;
  font-size:var(--step--1);letter-spacing:0.03em;
  padding:0.8em 1.5em;border-radius:var(--radius);text-decoration:none;
  border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--ember);color:#fff}
.btn--primary:hover{background:var(--ember-deep);color:#fff}
.btn--ghost{border-color:var(--ember);color:var(--ember-deep);background:transparent}
.btn--ghost:hover{background:var(--ember);color:#fff}
.band--night .btn--ghost{border-color:var(--ember-lift);color:var(--ember-lift)}
.band--night .btn--ghost:hover{background:var(--ember-lift);color:var(--night)}
.arrow-link{font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.arrow-link:hover{border-bottom-color:var(--ember)}
.arrow-link::after{content:" \2192"}

/* ---------- Header and nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:74px;width:min(100% - 2.5rem, var(--wide));margin-inline:auto}
.brand{font-family:var(--serif);font-weight:700;font-size:1.0625rem;
  line-height:1.15;color:var(--ink);text-decoration:none;letter-spacing:-0.01em;
  flex:0 0 auto;max-width:13ch}
.brand em{display:block;font-style:normal;color:var(--ember-deep)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1)}
.nav a{color:var(--ink);text-decoration:none;font-size:var(--step--1);
  font-weight:600;padding:.55rem .7rem;border-radius:var(--radius);display:block}
.nav a:hover{color:var(--ember-deep);background:var(--ember-wash)}
.nav [aria-current="page"]{color:var(--ember-deep);box-shadow:inset 0 -2px 0 var(--ember)}
.nav__item{position:relative}
.nav__toggle{font:inherit;font-size:var(--step--1);font-weight:600;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:.55rem .7rem;border-radius:var(--radius)}
.nav__toggle:hover{color:var(--ember-deep);background:var(--ember-wash)}
.nav__toggle::after{content:"";display:inline-block;margin-left:.4em;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px)}
.nav__menu{position:absolute;top:100%;left:0;min-width:16rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(36,30,24,.13);padding:.4rem;margin:0;list-style:none;
  display:none}
.nav__item[data-open="true"] .nav__menu{display:block}
.nav__menu li{margin:0}
.nav__menu a{padding:.5rem .7rem}
.nav__cta{margin-left:var(--sp-2)}
.nav-toggle{display:none;font:inherit;font-weight:700;font-size:var(--step--1);
  background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:.5rem .8rem;cursor:pointer;color:var(--ink)}
@media(max-width:1000px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--sp-2) 1.25rem var(--sp-3);display:none;
    box-shadow:0 14px 26px rgba(36,30,24,.10)}
  .site-header[data-open="true"] .nav{display:flex}
  .nav__menu{position:static;display:block;border:0;box-shadow:none;
    padding:0 0 0 var(--sp-3);min-width:0}
  .nav__toggle{text-align:left;width:100%}
  .nav__toggle::after{display:none}
  .nav__cta{margin:var(--sp-2) 0 0}
  .btn{display:block;text-align:center}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3.5rem,3rem + 6vw,7rem) var(--sp-6);
  background:linear-gradient(180deg,var(--ember-wash) 0%,var(--paper) 62%)}
.hero h1{max-width:19ch;margin-bottom:var(--sp-4)}
.hero__sub{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);
  max-width:56ch;margin-bottom:var(--sp-4)}
.hero__note{font-size:var(--step--1);color:var(--ink-muted);margin-top:var(--sp-3)}

/* ---- Wide hero ----------------------------------------------------------
   The headline caps at 19ch and the lede at 56ch, which on the team page
   left roughly half the 1180px band empty beside them. This modifier lets
   both run to the width of the band. Display type, not reading matter, so
   the measure rule in DESIGN-NOTES does not apply. */
.hero--wide h1{max-width:none}
.hero--wide .hero__sub{max-width:none}
/* The hero's bottom padding and the next band's top padding both run at
   --sp-6, which stacks to 9rem of empty page between the lede and whatever
   follows. Halve both where the hero is this one. */
.hero--wide{padding-bottom:var(--sp-4)}
.hero--wide + .band{padding-top:var(--sp-4)}

/* ---------- Proof strip ---------- */
.proof{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4);max-width:none}
@media(min-width:760px){.proof{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0}}
.proof li{margin:0;padding:var(--sp-3) var(--sp-4);border-top:3px solid var(--ember)}
@media(min-width:760px){
  .proof li{border-top:0;border-left:3px solid var(--ember);padding-block:var(--sp-1)}
}
.proof__figure{font-family:var(--serif);font-size:var(--step-2);font-weight:700;
  line-height:1.1;display:block;margin-bottom:var(--sp-1)}
.proof__what{display:block;color:var(--ink-soft);margin-bottom:var(--sp-2);max-width:34ch}
.proof__who{display:block;font-size:var(--step--1);font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-muted)}
.band--night .proof__who{color:#B9AC9C}
.band--night .proof__what{color:#E4DCD1}

/* ---------- Cards ---------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--sp-4);display:flex;flex-direction:column}
.band--alt .card{background:#fff}
.card h3{margin-bottom:var(--sp-2)}
.card p{margin-bottom:var(--sp-2)}
.card p:last-of-type{margin-bottom:var(--sp-3)}
.card .arrow-link{margin-top:auto;align-self:flex-start}
.card--plain{border:0;padding:0;background:none}
.band--alt .card--plain{background:none}
.card--plain h3{padding-top:var(--sp-2);border-top:3px solid var(--ember)}

/* ---------- Industry list ---------- */
.industries{list-style:none;padding:0;margin:0;max-width:none;
  display:grid;gap:0;border-top:1px solid var(--rule)}
.industries li{margin:0;border-bottom:1px solid var(--rule)}
.industries a{display:grid;gap:var(--sp-1);padding:var(--sp-3) 0;
  text-decoration:none;color:var(--ink)}
@media(min-width:760px){
  .industries a{grid-template-columns:15rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.industries a:hover{color:var(--ember-deep)}
.industries__name{font-family:var(--serif);font-size:var(--step-1);font-weight:600}
.industries__line{color:var(--ink-soft)}
.industries a:hover .industries__line{color:var(--ink-soft)}

/* ---------- Figures and photography ---------- */
figure{margin:var(--sp-4) 0}
figure img{border-radius:var(--radius)}
figcaption{font-size:var(--step--1);color:var(--ink-muted);margin-top:var(--sp-2);
  max-width:60ch}
.figure--diagram img{background:#fff;border:1px solid var(--rule);padding:var(--sp-3)}
.photo-band img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius)}
.photo-flag{display:inline-block;font-size:var(--step--1);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ember-deep);
  background:var(--ember-wash);border:1px dashed var(--ember);
  padding:.35em .7em;border-radius:var(--radius);margin-bottom:var(--sp-2)}

/* ---------- Downloads ---------- */
.downloads{list-style:none;padding:0;margin:0;max-width:none;
  border-top:1px solid var(--rule)}
.downloads li{margin:0;border-bottom:1px solid var(--rule);padding:var(--sp-3) 0}
.downloads__title{font-family:var(--serif);font-size:var(--step-1);font-weight:600;
  display:block;margin-bottom:var(--sp-1)}
.downloads__meta{font-size:var(--step--1);color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.downloads p{margin-bottom:var(--sp-2)}

/* ---------- Bio ---------- */
.bio{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-6)}
@media(min-width:820px){.bio{grid-template-columns:16rem 1fr;gap:var(--sp-5)}}
.bio__portrait img{border-radius:var(--radius)}
.bio__name{margin-bottom:var(--sp-1)}
.bio__role{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember-deep);margin:0 0 var(--sp-1)}
.bio__where{font-size:var(--step--1);color:var(--ink-muted);margin:0 0 var(--sp-3)}

/* ---------- Callouts ---------- */
.note{background:var(--ember-wash);border-left:3px solid var(--ember);
  padding:var(--sp-3) var(--sp-4);border-radius:0 var(--radius) var(--radius) 0;
  margin:var(--sp-4) 0}
.note p:last-child{margin-bottom:0}
.pull{font-family:var(--serif);font-size:var(--step-2);line-height:1.3;
  color:var(--ink);max-width:24ch;margin:0}

/* ---------- CTA band ---------- */
.cta-band{text-align:left}
.cta-band h2{max-width:20ch}
.cta-band p{max-width:52ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:#D9D0C4;padding-block:var(--sp-5) var(--sp-4);
  font-size:var(--step--1)}
.site-footer h4{color:var(--paper);margin-bottom:var(--sp-2)}
.site-footer a{color:#E4DCD1;text-decoration:none}
.site-footer a:hover{color:var(--ember-lift);text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--sp-1)}
.footer__grid{display:grid;gap:var(--sp-4)}
@media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer__legal{border-top:1px solid var(--night-rule);margin-top:var(--sp-4);
  padding-top:var(--sp-3);color:#A2968A;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.footer__legal p{margin:0;max-width:none;color:#A2968A}

/* ---------- Forms ---------- */
.form{max-width:34rem}
.form label{display:block;font-weight:600;font-size:var(--step--1);
  letter-spacing:.03em;margin-bottom:var(--sp-1)}
.form input,.form textarea{width:100%;font:inherit;font-size:var(--step-0);
  color:var(--ink);background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);padding:.65rem .8rem;margin-bottom:var(--sp-3)}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ember);outline:2px solid var(--ember);outline-offset:1px}

/* ---------- Utility ---------- */
.stack-sm > * + *{margin-top:var(--sp-2)}
.mt-4{margin-top:var(--sp-4)}
.mb-0{margin-bottom:0}
.center-narrow{max-width:var(--measure)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Homepage blocks (revision 2) ---------- */
/* Blocks introduced in revision 2. These fold into site.css once approved. */
.manifesto{background:var(--ember-wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.manifesto p{font-family:var(--serif);font-size:var(--step-2);line-height:1.35;
  color:var(--ink);max-width:26ch;margin:0}
.manifesto .who{font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ember-deep);
  margin:0 0 var(--sp-3);max-width:none}
.services{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0;
  border-top:1px solid var(--rule)}
@media(min-width:820px){.services{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-5)}}
.services li{margin:0;padding:var(--sp-4) 0;border-bottom:1px solid var(--rule)}
.services h3{margin-bottom:var(--sp-2)}
.services p{margin-bottom:0;color:var(--ink-soft)}
.leads{display:grid;gap:var(--sp-5);margin-top:var(--sp-4)}
@media(min-width:820px){.leads{grid-template-columns:repeat(2,1fr)}}
.lead{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp-3);align-items:start}
.lead img{border-radius:50%;width:5.5rem;height:5.5rem;object-fit:cover}
.lead h3{margin-bottom:var(--sp-1)}
.lead .role{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ember-deep);margin:0 0 var(--sp-2)}
.lead p{margin-bottom:var(--sp-2);font-size:var(--step--1);line-height:1.6}
.lc{display:grid;gap:var(--sp-4);align-items:center}
@media(min-width:760px){.lc{grid-template-columns:auto 1fr auto}}
.lc img{width:104px;border:1px solid var(--rule)}
.lc p{margin-bottom:0}

/* Split grids default to centred, which is wrong when the two columns are
   very different heights, as on Contact. */
.grid--top{align-items:start}

/* ---- Video facade -------------------------------------------------------
   The YouTube iframe is not loaded until somebody presses play. Until then
   this is ordinary markup: no third party request, no cookie, nothing to
   disclose, and nothing to break for a visitor in a country where YouTube
   is blocked, who still sees the title and a working link out. */
.video{margin:var(--sp-5) 0}
.video__frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
  border-radius:3px;background:var(--night);border:1px solid var(--rule)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:.55}
.video__play{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  background:none;border:0;cursor:pointer;color:#fff;font:inherit;padding:var(--sp-4);
  text-align:center;transition:background .18s ease}
.video__play:hover,.video__play:focus-visible{background:rgba(0,0,0,.22)}
.video__play svg{width:64px;height:64px;flex:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));transition:transform .18s ease}
.video__play:hover svg{transform:scale(1.06)}
.video__play span{font-family:var(--font-serif);font-size:var(--step-1);
  line-height:1.25;max-width:34ch;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.video__caption{font-size:var(--step--1);color:var(--ink-muted);
  margin-top:var(--sp-3);max-width:62ch}
.video__caption a{color:inherit}

/* ---- Manifesto layout variants ----------------------------------------
   The line is the most emotive sentence on the site. It is set in the
   serif, larger than body copy, and given room. --wide runs it across the
   full measure; --split sets it against a photograph. */
.manifesto{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.manifesto__link{margin-top:var(--sp-5);max-width:none;font-family:var(--sans);
  font-size:var(--step--1)}
.manifesto--wide p.claim{max-width:34ch;font-size:var(--step-3);line-height:1.22}
@media(min-width:900px){.manifesto--wide p.claim{max-width:none;font-size:var(--step-4)}}
.manifesto--split .manifesto__grid{display:grid;gap:var(--sp-5);align-items:center}
@media(min-width:900px){
  .manifesto--split .manifesto__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-6)}
}
.manifesto--split p.claim{max-width:24ch;font-size:var(--step-2);line-height:1.3}
@media(min-width:900px){.manifesto--split p.claim{font-size:var(--step-3)}}
.manifesto__figure{margin:0}
.manifesto__figure img{width:100%;height:auto;display:block;border-radius:3px;
  border:1px solid var(--rule)}
.manifesto__figure figcaption{font-size:var(--step--1);color:var(--ink-muted);
  margin-top:var(--sp-2)}

/* Two figures stacked in one column of a split grid. */
.stack{display:grid;gap:var(--sp-4)}
.stack figure{margin:0}

/* ---- Photographic hero --------------------------------------------------
   Used on the homepage only. The photograph is a real <img> rather than a CSS
   background, so it carries a srcset and a phone never downloads the 2400px
   file. The scrim is a two-stop gradient: the text column sits on near-solid
   ground while the right of the frame stays legible as a photograph. */
.hero--shot{position:relative;isolation:isolate;background:var(--night);
  padding-block:clamp(7rem,15vw,12rem) clamp(4rem,9vw,7rem);overflow:hidden}
.hero--shot__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.hero--shot::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(20,16,12,.95) 0%, rgba(20,16,12,.89) 34%,
    rgba(20,16,12,.58) 62%, rgba(20,16,12,.36) 100%)}
.hero--shot .wrap{position:relative}
.hero--shot h1{color:#FDFBF8}
.hero--shot .hero__sub{color:#E6DFD5;max-width:46ch}
.hero--shot .hero__note{color:#BCB2A6}
.hero--shot .btn--primary{background:var(--ember);color:#fff}
.hero--shot .btn--primary:hover{background:#CE5325}
.hero__credit{position:absolute;right:clamp(1rem,3vw,2rem);bottom:.9rem;z-index:1;
  margin:0;font-size:.78rem;color:rgba(255,255,255,.6);max-width:46ch;text-align:right}

/* The header rides on the photograph until the page scrolls, then takes its
   normal paper background. One class toggled by a scroll listener. */
.page--hero-shot .site-header{position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;transition:background .25s ease,border-color .25s ease}
.page--hero-shot .site-header .brand{color:#FDFBF8}
.page--hero-shot .site-header .brand em{color:var(--ember-lift)}
.page--hero-shot .nav > a,.page--hero-shot .nav__toggle{color:#EFE9E1}
.page--hero-shot .nav > a:hover,.page--hero-shot .nav__toggle:hover{
  color:#fff;background:rgba(255,255,255,.12)}
.page--hero-shot .nav [aria-current="page"]{color:#fff}
.page--hero-shot .nav-toggle{color:#FDFBF8}
.page--hero-shot .site-header[data-scrolled="true"]{
  background:rgba(251,248,243,.94);border-bottom-color:var(--rule);
  backdrop-filter:saturate(180%) blur(8px)}
.page--hero-shot .site-header[data-scrolled="true"] .brand{color:var(--ink)}
.page--hero-shot .site-header[data-scrolled="true"] .brand em{color:var(--ember-deep)}
.page--hero-shot .site-header[data-scrolled="true"] .nav > a,
.page--hero-shot .site-header[data-scrolled="true"] .nav__toggle,
.page--hero-shot .site-header[data-scrolled="true"] .nav-toggle{color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){
  .page--hero-shot .site-header{transition:none}
}

/* ---- Partner biographies, side by side ---------------------------------
   Two equal columns rather than one after the other, because a page that
   says neither partner is senior should not put one of them first. Columns
   are independent, so unequal lengths simply end at different points
   instead of padding one to match the other. */
.bios{display:grid;gap:var(--sp-6)}
@media(min-width:900px){
  /* The gutter is carried as padding inside the two tracks rather than as a
     grid gap, half on each side of the rule. Put it on one column only and
     that column's text is narrower than the other by the full gutter, which
     is what happened here: 482px against 554px, visible to the eye. */
  .bios{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start}
  .bios .bio-col:first-child{padding-right:clamp(2.5rem,5vw,4.5rem)}
  /* A hairline between the columns, not around them */
  .bios .bio-col + .bio-col{border-left:1px solid var(--rule);
    padding-left:clamp(2.5rem,5vw,4.5rem)}
}
.bio-col > *{max-width:none}
.bio-col__portrait{margin-bottom:var(--sp-4);max-width:13rem}
.bio-col__portrait img{width:100%;height:auto;display:block;
  border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover}
.bio-col .bio__lede{font-size:var(--step-0);color:var(--ink)}
.bio-col h3{margin-top:var(--sp-5)}
.bio-col h3:first-of-type{margin-top:var(--sp-5)}

/* ---- Article byline and sources ------------------------------------------
   Insights pieces carry an author and, where the argument rests on other
   people's research, the references behind it. The site's rule is that a
   figure names its source; an essay is held to the same standard. */
.byline{font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);
  margin-top:var(--sp-3)}
.sources{list-style:none;padding:0;margin:var(--sp-3) 0 0;max-width:70ch}
.sources li{font-size:var(--step--1);line-height:1.6;color:var(--ink-soft);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--rule)}
.sources li:last-child{border-bottom:0}

/* ---- Session agenda and offer specification ------------------------------
   Written 9 August for the workshop page, then lost on 10 August when the
   stylesheet was restored to the approved 27 July build, which predates this
   page. The markup kept referring to classes that no longer existed, so the
   agenda table and the specification strip published as bare bullet lists for
   a day. Recovered from commit f80316d. The build now fails when a page uses
   a class the stylesheet does not define, so this cannot recur silently. */
.agenda{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0;
  border-top:1px solid var(--rule)}
.agenda li{margin:0;border-bottom:1px solid var(--rule);
  display:grid;gap:var(--sp-1);padding:var(--sp-3) 0}
@media(min-width:760px){
  .agenda li{grid-template-columns:11rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.agenda__when{font-family:var(--serif);font-size:var(--step-1);font-weight:600;display:block}
.agenda__who{display:block;font-size:var(--step--1);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.agenda__what{margin:0;color:var(--ink-soft);max-width:60ch}
.agenda__what strong{color:var(--ink)}
.agenda--break .agenda__when{font-family:var(--sans);font-size:var(--step--1);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.agenda--theirs{background:var(--ember-wash);padding-inline:var(--sp-3)}
.agenda--theirs .agenda__when{color:var(--ember-deep)}
.spec-list{list-style:none;padding:0;margin:0;max-width:none;
  border-top:1px solid var(--rule)}
.spec-list li{margin:0;padding:var(--sp-3) 0;border-bottom:1px solid var(--rule);
  display:grid;gap:var(--sp-1)}
@media(min-width:640px){
  .spec-list li{grid-template-columns:11rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.spec-list__k{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted)}
.spec-list span{color:var(--ink-soft)}
.price{font-family:var(--serif);font-size:var(--step-2);font-weight:700;
  line-height:1.15;color:var(--ink);display:block;margin:0 0 var(--sp-1)}