/* endoflifecareers.org
 *
 * Design tokens are the LIVE Buried in Work / Heirloom & Tell system, measured off both
 * sites rather than read from Avada's stored palette - the stored palette still holds the
 * old Roboto/#1a59e0 values and no longer matches what either site renders.
 *
 *   type      Fraunces (headings) + Plus Jakarta Sans (body)
 *   ground    #f6f3ee cream
 *   headings  #1d2a40
 *   buttons   pill, 700 weight
 *   spine     38px property strip + 76px nav bar, both max-width 1360px
 *
 * What is deliberately NOT shared: the accent. BIW is green/terracotta, H&T is light green,
 * EOLC is teal. Same family, own face.
 */

:root {
  /* shared family tokens */
  --ground:#f6f3ee;
  --surface:#ffffff;
  --ink:#1c1c1c;
  --ink-2:#212934;
  --head:#1d2a40;
  --muted:#6e6a63;
  --muted-2:#747474;
  --line:#e5e4e3;
  --line-strong:#d8d4cc;
  --parchment:#e7e2d8;

  /* EOLC's own */
  --strip:#26414f;
  --accent:#1f6f6b;
  --accent-dark:#17544f;
  --accent-soft:#e6efee;

  /* scale */
  --bar:1360px;
  --band:1098px;
  --prose:68ch;
  --pad:1.25rem;
  --radius:10px;
  --pill:999px;

  /* Outbound-link mark. Tinted with currentColor via a mask, so it works on any ground. */
  --offsite-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");

  --font-head:Fraunces,Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* [hidden] is a USER-AGENT rule (display:none), so any author `display` declaration beats
   it. .card is display:flex, .event is display:flex - so filtered-out cards were being
   marked hidden and carrying on rendering. The filters were working; the page just never
   showed it. Author-level and !important so nothing can out-specify it again. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;color:var(--head);
  line-height:1.18;text-wrap:balance;margin:0 0 .5em}
h1{font-size:2.5rem;letter-spacing:-.01em}
h2{font-size:1.75rem;margin-top:2.5rem}
h3{font-size:1.2rem;margin-top:1.75rem}
h4{font-size:1.02rem;margin-top:1.4rem}

a{color:var(--accent-dark);text-underline-offset:2px}
a:hover{color:var(--accent)}
p{margin:0 0 1.1rem}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
img{max-width:100%;height:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.7rem 1.1rem;
  z-index:99;border-radius:6px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---------------------------------------------------------------- the spine
 * Mirrors the .biwspine pattern on Buried in Work and the equivalent header on
 * Heirloom & Tell: a property strip over a sticky nav bar, both 1360px.
 * Note: this is EOLC's OWN copy. Adding EOLC to the switcher on the other two sites
 * means editing those sites, which needs sign-off first.
 */
.spine__strip{background:var(--strip);color:#dfe6ea;font-size:12px}
.spine__stripin{max-width:var(--bar);margin:0 auto;padding:0 20px;min-height:38px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spine__switch{margin-left:auto;position:relative}
.spine__switchtoggle{display:none}
.spine__switchlist{display:flex;gap:6px;flex-wrap:wrap}
.spine__switch a{background:transparent;color:#dfe6ea;border-radius:var(--pill);
  padding:4px 11px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.spine__switch a:hover{background:rgba(255,255,255,.12);color:#fff}
.spine__switch a[aria-current="true"]{background:var(--parchment);color:var(--strip)}

.spine__bar{position:sticky;top:0;z-index:30;background:var(--ground);
  border-bottom:1px solid var(--line)}
.spine__barin{max-width:var(--bar);margin:0 auto;padding:0 20px;min-height:76px;
  display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;text-decoration:none;padding:.4rem 0;flex-shrink:0}
.brand img{display:block;height:44px;width:auto}

.spine__nav{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.spine__nav a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:.45rem .7rem;border-radius:6px;white-space:nowrap}
.spine__nav a:hover{background:rgba(31,111,107,.08);color:var(--accent-dark)}
.spine__nav a[aria-current="page"]{color:var(--accent-dark);background:var(--accent-soft)}
.spine__cta{background:var(--accent);color:#fff!important;border-radius:var(--pill);
  padding:.5rem 1rem!important;font-weight:700}
.spine__cta:hover{background:var(--accent-dark);color:#fff!important}

.spine__toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-2)}

/* ---------------------------------------------------------------- layout */
.band{max-width:var(--band);margin:0 auto;padding:0 var(--pad);
  /* Card scrollers deliberately bleed past this box with a negative margin so the track
     reaches the screen edge. Clip that here, or the page itself ends up wider than the
     viewport and the whole layout sits shifted sideways on a phone.
     `clip` not `hidden`: hidden would make this a scroll container and break the
     position:sticky sidebar inside it. */
  overflow-x:clip}
.band--wide{max-width:var(--bar)}
/* padding-BLOCK, not the shorthand. `.section` is written after `.band` at the same
   specificity, so `padding:3rem 0` wiped out the band's own left and right padding - on a
   phone every card list ran flush into the edges of the screen while the headings above
   them kept their gutter. */
.section{padding-block:3rem}
.section--tight{padding-block:2rem}
.section + .section{padding-top:0}
main{display:block;min-height:50vh}

.prose{max-width:var(--prose)}
.prose > :first-child{margin-top:0}
.prose li{margin:0 0 .55rem}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1.1rem}
.prose blockquote{margin:1.75rem 0;padding:1rem 1.35rem;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-2)}
.prose blockquote p:last-child{margin:0}
.prose img{border-radius:var(--radius)}
.prose table{border-collapse:collapse;width:100%;margin:0 0 1.5rem;font-size:1rem}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;
  vertical-align:top}
.prose th{background:var(--surface);font-weight:700}
.prose a{color:var(--accent-dark)}

.lede{font-size:1.12rem;line-height:1.66;color:var(--muted);max-width:62ch;margin:0 0 1.75rem}
.crumb{font-size:.85rem;color:var(--muted);margin:0 0 .75rem}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--accent-dark);text-decoration:underline}
.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 .7rem}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:4rem 0 3.5rem}
.hero .band{max-width:var(--band)}
.hero h1{font-size:3rem;margin-bottom:.35em;max-width:20ch}
.hero__lede{font-size:1.22rem;line-height:1.6;color:var(--muted);max-width:60ch;margin:0 0 1.9rem}
.hero__actions{display:flex;gap:.7rem;flex-wrap:wrap}

.pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding:2.75rem 0 2.25rem}
.pagehead h1{margin-bottom:.3em}
.pagehead .lede{margin-bottom:0}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.8rem 1.5rem;border-radius:var(--pill);font-weight:700;font-size:.97rem;
  border:0;cursor:pointer;font-family:inherit;line-height:1.3;transition:background .15s}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--accent-dark);
  box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn--ghost:hover{background:var(--surface);color:var(--accent-dark);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn--sm{padding:.5rem 1rem;font-size:.87rem}

/* ---------------------------------------------------------------- cards
 * The role card treatment - highlighted name over supporting text - is the one piece of
 * the original design we were asked to keep. Everything else on the site was brought to
 * it, not the other way round.
 */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(23rem,1fr))}
.grid--tight{gap:.7rem}

.card{display:flex;flex-direction:column;gap:.4rem;padding:1.15rem 1.25rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.card:hover{border-color:var(--accent);box-shadow:0 3px 14px rgba(38,65,79,.09);
  transform:translateY(-1px)}
.card__name{font-family:var(--font-head);font-weight:500;font-size:1.1rem;color:var(--head);
  line-height:1.25}
a.card:hover .card__name{color:var(--accent-dark)}
.card__desc{font-size:.88rem;line-height:1.55;color:var(--muted)}
.card__meta{font-size:.78rem;color:var(--muted-2);margin-top:auto;padding-top:.5rem;
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.card__foot{margin-top:auto;padding-top:.65rem}

.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--pill);
  padding:2px 9px;white-space:nowrap}
