body{display:block !important;padding-top:44px !important}@media (max-width:1439px){body{padding-top:52px !important}}@media (max-width:1023px){body{padding-top:72px !important}}@media (max-width:767px){body{padding-top:84px !important}}.header.js-header{position:fixed !important;top:0 !important;background-color:transparent !important}.header .header__logo-link,.header .js-reveal--mask,.header [class*="js-reveal--"],footer [class*="js-reveal--"],.footer [class*="js-reveal--"]{opacity:1 !important;transform:none !important;clip-path:none !important}.header__scroll-top-btn{display:none !important}.header__debrief-link,.header__socials,.header__nav{display:none !important}.header__menu{width:auto !important}.header__menu-btn .header__btn-text{display:none !important}.header__menu-btn{padding-inline:16px !important}.header__menu--mobile{display:flex !important}.header__logo-link{position:relative;display:inline-flex !important;flex-direction:column;align-items:center}.zwof-brand-tag{position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%);font-family:'ABC Normal',-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(26px,2.3vw,38px);font-weight:600;letter-spacing:-0.02em;line-height:0.9;color:#181818;text-transform:none;white-space:nowrap}.zwof-brand-tag__dot{color:#e1251b}@media (max-width:767px){.zwof-brand-tag{font-size:24px}}.header__search{position:relative}.header__search-container{position:absolute !important;top:calc(100% + 12px) !important;right:0 !important;left:auto !important;width:min(380px,80vw) !important;z-index:30 !important;display:flex !important;align-items:stretch;border-radius:10px;overflow:hidden;box-shadow:0 16px 40px rgba(24,24,24,0.22);background:#181818;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity 0.2s ease,transform 0.2s ease}.header__search.is-active .header__search-container{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.header__search-input{display:block !important;flex:1 1 auto !important;width:auto !important;height:52px !important;padding:15px 18px !important;background:#181818 !important;color:#f1ede4 !important;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;font-size:15px !important}.header__search-input::placeholder{color:rgba(241,237,228,0.5)}.zwof-search__go{flex:0 0 auto;width:54px;height:52px;display:flex;align-items:center;justify-content:center;background:#e1251b;color:#fff;border:none;cursor:pointer;transition:background 0.2s ease}.zwof-search__go:hover{background:#c81e15}.zwof-search__go svg{width:18px;height:18px;display:block}.header__search-results{display:none !important}.zwof-menu{background-color:#f1ede4 !important;color:#181818;justify-content:flex-start !important;gap:clamp(24px,5vh,56px) !important;padding:clamp(18px,2.6vw,34px) clamp(20px,5vw,80px) clamp(20px,3vh,40px) !important}.zwof-menu__bar{display:flex;align-items:center;justify-content:space-between;width:100%;flex:0 0 auto}.zwof-menu__logo{display:block;line-height:0}.zwof-menu__logo img{height:clamp(52px,4.4vw,72px);width:auto;display:block}.zwof-menu__close{margin:0 !important;align-self:auto !important;width:46px !important;height:46px !important;border:1px solid rgba(24,24,24,0.25) !important;border-radius:50%;color:#181818;transition:background-color 0.2s ease,color 0.2s ease}.zwof-menu__close:hover{background:#181818;color:#f1ede4}.zwof-menu__close svg{width:15px !important;height:15px !important}.zwof-menu__nav{flex-grow:1 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:flex-start !important;gap:clamp(2px,0.8vh,10px) !important;width:100%;max-width:1400px;margin:0 auto;counter-reset:zwofnav}.zwof-menu__link{position:relative;display:inline-flex;align-items:baseline;gap:20px;text-decoration:none;color:#181818;font-weight:500;font-size:clamp(2.2rem,6.4vw,5.5rem);line-height:1.04;letter-spacing:-0.02em;transition:color 0.2s ease,transform 0.25s ease}.zwof-menu__link::before{counter-increment:zwofnav;content:"0" counter(zwofnav);font-size:clamp(0.7rem,1vw,0.95rem);font-weight:600;letter-spacing:0.12em;color:rgba(24,24,24,0.35);transform:translateY(-0.5em)}.zwof-menu__link:hover{color:#e1251b;transform:translateX(12px)}.zwof-menu__link--cta{color:#e1251b}.zwof-menu__foot{flex:0 0 auto;width:100%;display:flex;align-items:center;gap:24px;border-top:1px solid rgba(24,24,24,0.14);padding-top:clamp(14px,2vh,22px)}.zwof-menu__foot-label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(24,24,24,0.45);flex:0 0 auto}.zwof-menu__socials{display:flex !important;flex-wrap:wrap;gap:10px 24px !important;background:transparent !important;grid-template-columns:none !important;width:auto !important}.zwof-menu__social{width:auto !important;height:auto !important;background:transparent !important;color:#181818 !important;display:inline-flex !important;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.2s ease}.zwof-menu__social:hover{color:#e1251b !important}.zwof-menu__social:hover span{opacity:1 !important}@media (max-width:767px){.zwof-menu__foot{flex-direction:column;align-items:flex-start;gap:12px}}footer.js-footer{margin-top:28px !important}@media (max-width:1583px){.layout{padding-top:132px}}@media (max-width:1440px){.layout{padding-top:100px}}@media (max-width:1023px){.layout{padding-top:96px}}@media (max-width:767px){.layout{padding-top:30px}}.zwof-menu__close{position:relative !important}.zwof-menu__close svg{display:none !important}.zwof-menu__close::before,.zwof-menu__close::after{content:"";position:absolute;top:50%;left:50%;width:17px;height:2.5px;background:currentColor;border-radius:2px}.zwof-menu__close::before{transform:translate(-50%,-50%) rotate(45deg)}.zwof-menu__close::after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width:767px){.header.js-header{position:static !important;height:auto !important;background-color:#f1ede4 !important;border-bottom:1px solid rgba(24,24,24,0.12);-webkit-clip-path:none !important;clip-path:none !important}body{padding-top:0 !important}.layout{padding-top:22px !important;padding-left:20px !important;padding-right:20px !important}.header__inner{padding:13px 20px !important;align-items:center !important}.header__logo-link{flex-direction:row !important;align-items:center !important;gap:0 !important;padding:0 !important}.logo__container{width:130px !important;aspect-ratio:4.0 !important}.logo__container .logo__img{object-fit:cover !important;object-position:center bottom !important}.zwof-brand-tag{position:static !important;transform:none !important;left:auto !important;top:auto !important;font-size:21px !important;line-height:1 !important;margin-left:12px !important;padding-left:12px !important;border-left:1px solid rgba(24,24,24,0.28) !important}}@media (max-width:960px){.rail>.blk.rt{order:3 !important}.rail>.blk:has(.who){order:4 !important}.rail>.blk:has(.tags){order:6 !important}.rail>.blk:has(.sharewrap){order:7 !important}.rail>.blk:has(.watchbtn){order:8 !important}}@media (max-width:767px){.reading .prose,.reading figcaption,.aside{padding-left:0 !important;padding-right:0 !important}}@media (max-width:767px){.entoggle{margin-left:0 !important}}.sharewrap a,.sharewrap button{color:#16181c !important;background:#e7ded0 !important;border:1px solid #cfc6b3 !important;border-radius:4px !important;padding:6px 11px !important;font-size:12.5px !important;font-weight:500 !important;text-decoration:none !important;cursor:pointer !important;transition:.15s !important}.sharewrap a:hover,.sharewrap button:hover{border-color:#e1251b !important;color:#e1251b !important}.entoggle:hover{background:rgba(0,0,0,0.04) !important}.zwof-preview-cb{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.zwof-cb-label{cursor:pointer;pointer-events:auto}.zwof-cb-label *{pointer-events:none}#zwof-menu-cb:checked ~ .header__menu--mobile{transform:translateY(0)!important}.header__search-container{display:none!important}.zwof-search-scrim{position:fixed;inset:0;z-index:99998;background:transparent;opacity:0;visibility:hidden;pointer-events:none;margin:0}#zwof-search-cb:checked ~ .zwof-search-scrim{opacity:1;visibility:visible;pointer-events:auto;cursor:default}.zwof-search-bar{position:fixed;top:66px;right:26px;z-index:100000;display:flex;gap:7px;align-items:center;background:#181818;padding:9px;border-radius:12px;box-shadow:0 12px 44px rgba(0,0,0,.34);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .22s,visibility .22s;margin:0}#zwof-search-cb:checked ~ .zwof-search-bar{opacity:1;visibility:visible;transform:translateY(0)}.zwof-search-input{width:min(300px,66vw);background:#262626;border:1px solid #3b3b3b;color:#f1ede4;padding:12px 15px;border-radius:7px;font-size:15px;outline:none;font-family:inherit}.zwof-search-input::placeholder{color:#8c8c8c}.zwof-search-go{flex-shrink:0;width:46px;height:46px;background:#e1251b;border:0;color:#fff;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center}.zwof-search-go svg{width:20px;height:20px}.zwof-search-x{flex-shrink:0;width:40px;height:46px;color:#9a9a9a;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center}.zwof-search-x:hover{color:#fff}.zwof-search-x svg{width:18px;height:18px}@media (max-width:767px){.zwof-search-bar{left:20px;right:20px}.zwof-search-input{width:100%}}
/* === ZWOF menu -> side drawer (overrides full-screen overlay) === */
.header__menu--mobile.zwof-menu{inset:auto!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(87vw,440px)!important;height:100%!important;transform:translateX(100%)!important;transition:transform .34s cubic-bezier(.4,0,.2,1)!important;box-shadow:-16px 0 46px rgba(0,0,0,.22);gap:clamp(20px,3.2vh,34px)!important;padding:clamp(20px,3vh,30px) clamp(22px,4vw,34px)!important;overflow-y:auto;z-index:100000!important}
#zwof-menu-cb:checked ~ .header__menu--mobile.zwof-menu{transform:translateX(0)!important}
.zwof-menu__link{font-size:clamp(1.45rem,4.6vw,1.95rem)!important}
.zwof-menu__link:hover{transform:translateX(8px)!important}
.zwof-menu-scrim{position:fixed;inset:0;z-index:99999;background:rgba(16,16,16,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;margin:0;border:0;padding:0;cursor:pointer}
#zwof-menu-cb:checked ~ .zwof-menu-scrim{opacity:1;visibility:visible;pointer-events:auto}

/* ── Debrief in the footer ────────────────────────────────────────────────
   Sits beside the organiser on every page: who runs the events, then what
   this publication is.

   The organiser's width is set four times across the site's breakpoints in
   grid-column arithmetic. Rather than restate all four with a column taken
   out, both blocks share the row on flex-basis and `width:auto` retires the
   arithmetic in one line — so a change to the grid cannot leave the pair
   mismatched. The stacked breakpoint is restored explicitly, because in a
   column the basis would size height and the width would collapse to the
   text. */
/* Top-aligned, so the two labels sit on one line. The site bottom-aligns this
   row, which reads fine with one block beside the call to action but puts the
   second block's heading a line and a half below the first's. */
.footer__top{flex-wrap:wrap;align-items:flex-start}
.footer__organiser,.footer__debrief{width:auto;flex:1 1 clamp(240px,24vw,430px)}
.footer__debrief{display:flex;flex-direction:column;padding-bottom:6px}
.footer__debrief .footer__label{margin-bottom:8px}
.footer__debrief .footer__org-text + .footer__org-text{margin-top:11px}
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .footer__top .footer__organiser,.footer__top .footer__debrief{width:100%;flex:0 0 auto}
}

