/*
Theme Name: TGLF Loom
Theme URI: https://www.learning.foundation/
Author: The Geneva Learning Foundation
Author URI: https://www.learning.foundation/
Description: The Loom, the design system of The Geneva Learning Foundation. Strip-woven bands built from the pixel module of the TGLF monogram, the brand blue-grey and red, a live network counter, and templates for courses, magazine articles, insights reports, Scholars, and partners. Multilingual-ready, RTL-ready via logical properties, and built light for low-bandwidth audiences.
Version: 1.12.0
Requires at least: 6.5
Requires Plugins: polylang
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tglf-loom
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready, rtl-language-support, accessibility-ready
*/

/* ============================================================
   TOKENS. Blue-grey = expertise, red = engagement (brand charte).
   All directional properties are logical, so this one stylesheet
   serves LTR and RTL alike: WordPress sets dir="rtl" and nothing
   else is needed.
   ============================================================ */
:root{
  --cloth:#FDFCF8;
  --ink:#242F3A;
  --ink-soft:#4E5D6A;
  --ink-faint:#66727E;
  --blue:#6A8193;
  --blue-text:#587085;
  --blue-2:#A4B3BB;
  --blue-3:#E3EAED;
  --blue-4:#F1F5F6;
  --red:#D65048;
  --red-cta:#BE3E36;
  --red-deep:#A33630;
  --red-tint:#F5DCDA;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1140px;
  --narrow:760px;
  --line:rgba(36,47,58,.16);
  --rule:1px solid var(--line);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ base ============ */
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip, never hidden: hidden on html or body turns the nearest
   ancestor into a scroll container and silently kills position:sticky, used
   by the header and the post sidebar. clip contains the overflow without
   creating that scroll container. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:150px;overflow-x:clip}
body{background:var(--cloth);color:var(--ink);font-family:var(--sans);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;word-wrap:break-word}
::selection{background:var(--red-tint);color:var(--ink)}
a{color:var(--red-cta)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--red-cta);outline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:26px;padding-right:26px;padding-inline:26px}
.wrap-narrow{max-width:var(--narrow);margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:26px;padding-right:26px;padding-inline:26px}
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;width:1px;white-space:nowrap}
.skip-link{position:absolute;left:8px;inset-inline-start:8px;top:-48px;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;text-decoration:none}
.skip-link:focus{top:8px}

/* ============ the weave (signature) ============ */
.weave{
  height:16px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(253,252,248,.35) 5px 6px, transparent 6px 11px, rgba(36,47,58,.16) 11px 12px),
    repeating-linear-gradient(90deg,
      var(--red) 0 26px, var(--ink) 26px 34px, var(--blue) 34px 60px, var(--blue-2) 60px 68px,
      var(--red) 68px 78px, var(--cloth) 78px 84px, var(--blue) 84px 118px, var(--ink) 118px 126px);
}
.weave.calm{
  height:12px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(253,252,248,.4) 4px 5px),
    repeating-linear-gradient(90deg,
      var(--blue) 0 34px, var(--blue-2) 34px 42px, var(--blue-3) 42px 52px,
      var(--red) 52px 58px, var(--blue-2) 58px 92px, var(--cloth) 92px 98px);
}
.weave.fine{
  height:8px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--red) 0 10px, var(--cloth) 10px 14px, var(--blue) 14px 24px, var(--cloth) 24px 28px,
      var(--ink) 28px 34px, var(--cloth) 34px 38px);
}

/* ============ header ============ */
.site-header{position:sticky;top:0;z-index:80;background:var(--cloth);border-bottom:var(--rule)}
/* WordPress's own #wpadminbar is fixed at the true viewport top when logged
   in, at its own core-defined heights (32px desktop, 46px at its 782px
   breakpoint); a sticky header pinned to top:0 sits behind it unless offset
   by that same height, only relevant to logged-in editors, never visitors. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.bar{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;padding-block:8px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo .hlogo,.logo img{height:42px;width:auto;display:block}
.logo .compact{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.logo .compact svg{width:30px;height:26px}
.bar .grow{flex:1}
.btn{
  display:inline-block;background:var(--red-cta);color:#fff;text-decoration:none;font-weight:700;
  font-size:15px;padding:13px 24px;border-radius:2px;border:1px solid var(--red-deep);
  box-shadow:0 2px 0 var(--red-deep);cursor:pointer;font-family:var(--sans);
}
.btn:hover{background:var(--red-deep)}
.btn:active{box-shadow:none;transform:translateY(2px)}
.site-header .btn{padding:9px 18px;font-size:13.5px}

/* primary nav + mobile drawer */
.nav-primary ul{list-style:none;display:flex;gap:4px}
.nav-primary a{display:block;text-decoration:none;color:var(--ink-soft);font-size:14px;font-weight:600;padding:9px 12px}
.nav-primary a:hover{color:var(--ink)}
.nav-primary .current-menu-item > a,.nav-primary .current_page_item > a{color:var(--ink);font-weight:700;border-bottom:3px solid var(--red)}
.nav-primary li{position:relative}
.nav-primary .sub-menu{
  display:none;position:absolute;left:0;inset-inline-start:0;top:100%;min-width:220px;background:#fff;
  border:var(--rule);box-shadow:0 4px 14px rgba(36,47,58,.14);padding:6px;flex-direction:column;z-index:90;
}
.nav-primary li:hover > .sub-menu,.nav-primary li:focus-within > .sub-menu{display:flex}
/* hover bridge so the submenu does not vanish between parent and panel */
.nav-primary .sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;inset-inline:0;height:10px}
.nav-primary .sub-menu a{padding:8px 12px}
.nav-toggle{display:none;background:none;border:var(--rule);padding:8px 10px;cursor:pointer}
.nav-toggle .ic{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.nav-toggle .ic::before,.nav-toggle .ic::after{content:"";position:absolute;left:0;inset-inline-start:0;width:20px;height:2px;background:var(--ink);transition:transform .25s var(--ease)}
.nav-toggle .ic::before{top:-6px}
.nav-toggle .ic::after{top:6px}
body.drawer-open .nav-toggle .ic{background:transparent}
body.drawer-open .nav-toggle .ic::before{transform:translateY(6px) rotate(45deg)}
body.drawer-open .nav-toggle .ic::after{transform:translateY(-6px) rotate(-45deg)}
.drawer-backdrop{display:none}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-primary{
    position:fixed;top:0;right:0;inset-inline-end:0;height:100vh;width:min(320px,84vw);background:var(--cloth);
    border-left:var(--rule);border-inline-start:var(--rule);padding:80px 24px 24px;transform:translateX(100%);
    transition:transform .3s var(--ease);z-index:120;overflow-y:auto;
  }
  [dir="rtl"] .nav-primary{transform:translateX(-100%)}
  body.drawer-open .nav-primary{transform:none}
  .nav-primary ul{flex-direction:column;gap:0}
  .nav-primary a{padding:13px 6px;border-bottom:1px solid rgba(36,47,58,.1);font-size:16px}
  .nav-primary .sub-menu{display:flex;position:static;border:none;box-shadow:none;padding-left:14px;padding-inline-start:14px;background:transparent}
  .drawer-backdrop{position:fixed;inset:0;background:rgba(36,47,58,.4);z-index:110;border:none;cursor:pointer}
  body.drawer-open .drawer-backdrop{display:block}
  body.drawer-open{overflow:hidden}
  .logo .hlogo,.logo img{height:30px}
}