.tag--plain{background:var(--ground);color:var(--muted)}
.tag--line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted)}

/* icons ------------------------------------------------------------------- */
.icon{width:22px;height:22px;display:block;flex-shrink:0}
.icon--sm{width:15px;height:15px;display:inline-block;vertical-align:-2px}
.icon--field{width:24px;height:24px}

.card--icon .card__head{display:flex;align-items:center;gap:.65rem;min-width:0}
.card__icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);flex-shrink:0;
  transition:background .15s,color .15s}
a.card:hover .card__icon{background:var(--accent);color:#fff}
.card--icon .card__name{margin:0}

/* "Suggest a ..." card, last in every index list */
.card--suggest{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.card--suggest .card__icon{background:var(--surface);color:var(--accent-dark)}
a.card--suggest:hover{background:var(--surface);border-style:solid;border-color:var(--accent)}

/* "Suggest a correction", on record pages */
.correct{margin:2rem 0 0;font-size:1rem;display:flex;gap:.5rem 1rem;align-items:baseline;
  flex-wrap:wrap}
.correct a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;
  text-decoration:none;color:var(--accent-dark)}
.correct a:hover{text-decoration:underline}
.correct__note{color:var(--muted);font-size:.85rem}
.correct__when{color:var(--muted-2);font-size:.8rem;font-variant-numeric:tabular-nums}
.correct__when a{color:var(--muted-2);text-decoration:underline}
.correct__when a:hover{color:var(--accent-dark)}

/* horizontal scroller ------------------------------------------------------ */
/* No visible scrollbar and no "scroll for more" caption: arrows added by
   assets/scroller.js do that job on a pointer, and a swipe is self-evident on touch. */
.scroller{position:relative;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.scroller__track{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  padding:.35rem .25rem;margin:-.35rem -.25rem;
  scrollbar-width:none;-ms-overflow-style:none}
.scroller__track::-webkit-scrollbar{display:none;height:0}
.scroller__track > *{scroll-snap-align:start;flex:0 0 clamp(15rem,80vw,19rem)}

.scroller__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 10px rgba(38,65,79,.13)}
.scroller__arrow svg{width:20px;height:20px}
.scroller__arrow:hover{border-color:var(--accent);color:var(--accent-dark)}
.scroller__arrow[hidden]{display:none}
.scroller__arrow--prev{left:calc(var(--pad) - 20px)}
.scroller__arrow--next{right:calc(var(--pad) - 20px)}
.scroller__arrow--next svg{transform:rotate(180deg)}
@media (hover:none){.scroller__arrow{display:none}}

/* spotlights --------------------------------------------------------------- */
.spot{display:flex;flex-direction:column;gap:.75rem;padding:1.35rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.spot__img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--accent-soft)}
.spot__name{font-family:var(--font-head);font-weight:500;font-size:1.1rem;color:var(--head);
  margin:0}
.spot__role{font-size:.82rem;color:var(--accent-dark);font-weight:700;margin:.15rem 0 0;
  line-height:1.45}
.spot__bio{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0}
.spot__links{margin:auto 0 0;padding-top:.35rem;display:flex;gap:.4rem;flex-wrap:wrap}

/* embedded donation form --------------------------------------------------- */
.embed{position:relative;overflow:hidden;width:100%;height:1180px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.embed{height:1420px;border-radius:0;border-left:0;border-right:0;
  margin:0 calc(var(--pad) * -1);width:calc(100% + var(--pad) * 2)}}

/* ---------------------------------------------------------------- facts rail */
.facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin:0 0 2rem}
.facts h2{margin:0 0 1rem;font-size:1.15rem}
.facts dl{margin:0;display:grid;gap:.9rem 1.5rem}
.facts dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--accent-dark);margin:0 0 .2rem}
.facts dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-2)}
@media (min-width:52rem){.facts dl{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- role layout */
.rolewrap{display:grid;gap:2.5rem;align-items:start}
@media (min-width:64rem){
  .rolewrap{grid-template-columns:minmax(0,1fr) 20rem;gap:3rem}
  .rolewrap__side{position:sticky;top:96px}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.35rem;margin:0 0 1.1rem}
.panel h2{margin:0 0 .85rem;font-size:1.05rem}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{padding:.5rem 0;border-top:1px solid var(--line);font-size:1rem;line-height:1.5}
.panel li:first-child{border-top:0;padding-top:0}
.panel li a{font-weight:600;text-decoration:none}
.panel li a:hover{text-decoration:underline}
.panel__note{font-size:1rem;color:var(--muted);margin:.6rem 0 0}
.panel__more{font-size:.85rem;font-weight:700;margin:.85rem 0 0;display:inline-block}

/* role page head + jump nav ------------------------------------------------ */
.rolehead{display:flex;gap:1rem;align-items:flex-start}
.rolehead__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);flex-shrink:0;
  margin-top:.25rem}
.rolehead__icon .icon{width:30px;height:30px}
.rolehead h1{margin-bottom:.25em}
.rolehead .lede{margin-bottom:0}

/* Jump nav: the answer to "this page is a long scroll" that does not hide anything. */
.jump{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.5rem 0 0;padding-top:1.25rem;
  border-top:1px solid var(--line)}
.jump a{font-size:.82rem;font-weight:700;color:var(--accent-dark);text-decoration:none;
  background:var(--ground);border:1px solid var(--line);border-radius:var(--pill);
  padding:.35rem .8rem;white-space:nowrap}
.jump a:hover{background:var(--accent-soft);border-color:var(--accent)}

/* Sections, each its own block rather than one undifferentiated column of text. */
.sect{padding:1.5rem 0 0;scroll-margin-top:104px}
.sect + .sect{border-top:1px solid var(--line);margin-top:1.75rem}
.sect__h{margin:0 0 .9rem;font-size:1.45rem}
.sect .prose > :first-child{margin-top:0}
.sect .prose > :last-child{margin-bottom:0}

/* Inline cross-reference into another record page. Underlined so it reads as a link in a
   sentence, but quieter than a standalone call to action. */
.xref{color:var(--accent-dark);text-decoration:underline;text-decoration-color:var(--accent-soft);
  text-decoration-thickness:2px;font-weight:600}
.xref:hover{text-decoration-color:var(--accent)}