/* ── Article, on a phone: one left edge ───────────────────────────────────

   Three elements sat on three different edges — figures at 4px, everything at
   20px, the standfirst at 36px.

   All three come from one assumption that is no longer true. Below 640px
   article.css pushes the standfirst in by 16px and pulls figures out by 16px,
   which lines both up with the text only while the reading column carries 16px
   of its own padding. That padding was removed when the column was widened for
   small screens; the two counterweights were left behind, and have been
   pulling in opposite directions ever since.

   So they go together, rather than the standfirst alone: removing the inset
   without the outset would just move the ragged edge onto the images. Every
   element in the column now starts where the headline does, which is what the
   article already does at every larger width.

   !important throughout because the rules being corrected use it. */
@media screen and (max-width:767px){
  .reading .standfirst,.reading .transnote{padding-left:0 !important;padding-right:0 !important}
  .reading .prose>.fig{margin-left:0 !important;margin-right:0 !important}
  /* Matched selector-for-selector: an earlier attempt at this used
     `.reading figcaption`, which loses to `.reading .fig figcaption` on
     specificity no matter how many !importants it carries. */
  .reading .fig figcaption{padding-left:0 !important;padding-right:0 !important}
}

/* [2] The session video, immediately after the recap.

   The rail collapses into one column on a phone and its blocks are ordered
   around the article body. Watch was ordered last, below the topics and the
   share buttons, where nobody scrolls to.

   It does not move above the article either: the link opens YouTube, so
   offering it first is offering an exit before the reader has read anything.
   Straight after the last paragraph is the one place it is both findable and
   harmless — the reader has finished, and watching the talk is the obvious
   next thing rather than an interruption.

   Renumbered rather than patched so every block's place is stated in one
   list. .reading is included because its order is set elsewhere and the
   sequence is meaningless without it. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:960px){
  .rail>.blk.rt{order:1 !important}
  .rail>.blk:has(.who){order:2 !important}
  .layout>.reading{order:3 !important}
  .rail>.blk:has(.watchbtn){order:4 !important}
  .rail>.blk:has(.tags){order:5 !important}
  .rail>.blk:has(.sharewrap){order:6 !important}
}

/* ── The closed menu's shadow ─────────────────────────────────────────────
   The off-canvas menu is parked off the right edge, not unmounted, and its
   shadow is thrown leftward: -16px offset against a 46px blur reaches about
   30px back onto the page. So a menu nobody had opened painted a grey gradient
   down the right edge of every page on every phone.

   Cast it only while the menu is actually open. Removing the shadow outright
   would fix the page and flatten the panel against it when it slides out —
   which is the one moment the shadow is doing its job. */
