/* FREE 2B ME site system. Shared by every page so the site reads as one worldview.
   Colour comes from f2bm-tokens.css, whose pigment values were measured from the
   chapter plates. Load that first. */
/* ------------------------------------------------------------------
   FREE 2B ME homepage.
   Type is self-hosted; no font CDN. Colour comes from f2bm-tokens.css,
   whose pigment values were measured from the chapter plates.
   Every artwork placement is capped at half its source pixel width so a
   2x screen still reads native. Nothing is upscaled, nothing full-bleed.
------------------------------------------------------------------- */
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-var.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{
  --ground:var(--f2bm-cream);
  --ink:var(--f2bm-navy);
  /* COLOUR CORRECTION 2026-09-12. Teal leads the typography; navy is demoted to reading
     text, navigation and footer detail. Cream is the page, colour lives at the edges. */
  --head:var(--f2bm-aqua-deep);
  --teal-small:#0a6e84;
  --body:#2d4260;
  --rule:rgba(202,164,90,.42);
  --hair:rgba(8,43,88,.12);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --wrap:1180px;
  --fs-body:21px;
  --fs-lead:clamp(24px,1.5vw + 17px,32px);
  --fs-h2:clamp(40px,5vw + 8px,74px);
  --fs-h3:clamp(28px,1.8vw + 18px,38px);
  --fs-eyebrow:14.5px;
  --sp:clamp(86px,9vw,150px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
[id]{scroll-margin-top:clamp(88px,9vw,112px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.62;font-weight:350;
  /* warm paper, never stark white: two very low-contrast washes, no image */
  background-image:
    radial-gradient(120% 60% at 12% -8%, rgba(100,204,225,.055), transparent 60%),
    radial-gradient(100% 55% at 92% 4%, rgba(248,79,151,.045), transparent 62%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--head);letter-spacing:-.012em;line-height:1.03;margin:0;text-wrap:balance}
h1{color:var(--ink)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.08}
p{margin:0 0 1.05em;text-wrap:pretty}
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-small);margin:0 0 18px}
.lead{font-family:var(--serif);font-size:var(--fs-lead);line-height:1.3;color:var(--ink)}
.measure{max-width:60ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:18px;top:14px;z-index:99;background:var(--ink);color:#fff;padding:11px 18px;border-radius:3px}
:focus-visible{outline:2px solid var(--f2bm-aqua-deep);outline-offset:3px}
/* A container that only takes focus so a screen reader lands in the right place should not
   draw a ring. Keyboard focus on real controls is untouched. */
[tabindex="-1"]:focus{outline:none}

/* gold hairline seam, drawn not printed */
.seam{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--f2bm-gold) 18%,var(--f2bm-gold-pale) 50%,var(--f2bm-gold) 82%,transparent);opacity:.75}

.link{display:inline-block;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;padding-bottom:5px;border-bottom:1px solid var(--f2bm-gold)}
.link:hover{border-bottom-color:var(--f2bm-aqua-deep)}

/* ---------- Acknowledgement of Country ---------- */
.aoc{padding:clamp(58px,7vw,96px) 0;border-bottom:1px solid var(--hair)}
.aoc-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:start;max-width:940px}
.aoc-mark{width:132px}
.aoc h2{font-size:clamp(34px,3vw + 14px,52px);line-height:1.12}
/* The seam sat tight under the heading and struck through the descenders of
   "Acknowledgement of Country". It needs room below the type, not beside it. */
.aoc .seam{margin-top:22px}
.aoc p{max-width:60ch;font-size:19px}
/* One typeface through the whole acknowledgement. The first paragraph was set in the
   display serif and the rest in the body face, which made a single statement look like two
   voices. Emphasis now comes from size and weight, not from changing the typeface. */
.aoc-lead{font-family:var(--sans);font-size:clamp(20px,1vw + 15px,24px);font-weight:500;line-height:1.5;color:var(--ink)}
.aoc p{font-family:var(--sans)}
.aoc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
body.aoc-overlay{overflow:hidden}
/* THE ACKNOWLEDGEMENT WEARS THE BRAND (2026-09-12).
   It was cream and navy type on three faint CSS gradients - correct colours, no brand. It
   now carries the real watercolour, entering from the lower edge the way the hero does, with
   a restrained gold rule above it. Painted artwork, not a gradient approximating one. */
body.aoc-overlay .aoc{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(24px,5vw,56px) clamp(24px,5vw,56px) clamp(150px,18vh,230px);
  background:var(--f2bm-cream);border-bottom:0;overflow:auto}
body.aoc-overlay .aoc::before{content:"";position:fixed;left:0;right:0;bottom:0;height:clamp(120px,16vh,200px);
  background:url("/assets/brand/footer-band-1024.jpg") center 42%/cover;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 62%);mask-image:linear-gradient(transparent,#000 62%)}
body.aoc-overlay .aoc::after{content:"";position:fixed;left:0;right:0;bottom:clamp(118px,16vh,198px);height:1px;
  background:linear-gradient(90deg,transparent,var(--f2bm-gold) 22%,var(--f2bm-gold-pale) 50%,var(--f2bm-gold) 78%,transparent);
  opacity:.8;pointer-events:none}
body.aoc-overlay .aoc-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;max-width:680px}
body.aoc-overlay .aoc-card .seam{margin-inline:auto}
body.aoc-overlay .aoc-actions{justify-content:center}
body.aoc-overlay main,body.aoc-overlay .site-header,body.aoc-overlay footer,body.aoc-overlay .a11y-toggle{display:none}
body.aoc-entered .aoc{display:none}
.enter{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;color:#fff;background:var(--ink);border:0;border-radius:2px;padding:15px 30px;cursor:pointer}
.enter:hover{background:var(--f2bm-aqua-deep)}
.listen{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--f2bm-gold);border-radius:2px;padding:13px 20px;cursor:pointer}
.listen:hover,.listen[aria-pressed="true"]{background:#fff;border-color:var(--f2bm-aqua-deep)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,247,239,.9);backdrop-filter:blur(9px);border-bottom:1px solid var(--hair)}
.header-in{display:flex;align-items:center;gap:26px;padding:14px 0;width:min(100% - 48px,var(--wrap));margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:54px}
.brand small{font-family:var(--serif);font-size:16.5px;color:var(--body);font-style:italic}
.site-header nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.site-header nav a{font-size:15.5px;font-weight:500;text-decoration:none;color:var(--ink);padding:4px 0;border-bottom:1px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--f2bm-gold)}
.cta{font-size:14.5px;font-weight:600;letter-spacing:.04em;text-decoration:none;color:var(--ink);border:1px solid var(--f2bm-gold);padding:11px 20px}
.cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,6vw,92px) 0 clamp(52px,6vw,86px);text-align:center}
.hero-edge{position:absolute;top:0;bottom:0;width:165px;pointer-events:none}
.hero-edge img{height:100%;width:165px;object-fit:cover;opacity:.92}
.hero-edge.l{left:0}
.hero-edge.l::after,.hero-edge.r::after{content:"";position:absolute;inset:0}
.hero-edge.l::after{background:linear-gradient(90deg,transparent 40%,var(--f2bm-cream))}
.hero-edge.r{right:0}
.hero-edge.r::after{background:linear-gradient(270deg,transparent 40%,var(--f2bm-cream))}
.hero-in{position:relative;z-index:2;width:min(100% - 240px,1120px);margin-inline:auto}
.hero-phoenix{width:min(58vw,268px);margin:0 auto 26px}
.hero h1{font-size:clamp(46px,6.2vw,96px);line-height:1.02}
.hero h1 .f{color:var(--f2bm-aqua-deep)}
.hero h1 .m{color:var(--f2bm-magenta)}
.hero .claim{margin:30px auto 0;max-width:26ch;font-family:var(--serif);font-size:clamp(26px,1.9vw + 16px,40px);line-height:1.16;color:var(--f2bm-aqua-deep);text-wrap:balance}
.hero .sub{margin:24px auto 0;max-width:none;font-size:clamp(17px,.5vw + 15px,19.5px);line-height:1.55;color:var(--body);text-wrap:balance}
.hero .seam{width:140px;margin:34px auto 0}

/* ---------- sections ---------- */
section{position:relative}
.band{padding-block:var(--sp)}
.rule-top{border-top:1px solid var(--hair)}

/* intro: asymmetric, artwork as a contained band on the right */
.intro-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,84px);align-items:center}
.intro-art{max-width:512px;justify-self:end}
.intro-art figcaption{margin-top:14px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-small)}

/* ways: type-led, no pictures beside text */
.ways-head{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(30px,4vw,70px);align-items:end;margin-bottom:56px}
.ways-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,88px)}
.way{padding:34px 0;border-top:1px solid var(--hair)}
.way:nth-child(-n+2){border-top:1px solid var(--rule)}
.way span{font-family:var(--serif);font-size:20px;color:var(--f2bm-magenta)}
.way h3{margin:6px 0 12px}
.way p{font-size:19px;max-width:44ch}

/* practice: cream ground, teal type. The watercolour is no longer a small clipped square
   on a dark panel. It is enlarged into an asymmetric edge that bleeds off the left of the
   page, runs the full height of the section and dissolves into the paper beneath a single
   fine gold seam. Navy is kept for reading text only. */
