/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#1C1D19;
  --bone:#F3EFE4;
  --rose:#D7B7AD;
  --blush:#EFE1DA;
  --sand:#C3BAA6;
  --stone:#6A655A;   /* darkened from #8A857A for WCAG 1.4.3 AA */

  --display:"Archivo","Arial Narrow",Impact,sans-serif;
  --sans:"Switzer","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:clamp(28px,2.6vw,54px);
  --pad-x:4.2%;
  --rule:5px;
  --announce-h:47px;
  --header-h:92px;
  --panel-h:172px;

  --s1:8px;  --s2:16px; --s3:24px; --s4:40px;
  --s5:52px; --s6:72px; --s7:96px; --s8:128px;

  /* brand mark: clear space equal to the symbol inner star */
  --mark-clear:9px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* ---------- button reset ----------
   A <button> carries operating system chrome unless it is cleared. Several
   classes on this site are used on both <a> and <button>, so the reset has to
   be global and the component styles then apply on top of it. Anything that
   should look like a control still declares its own background and border. */
button{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  font:inherit;
  color:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  background:none;
  border:0;
  border-radius:0;
  cursor:pointer;
}
button:disabled{cursor:not-allowed}
/* the shared link style must read identically whichever element carries it */
button.elink{padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
::selection{background:var(--rose);color:var(--ink)}

html{overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}

.wrap{
  width:100%;
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s5);
}

/* ============================================================
   3. TYPE SCALE
   ============================================================ */
.poster{
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.005em;
  font-size:clamp(34px,5.4vw,132px);
}
.block-head{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(30px,3.4vw,64px);
}
.mission{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.01em;
  font-size:clamp(28px,4.2vw,96px);
}
.story-head{
  font-size:clamp(19px,1.5vw,28px);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.01em;
}
.kicker{
  font-size:clamp(12.5px,.92vw,16px);
  font-weight:500;
  line-height:1.4;
  color:var(--stone);
  letter-spacing:.01em;
}
.dot{padding:0 6px;color:var(--stone)}
.body-sm{font-size:clamp(15px,1.05vw,19px);line-height:1.55}
.lede{font-size:clamp(17px,1.6vw,26px);line-height:1.5}

/* ============================================================
   4. EDITORIAL LINK
   ============================================================ */
.elink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.elink .arw{transition:transform .25s ease}
.elink:hover .arw,.elink:focus-visible .arw{transform:translateX(6px)}
.elink:hover,.elink:focus-visible{border-bottom-color:currentColor}

.btn{
  display:inline-block;
  padding:13px 26px;
  background:var(--bone);
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--bone);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--bone)}
.btn--line{background:transparent;color:var(--bone);border-color:rgba(243,239,228,.55)}
.btn--line:hover,.btn--line:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}

:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

/* ============================================================
   5. PLACEHOLDER SLOTS
   ============================================================ */
.slot{
  position:relative;
  display:block;
  width:100%;
  background:var(--blush);
  border:1px solid rgba(28,29,25,.10);
  overflow:hidden;
}
.slot::before{content:"";display:block;padding-top:75%}
.slot--wide::before{padding-top:43.75%}
.slot--169::before{padding-top:56.25%}
.slot--32::before{padding-top:66.66%}
.slot__tag{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
}
.slot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.on-ink .slot{background:rgba(243,239,228,.09);border-color:rgba(243,239,228,.16)}
.on-ink .slot__tag{color:rgba(243,239,228,.5)}

/* ============================================================
   6. FIELDS AND RULES
   ============================================================ */
.field-ink{background:var(--ink);color:var(--bone)}
.hero-field{position:relative}
.field-rose{background:var(--rose);color:var(--ink)}
.field-blush{background:var(--blush);color:var(--ink)}
.field-bone{background:var(--bone);color:var(--ink)}
.hr{border:0;border-top:var(--rule) solid var(--ink);margin:0}
.on-ink .kicker{color:rgba(243,239,228,.62)}

/* ============================================================
   7. HEADER
   ============================================================ */
.masthead{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:8;
  display:flex;
  align-items:center;
  gap:var(--s5);
  padding-top:26px;
  padding-bottom:26px;
  transition:padding .25s ease,background .25s ease;
}
/* once the announce strip scrolls away the header pins to the top
   and takes a solid field so it holds over photography and video */
.masthead.is-stuck{
  position:fixed;
  top:0;
  background:var(--ink);
  border-bottom:1px solid rgba(243,239,228,.18);
  padding-top:14px;
  padding-bottom:14px;
}
@keyframes drop-in{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}
.masthead.is-stuck .mark__logo{height:26px}
.mark{
  display:flex;
  align-items:baseline;
  gap:var(--mark-clear);
  text-decoration:none;
  flex:0 0 auto;
  padding:var(--mark-clear);
  margin:calc(var(--mark-clear) * -1);
}
.mark__logo{
  height:30px;
  width:auto;
  display:block;
}
/* supplied seal, embedded and rendered as a mask so it takes the surrounding
   color, stays crisp at any size, and works with no network */
.mark__seal{
  display:block;
  width:34px;
  height:34px;
  background-color:currentColor;
  -webkit-mask:url("/img/bg-4335f628.png") center/contain no-repeat;
  mask:url("/img/bg-4335f628.png") center/contain no-repeat;
}
/* the supplied lockup is light artwork. On the Blush footer it is
   forced to Ink. Remove this filter once a dark lockup is supplied. */
.field-blush .mark__logo{filter:brightness(0)}
.nowrap{white-space:nowrap}
.tel{font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.tel:hover,.tel:focus-visible{text-decoration:underline;text-underline-offset:5px}
.nav{display:flex;gap:34px;flex:1 1 auto}
.nav a{font-size:14.5px;font-weight:500;text-decoration:none;opacity:.88;white-space:nowrap}
.ext{
  display:inline-block;
  margin-left:.35em;
  font-family:var(--sans);
  font-size:.62em;
  font-weight:500;
  line-height:1;
  vertical-align:.18em;
  opacity:.7;
}
.nav a:hover,.nav a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:5px}
.utility{display:flex;align-items:center;gap:20px;flex:0 0 auto;flex-wrap:nowrap;min-width:0}
.utility .btn{padding:9px 20px;font-size:14px}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:calc(100svh - var(--announce-h));
  padding-top:calc(var(--header-h) + var(--s8));
  padding-bottom:0;
}
.hero-still{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 62%;
  z-index:0;
}
@media (max-width:900px){
  /* a narrow viewport crops the panorama hard, so favor the downtown side */
  .hero-still{object-position:32% 62%}
}
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,
    rgba(28,29,25,.92) 0%,
    rgba(28,29,25,.80) 45%,
    rgba(28,29,25,.90) 100%);
}
.hero > *:not(.hero-still):not(.hero-scrim){position:relative;z-index:2}
.hero__head{
  padding-top:0;
  font-size:clamp(34px,5.1vw,124px);
  line-height:.92;
}
.hero__panels{
  position:relative;
  margin-top:auto;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  height:var(--panel-h);
}
.hpanel{
  position:absolute;
  bottom:0;
  width:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:var(--panel-h);
  padding:var(--s4) var(--pad-x);
  text-decoration:none;
  color:var(--bone);
  border-top:1px solid rgba(243,239,228,.38);
  background:rgba(28,29,25,.30);
  transition:background .28s ease;
}
.hpanel:first-of-type{left:0;border-right:1px solid rgba(243,239,228,.38)}
.hpanel:last-of-type{
  left:50%;
  width:calc(50% + 1px);
  margin-left:-1px;
  border-left:1px solid rgba(243,239,228,.38);
}
.hpanel:hover,.hpanel:focus-visible{background:rgba(28,29,25,.72);z-index:2}

.hpanel__row{display:flex;align-items:baseline;gap:var(--s3)}
.hpanel__q{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(24px,2.05vw,46px);
  line-height:1.08;
  letter-spacing:-.005em;
}
.hpanel__arw{
  font-size:clamp(18px,1.4vw,32px);
  line-height:1;
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .28s ease;
}
.hpanel:hover .hpanel__arw,.hpanel:focus-visible .hpanel__arw{transform:rotate(0deg)}

.hpanel__d{
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-size:clamp(15px,1.05vw,19px);
  line-height:1.5;
  max-width:52ch;
  transition:max-height .32s ease,opacity .28s ease,margin-top .32s ease;
}
.hpanel:hover .hpanel__d,.hpanel:focus-visible .hpanel__d{
  max-height:10em;
  opacity:.92;
  margin-top:12px;
}
/* touch screens have no hover, so the message rests open */
@media (hover:none){
  .hpanel__d{max-height:none;opacity:.92;margin-top:12px}
  .hpanel__arw{transform:none}
}
.hero__sub{
  padding-top:var(--s4);
  padding-bottom:var(--s4);
  max-width:66ch;
}
.hero__sub .lede{font-size:clamp(15.5px,1.25vw,19px)}

.fw{padding-top:var(--s7);padding-bottom:var(--s7)}
.fw__head{
  display:grid;
  grid-template-columns:5fr 7fr;
  column-gap:var(--gutter);
  align-items:end;
  padding-bottom:var(--s5);
}
.fw__head h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(28px,3.2vw,60px);
  line-height:1.02;
  letter-spacing:-.01em;
  max-width:14ch;
}
.fw__head p{font-size:clamp(15.5px,1.15vw,19px);line-height:1.6;max-width:56ch}
.fw__all{padding-bottom:var(--s4)}

.fw__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
}
.fw__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:var(--s3);
  border-top:2px solid var(--ink);
  text-decoration:none;
  transition:border-color .22s ease;
}
.fw__cite{font-size:12px;line-height:1.4;letter-spacing:.03em;color:var(--stone)}
.fw__name{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(22px,1.95vw,36px);
  line-height:1.02;
  letter-spacing:-.01em;
}
.fw__desc{font-size:15px;line-height:1.5;color:var(--stone);flex:1 1 auto}
.fw__go{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14.5px;
  font-weight:700;
  padding-top:var(--s2);
}
.fw__go .arw{transition:transform .22s ease}
.fw__item:hover .fw__go .arw,.fw__item:focus-visible .fw__go .arw{transform:translateX(6px)}
.fw__item:hover .fw__desc,.fw__item:focus-visible .fw__desc{color:var(--ink)}
.fw__item:hover .fw__name,.fw__item:focus-visible .fw__name{text-decoration:underline;text-underline-offset:6px}
.fw__item{transition:background .18s ease,padding .18s ease}
.fw__item:hover,.fw__item:focus-visible{background:var(--blush)}

/* ============================================================
   9. MISSION
   ============================================================ */
.mission-sec{padding-top:var(--s8);padding-bottom:var(--s8)}
.mission{max-width:40ch}
.mission-link{padding-top:var(--s4)}

/* ============================================================
   10. EDITORIAL GRIDS
   ============================================================ */
.section{padding-top:var(--s6);padding-bottom:var(--s6)}
.feature{
  grid-column:1 / 7;
  align-self:start;
  display:flex;
  flex-direction:column;
  padding:var(--s4);
  min-height:0;
  aspect-ratio:1 / 1.08;
  max-height:640px;
}
.feature .block-head{margin-top:var(--s3);max-width:15ch}
.feature .elink{margin-top:auto}
.feature--ink{background:var(--ink);color:var(--bone)}
.feature--rose{background:var(--rose);color:var(--ink)}
.feature--ink .kicker{color:rgba(243,239,228,.68)}

/* Stories are direct grid children so rows align across both columns.
   The two vertical hairlines are drawn on the container rather than on
   each item, so they run unbroken through the row gaps. */
.railset{
  grid-column:7 / 13;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:0;
  row-gap:var(--s5);
  align-items:start;
  position:relative;
}
.railset::before,
.railset::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--sand);
  pointer-events:none;
}
.railset::before{left:0}
.railset::after{left:50%}
.railset > *{padding-left:var(--gutter);padding-right:var(--gutter)}
.railset > .span2{
  grid-column:1 / -1;
  position:relative;
  z-index:1;
  background:var(--bone);
  padding-bottom:var(--s4);
  margin-bottom:calc(var(--s5) * -1 + var(--s4));
}
.railset > .span2 .prose{max-width:70ch}
.railset--under{grid-column:7 / 13}

.story{display:flex;flex-direction:column;gap:14px}
.story .kicker{order:2}
.story .story-head{order:3}
.story p{order:4}
.story .elink{order:5;align-self:flex-start;margin-top:2px}
.story figure{order:1}

/* practice index rows */
.index{grid-column:7 / 13;border-left:1px solid var(--sand);padding-left:var(--gutter)}
.index__group + .index__group{margin-top:var(--s5)}
.index__group h3{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
  padding-bottom:var(--s2);
}
.index li{border-bottom:1px solid var(--sand)}
.index li:first-child{border-top:2px solid var(--ink)}
.index a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s3);
  padding:15px 0;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(17px,1.35vw,23px);
  line-height:1.1;
}
.index a span{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--stone);
  text-align:right;
  flex:0 0 auto;
}
.index a:hover,.index a:focus-visible{background:var(--blush);padding-left:14px;padding-right:14px}
.index a{transition:padding .2s ease,background .2s ease}

.prose{max-width:52ch;font-size:clamp(16px,1.2vw,21px);line-height:1.6}

/* ============================================================
   10b. ANNOUNCE STRIP
   ============================================================ */
.announce{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s2) var(--s3);
  padding-top:12px;
  padding-bottom:12px;
  font-size:13.5px;
}
.announce b{font-weight:700;letter-spacing:.01em}
.announce p{margin-right:auto;opacity:.78}
.announce .elink{font-size:13.5px}

/* ============================================================
   10c. PAIR AND TRIO ROWS
   ============================================================ */
.sec-head{
  border-bottom:1px solid var(--sand);
  margin-bottom:var(--s4);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s3);
  padding-bottom:var(--s3);
}
.sec-head h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(24px,2.2vw,40px);
  line-height:1.05;
  letter-spacing:-.01em;
}
.trio{grid-column:span 4}
.panel{display:flex;flex-direction:column;gap:var(--s3)}
.panel .block-head{max-width:18ch}
.panel .elink{align-self:flex-start;margin-top:var(--s1)}
.panel p{max-width:46ch}

/* ============================================================
   10d. SIGNUP BAND
   ============================================================ */