.header__menu--mobile.zwof-menu{box-shadow:none}
#zwof-menu-cb:checked ~ .header__menu--mobile.zwof-menu{box-shadow:-16px 0 46px rgba(0,0,0,.22)}

/* ── Debrief in the menu ──────────────────────────────────────────────────
   The masthead hangs its wordmark off the logo absolutely, centred beneath it.
   That works there because the logo is the only thing in its box; here the
   mark sits in a flex row with the close button, so it is set back in flow
   and left-aligned under the logo instead. */
.zwof-menu__logo{display:flex !important;flex-direction:row;align-items:center}
.zwof-menu__logo .zwof-brand-tag{position:static !important;transform:none !important;
  left:auto !important;top:auto !important;font-size:clamp(20px,3.6vw,26px) !important;
  line-height:1 !important;white-space:nowrap;
  /* Set beside the logo and divided from it, the way the phone masthead does
     it. Stated here rather than inherited: that masthead rule stops at 767px
     and the menu is the only navigation at every width above it too. */
  margin-left:13px !important;padding-left:13px !important;
  border-left:1px solid rgba(24,24,24,.28) !important}

/* ── The synthesis line ───────────────────────────────────────────────────
   It lives inside the article column now, at the end of the article, rather
   than as a band after the whole page. So it loses the full-window rule and
   the band background and becomes a rule across the column it belongs to.

   Not a row of the grid, which is where it was first put: the rail and the
   Similar-articles column are sticky, and adding a second row extends how far
   a sticky item travels. Both scrolled down across the band and its opaque
   background painted over them, cutting off the Watch button at the foot of
   the rail. */
