:root{--ink:#1F1D1A;--ink-2:#33302b;--muted:#6F6A60;--faint:#96918a;--cream:#F7F5F0;
   --plum:#6E4A63;--mauve:#B58FA8;--ember:#A26B3E;--line:rgba(31,29,26,.14);
   --serif:Newsreader,Georgia,"Times New Roman",serif;
   --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   --ease:cubic-bezier(.22,.61,.36,1);--slide:cubic-bezier(.65,0,.25,1)}
 *{box-sizing:border-box}
 /* every page keeps the scrollbar's room, so a page too short to scroll draws its header where the others do */
 html{scrollbar-gutter:stable}
 body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
   -webkit-font-smoothing:antialiased}
 .wrap{width:min(1100px,calc(100% - 56px));margin:0 auto}

 /* ── the same head the door has, in ink ────────────────────────────── */
 /* the door's header, exactly: wordmark centred, Sign in at the right, and
    the left slot — empty there — carrying the way back here. */
 .top{position:relative;height:23.4px;display:flex;justify-content:center;margin:34px 0 0}
 .mark{height:23.4px;width:auto;display:block;opacity:.96}
 .back{position:absolute;left:34px;top:50%;transform:translateY(-50%);display:inline-flex;
   align-items:center;gap:7px;font-size:13.5px;color:var(--muted);text-decoration:none;
   padding:6px 10px;margin-left:-10px;transition:color .16s ease}
 .back span{transition:transform .22s var(--ease)}
 .back:hover{color:var(--ink)}
 .back:hover span{transform:translateX(-3px)}
 /* the wordmark itself — `wm-dark`, the one drawn for a light ground; the
    white one (a1) is what the hero uses over the photograph */
 .links{position:absolute;right:34px;top:50%;transform:translateY(-50%);
   display:flex;align-items:center;gap:24px;font-size:13.5px}
 .links a{color:var(--muted);text-decoration:none}
 .links a:hover{color:var(--ink)}
 .links .signin{color:var(--ink);border:1px solid rgba(31,29,26,.4);border-radius:8px;padding:8px 17px;line-height:1;
   text-decoration:none;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
 /* on hover it fills with its outline's colour and its type turns over */
 .links .signin:hover{background:#1F1D1A;border-color:#1F1D1A;color:#F7F5F0}

 /* ── the statement ─────────────────────────────────────────────────── */
 .head{padding:76px 0 0}
 .eb{margin:0;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--plum)}
 .h1{margin:18px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.1vw,50px);
   line-height:1.14;letter-spacing:-.024em;max-width:19ch}
 .head p{margin:22px 0 0;font-family:var(--serif);font-size:clamp(17px,1.35vw,20px);line-height:1.5;
   color:var(--ink-2);max-width:52ch}

 /* ── a person: name, role, bio and credentials ─────────────────── */
 .p__name{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,32px);
   letter-spacing:-.022em;line-height:1.1}
 .p__role{margin:9px 0 0;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
   color:var(--ember)}
 .p__bio{margin:22px 0 0;font-family:var(--serif);font-size:17.5px;line-height:1.56;
   letter-spacing:-.008em;color:var(--ink-2);max-width:44ch}
 /* education and prior roles as ruled rows: label left, the fact itself in ink. Set in
    the bio's face and size so its 44ch is the bio's measure, and the rows end where the
    text column does; the rows set their own type. */
 .p__cred{margin:24px 0 0;max-width:44ch;border-top:1px solid var(--line);
   font-family:var(--serif);font-size:17.5px}
 .p__cred div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;
   border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12.5px;line-height:1.6}
 .p__cred dt{padding-top:3px;font-weight:600;color:var(--muted);letter-spacing:.14em;
   text-transform:uppercase;font-size:9.5px}
 .p__cred dd{margin:0;color:var(--ink)}

 .foot{border-top:1px solid rgba(31,29,26,.1);padding:24px 0 34px}
 .foot__row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--faint)}
 .foot__row a{color:var(--muted);text-decoration:none;margin-left:24px}

 .rise{opacity:0;transform:translateY(20px);
   transition:opacity .7s var(--ease),transform .7s var(--ease)}
 .rise.in{opacity:1;transform:none}
 @media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}
 @media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
   .back{left:22px} .links{right:22px}
   .head{padding:56px 0 0}
 }