.signup{background:var(--blush);color:var(--ink)}
.signup .grid{row-gap:var(--s4)}
.signup__intro{grid-column:1 / 6}
.signup__intro p{padding-top:var(--s3);max-width:42ch}
.signup__form{grid-column:7 / 13}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s3);
}
.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
  padding-bottom:8px;
}
.field input{
  width:100%;
  padding:13px 14px;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:0;
}
.field input::placeholder{color:var(--stone)}
.field input:focus{outline:3px solid var(--rose);outline-offset:2px}
.form-foot{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
  padding-top:var(--s1);
}
.form-foot p{font-size:13px;color:var(--stone);max-width:44ch}
.btn--ink{background:var(--ink);color:var(--bone);border-color:var(--ink);cursor:pointer;font-family:inherit}
.btn--ink:hover,.btn--ink:focus-visible{background:transparent;color:var(--ink)}
.slot--sq::before{padding-top:100%}
/* equal-height panels so the links land on one line regardless of copy length */
.trio.panel{height:100%}
.trio .elink{margin-top:auto;padding-top:var(--s2)}

/* ============================================================
   11. CLOSING CTA AND FOOTER
   ============================================================ */
.close{padding-top:var(--s7);padding-bottom:var(--s6)}
.close[hidden]{display:none}
.close__actions{display:flex;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s4)}
.close__actions .btn{cursor:pointer;font-family:inherit;margin-top:0}
.close__head{font-size:clamp(46px,11.5vw,300px)}
.close .kicker{padding-bottom:clamp(6px,.6vw,12px)}
.close p{max-width:56ch;padding-top:var(--s4)}
.close .btn{margin-top:var(--s4)}

.foot{padding-top:var(--s5);padding-bottom:var(--s3)}
.foot__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
  padding-top:var(--s5);
}
.foot__brand{grid-column:1 / 4}
.foot__brand p{padding-top:var(--s3);font-size:14.5px;line-height:1.55;color:var(--stone)}
.foot__brand .mark{margin-bottom:2px}
.foot__blurb{
  max-width:30ch;
  text-wrap:pretty;
  line-height:1.6;
}
.foot__close{
  padding-top:18px;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.foot__col{grid-column:span 2}
.foot__brand + .foot__col{grid-column:7 / span 2}
.foot__col h3 a{text-decoration:none}
.foot__col h3 a:hover,.foot__col h3 a:focus-visible{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.foot__col h3{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--sand);
}
.foot__col li{margin-top:11px}
.foot__col a{font-size:14.5px;text-decoration:none;color:var(--ink)}
.foot__col a:hover,.foot__col a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.foot__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s3);
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--sand);
  font-size:13px;
  color:var(--stone);
}
.foot__legal a{color:inherit}
.fsoc{display:flex;gap:10px;padding-top:var(--s3)}
.fsoc__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--sand);
  color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.fsoc__btn svg{width:16px;height:16px;fill:currentColor}
.fsoc__btn svg [stroke]{stroke:currentColor}
/* supplied mark, used as a mask so it takes the button color and
   inverts on hover with everything else */
.fsoc__threads{
  width:17px;
  height:17px;
  background-color:currentColor;
  -webkit-mask:url("/img/bg-c0a7e25f.png") center/contain no-repeat;
  mask:url("/img/bg-c0a7e25f.png") center/contain no-repeat;
}
.fsoc__btn:hover,.fsoc__btn:focus-visible{background:var(--ink);color:var(--bone);border-color:var(--ink)}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--pad-x);top:12px;position:absolute;z-index:20;
  background:var(--bone);color:var(--ink);padding:10px 18px;font-weight:700;
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .fw__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1180px){
  :root{--gutter:32px;--s7:104px;--s8:132px}
  .feature{grid-column:1 / 7}
  .railset,.railset--under{grid-column:7 / 13}
  .index{grid-column:7 / 13}
    .signup__intro{grid-column:1 / 6}
  .signup__form{grid-column:6 / 13}
}
@media (max-width:900px){
  :root{--announce-h:52px;--pad-x:4%;--s6:60px;--s7:72px;--s8:88px}
  .grid{row-gap:var(--s5)}
  .feature{grid-column:1 / -1;aspect-ratio:auto;padding:var(--s4);min-height:340px}
  .feature .elink{margin-top:var(--s5)}
  .railset,.railset--under{grid-column:1 / -1}
  .index{grid-column:1 / -1;border-left:0;padding-left:0}
    .trio{grid-column:span 12}
  .fw__head{grid-template-columns:1fr;row-gap:var(--s3)}
  .fw__grid{grid-template-columns:repeat(2,1fr)}
  .fw{padding-top:var(--s6);padding-bottom:var(--s6)}
  .signup__intro,.signup__form{grid-column:1 / -1}
  .hero__head{max-width:none}
  .mission{max-width:none}
}
/* the header ran out of room long before 680px: the nav was breaking
   "What we do" across three lines and the utility column was stacking.
   These two steps shed weight before the layout has to change. */
@media (max-width:1600px){
  .masthead{gap:var(--s4)}
  .nav{gap:24px}
  .utility{gap:14px}
  .utility .tel{display:none}
}
@media (max-width:1340px){
  :root{--header-h:164px}
  .masthead{flex-wrap:wrap;gap:var(--s3);row-gap:var(--s3);align-items:center}
  .mark{order:1;margin-right:auto}
  .utility{order:2;margin-left:0}
  .nav{order:3;flex-basis:100%;gap:14px 28px;flex-wrap:wrap}
}

@media (max-width:680px){
  :root{--announce-h:84px;--header-h:104px;--pad-x:22px;--gutter:22px;--s5:44px;--s6:56px;--s7:64px;--s8:72px}
  .poster{font-size:clamp(34px,8.4vw,54px)}
  .hero__head{font-size:clamp(31px,8.6vw,53px)}
  .masthead{flex-wrap:wrap;gap:var(--s2);row-gap:var(--s3);align-items:center}
  .mark{order:1;margin-right:auto}
  .utility{order:2;gap:10px;margin-left:0;flex:0 0 auto}
  /* the number is in the footer; keeping it here overflows a phone */
  .utility .tel{display:none}
  .nav{order:3;flex-basis:100%;gap:14px 20px;flex-wrap:wrap}
  /* the phone number and language switch both live in the footer, so on a
     phone they come out of the header rather than forcing it to overflow */
  .utility .btn{padding:9px 14px;font-size:13px}
  .railset{grid-template-columns:1fr}
  .railset::after{display:none}
  .fw__grid{grid-template-columns:1fr;row-gap:var(--s3)}
  .hero__panels{position:static;height:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .hpanel{position:static;width:auto;min-height:0}
  .hpanel:first-of-type{border-right:0}
  .hpanel:last-of-type{left:auto;width:auto;margin-left:0;border-left:0}
  .form-grid{grid-template-columns:1fr}
  .foot__brand{grid-column:1 / -1}
  .foot__col,
  .foot__brand + .foot__col{grid-column:span 6}
  /* photo cards need the full column at this width; footer links do not */
  #route-who-we-are .quad{grid-column:1 / -1}
}

@media (max-height:900px) and (min-width:901px){
  :root{--panel-h:132px}
  .poster{font-size:clamp(34px,3.9vw,80px)}
  .hero__head{font-size:clamp(31px,4.2vw,82px)}
  .hero__sub{padding-top:var(--s3);padding-bottom:var(--s4)}
  .hpanel__d{font-size:14px}
}

/* ---------- offline fallback for hotlinked marks ----------
   The brand lockups are still loaded from fractionalcoordinator.com. With
   no network they cannot resolve and the browser draws an empty box. Until
   the files are embedded, style the alt text so a failed load reads as the
   firm name rather than as a broken element. */
.mark__logo,.ck__mark,.jf__mark,.mk__frame img{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:15px;
  line-height:1.1;
  letter-spacing:-.01em;
  color:inherit;
  max-width:100%;
}
.ck__mark{font-size:12px}
.jf__mark{font-size:13px}

/* ---------- narrow-viewport safety ----------
   Email addresses and long slugs are single unbreakable tokens. At 320px
   a 40-character address is wider than the column and forces the whole
   page to scroll sideways, which is a 1.4.10 reflow failure. Break them
   rather than letting them push the layout. */
p, li, dd, address, .lede, .prose, .body-sm, .doc-body, .art__body{
  overflow-wrap:break-word;
}

/* Below 400px the display face still sets larger than the column can
   hold at its smallest clamp, so tighten the floor and the gutters. */
@media (max-width:400px){
  :root{--pad-x:18px;--gutter:18px;--header-h:100px}
  .utility .btn{padding:8px 12px;font-size:12.5px}
  .poster{font-size:clamp(28px,8.6vw,44px)}
  .art__title{font-size:clamp(24px,7.6vw,38px)}
  .close__head{font-size:clamp(34px,11vw,54px)}
  .stat dt,#route-who-we-are .stat dt{font-size:clamp(34px,10vw,52px)}
  .mission{font-size:clamp(24px,7.4vw,36px)}
  .block-head{font-size:clamp(22px,6.6vw,30px)}
  .jf__q{font-size:clamp(22px,6.8vw,30px)}
  .srch__bar input{font-size:clamp(20px,6.4vw,28px)}
  .ck{width:100vw}
  .ck__body,.ck__head,.ck__foot{padding-left:20px;padding-right:20px}
}

/* ---------- touch targets ----------
   Icon controls read fine with a mouse at 34 to 36px but sit under the
   44px minimum for a finger. Enlarge them only where the pointer is
   coarse, so the desktop composition is unchanged. */
@media (pointer:coarse){
  .fsoc__btn{width:44px;height:44px}
  .ck-sw__track{width:52px;height:30px}
  .ck-sw__knob{width:24px;height:24px}
  .ck-sw input:checked + .ck-sw__track .ck-sw__knob{transform:translateX(22px)}
  .jf__opt{padding:14px 16px}
  .qa > summary{padding:22px 0}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   ROUTER
   ============================================================ */
.route[hidden]{display:none}
/* deep links land under the fixed header without this */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.route:focus{outline:none}

/* ---------- route: who-we-are ---------- */
/* ============================================================
   WHO WE ARE  page-specific
   ============================================================ */
#route-who-we-are .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-who-we-are .phero .poster{max-width:22ch}
/* Every page title fits its column on one line above 901px, measured at the
   narrowest width the rule applies. Below that they wrap, which is right on
   a phone. */
@media (min-width:901px){
  #route-404 .phero .poster,
  #route-ada-504 .phero .poster,
  #route-ai-policy .phero .poster,
  #route-blueroom-podcast .phero .poster,
  #route-careers .phero .poster,
  #route-ceo-updates .phero .poster,
  #route-certification-notice .phero .poster,
  #route-certified-training .phero .poster,
  #route-clery-act .phero .poster,
  #route-coffee-talks .phero .poster,
  #route-conflicts-policy .phero .poster,
  #route-contact .phero .poster,
  #route-documentation .phero .poster,
  #route-expert-witness .phero .poster,
  #route-faq .phero .poster,
  #route-fellows .phero .poster,
  #route-fractional-digest .phero .poster,
  #route-fractional-leadership .phero .poster,
  #route-frameworks .phero .poster,
  #route-higher-education .phero .poster,
  #route-insights .phero .poster,
  #route-investigations .phero .poster,
  #route-knowledge-hub .phero .poster,
  #route-learning-institute .phero .poster,
  #route-legal-accessibility .phero .poster,
  #route-legal-cookies .phero .poster,
  #route-legal-privacy .phero .poster,
  #route-legal-security .phero .poster,
  #route-legal-terms .phero .poster,
  #route-media .phero .poster,
  #route-member-policy .phero .poster,
  #route-pk-12-districts .phero .poster,
  #route-playbooks .phero .poster,
  #route-records-retention .phero .poster,
  #route-refer .phero .poster,
  #route-resources .phero .poster,
  #route-retreat-seattle .phero .poster,
  #route-retreat-vail .phero .poster,
  #route-title-ix .phero .poster,
  #route-title-vi .phero .poster,
  #route-title-vii .phero .poster,
  #route-what-we-do .phero .poster,
  #route-who-we-are .phero .poster,
  #route-workplaces .phero .poster{white-space:nowrap;max-width:none}
}#route-who-we-are .phero .lede{padding-top:var(--s4);max-width:62ch}#route-who-we-are .lead-figure{padding-top:var(--s6);padding-bottom:var(--s6)}#route-who-we-are .quad{grid-column:span 3}#route-who-we-are .duo{grid-column:span 6}#route-who-we-are .record{padding-top:var(--s7);padding-bottom:var(--s7)}#route-who-we-are .record__head{max-width:20ch}#route-who-we-are .record__lede{padding-top:var(--s3);max-width:56ch}#route-who-we-are .thesis-link{padding-top:var(--s3)}#route-who-we-are .record__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
  margin-top:var(--s6);
  border-top:1px solid rgba(243,239,228,.28);
  padding-top:var(--s4);
}#route-who-we-are .stat dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(44px,5vw,104px);
  line-height:.9;
  letter-spacing:-.01em;
}#route-who-we-are .stat dd{margin:0;padding-top:12px;font-size:15px;line-height:1.5;color:rgba(243,239,228,.72);max-width:26ch}#route-who-we-are .team{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s5);
}#route-who-we-are .member{display:flex;flex-direction:column;gap:12px;height:100%}#route-who-we-are .member h3{font-size:clamp(16px,1.15vw,20px);font-weight:700;line-height:1.25}#route-who-we-are .member__role{font-size:13.5px;line-height:1.4;color:var(--stone);font-weight:600}
#route-who-we-are .member__bio{font-size:14.5px;line-height:1.55;color:var(--ink);flex:1 1 auto}
#route-who-we-are .board-head{margin-top:var(--s7);padding-top:var(--s3);border-top:2px solid var(--ink)}
#route-who-we-are .board-head h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(22px,2vw,36px);
  line-height:1.05;
}
#route-who-we-are .board-head p{padding-top:8px;font-size:15px;color:var(--stone)}
#route-who-we-are .team--board{margin-top:var(--s4)}
#route-who-we-are .member{position:relative}
#route-who-we-are .li-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  margin-top:2px;
  padding:6px 12px;
  border:1px solid var(--sand);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
  transition:background .2s ease,border-color .2s ease;
}
#route-who-we-are .li-btn:hover,#route-who-we-are .li-btn:focus-visible{
  background:var(--ink);
  color:var(--bone);
  border-color:var(--ink);
}
#route-who-we-are .li-btn svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
#route-who-we-are .social-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}#route-who-we-are .facts{border-top:1px solid var(--sand);margin-top:var(--s6)}#route-who-we-are .facts div{
  display:grid;
  grid-template-columns:minmax(160px,3fr) 9fr;
  gap:var(--s3);
  padding:18px 0;
  border-bottom:1px solid var(--sand);
}#route-who-we-are .facts dt{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}#route-who-we-are .facts dd{margin:0;font-size:clamp(15px,1.05vw,18px);line-height:1.55;max-width:64ch}