/* language switcher */
.langmenu{position:relative}
.langmenu summary{
  list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink);
  border:var(--rule);padding:7px 12px;border-radius:2px;display:flex;gap:8px;align-items:center;
}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary::after{content:"\25BE";font-size:10px;color:var(--ink-soft)}
.langmenu[open] summary{background:var(--blue-4)}
.langmenu .panel{
  position:absolute;right:0;inset-inline-end:0;top:calc(100% + 6px);min-width:230px;background:#fff;
  border:var(--rule);box-shadow:0 4px 14px rgba(36,47,58,.14);padding:8px;z-index:130;
}
.langmenu .panel ul{list-style:none}
.langmenu .panel a{display:block;text-decoration:none;color:var(--ink);padding:8px 10px;font-size:14px}
.langmenu .panel a:hover{background:var(--blue-4)}
.langmenu .panel a[aria-current]{font-weight:700;color:var(--red-cta)}
.langmenu .panel hr{border:none;border-top:var(--rule);margin:6px 0}
.langmenu .panel .auto{font-size:12.5px;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:8px 10px;display:block;width:100%;text-align:start;font-family:var(--sans)}
.langmenu .panel .auto:hover{background:var(--blue-4);color:var(--ink)}
.langmenu .panel .gnote{font-size:11px;color:var(--ink-faint);padding:4px 10px 6px;line-height:1.5}
#progress{height:3px;background:var(--red);width:0}

/* front-page chapter navigation */
.chapters{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-top:var(--rule)}
.chapters::-webkit-scrollbar{display:none}
.chapters a{flex:none;text-decoration:none;color:var(--ink-soft);font-size:13px;padding:9px 12px;border-bottom:3px solid transparent;white-space:nowrap}
.chapters a b{color:var(--blue-text);font-weight:700;font-family:var(--serif)}
.chapters a .lbl{margin-left:6px;margin-inline-start:6px}
.chapters a:hover{color:var(--ink)}
.chapters a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--red)}
@media(max-width:760px){
  .chapters{justify-content:space-between}
  .chapters a{padding:9px 8px}
  .chapters a .lbl{display:none}
  .chapters a.on .lbl{display:inline}
}

/* ============ shared section chrome ============ */
.section{padding-top:86px;padding-bottom:86px;padding-block:86px}
.chapter{display:flex;align-items:center;gap:12px;margin-bottom:18px;margin-block-end:18px;color:var(--blue-text);font-size:14px;font-weight:700}
.chapter svg{width:14px;height:14px;flex:none}
h2.head{font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.1;max-width:19em}
h2.head em,.hero h1 em{font-style:italic;color:var(--red)}
.intro{margin-top:18px;margin-block-start:18px;max-width:37em;color:var(--ink-soft);font-size:1.06rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;margin-top:44px;margin-block-start:44px}
.align-end{align-self:end}
.fine{font-size:.92rem;color:var(--ink-faint);margin-top:20px;margin-block-start:20px;max-width:40em}
.arrow{width:13px;height:13px;flex:none}
[dir="rtl"] .arrow{transform:scaleX(-1)}