.practice{overflow:hidden;padding-block:clamp(104px,11vw,184px)}
.practice .eyebrow{color:var(--f2bm-magenta)}
.practice .lead{color:var(--ink)}
.practice-grid{display:block}
.practice-art{position:absolute;left:0;top:0;bottom:0;width:min(52vw,660px);z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 87%,transparent);
  mask-image:linear-gradient(transparent,#000 10%,#000 87%,transparent)}
.practice-art picture{display:block;height:100%}
.practice-art img{width:100%;height:100%;object-fit:cover;object-position:24% 44%}
/* the field dissolves into the paper rather than stopping at an edge */
.practice-art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,transparent 0 28%,rgba(251,247,239,.5) 60%,var(--f2bm-cream) 89%)}
/* one gold seam where the colour meets the paper */
.practice-art::before{content:"";position:absolute;z-index:2;right:16%;top:-3%;bottom:-3%;width:1px;
  transform:rotate(3.5deg);opacity:.85;
  background:linear-gradient(transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 54%,var(--f2bm-gold) 82%,transparent)}
.practice-copy{position:relative;z-index:3;width:min(100%,52ch);margin-left:auto}
.practice-copy .lead{margin-top:26px}

/* change can happen: organic mask, no rectangle */
.change-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,80px);align-items:center}
.change-art{max-width:400px;justify-self:center}
.change-art img{clip-path:path("M200,6 C296,6 394,84 394,196 C394,300 322,394 202,394 C92,394 6,312 6,200 C6,88 96,6 200,6 Z");}

/* learning: three crops of one plate */
/* The headline sets in three lines at this measure, so it is balanced rather than
   left to rag. The line on the right is bottom-aligned and sits under a gold rule,
   so it reads as a deliberate second column instead of floating free. */
.learn-head{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(30px,4vw,64px);align-items:start;margin-bottom:clamp(36px,4vw,54px)}
.learn-head h2{text-wrap:balance;margin-bottom:0}
.learn-head .lead{margin-top:10px;padding-top:18px;border-top:2px solid var(--f2bm-gold)}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,46px)}
.route figure{margin:0 0 22px;max-width:256px;overflow:hidden}
.route:nth-child(1) figure{border-radius:128px 128px 6px 6px}
.route:nth-child(2) figure{border-radius:6px}
.route:nth-child(3) figure{border-radius:6px 6px 128px 128px}
.route span{font-family:var(--serif);font-size:19px;color:var(--f2bm-magenta)}
.route h3{margin:4px 0 12px;font-size:clamp(24px,1.3vw + 17px,31px)}
.route p{font-size:18.5px}

/* tanya */
.tanya-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(34px,4vw,58px)}
.tanya-name{font-size:clamp(54px,6vw,104px);line-height:.94}
.tanya-role{font-family:var(--serif);font-size:clamp(24px,1.6vw + 15px,34px);color:var(--f2bm-violet);margin:10px 0 0}
.tanya-head .eyebrow{margin-bottom:12px}
.tanya-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:clamp(40px,5vw,90px);align-items:start}
.tanya-photo{position:sticky;top:104px;max-width:600px;overflow:hidden;border-radius:300px 300px 12px 12px;box-shadow:0 34px 80px rgba(8,43,88,.14)}
.story{max-width:46ch}
.story p{font-size:21.5px}
.story p:first-child{font-family:var(--serif);font-size:clamp(27px,1.9vw + 16px,38px);line-height:1.22;color:var(--ink);margin-bottom:.7em}

/* leadership statement */
.leadership{position:relative;background:var(--ink);color:#e7f0f8;overflow:hidden;padding-block:clamp(88px,8.5vw,132px)}
.leadership .wash{position:absolute;right:-10%;top:46%;transform:translateY(-50%) rotate(-8deg);width:min(58%,520px);opacity:.5;mix-blend-mode:screen;pointer-events:none}
.leadership .wash img{clip-path:polygon(18% 2%,74% 0,100% 34%,92% 82%,46% 100%,6% 74%,0 30%)}
.leadership .eyebrow{color:var(--f2bm-aqua-mid)}
.leadership blockquote{margin:0;max-width:30ch;font-family:var(--serif);font-size:clamp(36px,4.1vw,72px);line-height:1.06;color:#fff;text-wrap:balance}
.leadership-note{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,58ch);gap:clamp(22px,3vw,44px);align-items:center;margin-top:clamp(40px,4.5vw,68px);padding-top:clamp(28px,3vw,44px);border-top:1px solid rgba(202,164,90,.45)}
.leadership-note img{width:104px}
.leadership-note p{margin:0;font-size:19px;color:#cadcee}

/* books */
.books{background:linear-gradient(102deg,var(--f2bm-cream) 0 58%,var(--f2bm-cream-deep) 58%)}
.books-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,86px);align-items:center}
.destinations{list-style:none;margin:32px 0 26px;padding:0;border-top:1px solid var(--rule)}
.destinations li{border-bottom:1px solid var(--hair)}
.destinations a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;font-size:18px;color:var(--ink);text-decoration:none}
.destinations a::after{content:"\2192";color:var(--f2bm-gold);font-size:17px}
.destinations a:hover{color:var(--f2bm-aqua-deep)}
.status{max-width:52ch;font-size:16.5px;color:#5b6f88}
.pair-status{display:inline-block;margin-top:9px;padding:4px 10px;border:1px solid var(--rule);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5b6f88}
.book-figure{margin:0;position:relative;z-index:2;text-align:center}
.book-figure figcaption{margin-top:20px}
.book-figure b{display:block;font-size:17px;letter-spacing:.04em;color:var(--ink)}
.book-figure > figcaption > span{display:block;font-family:var(--serif);font-size:20px;color:var(--f2bm-magenta)}
.book-figure .pair-status{font-family:var(--sans);font-size:11.5px;color:#5b6f88}
.pairs{list-style:none;margin:0;padding:0;counter-reset:pair}
.pairs > li{counter-increment:pair;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--hair)}
.pairs > li:last-child{border-bottom:1px solid var(--hair)}
.pair-theme{position:relative;margin:0 0 18px;padding-left:44px;font-family:var(--serif);font-size:clamp(21px,1.2vw + 15px,27px);line-height:1.28;color:var(--ink)}
.pair-theme::before{content:counter(pair,decimal-leading-zero);position:absolute;left:0;top:.18em;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--f2bm-magenta)}
.pair-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px);padding-left:44px}
.pair-two span{display:block;font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-small);margin-bottom:7px}
.pair-two h3{font-size:clamp(24px,1.3vw + 17px,31px);margin-bottom:7px}
.pair-two p{margin:0;font-size:17.5px}
.book-stage{position:relative;display:flex;justify-content:center}
.book-stage .edge{position:absolute;right:-6%;top:-6%;width:min(62%,362px);opacity:.5;z-index:1}
.book-stage .edge img{clip-path:polygon(14% 0,100% 9%,88% 94%,0 100%)}
.book-cover-img{position:relative;z-index:2;width:min(72%,330px);box-shadow:0 26px 64px rgba(8,43,88,.2)}

/* speaking */
.speaking-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(36px,5vw,80px);align-items:center}
.speaking-art{max-width:512px}
.speaking-art img{clip-path:polygon(0 6%,100% 0,94% 100%,5% 92%)}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 30px}
.tags span{padding:10px 16px;border:1px solid var(--rule);font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}

/* recognition: the second large navy panel, now warm cream. The ledger of 39 awards is
   long, so as a dark field it dominated the page. Colour returns to the wash and the
   tier marks; navy is reading text only. */