.reading>.colophon{background:none;border-top:1px solid var(--line);margin-top:36px}
.reading>.colophon .in{max-width:none;margin:0;padding:18px 0 0}

/* ── The conference, in the menu ──────────────────────────────────────────
   The one link here that leaves the site, so it is a block rather than a
   seventh line in a numbered list of pages that all stay. Red carries it: the
   nav above is plain text on cream, so a filled panel reads as a different
   kind of thing before anyone has read the words. */
.zwof-menu__parent{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;
  margin:clamp(14px,2.4vh,26px) 0 0;padding:14px 16px;border-radius:12px;
  background:#e1251b;color:#fff;text-decoration:none;
  transition:background .2s ease,transform .2s ease}
.zwof-menu__parent:hover{background:#c81e15;transform:translateX(3px)}
.zwof-menu__parent-label{font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.zwof-menu__parent-name{display:flex;align-items:center;gap:9px;font-size:clamp(19px,3.6vw,23px);
  font-weight:500;letter-spacing:-.01em;line-height:1.15}
.zwof-menu__parent-arrow{font-size:.86em;opacity:.85}
.zwof-menu__parent-note{font-size:12.5px;color:rgba(255,255,255,.8);line-height:1.35}

/* ── Follow, in the footer bar ────────────────────────────────────────────
   Sits between the Zak mark and the copyright: the bar is already a
   space-between row, so a third block takes the middle without disturbing
   either end. Set as small caps rather than icons, matching the menu — the
   footer is dark and six brand glyphs there would pull harder than anything
   above them deserves to be pulled against. */
.footer__follow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0}
.footer__follow-label{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#ffffff73}
.footer__follow-list{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer__follow-item{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#ffffffcc;text-decoration:none;transition:color .2s ease}
.footer__follow-item:hover{color:#e1251b}
/* The bar stacks below this width, and a label sitting above its own links
   reads better there than one pinned to the left of a wrapped block. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .footer__follow{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── Watch this session ───────────────────────────────────────────────────
   The badge holds the YouTube mark now, so it is the mark's own shape rather
   than a red square with a glyph in it: no background, no radius, and the
   YouTube proportions instead of 30x30. */
.watchbtn .pl{width:32px;height:23px;background:none !important;border-radius:0 !important}
.watchbtn .pl svg{width:32px !important;height:23px !important;display:block}

/* ── Park the closed menu properly off-screen ─────────────────────────────
   translateX(100%) moves the panel exactly its own width, which lands its
   left edge on the DOCUMENT's right edge — not the viewport's. Those differ by
   the width of the scrollbar, so a sliver of the panel stayed on screen: a
   full-height strip of cream at z-index 100000 down the right of every page,
   which is what read as a shadow there once its own shadow was gone.

   Pushed clear by more than any scrollbar. The open state sets its own
   transform, so it is unaffected. */
.header__menu--mobile.zwof-menu{transform:translateX(calc(100% + 40px)) !important}
#zwof-menu-cb:checked ~ .header__menu--mobile.zwof-menu{transform:translateX(0) !important}

/* ── Search results are a list, not a carousel ────────────────────────────
   The search page reuses .regsec for its section styling, and home.css turns
   `.regsec .cards.three` into a horizontal scroller below 900px — the
   homepage's per-region carousel. The homepage builds arrows for that; the
   search page does not include the script, so on a phone the results became a
   sideways scroll with no arrows and no hint: 32 results, two of them visible,
   the second cut through the middle of a speaker's name.

   The modifier says what these sections actually are, and puts the responsive
   grid back. */
.regsec--list .cards.three{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(268px,1fr)) !important;
  grid-auto-flow:row !important;overflow:visible !important;gap:24px !important;
  scroll-snap-type:none !important;padding:0 !important}
.regsec--list .cards.three>.card{flex:none !important;width:auto !important;min-width:0 !important;
  scroll-snap-align:none !important}

/* home.css carries no .tags rules at all, so the topic results rendered as one
   run-on line — every name jammed against its own count. The article page's
   chips, restated for the one other place that shows topics. */
.regsec--list .tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.regsec--list .tags a{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;
  padding:5px 11px;border:1px solid var(--line);border-radius:4px;color:var(--ink);
  text-decoration:none;transition:.15s}
.regsec--list .tags a:hover{border-color:var(--accent);color:var(--accent)}
.regsec--list .tags a .text-muted{font-size:11.5px;color:var(--muted)}

/* ── Card tag rows stay on one line ───────────────────────────────────────
   Reverted. I had made these wrap, on the reasoning that a clipped row hides
   topics nobody can reach — the row does not scroll, so whatever the fade
   covers is simply gone. That is true, and it is not the design: the reference
   site clips to one line, and the brief names it as the source of truth. A
   card's tags say roughly what the piece is about; the full list is on the
   article page, where it is not decoration.

   Wrapping also cost more than it looked. Cards with four or five topics grew
   a second and third row, pushing the headline down, so titles in the same
   grid row no longer started at the same height — the thing a reader actually
   scans. home.css sets the nowrap, the clip and the fade; nothing here
   overrides them now. */

/* ── Search on a phone ────────────────────────────────────────────────────
   The bar was a small floating pill at top:66px — which is where the header
   is on a desktop. On a phone the header is static and scrolls away, so
   opening search half way down an article left a black pill hovering over the
   middle of a paragraph, anchored to nothing.

   It becomes a sheet across the top of the viewport instead, with a scrim
   behind it: the scrim was transparent everywhere, which is fine on a desktop
   where the pill is small and the page still reads around it, but here it is
   what separates the search from the text underneath and shows there is
   something to tap to dismiss. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .zwof-search-bar{top:0;left:0;right:0;border-radius:0;padding:12px 14px;gap:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.34)}
  .zwof-search-scrim{background:rgba(20,20,20,.5)}
  /* 16px exactly: below that, iOS zooms the whole page when the field takes
     focus, and the reader has to pinch back out to see what they typed. */
  .zwof-search-input{width:100%;font-size:16px;padding:13px 15px}
  .zwof-search-go,.zwof-search-x{height:48px}
  .zwof-search-go{width:48px}
}

/* ── The homepage search results panel, on a phone ────────────────────────
   It is sized `min(460px, 92vw)` and anchored `right:0` to the search form.
   Those two measure different things: 92vw is the viewport, the anchor is a
   280px form inset 24px from the left edge. Right-align something as wide as
   the screen to a box that is not, and the far end has to go somewhere — it
   went 42px off the left of the screen, taking the first characters of every
   name and heading with it.

   Pinned to both edges of the form instead, with width:auto, so the panel is
   exactly as wide as the field that opened it and cannot overhang whatever
   the viewport happens to be. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .searchpanel{left:0;right:0;width:auto}
}

/* The results list scrolls, and on platforms with classic scrollbars — Windows,
   and any browser set to always show them — the default bar takes about ten of
   the panel's two hundred and seventy-eight pixels and paints itself in the
   system accent, which here reads as a red stripe down the results. Thin, and
   in the palette. */
.searchpanel{scrollbar-width:thin;scrollbar-color:rgba(24,24,24,.28) transparent}
.searchpanel::-webkit-scrollbar{width:8px}
.searchpanel::-webkit-scrollbar-thumb{background:rgba(24,24,24,.24);border-radius:99px}
.searchpanel::-webkit-scrollbar-track{background:transparent}

/* ── Portraits in the contributor avatars ─────────────────────────────────
   .pav and .cav were built to hold initials and already clip their contents,
   so a photograph only needs to fill the box. object-fit:cover crops to the
   square rather than squashing a face to fit it, which is the one thing worse
   than showing initials. */
.pav img,.cav img,.who .av img{width:100%;height:100%;object-fit:cover;display:block}