/* credential type badges --------------------------------------------------- */
.tag--license{background:#f6e6dd;color:#8a4520}
.tag--certification{background:var(--accent-soft);color:var(--accent-dark)}
.tag--training{background:#e9e6f2;color:#4a3f75}
.typeline{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin:0 0 1rem}
.typeline__note{font-size:.86rem;color:var(--muted)}
.legend{display:flex;gap:.5rem 1rem;flex-wrap:wrap;align-items:baseline;font-size:.82rem;
  color:var(--muted);margin:0}

/* providers list on a category credential ---------------------------------- */
.rec__h{margin:0 0 .5rem;font-size:1.1rem}
.rec__intro{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.providers{list-style:none;margin:0;padding:0}
.providers li{padding:.6rem 0;border-top:1px solid var(--line);font-size:.95rem}
.providers li:first-child{border-top:0;padding-top:0}
.providers a{font-weight:600}

/* people in a side panel --------------------------------------------------- */
.panel--people li{display:flex;gap:.6rem;align-items:flex-start}
.panel__face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* donation embed note ------------------------------------------------------ */
.embed__note{font-size:.85rem;color:var(--muted);margin:.8rem 0 0}
.formnote{background:var(--accent-soft);border-radius:8px;padding:.7rem .9rem;
  font-size:.88rem;margin:0 0 1rem;color:var(--accent-dark)}
.formnote a{font-weight:700}

/* events ------------------------------------------------------------------- */
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.event{display:flex;gap:1.1rem;padding:1.15rem 1.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.event__when{flex-shrink:0;width:62px;text-align:center;background:var(--accent-soft);
  border-radius:10px;padding:.5rem .25rem;align-self:flex-start;color:var(--accent-dark)}
.event__mon{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase}
.event__day{display:block;font-family:var(--font-head);font-size:1.5rem;line-height:1.1}
.event__yr{display:block;font-size:.68rem;color:var(--muted)}
.event__body{min-width:0}
.event__title{font-size:1.08rem;margin:0 0 .3rem}
.event__title a{text-decoration:none;color:var(--head)}
.event__title a:hover{color:var(--accent-dark);text-decoration:underline}
.event__sum{font-size:.88rem;color:var(--muted);margin:0 0 .5rem;line-height:1.55}
.event__meta{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:0;font-size:.8rem}
.event__org{color:var(--muted)}
@media (max-width:640px){
  .event{flex-direction:column;gap:.7rem}
  .event__when{display:flex;gap:.35rem;width:auto;align-items:baseline;padding:.3rem .7rem}
  .event__day{font-size:1.05rem}
}

/* "is this right for you" prompt on the home page -------------------------- */
.askbox{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:1.6rem 1.75rem}
.askbox__h{margin:0 0 .4rem;font-size:1.4rem}
.askbox__p{margin:0;color:var(--muted);max-width:52ch;font-size:1rem}
.askbox__cta{margin:0;flex-shrink:0}
@media (max-width:640px){.askbox{padding:1.25rem}.askbox__cta .btn{width:100%;text-align:center}}

/* home page spotlight bar -------------------------------------------------- */
.spotbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.75rem}
.spotbar__intro{margin:0 0 1.25rem;max-width:60ch}
.spotbar__h{margin:0 0 .4rem;font-size:1.4rem}
.spotbar__p{margin:0 0 1rem;color:var(--muted);font-size:1rem}
.spotbar .scroller{margin:0 -1.75rem;padding:0 1.75rem}
.spotbar .scroller__track > *{flex:0 0 11rem}
.spotmini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
  padding:1rem .75rem;border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;background:var(--ground);transition:border-color .15s,transform .15s}
.spotmini:hover{border-color:var(--accent);transform:translateY(-1px)}
.spotmini img{width:72px;height:72px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--accent-soft)}
.spotmini__n{font-family:var(--font-head);font-size:.95rem;color:var(--head);line-height:1.25}
.spotmini__r{font-size:.75rem;color:var(--muted);line-height:1.4}
@media (max-width:640px){.spotbar{padding:1.25rem}.spotbar .scroller{margin:0 -1.25rem;padding:0 1.25rem}}

.guidelink{margin:.9rem 0 0}
.guidelink a{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;
  color:var(--accent-dark);text-decoration:none;background:var(--accent-soft);
  border-radius:var(--pill);padding:.45rem .9rem}
.guidelink a:hover{background:var(--accent);color:#fff}

.card--rec .card__name a{text-decoration:none;color:var(--head)}
.card--rec .card__name a:hover{color:var(--accent-dark);text-decoration:underline}
.card__amount{font-weight:700;color:var(--accent-dark);font-size:.92rem}

/* credential panels: an "i" that explains what the KIND of credential is --- */
.panel__h{display:flex;align-items:center;gap:.4rem;margin:0 0 .85rem;font-size:1.05rem}
.info{background:none;border:0;padding:0;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;flex-shrink:0}
.info svg{width:16px;height:16px}
.info:hover{color:var(--accent-dark);background:var(--accent-soft)}
.info[aria-expanded="true"]{color:var(--accent-dark);background:var(--accent-soft)}
.info__body{background:var(--accent-soft);border-radius:8px;padding:.75rem .85rem;
  margin:0 0 .9rem;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.info__body[hidden]{display:none}
.info__body p{margin:0 0 .5rem}
.info__body a{font-weight:700;font-size:.83rem}
.panel__none{margin:0;font-size:1rem;color:var(--muted);line-height:1.55}

/* career fields, above the roles list ------------------------------------- */
/* Six fields fit as a grid at every width, so there is no scroller here and nothing is
   hidden off the edge - you see all of them before you start choosing a role. */
.fieldrow{margin:0 0 2rem}
.fieldrow__h{margin:0 0 .9rem;font-size:1.2rem}
.fieldgrid{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
/* Fields are a different SURFACE from the record cards below them - tinted rather than
   white - so the two rows of six read as navigation, not as more results. */
.fieldchip{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem;
  background:var(--accent-soft);border:1px solid #cfe0de;border-radius:var(--radius);
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.fieldchip:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(31,111,107,.13);
  transform:translateY(-1px)}
.fieldchip__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--surface);color:var(--accent-dark);flex-shrink:0}
.fieldchip__icon .icon{width:20px;height:20px}
.fieldchip__body{display:flex;flex-direction:column;min-width:0}
.fieldchip__n{font-family:var(--font-head);font-size:.95rem;color:var(--head);line-height:1.25}
.fieldchip__c{font-size:.76rem;color:var(--accent-dark);font-weight:600}
@media (max-width:900px){.fieldgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .fieldgrid{grid-template-columns:1fr 1fr;gap:.5rem}
  .fieldchip{padding:.55rem .6rem;gap:.5rem}
  .fieldchip__icon{width:28px;height:28px;border-radius:8px}
  .fieldchip__icon .icon{width:17px;height:17px}
  .fieldchip__n{font-size:.84rem}
  .fieldchip__c{font-size:.7rem}
}

/* nomination form bits */
.form__h{font-size:1.1rem;margin:0 0 .9rem}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.92rem;color:var(--ink-2);
  cursor:pointer;line-height:1.5}
.check input{margin-top:.2rem;width:1rem;height:1rem;accent-color:var(--accent);flex-shrink:0}

/* KPI row ------------------------------------------------------------------
 * A handful of headline numbers is a stat tile row, not a chart. Each tile is a filter,
 * so the number is a way into the list rather than decoration. Emphasis colour job, not
 * identity: one accent, and the label text wears text tokens rather than a series colour.
 */
.kpi{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin:0 0 1.25rem;padding:0 .15rem}
/* Deliberately NOT card-shaped. The cards below these are clickable, and a bordered white
   box sitting above them reads as a control you can press. These are a caption for the
   collection, so they get no surface, no border and no hover. */
/* Centred within its own column, so the row reads as four evenly weighted facts rather
   than a ragged left edge. The padding is symmetric on purpose: pad only one side and the
   text centre no longer sits on the column centre. */
.kpi__tile{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.05rem;padding:0 .75rem;background:none;border:0;position:relative}
.kpi__tile + .kpi__tile::before{content:"";position:absolute;left:0;top:.35rem;bottom:.3rem;
  width:1px;background:var(--line-strong)}
.kpi__n{font-family:var(--font-head);font-weight:500;font-size:1.7rem;line-height:1.1;
  color:var(--head);font-variant-numeric:tabular-nums}
.kpi__l{font-size:.78rem;line-height:1.35;color:var(--muted);font-weight:600;
  letter-spacing:.01em;margin:0}
@media (max-width:640px){
  /* Columns instead of one squeezed row: five stats across a phone leaves each one
     unreadable. */
  .kpi{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
  .kpi__tile{padding:0 .5rem}
  .kpi__tile + .kpi__tile::before{content:none}
  .kpi__tile:nth-child(even)::before{content:"";position:absolute;left:0;top:.3rem;
    bottom:.25rem;width:1px;background:var(--line-strong)}
  .kpi__n{font-size:1.35rem}
  .kpi__l{font-size:.71rem}
}

/* pagination --------------------------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line)}
.pager[hidden]{display:none}
.pager__count{margin:0;font-size:.85rem;color:var(--muted);font-weight:600}
.pager__btns{display:flex;gap:.35rem;flex-wrap:wrap}
.pager__b{font:inherit;font-size:.85rem;font-weight:700;padding:.45rem .8rem;cursor:pointer;
  background:var(--surface);color:var(--accent-dark);border:1px solid var(--line-strong);
  border-radius:var(--pill)}
.pager__b:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.pager__b:disabled{opacity:.45;cursor:default;color:var(--muted)}
.pager__n{min-width:2.2rem;text-align:center;padding:.45rem .55rem}
.pager__b[aria-current="page"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagehead__aside{margin:.6rem 0 0;font-size:.88rem}
.pagehead__aside a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pagehead__aside a:hover{color:var(--accent)}
.offsite__x{position:absolute;top:.6rem;right:.6rem;display:inline-flex;align-items:center;
  justify-content:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;line-height:0}
.offsite__x:hover{background:var(--accent-soft);color:var(--ink)}
.offsite__box--x .offsite__h{padding-right:2.2rem}
.listcta{margin-top:2rem;padding:1.6rem 1.5rem;background:var(--card);border:1px solid var(--line);border-radius:14px}
.listcta__h{margin:0 0 .4rem;font-size:1.2rem}
.listcta__lede{margin:0 0 1.1rem;color:var(--muted);max-width:60ch}
.listcta__opts{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.listcta__opts[hidden]{display:none}
.listcta__opt h3{margin:0 0 .3rem;font-size:1rem}
.listcta__opt p{margin:0 0 .75rem;font-size:.92rem;color:var(--muted)}
.offsite__box .listcta__opts{margin:.2rem 0 .4rem}
/* The listing dialog is wider than the leaving-the-site one so the two choices sit side by
   side. At 32rem the box left ~456px of content, and two 240px columns plus the gap need
   ~498px, so the grid silently wrapped to one column. Side by side also makes the dialog
   SHORTER, which matters more on a laptop than the extra width costs. Stacks below 640px. */
.offsite__box--x{max-width:44rem}
@media (min-width:640px){.offsite__box--x .listcta__opts{grid-template-columns:1fr 1fr}}
.tzpick{margin:0;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);font-weight:600}
.tzpick select{font:inherit;font-size:.82rem;font-weight:700;padding:.25rem 1.4rem .25rem .5rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.tzpick select:hover{border-color:var(--accent)}
.tag--time{background:var(--accent-soft);border-color:transparent;color:var(--ink);font-variant-numeric:tabular-nums}
.pager__gap{align-self:center;padding:0 .15rem;color:var(--muted);font-weight:700;line-height:1}
.pager__size{margin:0;display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);font-weight:600}
.pager__size select{font:inherit;font-size:.85rem;font-weight:700;padding:.4rem 1.6rem .4rem .6rem;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer;min-height:44px}
.pager__size select:hover{border-color:var(--accent)}
@media (max-width:640px){.pager{justify-content:center}
  .pager__count{width:100%;text-align:center}
  .pager__btns{justify-content:center}
  .pager__size{width:100%;justify-content:center}}

/* active filters ----------------------------------------------------------- */
/* What is currently cutting the list down, stated above the results. Without this, a
   filter left set further up a tall filter box - or restored from the URL - looks like a
   broken list rather than a filter you forgot about. */
.active{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.active[hidden]{display:none}
.active__l{font-size:.8rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.active__chip{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;
  font-weight:700;padding:.3rem .5rem .3rem .7rem;cursor:pointer;background:var(--accent-soft);
  color:var(--accent-dark);border:1px solid #cfe0de;border-radius:var(--pill)}
.active__chip span{font-size:1rem;line-height:1;opacity:.7}
.active__chip:hover{border-color:var(--accent);background:#d9ebe9}
.active__clear{font:inherit;font-size:.8rem;font-weight:700;background:none;border:0;
  color:var(--accent-dark);text-decoration:underline;cursor:pointer;padding:.3rem .2rem}

/* ---------------------------------------------------------------- faq */
.faq{max-width:var(--prose);margin-top:1rem}
.faq__intro{max-width:var(--prose);color:var(--muted);margin:2.5rem 0 0;
  font-size:1rem}
/* Every item is a card whether it is open or shut. Previously only the OPEN one had a
   surface and side padding, so a row jumped sideways the moment you expanded it. */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 .5rem;padding:0 1.1rem}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;padding:.9rem 0;font-family:var(--font-head);font-weight:500;
  color:var(--head);font-size:1.02rem;list-style:none;display:flex;gap:.75rem;
  align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--font-body);font-weight:700;
  color:var(--accent);flex-shrink:0;width:1rem;font-size:1.05rem;line-height:1.5}
.faq details[open] summary::before{content:"3"}
.faq .faq__a{padding:0 0 1.1rem 1.75rem;color:var(--ink-2);font-size:.95rem;line-height:1.65;
  max-width:var(--prose)}
/* On the home page the FAQ sits among full-width card grids, so a column two thirds
   narrower than everything above it reads as a mistake. Let the cards span the section
   and keep the ANSWER at a readable measure inside them. */
.faq--wide{max-width:none}

/* ---------------------------------------------------------------- search + filters */
.finder{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;margin:0 0 1.75rem}
.finder__row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1 1 12rem}
.field label{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;padding:.62rem .8rem;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);
  color:var(--ink);width:100%}