.recognition{position:relative;background:var(--f2bm-cream-deep);overflow:hidden;padding-block:clamp(96px,10vw,158px)}
.recognition .wash{position:absolute;left:-12%;bottom:-14%;width:min(58%,512px);opacity:.34;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 28%,transparent 80%);mask-image:radial-gradient(closest-side,#000 28%,transparent 80%)}
.recognition .eyebrow{color:var(--f2bm-magenta)}
.rec-head{position:relative;z-index:2;display:grid;grid-template-columns:auto 1.5fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:56px}
.rec-head img{width:118px}
.rec-head p{font-size:18.5px;color:var(--body)}
.totals{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.totals div{padding:26px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.totals strong{display:block;font-family:var(--serif);font-size:clamp(44px,3.6vw,68px);line-height:1;font-weight:400}
.totals span{font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:#5b6f88}
.totals div:nth-child(1) strong{color:var(--f2bm-gold-rule)}
.totals div:nth-child(2) strong{color:#7d8ea1}
.totals div:nth-child(3) strong{color:#b5713a}
.totals div:nth-child(4) strong{color:var(--f2bm-aqua-deep)}
.totals div:nth-child(5) strong{color:var(--f2bm-magenta)}
.tiers{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin:clamp(46px,5vw,70px) 0 34px}
.tiers button{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink);background:transparent;border:1px solid var(--f2bm-gold-rule);border-radius:2px;padding:11px 18px;cursor:pointer}
.tiers button:hover{background:#fff;border-color:var(--f2bm-aqua-deep)}
.tiers button[aria-selected="true"]{background:var(--f2bm-gold);border-color:var(--f2bm-gold);color:#0a2036}
.chrono{position:relative;z-index:2}
.year{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(20px,3vw,54px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid rgba(202,164,90,.42)}
.year:last-child{border-bottom:1px solid rgba(202,164,90,.42)}
.year h3{font-size:clamp(40px,3.4vw,62px);line-height:1;color:var(--f2bm-aqua-deep);font-variant-numeric:tabular-nums}
.year ul{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(28px,3.5vw,60px)}
.year li{display:flex;gap:16px;align-items:baseline;padding:9px 0;break-inside:avoid}
.mark{flex:0 0 auto;min-width:8.4em;font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding-top:3px}
.mark.gold{color:#98701c}
.mark.silver{color:#5b6f88}
.mark.bronze{color:#a2581f}
.mark.finalist{color:var(--teal-small)}
.mark.nominated{color:var(--f2bm-magenta)}
.what b{display:block;font-weight:500;font-size:17.5px;color:var(--ink)}
.what span{display:block;font-size:14.5px;color:#5b6f88;margin-top:2px}

/* nest */
.nest-grid{display:grid;grid-template-columns:1fr .96fr;gap:clamp(36px,5vw,80px);align-items:center}
.nest-art{max-width:452px;justify-self:end}
.nest-art img{clip-path:polygon(6% 0,100% 5%,94% 100%,0 95%)}
.nest-line{font-family:var(--serif);font-size:clamp(24px,1.7vw + 15px,34px);line-height:1.2;color:var(--f2bm-magenta);margin:14px 0 22px}
.participate{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.participate span{padding:8px 14px;border:1px solid var(--hair);font-size:15px;color:var(--ink)}

/* footer */
footer{position:relative;overflow:hidden;padding-top:clamp(64px,7vw,104px);border-top:1px solid var(--hair)}
.foot-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(30px,4vw,64px);padding-bottom:clamp(44px,5vw,72px)}
.foot-brand img{width:86px;margin-bottom:14px}
.foot-brand p{font-family:var(--serif);font-size:21px;color:var(--ink);margin:0}
.foot-grid b{display:block;font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-small);margin-bottom:14px;font-weight:600}
.foot-grid a,.foot-grid span{display:block;font-size:16px;text-decoration:none;padding:5px 0;color:var(--body)}
.foot-grid a:hover{color:var(--f2bm-aqua-deep)}
.foot-band{position:absolute;left:0;right:0;bottom:0;height:170px;overflow:hidden;opacity:.85}
.foot-band img{width:100%;height:170px;object-fit:cover;object-position:center 40%}
.foot-legal{position:relative;z-index:2;padding:0 0 clamp(186px,17vw,210px);font-size:14.5px;color:#6f8299}

/* accessibility control */
.a11y-toggle{position:fixed;right:18px;bottom:18px;z-index:50;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--f2bm-gold);border-radius:2px;padding:11px 16px;cursor:pointer;box-shadow:0 8px 24px rgba(8,43,88,.12)}
.a11y-panel{position:fixed;right:18px;bottom:68px;z-index:50;width:238px;background:#fff;border:1px solid var(--f2bm-gold);border-radius:2px;padding:18px;box-shadow:0 18px 48px rgba(8,43,88,.17)}
.a11y-panel h2{font-size:19px;margin-bottom:12px;color:var(--teal-small)}
.a11y-panel button{display:block;width:100%;text-align:left;margin-bottom:7px;padding:11px 13px;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--f2bm-cream);border:1px solid var(--hair);border-radius:2px;cursor:pointer}
.a11y-panel button:hover,.a11y-panel button[aria-pressed="true"]{border-color:var(--f2bm-aqua-deep);background:#fff}
body.text-larger{--fs-body:24px}
body.text-larger .story p{font-size:25px}
body.high-contrast{--body:#0a1f3a;--hair:rgba(8,43,88,.4);--rule:rgba(140,102,30,.85)}
body.high-contrast .eyebrow{color:#065064}
body.high-contrast img{filter:contrast(1.08)}


/* ---------- editorial pauses, signature ideas, the Ledger ---------- */
.pause{padding-block:clamp(96px,10vw,168px)}
.pause-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,5vw,88px);align-items:start}
.pause h2{font-size:clamp(40px,4.6vw,80px);line-height:1.02;max-width:16ch}
.pause-copy{padding-top:.6em}
.pause-copy p{font-family:var(--serif);font-size:clamp(20px,1vw + 16px,25px);line-height:1.42;color:var(--ink);max-width:44ch}
.pause-copy p:nth-child(2){color:var(--f2bm-aqua-deep)}

.ideas{border-top:1px solid var(--hair)}
.idea-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(30px,4vw,72px);margin-top:12px}
.idea-list article{padding-top:30px;border-top:1px solid var(--rule)}
.idea-list h3{font-size:clamp(26px,1.5vw + 17px,34px);margin-bottom:14px;text-wrap:balance}
.idea-list p{font-size:18px;max-width:34ch}

.ledger{padding-block:clamp(92px,9vw,150px);background:var(--f2bm-cream-deep);border-top:1px solid var(--hair)}
.ledger h2{font-size:clamp(46px,5.4vw,92px);margin-bottom:clamp(36px,4vw,58px)}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,76px)}
.ledger-col h3{font-size:15px;font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-small);margin-bottom:20px}
.ledger-col ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ledger-col li{padding:14px 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:clamp(21px,1.1vw + 16px,27px);color:var(--ink)}
.ledger-col.cost h3{color:var(--f2bm-magenta)}
.ledger-col.cost li{color:var(--f2bm-violet)}
.ledger-col.cost.veiled li{color:transparent;transition:color .45s ease}
.ledger-col.cost.veiled li::after{content:"";display:inline-block;width:min(62%,180px);height:.62em;
  border-radius:2px;background:rgba(8,43,88,.09);vertical-align:-.06em}
@media(prefers-reduced-motion:reduce){.ledger-col.cost.veiled li{transition:none}}
.ledger-btn{margin:0 0 6px;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--f2bm-gold);border-radius:2px;padding:13px 22px;cursor:pointer}
.ledger-btn:hover{background:#fff;border-color:var(--f2bm-aqua-deep)}
.ledger-end{margin:clamp(34px,4vw,54px) 0 0;max-width:24ch;font-family:var(--serif);font-size:clamp(28px,2.2vw + 16px,46px);line-height:1.12;color:var(--ink)}

.turn{padding-block:clamp(70px,7vw,118px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.turn p{margin:0;font-family:var(--serif);font-size:clamp(30px,3.4vw,58px);line-height:1.1;color:var(--ink);max-width:24ch;text-wrap:balance}

.hinge{font-family:var(--serif);font-size:clamp(25px,1.6vw + 16px,34px)!important;line-height:1.26;color:var(--f2bm-aqua-deep);border-left:2px solid var(--f2bm-gold);padding-left:26px;margin-block:1.1em}
.book-invite{max-width:34ch;margin:16px auto 14px;font-family:var(--serif);font-size:19px;line-height:1.34;color:var(--ink)}

.closing{padding-block:clamp(96px,10vw,164px);border-top:1px solid var(--hair)}
.closing h2{font-size:clamp(42px,5vw,88px);line-height:1.02;max-width:18ch}
.closing-line{margin-top:28px;max-width:46ch;font-family:var(--serif);font-size:clamp(21px,1.2vw + 15px,28px);line-height:1.34;color:var(--ink)}
.closing-routes{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(24px,3vw,52px);margin-top:clamp(44px,5vw,74px);border-top:1px solid var(--rule)}
.closing-routes a{padding:22px 0;font-size:18px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.closing-routes a::after{content:" \2192";color:var(--f2bm-gold)}
.closing-routes a:hover{color:var(--f2bm-aqua-deep)}

/* ---------- responsive: rearranged, not squashed ---------- */
@media(min-width:1500px){
  .hero-edge,.hero-edge img{width:215px}
  .hero-in{width:min(100% - 300px,1240px)}
}
@media(min-width:1800px){
  .hero-edge,.hero-edge img{width:265px}
}
@media(max-width:1040px){
  .rec-head{grid-template-columns:auto 1fr}
  .rec-head p{grid-column:2}
  .totals{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  :root{--fs-body:19.5px;--sp:clamp(64px,10vw,92px)}
  .wrap{width:min(100% - 36px,var(--wrap))}
  .header-in{flex-wrap:wrap;gap:14px;padding:12px 0}
  .site-header nav{order:3;width:100%;margin-left:0;gap:20px;padding-top:8px;border-top:1px solid var(--hair);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .site-header nav a{white-space:nowrap;font-size:13.5px}
  .cta{margin-left:auto;padding:9px 15px;font-size:12.5px}
  .hero{padding-block:clamp(40px,9vw,64px) clamp(38px,7vw,60px)}
  .hero-edge,.hero-edge img{width:74px}
  .hero-in{width:min(100% - 168px,600px)}
  .hero-phoenix{width:min(46vw,168px);margin-bottom:20px}
  .hero .sub{font-size:19px;margin-top:22px}
  .intro-grid,.change-grid,.practice-grid,.tanya-grid,.tanya-head,.books-grid,.speaking-grid,.nest-grid,.ways-head,.learn-head{grid-template-columns:1fr;gap:32px}
  .intro-art,.nest-art{justify-self:start}
  .practice-art{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% + 36px);margin-left:-18px;height:250px;
    -webkit-mask-image:none;mask-image:none}
  .practice-art img{height:250px;object-position:center 46%}
  .practice-art::after{background:linear-gradient(transparent 30%,rgba(251,247,239,.66) 72%,var(--f2bm-cream))}
  .practice-art::before{right:auto;left:0;top:auto;bottom:16px;width:100%;height:1px;transform:none;
    background:linear-gradient(90deg,transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 52%,var(--f2bm-gold) 80%,transparent)}
  .practice-copy{width:auto;margin-left:0;margin-top:24px}
  .ways-list{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr;gap:34px}
  .route figure{max-width:100%;height:210px}
  .route figure img{width:100%;height:210px;object-fit:cover;object-position:center 42%}
  .route:nth-child(1) figure{border-radius:105px 105px 6px 6px}
  .route:nth-child(3) figure{border-radius:6px 6px 105px 105px}
  .tanya-photo{position:static;max-width:100%;border-radius:200px 200px 10px 10px}
  .tanya-head{grid-template-columns:1fr;gap:10px;align-items:start}
  .story{max-width:none}
  .leadership-note{grid-template-columns:1fr;gap:18px}
  .leadership-note img{width:82px}
  .pair-two,.pair-theme{padding-left:0}
  .pair-two{grid-template-columns:1fr;gap:22px}
  .book-stage .edge{position:relative;right:auto;top:auto;width:100%;max-width:362px;margin-bottom:-70px;opacity:.42}
  .foot-grid{grid-template-columns:1fr 1fr;padding-bottom:40px}
.pause-in{grid-template-columns:1fr;gap:24px}
  .pause h2{max-width:none}
  .idea-list{grid-template-columns:1fr;gap:0}
  .idea-list article{padding-block:26px 4px}
  .ledger-grid{grid-template-columns:1fr;gap:34px}
  .closing-routes{grid-template-columns:1fr}
  .turn p{max-width:none}
  .hinge{padding-left:18px}
  body.aoc-overlay .aoc-card img{width:76px}
}
@media(max-width:560px){
  .totals{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .leadership blockquote{font-size:clamp(32px,8.4vw,42px);max-width:none}
}

/* ---------- shared inner-page furniture ----------
   Inner pages open on a question, not on what the organisation contains. */
.page-hero{padding-block:clamp(72px,8vw,132px) clamp(54px,6vw,92px)}
.page-hero h1{font-size:clamp(44px,5.4vw,92px);line-height:1.01;max-width:17ch}
.page-hero .stand{margin-top:clamp(26px,3vw,40px);max-width:50ch;font-family:var(--serif);font-size:clamp(22px,1.3vw + 16px,30px);line-height:1.32;color:var(--ink)}
.page-hero .seam{width:180px;margin-top:clamp(28px,3vw,44px)}

/* a continuum, not a diagram of categories */
.continuum{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:clamp(36px,4vw,60px) 0 0;border-top:1px solid var(--rule)}
.continuum > div{position:relative;padding:34px clamp(18px,2vw,34px) 30px 0}
.continuum > div + div{padding-left:clamp(18px,2vw,34px);border-left:1px solid var(--hair)}
.continuum b{display:block;font-family:var(--serif);font-size:clamp(30px,2.2vw + 14px,46px);font-weight:400;color:var(--f2bm-aqua-deep);line-height:1}
.continuum span{display:block;margin-top:14px;font-size:17.5px;max-width:30ch}
.continuum > div:nth-child(2) b{color:var(--f2bm-magenta)}
.continuum > div:nth-child(3) b{color:var(--f2bm-violet)}

/* a claim that carries a whole page */
.claim-line{padding-block:clamp(66px,6.5vw,108px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.claim-line p{margin:0;font-family:var(--serif);font-size:clamp(30px,3.2vw,56px);line-height:1.1;color:var(--ink);max-width:26ch;text-wrap:balance}

/* plain editorial runs */
/* Two fixed columns broke when the section also reserved a gutter for artwork:
   the heading was left about 300px and ran to seven lines ending on an orphan.
   auto-fit stacks the pair whenever there is no longer room for two real columns. */
.run{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(28px,3.4vw,64px);align-items:start}
.run h2{font-size:clamp(32px,2.6vw + 14px,54px);max-width:24ch;text-wrap:balance}
.run .body p{max-width:56ch}
.stack{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule)}
.stack li{padding:16px 0;border-bottom:1px solid var(--hair);font-size:18.5px;color:var(--ink)}
.stack li b{display:block;font-family:var(--serif);font-size:clamp(22px,1.1vw + 16px,28px);font-weight:400;margin-bottom:5px}

@media(max-width:900px){
  .continuum{grid-template-columns:1fr}
  .continuum > div + div{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
  .continuum > div{padding-right:0}
  .run{grid-template-columns:1fr;gap:22px}
  .claim-line p,.page-hero h1,.page-hero .stand{max-width:none}
}

/* pair provocations: the question above, the two sides beneath */
.pair-q{position:relative;margin:0 0 20px;padding-left:44px;font-family:var(--serif);font-size:clamp(24px,1.5vw + 16px,34px);line-height:1.22;color:var(--ink)}
.pairs > li .pair-q::before{content:counter(pair,decimal-leading-zero);position:absolute;left:0;top:.3em;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--f2bm-magenta)}
.pair-two h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--f2bm-gold)}
.pair-two h3 a:hover{color:var(--f2bm-aqua-deep)}
.pair-two > div{position:relative}
.pair-two > div:first-child::after{content:"";position:absolute;right:calc(-1 * clamp(12px,1.5vw,28px));top:14%;bottom:14%;width:1px;background:linear-gradient(var(--f2bm-gold),transparent)}
@media(max-width:900px){.pair-q{padding-left:0}.pair-two > div:first-child::after{display:none}}

.pair-two .pair-status{display:inline-block;width:auto}

/* "none of these are contradictions": the pairing is the point, so the join is visible */
.contrapairs li b{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;font-size:clamp(24px,1.4vw + 16px,32px);margin:0}
.contrapairs li b em{font-style:normal;font-family:var(--sans);font-size:18.5px;color:var(--body)}
.contrapairs li b::after{content:none}
.contrapairs li{padding:20px 0}

/* the shift: one question replaced by another */
.shift{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3vw,52px)}
.shift > div{padding:clamp(24px,3vw,40px) 0}
.shift span{display:block;font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-small);margin-bottom:14px}
.shift p{margin:0;font-family:var(--serif);font-size:clamp(28px,2.6vw + 12px,54px);line-height:1.08;color:var(--body);text-wrap:balance}
.shift .to p{color:var(--ink)}
.shift .to span{color:var(--f2bm-magenta)}
.shift::before{display:none}
.shift > div:first-child{opacity:.6}
.shift > div.to{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,52px)}
@media(max-width:900px){
  .shift{grid-template-columns:1fr;gap:0}
  .shift > div.to{border-left:0;border-top:1px solid var(--rule);padding-left:0}
}

/* the ladder: three ways in, each a bigger change than the last */
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung}
.ladder > li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(30px,3.4vw,50px) 0;border-top:1px solid var(--rule)}
.ladder > li:last-child{border-bottom:1px solid var(--rule)}
.ladder > li > span{font-family:var(--serif);font-size:clamp(24px,1.4vw + 14px,32px);color:var(--f2bm-magenta);line-height:1.2}
.ladder h2{font-size:clamp(30px,2.2vw + 14px,46px);margin-bottom:8px}
.ladder .rung{font-family:var(--serif);font-size:clamp(21px,1.1vw + 15px,27px);color:var(--f2bm-aqua-deep);margin-bottom:14px}
.ladder p{max-width:54ch}
@media(max-width:900px){.ladder > li{grid-template-columns:1fr;gap:8px}}

/* recognition reads as a sentence, not a scoreboard */
.tally{position:relative;z-index:2;max-width:74ch;margin:0;padding-top:clamp(26px,3vw,40px);border-top:1px solid rgba(202,164,90,.45);font-size:18.5px;color:var(--body)}

/* ---------- THE CENTRE IS "MORE LIVING" (2026-09-12) ----------
   The page used to enter through problem, change and professional reasoning.
   It now enters through the life the work is for, and explains afterwards. */

/* hero: the promise, then the philosophy in six syllables, then two ways in */
.hero .signature{margin:26px auto 0;font-family:var(--serif);font-size:clamp(28px,2.4vw + 16px,48px);line-height:1.1;color:var(--ink)}
.hero .signature .f{color:var(--f2bm-aqua-deep)}
.hero .signature .m{color:var(--f2bm-magenta)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,3vw,40px)}
.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;text-decoration:none;
  color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:14px 26px}
.btn:hover{background:var(--f2bm-aqua-deep);border-color:var(--f2bm-aqua-deep)}
.btn.ghost{color:var(--ink);background:transparent;border-color:var(--f2bm-gold)}
.btn.ghost:hover{background:#fff;border-color:var(--f2bm-aqua-deep);color:var(--ink)}

/* one wide painted breath, then the line the whole site rests on */
.opening{padding-bottom:clamp(60px,6vw,96px)}
.opening-art{width:100%;height:clamp(200px,26vw,360px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.opening-art img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.opening-line{margin:clamp(34px,4vw,58px) auto 0;max-width:24ch;text-align:center;
  font-family:var(--serif);font-size:clamp(30px,3.4vw,58px);line-height:1.08;color:var(--head);text-wrap:balance}

/* what more living looks like: plain lines, generous air, no argument */
.living-list{list-style:none;margin:clamp(38px,4vw,60px) 0 0;padding:0;
  columns:2;column-gap:clamp(36px,5vw,90px);max-width:96ch}
.living-list li{break-inside:avoid;padding:15px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(21px,1.1vw + 16px,27px);line-height:1.3;color:var(--ink)}
.living-end{margin:0;font-family:var(--serif);font-size:clamp(26px,2vw + 15px,42px);line-height:1.14;color:var(--ink);max-width:24ch}
.living-end b{font-weight:400;color:var(--f2bm-magenta)}

/* one promise, many places it has to become real */
.promise{overflow:hidden}
.promise-art{position:absolute;right:0;top:0;bottom:0;width:min(40vw,500px);z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent);
  mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent)}
.promise-art picture{display:block;height:100%}
.promise-art img{width:100%;height:100%;object-fit:cover;object-position:70% 44%}
.promise-art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(276deg,transparent 0 22%,rgba(251,247,239,.6) 54%,var(--f2bm-cream) 84%)}
.promise-art::before{content:"";position:absolute;z-index:2;left:28%;top:-3%;bottom:-3%;width:1px;
  transform:rotate(-3.5deg);opacity:.85;
  background:linear-gradient(transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 54%,var(--f2bm-gold) 82%,transparent)}
.promise .wrap{position:relative;z-index:3}
.promise-head{max-width:56ch}
.promise-head h2{max-width:16ch}
.promise-head .lead{margin-top:26px}
.realms{list-style:none;margin:clamp(44px,4.5vw,70px) 0 0;padding:0;max-width:min(100%,900px)}
.realms > li{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.45fr);gap:clamp(24px,4vw,72px);
  padding:clamp(28px,3.2vw,46px) 0;border-top:1px solid var(--rule)}
.realms > li:last-child{border-bottom:1px solid var(--rule)}
.realm-promise{margin:0;font-family:var(--serif);font-size:clamp(24px,1.5vw + 15px,35px);line-height:1.12;color:var(--f2bm-magenta);max-width:15ch}
.realm-body h3{font-size:clamp(24px,1.3vw + 17px,32px);margin-bottom:11px}
.realm-body p{max-width:52ch;font-size:18.5px}

/* the five carried ideas */
.ideas h2{max-width:20ch;margin-bottom:10px}
.idea-list article:nth-child(n+4){margin-top:clamp(18px,2vw,30px)}

.pairs-end{margin:clamp(32px,3.6vw,52px) 0 0;max-width:44ch;font-family:var(--serif);
  font-size:clamp(23px,1.4vw + 15px,32px);line-height:1.2;color:var(--head)}

/* what they inherit */
.inherit h2{max-width:18ch}
.inherit-not{margin:clamp(22px,2.4vw,34px) 0 0;max-width:46ch;font-size:19px}
.inherit-big{margin:clamp(14px,1.6vw,22px) 0 clamp(28px,3vw,42px);font-family:var(--serif);
  font-size:clamp(44px,5.4vw,92px);line-height:1;color:var(--f2bm-magenta)}
.rooms{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(36px,5vw,90px);max-width:92ch;border-top:1px solid var(--rule)}
.rooms li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(21px,1.1vw + 16px,27px);color:var(--ink)}
.inherit-end{margin:0;max-width:34ch;font-family:var(--serif);font-size:clamp(26px,2vw + 15px,42px);line-height:1.14;color:var(--head)}

.nest-end{margin:clamp(18px,2vw,28px) 0 22px;max-width:40ch;font-family:var(--serif);
  font-size:clamp(22px,1.3vw + 15px,30px);line-height:1.2;color:var(--head)}
.nest-grid .participate{margin:0 0 10px}
.nest-grid .participate + .participate{margin-top:0}
.nest-grid .measure{margin-top:22px}

/* recognition on the homepage: eight, then the door to the rest */
.rec-picks{position:relative;z-index:2;list-style:none;margin:clamp(40px,4vw,62px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,72px);border-top:1px solid var(--rule)}
.rec-picks li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
.rec-all{position:relative;z-index:2;margin-top:clamp(30px,3.4vw,46px)}

/* the ending returns to the promise */
.closing .permits{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;
  columns:2;column-gap:clamp(36px,5vw,90px);max-width:74ch;border-top:1px solid var(--rule)}
.closing .permits li{break-inside:avoid;padding:13px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(21px,1.1vw + 16px,27px);color:var(--ink)}
.closing-sign{margin:clamp(26px,3vw,40px) 0 0;font-family:var(--serif);
  font-size:clamp(30px,2.8vw + 14px,56px);line-height:1.08;color:var(--ink)}
.closing-sign .f{color:var(--f2bm-aqua-deep)}
.closing-sign .m{color:var(--f2bm-magenta)}
.closing-actions{margin-top:clamp(26px,3vw,38px)}
.closing-phoenix{width:96px;margin:clamp(44px,5vw,72px) 0 0}

@media(max-width:900px){
  .hero .signature{font-size:clamp(26px,7.4vw,36px)}
  .hero-actions{gap:10px}
  .btn{padding:13px 20px;font-size:14px}
  .opening-art{height:clamp(170px,44vw,230px)}
  .living-list,.rooms,.closing .permits{columns:1}
  .promise-art{position:relative;right:auto;top:auto;bottom:auto;width:100%;margin:0 0 clamp(26px,4vw,38px);height:230px;
    -webkit-mask-image:none;mask-image:none}
  .promise-art img{height:230px;object-position:center 46%}
  .promise-art::after{background:linear-gradient(transparent 30%,rgba(251,247,239,.66) 72%,var(--f2bm-cream))}
  .promise-art::before{left:0;top:auto;bottom:16px;width:100%;height:1px;transform:none;
    background:linear-gradient(90deg,transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 52%,var(--f2bm-gold) 80%,transparent)}
  .realms > li{grid-template-columns:1fr;gap:12px}
  .rec-picks{grid-template-columns:1fr}
  .idea-list article:nth-child(n+4){margin-top:0}
}

/* ---------- THE CARRIED LANGUAGE (2026-09-12) ----------
   Same visual system as the rest of the page: wide two-column flows, full-width
   rows, generous measures. Nothing sits in a narrow column beside empty paper. */

.hero-actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;margin-top:clamp(28px,3vw,40px)}
.hero-second{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;
  padding-bottom:5px;border-bottom:1px solid var(--f2bm-gold)}
.hero-second:hover{border-bottom-color:var(--f2bm-aqua-deep)}

/* more living: the lines flow across the page in two columns, with the artwork
   holding the right of the section so nothing reads as a missing image */
.living-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,66px);align-items:start;margin-top:clamp(38px,4vw,60px)}
.cadence{margin:0}
.cadence p{margin:0 0 0;padding:15px 0;border-bottom:1px solid var(--hair);break-inside:avoid;
  font-family:var(--serif);font-size:clamp(20px,1vw + 15px,25px);line-height:1.26;color:var(--ink)}