/* ── the band, as on the door ─────────────────────────────────────────────
   The page ends the way the homepage does: dark, with the address set large
   and the notice a caption beneath it. Values match the landing page's. */
.foot{background:#141118;border-top:0;color:rgba(247,245,240,.62);
  margin-top:78px;padding:0 0 20px}
.foot__band{padding:38px 0 0;text-align:center}
.foot__ask{margin:0;font-size:10px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(247,245,240,.42)}
.foot__say{display:inline-block;margin-top:11px;font-family:var(--serif);
  font-size:clamp(22px,2.4vw,31px);letter-spacing:-.02em;color:#F7F5F0;text-decoration:none;
  border-bottom:1px solid rgba(247,245,240,.28);padding-bottom:3px;
  transition:border-color .2s ease}
.foot__say:hover{border-bottom-color:#F7F5F0}
.foot__row{justify-content:center;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(247,245,240,.08);color:rgba(247,245,240,.34);font-size:11.5px}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){ .foot__band{padding:30px 0 0} }

 /* the site's pages beside Sign in, in the slim bar's small spaced capitals; this one marked */
 .links{gap:28px}
 .links a:not(.signin){font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;
   padding:5px 0;border-bottom:1px solid transparent}
 .links a[aria-current=page]{color:var(--ink);border-bottom-color:rgba(31,29,26,.4)}
 @media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.links a:not(.signin){display:none}}

 /* Sign in as on every page: the home page's pill, measured to the platform's door */
 .links .signin{font-size:14px;font-weight:500;line-height:20px;padding:8px 18px}
 /* the wordmark leads home, as on every page */
 .mark-link{display:block}

 /* on hover, a hairline draws out from the centre beneath the wordmark, as under the current page */
 .mark-link{position:relative}
 .mark-link::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--plum);
   transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
 .mark-link:hover::after,.mark-link:focus-visible::after{transform:scaleX(1)}
 @media(prefers-reduced-motion:reduce){.mark-link::after{transition:none}}

/* ── People: the leadership and the experts as two cards of one height on a stage ──
   The chosen card fills the page's column; the other shows as a strip at the screen's edge,
   carrying its name, and slides in when chosen. The column widens here to what an ordinary
   laptop allows, and the stage's card is always exactly the column. */
@media(min-width:821px){main.wrap{width:min(1200px,calc(100vw - 160px))}}

/* the two titles are the tabs, set as labels for the card rather than a second headline: the chosen
   one in ink over a short plum rule that slides between them */
.sl-nav{position:relative;display:flex;gap:32px;margin-top:52px}
.sl-nav button{all:unset;cursor:pointer;padding:0 0 12px;font-family:var(--serif);font-size:clamp(24px,2vw,30px);
  letter-spacing:-.016em;line-height:1;color:rgba(31,29,26,.34);transition:color .3s ease}
.sl-nav button:hover{color:rgba(31,29,26,.6)}
.sl-nav button[aria-selected=true]{color:var(--ink)}
.sl-nav button:focus-visible{outline:2px solid rgba(110,74,99,.5);outline-offset:4px;border-radius:4px}
.sl-k{position:absolute;left:0;bottom:-1px;height:2px;background:var(--plum);transition:transform .6s var(--slide),width .6s var(--slide)}

/* the stage is the column, a gap and a strip of the card not chosen at either side: the strip runs
   to the screen's edge, never wider than 88px, and where it stops short of the edge it ends in
   the card's own rounded corners */