@media (max-width:1180px){#route-who-we-are .team{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){#route-who-we-are .quad{grid-column:span 6}#route-who-we-are .duo{grid-column:span 12}#route-who-we-are .record__stats{grid-template-columns:1fr}#route-who-we-are .team{grid-template-columns:repeat(2,1fr)}#route-who-we-are .facts div{grid-template-columns:1fr;gap:6px}
}
@media (max-width:680px){#route-who-we-are .phero .poster{max-width:none}
}

/* ---------- route: fellows ---------- */
/* ============================================================
   FELLOWS PROGRAM  page-specific
   ============================================================ */
#route-fellows .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s5)}#route-fellows .phero .lede{padding-top:var(--s4);max-width:64ch}#route-fellows .lead-figure{padding-top:var(--s6);padding-bottom:var(--s6)}#route-fellows .prose-col{grid-column:1 / 8}#route-fellows .prose-col p{padding-top:var(--s3);font-size:clamp(16px,1.15vw,20px);line-height:1.65;max-width:66ch}#route-fellows .prose-col p:first-of-type{padding-top:var(--s3)}#route-fellows .prose-col .lead-p{font-size:clamp(18px,1.35vw,24px);line-height:1.5}#route-fellows .aside-col{grid-column:9 / 13}#route-fellows .feature-row{grid-column:1 / 13;display:grid;grid-template-columns:5fr 7fr;column-gap:var(--gutter);align-items:center}#route-fellows .feature-row .copy h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(26px,2.6vw,48px);
  line-height:1.03;
  letter-spacing:-.01em;
  max-width:18ch;
}#route-fellows .feature-row .copy p{padding-top:var(--s3);font-size:clamp(15.5px,1.1vw,19px);line-height:1.6;max-width:50ch}#route-fellows .feature-row .copy .elink{margin-top:var(--s3)}#route-fellows .program{border-top:2px solid var(--ink);margin-top:var(--s4)}#route-fellows .program > details{border-bottom:1px solid var(--sand)}#route-fellows .program summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s3);
  padding:24px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(19px,1.7vw,30px);
  line-height:1.1;
}#route-fellows .program summary::-webkit-details-marker{display:none}#route-fellows .program summary::after{content:"+";flex:0 0 auto;font-family:var(--sans);font-weight:500;font-size:24px;line-height:1;color:var(--stone)}#route-fellows .program details[open] summary::after{content:"\2212";color:var(--ink)}#route-fellows .program p{padding:0 0 26px;max-width:66ch;font-size:clamp(15.5px,1.1vw,18px);line-height:1.65}#route-fellows .program ul{padding:0 0 26px}#route-fellows .program li{margin-top:9px;padding-left:22px;position:relative;font-size:15.5px;line-height:1.55;max-width:64ch}#route-fellows .program li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}#route-fellows .pullband{padding-top:var(--s7);padding-bottom:var(--s7)}#route-fellows .pullband .lede{padding-top:var(--s3);max-width:60ch}#route-fellows .record__head{max-width:20ch}#route-fellows .steps{counter-reset:step;border-top:1px solid var(--sand)}#route-fellows .steps > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s3);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--sand);
}#route-fellows .steps > li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.5vw,30px);
  line-height:.9;
  color:var(--stone);
}#route-fellows .steps h3{font-size:clamp(18px,1.4vw,25px);font-weight:700;line-height:1.2}#route-fellows .steps p{padding-top:10px;font-size:15.5px;line-height:1.6;max-width:82ch}#route-fellows .third{grid-column:span 4}#route-fellows .card{border-top:2px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:12px}#route-fellows .card h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.7vw,30px);
  line-height:1.05;
}#route-fellows .card p{font-size:15.5px;line-height:1.55;max-width:44ch}#route-fellows .card .elink{align-self:flex-start;margin-top:auto;padding-top:var(--s2)}#route-fellows .note{background:var(--blush);padding:var(--s4);grid-column:1 / 9}#route-fellows .note h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}#route-fellows .note p{padding-top:12px;font-size:15px;line-height:1.6;max-width:62ch}#route-fellows .note .elink{margin-top:var(--s3)}

@media (max-width:900px){#route-fellows .prose-col, #route-fellows .aside-col, #route-fellows .third, #route-fellows .note{grid-column:1 / -1}#route-fellows .feature-row{grid-column:1 / -1;grid-template-columns:1fr;row-gap:var(--s4)}#route-fellows .steps > li{grid-template-columns:1fr;gap:8px}
}

/* ---------- route: ceo-updates ---------- */
/* ============================================================
   CEO UPDATES  page-specific
   ============================================================ */
#route-ceo-updates .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-ceo-updates .phero .lede{padding-top:var(--s4);max-width:58ch}#route-ceo-updates .letter{grid-column:1 / 5}#route-ceo-updates .letter dl{border-top:1px solid var(--sand)}#route-ceo-updates .letter dl > div{padding:14px 0;border-bottom:1px solid var(--sand)}#route-ceo-updates .letter dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}#route-ceo-updates .letter dd{margin:0;padding-top:5px;font-size:15px;line-height:1.45}#route-ceo-updates .body-copy{grid-column:6 / 12}#route-ceo-updates .body-copy h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(28px,2.8vw,52px);
  line-height:1.03;
  letter-spacing:-.01em;
  max-width:20ch;
}#route-ceo-updates .body-copy p{padding-top:var(--s3);font-size:clamp(16px,1.15vw,20px);line-height:1.65;max-width:60ch}#route-ceo-updates .body-copy .lead-p{padding-top:var(--s4);font-size:clamp(18px,1.35vw,24px);line-height:1.5}#route-ceo-updates .sig{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--sand);max-width:60ch}
/* the signature is artwork, not type: it sits above the name at a size that
   reads as a hand rather than a logo */#route-ceo-updates .sig strong{display:block;font-size:16px}#route-ceo-updates .sig span{display:block;padding-top:4px;font-size:14px;color:var(--stone)}#route-ceo-updates .archive li{border-bottom:1px solid var(--sand)}#route-ceo-updates .archive a{
  display:grid;
  grid-template-columns:minmax(120px,2fr) 7fr minmax(90px,1fr);
  gap:var(--s3);
  align-items:baseline;
  padding:22px 0;
  text-decoration:none;
}#route-ceo-updates .archive time{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}#route-ceo-updates .archive h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(19px,1.55vw,28px);
  line-height:1.1;
}#route-ceo-updates .archive p{padding-top:8px;font-size:15px;line-height:1.5;color:var(--stone);max-width:56ch}#route-ceo-updates .archive .arw{justify-self:end;font-size:17px;transition:transform .22s ease}#route-ceo-updates .archive a:hover .arw, #route-ceo-updates .archive a:focus-visible .arw{transform:translateX(6px)}#route-ceo-updates .archive a:hover h3, #route-ceo-updates .archive a:focus-visible h3{text-decoration:underline;text-underline-offset:5px}

@media (max-width:1180px){#route-ceo-updates .letter{grid-column:1 / 5}#route-ceo-updates .body-copy{grid-column:5 / 13}
}
@media (max-width:900px){#route-ceo-updates .letter, #route-ceo-updates .body-copy{grid-column:1 / -1}#route-ceo-updates .archive a{grid-template-columns:1fr;gap:8px}#route-ceo-updates .archive .arw{justify-self:start}
}

/* ---------- route: media ---------- */
/* ============================================================
   INTERIOR PAGE  shared
   ============================================================ */
#route-media .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-media .phero .lede{padding-top:var(--s4);max-width:60ch}#route-media .half{grid-column:span 6}#route-media .third{grid-column:span 4}#route-media .wide{grid-column:1 / 9}#route-media .note{background:var(--blush);padding:var(--s4)}#route-media .note h2, #route-media .note h3{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}#route-media .note p{padding-top:12px;font-size:15px;line-height:1.6;max-width:62ch}#route-media .note ul{padding-top:var(--s2)}#route-media .note li{margin-top:8px;padding-left:22px;position:relative;font-size:15px;line-height:1.55;max-width:62ch}#route-media .note li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}#route-media .card{
  border-top:2px solid var(--ink);
  padding-top:var(--s3);
  display:flex;
  flex-direction:column;
  gap:12px;
}#route-media .card h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.7vw,30px);
  line-height:1.05;
}#route-media .card p{font-size:15.5px;line-height:1.55;max-width:44ch}#route-media .card .elink{align-self:flex-start;margin-top:auto;padding-top:var(--s2)}#route-media .deflist{border-top:1px solid var(--sand)}#route-media .deflist > div{
  display:grid;
  grid-template-columns:minmax(150px,3fr) 9fr;
  gap:var(--s3);
  padding:18px 0;
  border-bottom:1px solid var(--sand);
}#route-media .deflist dt{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}#route-media .deflist dd{margin:0;font-size:clamp(15px,1.05vw,18px);line-height:1.55;max-width:64ch}#route-media .steps{counter-reset:step;border-top:1px solid var(--sand)}#route-media .steps > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s3);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--sand);
}#route-media .steps > li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.5vw,30px);
  line-height:.9;
  color:var(--stone);
}#route-media .steps h3{font-size:clamp(18px,1.4vw,25px);font-weight:700;line-height:1.2}#route-media .steps p{padding-top:10px;font-size:15.5px;line-height:1.6;max-width:82ch}#route-media .contact-card h2{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand);
}#route-media .contact-card address{font-style:normal;padding-top:var(--s3);font-size:clamp(16px,1.15vw,20px);line-height:1.6}#route-media .contact-card address a{text-decoration:none;border-bottom:1px solid var(--sand)}#route-media .contact-card address a:hover, #route-media .contact-card address a:focus-visible{border-bottom-color:var(--ink)}#route-media .contact-card .small{padding-top:var(--s3);font-size:14px;line-height:1.55;color:var(--stone);max-width:38ch}#route-media .pullband{padding-top:var(--s7);padding-bottom:var(--s7)}#route-media .pullband .lede{padding-top:var(--s3);max-width:58ch}

@media (max-width:900px){#route-media .half, #route-media .third, #route-media .wide{grid-column:1 / -1}#route-media .deflist > div{grid-template-columns:1fr;gap:6px}#route-media .steps > li{grid-template-columns:1fr;gap:8px}
}#route-media .section--top0{padding-top:0}#route-media .record__head{max-width:20ch}#route-media .contact-top__p{padding-top:var(--s3)}#route-media .contact-top__cta{padding-top:var(--s4)}#route-media .mt-lg{margin-top:var(--s5)}

/* ---------- route: faq ---------- */
/* ============================================================
   FAQ  page-specific
   ============================================================ */
#route-faq .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-faq .phero .lede{padding-top:var(--s4);max-width:62ch}#route-faq .faq-layout{
  display:grid;
  grid-template-columns:3fr 9fr;
  column-gap:var(--gutter);
}#route-faq .faq-nav{
  align-self:start;
  position:sticky;
  top:calc(var(--header-h) + 16px);
  /* thirteen groups is taller than most viewports, so the menu scrolls
     inside itself rather than disappearing off the top */
  max-height:calc(100vh - var(--header-h) - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:8px;
}
#route-faq .faq-nav a[aria-current="true"]{color:var(--ink);font-weight:700;border-left-color:var(--ink)}
#route-faq .faq-nav a[aria-current="true"] .count{color:var(--ink)}
@media (max-width:900px){
  #route-faq .faq-nav{position:static;max-height:none;overflow:visible;padding-right:0}
}#route-faq .faq-nav h2{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand);
}#route-faq .faq-nav li{border-bottom:1px solid var(--sand)}#route-faq .faq-nav a{
  display:block;
  padding:11px 0 11px 12px;
  border-left:2px solid transparent;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  color:var(--ink);
}#route-faq .faq-nav a:hover,
#route-faq .faq-nav a:focus-visible{color:var(--ink);border-left-color:var(--sand)}#route-faq .faq-nav a{transition:color .18s ease,border-color .18s ease}#route-faq .faq-nav .count{color:var(--stone);font-size:13px}#route-faq .faq-body{min-width:0}#route-faq .faq-group{padding-bottom:var(--s6)}#route-faq .faq-group > h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(24px,2.3vw,42px);
  line-height:1.05;
  letter-spacing:-.01em;
  padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink);
}#route-faq .qa{border-bottom:1px solid var(--sand)}#route-faq .qa > summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s3);
  padding:20px 0;
  cursor:pointer;
  list-style:none;
  font-size:clamp(16.5px,1.2vw,20px);
  font-weight:700;
  line-height:1.35;
}#route-faq .qa > summary::-webkit-details-marker{display:none}#route-faq .qa > summary::after{
  content:"+";
  flex:0 0 auto;
  font-weight:500;
  font-size:22px;
  line-height:1.1;
  color:var(--stone);
  transition:transform .2s ease;
}#route-faq .qa[open] > summary::after{content:"\2212";color:var(--ink)}#route-faq .qa > summary:hover, #route-faq .qa > summary:focus-visible{color:var(--ink)}#route-faq .qa p{
  padding:0 0 22px;
  max-width:66ch;
  font-size:clamp(15.5px,1.1vw,18px);
  line-height:1.65;
}#route-faq .note{background:var(--blush);padding:var(--s4)}#route-faq .note h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}#route-faq .note p{padding-top:12px;font-size:15px;line-height:1.6;max-width:62ch}#route-faq .note .elink{margin-top:var(--s3)}#route-faq .faq-help{margin-top:var(--s4)}

@media (max-width:1180px){#route-faq .faq-layout{grid-template-columns:4fr 8fr}
}
@media (max-width:900px){#route-faq .faq-layout{grid-template-columns:1fr;row-gap:var(--s5)}#route-faq .faq-nav{position:static}
}

/* ---------- route: documentation ---------- */
/* ============================================================
   DOCUMENTATION  page-specific
   ============================================================ */