.cadence p.beat{color:var(--f2bm-aqua-deep)}
.cadence-end{margin:0;font-family:var(--serif);font-size:clamp(28px,2.4vw + 14px,50px);
  line-height:1.08;color:var(--f2bm-magenta);max-width:22ch}
.living-art{margin:clamp(10px,2vw,26px) 0 0;align-self:center}
.living-art img{border-radius:50%;box-shadow:0 30px 70px rgba(8,43,88,.13)}
.living-art figcaption{margin-top:18px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-small);text-align:center}

.ledger-lead{margin:0 0 .16em;font-family:var(--serif);font-size:clamp(26px,1.8vw + 15px,40px);line-height:1.1;color:var(--body)}
.ledger-end{line-height:1.16}

/* the pull-quotes were a short line marooned in a wide empty band */
.turn{position:relative;overflow:hidden}
.turn .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:center}
.turn .wrap::before{content:"";width:3px;align-self:stretch;border-radius:3px;
  background:linear-gradient(var(--f2bm-gold),var(--f2bm-gold-pale),var(--f2bm-gold))}
.turn p{max-width:30ch;font-size:clamp(28px,3vw,50px)}

/* the question a person takes with them */
.test h2{max-width:18ch;font-size:clamp(42px,5vw,84px)}
.test-list{list-style:none;margin:clamp(44px,4.5vw,70px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(30px,4vw,72px);border-top:1px solid var(--rule)}
.test-list li{padding:26px 0;border-bottom:1px solid var(--hair)}
.test-list span{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f2bm-magenta);margin-bottom:9px}
.test-list p{margin:0;font-family:var(--serif);font-size:clamp(20px,1.1vw + 15px,26px);line-height:1.26;color:var(--ink);max-width:30ch}
.test-end{margin:clamp(36px,4vw,56px) 0 0;max-width:40ch;font-family:var(--serif);
  font-size:clamp(24px,1.6vw + 15px,36px);line-height:1.16;color:var(--head)}