.sl{--pw:min(1200px,calc(100vw - 160px));--gap:24px;--peek:min(88px,calc((100vw - var(--pw)) / 2 - var(--gap)));--sw:calc(var(--pw) + 2 * (var(--gap) + var(--peek)));
  width:var(--sw);margin:22px 0 0 calc(50% - var(--sw) / 2);overflow:hidden;overflow:clip;touch-action:pan-y;transition:height .6s var(--slide);
  clip-path:inset(0 round 24px)}
.sl-track{display:flex;align-items:flex-start;gap:var(--gap);padding-left:calc(var(--gap) + var(--peek));transition:transform .7s var(--slide)}
.sl.is-ex .sl-track{transform:translateX(calc(-1 * (var(--pw) + var(--gap))))}
.sl-p{position:relative;flex:0 0 var(--pw);border-radius:24px;scroll-margin-top:40px}

/* the leadership: three people side by side, each portrait over name, role, bio and credentials */
.sl-ld{background:#EEE9E0;padding:56px}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start}
.pc{scroll-margin-top:40px}
.pc-shot{aspect-ratio:6/5;border-radius:16px;overflow:hidden;background:linear-gradient(162deg,#2a2630,#1b1a21)}
.pc-shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.pc .p__name{margin-top:24px;font-size:clamp(24px,2.1vw,31px)}
.pc .p__role{margin-top:10px}
.pc .p__bio{margin-top:18px;max-width:none}
.pc .p__cred{margin-top:22px;max-width:none}
.pc .p__cred div{grid-template-columns:96px 1fr;font-size:13px}
/* side by side, the three people share their rows: names, roles, bios and each credential row start
   level, and a credential row is as tall as its tallest, so the rules beneath them line up */
@media(min-width:1180px){
  .people{grid-template-rows:repeat(6,auto);row-gap:0}
  .pc{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .pc .p__cred{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}

/* the experts: the heading, then each kind of expert a ruled row in a house colour, its kind at
   left and its people as equals at right */
.sl-ex{overflow:hidden;overflow:clip;display:flex;flex-direction:column;padding:60px 56px 68px 68px;background:#17131A;color:#F4F1EA}
.sl-ex::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(46% 60% at 6% 12%,rgba(110,74,99,.5),transparent 72%),radial-gradient(42% 56% at 96% 92%,rgba(138,91,51,.34),transparent 72%)}
.xn-in{position:relative;flex:1;display:flex;flex-direction:column}
/* the heading and its line beneath it, set like the page's own statement and on the card's left edge */
.xn-head h2{max-width:21em;margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.7vw,42px);line-height:1.14;letter-spacing:-.022em;color:#F6F2EA;text-wrap:balance}
.xn-head p{max-width:56ch;margin:18px 0 0;font-family:var(--serif);font-size:clamp(17px,1.35vw,19px);line-height:1.52;color:rgba(244,241,234,.74)}
.xa-list{margin-top:36px;border-top:1px solid rgba(244,241,234,.12)}
.xa{--t:#E3C6D8;display:grid;grid-template-columns:270px 1fr;gap:56px;padding:30px 0 28px;border-bottom:1px solid rgba(244,241,234,.12)}
/* the card's own edge closes the last group */
.xa:last-child{padding-bottom:0;border-bottom:0}
.xa--bronze{--t:#F1D3B3}.xa--jade{--t:#BFD8CC}
.xa-k h3{display:flex;align-items:flex-start;gap:10px;margin:0;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  line-height:1.3;text-transform:uppercase;color:var(--t)}
/* the square sits beside the label's first line, however many lines the label runs to */
.xa-k h3::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:calc((1.3em - 8px) / 2);border-radius:2px;background:var(--t);box-shadow:0 0 12px var(--t)}
.xa-k p{margin:12px 0 0;font-family:var(--serif);font-size:16.5px;line-height:1.5;color:rgba(244,241,234,.66)}
.xa-l{list-style:none;margin:0;padding:0}
.xa-l li{position:relative;padding:7px 0 7px 22px;font-family:var(--serif);font-size:17.5px;line-height:1.5;letter-spacing:-.004em;color:#F2EEE6}
.xa-l li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;background:var(--t)}
/* side by side with its label, the list starts level with it: the first line's capitals sit
   where the label's do, not a row's padding and a larger face's leading lower */
@media(min-width:961px){.xa-l{margin-top:-10px}}
/* with the leadership side by side the two cards share one height; the shorter experts card
   keeps its heading at the top and its rows at the foot */
@media(min-width:1180px){
  .xn-head{margin-bottom:36px}
  .xn-in .xa-list{margin-top:auto}
}

/* the card at the edge shows only itself and its name, never slivers of its text. The name starts
   at the strip's top and rides down it with the reader, clear of the header that shows on scrolling
   up; the stage clips rather than hides its overflow so that it can. */
.sl-peek{all:unset;position:absolute;top:0;bottom:0;z-index:3;width:var(--peek);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  padding-top:60px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.sl-pk{position:sticky;top:88px;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl}
.sl-peek i{font-style:normal;font-size:13px;letter-spacing:0;writing-mode:horizontal-tb}
.sl-ex .sl-peek{left:0;color:#D8B9CD}
.sl-ld .sl-peek{right:0;color:var(--plum)}
.sl.is-ld .sl-ex .sl-peek,.sl.is-ex .sl-ld .sl-peek{opacity:1;pointer-events:auto;transition-delay:.35s}
.sl.is-ld .sl-ex:hover,.sl.is-ex .sl-ld:hover{filter:brightness(1.08)}
.sl-ld>:not(.sl-peek),.sl-ex .xn-in{transition:opacity .45s ease .2s}
.sl.is-ex .sl-ld>:not(.sl-peek),.sl.is-ld .sl-ex .xn-in{opacity:0;transition-delay:0s}
/* on a phone, where the strip has no room for its name, the tabs pin to the top of the screen once
   they have scrolled away and while the cards are in view, below the header when it shows */
.sl-pin{display:none}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .sl-pin{display:block;position:fixed;left:0;right:0;top:0;z-index:55;height:56px;opacity:0;pointer-events:none;transform:translateY(-8px);
    transition:opacity .22s ease,transform .3s var(--ease),top .3s var(--ease)}
  .sl-pin.is-on{opacity:1;pointer-events:auto;transform:none}
  .hb.is-on ~ .sl-pin{top:64px}
  .sl-pin::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(242,240,234,.84);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(31,29,26,.1);
    transition:background-color .3s ease,border-color .3s ease}
  .sl-pin.is-ondark::before{background:rgba(23,19,26,.72);border-bottom-color:rgba(242,240,234,.1)}
  .sl-pin-in{position:relative;width:calc(100% - 56px);height:100%;margin:0 auto;display:flex;align-items:stretch;gap:24px}
  .sl-pin button{all:unset;cursor:pointer;display:flex;align-items:center;font-family:var(--serif);font-size:19px;letter-spacing:-.014em;
    color:rgba(31,29,26,.4);transition:color .25s ease}
  .sl-pin button[aria-current=true]{color:var(--ink)}
  .sl-pin.is-ondark button{color:rgba(244,241,234,.5)}
  .sl-pin.is-ondark button[aria-current=true]{color:#F4F1EA}
  .sl-pin button:focus-visible{outline:2px solid rgba(110,74,99,.5);outline-offset:2px;border-radius:3px}
  .sl-pin-k{position:absolute;left:0;bottom:-1px;height:2px;background:var(--plum);transition:transform .5s var(--slide),width .5s var(--slide),background-color .3s ease}
  .sl-pin.is-ondark .sl-pin-k{background:#D8B9CD}
}

/* arriving on a card names it at once, without the slide */
.sl.is-still .sl-track,.sl.is-still,.sl.is-still *,.sl-nav.is-still .sl-k{transition:none!important}

/* narrower than that, three columns would leave the bios too short a line: each person a row instead */
@media(max-width:1179px){
  .people{grid-template-columns:1fr;gap:0}
  .pc{display:grid;grid-template-columns:240px 1fr;column-gap:44px;align-content:start;padding:44px 0;border-top:1px solid var(--line)}
  .pc-shot{grid-row:1 / span 5}
  .pc > :not(.pc-shot){grid-column:2}
  .pc:first-child{padding-top:0;border-top:0}
  .pc:last-child{padding-bottom:0}
  .pc .p__name{margin-top:0}
  .pc .p__bio,.pc .p__cred{max-width:44ch}
  .pc-shot{aspect-ratio:4/5}
}
@media(max-width:960px){
  .pc{grid-template-columns:200px 1fr;column-gap:36px}
  .xa{grid-template-columns:1fr;gap:16px}
}
/* on a phone the column is the screen less its gutters, the next card a sliver at the edge */
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .sl{--pw:calc(100vw - 56px);--gap:12px}
  .sl-nav{gap:24px;margin-top:40px}
  .sl-nav button{font-size:24px}
  .sl-ld{padding:28px 22px}
  .sl-ex{padding:40px 22px 36px}
  .pc{grid-template-columns:1fr;padding:32px 0}
  .pc-shot{grid-row:auto;margin-bottom:22px}
  .pc > :not(.pc-shot){grid-column:auto}
  .pc-shot{max-width:280px;aspect-ratio:4/5}
  .sl-peek{display:none}
}
@media(prefers-reduced-motion:reduce){.sl,.sl-track,.sl-k,.sl-pin,.sl-pin-k{transition:none}}

main:has(.sl) + .foot{margin-top:96px}

/* the experts' label, drawn only on a phone */
.xn-eb{display:none}

/* ── on a phone, one page rather than a stage: the leadership as compact profiles, each with its full bio, then the experts as a dark band to the screen's edges, running into the
   footer. The tabs become a bar that jumps to either and, pinned once it scrolls away, names the one in view. ── */
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  html{overflow-anchor:none}
  .eb{font-size:11px}
  .back{padding:12px;margin-left:-12px}
  .top .mn-btn{color:var(--ink)}
  .mn-btn ~ .back{display:none}
  .head .h1{font-size:clamp(34px,9.6vw,40px)}
  .head p:not(.eb){font-size:17.5px}

  .sl-nav{margin-top:36px;border-bottom:1px solid var(--line)}
  .sl-nav button{font-size:22px;padding-bottom:12px}
  .sl{width:auto;margin:0;overflow:visible;clip-path:none;transition:none}
  .sl-track,.sl.is-ex .sl-track{display:block;padding:0;transform:none;transition:none}
  .sl-p{flex:none;width:auto;border-radius:0;scroll-margin-top:64px}
  .sl.is-ex .sl-ld>:not(.sl-peek),.sl.is-ld .sl-ex .xn-in{opacity:1}

  .sl-ld{background:none;padding:0}
  .pc,.pc:first-child,.pc:last-child{grid-template-columns:84px 1fr;column-gap:18px;padding:30px 0;scroll-margin-top:64px;border-top:0}
  .pc:last-child{padding-bottom:40px}
  .pc .pc-shot{grid-row:1 / span 2;width:84px;max-width:none;aspect-ratio:1;margin:0;border-radius:12px}
  .pc .p__name{grid-column:2;align-self:end;margin:0;font-size:25px}
  .pc .p__role{grid-column:2;align-self:start;margin-top:8px;font-size:10.5px;line-height:1.45}
  .pc > .p__bio,.pc > .p__cred{grid-column:1 / -1}
  .pc .p__bio{margin:0;padding-top:18px;font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:none}
  .pc .p__cred{margin-top:20px;max-width:none}
  .pc .p__cred div{grid-template-columns:96px 1fr;font-size:13px}
  .p__cred dt{font-size:10.5px;padding-top:2px}

  .sl-ex{margin:0 -28px;padding:80px 28px 52px;display:block}
  .sl-ex::before{background:radial-gradient(80% 40% at 0% 0%,rgba(110,74,99,.5),transparent 72%),radial-gradient(80% 36% at 100% 100%,rgba(138,91,51,.3),transparent 72%)}
  .xn-eb{display:block;margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#D8B9CD}
  .xn-head h2{font-size:clamp(27px,7.6vw,32px)}
  .xn-head p{font-size:17px}
  .xa-list{margin-top:32px}
  .xa{gap:14px;padding:26px 0}
  .xa:last-child{padding-bottom:0}
  .xa-k h3{font-size:11px}
  .xa-k p{margin-top:10px;font-size:16px;font-style:italic;color:rgba(244,241,234,.82)}
  .xa-l li{font-size:16.5px;padding:6px 0 6px 22px}
  .xa-l li::before{top:18px}
  main:has(.sl) + .foot{margin-top:0;box-shadow:inset 0 1px rgba(244,241,234,.08)}
}

html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ── the header past the top: the page's own header scrolls away; a compact glass band with the same
   items in the same places shows only while the visitor scrolls up, bone over the page, dark over the experts and the footer ── */
.hb{position:fixed;top:0;left:0;right:0;height:64px;z-index:60;opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .22s ease,transform .3s var(--ease)}
.hb.is-on{opacity:1;pointer-events:auto;transform:none}
.hb::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(242,240,234,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(31,29,26,.1);
  transition:background-color .3s ease,border-color .3s ease}
.hb.is-ondark::before{background:rgba(23,19,26,.62);border-bottom-color:rgba(242,240,234,.1)}
.hb-mark{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:block}
.hb-mark img{display:block;height:23.4px;width:auto;opacity:.96;transition:opacity .3s ease}
.hb-mark .wm-w{position:absolute;left:0;top:0;opacity:0}
.hb.is-ondark .wm-p{opacity:0}.hb.is-ondark .wm-w{opacity:.96}
.hb-mark::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--plum);transform:scaleX(0);transition:transform .35s var(--ease)}
.hb.is-ondark .hb-mark::after{background:rgba(247,245,240,.8)}
.hb-mark:hover::after,.hb-mark:focus-visible::after{transform:scaleX(1)}
.hb .back,.hb .links a{transition:color .3s ease,border-color .3s ease,background-color .2s ease}
.hb.is-ondark .back,.hb.is-ondark .links a:not(.signin){color:rgba(247,245,240,.72)}
.hb.is-ondark .back:hover,.hb.is-ondark .links a:not(.signin):hover{color:#F7F5F0}
.hb.is-ondark .links a[aria-current=page]{color:#F7F5F0;border-bottom-color:rgba(247,245,240,.5)}
.hb.is-ondark .links .signin{color:#F7F5F0;border-color:rgba(244,244,246,.6)}
.hb.is-ondark .links .signin:hover{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.hb .back{left:22px}.hb .links{right:22px}}
@media(prefers-reduced-motion:reduce){.hb{transition:none}}

/* ── the statement, and the people and experts under it, leading down the page ── */
/* the statement with more presence */
.head .h1{font-size:clamp(34px,4vw,60px);max-width:22ch}
.head p:not(.eb){font-size:clamp(18px,1.45vw,21px)}

/* on a narrow phone the pill keeps its type and gives up some side padding, clear of the wordmark */
@media(max-width:420px){.links .signin{padding:7px 13px}}

/* a phone on its side keeps a phone's column and gutters */
@media(max-width:960px) and (max-height:500px) and (pointer:coarse){main.wrap{width:calc(100% - 56px)}}