/* Native select arrows sit on top of the text once an option label runs long. Draw our own
   and reserve room for it. */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:1.05rem;
}
.field select::-ms-expand{display:none}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);
  outline:2px solid rgba(31,111,107,.18);outline-offset:0}
.field--wide{flex:2 1 20rem}
/* Career names run long - "Estate & Trust Tax Professional" needs 214px of text
   in a 209px control, so the selected option was being cut off. A select cannot
   ellipsis its own text, so the fix is room, not truncation styling. */
.field--roomy{flex:2.4 1 12rem}
/* Four controls on one line cannot give the career select the ~290px that
   "Estate & Trust Tax Professional" needs without pushing a neighbour onto a
   second row where it stretched to the full width. Search is a different kind
   of control from the three facets, so it takes its own line and the facets
   share the next. Below 52rem everything stacks anyway. */
@media (min-width:52rem){
  .finder--searchtop .finder__row{flex-wrap:wrap}
  .finder--searchtop .finder__row > .field--wide{flex:1 1 100%}
}
.field__hint{font-size:.78rem;color:var(--muted);font-weight:400;text-transform:none;
  letter-spacing:0}
.finder__foot{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:.9rem;flex-wrap:wrap}
.count{font-size:.88rem;color:var(--muted);font-weight:600}
/* The stats line sits directly above the filter box, where it reads as a description of
   what you are about to filter rather than as part of the page title. */
.finder__stat{margin:0 0 .6rem}
.linkbtn{background:none;border:0;color:var(--accent-dark);font:inherit;font-size:.86rem;
  font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted);background:var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--radius)}

/* ---------------------------------------------------------------- record pages */
.rec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.65rem;margin:0 0 1.5rem;max-width:var(--prose)}
.rec dl{margin:0;display:grid;gap:.85rem 1.5rem}
@media (min-width:44rem){.rec dl{grid-template-columns:11rem minmax(0,1fr);gap:.9rem 1.5rem}
  .rec dt{text-align:left}}
.rec dt{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--muted);padding-top:.15rem}
.rec dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- cross-promo */
.cross{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:1.5rem 1.65rem;margin-top:3rem;max-width:var(--prose)}
.cross h2{margin:0 0 .55rem;font-size:1.15rem}
.cross p{margin:0 0 1rem;color:var(--muted);font-size:.95rem}
.cross p:last-child{margin:0}