.promise-head h2{max-width:14ch}
.realms{margin-top:clamp(40px,4vw,62px)}
.realms-end{margin:clamp(32px,3.6vw,52px) 0 0;font-family:var(--serif);
  font-size:clamp(26px,2vw + 14px,42px);line-height:1.1;color:var(--f2bm-magenta)}

/* the vocabulary: full-width rows, term left, meaning right */
.lang h2{max-width:20ch}
.lang-list{list-style:none;margin:clamp(40px,4vw,64px) 0 0;padding:0;border-top:1px solid var(--rule)}
.lang-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,4vw,72px);
  padding:clamp(24px,2.8vw,40px) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.lang-list h3{font-size:clamp(25px,1.5vw + 16px,36px);line-height:1.12;margin:0}
.lang-list p{margin:0;max-width:48ch;font-size:18.5px}
.lang-list li:last-child h3{color:var(--f2bm-magenta)}

/* the places we learned to disappear: two columns across the text side */
.places{list-style:none;margin:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px);padding:0;
  columns:2;column-gap:clamp(30px,3.6vw,60px);border-top:1px solid var(--rule)}
.places li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(20px,1.1vw + 15px,26px);color:var(--f2bm-aqua-deep)}
.books .lead{margin:0 0 20px}
.books .status{margin-bottom:16px}
.pair-two > div > span:first-of-type{margin-top:7px;margin-bottom:0;text-transform:none;letter-spacing:.02em;
  font-family:var(--serif);font-size:18px;font-weight:400;color:var(--f2bm-magenta)}
