/* Shared editorial system aligned with the approved homepage, September 2026. */
:root{--ink:#30383b;--body:#3e4447;--head:#087d91;--sp:clamp(60px,7vw,100px)}
body{font-size:20px;background-color:var(--f2bm-cream)}
main{height:auto;max-height:none;overflow:visible}
h1{color:var(--head)}
h2{font-size:clamp(36px,4.5vw,62px);line-height:1.08}
h3{font-size:clamp(27px,3vw,38px);line-height:1.15}
h1+p,h2+p,h3+p{margin-top:1em}
.site-header{position:relative}
.site-header nav{flex-wrap:wrap}
.site-header .cta,.btn,body.interior .btn-teal{background:#08768a;color:#fff;border-color:#08768a}
.site-header .cta:hover,.btn:hover{background:#075c6a;color:#fff}
.btn-ghost{background:transparent!important;color:#08768a!important}
.page-hero .stand{max-width:42ch}
.page-hero .measure{margin-top:24px}
footer .foot-legal{font-size:14px}
.closing{padding-bottom:36px}
.book-detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.6fr);align-items:center;gap:clamp(28px,6vw,80px)}
.book-detail-layout .book-detail-cover{width:100%;max-width:300px;justify-self:center;height:auto;box-shadow:0 16px 30px #42372118}
.book-reservation{margin-top:30px;max-width:43ch}
.book-reservation .small,.small{font-size:16px;line-height:1.6;margin-top:16px}
.book-reservation .btn{display:inline-block}
.enquiry-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:start}
.enquiry-layout a{overflow-wrap:anywhere}
.site-enquiry{display:grid;gap:22px;max-width:680px}
.site-enquiry label{display:block;font-size:18px;font-weight:500;margin-bottom:8px}
.site-enquiry input:not([type=checkbox]),.site-enquiry textarea,.site-enquiry select{width:100%;padding:13px 15px;border:1px solid #9c9a90;border-radius:3px;background:#fdfcf9;color:#30383b;font:inherit}
.site-enquiry input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:#08768a}
.site-enquiry .choice{display:flex;gap:12px;align-items:start;font-weight:400}
.site-enquiry .btn{justify-self:start;font:inherit;padding:14px 24px;cursor:pointer}
.site-enquiry .field p{margin-bottom:0}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 54px;margin:36px 0}
.offer-grid article{border-top:1px solid var(--rule);padding-top:22px}
.speaking-hero-photo{margin:0 auto 36px}
.speaking-hero-photo img{width:100%;height:auto}
.speaking-hero-photo figcaption{font-size:16px;margin-top:12px;color:var(--teal-small)}
.founder-legacy{font:400 clamp(28px,3vw,40px)/1.25 var(--serif);color:#963166;border-left:2px solid var(--f2bm-gold);padding-left:22px;margin-top:32px}
.home-more-living .hero .signature{font:400 clamp(22px,2.5vw,30px)/1.35 var(--serif);max-width:40ch;margin:24px auto}
.tiers button[aria-pressed=true]{background:var(--f2bm-gold);color:#082b58}
[hidden]{display:none!important}
body.high-contrast .site-enquiry input,body.high-contrast .site-enquiry select,body.high-contrast .site-enquiry textarea{background:white;color:black;border-color:black}
@media(max-width:750px){.book-detail-layout,.enquiry-layout,.offer-grid{grid-template-columns:1fr}.book-detail-layout .book-detail-cover{max-width:230px;grid-row:2}.principles-grid[style],.pair-body[style]{grid-template-columns:1fr!important}.site-header nav{gap:12px 18px}.site-enquiry .btn{width:100%}.page-hero .wrap{min-width:0}main h1,main h2,main h3{overflow-wrap:break-word}.site-header .header-in{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.leadership{background:#edf4f1;color:var(--body)}
.leadership blockquote{color:var(--head)}
.leadership .eyebrow{color:var(--teal-small)}
.leadership-note p{color:var(--body)}
.leadership .wash{mix-blend-mode:multiply;opacity:.18}
.leadership .wash img{clip-path:none}
body.high-contrast .leadership,body.high-contrast .leadership *{background:white;color:black}
.speaking-photo{margin:0 auto 40px}
.speaking-photo img{width:100%;height:auto;border-radius:6px;display:block}
.speaking-photo figcaption{text-align:center}

/* Recognition chronology: the narrow-screen collapse every other two-column
   construct on the site already had. .year is a 190px + 1fr grid whose list is
   then set in two CSS columns, and .mark carries a hard min-width:8.4em, so on a
   phone the tier label alone was wider than its column and every award title was
   pushed outside the viewport and clipped. */
@media(max-width:900px){
  .year{grid-template-columns:1fr;gap:12px}
  .year h3{font-size:clamp(34px,8vw,48px)}
  .year ul{columns:1}
}

/* The media biography is written to be lifted whole, so it was one block of
   about eleven hundred characters running the full width of the page: roughly
   ninety characters a line, in a thirty-two pixel serif, with no paragraph to
   rest on. The words are unchanged. It now breaks where its subject changes and
   sits on a measure a person can actually read down. */
.media-bio{max-width:62ch;margin-top:26px}
.media-bio p{font-family:var(--serif);font-size:clamp(21px,.9vw + 16px,26px);
  line-height:1.5;color:var(--ink);margin:0 0 .9em}
.media-bio p:last-child{margin-bottom:0}

/* "The point is not to leave agreeing with me" - hierarchy correction.
   The heading ran to sixty-eight pixels on a full sentence, which left a wide
   empty band beside it; the eight examples flowed through a two-column CSS
   column-set that broke them into uneven halves, in a serif close to the
   heading's own; and the magenta line opened a second hero-sized block beneath.
   Everything asked for attention at once.

   Now: heading and takeaway hold the left, the examples read as one list down
   the right, and the magenta line is a takeaway rather than a second headline.
   Scoped to .notice so the shared .noticing and .emphasis lists on other pages
   are untouched. Wording is unchanged. */
.notice-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,80px);align-items:start;position:relative;z-index:2}
.notice .notice-lede{max-width:34ch}
.notice h2#notice-title{font-size:clamp(30px,2.9vw + 8px,52px);line-height:1.12;max-width:22ch}
/* One restrained separator, between the heading and what it concludes. */
.notice .claim-end{margin-top:clamp(24px,2.6vw,34px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--rule);max-width:30ch;
  font-size:clamp(22px,.9vw + 17px,30px);line-height:1.22}
.notice .measure{margin-top:12px;font-size:18px}
/* One column, body sans, even spacing, and no decorative dash. */
.notice .noticing{columns:1;column-gap:0;margin:0;border-top:0;padding-top:0}
.notice .noticing li{font-family:var(--sans);font-size:clamp(18px,.3vw + 17px,20px);
  line-height:1.5;color:var(--body);padding:0 0 0 0;margin:0 0 clamp(13px,1.3vw,18px)}
.notice .noticing li:last-child{margin-bottom:0}
.notice .noticing li::before{display:none}
/* The artwork stays at the edge and behind, clear of both columns. */
.notice .art{z-index:0;opacity:.5}
@media(max-width:860px){
  .notice-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  .notice .notice-lede{max-width:none}
}

/* A display line-height of 1.08 is right for a heading that fits on one line and
   wrong for one that wraps: in the narrow left column of .run, three lines of
   fifty-four pixel serif sat almost on top of each other. Enough leading to
   separate them, not enough to loosen the setting. */
.run h2{line-height:1.16}

/* Type scale: the opening heading is the same size wherever it opens a page.
   The reservation pages open in a .band rather than a .page-hero, so their h1
   was never picked up by the hero rule and fell back to the browser default of
   forty pixels, against sixty-nine everywhere else. Same clamp as .page-hero h1,
   so the two stay in step if either is ever changed. */
.reserve-wrap h1{font-size:clamp(44px,5.4vw,92px);line-height:1.01;max-width:17ch}

/* Standing statements get one treatment. The permission statement sets it:
   centred on a paper panel, held between two gold rules, in teal serif. The
   claim lines were doing the same job left-aligned between two hairlines, at a
   different size and colour, so they read as a different kind of thing. They
   now match, and the type scale matches with them. */
.claim-line{padding-block:clamp(40px,6vw,72px);padding-inline:28px;text-align:center;
  border-top:2px solid var(--f2bm-gold);border-bottom:2px solid var(--f2bm-gold);
  background:var(--f2bm-paper)}
.claim-line p{margin:0 auto;font:400 clamp(40px,5.8vw,76px)/1.05 var(--serif);
  max-width:22ch;color:var(--teal-small);text-wrap:balance}
@media(max-width:650px){
  .claim-line{padding:38px 16px}
  .claim-line p{font-size:clamp(36px,9vw,54px)}
}