/* ============ hero + counter ============ */
.hero{position:relative;overflow:hidden;padding-top:64px;padding-block-start:64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6.6vw,5rem);line-height:1.02}
.hero .lede{font-size:clamp(1.05rem,1.8vw,1.28rem);color:var(--ink-soft);max-width:30em;margin-top:26px;margin-block-start:26px}
.hero .act{margin-top:34px;margin-block-start:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.microline{font-size:13.5px;color:var(--ink-soft)}
.loomwrap{position:relative;justify-self:end;width:100%;max-width:430px}
.watermark{position:absolute;right:-140px;inset-inline-end:-140px;top:50%;transform:translateY(-52%);width:420px;height:368px;color:var(--blue-3);z-index:0}
.loom{position:relative;z-index:1;background:#fff;border:1px solid rgba(36,47,58,.14);box-shadow:0 3px 10px rgba(36,47,58,.09)}
.loom .weave{height:10px}
.loom .body{padding:26px 28px 24px}
.count{font-family:var(--mono);font-weight:700;font-size:clamp(2.5rem,5vw,3.3rem);line-height:1;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.count small{font-size:.42em;color:var(--red-cta);letter-spacing:.06em;vertical-align:.6em;font-weight:700}
.loom .who{margin-top:10px;margin-block-start:10px;color:var(--ink-soft);font-size:15px;line-height:1.4}
.loom .pulse{margin-top:14px;margin-block-start:14px;padding-top:14px;padding-block-start:14px;border-top:var(--rule);font-size:14.5px;line-height:1.4}
.loom .pulse b{color:var(--red-cta)}
.loom .note{margin-top:10px;margin-block-start:10px;font-size:11.5px;color:var(--ink-faint);line-height:1.4}
.hero .weave{margin-top:56px;margin-block-start:56px}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .loomwrap{justify-self:start}
  .watermark{right:-190px;inset-inline-end:-190px}
  .hero{padding-top:48px;padding-block-start:48px}
}

/* ============ doors ============ */
.doors{background:var(--blue-4);border-top:var(--rule);border-bottom:var(--rule);padding-top:54px;padding-bottom:54px;padding-block:54px}
.doors h2{font-size:1.5rem;font-family:var(--sans);font-weight:700;letter-spacing:0}
.doorgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-top:28px;margin-block-start:28px}
.door{background:#fff;border:1px solid rgba(36,47,58,.14);padding:24px 26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 6px rgba(36,47,58,.06)}
.door:hover{background:#FBF7F3}
.door b{font-family:var(--serif);font-size:1.18rem;line-height:1.3}
.door span{color:var(--ink-soft);font-size:.94rem;flex:1}
.door .go{color:var(--red-cta);font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:7px}

/* ============ verbs, keep list, forme box, route, ways, nine (front page) ============ */
.verbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));border:var(--rule);border-right:none;border-inline-end:none;margin-top:46px;margin-block-start:46px}
.verb{border-right:var(--rule);border-inline-end:var(--rule);padding:26px 24px 28px;position:relative}
.verb h3{font-size:1.7rem;line-height:1}
.verb h3 span{display:block;font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--red-cta);margin-bottom:10px;margin-block-end:10px}
.verb p{margin-top:12px;margin-block-start:12px;color:var(--ink-soft);font-size:.96rem}
.verb::before{content:"";position:absolute;top:0;left:0;right:0;inset-inline:0;height:5px;background:var(--blue-2)}
.verb:nth-child(2)::before{background:var(--blue)}
.verb:nth-child(3)::before{background:var(--ink)}
.verb:nth-child(4)::before{background:var(--red)}
.keep{list-style:none;margin-top:14px;margin-block-start:14px}
.keep li{padding:13px 0;padding-left:30px;padding-inline-start:30px;border-bottom:1px solid rgba(36,47,58,.12);position:relative;color:var(--ink)}
.keep li::before{content:"";position:absolute;left:2px;inset-inline-start:2px;top:20px;width:10px;height:10px;background:conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--red) 0 75%, var(--blue) 0)}
.keep li span{color:var(--ink-soft)}
.serifpull{font-family:var(--serif);font-size:1.25rem;line-height:1.45}
.forme{margin-top:52px;margin-block-start:52px;background:#fff;border:1px solid rgba(36,47,58,.15);box-shadow:0 3px 10px rgba(36,47,58,.08)}
.forme .body{padding:34px 36px;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(280px,1.2fr);gap:40px;align-items:center}
.forme h3{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15}
.forme h3 em{font-style:italic;color:var(--red)}
.forme .yes{margin-top:14px;margin-block-start:14px;color:var(--ink-soft)}
.forme ul{list-style:none}
.forme li{padding:11px 0;border-bottom:1px solid rgba(36,47,58,.12);font-size:.97rem;color:var(--ink-soft)}
.forme li b{color:var(--ink);font-family:var(--serif);font-size:1.03rem}
@media(max-width:760px){.forme .body{grid-template-columns:1fr;gap:20px}}
.route{margin-top:46px;margin-block-start:46px;border-top:2px solid var(--ink)}
.leg{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding-top:30px;padding-bottom:30px;padding-block:30px;border-bottom:var(--rule)}
.leg>.n{grid-column:1;grid-row:1}
.leg>div:not(.n){grid-column:2;grid-row:1}
.leg>p:not(.n){display:none}
.leg .n{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--blue-2);font-style:italic}
.leg h3{font-size:1.45rem}
.leg h3 span{display:block;font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--red-cta);margin-bottom:6px;margin-block-end:6px}
.leg p{margin-top:8px;margin-block-start:8px;color:var(--ink-soft);max-width:46em}
@media(max-width:560px){.leg{grid-template-columns:48px 1fr;gap:14px}.leg .n{font-size:1.8rem}}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:26px;margin-top:44px;margin-block-start:44px}
.way{border-top:6px solid var(--blue-2);padding-top:18px;padding-block-start:18px}
.way:nth-child(2){border-top-color:var(--blue)}
.way:nth-child(3){border-top-color:var(--red)}
.way h3{font-size:1.3rem}
.way p{margin-top:8px;margin-block-start:8px;color:var(--ink-soft);font-size:.97rem}
table.nine{width:100%;border-collapse:collapse;margin-top:46px;margin-block-start:46px;font-size:.97rem}
table.nine caption{text-align:start;font-weight:700;font-size:14px;color:var(--blue-text);padding-bottom:14px;padding-block-end:14px}
table.nine th{text-align:start;font-size:12.5px;color:var(--ink-soft);font-weight:700;padding:10px 0;padding-right:18px;padding-inline-end:18px;border-bottom:2px solid var(--ink)}
table.nine td{padding:13px 0;padding-right:18px;padding-inline-end:18px;border-bottom:1px solid rgba(36,47,58,.12);vertical-align:top;color:var(--ink-soft)}
table.nine td:first-child{color:var(--ink);font-weight:700;width:37%;font-family:var(--serif);font-size:1.02rem}