.pair-two h3{margin-bottom:0}

.inherit h2{max-width:16ch;font-size:clamp(42px,5vw,84px)}
.inherit-end{margin:0 0 .12em;max-width:34ch;font-family:var(--serif);
  font-size:clamp(26px,2vw + 14px,44px);line-height:1.12;color:var(--body)}
.inherit-end.last{color:var(--head)}

.nest-rule{margin:clamp(20px,2.2vw,30px) 0 0;max-width:38ch;font-family:var(--serif);
  font-size:clamp(21px,1.2vw + 15px,28px);line-height:1.2;color:var(--f2bm-magenta)}
.learn-claim{margin:0 0 clamp(40px,4.5vw,64px);max-width:40ch;font-family:var(--serif);
  font-size:clamp(24px,1.5vw + 15px,34px);line-height:1.16;color:var(--head)}
.prac-question{margin:clamp(48px,5vw,76px) 0 0;padding-top:clamp(28px,3vw,42px);border-top:1px solid var(--rule);
  max-width:34ch;font-family:var(--serif);font-size:clamp(26px,2vw + 14px,42px);line-height:1.1;color:var(--f2bm-magenta)}

.closing-cadence{columns:2;column-gap:clamp(36px,5vw,90px);max-width:74ch;border-top:1px solid var(--rule);
  margin:clamp(30px,3.4vw,48px) 0 0}
.closing-cadence p{margin:0;padding:13px 0;border-bottom:1px solid var(--hair);break-inside:avoid;
  font-family:var(--serif);font-size:clamp(21px,1.1vw + 16px,27px);line-height:1.26;color:var(--ink)}
.closing-and{margin:clamp(30px,3.4vw,46px) 0 0;max-width:36ch;font-family:var(--serif);
  font-size:clamp(26px,2vw + 14px,42px);line-height:1.12;color:var(--head)}
.closing-line{margin:0 0 .16em;max-width:44ch}
.closing-line.last{color:var(--f2bm-magenta)}
.closing-sign{margin:clamp(26px,3vw,40px) 0 0;font-family:var(--serif);
  font-size:clamp(30px,2.8vw + 14px,56px);line-height:1.08;color:var(--ink)}
.closing-sign .f{color:var(--f2bm-aqua-deep)}
.closing-sign .m{color:var(--f2bm-magenta)}
.closing-actions{margin-top:clamp(26px,3vw,38px)}
.closing-phoenix{width:112px;margin:clamp(56px,7vw,100px) 0 clamp(26px,3vw,40px)}
.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:14px 26px}
.btn:hover{background:var(--f2bm-aqua-deep);border-color:var(--f2bm-aqua-deep)}
.btn.ghost{color:var(--ink);background:transparent;border-color:var(--f2bm-gold)}
.btn.ghost:hover{background:#fff;border-color:var(--f2bm-aqua-deep)}
.rec-picks{position:relative;z-index:2;list-style:none;margin:clamp(40px,4vw,62px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,72px);border-top:1px solid var(--rule)}
.rec-picks li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
.rec-all{position:relative;z-index:2;display:inline-block;margin-top:clamp(30px,3.4vw,46px)}
.opening{padding-bottom:clamp(60px,6vw,96px)}
.opening-art{width:100%;height:clamp(200px,26vw,360px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.opening-art img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.opening-line{margin:clamp(34px,4vw,58px) auto 0;max-width:24ch;text-align:center;
  font-family:var(--serif);font-size:clamp(30px,3.4vw,58px);line-height:1.08;color:var(--head);text-wrap:balance}
.hero .signature{margin:26px auto 0;font-family:var(--serif);font-size:clamp(28px,2.4vw + 16px,48px);line-height:1.1;color:var(--ink)}
.hero .signature .f{color:var(--f2bm-aqua-deep)}
.hero .signature .m{color:var(--f2bm-magenta)}
.pairs-end{margin:clamp(32px,3.6vw,52px) 0 0;max-width:50ch;font-family:var(--serif);
  font-size:clamp(23px,1.4vw + 15px,32px);line-height:1.2;color:var(--head)}
.promise{overflow:hidden}
.promise-art{position:absolute;right:0;top:0;bottom:0;width:min(40vw,500px);z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent);
  mask-image:linear-gradient(transparent,#000 12%,#000 84%,transparent)}
.promise-art picture{display:block;height:100%}
.promise-art img{width:100%;height:100%;object-fit:cover;object-position:70% 44%}
.promise-art::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(276deg,transparent 0 22%,rgba(251,247,239,.6) 54%,var(--f2bm-cream) 84%)}
.promise-art::before{content:"";position:absolute;z-index:2;left:28%;top:-3%;bottom:-3%;width:1px;
  transform:rotate(-3.5deg);opacity:.85;
  background:linear-gradient(transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 54%,var(--f2bm-gold) 82%,transparent)}
.promise .wrap{position:relative;z-index:3}
.realms{list-style:none;padding:0;max-width:min(100%,900px)}
.realms > li{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.45fr);gap:clamp(24px,4vw,72px);
  padding:clamp(28px,3.2vw,46px) 0;border-top:1px solid var(--rule)}
.realms > li:last-child{border-bottom:1px solid var(--rule)}
.realm-promise{margin:0;font-family:var(--serif);font-size:clamp(24px,1.5vw + 15px,35px);line-height:1.12;color:var(--f2bm-magenta);max-width:15ch}
.realm-body h3{font-size:clamp(24px,1.3vw + 17px,32px);margin-bottom:11px}
.realm-body p{max-width:52ch;font-size:18.5px}
.signup-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,110px);align-items:start}
.signup{max-width:44ch}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{margin:0 0 clamp(24px,2.6vw,34px);border:0;padding:0}
.field > label,.field legend{display:block;padding:0;font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:.02em;color:var(--ink);margin-bottom:9px}
.field .opt{font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;color:#7d8ea1;margin-left:8px}
.signup input[type="text"],.signup input[type="email"]{width:100%;font-family:var(--sans);font-size:18px;color:var(--ink);
  background:#fff;border:1px solid var(--f2bm-gold-rule);border-radius:2px;padding:14px 15px}
.signup input[type="text"]:focus,.signup input[type="email"]:focus{outline:2px solid var(--f2bm-aqua-deep);outline-offset:1px;border-color:var(--f2bm-aqua-deep)}
.choice{display:flex;gap:11px;align-items:flex-start;margin:0 0 9px;font-family:var(--sans);font-size:17px;
  font-weight:400;color:var(--body);cursor:pointer}
.choice input{margin:4px 0 0;accent-color:var(--f2bm-aqua-deep);width:17px;height:17px;flex:0 0 auto}
.choice.consent{font-size:17.5px;color:var(--ink)}
.signup .btn{margin-top:6px;cursor:pointer;font-size:16px;padding:16px 28px}
.signup-note{margin:clamp(20px,2.2vw,28px) 0 0;font-size:15.5px;color:#5b6f88;max-width:42ch}
.signup-side .places{margin-top:clamp(18px,2vw,26px);columns:1;border-top:0}
.signup-quiet{margin:0;max-width:24ch;font-family:var(--serif);font-size:clamp(22px,1.3vw + 15px,30px);
  line-height:1.18;color:var(--head)}
.recognition .wash{-webkit-mask-image:radial-gradient(closest-side,#000 28%,transparent 80%);
  mask-image:radial-gradient(closest-side,#000 28%,transparent 80%)}

@media(max-width:900px){
  .living-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .living-art{max-width:300px;margin-inline:auto}
  .closing-cadence,.places{columns:1}
  .test-list{grid-template-columns:1fr}
  .lang-list li{grid-template-columns:1fr;gap:10px}
  .test h2,.inherit h2{font-size:clamp(34px,8.6vw,46px)}
  .hero-actions{flex-direction:column;gap:16px}
  .turn .wrap{grid-template-columns:1fr}
  .turn .wrap::before{display:none}
  .turn p{max-width:none}
  .rec-picks{grid-template-columns:1fr}
  .realms > li{grid-template-columns:1fr;gap:12px}
  .promise-art{position:relative;right:auto;top:auto;bottom:auto;width:100%;margin:0 0 clamp(26px,4vw,38px);height:230px;
    -webkit-mask-image:none;mask-image:none}
  .promise-art img{height:230px;object-position:center 46%}
  .promise-art::after{background:linear-gradient(transparent 30%,rgba(251,247,239,.66) 72%,var(--f2bm-cream))}
  .promise-art::before{left:0;top:auto;bottom:16px;width:100%;height:1px;transform:none;
    background:linear-gradient(90deg,transparent,var(--f2bm-gold) 20%,var(--f2bm-gold-pale) 52%,var(--f2bm-gold) 80%,transparent)}
  .signup-grid{grid-template-columns:1fr;gap:clamp(38px,7vw,54px)}
  .signup{max-width:none}
  .opening-art{height:clamp(170px,44vw,230px)}
  .hero .signature{font-size:clamp(26px,7.4vw,36px)}
}

/* ---------- INTERIOR PAGES (2026-09-12) ----------
   Every selector is scoped to body.interior. An earlier version of this block was not,
   and a bare "main ul" rule reformatted the Ledger and the book lists on the homepage. */
   /*
   Fourteen pages were still on the old stylesheet: the seven book pages, the framework
   pages, Research, For organisations and two deep dives. Their markup is unchanged; these
   rules re-dress the components it uses in the FREE 2B ME system, so the whole site is one
   worldview rather than two. Cream ground, teal headings, gold seams, navy for reading. */
body.interior .serif{font-family:var(--serif)}
body.interior .sec-head{max-width:60ch;margin-bottom:clamp(30px,3.4vw,46px)}
body.interior .sec-head .lead{margin-top:20px}
body.interior .stand{margin:clamp(20px,2.4vw,32px) 0 0;max-width:30ch;font-family:var(--serif);
  font-size:clamp(23px,1.4vw + 15px,34px);line-height:1.18;color:var(--head)}

/* a scope, evidence or limitation notice. It has to read as deliberate, never as fine print. */
body.interior .note, body.interior .boundary{margin:clamp(28px,3.2vw,44px) 0 0;max-width:64ch;
  padding:clamp(18px,2vw,26px) 0 clamp(18px,2vw,26px) clamp(20px,2.2vw,28px);
  border-left:2px solid var(--f2bm-gold);font-size:17px;color:var(--body)}
body.interior .note strong, body.interior .boundary strong{color:var(--ink);font-weight:600}

/* ruled tiles, not floating panels */
body.interior .grid, body.interior .principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:0 clamp(26px,3vw,52px)}
body.interior .card, body.interior .principle-card{padding:clamp(24px,2.6vw,34px) 0 clamp(18px,2vw,26px);border-top:1px solid var(--rule);background:none}
body.interior .card h3, body.interior .principle-card h3{font-size:clamp(22px,1.2vw + 16px,29px);line-height:1.14;margin:0 0 11px}
body.interior .card p, body.interior .principle-card p{font-size:17.5px;max-width:56ch;margin:0 0 .7em}
body.interior .grid .card p, body.interior .principles-grid .principle-card p{max-width:38ch}
body.interior .card p:last-child, body.interior .principle-card p:last-child{margin-bottom:0}

/* development-status chips */
body.interior .status{display:inline-block;margin:0 0 13px;padding:4px 10px;border:1px solid var(--rule);
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5b6f88}
body.interior .status.now{color:var(--teal-small);border-color:rgba(10,110,132,.4)}
body.interior .status.dev, body.interior .status.research{color:var(--f2bm-magenta);border-color:rgba(210,15,105,.34)}
body.interior .status.review{color:#98701c;border-color:var(--rule)}

/* buttons: one filled, the rest are links wearing a rule */
body.interior .cta-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:clamp(20px,2.2vw,30px)}
body.interior .btn-teal{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;color:#fff !important;background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:14px 26px}
body.interior .btn-teal:hover{background:var(--f2bm-aqua-deep);border-color:var(--f2bm-aqua-deep)}
/* These are written as "btn btn-ghost", so they inherit the filled button's background,
   padding and border. Without resetting those, the label is navy on navy and invisible. */
body.interior .btn-ghost, body.interior .btn-text{display:inline-block;font-family:var(--sans);font-size:16px;font-weight:600;
  text-decoration:none;color:var(--ink);background:none;border:0;border-radius:0;
  padding:0 0 5px;border-bottom:1px solid var(--f2bm-gold)}
body.interior .btn-ghost:hover, body.interior .btn-text:hover{border-bottom-color:var(--f2bm-aqua-deep)}

/* book pages */
body.interior .library-intro{max-width:64ch}
body.interior .book-subtitle{margin:clamp(16px,1.8vw,24px) 0 0;max-width:34ch;font-family:var(--serif);
  font-size:clamp(24px,1.6vw + 15px,36px);line-height:1.16;color:var(--f2bm-magenta)}
body.interior .book-promise{margin:clamp(24px,2.8vw,38px) 0 0;max-width:44ch;font-family:var(--serif);
  font-size:clamp(21px,1.2vw + 15px,28px);line-height:1.26;color:var(--ink)}
body.interior .book-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:clamp(26px,3vw,40px)}
body.interior .book-side{position:relative;padding-left:22px}
body.interior .book-side::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;border-radius:2px}
body.interior .book-side.person::before{background:var(--f2bm-aqua-deep)}
body.interior .book-side.practice::before{background:var(--f2bm-magenta)}

/* the paired territory cards */
body.interior .pair-card{padding:clamp(26px,3vw,42px) 0;border-top:1px solid var(--rule)}
body.interior .pair-card:last-child{border-bottom:1px solid var(--rule)}
body.interior .pair-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:14px}
body.interior .pair-kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--f2bm-magenta)}
body.interior .pair-territory{font-family:var(--serif);font-size:clamp(22px,1.3vw + 15px,30px);line-height:1.16;color:var(--ink)}
body.interior .pair-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px)}
body.interior .pair-body p{max-width:44ch}

