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:#ed2a28}@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:#ed2a28;color:#fff;border:none;cursor:pointer;transition:background 0.2s ease}.zwof-search__go:hover{background:#e31513}.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:#ed2a28;transform:translateX(12px)}.zwof-menu__link--cta{color:#ed2a28}.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:#ed2a28 !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:#ed2a28 !important;color:#ed2a28 !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:#ed2a28;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:#ed2a28;color:#fff;text-decoration:none;
  transition:background .2s ease,transform .2s ease}
.zwof-menu__parent:hover{background:#e31513;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:#ed2a28}
/* 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}

/* --- The fixed header, the lockup, and where the article starts --------------
 * The header is position:fixed with a transparent background, and the wordmark
 * (.zwof-brand-tag) is absolutely positioned to hang BELOW the header box, so
 * the visible chrome ends lower than --header-height reports. Everything here
 * follows from that, and all of it is measured on the deployed page rather than
 * derived — the lockup is not a function of --header-height and is not even
 * monotonic in width.
 *
 * The article's left rail is position:sticky, so it needs a top offset that
 * clears the lockup, not just the header box. Without it the wordmark sat on
 * the headline the moment the page scrolled.
 *
 * SMALLER SCREENS SHRINK THE LOCKUP. At full size it is 132x109 and the rail
 * runs underneath it, which forced the article down to y 151 and left a gap
 * nobody wanted. Shrinking the crown to 56px wide brings the lockup to about
 * 80x65, which clears the rail's x 106 from 1440 up — so from there the article
 * starts level with the menu at y 54, the same as it does above 1700. Below
 * 1440 the rail starts at x 30 and no lockup narrow enough to clear it would be
 * legible, so there the article clears it vertically instead, at y 95 rather
 * than the 152 it was.
 *
 * Trimming only the "Debrief." wordmark would not have done this: it is 27px of
 * the 109, and the crown above it is what the rail actually collides with.
 */

/* One value per band. 54px from 1440 up, where no column overlaps the lockup:
   above 1700 because the layout's margins are wide, and from 1440 to 1699
   because the lockup is shrunk below. 95px below that, clearing the shrunken
   lockup's 81px bottom. */
:root{--zwof-hdr-clear:54px}
@media (max-width:1439px){:root{--zwof-hdr-clear:95px}}
/* Below 768 the header is static (set above), so the columns need no offset. */
@media (max-width:767px){:root{--zwof-hdr-clear:22px}}

.rail,.aside{top:var(--zwof-hdr-clear)}

/* The smaller lockup. Not applied below 768, where the mobile block above
   already lays it out as a row, nor above 1700, where it sits in the page
   margin clear of every column and can stay full size. */
@media (min-width:768px) and (max-width:1699px){
  .logo__container{width:56px !important}
  .header__logo-link{padding:8px 12px !important}
  .zwof-brand-tag{font-size:20px !important}
}

/* Where the article starts. 10px on top of the body's 44px puts the eyebrow at
   y 54, level with the menu; 43px on top of the body's 52px puts it at y 95,
   below the shrunken lockup. */
@media (min-width:1440px){.layout{padding-top:10px}}
@media (min-width:768px) and (max-width:1439px){.layout{padding-top:43px}}

/* The rail is level with the lockup from 1440 to 1699, and at 1440 it starts at
   x 106 where the lockup ends at x 100 — 6px, which reads as the wordmark
   touching the headline. The indent buys a 30px gutter, at the cost of 24px of
   headline width. The gutter without it is (vw / 2) - 710, so it reaches 30px
   on its own at 1480 and the indent is only needed below that. */
@media (min-width:1440px) and (max-width:1479px){.rail{padding-left:24px}}

/* --- Occlude what scrolls under the logo -------------------------------------
 * The rail scrolls up past the header once it reaches the end of its travel
 * inside the grid row. That is correct sticky behaviour and happens on every
 * article, with one contributor or five. What was wrong is that a transparent
 * header let it stay visible THROUGH the wordmark instead of behind it.
 *
 * #efe8da is the page's own ground, so these occlude without reading as a
 * shape. The menu already carries its own background.
 *
 * From 1440 up the article starts level with the menu, so only the logo and the
 * wordmark are painted — a band across the top would cover the article itself.
 * At those widths the columns sit between logo and menu, so nothing else passes
 * behind either one.
 *
 * Below 1440 no part of the article belongs in the band, so it is painted the
 * full width and content disappears behind it the way a fixed header should
 * hide it. It is a pseudo-element rather than the header's own background
 * because it has to reach past the header box to the bottom of the wordmark.
 * Being the header's first child in paint order, the logo and menu still draw
 * over it, and the header's z-index of 10 puts it above the page. 88px clears
 * the shrunken lockup's 81 without reaching the article's 95.
 */
.header__logo-link{background-color:#efe8da}
.zwof-brand-tag{background-color:#efe8da;padding:0 8px}

@media (min-width:768px) and (max-width:1439px){
  .header.js-header::before{
    content:"";position:absolute;left:0;right:0;top:0;
    height:88px;background-color:#efe8da;
  }
}

/* --- Phone: the stacked column rule, and the furniture above the first line --
 * .aside carries border-left as the rule between the two columns (article.css
 * 233). Below 768 the grid collapses to one column, so that rule stops
 * separating anything and becomes a vertical line down the left of the
 * newsletter box and the similar-articles list, running on into the space
 * above the footer. Off at phone width; the aside keeps its border-top, which
 * still reads as a divider when the blocks are stacked.
 *
 * The rest is spacing. With .rail at display:contents every one of its blocks
 * is a grid item, so the layout's 22px row-gap was paid five times over before
 * a reader reached the standfirst: eyebrow, reading time, headline, contributor,
 * article. Between that, the 16px block padding and the layout's own top
 * padding, the first sentence started 375px down a 812px screen. These bring it
 * to roughly 290 without touching a type size.
 */
@media (max-width:767px){
  .aside{border-left:0 !important}
  .layout{padding-top:12px !important;row-gap:14px !important}
  .r-eyebrow{margin-bottom:6px !important}
  .rail>.blk{padding-top:9px !important;padding-bottom:9px !important}
  .rail>.blk.rt{margin-top:0 !important;padding-top:7px !important;padding-bottom:7px !important}
  /* 44px of ground under the last similar-article row, then another 28 before
     the footer, read as a hole on a phone. */
  .layout{padding-bottom:24px !important}
}

/* The magnifier was missing on phones. app.css hides `.header__search-btn`
 * below 768px because the template it came from carried a second search
 * button inside the mobile menu (`.header__search-btn--mobile`); this site's
 * menu is our own and never had one, so search simply vanished on mobile.
 * Put the header button back instead of adding a second entry point: the
 * overlay it opens is already full-width on a phone. `.header__menu-btn` is
 * width:100% in that same breakpoint, which would push the magnifier out of
 * the bar, so it goes back to auto. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .header__search-btn{display:flex !important}
  .header__menu-btn{width:auto !important}
  .header__search-btn svg{width:15px;height:15px}
}

/* Search left, menu right, on a phone. Both live in `.header__menu`, whose
 * source order puts the burger first; the user wants the magnifier reached
 * first by the thumb travelling in from the left. Ordering the two flex
 * children is enough, and leaves the desktop cluster untouched. */
@media (max-width:900px) and (orientation:landscape), screen and (max-width:767px){
  .header__menu>.header__search{order:1}
  .header__menu>.header__nav-wrapper{order:2}
}