#route-documentation .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-documentation .phero .lede{padding-top:var(--s4);max-width:62ch}#route-documentation .docs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s5);
}#route-documentation .doc{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  padding-top:var(--s3);
  border-top:2px solid var(--ink);
  text-decoration:none;
}#route-documentation .doc__meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}#route-documentation .doc h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(21px,1.85vw,34px);
  line-height:1.04;
  letter-spacing:-.01em;
}#route-documentation .doc p{font-size:15.5px;line-height:1.55;max-width:46ch;flex:1 1 auto}#route-documentation .doc__go{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14.5px;
  font-weight:700;
  padding-top:var(--s2);
}#route-documentation .doc__go .arw{transition:transform .22s ease}
#route-documentation .doc{transition:background .18s ease,border-top-color .18s ease,padding .18s ease}
#route-documentation .doc:hover,
#route-documentation .doc:focus-visible{background:var(--blush);border-top-color:var(--rose)}#route-documentation .doc:hover .doc__go .arw,
#route-documentation .doc:focus-visible .doc__go .arw{transform:translateX(6px)}#route-documentation .doc:hover h3,
#route-documentation .doc:focus-visible h3{text-decoration:underline;text-underline-offset:6px}#route-documentation .note{background:var(--blush);padding:var(--s4);grid-column:1 / 9}#route-documentation .note h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}#route-documentation .note p{padding-top:12px;font-size:15px;line-height:1.6;max-width:62ch}#route-documentation .note ul{padding-top:var(--s2)}#route-documentation .note li{margin-top:8px;padding-left:22px;position:relative;font-size:15px;line-height:1.55;max-width:62ch}#route-documentation .note li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}#route-documentation .note .elink{margin-top:var(--s3)}

@media (max-width:900px){#route-documentation .docs{grid-template-columns:1fr}#route-documentation .note{grid-column:1 / -1}
}

/* ---------- route: legal-privacy ---------- */
/* ============================================================
   LEGAL DOCUMENT  page-specific
   ============================================================ */
#route-legal-privacy .phero{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s5)}#route-legal-privacy .phero .lede{padding-top:var(--s3);max-width:64ch}
@media (max-width:900px){}

/* ---------- route: legal-terms ---------- */
/* ============================================================
   LEGAL DOCUMENT  page-specific
   ============================================================ */
#route-legal-terms .phero{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s5)}#route-legal-terms .phero .lede{padding-top:var(--s3);max-width:64ch}
@media (max-width:900px){}

/* ---------- route: contact ---------- */
/* ============================================================
   CONTACT  page-specific
   ============================================================ */
#route-contact .phero{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}#route-contact .phero .lede{padding-top:var(--s4);max-width:62ch}#route-contact .contact-top{grid-column:1 / 7}#route-contact .contact-top__p{padding-top:var(--s3)}#route-contact .contact-top__cta{padding-top:var(--s4)}#route-contact .contact-card{grid-column:8 / 13}
.contact-lines{margin-top:var(--s3);border-top:1px solid var(--sand)}
.contact-lines > div{
  display:grid;
  grid-template-columns:minmax(58px,2fr) 7fr;
  gap:var(--s2);
  padding:11px 0;
  border-bottom:1px solid var(--sand);
}
.contact-lines dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.contact-lines dd{margin:0;font-size:15px;line-height:1.5}
.contact-lines dd span{color:var(--stone);font-size:13.5px}
.contact-lines a{text-decoration:none;border-bottom:1px solid var(--sand)}
.contact-lines a:hover,.contact-lines a:focus-visible{border-bottom-color:var(--ink)}#route-contact .contact-card h2{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand);
}#route-contact .contact-card address{
  font-style:normal;
  padding-top:var(--s3);
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.6;
}#route-contact .contact-card address a{text-decoration:none;border-bottom:1px solid var(--sand)}#route-contact .contact-card address a:hover, #route-contact .contact-card address a:focus-visible{border-bottom-color:var(--ink)}#route-contact .contact-card .small{padding-top:var(--s3);font-size:14px;line-height:1.55;color:var(--stone);max-width:38ch}#route-contact .notice-section{padding-top:0}#route-contact .notice{
  background:var(--blush);
  padding:var(--s4);
  grid-column:1 / 9;
}#route-contact .notice h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}#route-contact .notice p{padding-top:12px;font-size:15px;line-height:1.6;max-width:60ch}#route-contact .notice .elink{margin-top:var(--s3)}#route-contact .routes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s6);
}#route-contact .route h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(19px,1.5vw,27px);
  line-height:1.1;
  padding-bottom:var(--s2);
  border-bottom:2px solid var(--ink);
}#route-contact .route p{padding-top:var(--s2);font-size:14px;line-height:1.5;color:var(--stone);max-width:34ch}#route-contact .route ul{padding-top:var(--s2)}#route-contact .route li{border-bottom:1px solid var(--sand)}#route-contact .route li a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s2);
  padding:13px 0;
  font-size:15.5px;
  font-weight:500;
  text-decoration:none;
}#route-contact .route li a span{color:var(--stone);font-size:15px;transition:transform .22s ease}#route-contact .route li a:hover span, #route-contact .route li a:focus-visible span{transform:translateX(5px);color:var(--ink)}

@media (max-width:1180px){#route-contact .routes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){#route-contact .contact-top, #route-contact .contact-card, #route-contact .notice{grid-column:1 / -1}
}
@media (max-width:680px){#route-contact .routes{grid-template-columns:1fr}
}

/* ---------- route: learning-institute ---------- */
#route-learning-institute .phero{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s5)}
#route-learning-institute .phero .lede{padding-top:var(--s3);max-width:64ch}
#route-learning-institute .li-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-top:var(--s4)}
#route-learning-institute 
#route-learning-institute .li-tight{padding-top:0}
#route-learning-institute .fmt-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
#route-learning-institute .fmt{border-top:2px solid var(--ink);padding-top:var(--s3)}
#route-learning-institute .fmt h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(20px,1.7vw,30px);line-height:1.05}
#route-learning-institute .fmt p{padding-top:10px;font-size:15px;line-height:1.55;color:var(--stone);max-width:38ch}
#route-learning-institute .cat__group + .cat__group{margin-top:var(--s6)}
#route-learning-institute .cat__head{display:grid;grid-template-columns:4fr 8fr;column-gap:var(--gutter);align-items:baseline;padding-bottom:var(--s2)}
#route-learning-institute .cat__head h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(21px,1.9vw,34px);line-height:1.04}
#route-learning-institute .cat__head p{font-size:15px;line-height:1.5;color:var(--stone);max-width:52ch}
#route-learning-institute .cat li{border-bottom:1px solid var(--sand)}
#route-learning-institute .cat li:first-child{border-top:2px solid var(--ink)}
#route-learning-institute .cat li a{display:grid;grid-template-columns:7fr 3fr 2fr;column-gap:var(--gutter);align-items:baseline;padding:16px 0;text-decoration:none;transition:padding .2s ease,background .2s ease}
#route-learning-institute .cat li a:hover,#route-learning-institute .cat li a:focus-visible{background:var(--blush);padding-left:14px;padding-right:14px}
#route-learning-institute .cat__name{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(17px,1.35vw,23px);line-height:1.12}
#route-learning-institute .cat__meta{font-size:13.5px;color:var(--stone)}
#route-learning-institute .cat__fee{font-size:15px;font-weight:700;text-align:right}
#route-learning-institute .li-note-box{grid-column:1 / 9;background:var(--blush);padding:var(--s4)}
#route-learning-institute .li-note-box h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}
#route-learning-institute .li-note-box ul{padding-top:var(--s2)}
#route-learning-institute .li-note-box li{position:relative;padding-left:22px;margin-top:9px;font-size:15px;line-height:1.55;max-width:64ch}
#route-learning-institute .li-note-box li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}
#route-learning-institute .li-note-box .elink{margin-top:var(--s3)}
@media (max-width:1180px){#route-learning-institute .fmt-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  #route-learning-institute .cat__head{grid-template-columns:1fr;row-gap:6px}
  #route-learning-institute .cat li a{grid-template-columns:1fr auto;row-gap:4px}
  #route-learning-institute .cat__meta{grid-column:1 / -1;order:3}
  #route-learning-institute .li-note-box{grid-column:1 / -1}
}
@media (max-width:680px){#route-learning-institute .fmt-grid{grid-template-columns:1fr}}

/* ---------- page hero: shared baseline ----------
   Routes built after the merge had no .phero rule of their own, so the
   fixed header sat on top of the headline. This is the default; the
   scoped #route-* rules below still override it where they exist. */
.phero{
  padding-top:calc(var(--header-h) + var(--s6));
  padding-bottom:var(--s6);
}
.phero .poster{max-width:18ch}
.phero .lede{padding-top:var(--s4);max-width:62ch}

/* ---------- routes: sector pages ---------- */
.fellows-term{
  display:inline-block;
  margin-top:var(--s3);
  padding:8px 16px;
  border:1px solid rgba(243,239,228,.45);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bone);
}
.sec-crumb{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(243,239,228,.6);
  padding-bottom:var(--s3);
}
.sec-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(243,239,228,.35)}
.sec-crumb a:hover,.sec-crumb a:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
.sec-actions{display:flex;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s5)}
.sec-tight{padding-top:0}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
.sec-item{border-top:2px solid var(--ink);padding-top:var(--s3)}
.sec-item h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(19px,1.6vw,28px);line-height:1.05}
.sec-item p{padding-top:10px;font-size:15px;line-height:1.55;color:var(--stone);max-width:40ch}
.sec-note{grid-column:1 / 9;background:var(--blush);padding:var(--s4)}
.sec-note h2{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}
.sec-note p{padding-top:12px;font-size:15.5px;line-height:1.6;max-width:64ch}
.sec-note .elink{margin-top:var(--s3)}
@media (max-width:1180px){.sec-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.sec-note{grid-column:1 / -1}}
@media (max-width:680px){.sec-grid{grid-template-columns:1fr}}

/* ---------- routes: insights, coffee talks, podcast ---------- */
.sec-grid--3{grid-template-columns:repeat(3,1fr)}
.sec-grid--2{grid-template-columns:repeat(2,1fr)}
.sec-item .elink{margin-top:var(--s2)}
.ix li{border-bottom:1px solid var(--sand)}
.ix li:first-child{border-top:2px solid var(--ink)}
.ix li a{display:block;padding:22px 0;text-decoration:none;transition:padding .2s ease,background .2s ease}
.ix li a:hover,.ix li a:focus-visible{background:var(--blush);padding-left:14px;padding-right:14px}
.ix__kick{display:block;font-size:12.5px;color:var(--stone)}
.ix__title{display:block;padding-top:8px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(20px,1.8vw,32px);line-height:1.06;max-width:34ch}
.ix__desc{display:block;padding-top:10px;font-size:15.5px;line-height:1.55;color:var(--stone);max-width:70ch}
@media (max-width:1180px){.sec-grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.sec-grid--2{grid-template-columns:1fr}}
@media (max-width:680px){.sec-grid--3{grid-template-columns:1fr}}

/* ---------- route: knowledge hub ---------- */
.sec-head__note{font-size:15px;line-height:1.5;color:var(--stone);max-width:44ch}
.kh-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.kh-col{border-top:2px solid var(--ink);padding-top:var(--s3)}
.kh-col__num{display:block;font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 700;font-weight:700;font-size:clamp(26px,2.4vw,44px);line-height:.9;color:var(--stone)}
.kh-col h3{padding-top:12px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(18px,1.5vw,26px);line-height:1.06}
.kh-col p{padding-top:9px;font-size:15px;line-height:1.55;color:var(--stone);max-width:36ch}

.kh-tiers{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
.kh-tier{display:flex;flex-direction:column;gap:10px;padding:var(--s4);border:1px solid var(--sand);background:transparent}
.kh-tier--featured{background:var(--blush);border-color:var(--ink)}
.kh-tier__eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.kh-tier h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(24px,2.2vw,40px);line-height:1.02}
.kh-tier__who{font-size:15px;line-height:1.55;color:var(--stone);max-width:38ch}
.kh-tier ul{padding-top:var(--s2);flex:1 1 auto}
.kh-tier li{position:relative;padding-left:22px;margin-top:9px;font-size:15px;line-height:1.5}
.kh-tier li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}
.kh-tier__price{padding-top:var(--s3);margin-top:var(--s2);border-top:1px solid var(--sand)}
.kh-tier__price strong{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(22px,1.9vw,32px);line-height:1}
.kh-tier__price span{font-size:14px;color:var(--stone)}
.kh-tier .btn{align-self:flex-start;margin-top:var(--s3)}
@media (max-width:1180px){.kh-grid{grid-template-columns:repeat(2,1fr)}.kh-tiers{grid-template-columns:1fr}}
@media (max-width:680px){.kh-grid{grid-template-columns:1fr}}

/* ---------- route: media inquiries ---------- */
#route-media .md-intro{grid-column:1 / 7}
#route-media .md-intro .prose{padding-top:var(--s3)}
#route-media .md-card{grid-column:8 / 13}
#route-media .md-card h2{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand)}
#route-media .md-card address{font-style:normal;padding-top:var(--s3);font-size:clamp(16px,1.15vw,20px);line-height:1.6}
#route-media .md-card address a{text-decoration:none;border-bottom:1px solid var(--sand)}
#route-media .md-card address a:hover,#route-media .md-card address a:focus-visible{border-bottom-color:var(--ink)}
#route-media .md-card .small{padding-top:var(--s3);font-size:14px;line-height:1.55;color:var(--stone);max-width:40ch}
#route-media .md-list li{position:relative;padding-left:22px;margin-top:9px;font-size:15px;line-height:1.55;max-width:66ch}
#route-media .md-list li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}
#route-media .sec-note p + .md-list{padding-top:var(--s2)}
#route-media .sec-note .md-list + p{padding-top:var(--s3)}

#route-media .sp-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
#route-media .sp{display:grid;grid-template-columns:180px 1fr;column-gap:var(--s4);align-items:start}
#route-media .sp h3{font-size:clamp(17px,1.25vw,21px);font-weight:700;line-height:1.25}
#route-media .sp__role{padding-top:6px;font-size:13.5px;font-weight:600;color:var(--stone)}
#route-media .sp__bio{padding-top:12px;font-size:15px;line-height:1.55;max-width:40ch}
#route-media .sp .elink{margin-top:var(--s3);font-size:14px}