.notice{background:#fdf6ec;border:1px solid #eadcc4;border-radius:var(--radius);
  padding:1rem 1.2rem;font-size:1rem;color:#6b5327;margin:0 0 1.5rem}

/* off-site links ----------------------------------------------------------- */
/* Every link that leaves the site is marked by assets/offsite.js and gets an icon - on
   buttons, cards, the property switcher and the footer too, not only in prose.
   The icon is a MASK tinted with currentColor rather than a coloured background image, so
   it stays visible on a teal button and on the dark strip as well as on cream. */
.is-offsite::after{
  content:"";display:inline-block;width:.72em;height:.72em;margin-left:.3em;
  vertical-align:-0.05em;background-color:currentColor;
  -webkit-mask:var(--offsite-icon) no-repeat center/contain;
  mask:var(--offsite-icon) no-repeat center/contain;
  opacity:.85;flex-shrink:0;
}
.card.is-offsite::after{align-self:flex-start;margin-left:0;margin-top:.15rem}
.card.is-offsite .card__name::after{
  content:"";display:inline-block;width:.66em;height:.66em;margin-left:.32em;
  vertical-align:-0.04em;background-color:currentColor;
  -webkit-mask:var(--offsite-icon) no-repeat center/contain;
  mask:var(--offsite-icon) no-repeat center/contain;opacity:.8;
}
.card.is-offsite::after{content:none}   /* the name carries it instead, so it sits inline */
.spine__switch .is-offsite::after{opacity:.7;width:.62em;height:.62em}
/* A logo is not a sentence - an arrow glued to the corner of a wordmark just looks like
   part of the mark. The interstitial still fires, which is the part that matters. */
.f__biw.is-offsite::after,.brand.is-offsite::after{content:none}
.event__title a.is-offsite::after{opacity:.75}

/* leaving-the-site interstitial */
.offsite[hidden]{display:none}
.offsite{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:1.25rem}
.offsite__backdrop{position:absolute;inset:0;background:rgba(28,28,28,.55)}
.offsite__box{position:relative;background:var(--surface);border-radius:var(--radius);
  padding:1.6rem 1.75rem;max-width:32rem;width:100%;box-shadow:0 18px 50px rgba(28,28,28,.28)}
.offsite__h{margin:0 0 .6rem;font-size:1.25rem}
.offsite__body{margin:0 0 .6rem;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.offsite__host{margin:0 0 1.35rem;font-family:var(--font-head);font-size:1rem;
  color:var(--head);word-break:break-all}
.offsite__actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--strip);color:#c3ced5;margin-top:4rem;
  padding:3.25rem 0 2rem;font-size:1rem}