/* ============ programme / course cards ============ */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(305px,1fr));gap:0;border:var(--rule);border-bottom:none;border-right:none;border-inline-end:none;margin-top:46px;margin-block-start:46px}
.pcard{border-right:var(--rule);border-inline-end:var(--rule);border-bottom:var(--rule);padding:0 0 30px;display:flex;flex-direction:column;gap:10px;background:#fff}
.pcard:hover{background:var(--blue-4)}
.pcard .pad{padding-left:28px;padding-right:28px;padding-inline:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .thumb{display:block;margin-bottom:16px;margin-block-end:16px}
.pcard .thumb img{width:100%;height:auto;display:block}
.pcard.no-thumb .pad{padding-top:30px;padding-block-start:30px}
.pcard .tag{font-weight:700;font-size:13px;color:var(--red-cta)}
.pcard h3{font-size:1.3rem;line-height:1.25}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard .official{font-size:.82rem;color:var(--ink-faint);line-height:1.45}
.pcard p{color:var(--ink-soft);font-size:.96rem;flex:1}
.pcard .more{text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:8px}
.pcard .more:hover{color:var(--red-cta)}

/* ============ join: two steps + socials ============ */
.join-outer{padding-left:26px;padding-right:26px;padding-inline:26px}
.join{max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;background:var(--blue-3);border:1px solid rgba(36,47,58,.15)}
.join .inner{padding:64px 46px 56px}
.join h2{max-width:14em}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-top:40px;margin-block-start:40px;align-items:start}
.stepcard{background:#fff;border:1px solid rgba(36,47,58,.15);box-shadow:0 3px 10px rgba(36,47,58,.08)}
.stepcard .body{padding:26px 30px 26px}
.stepno{font-size:13px;color:var(--ink-soft);margin-bottom:10px;margin-block-end:10px}
.stepno b{font-family:var(--serif);font-style:italic;color:var(--red-cta);font-size:1.15rem;margin-right:10px;margin-inline-end:10px}
.stepcard h3{font-size:1.35rem}
.stepcard .sub{color:var(--ink-soft);font-size:.95rem;margin-top:8px;margin-block-start:8px}
.kajabi{min-height:150px;margin-top:14px;margin-block-start:14px}
.stepcard .trust{font-size:12.5px;color:var(--ink-faint);margin-top:16px;margin-block-start:16px;line-height:1.7}
.socialgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;margin-top:18px;margin-block-start:18px}
.socialgrid a{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;color:var(--ink);border:1px solid rgba(36,47,58,.25);background:#fff;padding:14px 8px 11px}
.socialgrid svg{width:26px;height:26px}
.socialgrid span{font-size:12px;font-weight:600;text-align:center;line-height:1.3}
/* --tglf-cut paints the knockout inside the YouTube and LinkedIn glyphs: it
   tracks the card background, white at rest and ink on hover. */
.socialgrid a{--tglf-cut:#fff}
.socialgrid a:hover{background:var(--ink);color:#fff;border-color:var(--ink);--tglf-cut:var(--ink)}
@media(max-width:920px){.join .inner{padding:44px 24px 40px}}

/* ============ partners table, beliefs, faces, governance (front page) ============ */
table.pt{width:100%;border-collapse:collapse;margin-top:44px;margin-block-start:44px;font-size:.97rem;border:var(--rule)}
table.pt th{text-align:start;background:var(--ink);color:var(--cloth);font-size:12.5px;font-weight:700;padding:12px 18px}
table.pt td{padding:14px 18px;border-bottom:1px solid rgba(36,47,58,.12);vertical-align:top;background:#fff}
table.pt td:first-child{font-weight:700;width:33%;font-family:var(--serif);font-size:1.02rem}
table.pt td:last-child{color:var(--ink-soft)}
table.pt tr:last-child td{border-bottom:none}
.twocol{columns:2;column-gap:44px;margin-top:8px;margin-block-start:8px}
.twocol li{break-inside:avoid}
@media(max-width:700px){.twocol{columns:1}}
.beliefs{list-style:none;margin-top:40px;margin-block-start:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0;border-top:var(--rule);border-left:var(--rule);border-inline-start:var(--rule)}
.beliefs li{border-right:var(--rule);border-inline-end:var(--rule);border-bottom:var(--rule);padding:20px 22px;color:var(--ink-soft);font-size:.97rem}
.beliefs li b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.06rem;margin-bottom:4px;margin-block-end:4px}
.faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:40px;margin-block-start:40px}
.face{display:grid;grid-template-columns:96px 1fr;gap:20px;border:1px solid rgba(36,47,58,.15);padding:22px;background:#fff}
.ph{width:96px;height:96px;background:var(--blue-3);display:grid;place-items:center;position:relative;overflow:hidden}
.ph img{width:96px;height:96px;object-fit:cover}
.ph svg{width:40px;height:35px;color:var(--blue-2)}
.ph i{position:absolute;bottom:5px;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);letter-spacing:.08em}
.face b{font-family:var(--serif);font-size:1.15rem}
.face .role{display:block;font-size:12.5px;color:var(--red-cta);font-weight:700;margin-top:3px;margin-bottom:8px;margin-block:3px 8px}
.face p{font-size:.92rem;color:var(--ink-soft)}
.gov{margin-top:36px;margin-block-start:36px;border-top:2px solid var(--ink)}
.trow{display:grid;grid-template-columns:minmax(150px,220px) minmax(150px,240px) 1fr;gap:20px;padding-top:16px;padding-bottom:16px;padding-block:16px;border-bottom:1px solid rgba(36,47,58,.12);align-items:baseline}
.trow b{font-family:var(--serif);font-size:1.05rem}
.trow .role{font-size:12.5px;color:var(--ink-soft);font-weight:700}
.trow p{font-size:.92rem;color:var(--ink-soft)}
@media(max-width:720px){.trow{grid-template-columns:1fr;gap:4px}}

/* ============ blog: index, archive, cards ============ */
.page-head{padding-top:56px;padding-bottom:40px;padding-block:56px 40px;border-bottom:var(--rule)}
.page-head h1{font-size:clamp(2rem,5vw,3.2rem)}
.page-head .desc{margin-top:12px;margin-block-start:12px;color:var(--ink-soft);max-width:40em}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;padding-top:48px;padding-bottom:48px;padding-block:48px}
.card{border:var(--rule);background:#fff;display:flex;flex-direction:column}
.card .thumb{display:block}
.card .thumb img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.card .pad{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .meta{font-size:12px;color:var(--ink-faint)}
.card .meta a{color:var(--blue-text);text-decoration:none;font-weight:700}
.card h2,.card h3{font-size:1.25rem;line-height:1.3}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--red-cta)}
.card .excerpt{color:var(--ink-soft);font-size:.95rem;flex:1}
.card:hover{background:var(--blue-4)}
.card .langline{font-size:11.5px;color:var(--ink-faint)}
.card .langline a{color:var(--red-cta);font-weight:700;text-decoration:none;margin-right:8px;margin-inline-end:8px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:60px;padding-block:10px 60px}
.pagination .page-numbers{border:var(--rule);padding:8px 14px;text-decoration:none;color:var(--ink);font-size:14px;background:#fff}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination a:hover{background:var(--blue-4)}

/* sticky/featured post */
.card.sticky-post,.card.featured-post{border-top:6px solid var(--red)}
.card.sticky-post,.card.featured-post .meta::before{content:"\2605  ";color:var(--red)}

/* ============ single post / page ============ */
.entry-head{padding-top:56px;padding-bottom:8px;padding-block:56px 8px}
.entry-head .meta{font-size:13px;color:var(--ink-faint);margin-bottom:16px;margin-block-end:16px}
.entry-head .meta a{color:var(--blue-text);font-weight:700;text-decoration:none}
.entry-head h1{font-size:clamp(2rem,5vw,3.1rem);max-width:20em}
.entry-head .excerpt{margin-top:16px;margin-block-start:16px;color:var(--ink-soft);font-size:1.12rem;max-width:36em}
.byline{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:18px;margin-block-start:18px}
.byline .byperson{display:flex;gap:10px;align-items:center}
.byline .byphoto img{width:48px;height:48px;border-radius:50%;display:block}
.byline a{font-family:var(--serif);font-size:1.05rem;color:var(--ink);text-decoration:none}
.byline a:hover{text-decoration:underline}
.entry-featured{margin-top:32px;margin-bottom:0;margin-block:32px 0}
.entry-featured img{width:100%;height:auto;display:block}
.entry-content{padding-top:40px;padding-bottom:24px;padding-block:40px 24px;font-size:1.05rem}
.entry-content > *{max-width:var(--narrow);margin-left:auto;margin-right:auto;margin-inline:auto}
.entry-content > p,.entry-content > ul,.entry-content > ol,.entry-content > blockquote{margin-bottom:1.3em;margin-block-end:1.3em}
.entry-content > ul,.entry-content > ol{padding-left:1.3em;padding-inline-start:1.3em}
/* clear:both so an image floating past the end of its paragraph does not
   collide with the next heading. */
.entry-content h2{font-size:1.7rem;margin-top:1.6em;margin-bottom:.6em;margin-block:1.6em .6em;clear:both}
.entry-content h3{font-size:1.3rem;margin-top:1.4em;margin-bottom:.5em;margin-block:1.4em .5em;clear:both}
.entry-content blockquote{border-left:4px solid var(--red);border-inline-start:4px solid var(--red);padding-left:20px;padding-inline-start:20px;color:var(--ink-soft);font-family:var(--serif);font-size:1.15rem}
.entry-content img{height:auto}
.entry-content .alignwide{max-width:var(--maxw)}
.entry-content .alignfull{max-width:none;width:100%}
.entry-content a{color:var(--red-cta)}
/* A wide table scrolls inside the content column instead of widening the
   page: display:block makes the table its own scroll container. */
.entry-content table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.entry-content table td,.entry-content table th{border:var(--rule);padding:10px 12px;text-align:start}
.entry-content pre{background:var(--blue-4);padding:18px;overflow-x:auto;font-family:var(--mono);font-size:.88rem}

/* Columns rows sit flush at the top of their row, so the cards in the
   council, fellows and ambassadors row (and the practitioner, collaborator,
   strategist row) all start at the same y position whatever their length.
   Core writes .are-vertically-aligned-top|center|bottom onto the row when an
   editor picks an alignment deliberately, so those rows are left alone. */
.entry-content .wp-block-columns:not([class*="are-vertically-aligned"]),
.front-editable .wp-block-columns:not([class*="are-vertically-aligned"]),
.mag-editable .wp-block-columns:not([class*="are-vertically-aligned"]){align-items:flex-start}

/* translations bar (per-post language switcher) */
.translations{background:var(--blue-4);border:var(--rule);padding:12px 18px;margin-top:22px;margin-block-start:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.translations .tlabel{font-weight:700;color:var(--ink)}
.translations a{font-weight:700;text-decoration:none}
.translations a[aria-current]{color:var(--ink);text-decoration:underline}

/* insights report: table of contents + PDF */
.report-tools{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:26px;margin-block-start:26px}
.toc{border:var(--rule);background:#fff;padding:20px 24px;flex:1;min-width:260px}
.toc .tochead{font-weight:700;font-size:13px;color:var(--blue-text);margin-bottom:8px;margin-block-end:8px}
.toc ol{list-style:none;counter-reset:toc}
.toc li{padding:6px 0;border-bottom:1px solid rgba(36,47,58,.1)}
.toc li::before{counter-increment:toc;content:counter(toc) "  ";font-family:var(--serif);font-style:italic;color:var(--blue-2)}
.toc a{text-decoration:none;color:var(--ink);font-size:.95rem}
.toc a:hover{color:var(--red-cta)}

/* related posts */
.related{border-top:var(--rule);padding-top:52px;padding-bottom:70px;padding-block:52px 70px}
.related .rhead{font-weight:700;font-size:14px;color:var(--blue-text);margin-bottom:8px;margin-block-end:8px}

/* comments */
.comments{border-top:var(--rule);padding-top:48px;padding-bottom:60px;padding-block:48px 60px}
.comments h2{font-size:1.5rem;margin-bottom:24px;margin-block-end:24px}
.comment-list{list-style:none}
.comment-list .comment{border-bottom:1px solid rgba(36,47,58,.12);padding-top:20px;padding-bottom:20px;padding-block:20px}
.comment-list .children{list-style:none;padding-left:28px;padding-inline-start:28px}
.comment-meta{font-size:13px;color:var(--ink-faint)}
.comment-meta b{color:var(--ink);font-family:var(--serif);font-size:1rem}
.comment-content{margin-top:8px;margin-block-start:8px;font-size:.98rem}
.comment-reply-link{font-size:12.5px;font-weight:700}
.comment-form{margin-top:28px;margin-block-start:28px;display:grid;gap:14px;max-width:560px}
.comment-form label{font-size:13px;font-weight:700;display:block;margin-bottom:4px;margin-block-end:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;border:var(--rule);padding:11px 12px;font-family:var(--sans);font-size:15px;background:#fff;
}

/* search + 404 */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type=search]{flex:1;border:var(--rule);padding:12px 14px;font-size:15px;font-family:var(--sans);background:#fff}
.empty-state{padding-top:60px;padding-bottom:90px;padding-block:60px 90px;max-width:var(--narrow)}
/* The search page opens with the form itself, above the results. */
.searchtools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:26px;padding-block-start:26px}
.searchtools .search-form{flex:1 1 320px}
.searchtools .asklead{margin:0;font-size:13.5px;color:var(--ink-soft)}
.big404{font-family:var(--serif);font-style:italic;font-size:clamp(4rem,14vw,9rem);color:var(--blue-2);line-height:1}

/* ============ course single / one-pager templates ============ */
.course-facts{border:var(--rule);background:#fff;margin-top:30px;margin-block-start:30px}
/* Each row is its own grid, so a fixed label column reserved 120px whatever
   the label read: the shorter the label the wider the blank band before the
   value, which left "Part of" adrift from the programme it names. A flex row
   sizes the label to its text instead, so every row is a tight label-value
   pair, and baseline alignment does the work the label's top padding used to. */
.course-facts .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:13px 20px;border-bottom:1px solid rgba(36,47,58,.1);font-size:.96rem}
.course-facts .row:last-child{border-bottom:none}
.course-facts .k{flex:none;font-weight:700;font-size:12.5px;color:var(--ink-soft)}
.course-cta{padding-top:34px;padding-bottom:34px;padding-block:34px}
.nblm-panel{background:var(--blue-3);border:1px solid rgba(36,47,58,.15);padding:44px;text-align:center;margin-top:40px;margin-bottom:40px;margin-block:40px}
.nblm-panel p{max-width:32em;margin-left:auto;margin-right:auto;margin-inline:auto;color:var(--ink-soft)}
.nblm-panel .btn{margin-top:22px;margin-block-start:22px}

/* ============ footer ============ */
.site-footer{border-top:var(--rule);position:relative;overflow:hidden;padding-top:56px;padding-block-start:56px}
.site-footer .cols{margin-top:0;margin-block-start:0;gap:30px}
.site-footer a{color:var(--ink-soft);text-decoration:none;display:block;padding:4px 0;font-size:14px}
.site-footer a:hover{color:var(--red-cta)}
.site-footer .colhead{font-weight:700;color:var(--ink);font-size:13.5px;margin-bottom:6px;margin-block-end:6px}
/* Social icons take the colour of the footer text through currentColor, and
   the knockout inside the YouTube and LinkedIn glyphs takes the footer
   background, so no part of an icon is left at the SVG default black. */
.site-footer .soclink{display:flex;align-items:center;gap:9px;--tglf-cut:var(--cloth)}
.site-footer .soclink svg{width:18px;height:18px;flex:none}
.site-footer ul{list-style:none}
.site-footer .legal{margin-top:44px;margin-block-start:44px;font-size:12.5px;color:var(--ink-faint);padding-bottom:150px;padding-block-end:150px;max-width:44em}
.bigmark{position:absolute;right:-30px;inset-inline-end:-30px;bottom:-56px;width:340px;height:298px;color:var(--blue-3);z-index:0}
.site-footer .wrap{position:relative;z-index:1}

/* ============ motion ============ */
.rv-init{transform:translateY(18px);transition:transform .55s var(--ease)}
.rv-init.in{transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv-init{transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ single with sidebar (block widget areas) ============ */
.single-wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:26px;padding-right:26px;padding-inline:26px}
.single-wrap.has-aside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.single-wrap.has-aside .entry-content > *{max-width:var(--narrow);margin-left:0;margin-right:0;margin-inline:0}
/* The rule above (three classes plus a child selector) outranks the
   single-class .alignleft/.alignright rules further down, so it was zeroing
   the gutter of every floated image on a post with a sidebar and text ran
   flush against the picture. Restated here at matching specificity, and for
   the core Image block's own class, whose styles are enqueued separately. */
.entry-content > .alignleft,.entry-content > .wp-block-image.alignleft,
.single-wrap .entry-content > .alignleft,.single-wrap .entry-content > .wp-block-image.alignleft{
  float:left;float:inline-start;margin:.4em 1.6em 1em 0;margin-block:.4em 1em;margin-inline:0 1.6em;
}
.entry-content > .alignright,.entry-content > .wp-block-image.alignright,
.single-wrap .entry-content > .alignright,.single-wrap .entry-content > .wp-block-image.alignright{
  float:right;float:inline-end;margin:.4em 0 1em 1.6em;margin-block:.4em 1em;margin-inline:1.6em 0;
}
.single-wrap .entry-content{padding-left:0;padding-right:0;padding-inline:0}
/* The translations nav and the course facts open the body column, so they
   follow the text column the same way .entry-content children do: centred
   when the body has the page to itself, flush left beside a sidebar. */
.postbody > .translations,.postbody > .course-facts,.postbody > .course-cta{max-width:var(--narrow);margin-left:auto;margin-right:auto;margin-inline:auto}
.single-wrap.has-aside .postbody > .translations,.single-wrap.has-aside .postbody > .course-facts,.single-wrap.has-aside .postbody > .course-cta{margin-left:0;margin-right:0;margin-inline:0}
.postbody > .translations{margin-top:40px;margin-block-start:40px}
.postbody > .course-cta{padding-bottom:0;padding-block-end:0}
.postaside{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px;padding-top:40px;padding-bottom:24px;padding-block:40px 24px;min-width:0}
.aside-block{border:var(--rule);background:#fff;padding:18px 20px}
.asidehead{font-weight:700;font-size:12.5px;color:var(--blue-text);margin-bottom:8px;margin-block-end:8px}
.rel-list{list-style:none}
.rel-list li{padding:8px 0;border-bottom:1px solid rgba(36,47,58,.1)}
.rel-list li:last-child{border-bottom:none}
.rel-list a{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink);font-size:.94rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.rel-list a:hover{color:var(--red-cta)}
/* The thumbnail is a flex item with a fixed basis, so an entry without a
   featured image leaves no empty column: the title simply fills the row. */
.rel-list .rthumb{flex:none;width:120px}
.rel-list .rthumb img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.rel-list .rtitle{min-width:0}
/* At 120px the picture is legible instead of a stamp, which leaves about
   128px for the title in the 300px sidebar column: a slightly smaller type
   size there keeps three or four words to a line rather than one. The
   stacked variant runs the full width of the box and keeps the base size. */
.rel-list li:not(.is-stacked) a{font-size:.88rem}
/* A box holding a single course stacks instead: image across the box, title
   under it, so the offer reads as a card rather than as a list of one. */
.rel-list li.is-stacked a{display:block}
.rel-list li.is-stacked .rthumb{display:block;width:100%;margin-bottom:10px;margin-block-end:10px}
/* Stacked entries read as cards, so consecutive ones need more air between
   them than the tight row padding a list of small thumbnails wants. */
.rel-list li.is-stacked + li.is-stacked{padding-top:16px;padding-block-start:16px}
/* A box can close on a button, such as the magazine's way through to the
   whole catalogue. In a 300px column it reads as a bar under the list. */
.postaside .aside-block .btn{display:block;text-align:center;margin-top:14px;margin-block-start:14px;font-size:14px;padding:11px 18px}
.below-post{border-top:var(--rule);padding-top:26px;padding-bottom:26px;padding-block:26px;display:grid;gap:18px;max-width:var(--narrow)}
.below-block{border:var(--rule);background:var(--blue-4);padding:18px 20px}
@media(max-width:1000px){
  .single-wrap.has-aside{grid-template-columns:1fr}
  /* A grid child's automatic minimum size is its content, so one long word or
     a wide table stretches the single column past the viewport. */
  .single-wrap.has-aside > *{min-width:0}
  .postaside{position:static;padding-top:0;padding-bottom:40px;padding-block:0 40px}
}
/* editable home page: chapters as page content */
.front-editable > .section,.front-editable section{padding-top:86px;padding-bottom:86px;padding-block:86px}

/* ============ magazine band + library shelves ============ */
.band{background:#fff;border-bottom:var(--rule)}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:6px;margin-block-start:6px}
.bandmore{text-decoration:none;color:var(--red-cta);font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bandmore:hover{color:var(--red-deep)}
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0;border:var(--rule);border-bottom:none;border-right:none;border-inline-end:none;margin-top:40px;margin-block-start:40px}
.shelf{border-right:var(--rule);border-inline-end:var(--rule);border-bottom:var(--rule);background:#fff;padding:22px 24px 24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:7px;position:relative}
.shelf::before{content:"";position:absolute;top:0;left:0;right:0;inset-inline:0;height:4px;background:var(--blue-2)}
.shelf:nth-child(3n)::before{background:var(--red)}
.shelf:nth-child(3n+2)::before{background:var(--blue)}
.shelf:hover{background:var(--blue-4)}
.shelf b{font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.shelf .count{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--red-cta);letter-spacing:.05em}
.shelf .what{color:var(--ink-soft);font-size:.9rem;flex:1}
.shelf .last{font-size:.82rem;color:var(--ink-faint);border-top:1px solid rgba(36,47,58,.1);padding-top:9px;padding-block-start:9px;line-height:1.45}

/* ============ governance boxes, topic hubs, topics page ============ */
.govboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:30px;margin-block-start:30px}
.govbox{background:#fff;border:1px solid rgba(36,47,58,.15);box-shadow:0 3px 10px rgba(36,47,58,.08)}
.govbox .body{padding:24px 28px 26px}
.govbox h4{font-size:1.25rem}
.govbox p{margin-top:10px;margin-block-start:10px;color:var(--ink-soft);font-size:.96rem}
/* A govbox can end with a Buttons block placed in the page content, for
   example the council's "Learn more". Nothing else separates it from the
   paragraph above, so the box gives it that room itself. */
.govbox .wp-block-buttons,.govbox p + .btn{margin-top:18px;margin-block-start:18px}
.hubband{padding-top:34px;padding-bottom:8px;padding-block:34px 8px}
.hubband.alt{background:var(--blue-4);border-top:var(--rule);border-bottom:var(--rule);padding-top:34px;padding-bottom:20px;padding-block:34px 20px}
.hubband .rhead{font-weight:700;font-size:14px;color:var(--blue-text)}
.topicsrow{max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;padding:8px 26px 66px;text-align:center}
.tagrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;margin-block-start:24px}
.tagchip{border:1px solid rgba(36,47,58,.3);background:#fff;padding:8px 14px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.tagchip span{color:var(--red-cta);font-family:var(--mono);font-size:11.5px;font-weight:700;margin-left:6px;margin-inline-start:6px}
.tagchip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tagchip:hover span{color:#fff}
/* the same pills in the 300px post sidebar: a shade smaller, and a long
   multi-word topic wraps inside its pill instead of overflowing the column */
.postaside .aside-block .tagrow{margin-top:0;margin-block-start:0}
.postaside .tagchip{font-size:13px;overflow-wrap:anywhere}

/* ============ magazine slider (featured articles) ============ */
.slider-wrap{position:relative;margin-top:18px;margin-block-start:18px}
.slider{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px;padding-block-end:6px}
.slider .slide{flex:0 0 min(560px,86%);scroll-snap-align:start}
.slider .slide .thumb img{aspect-ratio:16/9}
.slider-nav{position:absolute;top:40%;translate:0 -50%;width:44px;height:44px;border:var(--rule);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.slider-nav svg{width:16px;height:16px}
.slider-nav:hover{background:var(--blue-4)}
.slider-nav.prev{left:-14px;inset-inline-start:-14px}
.slider-nav.next{right:-14px;inset-inline-end:-14px}
@media(max-width:720px){.slider-nav{display:none}}
@media(prefers-reduced-motion:reduce){.slider{scroll-behavior:auto}}

/* ============ core blocks in content (buttons, image alignment) ============
   Editor-chosen colors always win: paint is applied only under
   :not(.has-background) / :not(.has-text-color). */
.wp-block-button .wp-block-button__link{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;padding:13px 24px;border-radius:2px;cursor:pointer;font-family:var(--sans)}
.wp-block-button .wp-block-button__link:not(.has-background){background:var(--red-cta);border:1px solid var(--red-deep);box-shadow:0 2px 0 var(--red-deep)}
.wp-block-button .wp-block-button__link:not(.has-background):hover{background:var(--red-deep)}
.wp-block-button .wp-block-button__link:not(.has-background):active{box-shadow:none;transform:translateY(2px)}
.wp-block-button .wp-block-button__link:not(.has-text-color){color:#fff}
.alignleft{float:left;float:inline-start;margin:.4em 1.6em 1em 0;margin-block:.4em 1em;margin-inline:0 1.6em}
.alignright{float:right;float:inline-end;margin:.4em 0 1em 1.6em;margin-block:.4em 1em;margin-inline:1.6em 0}
.aligncenter{display:block;margin-left:auto;margin-right:auto;margin-inline:auto}
/* Below 600px there is no room to wrap text beside an image: unfloat every
   variant, including the scoped rules that restore the gutter on desktop. */
@media(max-width:600px){
  .alignleft,.alignright,.wp-block-image.alignleft,.wp-block-image.alignright,
  .entry-content > .alignleft,.entry-content > .alignright,
  .entry-content > .wp-block-image.alignleft,.entry-content > .wp-block-image.alignright,
  .single-wrap .entry-content > .alignleft,.single-wrap .entry-content > .alignright,
  .single-wrap .entry-content > .wp-block-image.alignleft,.single-wrap .entry-content > .wp-block-image.alignright{
    float:none;margin-left:0;margin-right:0;margin-inline:0;
  }
}

/* ============ editable home, block-native chapters (v5 compat) ============
   Scoped additions only: v4 content (inline SVG kickers, b+span keep items)
   renders exactly as before. */
.chapter.sq::before{content:"";width:14px;height:14px;flex:none;background:conic-gradient(var(--blue) 0 25%, var(--red) 0 50%, var(--blue) 0 75%, var(--red) 0)}
.keep li{color:var(--ink-soft)}
.keep li b,.keep li strong{color:var(--ink)}
.face > .wp-block-image{margin:0;width:96px}
.face > .wp-block-image img{width:96px;height:96px;object-fit:cover;display:block}
.face .name,.trow .name{font-family:var(--serif);font-weight:700;color:var(--ink)}
.face .name{font-size:1.15rem}
.trow .name{font-size:1.05rem}
.endnote{margin-top:56px;margin-block-start:56px;font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4;max-width:26em}
.lede-serif{font-family:var(--serif);font-size:1.25rem;line-height:1.45}
.soft{color:var(--ink-soft)}
.subhead{margin-top:64px;margin-block-start:64px;font-size:1.5rem}
.subhead-sm{margin-top:52px;margin-block-start:52px;font-size:1.3rem}

/* v6: the verbs/route/ways/forme/tables/beliefs composites became native
   blocks. Core List always emits <strong>, never <b>, so the existing
   b-selectors below need a strong sibling; core Table wraps in <figure>
   (className lands there, not on <table>) with the caption as a
   <figcaption> after the table, not a <caption> before it. */
.forme li strong{color:var(--ink);font-family:var(--serif);font-size:1.03rem}
.beliefs li strong{display:block;color:var(--ink);font-family:var(--serif);font-size:1.06rem;margin-bottom:4px;margin-block-end:4px}
.wp-block-table.nine{display:flex;flex-direction:column;margin-top:46px;margin-block-start:46px}
.wp-block-table.nine table{width:100%;border-collapse:collapse;font-size:.97rem;border:var(--rule)}
.wp-block-table.nine figcaption{order:-1;text-align:start;font-weight:700;font-size:14px;color:var(--blue-text);padding-bottom:14px;padding-block-end:14px}
.wp-block-table.nine th{border:none;text-align:start;background:var(--ink);color:var(--cloth);font-size:12.5px;font-weight:700;padding:12px 18px}
.wp-block-table.nine td{border:none;padding:14px 18px;border-bottom:1px solid rgba(36,47,58,.12);vertical-align:top;color:var(--ink-soft);background:#fff}
.wp-block-table.nine td:first-child{color:var(--ink);font-weight:700;width:37%;font-family:var(--serif);font-size:1.02rem}
.wp-block-table.nine tr:last-child td{border-bottom:none}
.wp-block-table.pt table{width:100%;border-collapse:collapse;margin-top:44px;margin-block-start:44px;font-size:.97rem;border:var(--rule)}
.wp-block-table.pt th{border:none;text-align:start;background:var(--ink);color:var(--cloth);font-size:12.5px;font-weight:700;padding:12px 18px}
.wp-block-table.pt td{border:none;padding:14px 18px;border-bottom:1px solid rgba(36,47,58,.12);vertical-align:top;background:#fff}
.wp-block-table.pt td:first-child{font-weight:700;width:33%;font-family:var(--serif);font-size:1.02rem}
.wp-block-table.pt td:last-child{color:var(--ink-soft)}
.wp-block-table.pt tr:last-child td{border-bottom:none}

/* ============ magazine, editable band layout ============ */
.mag-editable > :not(section){max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:26px;padding-right:26px;padding-inline:26px}
.mag-editable > p:first-child,.mag-editable > h2:first-child{padding-top:26px;padding-block-start:26px}
/* The Latest band and the editable content sit in the same grid a single
   post with a sidebar uses, so they give up the page gutter and the max
   width they carry when they own the page: the grid column supplies both.
   The featured carousel is printed above the grid and keeps its own .wrap,
   which lines its edges up with the columns below it. */
.mag-wrap .postbody .wrap,.mag-wrap .mag-editable > :not(section){max-width:none;padding-left:0;padding-right:0;padding-inline:0}

/* ============ join: messaging row and podcast line ============ */
.socialgrid.msg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:0;margin-block-end:0}
.socialgrid.msg a{border:2px solid var(--ink);font-weight:700}
.socialgrid.msg svg{width:30px;height:30px}
.podline{margin-top:14px;margin-block-start:14px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.podline a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;text-decoration:none}
.podline a:hover{color:var(--red-cta)}
.podline svg{width:15px;height:15px}

/* ============ header: wordmark, search, ask ============ */
.logo .wordmark{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.logo .wordmark .lred{color:var(--red-cta)}
.searchmenu .panel{min-width:280px}
.searchmenu summary svg{width:15px;height:15px;display:block}
.searchmenu summary::after{content:none}
.search-form{display:flex;gap:8px;align-items:center}
.search-form input[type=search]{flex:1;min-width:0;border:var(--rule);padding:10px 12px;font-size:14px;font-family:var(--sans);background:#fff;color:var(--ink)}
.search-form .btn{padding:9px 16px;font-size:13.5px}
.asklink{font-size:13.5px;font-weight:700;color:var(--red-cta);text-decoration:none;border:var(--rule);padding:7px 12px;border-radius:2px;white-space:nowrap}
.asklink:hover{background:var(--blue-4)}