#route-media .pk-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
#route-media .pk{border-top:2px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:10px}
#route-media .pk h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(19px,1.6vw,28px);line-height:1.05}
#route-media .pk p{font-size:15px;line-height:1.55;color:var(--stone);max-width:36ch;flex:1 1 auto}
#route-media .pk .elink{align-self:flex-start}

#route-media .mk-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s4);align-items:start}
#route-media .mk__frame{display:flex;align-items:center;justify-content:center;min-height:150px;padding:var(--s4);background:var(--bone);border:1px solid var(--sand)}
#route-media .mk__frame--dark{background:var(--ink);border-color:var(--ink)}
#route-media .mk__use{padding-top:4px;font-size:13.5px;line-height:1.45;color:var(--stone)}
#route-media .mk-rules{margin-top:var(--s5)}
#route-media .mk-rules h3{font-size:clamp(19px,1.4vw,24px);font-weight:700;line-height:1.25}
#route-media .mk__frame img{max-width:100%;max-height:76px;width:auto;height:auto}
#route-media .mk__label{padding-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
#route-media .mk .elink{margin-top:8px;font-size:14px}

#route-media .sw-grid{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
#route-media .sw{display:flex;flex-direction:column;gap:4px}
#route-media .sw__chip{display:block;height:96px;border:1px solid var(--sand);margin-bottom:10px}
#route-media .sw__name{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:19px;line-height:1.1}
#route-media .sw__hex{font-size:13.5px;color:var(--ink);letter-spacing:.02em}
#route-media .sw__use{font-size:13px;color:var(--stone);line-height:1.4}

#route-media .bp-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s4);align-items:start}
#route-media .bp{background:var(--blush);padding:var(--s4)}
#route-media .bp__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--sand)}
#route-media .bp__label{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
#route-media .bp__copy{font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:6px 14px;cursor:pointer;transition:background .2s ease,color .2s ease}
#route-media .bp__copy:hover,#route-media .bp__copy:focus-visible{background:var(--ink);color:var(--bone)}
#route-media .bp p{padding-top:var(--s3);font-size:15.5px;line-height:1.65}
#route-media .bp__status{min-height:1.3em;padding-top:var(--s3);font-size:13.5px;color:var(--stone)}
#route-media .md-facts{margin-top:0}
#route-media .md-tm{padding-top:var(--s4);font-size:13.5px;line-height:1.6;color:var(--stone);max-width:70ch}

@media (max-width:1180px){
  #route-media .sw-grid{grid-template-columns:repeat(3,1fr)}
  #route-media .sp-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  #route-media .md-intro,#route-media .md-card{grid-column:1 / -1}
  #route-media .pk-grid,#route-media .mk-grid,#route-media .bp-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  #route-media .sw-grid{grid-template-columns:repeat(2,1fr)}
  #route-media .sp{grid-template-columns:1fr;row-gap:var(--s3)}
}

/* ---------- shared: steps and definition lists ----------
   Both were only ever defined inside route scopes, so pages built later
   (the sector pages, and now the service pages) rendered them unstyled. */
.steps{counter-reset:step;border-top:1px solid var(--sand)}
.steps > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s3);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--sand);
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.5vw,30px);
  line-height:.9;
  color:var(--stone);
}
.steps h3{font-size:clamp(18px,1.4vw,25px);font-weight:700;line-height:1.2}
.steps p{padding-top:10px;font-size:15.5px;line-height:1.6;max-width:82ch}
.deflist{border-top:1px solid var(--sand)}
.deflist > div{
  display:grid;
  grid-template-columns:minmax(150px,3fr) 9fr;
  gap:var(--s3);
  padding:18px 0;
  border-bottom:1px solid var(--sand);
}
.deflist dt{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.deflist dd{margin:0;font-size:clamp(15px,1.05vw,18px);line-height:1.55;max-width:70ch}

/* ---------- routes: services and playbooks ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
.svc{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--ink);padding-top:var(--s3);text-decoration:none;transition:padding .2s ease}
.svc:hover,.svc:focus-visible{padding-left:10px}
.svc h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(20px,1.7vw,30px);line-height:1.05;text-wrap:balance}
@media (min-width:900px){.svc h3{white-space:nowrap}}
.svc p{font-size:15.5px;line-height:1.55;color:var(--stone);max-width:46ch;flex:1 1 auto}
.svc__go{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;padding-top:var(--s2)}
.svc__go .arw{transition:transform .22s ease}
.svc:hover .svc__go .arw,.svc:focus-visible .svc__go .arw{transform:translateX(6px)}

.vol-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.vol{border-top:2px solid var(--ink);padding-top:var(--s3)}
.vol__num{font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 700;font-weight:700;font-size:clamp(22px,2vw,36px);line-height:.95;color:var(--stone)}
.vol h3{padding-top:10px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(20px,1.7vw,30px);line-height:1.05;max-width:22ch}
.vol__len{padding-top:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.vol__pitch{padding-top:12px;font-size:15.5px;line-height:1.6;max-width:48ch}
.vol__toc{padding-top:12px;margin-top:12px;border-top:1px solid var(--sand);font-size:14px;line-height:1.55;color:var(--stone);max-width:52ch}
.vol__toc span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-bottom:4px}

@media (max-width:900px){
  .svc-grid,.vol-grid{grid-template-columns:1fr}
  .steps > li{grid-template-columns:1fr;gap:8px}
  .deflist > div{grid-template-columns:1fr;gap:6px}
}

/* ---------- screen-reader-only text ----------
   This was previously defined only inside the sign-in route, so every
   other use of it rendered as visible text. It has to be global. */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- cookie consent: bottom bar ----------
   Rises from the bottom and stands no taller than the hero panels above
   it, so it never covers the headline. --panel-h is the same token those
   panels use, which keeps the two aligned if either changes. */
.ck[hidden],.ck-scrim[hidden]{display:none}
.ck-scrim{position:fixed;inset:0;z-index:44;background:rgba(28,29,25,.35)}
.ck{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:45;
  max-height:min(34vh,240px);
  transition:max-height .32s cubic-bezier(.22,.61,.36,1);
  display:grid;
  grid-template-rows:auto 1fr auto;
  transition:max-height .34s cubic-bezier(.22,.61,.36,1);
  background:var(--bone);
  color:var(--ink);
  border-top:1px solid var(--ink);
  animation:ck-rise .38s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ck-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ck__head{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:10px var(--pad-x);
  border-bottom:1px solid var(--sand);
}
.ck__mark{height:15px;width:auto;flex:0 0 auto}
.ck__close{
  margin-left:auto;font-family:inherit;font-size:22px;line-height:1;
  color:var(--ink);background:none;border:1px solid var(--sand);
  padding:2px 10px;cursor:pointer;
}
.ck__close:hover,.ck__close:focus-visible{background:var(--ink);color:var(--bone);border-color:var(--ink)}

@media (max-height:760px){
  .ck{max-height:min(52vh,280px)}
}
.ck:not(.is-open) .ck__sub,
.ck:not(.is-open) .ck-rows,
.ck:not(.is-open) .ck-confirm{display:none}
.ck:not(.is-open) .ck__body{grid-template-columns:1fr}
.ck.is-open{max-height:min(76vh,560px)}
.ck__body{
  display:grid;
  grid-template-columns:4fr 8fr;
  column-gap:var(--gutter);
  align-items:start;
  padding:14px var(--pad-x) 16px;
  overflow-y:auto;
  min-height:0;
}
.ck__body h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.1;
}
.ck__intro{padding-top:8px;font-size:14px;line-height:1.6;max-width:none}
.ck__intro a{color:inherit}
.ck__links{padding-top:8px;font-size:12.5px;color:var(--stone)}
.ck__links a{color:inherit}
.ck__intro-col{grid-column:1;grid-row:1 / span 2;min-width:0}
.ck__sub{
  grid-column:2;
  grid-row:1;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);padding-bottom:6px;border-bottom:1px solid var(--sand);
}
.ck-rows{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--s3);row-gap:0;align-items:start}
.ck-row{padding:10px 0 0;border-bottom:0}
.ck-row__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
.ck-row__head h4{font-size:13px;font-weight:700;line-height:1.3;padding-right:0}
.ck-row__lock{margin-left:0;padding-left:0;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.ck-row p{display:none}
.ck-sw{display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto;margin-left:0;padding:0}
.ck-sw input{position:absolute;opacity:0;width:1px;height:1px}
.ck-sw__track{position:relative;width:40px;height:22px;background:var(--sand);border:1px solid var(--stone);transition:background .2s ease,border-color .2s ease}
.ck-sw__knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--bone);transition:transform .2s ease}
.ck-sw input:checked + .ck-sw__track{background:var(--ink);border-color:var(--ink)}
.ck-sw input:checked + .ck-sw__track .ck-sw__knob{transform:translateX(18px)}
.ck-sw input:focus-visible + .ck-sw__track{outline:3px solid var(--rose);outline-offset:2px}
.ck__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:10px var(--pad-x);
  border-top:1px solid var(--sand);
  background:var(--blush);
}
.ck__foot .btn{padding:9px 18px;font-size:13px;cursor:pointer;font-family:inherit}
.ck__foot-alt{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.ck-link{
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  background:none;border:0;border-bottom:2px solid currentColor;padding:0 0 2px;cursor:pointer;
}
.ck-link:hover,.ck-link:focus-visible{opacity:.7}
.ck__state{margin-left:auto;min-height:1.1em;font-size:12.5px;color:var(--stone)}
.ck-confirm{flex:0 0 auto}
@media (max-width:900px){
  .ck{max-height:min(72vh,560px)}
  .ck__body{grid-template-columns:1fr;row-gap:var(--s3)}
  .ck__intro-col,.ck__sub,.ck-rows{grid-column:1;grid-row:auto}
  .ck-rows{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.ck{animation:none}}
.ck-settings{font-family:inherit;font-size:13px;color:var(--stone);background:none;border:0;padding:0;margin-left:6px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-settings:hover,.ck-settings:focus-visible{color:var(--ink)}


/* ---------- site search ---------- */
.srch-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  aspect-ratio:1;
  min-height:34px;
  padding:0;
  background:none;
  border:1px solid rgba(243,239,228,.4);
  color:var(--bone);
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.srch-open svg{width:17px;height:17px;fill:currentColor}
.srch-open:hover,.srch-open:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.srch[hidden]{display:none}
.srch{position:fixed;inset:0;z-index:60}
.srch__scrim{position:absolute;inset:0;background:var(--ink)}
.srch__panel{position:relative;height:100%;display:flex;flex-direction:column;color:var(--bone);pointer-events:none}
.srch__panel > *{pointer-events:auto}
.srch__bar{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding-top:var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid rgba(243,239,228,.3);
  flex:0 0 auto;
}
.srch__icon{width:22px;height:22px;fill:rgba(243,239,228,.7);flex:0 0 auto}
.srch__bar input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  color:var(--bone);
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(24px,3.2vw,52px);
  line-height:1.1;
  padding:6px 0;
}
.srch__bar input::placeholder{color:rgba(243,239,228,.38)}
.srch__bar input:focus{outline:none}
.srch__esc{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,228,.5);white-space:nowrap}
.srch__close{
  flex:0 0 auto;font-family:inherit;font-size:30px;line-height:1;
  color:rgba(243,239,228,.7);background:none;border:0;padding:2px 10px;cursor:pointer;
}
.srch__close:hover,.srch__close:focus-visible{color:var(--bone)}
.srch__body{flex:1 1 auto;overflow-y:auto;padding-top:var(--s3);padding-bottom:var(--s5)}
.srch__count{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,228,.6);padding-bottom:var(--s2)}
.srch__results li{border-bottom:1px solid rgba(243,239,228,.18)}
.srch__results a{display:block;padding:18px 0;text-decoration:none;transition:padding .18s ease}
.srch__results a:hover,.srch__results a:focus-visible{padding-left:12px}
.srch__where{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,239,228,.6)}
.srch__title{
  display:block;padding-top:6px;
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(18px,1.7vw,26px);
  line-height:1.1;
}
.srch__snip{display:block;padding-top:8px;font-size:14.5px;line-height:1.55;color:rgba(243,239,228,.78);max-width:80ch}
.srch__snip mark{background:var(--rose);color:var(--ink);padding:0 2px}
.srch__hint{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:var(--s4)}
.srch__hint p{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,228,.6)}
.srch__chip{
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--bone);
  background:none;border:1px solid rgba(243,239,228,.4);padding:7px 14px;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.srch__chip:hover,.srch__chip:focus-visible{background:var(--bone);color:var(--ink)}
@media (max-width:680px){
  .srch__bar{padding-top:var(--s3)}
  .srch-open{min-height:32px}
}

/* ---------- routes: framework pages ---------- */
.fw-cite{font-size:13px;letter-spacing:.04em;color:rgba(243,239,228,.66);padding-bottom:10px}
.fw-disclaimer{font-size:13.5px;line-height:1.6;color:var(--stone);max-width:78ch;padding-top:var(--s3);border-top:1px solid var(--sand)}

/* ---------- route: join us ---------- */
#route-join-us .join-qa{border-top:2px solid var(--ink)}
#route-join-us .qa{border-bottom:1px solid var(--sand)}
#route-join-us .qa > summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:clamp(16.5px,1.2vw,20px);font-weight:700;line-height:1.35;
}
#route-join-us .qa > summary::-webkit-details-marker{display:none}
#route-join-us .qa > summary::after{content:"+";flex:0 0 auto;font-weight:500;font-size:22px;line-height:1.1;color:var(--stone)}
#route-join-us .qa[open] > summary::after{content:"\2212";color:var(--ink)}
#route-join-us .qa p{padding:0 0 22px;max-width:66ch;font-size:clamp(15.5px,1.1vw,18px);line-height:1.65}
#route-join-us .sec-item .elink{margin-top:var(--s2)}