body.interior .video-embed{position:relative;margin:clamp(28px,3.4vw,46px) 0 0;padding-bottom:56.25%;height:0;overflow:hidden}
body.interior .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:900px){
  body.interior .grid, body.interior .principles-grid{grid-template-columns:1fr}
  body.interior .pair-body{grid-template-columns:1fr;gap:18px}
  body.interior main ul{columns:1}
}

/* the two plain lists on Research. Scoped, so no other page's list is touched. */
body.interior main > section ul:not([class]){list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;
  columns:2;column-gap:clamp(36px,5vw,84px);max-width:88ch;border-top:1px solid var(--rule)}
body.interior main > section ul:not([class]) li{break-inside:avoid;margin:0;padding:13px 0;
  border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:clamp(20px,1vw + 15px,25px);color:var(--ink)}
@media(max-width:900px){body.interior main > section ul:not([class]){columns:1}}

/* ---------- the recognition page carries the brand ----------
   It opened on type alone against empty paper. The phoenix leads, and the plate made
   for this page sits opposite inside a fine gold ring: the idea of an emblem without
   faking one. */
.rec-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(36px,5vw,96px);align-items:center}
.rec-mark{width:96px;margin:0 0 clamp(20px,2.2vw,30px)}
.rec-hero-copy h1{max-width:15ch}
.rec-hero-copy .stand{max-width:44ch}
.rec-hero-art{position:relative;margin:0;justify-self:end;width:min(100%,420px);aspect-ratio:1}
.rec-hero-art picture{display:block;height:100%}
.rec-hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 44%;border-radius:50%;
  box-shadow:0 34px 80px rgba(8,43,88,.15)}
.rec-hero-art::after{content:"";position:absolute;inset:clamp(-24px,-2vw,-16px);border-radius:50%;
  border:1px solid var(--f2bm-gold);opacity:.5;pointer-events:none}
.rec-tally{max-width:66ch;padding-left:clamp(20px,2.2vw,28px);border-top:0;
  border-left:2px solid var(--f2bm-gold);padding-top:clamp(6px,1vw,12px);padding-bottom:clamp(6px,1vw,12px)}
@media(max-width:900px){
  .rec-hero-grid{grid-template-columns:1fr;gap:clamp(32px,6vw,44px)}
  .rec-hero-art{justify-self:start;width:min(78vw,320px)}
  .rec-hero-copy h1,.rec-hero-copy .stand{max-width:none}
}

/* ---------- ARTWORK PLACEMENTS ----------
   One plate family, six different shapes, so the page has rhythm instead of one
   treatment repeated. Every placement masks into the paper rather than stopping
   at a hard edge, and every one sits behind the type, never under it. */
.art{position:absolute;z-index:1;pointer-events:none}
.art picture{display:block;height:100%}
.art img{width:100%;height:100%;object-fit:cover}
.ledger,.turn,.test,.lang,.inherit{position:relative;overflow:hidden}
.ledger .wrap,.turn .wrap,.test .wrap,.lang .wrap,.inherit .wrap,.closing .wrap{position:relative;z-index:2}

/* a tall narrow seam of colour down the right edge of the Ledger */
.art-strip{right:0;top:0;bottom:0;width:min(16vw,190px);
  -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.art-strip img{object-position:64% 50%}
.art-strip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(272deg,transparent 0 12%,rgba(246,236,223,.5) 46%,var(--f2bm-cream-deep) 80%)}

/* a low painted band the pull-quote sits against */
.art-band{left:0;right:0;top:0;bottom:0;width:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 34%,#000 100%)}
.art-band img{object-position:center 52%;opacity:.55}
.art-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--f2bm-cream) 0 44%,rgba(251,247,239,.82) 68%,rgba(251,247,239,.28))}

/* the one arch on the page, opposite the question */
.art-arch{right:max(24px,calc(50vw - var(--wrap)/2));top:clamp(80px,9vw,140px);
  width:min(28vw,340px);height:min(42vw,520px);
  border-radius:min(14vw,170px) min(14vw,170px) 8px 8px;overflow:hidden;
  box-shadow:0 30px 70px rgba(8,43,88,.12)}
.art-arch img{object-position:56% 44%}

/* the vocabulary is edged on the left, mirroring the ecosystem edge on the right */
.art-left{left:0;top:0;bottom:0;width:min(22vw,260px);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.art-left img{object-position:30% 46%}
.art-left::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,transparent 0 8%,rgba(251,247,239,.5) 42%,var(--f2bm-cream) 76%)}

/* the only lozenge, against More room */
.art-lozenge{right:max(28px,calc(50vw - var(--wrap)/2));top:50%;transform:translateY(-50%);
  width:min(26vw,330px);height:min(26vw,330px);border-radius:50%;overflow:hidden;
  box-shadow:0 28px 64px rgba(8,43,88,.12)}
.art-lozenge img{object-position:center 48%}