footer.site .cols{max-width:var(--bar);margin:0 auto;padding:0 20px;display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
footer.site a{color:#fff;text-decoration:none;display:block;margin-bottom:.45rem}
footer.site a:hover{text-decoration:underline}
.f__title{font-family:var(--font-head);font-weight:500;color:#fff;font-size:1.02rem;
  margin:0 0 .8rem}
.f__logos{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1rem}
.f__logo{display:block;height:44px;width:auto;margin:0}
.f__biw{display:inline-flex;align-items:center;line-height:0}
.f__biw img{height:38px;width:auto;display:block}
.f__biw:hover{filter:brightness(1.15)}
.f__note{max-width:34ch;margin:0 0 1rem;color:#c3ced5;line-height:1.6}
.f__charitable{max-width:var(--bar);margin:2.5rem auto 0;padding:1.4rem 20px 0;
  border-top:1px solid rgba(255,255,255,.15);color:#dbe3e8;font-size:1rem;line-height:1.65}
.f__charitable strong{color:#fff;font-weight:700}
.f__legal{max-width:var(--bar);margin:1rem auto 0;padding:0 20px;font-size:1rem;
  color:#93a2ab;line-height:1.6}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1023px){
  .rolewrap__side{position:static}
}
@media (max-width:860px){
  .spine__toggle{display:flex}
  .spine__nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 0 1rem;border-top:1px solid var(--line);margin-left:0}
  .spine__nav.is-open{display:flex}
  .spine__nav a{padding:.75rem .5rem;border-radius:6px}
  .spine__cta{text-align:center;margin-top:.5rem}
  .spine__barin{flex-wrap:wrap;min-height:64px;padding:.5rem 1rem}
  .brand img{height:38px}
}
@media (max-width:640px){
  :root{--pad:1.15rem}
  /* 16px, not 15.5. Below 16 iOS zooms the page when a text input takes focus, and
     every index page on this site opens with a search box. */
  body{font-size:16px}
  h1{font-size:1.95rem}
  h2{font-size:1.4rem;margin-top:2rem}
  h3{font-size:1.1rem}
  .hero{padding:2.75rem 0 2.5rem}
  .hero h1{font-size:2.1rem}
  .hero__lede{font-size:1.06rem}
  .hero__actions .btn{width:100%;text-align:center}
  .pagehead{padding-block:2rem 1.75rem}
  /* padding-block here too. This is the rule that actually applies on a phone, and the
     shorthand version of it was the one flattening the gutter in practice. */
  .section{padding-block:2.25rem}
  .grid{grid-template-columns:1fr;gap:.8rem}
  .facts,.rec,.panel,.cross,.finder{padding:1.15rem 1.2rem}
  .card{padding:1.15rem 1.2rem}
  .sect{padding-top:1.25rem}
  .sect+.sect{margin-top:1.5rem}
  .spine__stripin{padding:.3rem 1rem;font-size:11.5px;min-height:34px}
  .spine__switch{margin-left:auto}
  /* Four pills wrap onto two rows on a phone. Collapse them behind the current site. */
  .spine__switchtoggle{display:inline-flex;align-items:center;gap:.3rem;background:transparent;
    border:0;color:var(--parchment);font:inherit;font-size:12px;font-weight:700;
    min-height:44px;min-width:44px;
    padding:4px 2px 4px 10px;cursor:pointer;border-radius:var(--pill)}
  .spine__switchtoggle svg{width:14px;height:14px;transition:transform .15s}
  .spine__switchtoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .spine__switchlist{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:40;
    flex-direction:column;gap:1px;background:var(--strip);border:1px solid rgba(255,255,255,.18);
    border-radius:8px;padding:4px;min-width:9.5rem;
    box-shadow:0 6px 20px rgba(0,0,0,.3)}
  .spine__switchlist.is-open{display:flex}
  .spine__switch a{padding:.5rem .7rem;border-radius:6px;font-size:12.5px}
  /* The site you are already on is the toggle's own label, so repeating it inside the
     panel is a row that navigates nowhere. Dropping it takes the panel from four rows
     to three - a quarter of its height - which is the only way to make this smaller
     without going under the 44px tap-target floor. Rows STAY 44px: a dropdown on a
     phone is the last place to shrink a touch target. Desktop keeps the current-site
     pill, where it is the "you are here" marker rather than a menu choice. */
  .spine__switchlist a[aria-current="true"]{display:none}
  .faq .faq__a{padding-left:0}
  footer.site .cols{gap:1.75rem}
}

/* ---------------------------------------------- women in end-of-life professions
 * The page arrived as one long scroll of prose. Everything that was really a record now
 * has a surface: organizations as cards, the statistics as a two-column comparison, the
 * entry points as numbered steps. Only the opening is still text.
 *
 * Note what is deliberately NOT here: an org card is an <article>, not an <a>. The hover
 * lift lives on `a.card`, so these carry no press affordance next to cards that are
 * genuinely clickable.
 */
.section[id]{scroll-margin-top:104px}
.sec__h{margin-top:0;font-size:1.6rem}
.sec__p{color:var(--muted);max-width:60ch;margin:0 0 1.35rem;font-size:1rem}

.wintro{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:2rem;align-items:start}
.wintro__text > :first-child{margin-top:0}
.panel--partner{position:sticky;top:6rem}
.panel--partner h2{font-size:1.25rem;margin:0 0 .5rem}
/* The partner's wordmark is the heading. Capped by width, height:auto, so the 234px source
   never renders larger than it is and never gets stretched. */
.panel__logo{margin:0 0 .7rem}
.panel__logo img{display:block;width:100%;max-width:11rem;height:auto}
.panel__actions{margin:1rem 0 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem}

/* The partner's podcast, below a rule rather than as a third link in the button stack -
   it is a different thing to go and do, and the cover art is what people recognize. */
.pod{display:flex;gap:.8rem;align-items:flex-start;margin:1.15rem 0 0;padding:1.05rem 0 0;
  border-top:1px solid var(--line)}
.pod__art{width:64px;height:64px;flex-shrink:0;border-radius:10px;
  border:1px solid var(--line)}
.pod__body{min-width:0}
.pod__eyebrow{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pod__name{display:inline-block;margin:.2rem 0 0;font-size:.9rem;font-weight:700;
  text-decoration:none;line-height:1.35}
.pod__name:hover{text-decoration:underline}
.pod__note{margin:.35rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted)}
.pod__hosts{margin:.3rem 0 0;font-size:.75rem;line-height:1.45;color:var(--muted)}

/* An org card is an article, not a link, so its name is a real heading - five cards with
   no heading between them is a page a screen reader cannot navigate. */
h3.card__name{margin:0}
.card--org .card__sub{font-size:.8rem;font-weight:700;color:var(--accent-dark);
  letter-spacing:.01em}
.card--org.is-inactive{background:transparent;border-style:dashed}
.card__foot{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline}
.card__link{font-size:.87rem;font-weight:700;text-decoration:none}
.card__link:hover{text-decoration:underline}
.card__link--alt{color:var(--muted);font-weight:600}

/* Barriers and breakthroughs, side by side. The import ran one after the other, so you
   could not hold both halves in your head at once. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.split__col{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.35rem 1.5rem}
.split__col--down{border-top:3px solid #b0603a}
.split__col--up{border-top:3px solid var(--accent)}
.split__h{margin:0 0 1rem;font-size:1.05rem}
.factlist{list-style:none;margin:0;padding:0}
.fact{padding:1rem 0;border-top:1px solid var(--line)}
.fact:first-child{border-top:0;padding-top:0}
.fact:last-child{padding-bottom:0}
.fact__stat{display:flex;align-items:baseline;gap:.45rem;font-size:.8rem;font-weight:700;
  color:var(--muted);letter-spacing:.01em}
.fact__stat b{font-family:var(--font-head);font-weight:500;font-size:1.55rem;
  color:var(--head);line-height:1;font-variant-numeric:tabular-nums}
.split__col--up .fact__stat b{color:var(--accent-dark)}
.fact__lab{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--head);
  line-height:1.25}
.fact__t{margin:.45rem 0 0;font-size:.89rem;line-height:1.6;color:var(--ink-2)}
.fact__src{margin:.35rem 0 0;font-size:.76rem;color:var(--muted-2)}
.fact__src a{color:var(--muted-2)}

/* Entry points. Numbered because the order is a real recommendation, not decoration. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.step{display:flex;gap:1.1rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.35rem}
.step__n{flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark);font-family:var(--font-head);font-size:1rem;
  display:flex;align-items:center;justify-content:center}
.step__body{min-width:0}
.step__h{margin:0;font-size:1.05rem}
.step__t{margin:.3rem 0 .55rem;font-size:.89rem;line-height:1.6;color:var(--muted)}
.step__cta{font-size:.87rem;font-weight:700;text-decoration:none}
.step__cta:hover{text-decoration:underline}

@media (max-width:900px){
  .wintro{grid-template-columns:1fr;gap:1.5rem}
  .panel--partner{position:static}
  .split{grid-template-columns:1fr}
}

/* ------------------------------------------------- the comparable facts rail
 * Five things you want before you read anything: the lowest way in, how long, whether a
 * license is legally required, how much of the job is spent with families, and what it
 * pays. Sits above the prose on every role page.
 *
 * Deliberately NOT card-shaped and NOT coloured like a callout. These are facts, not a
 * pitch - the moment this looks like a promotional panel it stops being trusted.
 */
.prof{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:0;margin:1.5rem 0 0;border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong)}
.prof__i{padding:.95rem 1.25rem .95rem 0;border-left:1px solid var(--line);
  padding-left:1.25rem}
.prof__i:first-child{border-left:0;padding-left:0}
.prof dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 .3rem}
.prof dd{margin:0}
.prof__v{display:block;font-family:var(--font-head);font-weight:500;font-size:1.08rem;
  line-height:1.25;color:var(--head)}
.prof__v--pay{font-variant-numeric:tabular-nums}
.prof__v--none{color:var(--muted-2)}
.prof__n{display:block;font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:.3rem}
.prof__n a{color:var(--muted);text-decoration:underline}
.prof__n a:hover{color:var(--accent-dark)}
.prof__caveat{margin:.9rem 0 0;font-size:1rem;line-height:1.6;color:var(--ink-2);
  max-width:68ch}

/* The license row is the one people scan for, so let it read at a glance. */
.prof__i--licensed .prof__v[data-code="yes"]{color:#8a4520}
.prof__i--licensed .prof__v[data-code="no"]{color:var(--accent-dark)}

@media (max-width:640px){
  /* Two up rather than four across, and the vertical rules become horizontal ones. */
  .prof{grid-template-columns:1fr 1fr}
  .prof__i{padding:.8rem 0 .8rem 1rem}
  .prof__i:nth-child(odd){padding-left:0;border-left:0}
  .prof__i:nth-child(n+3){border-top:1px solid var(--line)}
  .prof__v{font-size:1rem}
}

/* -------------------------------------------------- roles: view toggle + card facts
 * Two ways into the same 26 careers. A segmented control rather than tabs, because these
 * are two views of one set rather than two different pages.
 */
.viewtoggle{display:inline-flex;gap:2px;padding:3px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--pill);margin:0 0 1.25rem}
.viewtoggle__b{font:inherit;font-size:.86rem;font-weight:700;color:var(--muted);
  background:transparent;border:0;border-radius:var(--pill);padding:.5rem 1.1rem;
  cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.viewtoggle__b:hover{color:var(--accent-dark)}
.viewtoggle__b.is-on{background:var(--accent);color:#fff}

/* A second filter row for the facets, so the search box keeps its own line. */
.finder__row--facets{margin-top:.9rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}

/* The two facts on a role card. Quiet: they are there for the person comparing, and must
   not compete with the career name. */
.card__facts{display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:.76rem;
  color:var(--muted-2);line-height:1.4}
.cf--sep::before{content:"·";margin-right:.6rem;color:var(--line-strong)}

@media (max-width:640px){
  .viewtoggle{display:flex;width:100%}
  .viewtoggle__b{flex:1;text-align:center;padding:.6rem .5rem}
  .finder__row--facets{grid-template-columns:1fr 1fr;gap:.7rem}
}

/* ------------------------------------------------------------------ the arc
 * Every career at once, in the order the work happens. This is the site's argument, so it
 * is set as a reading surface rather than as cards: names in a list, close together, so
 * the LENGTH of the columns is the thing you notice first.
 *
 * No icons and no boxes here on purpose. Twenty-six icons at this size would read as
 * decoration and would compete with the role cards below, where the icons do real work.
 */
.arc{margin:0 0 1rem}
.arc__intro{color:var(--muted);max-width:60ch;margin:0 0 1.75rem;font-size:1.02rem}
.arc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
  border-top:2px solid var(--head);padding-top:1.25rem}
.arc__col{min-width:0}
.arc__h{font-family:var(--font-head);font-weight:500;font-size:1.02rem;color:var(--head);
  margin:0 0 .35rem;line-height:1.25}
.arc__note{font-size:1rem;line-height:1.5;color:var(--muted);margin:0 0 .9rem}
.arc__list{list-style:none;margin:0;padding:0}
.arc__list li{margin:0;border-top:1px solid var(--line)}
.arc__list a{display:block;padding:.5rem 0;font-size:.93rem;line-height:1.35;
  color:var(--ink-2);text-decoration:none}
.arc__list a:hover{color:var(--accent-dark)}
.arc__foot{margin:1.5rem 0 0;font-size:1rem;color:var(--muted);max-width:70ch}

@media (max-width:900px){
  .arc__grid{grid-template-columns:1fr 1fr;gap:1.5rem}
}
@media (max-width:640px){
  /* One column, but the stage headings keep their rule so the sequence still reads. */
  .arc__grid{grid-template-columns:1fr;gap:1.35rem}
  .arc__col + .arc__col{border-top:1px solid var(--line-strong);padding-top:1.25rem}
}

/* The one-line source credit under the hero. Small, factual, never a badge. */
.hero__src{margin:1.5rem 0 0;font-size:.78rem;color:var(--muted)}
.hero__src a{color:var(--muted);text-decoration:underline}
.hero__src a:hover{color:var(--accent-dark)}

/* --------------------------------------------------- collapsible filters (mobile)
 * Desktop keeps the filters open - there is room, and hiding them there helps nobody.
 * On a phone the block was 573px before the first result on /schools/, so it collapses,
 * and the button carries the number applied so a collapsed panel can never hide an active
 * filter and make the list look broken.
 */
.filtertoggle{display:none}
@media (max-width:760px){
  .filtertoggle{display:flex;align-items:center;gap:.45rem;width:100%;
    font:inherit;font-size:.92rem;font-weight:700;color:var(--ink-2);
    background:transparent;border:0;padding:.15rem 0;cursor:pointer;min-height:44px}
  .filtertoggle::after{content:"";width:8px;height:8px;margin-left:auto;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
  .finder.is-open .filtertoggle::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .finder.has-active .filtertoggle{color:var(--accent-dark)}
  .filterbody{display:none;padding-top:.9rem}
  .finder.is-open .filterbody{display:block}
}
/* --------------------------------------------------------- tap targets (mobile)
 * Footer links were 26px in a dense column of near-identical short links, and the
 * "see all roles" style link was 19px. Both below the 44px guideline and both easy to
 * mis-hit. Padding rather than font size: these should stay quiet, just be hittable.
 */
@media (max-width:760px){
  footer.site .cols a{display:block;padding:.55rem 0;min-height:44px;
    display:flex;align-items:center}
  .arc__list a{padding:.65rem 0;min-height:44px;display:flex;align-items:center}
  .pager__b{min-height:44px;min-width:44px}
  /* .btn--sm is still a button someone has to hit with a thumb. */
  .btn--sm{min-height:44px;display:inline-flex;align-items:center}
  /* The wordmark is the home link, so it is a tap target too. */
  .brand{min-height:44px}
  .correct a{min-height:44px;display:inline-flex;align-items:center}
}

/* ------------------------------------------------------- the six field colors
 * Six fields is a small enough number to carry a color identity and a large enough number
 * for the coding to mean something. These are six steps around a restrained arc from the
 * teal, NOT a rainbow: each one is desaturated enough to sit on cream without shouting,
 * and they are used as a 3px rule and an icon tint rather than as fills.
 *
 * The point is legibility without reading. Filter the roles list and the color mix of the
 * results visibly changes, which is how you can see a filter worked before you read a
 * word. It is also the thing that makes a page recognizable as ours with the logo removed.
 */
:root{
  --f-funeral:#1f6f6b;          /* the house teal - deathcare operations */
  --f-forensics:#3f5d80;        /* cool blue - investigation */
  --f-clinical:#3c6a4e;         /* green - bedside care */
  --f-grief:#8a5b7a;            /* muted plum - companionship and grief */
  --f-afterloss:#8d5626;        /* amber - after-loss and legacy */
  --f-estate:#5c5f96;           /* indigo - estate and financial */
}
.field--funeral-and-deathcare-operations{--fc:var(--f-funeral)}
.field--death-investigation-and-forensics{--fc:var(--f-forensics)}
.field--clinical-and-bedside-care{--fc:var(--f-clinical)}
.field--companionship-and-grief-support{--fc:var(--f-grief)}
.field--after-loss-and-legacy{--fc:var(--f-afterloss)}
.field--estate-financial-and-legacy-planning{--fc:var(--f-estate)}

/* A career card wears its field as a top rule and a tinted icon. */
.card--role{border-top:3px solid var(--fc,var(--line));padding-top:calc(1.15rem - 2px)}
.card--role .card__icon{background:color-mix(in srgb,var(--fc,var(--accent)) 12%,#fff);
  color:var(--fc,var(--accent-dark))}
a.card--role:hover{border-color:var(--fc,var(--accent))}
a.card--role:hover .card__icon{background:var(--fc,var(--accent));color:#fff}
.card--role .tag{background:color-mix(in srgb,var(--fc,var(--accent)) 12%,#fff);
  color:var(--fc,var(--accent-dark))}

/* The role page header carries the same mark, so the two surfaces agree. */
.rolehead__icon{color:var(--fc,var(--accent-dark))}
.pagehead--field{border-top:3px solid var(--fc,var(--line))}

/* Field chips and the fields index. */
.fieldchip{border-left:3px solid var(--fc,var(--line))}
.fieldchip__icon{color:var(--fc,var(--accent-dark))}

.fieldfull{display:grid;gap:2rem}
.fieldfull__s{border-top:3px solid var(--fc,var(--line-strong));padding-top:1.25rem}
.fieldfull__head{display:flex;gap:.85rem;align-items:flex-start;margin:0 0 1rem}
.fieldfull__icon{color:var(--fc,var(--accent-dark));flex-shrink:0;margin-top:.15rem}
.fieldfull__h{margin:0 0 .25rem;font-size:1.25rem}
.fieldfull__h a{text-decoration:none;color:var(--head)}
.fieldfull__h a:hover{color:var(--fc,var(--accent-dark))}
.fieldfull__d{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:62ch}
.fieldfull__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 1.5rem}
.fieldfull__list li{border-top:1px solid var(--line);padding:.5rem 0;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.fieldfull__list a{text-decoration:none;font-size:.94rem;color:var(--ink-2)}
.fieldfull__list a:hover{color:var(--fc,var(--accent-dark))}
.fieldfull__meta{font-size:.75rem;color:var(--muted-2);white-space:nowrap}
.fieldfull__foot{margin:2.5rem 0 0;color:var(--muted);font-size:.92rem;max-width:70ch}

@media (max-width:640px){
  .fieldfull__list{grid-template-columns:1fr}
}

/* Who an event is for. Quiet - it sits under the meta line, not competing with it. */
.event__for{margin:.55rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.event__forl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);margin-right:.15rem}
.event__for .tag{text-decoration:none;color:var(--fc,var(--muted));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc,var(--line-strong)) 40%,#fff)}
.event__for .tag:hover{box-shadow:inset 0 0 0 1px var(--fc,var(--accent))}

/* ------------------------------------------------- "and who it is probably not for"
 * Deliberately NOT a warning box. No red edge, no icon, no caution styling. This is
 * information offered out of respect for the reader's time, and dressing it as a warning
 * would turn a useful fact into discouragement.
 */
.notfor__t{font-size:1.02rem;line-height:1.7;color:var(--ink-2);margin:0 0 .9rem;
  max-width:68ch}
.notfor__n{font-size:1rem;color:var(--muted);margin:0}

/* --------------------------------------------- what a program or credential leads to
 * On a school page the real question is "what does this get me?". Answering it in the
 * sidebar turns a directory entry into something useful, using facts already loaded.
 */
.panel--outcomes li{padding:.7rem 0}
.panel--outcomes li a{display:block;font-weight:600;text-decoration:none;
  color:var(--fc,var(--accent-dark));line-height:1.3}
.panel--outcomes li a:hover{text-decoration:underline}
.outcome__f{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.outcome__b{font-size:.72rem;line-height:1.5;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--pill);padding:1px 8px;
  white-space:nowrap}
.outcome__b--lic{color:#8a4520;box-shadow:inset 0 0 0 1px #e0c3b2}
.outcome__b--pay{color:var(--head);font-variant-numeric:tabular-nums;font-weight:600}

/* ------------------------------------------- is an end-of-life career right for you
 * The page is a router. Each row is something a person already knows about themselves,
 * and clicking it opens the real list filtered to exactly those careers - so the answer
 * is the site's own data rather than an opinion.
 *
 * Rows, not cards: this is a set of choices to read down, and twelve cards would look
 * like a menu of products.
 */
.rfy__open{max-width:66ch;font-size:1.05rem}
.rfy__g{margin:0 0 1.75rem}
.rfy__gh{font-family:var(--font-head);font-weight:500;font-size:1.12rem;color:var(--head);
  margin:0 0 .6rem}
.rfy__rows{border-top:1px solid var(--line-strong)}
.rfy__r{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:.8rem .25rem;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background .12s,padding-left .12s}
.rfy__r:hover{background:var(--surface);padding-left:.6rem}
.rfy__q{color:var(--ink-2);font-size:1rem;line-height:1.45}
.rfy__r:hover .rfy__q{color:var(--accent-dark)}
.rfy__a{flex:none;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.rfy__t td.num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--head)}
.rfy__ex{font-size:.88rem;color:var(--muted)}
.rfy__ex a{color:var(--muted);text-decoration:underline}
.rfy__ex a:hover{color:var(--accent-dark)}
.rfy__note{font-size:.88rem;color:var(--muted);max-width:70ch;margin:1rem 0 0}

.rfy__two{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2rem;align-items:start}
.rfy__side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.4rem}
.rfy__side h3{margin:0 0 .75rem;font-family:var(--font-head);font-weight:500;font-size:1.05rem}
.rfy__list{list-style:none;margin:0;padding:0}
.rfy__list li{border-top:1px solid var(--line);padding:.55rem 0;font-size:.92rem}
.rfy__list li:first-child{border-top:0;padding-top:0}
.rfy__list a{text-decoration:none;font-weight:600}
.rfy__list a:hover{text-decoration:underline}

@media (max-width:820px){
  .rfy__two{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:640px){
  .rfy__r{flex-direction:column;gap:.2rem;align-items:flex-start}
}

/* ----------------------------------------------------------- suggest an edit
 * One control that forks on the only question that matters: is this your organization?
 * A <details> so the explanation is readable before anyone commits to a form, and so it
 * works with no JavaScript.
 */
.sedit{margin:2rem 0 0;border-top:1px solid var(--line);padding-top:1rem}
.sedit__s{cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;
  font-weight:700;color:var(--accent-dark);list-style:none;padding:.35rem 0}
.sedit__s::-webkit-details-marker{display:none}
.sedit__s:hover{text-decoration:underline}
.sedit__b{padding:.6rem 0 0}
.sedit__i{font-size:1rem;color:var(--muted);margin:0 0 .9rem;max-width:64ch}
.sedit__ok{font-size:.88rem;color:var(--accent-dark);font-weight:600;margin:0 0 .6rem}
.sedit__opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sedit__o{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.sedit__o:hover{border-color:var(--accent);box-shadow:0 3px 14px rgba(38,65,79,.09)}
.sedit__ol{font-weight:700;font-size:.95rem;color:var(--head)}
.sedit__o:hover .sedit__ol{color:var(--accent-dark)}
.sedit__od{font-size:.84rem;line-height:1.55;color:var(--muted)}
@media (max-width:640px){.sedit__opts{grid-template-columns:1fr}}

/* -------------------------------------------------------- organization profiles
 * Mirrored from the Buried in Work directory, which holds the record. The page's job is
 * to put that record next to what only this site knows - the careers it serves and its
 * events - and to make it obvious where an organization goes to correct itself.
 */
.org__claimed{font-size:.85rem;font-weight:700;color:var(--accent-dark);margin:.4rem 0 0}
.orgev{list-style:none;margin:0;padding:0}
.orgev__i{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;
  border-top:1px solid var(--line)}
.orgev__i:first-child{border-top:0}
.orgev__d{flex:none;width:4.2rem;font-size:.8rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.03em}
.orgev__t{font-size:.95rem;line-height:1.4}
.orgev__t a{font-weight:600;text-decoration:none}
.orgev__t a:hover{text-decoration:underline}
.orgev__m{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.orgev__all{margin:1rem 0 0;font-size:.88rem}
.org__u{max-width:66ch;line-height:1.65}
.org__ua{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:1.1rem 0 0}
.org__alt{font-size:.88rem;color:var(--muted);text-decoration:underline}
.org__alt:hover{color:var(--accent-dark)}

@media print{
  .spine__strip,.spine__bar,.finder,.cross,footer.site{display:none}
  body{background:#fff;font-size:11pt}
  .card,.panel,.facts,.rec{break-inside:avoid}
}

/* ---------- floor 2: 44px tap targets ---------- */
/* Measured, not guessed. Across a 30-page rendered sample at 1280px, 957 of
   1,166 controls were under 44px; the groups below are the ones responsible for
   nearly all of them.

   THREE techniques, and the distinction matters - the first attempt used
   inline-flex everywhere and it was wrong in two ways that only a rendered
   before/after caught:

     - the footer's column links were display:block and stacked one per row.
       inline-flex made them flow side by side: the footer went from 8 rows to
       4 on desktop and 15 to 6 on mobile. That is a layout change, not an
       accessibility fix. Block-level links therefore get `flex`, which keeps
       them full-width and one per row.
     - short labels in a horizontal nav shrink to fit. "FAQ" became 33x45 and
       "Roles" 42x45 - the height passed and the WIDTH started failing, so
       mobile got worse on three pages. Horizontal links therefore get
       inline-flex WITH min-width.

   Icon-only buttons get an invisible expanded hit area via ::after instead,
   because making a 22x22 glyph physically 44x44 inside an h2 would move the
   heading. The visual size is unchanged; only the touchable region grows.

   Inline links in running prose are deliberately absent: WCAG 2.5.8 exempts
   them, because they cannot be 44px tall without breaking the line. */

/* Block-level, one per row: keep them full width. */
footer.site .cols a,
.panel li a{display:flex;align-items:center;min-height:44px}

/* Horizontal navs: min-width as well, or a short label fails on width. */
.pagehead .jump a,
.spine__nav a,
.spine__switchlist a,
.panel__more,
.sedit__s{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px}

.spine__cta{min-height:44px;min-width:44px}

/* 22x22, and the smallest control on the site. Expanded rather than resized so
   the panel heading it sits in does not move. */
.panel__h .info{position:relative}
.panel__h .info::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

/* Second pass. Everything below was between 4px and 23px short; none of it
   needed a judgement call, so it is simply raised. Counts are per page from
   the rendered sample.

   Deliberately NOT included: the `a.tag.tag--line` audience pills in
   `p.event__for`, which render 111x24. There are up to 32 of them on one
   events page and giving each a 44px box would dominate the listing. They
   already clear WCAG 2.5.8 AA, which is 24x24 - the 44px floor in use here is
   the stricter AAA 2.5.5 figure. Flagged for Adam rather than decided. */

/* Role and article lists: 244x36, 8px short. */
.arc__list li a{display:flex;align-items:center;min-height:44px}

/* Event titles are links: 396x21. */
.event__title a{display:flex;align-items:center;min-height:44px}

/* Pagination and carousel controls: 35x40 and 40x40, 4px short. */
.pager__b,
.scroller__arrow{min-height:44px;min-width:44px}

/* The small ghost button: 105x34. */
.btn--sm{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px}

/* "Add an event" and "Clear filters" sit alone on their line: 86x18, 76x24. */
.pagehead__aside a,
.finder__foot .linkbtn{display:inline-flex;align-items:center;
  min-height:44px;min-width:44px}