/* ---------- route: frameworks hub ---------- */
#route-frameworks .fwk-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
#route-frameworks .fwk{display:flex;flex-direction:column;gap:9px;border-top:2px solid var(--ink);padding-top:var(--s3);text-decoration:none;transition:background .18s ease,border-top-color .18s ease,padding .18s ease}
#route-frameworks .fwk:hover,#route-frameworks .fwk:focus-visible{background:var(--blush);border-top-color:var(--rose)}
#route-frameworks .fwk:hover .fwk__name,#route-frameworks .fwk:focus-visible .fwk__name{text-decoration:underline;text-underline-offset:5px}
#route-frameworks .fwk__cite{font-size:12.5px;letter-spacing:.03em;color:var(--stone)}
#route-frameworks .fwk__name{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(24px,2.2vw,40px);line-height:1.02}
#route-frameworks .fwk__desc{font-size:15.5px;line-height:1.55;color:var(--stone);max-width:44ch;flex:1 1 auto}
#route-frameworks .fwk__go{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;padding-top:var(--s2)}
#route-frameworks .fwk__go .arw{transition:transform .22s ease}
#route-frameworks .fwk:hover .fwk__go .arw,#route-frameworks .fwk:focus-visible .fwk__go .arw{transform:translateX(6px)}
#route-frameworks .fwk-table{overflow-x:auto}
#route-frameworks table{width:100%;border-collapse:collapse;min-width:720px}
#route-frameworks thead th{
  text-align:left;padding:0 var(--s3) 12px 0;border-bottom:2px solid var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
#route-frameworks tbody th,#route-frameworks tbody td{
  text-align:left;vertical-align:top;padding:18px var(--s3) 18px 0;border-bottom:1px solid var(--sand);
  font-size:15px;line-height:1.5;font-weight:400;
}
#route-frameworks tbody th{width:22%}
#route-frameworks tbody th a{
  font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;
  font-size:clamp(17px,1.3vw,22px);line-height:1.1;text-decoration:none;
}
#route-frameworks tbody th a:hover,#route-frameworks tbody th a:focus-visible{text-decoration:underline;text-underline-offset:5px}
#route-frameworks tbody td{color:var(--stone)}
#route-frameworks .fwk-note{padding-top:var(--s3);font-size:13.5px;line-height:1.6;color:var(--stone);max-width:72ch}
@media (max-width:900px){#route-frameworks .fwk-grid{grid-template-columns:1fr}}

/* ---------- join us form ---------- */
.jf[hidden]{display:none}
.jf{position:fixed;inset:0;z-index:70}
.jf__scrim{position:absolute;inset:0;background:var(--ink)}
.jf__panel{position:relative;height:100%;display:flex;flex-direction:column;color:var(--bone)}
.jf__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);padding-bottom:var(--s3);flex:0 0 auto}
.jf__brand{display:flex;align-items:center;gap:14px;min-width:0}
/* reversed lockup, because the form sits on an Ink field */
.jf__mark{height:20px;width:auto;flex:0 0 auto}
.jf__eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,228,.6)}
.jf__close{font-family:inherit;font-size:28px;line-height:1;color:rgba(243,239,228,.7);background:none;border:0;padding:2px 10px;cursor:pointer}
.jf__close:hover,.jf__close:focus-visible{color:var(--bone)}
.jf__bar{height:2px;background:rgba(243,239,228,.2);flex:0 0 auto}
.jf__fill{display:block;height:100%;width:0;background:var(--rose);transition:width .35s cubic-bezier(.22,.61,.36,1)}
.jf__body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;padding-top:var(--s5);padding-bottom:var(--s5)}
.jf__step[hidden]{display:none}
.jf__step{max-width:56ch;animation:jf-in .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes jf-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.jf__num{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--rose);padding-bottom:10px}
.jf__q{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(26px,3.4vw,54px);
  line-height:1.05;
  letter-spacing:-.01em;
}
.jf__help{padding-top:12px;font-size:15.5px;line-height:1.6;color:rgba(243,239,228,.72)}
.jf__input{
  display:block;width:100%;margin-top:var(--s4);
  background:transparent;border:0;border-bottom:2px solid rgba(243,239,228,.4);
  color:var(--bone);font-family:var(--sans);font-size:clamp(18px,1.8vw,28px);line-height:1.4;
  padding:8px 0;border-radius:0;
}
.jf__input::placeholder{color:rgba(243,239,228,.3)}
.jf__input:focus{outline:none;border-bottom-color:var(--rose)}
.jf__area{resize:vertical;min-height:110px}
.jf__opts{display:flex;flex-direction:column;gap:10px;margin-top:var(--s4)}
.jf__opt{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(243,239,228,.4);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.jf__opt input{position:absolute;opacity:0;width:1px;height:1px}
.jf__key{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border:1px solid rgba(243,239,228,.5);font-size:12.5px;font-weight:700}
.jf__label{font-size:16px;font-weight:500}
.jf__opt:hover,.jf__opt:focus-within{border-color:var(--bone)}
.jf__opt:has(input:checked){background:var(--bone);color:var(--ink);border-color:var(--bone)}
.jf__opt:has(input:checked) .jf__key{border-color:var(--ink)}
.jf__err{padding-top:12px;font-size:14px;color:var(--rose)}
.jf__err[hidden]{display:none}
.jf__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-top:var(--s4)}
.jf__nav .btn{cursor:pointer;font-family:inherit}
.jf__nav .ck-link{color:var(--bone)}
.jf__nav .ck-link[hidden]{display:none}
.jf__hint{font-size:12.5px;color:rgba(243,239,228,.55)}
.jf__hint b{font-weight:700;color:rgba(243,239,228,.8)}
.jf-link{font-family:inherit;font-size:inherit;font-weight:700;background:none;border:0;padding:0;cursor:pointer;color:inherit;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:9px}
.jf-link .arw{transition:transform .25s ease}
.jf-link:hover .arw,.jf-link:focus-visible .arw{transform:translateX(6px)}
.step-cta{padding-top:14px}
.roles-links{display:flex;flex-wrap:wrap;gap:14px var(--s4);margin-top:var(--s3)}
.perks-note{margin-top:var(--s5)}
.perks-note .sec-note h3{font-size:clamp(18px,1.35vw,23px);font-weight:700;line-height:1.25}
.jf-link:hover,.jf-link:focus-visible{border-bottom-color:currentColor}
.jf__done{max-width:52ch}
.jf__back{padding-top:var(--s3);color:rgba(243,239,228,.55)}
@media (prefers-reduced-motion:reduce){.jf__step{animation:none}.jf__fill{transition:none}}

/* ---------- routes: insight articles ---------- */
.art__kick{font-size:13px;color:rgba(243,239,228,.7);padding-bottom:12px}
.art__title{font-size:clamp(28px,4.4vw,86px);text-transform:none;letter-spacing:-.01em;max-width:20ch}
.art__meta{padding-top:var(--s3);font-size:13.5px;color:rgba(243,239,228,.66)}
.art-layout{display:grid;grid-template-columns:8fr 4fr;column-gap:var(--s6)}
.art__body{min-width:0;max-width:70ch}
.art__body > p{font-size:clamp(16.5px,1.15vw,19.5px);line-height:1.7;padding-bottom:var(--s3)}
.art__body h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(21px,1.85vw,32px);
  line-height:1.06;
  padding-top:var(--s3);
  padding-bottom:var(--s2);
}
.art__body ul{padding-bottom:var(--s3)}
.art__body li{position:relative;padding-left:22px;padding-bottom:12px;font-size:clamp(15.5px,1.05vw,18px);line-height:1.6}
.art__body li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}
.art__rail{align-self:start;position:sticky;top:calc(var(--header-h) + 8px)}
.art__rail h2{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand)}
.art__rail li{border-bottom:1px solid var(--sand)}
.art__rail a{display:block;padding:14px 0;font-size:15px;font-weight:700;line-height:1.3;text-decoration:none}
.art__rail a:hover,.art__rail a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.art__all{margin-top:var(--s3)}
@media (max-width:1024px){
  .art-layout{grid-template-columns:1fr;row-gap:var(--s5)}
  .art__rail{position:static}
}

/* ---------- share rows: shared by the CEO letter and every article ----------
   The copy control is a button because it performs an action rather than
   navigating, but it must read as one more option in the row, so it inherits
   the same type, weight, color and underline as its sibling links. */
.share{margin-top:var(--s4)}
.share ul{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:var(--s3)}
.share a,
.share__copy{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  text-decoration:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:0 0 2px;
  margin:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.share a:hover,.share a:focus-visible{border-bottom-color:var(--ink)}
.share__status{min-height:1.2em;padding-top:10px;font-size:13.5px;color:var(--stone)}

/* ---------- playbooks: purchase ---------- */
.buy{border-top:2px solid var(--ink)}
.buy__row{
  display:grid;
  grid-template-columns:7fr 3fr auto;
  column-gap:var(--gutter);
  align-items:center;
  /* The row carries its own horizontal padding and pulls it back with an
     equal margin, so the wash and the rules extend past the text and the
     purchase button sits inside the shaded area rather than at its edge. */
  padding:var(--s3) 16px;
  margin-left:-16px;
  margin-right:-16px;
  border-bottom:1px solid var(--sand);
  position:relative;
}
/* the tint bleeds past the row rather than being padding, so nothing in the
   grid moves between rows or on hover */
.buy__row::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  z-index:0;
  transition:background .2s ease,box-shadow .2s ease;
}
.buy__row > *{position:relative;z-index:1}
/* The row is not a link, only the button is. The hover state exists to tie
   a title to its price and its purchase button, and focus-within gives
   keyboard users the same association when they tab to the button. */
.buy__row:hover::before,
.buy__row:focus-within::before{background:var(--blush)}


.buy__vol{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.buy__what h3{
  padding-top:6px;
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(18px,1.5vw,26px);
  line-height:1.08;
}
.buy__meta{padding-top:6px;font-size:13.5px;color:var(--stone)}
.buy__price{font-size:clamp(15px,1.15vw,19px);font-weight:700;align-self:center}
.buy__cta{white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.buy__row:hover .buy__cta,
.buy__row:focus-within .buy__cta{transform:translateX(4px)}
.buy__terms{margin-top:var(--s5)}
@media (max-width:900px){
  .buy__row{grid-template-columns:1fr;row-gap:12px;align-items:start}
  .buy__cta{justify-self:start}
}

/* ---------- join us form: file inputs ---------- */
.jf__file{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.jf__file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.jf__pick{cursor:pointer;padding:11px 22px;font-size:14px}
.jf__file input[type="file"]:focus-visible + .jf__pick{outline:3px solid var(--rose);outline-offset:3px}
.jf__fname{font-size:14.5px;color:rgba(243,239,228,.72);word-break:break-all}
.jf__done strong{font-weight:700;color:var(--bone)}

/* ---------- legal document pages: shared by all six ---------- */
.doc-eyebrow{font-size:13px;color:rgba(243,239,228,.66);padding-bottom:var(--s2)}
.doc-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(243,239,228,.35)}
.doc-eyebrow a:hover,
.doc-eyebrow a:focus-visible{border-bottom-color:var(--bone);color:var(--bone)}
.doc-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
  padding-top:var(--s4);
}
.doc-dates{font-size:13.5px;color:rgba(243,239,228,.72)}
/* Contents left, policy right, on a fixed rail rather than a grid fraction so
   the two read as columns instead of as text with a list beside it. */
.doc-layout{
  display:grid;
  grid-template-columns:minmax(200px,244px) minmax(0,1fr);
  column-gap:var(--s5);
  align-items:start;
}
.doc-layout > .doc-nav{border-right:1px solid var(--sand);padding-right:var(--s4)}
.doc-nav{
  align-self:start;
  position:sticky;
  top:calc(var(--header-h) + 16px);
  /* long policies run past the viewport, so the contents scrolls inside
     itself rather than disappearing up the page */
  max-height:calc(100vh - var(--header-h) - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:8px;
}
.doc-nav a[aria-current="true"]{color:var(--ink);font-weight:700}
@media (max-width:900px){
  .doc-nav{max-height:calc(100vh - var(--header-h) - 24px)}
}
.doc-nav h2{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);padding-bottom:12px;border-bottom:1px solid var(--sand);
}
.doc-nav li{border-bottom:0}
.doc-nav li a{display:block;padding:10px 0;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink);transition:color .18s ease,border-color .18s ease}
.doc-nav li a:hover,
.doc-nav li a:focus-visible{color:var(--ink)}
.doc-nav__dl{margin-top:var(--s3);font-size:14px;padding:11px 20px}
.doc-body{min-width:0;max-width:76ch}
.doc-body > p{font-size:clamp(16px,1.1vw,18.5px);line-height:1.68;padding-bottom:var(--s3)}
.doc-sec{padding-top:var(--s4)}
.doc-sec h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(21px,1.85vw,32px);
  line-height:1.06;
  letter-spacing:-.01em;
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--sand);
  margin-bottom:var(--s3);
}
.doc-sec p{font-size:clamp(16px,1.1vw,18.5px);line-height:1.68;padding-bottom:var(--s3)}
.doc-sec ul{padding-bottom:var(--s3)}
.doc-sec li{
  position:relative;
  padding-left:22px;
  padding-bottom:12px;
  font-size:clamp(15.5px,1.05vw,17.5px);
  line-height:1.6;
}
.doc-sec li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--ink)}
.doc-sec a{color:inherit}
.doc-foot{
  margin-top:var(--s5);
  padding-top:var(--s3);
  border-top:1px solid var(--sand);
  font-size:14.5px;
  line-height:1.6;
  color:var(--stone);
}

/* the who-we-are stylesheet sets span 6 at 900px, which is too narrow for a
   photo card on a phone. This sits last so it wins the cascade. */
@media (max-width:680px){
  #route-who-we-are .quad{grid-column:1 / -1}
}

/* touch devices get a larger floor; the control still stretches to the
   height of the button beside it */
@media (pointer:coarse){
  .srch-open{min-height:44px}
}

@media (max-width:400px){
  
}

/* ---------- news index and article template ---------- */
.nx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s4);border-bottom:2px solid var(--ink)}
.nx-chips{display:flex;flex-wrap:wrap;gap:8px}
.nx-chip{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:1px solid var(--sand);padding:8px 15px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.nx-chip:hover,.nx-chip:focus-visible{border-color:var(--ink)}
.nx-chip.is-on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.nx-count{font-size:13.5px;color:var(--stone);white-space:nowrap}
.nx-count strong{color:var(--ink)}
.nx-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter)}
.nx{display:flex;flex-direction:column;gap:8px;padding:var(--s4) 0;border-bottom:1px solid var(--sand);text-decoration:none;transition:padding .2s ease,background .2s ease}
.nx:hover,.nx:focus-visible{background:var(--blush)}
.nx[hidden]{display:none}
.nx__topic{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-ink,var(--stone))}
.nx__meta{font-size:13px;color:var(--stone)}
.nx__title{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(20px,1.8vw,30px);line-height:1.06;max-width:26ch}
.nx__dek{font-size:15.5px;line-height:1.55;color:var(--stone);max-width:46ch;flex:1 1 auto}
.nx__go{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;padding-top:8px}
.nx__go .arw{transition:transform .22s ease}
.nx:hover .nx__go .arw,.nx:focus-visible .nx__go .arw{transform:translateX(6px)}
.nx-empty{padding-top:var(--s5);font-size:16px;line-height:1.6;color:var(--stone)}
.nx-digest{grid-column:1 / 8}
.nx-digest h2{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(24px,2.2vw,38px);line-height:1.04}
.nx-digest p{padding-top:12px;font-size:16px;line-height:1.6;max-width:62ch}
.nx-digest .btn{margin-top:var(--s3);cursor:pointer}
.nx-digest__note{padding-top:var(--s3);font-size:13.5px;color:var(--stone)}