/* the watercolour returns as a full band before the phoenix */
.art-close{position:relative;left:auto;right:auto;height:clamp(120px,14vw,190px);
  margin:clamp(50px,6vw,86px) 0 clamp(30px,3.4vw,46px);width:100%;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 74%,transparent);
  mask-image:linear-gradient(transparent,#000 30%,#000 74%,transparent)}
.art-close img{object-position:center 44%}

/* the sections that now carry artwork keep their copy clear of it */
.ledger .ledger-grid{max-width:min(100%,880px)}
.test .test-list,.test h2,.test .test-end{max-width:min(100%,860px)}
.test-list{grid-template-columns:repeat(2,1fr)}
.lang .lang-list,.lang h2{margin-left:min(20vw,220px)}
.inherit .rooms,.inherit h2,.inherit-end{max-width:min(100%,740px)}

@media(max-width:900px){
  .art-strip,.art-left{display:none}
  .art-arch,.art-lozenge{position:relative;right:auto;top:auto;transform:none;
    width:min(72vw,300px);height:min(76vw,340px);margin:0 0 clamp(26px,5vw,38px)}
  .art-band{-webkit-mask-image:none;mask-image:none}
  .art-band::after{background:linear-gradient(var(--f2bm-cream) 0 18%,rgba(251,247,239,.78))}
  .test .test-list,.lang .lang-list,.lang h2,.inherit .rooms{margin-left:0;max-width:none}
  .test-list{grid-template-columns:1fr}
}

/* ---------- inner-page components for the rewritten pages ---------- */
.page-hero{position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:2}
.art-hero-sweep{right:0;top:0;bottom:0;width:min(40vw,480px);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent)}
.art-hero-sweep img{object-position:62% 44%}
.art-hero-sweep::after{content:"";position:absolute;inset:0;
  background:linear-gradient(276deg,transparent 0 14%,rgba(251,247,239,.56) 48%,var(--f2bm-cream) 82%)}

.stand-cadence{margin:clamp(22px,2.6vw,34px) 0 clamp(20px,2.4vw,30px);max-width:34ch}
.stand-cadence p{padding:9px 0;border-bottom:1px solid var(--hair);font-size:clamp(21px,1.1vw + 16px,27px)}
.stand-cadence p:last-child{border-bottom:0}

.claim-line-sec h2,.notice h2,.organisers h2{max-width:18ch;font-size:clamp(36px,4.2vw,68px)}
.claim-end{margin:clamp(28px,3.2vw,44px) 0 0;max-width:36ch;font-family:var(--serif);
  font-size:clamp(25px,1.7vw + 15px,38px);line-height:1.14;color:var(--f2bm-magenta)}

.into{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin:clamp(26px,3vw,40px) 0;padding:0}
.into li{padding:9px 16px;border:1px solid var(--rule);font-family:var(--serif);
  font-size:clamp(18px,.9vw + 14px,23px);color:var(--ink)}

.talks{list-style:none;margin:clamp(40px,4.4vw,66px) 0 0;padding:0;counter-reset:talk}
.talks > li{counter-increment:talk;position:relative;padding:clamp(26px,3vw,44px) 0 clamp(22px,2.6vw,36px) 52px;
  border-top:1px solid var(--rule)}
.talks > li:last-child{border-bottom:1px solid var(--rule)}
.talks > li::before{content:counter(talk,decimal-leading-zero);position:absolute;left:0;top:clamp(30px,3.2vw,48px);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--f2bm-magenta)}
.talks h3{font-size:clamp(25px,1.5vw + 16px,36px);line-height:1.12;margin:0 0 14px;max-width:22ch}
.talks p{max-width:56ch;font-size:18px}
.talk-q{margin:14px 0 0!important;font-family:var(--serif);font-size:clamp(20px,1.1vw + 15px,26px);
  line-height:1.26;color:var(--head);max-width:46ch}
.requires{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:14px 0;padding:0}
.requires li{padding:7px 13px;border:1px solid var(--hair);font-size:15.5px;color:var(--body)}

.noticing{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;
  columns:2;column-gap:clamp(36px,4.6vw,80px);max-width:88ch;border-top:1px solid var(--rule)}
.noticing li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(19px,1vw + 14px,24px);line-height:1.26;color:var(--ink)}

.qlist{list-style:none;margin:clamp(32px,3.6vw,52px) 0 0;padding:0;counter-reset:q;
  border-top:1px solid var(--rule)}
.qlist li{counter-increment:q;position:relative;padding:15px 0 15px 46px;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(20px,1.1vw + 15px,26px);line-height:1.28;color:var(--ink);max-width:62ch}
.qlist li::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--f2bm-magenta)}
.qlist.big li{font-size:clamp(23px,1.5vw + 15px,34px);padding-block:20px;color:var(--head)}

.emphasis{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
  columns:2;column-gap:clamp(34px,4.4vw,76px);max-width:80ch;border-top:1px solid var(--rule)}
.emphasis li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(19px,1vw + 14px,24px);color:var(--ink)}

.contrapairs li b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,1.4vw + 15px,32px);line-height:1.18;color:var(--ink)}
.contrapairs li b em{font-style:normal;color:var(--f2bm-aqua-deep)}

@media(max-width:900px){
  .art-hero-sweep{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:200px;
    margin:0 0 clamp(24px,4vw,34px);-webkit-mask-image:none;mask-image:none}
  .art-hero-sweep img{height:200px;object-position:center 46%}
  .art-hero-sweep::after{background:linear-gradient(transparent 34%,rgba(251,247,239,.7) 76%,var(--f2bm-cream))}
  .noticing,.emphasis{columns:1}
  .talks > li{padding-left:38px}
  .claim-line-sec h2,.notice h2,.organisers h2{max-width:none;font-size:clamp(32px,8vw,44px)}
}

/* The artwork owns a reserved gutter and the copy is padded out of it. Padding the
   whole .wrap is what makes this hold: the previous version capped the width of
   named child classes instead, so any element nobody had listed - a grid, a list,
   a new section - ran straight underneath the picture. */
.art-strip + .wrap{padding-right:min(20vw,238px)}
.art-arch + .wrap{padding-right:min(32vw,392px)}
.art-lozenge + .wrap{padding-right:min(34vw,428px)}
.art-hero-sweep + .wrap{padding-right:min(42vw,516px)}
.art-left + .wrap{padding-left:min(24vw,292px)}
.art-band + .wrap > *{max-width:min(100%,640px)}
@media(max-width:900px){
  /* below 900 the art stacks above the copy, so the gutters come off entirely */
  .art-strip + .wrap,.art-arch + .wrap,.art-lozenge + .wrap,
  .art-hero-sweep + .wrap,.art-left + .wrap{padding-left:0;padding-right:0}
  .art-band + .wrap > *{max-width:none}
}
/* any section that carries artwork becomes its containing block */
.artful{position:relative;overflow:hidden}
.artful > .wrap{position:relative;z-index:2}
/* the spoken rhythm: short lines that stand as their own beat */
.cadence.spoken{max-width:52ch}
.cadence.spoken p{padding:11px 0;border-bottom:1px solid var(--hair);
  font-size:clamp(20px,1vw + 15px,26px);margin:0}
.cadence.spoken p:last-child{border-bottom:0}
.continuum b strong,.continuum span strong{font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
/* the Pathway sequence: five named stages, in order, as a sequence and not a menu */
.stages{list-style:none;margin:clamp(36px,4vw,58px) 0 0;padding:0;counter-reset:st;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(16px,2vw,30px);border-top:1px solid var(--rule)}
.stages li{padding:24px 0 20px;border-bottom:1px solid var(--hair);position:relative}
.stages li + li::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1vw,15px));top:34px;bottom:24px;
  width:1px;background:linear-gradient(var(--f2bm-gold),transparent)}
.stages span{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  color:var(--f2bm-magenta);margin-bottom:10px}
.stages b{display:block;font-family:var(--serif);font-weight:400;line-height:1.16;
  font-size:clamp(19px,.9vw + 14px,24px);color:var(--ink)}
@media(max-width:900px){
  .stages{grid-template-columns:1fr;gap:0}
  .stages li + li::before{display:none}
}
/* ---------- About opens on the person ---------- */
.about-hero{position:relative;overflow:hidden}
.about-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,88px);align-items:center;position:relative;z-index:2}
.about-portrait{margin:0;justify-self:end;width:min(34vw,420px);
  border-radius:min(17vw,210px) min(17vw,210px) 12px 12px;overflow:hidden;
  box-shadow:0 34px 80px rgba(8,43,88,.16)}
.about-portrait img{width:100%;height:auto;display:block}
.about-hero-copy h1{max-width:15ch}
.about-hero-copy .became{margin:clamp(22px,2.6vw,34px) 0 0}
/* the five places fill the page on About rather than stopping two thirds across */
.about-realms .realms{max-width:none}
.about-realms .realms > li{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
@media(max-width:900px){
  .about-hero .wrap{grid-template-columns:1fr;gap:clamp(26px,5vw,38px)}
  .about-portrait{justify-self:start;width:min(74vw,340px);grid-row:1}
  .about-realms .realms > li{grid-template-columns:1fr}
}
/* the five things she became: a list, not bullets */
.became{list-style:none;margin:clamp(22px,2.6vw,34px) 0 clamp(24px,2.8vw,36px);padding:0;
  max-width:34ch;border-top:1px solid var(--rule)}
.became li{padding:11px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-size:clamp(20px,1vw + 15px,25px);color:var(--ink)}