.nx-topic{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,228,.7);padding-bottom:12px}
.nx-layout{display:grid;grid-template-columns:1fr}
.nx-body{max-width:68ch;margin:0 auto}
.nx-body > p{font-size:clamp(16.5px,1.15vw,19.5px);line-height:1.72;padding-bottom:var(--s3)}
.nx-body h2{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(22px,1.9vw,33px);line-height:1.06;padding-top:var(--s3);padding-bottom:var(--s2)}
.nx-pull{margin:var(--s3) 0 var(--s4);padding:var(--s3) 0 var(--s3) var(--s4);border-left:3px solid var(--ink);font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 600;font-size:clamp(20px,1.8vw,28px);line-height:1.25}
.nx-scenario{margin:var(--s3) 0 var(--s4);padding:var(--s4);background:var(--blush)}
.nx-scenario span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);padding-bottom:10px}
.nx-scenario p{font-size:16px;line-height:1.65}
.nx-related{padding-top:var(--s6);margin-top:var(--s5);border-top:1px solid var(--sand)}
.nx-related h2{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);padding-bottom:var(--s3)}
.nx-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s3)}
.nx-rel{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:var(--s3);text-decoration:none;transition:padding .2s ease}
.nx-rel:hover,.nx-rel:focus-visible{background:var(--blush)}
.nx-rel__topic{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.nx-rel__title{font-size:clamp(16px,1.2vw,20px);font-weight:700;line-height:1.25}
.nx-rel__go{font-size:13.5px;font-weight:700}
@media (max-width:900px){
  .nx-grid{grid-template-columns:1fr}
  .nx-rel-grid{grid-template-columns:1fr}
  .nx-digest{grid-column:1 / -1}
}

/* ---------- route: fractional digest ---------- */
.dg-intro{grid-column:1 / 9;font-size:clamp(17px,1.35vw,22px);line-height:1.6}
.dg-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
.dg-item{border-top:2px solid var(--ink);padding-top:var(--s3)}
.dg-item__num{display:block;font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 700;font-weight:700;font-size:clamp(26px,2.4vw,44px);line-height:.9;color:var(--stone)}
.dg-item h3{padding-top:12px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(19px,1.6vw,28px);line-height:1.06}
.dg-item p{padding-top:9px;font-size:15px;line-height:1.55;color:var(--stone);max-width:38ch}
.dg-issues{border-top:2px solid var(--ink)}
.dg-issue{display:grid;grid-template-columns:7fr 3fr auto;column-gap:var(--gutter);align-items:center;padding:20px 0;border-bottom:1px solid var(--sand);text-decoration:none;transition:padding .2s ease,background .2s ease}
.dg-issue:hover,.dg-issue:focus-visible{background:var(--blush)}
.dg-issue__title{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(18px,1.5vw,26px);line-height:1.1}
.dg-issue__date{font-size:14px;color:var(--stone)}
.dg-issue__go{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;white-space:nowrap}
.dg-issue__go .arw{transition:transform .22s ease}
.dg-issue:hover .dg-issue__go .arw{transform:translateX(6px)}
@media (max-width:900px){
  .dg-grid{grid-template-columns:1fr}
  .dg-intro{grid-column:1 / -1}
  .dg-issue{grid-template-columns:1fr;row-gap:6px;align-items:start}
}

/* ---------- phone menu ---------- */
.burger{
  display:none;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  aspect-ratio:1;
  min-height:34px;
  padding:0;
  background:none;
  border:1px solid rgba(243,239,228,.4);
  color:var(--bone);
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.burger:hover,.burger:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.burger__bars{display:block;width:17px}
.burger__bars span{display:block;height:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease}
.burger__bars span + span{margin-top:4px}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav[hidden]{display:none}
.mnav{position:fixed;inset:0;z-index:42}
.mnav__scrim{position:absolute;inset:0;background:rgba(28,29,25,.5)}
.mnav__panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(360px,86vw);
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  padding:var(--s3) var(--s4) var(--s5);
  background:var(--ink);
  border-left:1px solid rgba(243,239,228,.25);
  overflow-y:auto;
  animation:mnav-in .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mnav-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* the burger sits under the panel once it is open, so the way out has to be
   inside it */
.mnav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid rgba(243,239,228,.25)}
.mnav__mark{display:inline-flex;color:var(--bone);text-decoration:none}
.mnav__mark .mark__seal{width:30px;height:30px}
.mnav__close{
  font-family:inherit;font-size:26px;line-height:1;
  color:var(--bone);background:none;border:1px solid rgba(243,239,228,.4);
  padding:2px 12px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.mnav__close:hover,.mnav__close:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.mnav__list{margin-top:auto}
.mnav__actions{margin-top:auto}
.mnav__list li + li{margin-top:2px}
.mnav__list a{
  display:block;
  padding:11px 0;
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(22px,6.4vw,30px);
  line-height:1.1;
  color:var(--bone);
  text-decoration:none;
}
.mnav__list a:hover,.mnav__list a:focus-visible{color:var(--rose)}
.mnav__actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:var(--s4);border-top:1px solid rgba(243,239,228,.25)}
.mnav__actions .btn{text-align:center}
.mnav__actions .btn--edge{background:transparent;color:var(--bone);border-color:rgba(243,239,228,.55)}
.mnav__actions .btn--edge:hover,.mnav__actions .btn--edge:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.mnav__tel{padding-top:6px;font-size:15px;color:rgba(243,239,228,.75);text-decoration:none;text-align:center}
.mnav__tel:hover,.mnav__tel:focus-visible{color:var(--bone)}

@media (max-width:900px){
  /* the nav and the two buttons live in the menu now, so the masthead is a
     single row again and does not need the taller allowance */
  :root{--header-h:104px}
  .burger{display:inline-flex}
  .masthead .nav{display:none}
  .utility .btn{display:none}
}
@media (prefers-reduced-motion:reduce){.mnav__panel{animation:none}}

/* ---------- announcement strip on small screens ----------
   Three elements wrapping onto three lines took 84px off the top of every
   phone screen. Below 900px it becomes one tappable line. */
@media (max-width:900px){
  :root{--announce-h:44px}
  .announce{
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    padding-top:9px;
    padding-bottom:9px;
    font-size:12.5px;
  }
  .announce b{flex:0 0 auto}
  .announce p{
    flex:1 1 auto;
    min-width:0;
    margin-right:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .announce .elink{flex:0 0 auto;font-size:12.5px;border-bottom-width:1px}
  .announce .elink .arw{display:none}
}
@media (max-width:560px){
  :root{--announce-h:40px}
  /* the standfirst is the first thing to go: the label and the link carry it */
  .announce p{display:none}
  .announce b{flex:1 1 auto}
}

/* ---------- footer columns ----------
   Grouped right on wide screens. Between 1100 and 900 there is not enough
   width for three two-column blocks, so the brand takes its own row and the
   three columns share the twelve evenly. */
@media (max-width:1200px){
  .foot__col a{font-size:13.5px}
  .foot__col li{margin-top:9px}
}
@media (max-width:900px){
  .foot__brand{grid-column:1 / -1}
  .foot__col,
  .foot__brand + .foot__col{grid-column:span 4}
}
@media (max-width:680px){
  /* three columns across a phone leaves 95px each, so they pair up instead */
  .foot__col,
  .foot__brand + .foot__col{grid-column:span 6}
}

/* ---------- press kit typography ---------- */
.type-specs{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gutter);row-gap:var(--s4)}
.type-spec{border-top:2px solid var(--ink);padding-top:var(--s3)}
.type-spec__sample{font-family:var(--sans);font-size:clamp(34px,4.4vw,64px);font-weight:500;line-height:1;padding-bottom:var(--s3)}
.type-spec__sample--display{font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 700;font-weight:700;text-transform:uppercase}
.type-spec h3{font-size:clamp(17px,1.3vw,22px);font-weight:700;line-height:1.2}
.type-spec p{padding-top:9px;font-size:15px;line-height:1.55;color:var(--stone);max-width:44ch}
.type-note{padding-top:var(--s4);font-size:14px;line-height:1.6;color:var(--stone);max-width:70ch}
@media (max-width:900px){.type-specs{grid-template-columns:1fr}}
.signup__status{min-height:1.2em;padding-top:8px;font-size:13.5px}

/* ---------- policy rail, Stripe-style ---------- */
.doc-nav ul{padding-top:10px}
.doc-nav li + li{margin-top:1px}
.doc-nav ul a{
  display:block;
  padding:7px 0 7px 12px;
  border-left:2px solid transparent;
  font-size:13.5px;
  line-height:1.35;
  color:var(--stone);
  text-decoration:none;
  transition:color .16s ease,border-color .16s ease;
}
.doc-nav ul a:hover,
.doc-nav ul a:focus-visible{color:var(--ink);border-left-color:var(--sand)}
.doc-nav ul a[aria-current="true"]{color:var(--ink);font-weight:700;border-left-color:var(--ink)}
.doc-nav__dl{margin-top:var(--s4);width:100%;text-align:center}
@media (max-width:1024px){
  .doc-layout{grid-template-columns:minmax(164px,200px) minmax(0,1fr);column-gap:var(--s4)}
  .doc-body{max-width:none}
}

/* ---------- policy pages ----------
   Contents on the left, policy on the right, held as two columns as far down
   as the measure allows. Only below 820px does the rail go above the text. */
@media (max-width:820px){
  .doc-layout{grid-template-columns:1fr;row-gap:var(--s4)}
  .doc-layout > .doc-nav{
    position:static;
    max-height:none;
    overflow:visible;
    padding-right:0;
    padding-bottom:var(--s3);
    border-right:0;
    border-bottom:1px solid var(--sand);
  }
}



/* ---------- fractional leadership: three sector columns ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.sector{border-top:2px solid var(--ink);padding-top:var(--s3);min-width:0}
.sector h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(21px,1.8vw,30px);line-height:1.05}
.sector__note{padding-top:8px;font-size:13.5px;line-height:1.5;color:var(--stone)}
.seat-list{margin-top:var(--s3);border-top:1px solid var(--sand)}
.seat-list li{padding:13px 0;border-bottom:1px solid var(--sand)}
.seat-list li:last-child{border-bottom:0}
.seat__name{display:block;font-size:15px;font-weight:700;line-height:1.3}
.seat__fee{display:block;padding-top:5px;font-size:14.5px;font-weight:700;color:var(--ink)}
.seat__fee span{font-weight:400;font-size:13px;color:var(--stone)}
.role-note{padding-top:var(--s5);font-size:14px;line-height:1.65;color:var(--stone);max-width:82ch}
@media (max-width:900px){
  .sectors{grid-template-columns:1fr;row-gap:var(--s4)}
}

.rate-terms{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--sand);
}
.rate-terms__col h3{font-size:clamp(15px,1.15vw,18px);font-weight:700;line-height:1.25}
.rate-terms__col p{padding-top:9px;font-size:14px;line-height:1.6;color:var(--stone);max-width:44ch}
@media (max-width:1024px){.rate-terms{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.rate-terms{grid-template-columns:1fr}}

/* ---------- fractional leadership: lead-in and phases ---------- */
.fl-lead{grid-column:1 / 7}
.fl-lead h2{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(26px,2.4vw,42px);line-height:1.04}
.fl-lead__p{padding-top:var(--s3);font-size:clamp(15.5px,1.2vw,19px);line-height:1.65;max-width:52ch}
.fl-facts{grid-column:8 / 13;align-self:end;border-top:2px solid var(--ink)}
.fl-facts > div{display:grid;grid-template-columns:5fr 8fr;gap:var(--s2);padding:13px 0;border-bottom:1px solid var(--sand)}
.fl-facts dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.fl-facts dd{margin:0;font-size:14.5px;line-height:1.5}
.phases{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.phase{min-width:0}
.phase__head{
  padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
}
.phase .steps{counter-reset:none;padding-top:var(--s3)}
.phase .steps > li{display:block;padding:14px 0;border-bottom:1px solid var(--sand)}
.phase .steps > li > div{min-width:0}
.phase .steps li:last-child{border-bottom:0}
.phase .steps li::before{content:none}
.phase h4{font-size:16px;font-weight:700;line-height:1.3}
.phase .steps p{padding-top:6px;font-size:14px;line-height:1.55;color:var(--stone)}
@media (max-width:1024px){
  .fl-lead,.fl-facts{grid-column:1 / -1}
  .fl-facts{margin-top:var(--s4)}
  .phases{grid-template-columns:1fr;row-gap:var(--s4)}
}

/* overflow-x:clip stops horizontal scroll without making the page a scroll
   container, which is what position:sticky needs. Older engines that do not
   support clip fall back to hidden and lose sticky rails rather than the
   layout, which is the right way round. */
@supports not (overflow-x: clip){
  html,body{overflow-x:hidden}
}

/* a secondary action that sits beside the membership buttons without
   competing with them */
.btn--slim{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
  padding:9px 18px;
  font-size:13.5px;
}
.btn--slim:hover,.btn--slim:focus-visible{background:var(--ink);color:var(--bone)}
.field--wide{grid-column:1 / -1}

/* two notes side by side, each half the measure of a single one */
.sec-note--half{grid-column:span 6;display:flex;flex-direction:column}
.sec-note--half .elink{margin-top:auto;padding-top:var(--s3)}
.sec-note--alt{background:var(--sand)}
@media (max-width:900px){
  .sec-note--half{grid-column:1 / -1}
}

.e404__path{
  margin-top:var(--s4);
  font-size:14px;
  color:rgba(243,239,228,.72);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}

/* ---------- fractional leadership: what each level commits to ---------- */
.commits{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.commit{border-top:2px solid var(--ink);padding-top:var(--s3);min-width:0}
.commit h3{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(21px,1.8vw,30px);line-height:1.05}
.commit__note{padding-top:8px;font-size:13.5px;line-height:1.5;color:var(--stone)}
.commit__list{margin-top:var(--s3);border-top:1px solid var(--sand)}
.commit__list > div{padding:12px 0;border-bottom:1px solid var(--sand)}
.commit__list > div:last-child{border-bottom:0}
.commit__list dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.commit__list dd{margin:0;padding-top:5px;font-size:14.5px;line-height:1.5}
@media (max-width:900px){.commits{grid-template-columns:1fr;row-gap:var(--s4)}}

.e404__report{padding-top:var(--s5);font-size:14.5px;line-height:1.6;color:var(--stone);max-width:70ch}



.letter__sub{
  padding-top:var(--s4);
  padding-bottom:var(--s2);
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.7vw,28px);
  line-height:1.08;
}
.letter__pull{
  margin:var(--s3) 0 var(--s4);
  padding:var(--s2) 0 var(--s2) var(--s4);
  border-left:3px solid var(--ink);
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:clamp(19px,1.7vw,27px);
  line-height:1.26;
}
.letter__list{padding-top:var(--s2);padding-bottom:var(--s3)}
.letter__list li{padding:9px 0 9px 22px;position:relative;font-size:clamp(15.5px,1.1vw,18px);line-height:1.6;border-bottom:1px solid var(--sand)}
.letter__list li:last-child{border-bottom:0}
.letter__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(9px + .8em);
  width:12px;
  height:1.5px;
  background:var(--ink);
}

/* ---------- theory of change ---------- */
.toc-lead{grid-column:1 / 7}
.toc-lead h2{padding-top:10px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(24px,2.3vw,40px);line-height:1.06}
.toc-lead__body{grid-column:8 / 13;align-self:end}
.toc-lead__body p{font-size:clamp(15.5px,1.15vw,18.5px);line-height:1.62;padding-bottom:var(--s3)}
.toc-lead__body p:last-child{padding-bottom:0}
.toc-split{row-gap:var(--s5)}
.toc-col{grid-column:span 6;min-width:0}
.toc-col__head{
  padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
}
.toc-list{padding-top:var(--s2)}
.toc-list li{display:grid;grid-template-columns:38px 1fr;gap:var(--s2);padding:16px 0;border-bottom:1px solid var(--sand)}
.toc-list li:last-child{border-bottom:0}
.toc-list li::before{content:none}
.toc-num{
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:26px;
  line-height:1;
  color:var(--sand);
}
.toc-item strong{display:block;font-size:16px;line-height:1.3}
.toc-item span{display:block;padding-top:5px;font-size:14.5px;line-height:1.55;color:var(--stone)}
.toc-solution{grid-column:1 / 10}
.toc-solution h2{padding-top:10px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(24px,2.2vw,38px);line-height:1.07}
.toc-solution p{padding-top:var(--s3);font-size:clamp(15.5px,1.2vw,19px);line-height:1.62;max-width:70ch}
.toc-cards{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.toc-card{border-top:2px solid var(--ink);padding-top:var(--s3);min-width:0}
.toc-card__num{
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(24px,2vw,34px);
  line-height:1;
  color:var(--stone);
}
.toc-card h3{padding-top:12px;font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-size:clamp(17px,1.3vw,22px);line-height:1.1}
.toc-card__body{padding-top:10px;font-size:14px;line-height:1.58;color:var(--stone)}
@media (max-width:1100px){
  .toc-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .toc-lead,.toc-lead__body,.toc-solution{grid-column:1 / -1}
  .toc-lead__body{padding-top:var(--s4)}
  .toc-col{grid-column:1 / -1}
}
@media (max-width:680px){
  .toc-cards{grid-template-columns:1fr}
}

.rq-set{border:0;padding:0;margin:0;min-width:0}
.rq-set legend{
  padding:0 0 var(--s2);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
}
.rq-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--sand);cursor:pointer}
.rq-row:last-child{border-bottom:0}
.rq-row input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--ink)}
.rq-row span{font-size:15px;line-height:1.45}

.rq-row input[type="radio"]{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--ink)}

/* Form controls: a select must look like the inputs beside it, not like the
   operating system default. */
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:0;
}
.field textarea{resize:vertical;min-height:110px}
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1D19' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  cursor:pointer;
}
.field select:focus,
.field textarea:focus{outline:3px solid var(--rose);outline-offset:2px}
.field select:disabled{color:var(--stone);cursor:not-allowed}

/* the paired note boxes should sit level regardless of how the text wraps */
.sec-note--half{align-self:stretch}
.sec-note--half > p{flex:1 1 auto}

/* a fieldset inside the form grid must match the field rhythm around it */
.rq-set legend{padding-bottom:10px}
.rq-set{padding-bottom:var(--s2)}

/* Articles: date and share sit under the headline, the byline signs off at
   the end, and the body holds a single reading column. */
.art__date{
  padding-top:var(--s3);
  font-size:14px;
  color:rgba(243,239,228,.72);
}
/* Article share row: pill buttons on the Ink field, in a line rather than a
   stack. The base .share list is a column, so direction is reset here. */
.share--art{
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid rgba(243,239,228,.22);
  text-align:left;
}
.share--art ul{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-top:0;
}
.share--art li{border:0;padding:0;margin:0}
.share--art li::before{content:none}
.share--art a,
.share--art button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  color:var(--bone);
  background:transparent;
  border:1px solid rgba(243,239,228,.42);
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.share--art a:hover,
.share--art a:focus-visible,
.share--art button:hover,
.share--art button:focus-visible{
  background:var(--bone);
  color:var(--ink);
  border-color:var(--bone);
}
.share--art .share__status{
  color:rgba(243,239,228,.72);
  font-size:13px;
  padding-top:12px;
}
@media (max-width:520px){
  .share--art a,
  .share--art button{padding:9px 14px;font-size:12.5px}
}
.art__sign{
  margin-top:var(--s5);
  padding-top:var(--s3);
  border-top:1px solid var(--sand);
  font-size:15.5px;
}

/* How we engage: grouped by phase across three columns, so the sequence reads
   as substance rather than as a column of numerals. */
.engages{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gutter);row-gap:var(--s5)}
.engage{min-width:0}
.engage__head{
  padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
}
.engage__list{padding-top:var(--s3);counter-reset:none}
.engage__list li{padding:14px 0;border-bottom:1px solid var(--sand)}
.engage__list li:last-child{border-bottom:0}
.engage__list li::before{content:none}
.engage h4{font-size:16.5px;font-weight:700;line-height:1.28}
.engage__list p{padding-top:7px;font-size:14.5px;line-height:1.58;color:var(--stone)}
@media (max-width:1024px){.engages{grid-template-columns:1fr;row-gap:var(--s4)}}

/* The numeral is a marker, not a column. It sits at a fixed width so headings
   line up down the list, and the copy beside it uses the page. */
.steps > li::before{min-width:2.4ch;text-align:right}
.phase .steps > li::before{min-width:0}

/* Long-form article furniture: section headings, pull quotes, lists, and the
   inline source note used where an assertion rests on published guidance. */
.art__h{
  padding-top:var(--s5);
  padding-bottom:var(--s2);
  font-family:var(--display);
  font-variation-settings:"wdth" 75,"wght" 700;
  font-weight:700;
  font-size:clamp(21px,1.8vw,30px);
  line-height:1.1;
}
.art__pull{
  margin:var(--s4) 0;
  padding:var(--s3) 0 var(--s3) var(--s4);
  border-left:3px solid var(--ink);
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:clamp(19px,1.7vw,27px);
  line-height:1.28;
}
.art__list{padding:var(--s2) 0 var(--s3)}
.art__list li{
  position:relative;
  padding:9px 0 9px 24px;
  font-size:clamp(15.5px,1.1vw,17.5px);
  line-height:1.6;
  border-bottom:1px solid var(--sand);
}
.art__list li:last-child{border-bottom:0}
.art__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(9px + .8em);
  width:12px;
  height:1.5px;
  background:var(--ink);
}
.art__num{counter-reset:an;padding:var(--s2) 0 var(--s3)}
.art__num > li{
  counter-increment:an;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--sand);
}
.art__num > li:last-child{border-bottom:0}
.art__num > li::before{
  grid-column:1;
  grid-row:1;
  content:counter(an,decimal-leading-zero);
  min-width:2.4ch;
  text-align:right;
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 700;
  font-weight:700;
  font-size:clamp(20px,1.5vw,30px);
  line-height:1.1;
  color:var(--stone);
}
.art__num h3{grid-column:2;grid-row:1;font-size:17px;font-weight:700;line-height:1.3}
.art__num p{grid-column:2;grid-row:2;padding-top:7px;font-size:15px;line-height:1.6;color:var(--stone)}
.src{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--stone);
  border:1px solid var(--sand);
  border-radius:3px;
  white-space:nowrap;
}

.stat-note{padding-top:var(--s3);font-size:13px;color:var(--stone)}

/* A single spokesperson should not sit in half a row with an empty column. */
.sp-grid--solo{grid-template-columns:1fr}
.sp-grid--solo .sp{max-width:none}
.sp-grid--solo .sp .slot--sq{max-width:280px}

a.src{text-decoration:none}
a.src:hover,
a.src:focus-visible{background:var(--ink);color:var(--bone);border-color:var(--ink)}


/* Form result. A confirmation should be unmistakable, so it carries a check
   mark and a panel rather than sitting as another line of small text. */
.signup__status:empty{display:none}
.signup__status.is-ok,
.signup__status.is-bad{
  display:flex;
  gap:10px;
  align-items:flex-start;
  width:100%;
  margin-top:var(--s2);
  padding:14px 16px;
  font-size:15px;
  line-height:1.5;
  border:1px solid var(--ink);
}
.signup__status.is-ok{background:var(--blush);color:var(--ink)}
.signup__status.is-bad{background:transparent;color:var(--ink);border-style:dashed}
.signup__status.is-ok::before,
.signup__status.is-bad::before{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:1px;
  border-radius:50%;
  background:var(--ink);
  color:var(--bone);
  font-size:12px;
  font-weight:700;
  line-height:20px;
  text-align:center;
}
.signup__status.is-ok::before{content:"\2713"}
.signup__status.is-bad::before{content:"\0021"}
.signup__status.is-busy{opacity:.7}
/* on the Ink and Blush fields the panel has to keep its contrast */
.field-ink .signup__status.is-ok{background:rgba(243,239,228,.14);color:var(--bone);border-color:rgba(243,239,228,.5)}
.field-ink .signup__status.is-ok::before{background:var(--bone);color:var(--ink)}
.field-ink .signup__status.is-bad{color:var(--bone);border-color:rgba(243,239,228,.5)}
.field-ink .signup__status.is-bad::before{background:var(--bone);color:var(--ink)}

/* Nothing in running copy should be able to widen its container: long words,
   pasted URLs, and case names all break rather than overflow. */
p, li, dd, dt, h1, h2, h3, h4, blockquote, .cat__name, .seat__name, figcaption{
  overflow-wrap:anywhere;
  word-break:normal;
}
/* Small controls carry a 44px tap area without changing how they look, which
   is the accessible minimum on touch. */
@media (pointer:coarse){
  .fsoc__btn, .share--art a, .share--art button, .srch__chip, .nx-chip,
  .doc-nav a, .faq-nav a, .mnav__panel a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .fsoc__btn{min-width:44px;justify-content:center}
}

/* Hover on the questions and on section items. Both had focus states only, so
   a pointer got no feedback where a keyboard did. Scoped to the components
   rather than to a route, since each is used on more than one page. */
.qa > summary{transition:padding .16s ease,color .16s ease}
.qa:hover,
.qa:focus-within{background:var(--blush)}
.qa:hover > summary,
.qa:focus-within > summary{padding-left:12px;padding-right:12px}
.qa:hover > p,
.qa:focus-within > p{padding-left:12px;padding-right:12px}
.qa:hover > summary::after,
.qa:focus-within > summary::after{color:var(--ink)}

.sec-item{
  transition:background .18s ease,border-top-color .18s ease,padding .18s ease;
}
/* Only the items that actually contain a link respond to the pointer. Most
   sec-item blocks are descriptive text, and shading those makes static copy
   look clickable. :focus-within is safe on its own, since nothing inside a
   text block can take focus. */
.sec-item:has(a):hover,
.sec-item:focus-within{background:var(--blush);border-top-color:var(--rose)}
.sec-item:has(a):hover h3,
.sec-item:focus-within h3{text-decoration:underline;text-underline-offset:5px}
.sec-item:has(a):hover .elink .arw,
.sec-item:focus-within .elink .arw{transform:translateX(6px)}
/* On an Ink field the Blush wash would be invisible, so the shading inverts. */
.field-ink .sec-item:has(a):hover,
.field-ink .sec-item:focus-within,
.on-ink .sec-item:has(a):hover,
.on-ink .sec-item:focus-within{background:rgba(243,239,228,.10);border-top-color:var(--rose)}

/* Cards carry the hover padding at rest and pull it back with an equal
   negative margin, so the Blush wash extends past the text without the text
   itself moving. The FAQ rows keep their indent, which reads correctly there. */
#route-documentation .doc,
#route-frameworks .fwk,
.nx-rel,
.nx,
.dg-issue,
.fw__item,
.sec-item:has(a){
  padding-left:14px;
  padding-right:14px;
  margin-left:-14px;
  margin-right:-14px;
}
#route-documentation .doc,
#route-frameworks .fwk,
.sec-item:has(a){padding-bottom:var(--s3)}

/* Mobile header. The masthead was allowed to wrap, so the search and menu
   controls dropped to a second line and sat under the logo on the left. The
   header stays a single row instead: mark on the left, controls on the right. */
@media (max-width:820px){
  .masthead{
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:var(--s3);
    row-gap:0;
  }
  .masthead .mark{flex:0 1 auto;min-width:0}
  .mark__logo{max-width:100%;height:26px}
  .masthead .mark{order:1}
  .utility{order:2;margin-left:auto;flex:0 0 auto}
}
@media (max-width:400px){
  .utility{gap:8px}
  /* At the narrowest widths the lockup is wider than the space left once the
     controls are placed, so it scales to the room available rather than
     pushing them off the edge. */
  .masthead .mark{max-width:calc(100% - 96px)}
  .mark__logo{height:auto;width:100%;max-height:24px;object-fit:contain;object-position:left center}
}