/* ═══ wellbeink — landing page ═══ */

:root{
  --teal:        #14524A;
  --teal-deep:   #0E3B35;
  --clay:        #C77B4A;
  /* darker clay for TEXT under 18px — #C77B4A is only 3.3:1 on white, fails AA.
     #A85F33 = 4.83:1. Fills, dots and large display text keep --clay. */
  --clay-text:   #A85F33;
  --gold:        #E8B54D;
  --sage:        #7FAE9E;

  --bg:          #FFFFFF;
  --bg-soft:     #F6F7F5;
  --text:        #1A2422;
  --text-soft:   #566360;
  --line:        #E4E7E3;
  --line-strong: #CBD2CD;

  --ph-sage:  #DCE7E2;
  --ph-clay:  #F0DED2;
  --ph-gold:  #EFE8D0;

  --sans:  "Manrope", system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --header-h: 74px;
  /* single display size for EVERY heading — synced to the hero title */
  --head-size: clamp(26px,2.6vw,38px);
  --head-lh:   1.15;
  --head-ls:   -.034em;
  --r:    10px;
  --shadow-card: 0 1px 2px rgba(20,82,74,.05), 0 8px 24px -12px rgba(20,82,74,.18);
  --shadow-lift: 0 4px 10px rgba(20,82,74,.07), 0 20px 44px -18px rgba(20,82,74,.28);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ── browser surfaces, themed ── */
/* light surfaces: soft teal wash, deep teal text */
::selection{ background:rgba(20,82,74,.16); color:var(--teal-deep); }
/* on the teal CTA band and footer that light rule is invisible (teal text on
   teal ground) — swap to a gold fill with dark teal text */
.cta-band ::selection,
.site-footer ::selection,
.btn-solid::selection,
.btn-light::selection,
.chip.is-active::selection{ background:var(--gold); color:var(--teal-deep); }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
html{ scrollbar-color:var(--line-strong) var(--bg-soft); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-soft); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover{ background:var(--sage); }
input{ caret-color:var(--teal); }

img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:32px; }

/* hero spans the full viewport — its own container, not the 1120px cap */
.wrap--hero{ max-width:none; padding-inline:clamp(24px,4.2vw,72px); }

/* ── shared type ── */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clay-text); margin:0 0 20px;
}
.section-title{
  font-family:var(--sans); font-weight:800; letter-spacing:var(--head-ls);
  font-size:var(--head-size); line-height:var(--head-lh); color:var(--teal); margin:0;
}
\.section-sub{ max-width:none; margin:14px 0 0; color:var(--text-soft); font-size:17px;
}
.meta{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}
.meta--clay{ color:var(--clay-text); text-transform:uppercase; letter-spacing:.11em; font-size:11.5px; }

.link-more{
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--clay-text);
  display:inline-flex; align-items:center; gap:7px; transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.link-more:hover{ gap:12px; }

/* ── buttons ── */
.btn{
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1;
  border:1px solid transparent; border-radius:8px; padding:13px 22px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.btn-sm{ padding:10px 18px; font-size:14px; }
.btn-solid{ background:var(--teal); color:#fff; }
.btn-solid:hover{ background:var(--teal-deep); transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--teal); }
.btn-light:hover{ background:#EEF3F0; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ── icons ── */
.icon-search{ width:17px; height:17px; flex:none; fill:none; stroke:var(--text-soft); stroke-width:1.7; stroke-linecap:round; }

/* ═══ HEADER ═══ */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow:0 1px 14px rgba(20,82,74,.07); }
/* full-bleed: the header spans the viewport, not the 1120px content column */
.header-inner{
  display:flex; align-items:center; gap:34px; padding-block:17px;
  width:100%; max-width:none; margin-inline:0;
  padding-inline:clamp(20px,3vw,48px);
}

.wordmark{
  font-family:var(--sans); font-weight:700; font-size:21px;
  letter-spacing:-.03em; color:var(--teal);
}

.main-nav{ display:flex; gap:26px; }
.nav-link{
  font-family:var(--sans); font-weight:500; font-size:15px; color:var(--text);
  position:relative; padding-block:4px;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--teal); transform:scaleX(0); transform-origin:right;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover{ color:var(--teal); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.header-search{
  display:flex; align-items:center; gap:9px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:99px; padding:8px 16px;
  transition:border-color .25s ease, background .25s ease;
}
.header-search:focus-within{ border-color:var(--sage); background:#fff; }
.header-search input{
  border:0; background:transparent; outline:none; width:120px;
  font-family:var(--sans); font-size:14px; color:var(--text);
}
.header-search input::placeholder{ color:#8A9793; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span{ width:22px; height:1.8px; background:var(--teal); border-radius:2px; transition:transform .3s ease, opacity .25s ease; }

/* ═══ HERO ═══ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  /* fill the viewport below the sticky header, and centre the content in it */
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4.5vh,72px) 0 clamp(24px,4vh,64px);
}

/* illustration sits back — bigger, drifting left so it joins the content column
   instead of reading as a separate right-hand panel */
.hero-bg{
  position:absolute; z-index:-1; pointer-events:none;
  top:50%; right:0%; translate:0 -50%;
  width:min(64%,1040px); aspect-ratio:1436/1084;
  background:url("assets/hero-illustration.png") center right / contain no-repeat;
  opacity:.82;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 14%, #000 42%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 14%, #000 42%);
}

.hero-grid{
  display:grid; grid-template-columns:minmax(0,min(48%,600px));
  align-items:center;
}
.hero-content{ min-width:0; position:relative; z-index:1; }
.hero-content > .eyebrow{ margin-bottom:15px; }

.hero-title{
  font-family:var(--sans); font-weight:800; color:var(--teal);
  font-size:clamp(30px,3.5vw,50px); line-height:1.08; letter-spacing:-.036em;
  margin:0 0 18px; max-width:none;
}
.hero-title .line{ display:block; white-space:normal; }

.hero-sub{ margin:0 0 22px; color:var(--text-soft);
  font-size:16.5px; line-height:1.6;
}

.hero-search{
  display:flex; align-items:center; gap:12px; max-width:100%;
  border:1.5px solid var(--teal); border-radius:10px;
  padding:9px 9px 9px 20px; background:#fff;
  transition:box-shadow .3s ease;
}
.hero-search:focus-within{ box-shadow:0 0 0 4px rgba(20,82,74,.09); }
.hero-search input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font-family:var(--sans); font-size:15.5px; color:var(--text); padding-block:8px;
}
.hero-search input::placeholder{ color:#8A9793; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 28px; }
.chip{
  font-family:var(--sans); font-weight:500; font-size:12px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:99px; padding:6px 12px; cursor:pointer;
  transition:background .24s ease, border-color .24s ease, color .24s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.chip:hover{ border-color:var(--sage); transform:translateY(-1px); }
.chip.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }

.stats{ display:flex; flex-wrap:wrap; gap:42px; margin:0; }
.stat dt{
  font-family:var(--sans); font-weight:800; font-size:clamp(23px,2.4vw,28px);
  letter-spacing:-.03em; color:var(--teal); font-variant-numeric:tabular-nums; margin:0;
}
.stat dd{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-soft); margin:4px 0 0;
}
.stat--accent dt{ color:var(--clay); }

/* ═══ PLACEHOLDERS (image areas) ═══ */
.ph{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; isolation:isolate;
}
.ph-hatch{
  position:absolute; inset:-8%; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(255,255,255,.62) 9px 18px);
}
.ph--sage{ background-color:var(--ph-sage); }
.ph--clay{ background-color:var(--ph-clay); }
.ph--gold{ background-color:var(--ph-gold); }
.ph--entry{ aspect-ratio:4/3; }
.ph--wide{ aspect-ratio:16/9; }

.ph-label{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-soft);
  background:rgba(255,255,255,.92); border-radius:99px; padding:6px 14px; white-space:nowrap;
}

/* a placeholder that now carries real artwork: drop the hatching + label.
   The generated art sits on a flat white ground and is full of very light
   washes — on the sage tint (and especially with a blend mode) those washes
   vanish and the art looks inset. A white ground keeps every wash visible and
   merges seamlessly with the artwork's own white margin. */
.ph--filled{ background-color:#fff; }
.ph--filled .ph-hatch,
.ph--filled .ph-label{ display:none; }
.ph--filled img{
  width:100%; height:100%; display:block; object-fit:contain;
}

/* ═══ TRADITIONS ═══ */
.traditions{ padding:72px 0 84px; background:var(--bg-soft); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:34px; }

.tradition-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tradition-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);
  /* the card is an <a> to the practice page — kill link chrome, keep the card look */
  text-decoration:none; color:inherit;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.tradition-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); }
.tradition-card .ph{ border-radius:0; }
.tradition-name{
  font-family:var(--sans); font-weight:700; font-size:18px; color:var(--teal);
  letter-spacing:-.02em; padding:18px 20px 0;
}
.tradition-card .meta{ padding:6px 20px 20px; }

/* ═══ ENTRY OF THE WEEK ═══ */
.entry-week{ padding:78px 0; }
.entry-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start; }

.entry-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 32px 26px; box-shadow:var(--shadow-card);
}
.entry-title{
  font-family:var(--sans); font-weight:800; font-size:var(--head-size);
  letter-spacing:var(--head-ls); line-height:var(--head-lh); color:var(--teal); margin:10px 0 16px;
}
.entry-body{ margin:0 0 22px; color:var(--text); }

.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
.tag{
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--text-soft);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:99px; padding:6px 14px;
}

.entry-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line); padding-top:16px;
}

/* ═══ TIMELINE ═══ */
.timeline-sec{ padding:78px 0 90px; background:var(--bg-soft); }
.timeline{ margin-top:48px; position:relative; }

.rail{ height:2px; background:var(--line-strong); border-radius:2px; position:relative; }
.rail-fill{
  position:absolute; inset:0 auto 0 0; width:0; background:var(--teal); border-radius:2px;
}

.ticks{ list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; }
.tick{ position:relative; padding-top:20px; text-align:center; flex:1; min-width:0; }
.dot{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%) scale(0);
  width:11px; height:11px; border-radius:50%; background:#fff;
  border:2px solid var(--teal); box-shadow:0 0 0 4px var(--bg-soft);
}
.tick--now .dot{ background:var(--clay); border-color:var(--clay); }

.era{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--clay-text); text-transform:uppercase;
}
.tick-label{
  display:block; font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--text-soft); margin-top:4px;
}

/* ═══ OPEN BY DESIGN ═══ */
.open-design{ padding:78px 0 88px; }
.principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:44px; }
.principle{ border-top:1px solid var(--line-strong); padding-top:18px; }
.principle h3{
  font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.02em;
  color:var(--teal); margin:0 0 8px;
}
.principle p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--text-soft); }

/* ═══ CTA BAND ═══ */
.cta-band{ background:var(--teal); color:#fff; padding:84px 0; }
.cta-inner{ text-align:center; }
.cta-title{
  font-family:var(--sans); font-weight:800; font-size:var(--head-size);
  letter-spacing:var(--head-ls); line-height:var(--head-lh); margin:0 0 16px;
}
.cta-sub{ margin:0 auto 32px; color:rgba(255,255,255,.82); font-size:18px;
}
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ═══ FOOTER ═══ */
.site-footer{ background:var(--teal-deep); color:rgba(255,255,255,.76); padding:64px 0 36px; }
.footer-cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr; gap:36px;
  padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.14);
}
.wordmark--footer{ color:#fff; font-size:22px; margin:0 0 12px; }
.footer-blurb{ margin:0; font-size:15.5px; line-height:1.6; }

.footer-col h3{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:500; margin:0 0 16px;
}
.footer-col a{
  display:block; font-family:var(--sans); font-size:15px; color:rgba(255,255,255,.8);
  margin-bottom:11px; transition:color .22s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.footer-col a:hover{ color:#fff; transform:translateX(3px); }

.sub-form{ display:flex; gap:8px; margin-bottom:18px; }
.sub-form input{
  flex:1; min-width:0; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07);
  border-radius:8px; padding:11px 14px; color:#fff; font-family:var(--sans); font-size:14px; outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.sub-form input::placeholder{ color:rgba(255,255,255,.48); }
.sub-form input:focus{ border-color:var(--sage); background:rgba(255,255,255,.11); }
.sub-form .btn-solid{ background:var(--sage); color:var(--teal-deep); }
.sub-form .btn-solid:hover{ background:#96C0B1; }

.socials{ display:flex; gap:12px; }
.socials a{
  width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  transition:border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.socials a:hover{ border-color:var(--sage); background:rgba(255,255,255,.08); transform:translateY(-2px); }
.socials svg{ width:16px; height:16px; fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.6; stroke-linecap:round; }

.disclaimer{
  margin:28px 0 0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.5);
  max-width:none;
}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom .meta{ color:rgba(255,255,255,.55); }
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{
  font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.7);
  text-underline-offset:4px; transition:color .22s ease;
}
.footer-legal a:hover{ color:#fff; text-decoration:underline; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:980px){
  .tradition-grid{ grid-template-columns:repeat(2,1fr); }
  .principles{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .footer-cols{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .entry-layout{ grid-template-columns:1fr; }
  .stats{ gap:40px; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .wrap{ padding-inline:22px; }

  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-search{ display:none; }

  /* ONE row of chips only. The row never wraps, and whatever doesn't fit fades
     out under a mask instead of pushing the hero down. */
  .chips{
    flex-wrap:nowrap; overflow:hidden; gap:6px; margin:14px 0 26px;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
            mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
  }
  .chip{ flex:0 0 auto; font-size:10.5px; padding:5px 10px; }

  .hero{ padding:52px 0 52px; }
  .wrap--hero{ padding-inline:22px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-bg{
    position:relative; inset:auto; translate:none; z-index:-1;
    width:100%; margin:0 0 -8px; opacity:.85;
    -webkit-mask-image:none; mask-image:none;
  }
  /* the headline wraps as one balanced block here — the two hard <span> lines
     leave an orphan word on a 390px screen */
  .hero-title{ max-width:none; font-size:clamp(28px,7.2vw,40px); text-wrap:balance; }
  .hero-title .line{ display:inline; }
  /* the hairline divider has nothing to divide once the two links stack */
  .hero-links{ gap:12px 20px; margin-bottom:24px; }
  .hero-links-sep{ display:none; }
  .hero-title .line{ display:inline; white-space:normal; }
  .hero-search{ flex-wrap:wrap; padding:12px; gap:10px; }
  .hero-search input{ flex:1 1 100%; padding-inline:6px; }
  .hero-search .btn{ flex:1; }
  .icon-search{ display:none; }

  .stats{ gap:30px 44px; }
  .tradition-grid{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:10px; }

  .ticks{ flex-direction:column; gap:22px; align-items:flex-start; }
  .rail{ display:none; }
  .tick{ text-align:left; padding-top:0; padding-left:24px; width:100%; }
  .dot{ top:6px; left:0; transform:scale(0); }

  .principles{ grid-template-columns:1fr; gap:22px; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer-col--sub{ grid-column:1 / -1; }
  .cta-band{ padding:64px 0; }
}

/* ═══ HERO BIRDS (ink flock layer — add-on) ═══
   Full-bleed over the hero illustration, under the hero content.
   Purely decorative: never intercepts the pointer. */
.hero-birds{
  position:absolute; inset:0; width:100%; height:100%;
  /* above the hero's ground AND above its content: the birds land on top of the
     search bar, so they have to paint over it. pointer-events:none keeps every
     control underneath fully clickable. */
  z-index:2; display:block; pointer-events:none;
  user-select:none; -webkit-user-select:none;
}
@media print{ .hero-birds{ display:none; } }

/* ═══ MOBILE DRAWER ═══
   A full-height panel that slides in from the right on small screens. It is the
   whole menu: a search field, the primary links with a line of explanation each,
   the contribute paths, the Wellbeink links and the socials. Desktop keeps the
   plain inline nav — the drawer only exists below 980px. */
body.no-scroll{ overflow:hidden; }

.drawer{
  position:fixed; inset:0; z-index:80;
  visibility:hidden; pointer-events:none;
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }

.drawer-scrim{
  position:absolute; inset:0; background:rgba(14,59,53,.44);
  opacity:0; transition:opacity .36s ease;
}
.drawer.is-open .drawer-scrim{ opacity:1; }

.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(92vw,420px); display:flex; flex-direction:column;
  background:var(--bg);
  transform:translateX(101%);
  transition:transform .46s cubic-bezier(.16,1,.3,1);
  box-shadow:-30px 0 70px -34px rgba(20,82,74,.55);
}
.drawer.is-open .drawer-panel{ transform:none; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px; border-bottom:1px solid var(--line); flex:none;
}
.drawer-close{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; transition:background .22s ease, border-color .22s ease;
}
.drawer-close:hover{ background:#fff; border-color:var(--sage); }
.drawer-close svg{ width:17px; height:17px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; }

.drawer-body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 20px 26px;
}

.drawer-search{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--teal); border-radius:10px;
  padding:9px 14px; background:#fff;
}
.drawer-search input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font-family:var(--sans); font-size:14.5px; color:var(--text);
}
.drawer-search input::placeholder{ color:#8A9793; }

.drawer-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clay-text); margin:24px 0 4px;
}
.drawer-group{ display:block; }

.drawer-item{
  display:block; padding:12px 0; border-bottom:1px solid var(--line);
  /* each row eases in on its own beat (--d set inline) so the panel feels alive */
  opacity:0; transform:translateX(16px);
  transition:opacity .42s ease var(--d,0s), transform .5s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.drawer.is-open .drawer-item{ opacity:1; transform:none; }
.drawer-item strong{
  display:block; font-family:var(--sans); font-weight:600; font-size:15.5px;
  color:var(--teal); letter-spacing:-.015em;
}
.drawer-item span{
  display:block; font-size:13px; line-height:1.5; color:var(--text-soft); margin-top:2px;
}
.drawer-item:active{ background:var(--bg-soft); }

.drawer-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.drawer-chips a{
  font-family:var(--sans); font-size:12px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:99px; padding:7px 13px;
}

.drawer-foot{
  flex:none; border-top:1px solid var(--line); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--bg-soft);
}
.drawer-foot .btn{ flex:1; }
.drawer-foot .socials a{ border-color:var(--line-strong); }
.drawer-foot .socials svg{ stroke:var(--teal); }

@media (min-width:981px){ .drawer{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .drawer-panel{ transition:none; }
  .drawer-item{ transition:none; opacity:1; transform:none; }
  .drawer-scrim{ transition:none; }
}

/* ═══ INNER-PAGE COMPONENTS ═══
   The landing page keeps its v1 layout and components. These are the extra
   pieces the inner pages (About, Why It Matters, How It Works, Taxonomy,
   Governance, Explore, Partner, Contact) need. */

/* ═══ DESKTOP NAV DROPDOWN ═══ */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-caret{
  width:9px; height:9px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{ transform:rotate(180deg); }

.nav-drop{
  position:absolute; top:100%; left:50%; z-index:10;
  transform:translate(-50%,10px);
  min-width:252px; margin:0; padding:10px; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .22s;
}
/* keeps the pointer inside the panel while it travels down from the link */
.nav-drop::before{ content:""; position:absolute; inset:-16px 0 auto; height:16px; }
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop{ opacity:1; visibility:visible; transform:translate(-50%,4px); }

.nav-drop a{
  display:block; padding:10px 13px; border-radius:7px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--text);
  transition:background .2s ease, color .2s ease;
}
.nav-drop a:hover{ background:var(--bg-soft); color:var(--teal); }
.nav-drop a[aria-current="page"]{ color:var(--teal); background:var(--bg-soft); font-weight:700; }

/* ═══ TAGLINES ═══
   Content doc line 47: taglines are for use "where deem fit". Set as statements
   in the serif, never as another heading. */
.tagline-band{ padding:clamp(52px,6.5vw,84px) 0; }
.tagline-band--tint{ background:var(--bg-soft); }
.tagline-mark{ display:block; width:46px; height:2px; background:var(--clay); margin:0 0 28px; }
.tagline{
  font-family:var(--serif); font-size:clamp(20px,2.15vw,30px); line-height:1.45;
  color:var(--teal); margin:0;
}
/* the shorter tagline that sits inside the hero, under the sub */
/* Content doc line 71 gives two calls to action right under the sub. As two
   buttons they fought the search bar, which is the hero's real primary action —
   so they read as one quiet arrow row and the search stays the only filled
   button in the hero. */
.hero-links{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:0 0 26px; }
.hero-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--teal);
  border-bottom:1px solid var(--line-strong); padding-bottom:3px;
  transition:gap .3s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
.hero-link:hover{ gap:13px; border-bottom-color:var(--sage); }
.hero-links-sep{ width:1px; height:15px; flex:none; background:var(--line-strong); }
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.05vw,17px);
  line-height:1.55; color:var(--text-soft); margin:22px 0 0;
}

/* ═══ INNER PAGE HEADS ═══ */
.page-hero{ padding:clamp(56px,8vh,104px) 0 clamp(40px,5vw,60px); }
.page-hero--tint{ background:var(--bg-soft); }

.page-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(31px,4.2vw,52px); line-height:1.08; letter-spacing:-.038em;
  color:var(--teal); margin:0;
}
\.page-lede{ max-width:none; margin:22px 0 0;
  font-size:clamp(17px,1.1vw,19px); line-height:1.62; color:var(--text-soft);
}

/* the five About pages share one in-page nav */
.subnav{
  position:sticky; top:var(--header-h); z-index:40;
  /* opaque: at .94 the page ghosted through the sticky bar as you scrolled */
  background:var(--bg); border-bottom:1px solid var(--line);
}
.subnav-inner{ display:flex; gap:28px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar{ display:none; }
.subnav a{
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--text-soft);
  padding:15px 0; border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.subnav a:hover{ color:var(--teal); }
.subnav a[aria-current="page"]{ color:var(--teal); border-bottom-color:var(--teal); }

/* ═══ CONTENT SECTIONS ═══ */
.sec{ padding:clamp(56px,6.5vw,88px) 0; }
.sec--tint{ background:var(--bg-soft); }
.sec--flush{ padding-top:0; }

/* Self-correcting guard for a bug that shipped more than once.
   `.sec--flush` kills the top padding so a section can CONTINUE the surface
   above it. When the tint CHANGES across that boundary the surface is a new
   one, and flush leaves its heading jammed against the previous band with no
   breathing room. Rather than trust every author to notice, take the padding
   back whenever the tint flips. Both directions:
     tinted  -> plain   (leaving a band)
     plain   -> tinted  (entering a band)
   A section that genuinely wants zero padding across a tint change opts out
   explicitly with data-flush="intentional".
   check-pages.py enforces the same rule statically. */
.sec--tint + .sec--flush:not(.sec--tint):not([data-flush="intentional"]),
.sec:not(.sec--tint) + .sec--flush.sec--tint:not([data-flush="intentional"]){
  padding-top:clamp(56px,6.5vw,88px);
}

.prose{ max-width:none; }
.prose > p{ margin:0 0 18px; }
.prose > p:last-child{ margin-bottom:0; }
.prose h2{
  font-family:var(--sans); font-weight:800; font-size:var(--head-size);
  line-height:var(--head-lh); letter-spacing:var(--head-ls); color:var(--teal);
  margin:0 0 18px;
}
.prose h3{
  font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-.02em;
  color:var(--teal); margin:40px 0 12px;
}
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin-bottom:9px; }
.prose strong{ font-weight:600; }
.prose a{ color:var(--teal); border-bottom:1px solid var(--sage); }
.prose a:hover{ border-bottom-color:var(--teal); }

/* content doc lines 322 / 342 — the two "click to" links */
.doc-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  font-family:var(--sans); font-weight:600; font-size:15px; color:var(--clay-text);
  border-bottom:1px dashed var(--clay);
  transition:gap .3s cubic-bezier(.16,1,.3,1), color .2s ease;
}
.doc-link:hover{ gap:14px; color:var(--teal); border-bottom-color:var(--teal); }

/* two- and three-up card grids for sub-topics */
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:34px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px; }
.subcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--shadow-card);
}
.subcard h3{
  margin:0 0 12px; font-family:var(--sans); font-weight:700; font-size:17.5px;
  letter-spacing:-.02em; color:var(--teal);
}
.subcard p{ margin:0 0 12px; }
.subcard p:last-child{ margin-bottom:0; }

/* numbered steps — content doc 191-227 and 228-256 */
.steps{ list-style:none; margin:30px 0 0; padding:0; counter-reset:step; }
.steps > li{ counter-increment:step; position:relative; padding-left:54px; margin-bottom:28px; }
.steps > li:last-child{ margin-bottom:0; }
.steps > li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:31px; height:31px; border-radius:50%; background:var(--teal); color:#fff;
  font-family:var(--mono); font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.steps h3{
  margin:0 0 9px; font-family:var(--sans); font-weight:700; font-size:18px;
  letter-spacing:-.02em; color:var(--teal);
}
.steps p{ margin:0 0 12px; }
.steps p:last-child{ margin-bottom:0; }
.steps ul{ margin:0; padding-left:20px; }

/* content doc 258-271 — the six user groups */
.users{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px; }
.user{ border-top:1px solid var(--line-strong); padding-top:18px; }
.user h3{
  margin:0 0 8px; font-family:var(--sans); font-weight:700; font-size:16.5px;
  letter-spacing:-.02em; color:var(--teal);
}
.user p{ margin:0; font-size:15px; line-height:1.6; color:var(--text-soft); }

/* content doc 292-320 — taxonomy dimension groups */
.dimensions{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:36px; }
.dimension{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; }
.dimension h3{
  margin:0 0 16px; font-family:var(--sans); font-weight:700; font-size:17px;
  letter-spacing:-.02em; color:var(--teal);
}
.dimension ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.dimension li{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--text-soft);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:99px; padding:5px 12px;
}

/* pill lists — relationship types, governance areas */
.chip-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.chip-list li{
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--text-soft);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:99px; padding:7px 15px;
}
.sec--tint .chip-list li{ background:#fff; }

/* the "Insert:" lines — content doc 103 */
.callout{
  border-left:3px solid var(--clay); background:var(--bg-soft);
  border-radius:0 var(--r) var(--r) 0; padding:24px 28px; margin:32px 0;
}
.callout p{
  margin:0; font-family:var(--serif); font-size:17.5px; line-height:1.6;
  color:var(--teal);
}
.sec--tint .callout{ background:#fff; }

/* content doc 102 / 427 — an email address reads as mono */
.email{ font-family:var(--mono); font-size:.94em; color:var(--teal); border-bottom:1px solid var(--sage); }
.email:hover{ border-bottom-color:var(--teal); }

/* ═══ CONTACT FORM ═══
   Content doc 437-442 — exactly the six fields the client listed, in order. */
.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; max-width:none; margin-top:34px; }
.form .field--full,.form .form-actions{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--teal); }
.field input,.field select,.field textarea{
  font-family:var(--serif); font-size:16px; color:var(--text);
  background:#fff; border:1px solid var(--line-strong); border-radius:8px;
  padding:13px 15px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{
  appearance:none; padding-right:42px; background-repeat:no-repeat;
  background-position:right 16px center; background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23566360' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(20,82,74,.09);
}
.field textarea{ min-height:156px; resize:vertical; }
.form-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note{ margin:0; font-size:14.5px; color:var(--text-soft); }

/* ═══ SMALL PARTS ═══ */
/* a ghost button on a LIGHT ground — .btn-ghost is white-on-white on white */
.btn-ghost-dark{ background:transparent; color:var(--teal); border-color:var(--line-strong); }
.btn-ghost-dark:hover{ border-color:var(--teal); background:var(--bg-soft); transform:translateY(-1px); }

.skip{
  position:absolute; left:-9999px; top:10px; z-index:200;
  background:var(--teal); color:#fff; border-radius:8px; padding:11px 18px;
  font-family:var(--sans); font-weight:600; font-size:14px;
}
.skip:focus{ left:16px; }

/* the doc gives FIVE guiding principles; the v1 grid was four */
.principles{ grid-template-columns:repeat(5,1fr); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px){
  .principles{ grid-template-columns:repeat(3,1fr); }
  .users{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  .nav-drop{ display:none; }
}
@media (max-width:760px){
  .principles{ grid-template-columns:1fr; gap:0; }
  .principle{ padding:20px 0; border-top:1px solid var(--line); }
  .principle:first-child{ border-top:none; padding-top:0; }
  .cards-2,.cards-3,.dimensions,.users{ grid-template-columns:1fr; }
  .subcard,.dimension{ padding:22px 22px; }
  .subnav-inner{ gap:20px; }
  .steps > li{ padding-left:46px; }
  .page-title{ font-size:clamp(28px,7vw,38px); }
}

@media print{
  .site-header,.drawer,.subnav,.hero-birds,.hero-bg{ display:none; }
}

/* About: open editorial spreads. All additions isolated from shared pages. */
.about-page .about-purpose{padding:68px 0 88px;}
.about-page .about-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:8px;align-items:center;}
.about-page .about-vision{grid-column:1/6;grid-row:1;align-self:center;padding-bottom:36px;}
.about-page .about-vision p,.about-page .about-mission p{font-size:21px;line-height:1.65;margin:22px 0 0;}
.about-page .about-art{margin:0;min-width:0;}
.about-page .about-art img{display:block;width:100%;height:auto;object-fit:contain;}
.about-page .about-art-main{grid-column:6/13;grid-row:1;}
.about-page .about-art-small{grid-column:1/6;grid-row:2;padding:10px 24px 0 0;}
.about-page .about-mission{grid-column:7/13;grid-row:2;padding:54px 0 20px;}
.about-page .about-text-link{display:inline-flex;align-items:center;gap:12px;font:600 14px/1.5 var(--sans);color:var(--teal);padding:12px 0 7px;margin-top:24px;border-bottom:1px solid var(--line-strong);}
.about-page .about-text-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s ease;}
.about-page .about-text-link:hover{border-color:var(--teal);}
.about-page .about-text-link:hover svg{transform:translateX(4px);}
.about-page .about-statement{background:var(--teal);color:var(--bg);padding:64px 0;}
.about-page .about-statement-inner{display:grid;grid-template-columns:1fr 4fr;gap:56px;align-items:start;}
.about-page .about-statement-mark{width:80px;height:80px;stroke:var(--sage);stroke-width:1.3;margin-top:8px;}

.about-page .about-statement ::selection{background:var(--gold);color:var(--teal-deep);}
.about-page .about-principles{padding:96px 0 104px;}
.about-page .about-principles-layout{display:grid;grid-template-columns:5fr 6fr;gap:76px;align-items:start;}
.about-page .about-principles-intro{position:sticky;top:160px;}
.about-page .about-principles-intro h2{text-wrap:balance;}
.about-page .about-principles-art{margin-top:30px;}
.about-page .about-principles-content{min-width:0;}
.about-page .about-controls{display:flex;justify-content:flex-end;min-height:42px;margin-bottom:12px;}
.about-page .about-expand{border:0;background:none;color:var(--teal);font:600 13px/1.5 var(--sans);padding:10px 0;text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
.about-page .about-expand[hidden]{display:none;}
.about-page .about-accordion{border-top:1px solid var(--line-strong);}
.about-page .about-principle{border-bottom:1px solid var(--line-strong);padding:0 0;transition:background .25s ease;}
.about-page .about-principle summary{display:flex;align-items:center;justify-content:space-between;gap:22px;list-style:none;padding:24px 12px 24px 0;cursor:pointer;color:var(--teal);}
.about-page .about-principle summary::-webkit-details-marker{display:none;}
.about-page .about-principle summary h3{font:700 18px/1.45 var(--sans);letter-spacing:-.02em;margin:0;}
.about-page .about-principle summary svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .28s ease;}
.about-page .about-principle[open] summary svg:last-child{transform:rotate(45deg);}
.about-page .about-principle[open] summary{padding-bottom:12px;}
.about-page .about-principle p{margin:0;padding:0 0 26px;font-size:17px;color:var(--text-soft);}
.about-page .about-principle summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.about-page .about-principle[open] p{animation:about-unfold .35s cubic-bezier(.16,1,.3,1);}
.about-page :is(summary,button,a):focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
@keyframes about-unfold{from{transform:translateY(-5px);opacity:.65;}to{transform:none;opacity:1;}}
@media(max-width:760px){
  .about-page .about-purpose{padding:42px 0 54px;}
  .about-page .about-spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;}
  .about-page .about-vision{grid-column:1/-1;grid-row:1;padding:0;}
  .about-page .about-art-main{grid-column:1/-1;grid-row:2;}
  .about-page .about-art-small{grid-column:1/-1;grid-row:4;padding:0;width:75%;margin-left:auto;}
  .about-page .about-mission{grid-column:1/-1;grid-row:3;padding:12px 0 0;}
  .about-page .about-vision p,.about-page .about-mission p{font-size:19px;margin-top:16px;}
  .about-page .about-statement{padding:44px 0;}
  .about-page .about-statement-inner{grid-template-columns:1fr;gap:22px;}
  .about-page .about-statement-mark{width:44px;height:44px;margin:0;}
  .about-page .about-principles{padding:54px 0 64px;}
  .about-page .about-principles-layout{grid-template-columns:1fr;gap:28px;}
  .about-page .about-principles-intro{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;}
  .about-page .about-principles-intro h2{font-size:var(--head-size);}
  .about-page .about-principles-art{margin:0;}
  .about-page .about-principle summary{padding-block:22px;}
  .about-page .about-principle summary h3{font-size:17px;}
  .about-page .about-controls{margin-bottom:8px;}
}
@media(prefers-reduced-motion:reduce){
  .about-page *,.about-page *::before,.about-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
@media print{
  .about-page .about-principles-intro{position:static;}
  .about-page .about-controls{display:none;}
  .about-page .about-principle::details-content{content-visibility:visible;}
}

/* About siblings: the approved editorial language, page-isolated. */

.why-page .editorial-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;}
.why-page .editorial-hero-copy{grid-column:1/8;}
.why-page .editorial-hero>.editorial-art{grid-column:8/13;}
.why-page .editorial-art{margin:0;min-width:0;}
.why-page .editorial-art img{display:block;width:100%;height:auto;}
.why-page .editorial-section{padding:76px 0;border-bottom:1px solid var(--line);}
.why-page .editorial-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start;}
.why-page .editorial-intro{grid-column:1/6;position:sticky;top:158px;}
.why-page .editorial-content{grid-column:7/13;min-width:0;}
.why-page .editorial-intro .section-title{margin-bottom:24px;text-wrap:balance;}
.why-page .editorial-intro p{font:18px/1.75 var(--serif);color:var(--text-soft);margin:0 0 20px;}
.why-page .editorial-intro .editorial-art{margin-top:30px;}
.why-page .prose{max-width:none;}
.why-page .editorial-controls{display:flex;justify-content:flex-end;margin-bottom:12px;}
.why-page .editorial-expand{background:none;border:0;padding:12px 0;color:var(--teal);font:600 13px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
.why-page .editorial-expand[hidden]{display:none;}
.why-page .editorial-accordion{border-top:1px solid var(--line-strong);}
.why-page .editorial-detail{border-bottom:1px solid var(--line-strong);}
.why-page .editorial-detail summary{display:flex;align-items:center;gap:18px;padding:24px 0;cursor:pointer;list-style:none;color:var(--teal);}
.why-page .editorial-detail summary::-webkit-details-marker{display:none;}
.why-page .editorial-detail summary h3{font:700 18px/1.45 var(--sans);letter-spacing:-.02em;margin:0;flex:1;}
.why-page .editorial-detail summary svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s ease;}
.why-page .editorial-detail[open] summary svg:last-child{transform:rotate(45deg);}
.why-page .editorial-detail summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.why-page .editorial-answer{padding:0 32px 28px 0;}
.why-page .editorial-answer p{font:17px/1.75 var(--serif);color:var(--text-soft);margin:0 0 16px;}
.why-page .editorial-answer ul{padding-left:22px;}
.why-page .editorial-answer li{margin:8px 0;font:16px/1.6 var(--serif);}
.why-page .editorial-answer .chip-list{display:block;margin:16px 0;}
.why-page .editorial-answer .chip-list li{background:none;border:0;border-radius:0;padding:0;color:var(--text-soft);}
.why-page .editorial-number{font:13px/1.5 var(--mono);color:var(--clay-text);}
.why-page .editorial-statement{padding:64px 0;background:var(--teal);color:white;}

.why-page .editorial-statement .section-title{color:white;margin-bottom:28px;}
.why-page .editorial-statement ::selection{background:var(--gold);color:var(--teal-deep);}
.why-page .doc-link{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.why-page .doc-link svg{flex:none;}
.why-page :is(summary,button,a):focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
@media(max-width:760px){
.why-page .editorial-hero{grid-template-columns:1fr;gap:24px;}
.why-page .editorial-hero-copy,.why-page .editorial-hero>.editorial-art{grid-column:1;}
.why-page .editorial-hero>.editorial-art{width:80%;justify-self:end;}
.why-page .editorial-section{padding:46px 0;}
.why-page .editorial-spread{grid-template-columns:1fr;gap:24px;}
.why-page .editorial-intro,.why-page .editorial-content{grid-column:1;position:static;}
.why-page .editorial-intro .editorial-art{width:75%;margin:24px 0 0 auto;}
.why-page .editorial-detail summary h3{font-size:17px;}
.why-page .editorial-answer{padding-right:0;}
.why-page .editorial-statement{padding:44px 0;}
}
@media(prefers-reduced-motion:reduce){.why-page *,.why-page *::before,.why-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.how-page .editorial-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;}
.how-page .editorial-hero-copy{grid-column:1/8;}
.how-page .editorial-hero>.editorial-art{grid-column:8/13;}
.how-page .editorial-art{margin:0;min-width:0;}
.how-page .editorial-art img{display:block;width:100%;height:auto;}
.how-page .editorial-section{padding:76px 0;border-bottom:1px solid var(--line);}
.how-page .editorial-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start;}
.how-page .editorial-intro{grid-column:1/6;position:sticky;top:158px;}
.how-page .editorial-content{grid-column:7/13;min-width:0;}
.how-page .editorial-intro .section-title{margin-bottom:24px;text-wrap:balance;}
.how-page .editorial-intro p{font:18px/1.75 var(--serif);color:var(--text-soft);margin:0 0 20px;}
.how-page .editorial-intro .editorial-art{margin-top:30px;}
.how-page .prose{max-width:none;}
.how-page .editorial-controls{display:flex;justify-content:flex-end;margin-bottom:12px;}
.how-page .editorial-expand{background:none;border:0;padding:12px 0;color:var(--teal);font:600 13px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
.how-page .editorial-expand[hidden]{display:none;}
.how-page .editorial-accordion{border-top:1px solid var(--line-strong);}
.how-page .editorial-detail{border-bottom:1px solid var(--line-strong);}
.how-page .editorial-detail summary{display:flex;align-items:center;gap:18px;padding:24px 0;cursor:pointer;list-style:none;color:var(--teal);}
.how-page .editorial-detail summary::-webkit-details-marker{display:none;}
.how-page .editorial-detail summary h3{font:700 18px/1.45 var(--sans);letter-spacing:-.02em;margin:0;flex:1;}
.how-page .editorial-detail summary svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s ease;}
.how-page .editorial-detail[open] summary svg:last-child{transform:rotate(45deg);}
.how-page .editorial-detail summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.how-page .editorial-answer{padding:0 32px 28px 0;}
.how-page .editorial-answer p{font:17px/1.75 var(--serif);color:var(--text-soft);margin:0 0 16px;}
.how-page .editorial-answer ul{padding-left:22px;}
.how-page .editorial-answer li{margin:8px 0;font:16px/1.6 var(--serif);}
.how-page .editorial-answer .chip-list{display:block;margin:16px 0;}
.how-page .editorial-answer .chip-list li{background:none;border:0;border-radius:0;padding:0;color:var(--text-soft);}
.how-page .editorial-number{font:13px/1.5 var(--mono);color:var(--clay-text);}
.how-page .editorial-statement{padding:64px 0;background:var(--teal);color:white;}

.how-page .editorial-statement .section-title{color:white;margin-bottom:28px;}
.how-page .editorial-statement ::selection{background:var(--gold);color:var(--teal-deep);}
.how-page .doc-link{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.how-page .doc-link svg{flex:none;}
.how-page :is(summary,button,a):focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
@media(max-width:760px){
.how-page .editorial-hero{grid-template-columns:1fr;gap:24px;}
.how-page .editorial-hero-copy,.how-page .editorial-hero>.editorial-art{grid-column:1;}
.how-page .editorial-hero>.editorial-art{width:80%;justify-self:end;}
.how-page .editorial-section{padding:46px 0;}
.how-page .editorial-spread{grid-template-columns:1fr;gap:24px;}
.how-page .editorial-intro,.how-page .editorial-content{grid-column:1;position:static;}
.how-page .editorial-intro .editorial-art{width:75%;margin:24px 0 0 auto;}
.how-page .editorial-detail summary h3{font-size:17px;}
.how-page .editorial-answer{padding-right:0;}
.how-page .editorial-statement{padding:44px 0;}
}
@media(prefers-reduced-motion:reduce){.how-page *,.how-page *::before,.how-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.tax-page .editorial-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;}
.tax-page .editorial-hero-copy{grid-column:1/8;}
.tax-page .editorial-hero>.editorial-art{grid-column:8/13;}
.tax-page .editorial-art{margin:0;min-width:0;}
.tax-page .editorial-art img{display:block;width:100%;height:auto;}
.tax-page .editorial-section{padding:76px 0;border-bottom:1px solid var(--line);}
.tax-page .editorial-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start;}
.tax-page .editorial-intro{grid-column:1/6;position:sticky;top:158px;}
.tax-page .editorial-content{grid-column:7/13;min-width:0;}
.tax-page .editorial-intro .section-title{margin-bottom:24px;text-wrap:balance;}
.tax-page .editorial-intro p{font:18px/1.75 var(--serif);color:var(--text-soft);margin:0 0 20px;}
.tax-page .editorial-intro .editorial-art{margin-top:30px;}
.tax-page .prose{max-width:none;}
.tax-page .editorial-controls{display:flex;justify-content:flex-end;margin-bottom:12px;}
.tax-page .editorial-expand{background:none;border:0;padding:12px 0;color:var(--teal);font:600 13px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
.tax-page .editorial-expand[hidden]{display:none;}
.tax-page .editorial-accordion{border-top:1px solid var(--line-strong);}
.tax-page .editorial-detail{border-bottom:1px solid var(--line-strong);}
.tax-page .editorial-detail summary{display:flex;align-items:center;gap:18px;padding:24px 0;cursor:pointer;list-style:none;color:var(--teal);}
.tax-page .editorial-detail summary::-webkit-details-marker{display:none;}
.tax-page .editorial-detail summary h3{font:700 18px/1.45 var(--sans);letter-spacing:-.02em;margin:0;flex:1;}
.tax-page .editorial-detail summary svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s ease;}
.tax-page .editorial-detail[open] summary svg:last-child{transform:rotate(45deg);}
.tax-page .editorial-detail summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.tax-page .editorial-answer{padding:0 32px 28px 0;}
.tax-page .editorial-answer p{font:17px/1.75 var(--serif);color:var(--text-soft);margin:0 0 16px;}
.tax-page .editorial-answer ul{padding-left:22px;}
.tax-page .editorial-answer li{margin:8px 0;font:16px/1.6 var(--serif);}
.tax-page .editorial-answer .chip-list{display:block;margin:16px 0;}
.tax-page .editorial-answer .chip-list li{background:none;border:0;border-radius:0;padding:0;color:var(--text-soft);}
.tax-page .editorial-number{font:13px/1.5 var(--mono);color:var(--clay-text);}
.tax-page .editorial-statement{padding:64px 0;background:var(--teal);color:white;}

.tax-page .editorial-statement .section-title{color:white;margin-bottom:28px;}
.tax-page .editorial-statement ::selection{background:var(--gold);color:var(--teal-deep);}
.tax-page .doc-link{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.tax-page .doc-link svg{flex:none;}
.tax-page :is(summary,button,a):focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
@media(max-width:760px){
.tax-page .editorial-hero{grid-template-columns:1fr;gap:24px;}
.tax-page .editorial-hero-copy,.tax-page .editorial-hero>.editorial-art{grid-column:1;}
.tax-page .editorial-hero>.editorial-art{width:80%;justify-self:end;}
.tax-page .editorial-section{padding:46px 0;}
.tax-page .editorial-spread{grid-template-columns:1fr;gap:24px;}
.tax-page .editorial-intro,.tax-page .editorial-content{grid-column:1;position:static;}
.tax-page .editorial-intro .editorial-art{width:75%;margin:24px 0 0 auto;}
.tax-page .editorial-detail summary h3{font-size:17px;}
.tax-page .editorial-answer{padding-right:0;}
.tax-page .editorial-statement{padding:44px 0;}
}
@media(prefers-reduced-motion:reduce){.tax-page *,.tax-page *::before,.tax-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.gov-page .editorial-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:center;}
.gov-page .editorial-hero-copy{grid-column:1/8;}
.gov-page .editorial-hero>.editorial-art{grid-column:8/13;}
.gov-page .editorial-art{margin:0;min-width:0;}
.gov-page .editorial-art img{display:block;width:100%;height:auto;}
.gov-page .editorial-section{padding:76px 0;border-bottom:1px solid var(--line);}
.gov-page .editorial-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start;}
.gov-page .editorial-intro{grid-column:1/6;position:sticky;top:158px;}
.gov-page .editorial-content{grid-column:7/13;min-width:0;}
.gov-page .editorial-intro .section-title{margin-bottom:24px;text-wrap:balance;}
.gov-page .editorial-intro p{font:18px/1.75 var(--serif);color:var(--text-soft);margin:0 0 20px;}
.gov-page .editorial-intro .editorial-art{margin-top:30px;}
.gov-page .prose{max-width:none;}
.gov-page .editorial-controls{display:flex;justify-content:flex-end;margin-bottom:12px;}
.gov-page .editorial-expand{background:none;border:0;padding:12px 0;color:var(--teal);font:600 13px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
.gov-page .editorial-expand[hidden]{display:none;}
.gov-page .editorial-accordion{border-top:1px solid var(--line-strong);}
.gov-page .editorial-detail{border-bottom:1px solid var(--line-strong);}
.gov-page .editorial-detail summary{display:flex;align-items:center;gap:18px;padding:24px 0;cursor:pointer;list-style:none;color:var(--teal);}
.gov-page .editorial-detail summary::-webkit-details-marker{display:none;}
.gov-page .editorial-detail summary h3{font:700 18px/1.45 var(--sans);letter-spacing:-.02em;margin:0;flex:1;}
.gov-page .editorial-detail summary svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s ease;}
.gov-page .editorial-detail[open] summary svg:last-child{transform:rotate(45deg);}
.gov-page .editorial-detail summary:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.gov-page .editorial-answer{padding:0 32px 28px 0;}
.gov-page .editorial-answer p{font:17px/1.75 var(--serif);color:var(--text-soft);margin:0 0 16px;}
.gov-page .editorial-answer ul{padding-left:22px;}
.gov-page .editorial-answer li{margin:8px 0;font:16px/1.6 var(--serif);}
.gov-page .editorial-answer .chip-list{display:block;margin:16px 0;}
.gov-page .editorial-answer .chip-list li{background:none;border:0;border-radius:0;padding:0;color:var(--text-soft);}
.gov-page .editorial-number{font:13px/1.5 var(--mono);color:var(--clay-text);}
.gov-page .editorial-statement{padding:64px 0;background:var(--teal);color:white;}

.gov-page .editorial-statement .section-title{color:white;margin-bottom:28px;}
.gov-page .editorial-statement ::selection{background:var(--gold);color:var(--teal-deep);}
.gov-page .doc-link{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.gov-page .doc-link svg{flex:none;}
.gov-page :is(summary,button,a):focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
@media(max-width:760px){
.gov-page .editorial-hero{grid-template-columns:1fr;gap:24px;}
.gov-page .editorial-hero-copy,.gov-page .editorial-hero>.editorial-art{grid-column:1;}
.gov-page .editorial-hero>.editorial-art{width:80%;justify-self:end;}
.gov-page .editorial-section{padding:46px 0;}
.gov-page .editorial-spread{grid-template-columns:1fr;gap:24px;}
.gov-page .editorial-intro,.gov-page .editorial-content{grid-column:1;position:static;}
.gov-page .editorial-intro .editorial-art{width:75%;margin:24px 0 0 auto;}
.gov-page .editorial-detail summary h3{font-size:17px;}
.gov-page .editorial-answer{padding-right:0;}
.gov-page .editorial-statement{padding:44px 0;}
}
@media(prefers-reduced-motion:reduce){.gov-page *,.gov-page *::before,.gov-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.why-page .outcome-2 .editorial-intro{grid-column:8/13;grid-row:1;}
.why-page .outcome-2 .editorial-content{grid-column:1/7;grid-row:1;}
.how-page .editorial-approaches>p{font-size:22px;margin-bottom:30px;}
.how-page .editorial-approaches>ul{display:grid;grid-template-columns:1fr 1fr;gap:60px;list-style:none;padding:0;}
.how-page .editorial-approaches>ul>li{border-top:1px solid var(--sage);padding-top:24px;font:21px/1.65 var(--serif);}
.how-page .path-1 .editorial-intro{grid-column:8/13;grid-row:1;}
.how-page .path-1 .editorial-content{grid-column:1/7;grid-row:1;}
.how-page .editorial-users{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:40px 0;}
.how-page .editorial-users .user{border:0;border-top:1px solid var(--line-strong);border-radius:0;background:none;padding:22px 0;box-shadow:none;}
.how-page .editorial-users h3{font:700 17px/1.5 var(--sans);color:var(--teal);margin-bottom:14px;}
.how-page .editorial-users p{font:16px/1.75 var(--serif);color:var(--text-soft);}
.tax-page .editorial-opening{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;}
.tax-page .editorial-opening p{grid-column:7/13;margin:0;font:18px/1.8 var(--serif);}
.tax-page .editorial-opening p:first-child{grid-column:1/6;grid-row:1/3;font-size:25px;line-height:1.6;color:var(--teal);}
.tax-page .editorial-reasons ul{list-style:none;margin:0;padding:0;}
.tax-page .editorial-reasons li{padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;}
.tax-page .editorial-relations .chip-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:0;}
.tax-page .editorial-relations .chip-list li{border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:none;padding:18px 0;font:15px/1.6 var(--sans);}
.tax-page .editorial-ending{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.tax-page .editorial-ending h2{margin-bottom:24px;}
.gov-page .editorial-register .chip-list,.gov-page .editorial-review .chip-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;counter-reset:area;margin:0;}
.gov-page .editorial-register .chip-list li,.gov-page .editorial-review .chip-list li{border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:none;padding:18px 0;font:15px/1.6 var(--sans);}
.gov-page .editorial-register .chip-list li::before{counter-increment:area;content:counter(area,decimal-leading-zero);display:block;font:11px/1.5 var(--mono);color:var(--clay-text);margin-bottom:8px;}
.gov-page .editorial-note{padding:0 0 64px;}
.gov-page .editorial-note .callout{border:1px dashed var(--line-strong);background:var(--bg-soft);padding:24px;}
@media(max-width:760px){
.why-page .outcome-2 .editorial-intro,.why-page .outcome-2 .editorial-content,.how-page .path-1 .editorial-intro,.how-page .path-1 .editorial-content{grid-column:1;grid-row:auto;}
.how-page .editorial-approaches>ul,.how-page .editorial-users,.tax-page .editorial-ending{grid-template-columns:1fr;gap:24px;}
.tax-page .editorial-opening{grid-template-columns:1fr;}
.tax-page .editorial-opening p,.tax-page .editorial-opening p:first-child{grid-column:1;grid-row:auto;}
.tax-page .editorial-opening p:first-child{font-size:22px;}
}

/* ═══ HOW-IT-WORKS · section pass ═══ */

/* BOTH approach sections now share one column ratio: a narrow heading rail
   (3) beside a wide content column (7), instead of the previous near-even
   5/6 split — and Bottom-Up no longer mirrors Top-Down. */
.how-page .editorial-spread{ grid-template-columns:3fr 7fr; gap:56px; }
.how-page .editorial-intro,
.how-page .editorial-content{ grid-column:auto; }
.how-page .path-1 .editorial-intro,
.how-page .path-1 .editorial-content{ grid-column:auto; grid-row:auto; }

/* the framing line above the two approaches runs the full measure */
.how-page .editorial-approaches>p{ max-width:none; }

/* ── icon lists: the accordions used plain bullets, these carry a mark per line ── */
.how-page .icon-list{ list-style:none; margin:20px 0 22px; padding:0; display:grid; gap:13px; }
.how-page .icon-list li{
  display:flex; align-items:flex-start; gap:13px; margin:0;
  font:16px/1.6 var(--serif); color:var(--text-soft);
}
.how-page .li-icon{
  width:19px; height:19px; flex:none; margin-top:3px;
  fill:none; stroke:var(--teal); stroke-width:1.55;
  stroke-linecap:round; stroke-linejoin:round; opacity:.82;
}

/* ── the six user cards get a mark each ── */
.how-page .editorial-users .user-icon{
  width:26px; height:26px; display:block; margin-bottom:16px;
  fill:none; stroke:var(--teal); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.how-page .editorial-users .user{ padding-top:24px; }

/* ── closing tagline: display type, not a paragraph ── */
.how-page .editorial-statement{ padding:clamp(72px,9vw,132px) 0; }
.how-page .statement-layout{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(24px,3.6vw,56px); row-gap:0; align-items:start;
}
.how-page .statement-mark{
  width:clamp(38px,3.4vw,54px); height:clamp(38px,3.4vw,54px);
  display:block; fill:none; stroke:var(--sage); stroke-width:1.3; opacity:.9;
}
.how-page .editorial-statement p.statement-big{
  font-family:var(--sans); font-weight:800; letter-spacing:-.045em;
  font-size:clamp(36px,5.4vw,74px); line-height:1.02;
  color:#fff; margin:0; max-width:none; text-wrap:balance;
}
.how-page .statement-big em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:0; color:var(--sage);
}
.how-page .editorial-statement p.statement-support{
  grid-column:2; margin:clamp(22px,2.6vw,38px) 0 0; max-width:none;
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--mono); font-size:12.5px; line-height:1.6;
  letter-spacing:.085em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

@media (max-width:980px){
  .how-page .editorial-spread{ grid-template-columns:1fr; gap:34px; }
  .how-page .statement-layout{ grid-template-columns:1fr; }
  .how-page .editorial-statement p.statement-support{ grid-column:1; }
  .how-page .statement-mark{ margin-bottom:22px; }
}

/* ═══ CLOSING STATEMENT BANDS ═══
   One display treatment across the About set: a mark, the claim at poster scale,
   and the supporting clause in mono. Every line is client wording. */
.statement-layout{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(24px,3.6vw,56px); align-items:start; }
.statement-mark{ width:clamp(38px,3.4vw,54px); height:clamp(38px,3.4vw,54px); display:block; flex:none;
  fill:none; stroke:var(--sage); stroke-width:1.3; opacity:.9; }
.statement-body{ grid-column:2; min-width:0; }
.statement-eyebrow{ margin:0 0 20px; font:500 12px/1.5 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.62); }

.about-page .about-statement p.statement-big,
.why-page .editorial-statement p.statement-big,
.tax-page .editorial-statement p.statement-big,
.gov-page .editorial-statement p.statement-big{
  font-family:var(--sans); font-weight:800; letter-spacing:-.045em; font-size:clamp(30px,4.4vw,62px);
  line-height:1.05; color:#fff; margin:0; max-width:none; text-wrap:balance; }

.about-page .about-statement p.statement-support,
.why-page .editorial-statement p.statement-support,
.tax-page .editorial-statement p.statement-support,
.gov-page .editorial-statement p.statement-support{
  grid-column:2; margin:clamp(20px,2.4vw,34px) 0 0; max-width:none;
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--mono); font-size:12.5px; line-height:1.6; letter-spacing:.085em;
  text-transform:uppercase; color:rgba(255,255,255,.62); }
.statement-body .statement-big, .statement-body .statement-support{ grid-column:auto; }
.about-page .about-statement{ padding:clamp(56px,7vw,100px) 0; }

/* ═══ A MARK PER LINE in the taxonomy and governance accordions ═══ */
.tax-page .icon-list, .gov-page .icon-list{ list-style:none; margin:20px 0 22px; padding:0; display:grid; gap:12px; }
.tax-page .icon-list li, .gov-page .icon-list li{ display:flex; align-items:flex-start; gap:13px; margin:0;
  font:16px/1.6 var(--serif); color:var(--text-soft); }
.tax-page .li-icon, .gov-page .li-icon{ width:19px; height:19px; flex:none; margin-top:3px;
  fill:none; stroke:var(--teal); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
.why-page .group-icon, .tax-page .group-icon, .gov-page .group-icon, .about-page .principle-icon{ opacity:.72; }

/* ═══ ABOUT HERO joins the editorial grid its siblings already use ═══ */
.about-page .editorial-hero{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:28px; align-items:center; }
.about-page .editorial-hero-copy{ grid-column:1/8; min-width:0; }
.about-page .editorial-hero>.editorial-art{ grid-column:8/13; margin:0; min-width:0; }
.about-page .editorial-hero>.editorial-art img{ display:block; width:100%; height:auto; }
.about-page .about-principle summary h3{ flex:1; max-width:none; }

@media (max-width:980px){
  .about-page .editorial-hero-copy, .about-page .editorial-hero>.editorial-art{ grid-column:1; }
  .statement-layout{ grid-template-columns:1fr; row-gap:20px; }
  .statement-mark{ margin-bottom:4px; }
  .statement-body{ grid-column:1; }
  .about-page .about-statement p.statement-support,
  .why-page .editorial-statement p.statement-support,
  .tax-page .editorial-statement p.statement-support,
  .gov-page .editorial-statement p.statement-support{ grid-column:1; margin-top:16px; }
}

/* ═══ THE COMMONS — browse surface ═══ */
.commons-page .commons-search{ display:flex; align-items:center; gap:12px; max-width:100%;
  border:1.5px solid var(--teal); border-radius:10px; padding:9px 9px 9px 20px; background:#fff; transition:box-shadow .3s ease; }
.commons-page .commons-search:focus-within{ box-shadow:0 0 0 4px rgba(20,82,74,.09); }
.commons-page .commons-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent;
  font-family:var(--sans); font-size:15.5px; color:var(--text); padding-block:8px; }
.commons-page .commons-search input::placeholder{ color:#8A9793; }
.commons-page .filter-label{ margin:0 0 12px; font:500 11.5px/1.5 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--clay-text); }
.commons-page .results-head{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:30px; }
.commons-page .results-count{ margin:0; font-family:var(--sans); font-size:15px; color:var(--text-soft); }
.commons-page .results-count strong{ font-weight:700; color:var(--teal); }
.commons-page .results-sort{ display:inline-flex; align-items:center; gap:10px; font:500 11.5px/1.5 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.commons-page .results-sort select{ font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none;
  color:var(--text); background:#fff; border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px; }
.commons-page .tradition-name, .commons-page .meta{ display:block; }
.commons-page .pager{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line-strong); }
.commons-page .pager-link{ font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--teal); }
.commons-page .pager-link.is-off{ color:var(--line-strong); }
.commons-page .pager-num{ font:400 12px/1.5 var(--mono); letter-spacing:.04em; color:var(--text-soft); }

.legal-page .prose h2.section-title{ margin-bottom:16px; }
.legal-page .prose p + p{ margin-top:16px; }

@media (max-width:980px){
  .commons-page .results-head{ margin-bottom:24px; }
}
@media (max-width:760px){
}

/* ═══ KNOWLEDGE GRAPH ═══ */
.kg-page .kg-figure{ margin:0; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:clamp(18px,2.6vw,38px); box-shadow:var(--shadow-card); }
.kg-page .kg-figure svg{ display:block; width:100%; height:auto; }
.kg-page .kg-caption{ margin:22px 0 0; font:400 11.5px/1.6 var(--mono); color:var(--text-soft); }
.kg-page .kg-link{ stroke:var(--line-strong); stroke-width:1.4; }
.kg-page .kg-node text{ font-family:var(--sans); font-size:13px; font-weight:600; text-anchor:middle; }
.kg-page .kg-t circle{ fill:var(--teal); stroke:none; }
.kg-page .kg-t text{ fill:var(--teal-deep); }
.kg-page .kg-p circle{ fill:#fff; stroke:var(--sage); stroke-width:2.4; }
.kg-page .kg-p text{ fill:var(--teal); }
.kg-page .kg-r circle{ fill:var(--clay); stroke:none; }
.kg-page .kg-r text{ fill:var(--clay-text); font-size:11.5px; font-weight:500; }
.kg-page .kg-label{ font-family:var(--mono); font-size:10px; fill:var(--text-soft); text-anchor:middle; }
.kg-page .kg-chips{ margin-top:26px; }

/* == WIDTH SYSTEM: one content column for the whole site ==
   Every band, the hero included, starts on the same left edge as the footer and
   fills the same 1056px column. Text width comes from the column, not from
   per-block character caps, because uneven block widths read as mistakes. */
.statement-layout, .how-page .statement-layout{ display:block; }
.statement-mark{ margin-bottom:clamp(20px,2.4vw,34px); }
.gov-page .editorial-governance .editorial-controls,
.gov-page .editorial-governance .editorial-accordion{ max-width:none; }

/* the hero shares the site column — kept as a hook, it has no width of its own */
.page-hero-inner{ max-width:var(--wrap); }

/* == ABOUT SET: one column ratio everywhere ==
   A 3-wide heading rail beside 7-wide content, same as How It Works. The old
   12-col spreads put the rail at 5/12; the mirrored 'outcome-2' section is reset
   so every section heading starts on the same left edge. */
.why-page .editorial-spread,
.tax-page .editorial-spread,
.gov-page .editorial-spread,
.about-page .about-principles-layout{ grid-template-columns:3fr 7fr; gap:56px; }
.why-page .editorial-intro, .why-page .editorial-content,
.tax-page .editorial-intro, .tax-page .editorial-content,
.gov-page .editorial-intro, .gov-page .editorial-content{ grid-column:auto; }
.why-page .outcome-2 .editorial-intro,
.why-page .outcome-2 .editorial-content{ grid-column:auto; grid-row:auto; }
/* Vision + Mission keep their own asymmetric spread — the 3/7 rail suits a
   heading over content, not a vision/mission pairing, so these two are
   deliberately left on the original 12-column arrangement. */
@media (max-width:980px){
  .why-page .editorial-spread, .tax-page .editorial-spread, .gov-page .editorial-spread,
  .about-page .about-principles-layout{ grid-template-columns:1fr; gap:32px; }
}

/* == WHY-IT-MATTERS: lede + illustration live in the content column ==
   The rail keeps only the heading; the section lede and its illustration sit
   above the accordion toggle in the 7-wide column. */
.why-page .editorial-content > .section-sub:first-child{ margin-top:0; }
.why-page .editorial-content > .section-sub + .section-sub{ margin-top:14px; }
.why-page .editorial-content .editorial-art{ margin:28px 0 34px; }

/* == ABOUT SET: the rail holds only the heading ==
   On Why It Matters / How It Works / Taxonomy / Governance / About the lede,
   the prose and the illustration all live in the content column now, so the
   vertical rhythm those blocks used to get from the rail is set here instead. */
.editorial-content > :first-child,
.about-principles-content > :first-child{ margin-top:0; }
.editorial-content > .editorial-art,
.editorial-content > p + .editorial-art,
.editorial-content > .prose + .editorial-art,
.about-principles-content > .editorial-art{ margin:26px 0 32px; }
.editorial-content > .editorial-art:first-child,
.about-principles-content > .editorial-art:first-child{ margin-top:0; }

/* == LIST COLUMNS — a short, balanced list uses the width it has ==
   Column count is MEASURED, never guessed: the item count, the widest item's
   natural single-line width and the available column width decide it. `data-cols`
   is set only where EVERY item still fits on one line, so nothing wraps
   mid-phrase into an orphan. Long or unbalanced lists stay stacked on purpose. */
.icon-list[data-cols]{ display:block; column-gap:44px; }
.icon-list[data-cols="2"]{ column-count:2; }
.icon-list[data-cols="3"]{ column-count:3; }
.icon-list[data-cols] > li{ break-inside:avoid-column; margin:0 0 13px; }
.icon-list[data-cols] > li:last-child{ margin-bottom:0; }
@media (max-width:820px){ .icon-list[data-cols]{ column-count:1; } }

/* ═══ A GLIMPSE INTO THE COMMONS — the index wall ═══
   Doc 82 asks for five sample entries. Five equal tiles would say "we have
   content"; this says what the commons IS instead: one entry opened as a full
   record, four more waiting in the index beside it — and all five drawn at
   random from the six in #glimpseData on every load, so the section is a
   working sample rather than a picture of one. */
/* white ground (Fido's call, 2026-09-19): the cards carry their own border +
   shadow, so the section reads on white and joins the hero above it */
.traditions{ padding:88px 0 100px; background:var(--bg); }

.glimpse-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }

.glimpse-bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:34px 0 26px; padding-top:20px; border-top:1px solid var(--line-strong);
}
.glimpse-draw{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14.5px; line-height:1; color:var(--teal);
  background:#fff; border:1px solid var(--line-strong); border-radius:8px; padding:12px 18px;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.glimpse-draw svg{
  width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.glimpse-draw:hover{ border-color:var(--teal); box-shadow:var(--shadow-card); transform:translateY(-1px); }
.glimpse-draw:active{ transform:translateY(0); }

.glimpse-status{
  margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}

/* the wall — one open record, four in the index */
.glimpse-wall{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:28px; align-items:stretch;
}

.glimpse-feature{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-card);
}
.glimpse-feature:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.glimpse-art{ position:relative; }
.glimpse-art .ph{ border-radius:0; }
.glimpse-no{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); background:rgba(255,255,255,.94); border:1px solid var(--line);
  border-radius:99px; padding:6px 12px;
}
.glimpse-body{ display:flex; flex-direction:column; padding:26px 30px 28px; }

.glimpse-name{
  font-family:var(--sans); font-weight:800; font-size:clamp(23px,2.1vw,29px);
  letter-spacing:-.03em; line-height:1.12; color:var(--teal); margin:12px 0 4px;
}
.glimpse-kicker{ margin:0 0 14px; font-family:var(--serif); font-size:18px; color:var(--text-soft); }
.glimpse-desc{ margin:0 0 24px; color:var(--text); }

/* the record: the taxonomy dimensions the entry actually carries */
.glimpse-record{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 30px;
  margin:0 0 24px; padding-top:22px; border-top:1px solid var(--line);
}
.glimpse-field{ min-width:0; }
.glimpse-field dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-soft); margin:0 0 7px;
}
.glimpse-field dd{ margin:0; font-family:var(--sans); font-size:14.5px; color:var(--text); }

/* evidence stays two scales — clinical and cultural are peers, never merged */
.tier{ display:inline-flex; align-items:center; gap:4px; }
.tier-dot{ width:7px; height:7px; border-radius:50%; border:1px solid var(--line-strong); }
.tier--clinical .tier-dot.is-on{ background:var(--teal); border-color:var(--teal); }
.tier--culture .tier-dot.is-on{ background:var(--clay); border-color:var(--clay); }
.tier-none{ font-family:var(--mono); font-size:12px; color:var(--text-soft); }

.glimpse-foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
}
.glimpse-licence{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-soft);
}

/* the index — the rest of the draw */
.glimpse-side{ display:flex; flex-direction:column; }
.glimpse-panel{
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-card);
}
.glimpse-side-label{
  margin:0; padding:15px 22px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--clay-text);
}
.glimpse-index{ flex:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.glimpse-index li{ display:flex; flex:1; }
.glimpse-index li + li .glimpse-row{ border-top:1px solid var(--line); }
.glimpse-row{
  position:relative; flex:1; width:100%; display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto; gap:18px;
  padding:16px 20px 16px 22px; background:none; border:0; font:inherit; text-align:left; cursor:pointer;
  transition:background .28s ease;
}
.glimpse-row:hover{ background:var(--bg-soft); }
.glimpse-row:focus-visible{ outline-offset:-3px; }
.glimpse-row-thumb{
  width:156px; aspect-ratio:16/10; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:#fff;
}
.glimpse-row-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.glimpse-row-text{ min-width:0; display:block; }
.glimpse-row-name{
  display:block; font-family:var(--sans); font-weight:700; font-size:18px;
  letter-spacing:-.02em; color:var(--teal);
}
.glimpse-row-meta{
  display:block; margin-top:5px; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}
.glimpse-row-no{
  display:block; margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-soft); font-variant-numeric:tabular-nums;
}
/* the row says what it does on hover — it opens that record in the card */
.glimpse-row-go{
  width:17px; height:17px; display:grid; place-items:center; color:var(--sage);
  opacity:0; transform:translateX(-5px);
  transition:opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), color .28s ease;
}
.glimpse-row-go svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.glimpse-row:hover .glimpse-row-go,
.glimpse-row:focus-visible .glimpse-row-go{ opacity:1; transform:translateX(0); }
.glimpse-row:hover .glimpse-row-go{ color:var(--teal); }
.glimpse-note{
  margin:0; padding:16px 22px; border-top:1px solid var(--line); background:var(--bg-soft);
  font-size:14.5px; line-height:1.55; color:var(--text-soft);
}

@media (max-width:1080px){
  .glimpse-wall{ grid-template-columns:1fr; gap:24px; }
  .glimpse-index li{ flex:1 1 auto; }
}
/* 761–1080: the record turns into a media card. A full-width 16:10 artwork up
   here is mostly its own white margin, and the record reads better beside it. */
@media (min-width:761px) and (max-width:1080px){
  .glimpse-feature{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); align-items:stretch; }
  .glimpse-art .ph{ aspect-ratio:auto; height:100%; min-height:300px; }
  .glimpse-body{ padding:26px 30px 26px 28px; }
}
@media (max-width:760px){
  .traditions{ padding:64px 0 74px; }
  .glimpse-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .glimpse-bar{ margin:24px 0 20px; }
  .glimpse-body{ padding:22px 20px 24px; }
  .glimpse-record{ grid-template-columns:1fr; gap:18px; }
  .glimpse-row{ gap:14px; padding:14px 16px 14px 18px; }
  .glimpse-row-thumb{ width:104px; }
  .glimpse-row-name{ font-size:16.5px; }
  .glimpse-row-meta{ font-size:11px; }
  .glimpse-draw{ flex:1 1 100%; justify-content:center; }
  .glimpse-status{ flex:1 1 100%; }
}

/* ═══ ENTRY OF THE WEEK — an unboxed reading spread ═══
   Glimpse is a working index; this is one practice read slowly. No card, no
   taxonomy grid (that belongs to Glimpse) and no hatched placeholder: the art is
   a real illustration with a transparent ground, so it sits on the tinted band
   and bleeds like the hero art does. */
.entry-week.entry-spread{ padding:92px 0 96px; background:var(--bg-soft); }

.spread-head{ display:flex; align-items:baseline; justify-content:space-between; gap:28px; }
.spread-head .meta{ flex:none; }

.spread-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px; align-items:start; margin-top:34px;
}
.spread-body{ margin:0 0 26px; font-size:18px; color:var(--text); }

/* a native disclosure: describing a practice is not recommending it */
.spread-more{
  margin:0 0 26px; padding:6px 0;
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
}
.spread-more summary{
  display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--teal);
  list-style:none; transition:color .25s ease;
}
.spread-more summary::-webkit-details-marker{ display:none; }
.spread-more summary:hover{ color:var(--teal-deep); }
.spread-more summary:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.spread-more summary::after{
  content:""; width:9px; height:9px; margin-left:auto; margin-right:4px; flex:none;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.spread-more[open] summary::after{ transform:rotate(-135deg) translateY(-1px); }
.spread-more p{ margin:14px 0 16px; font-size:16.5px; color:var(--text-soft); }

.spread-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.spread-art{ margin:0; }
.spread-art img{ display:block; width:100%; height:auto; }

/* On the tinted band --clay-text (#A85F33) measures 4.49:1 — a rounding miss.
   These two small pieces take a hair more depth here (5.0:1); the brand token
   itself is untouched everywhere else. */
.entry-spread .eyebrow,
.entry-spread .meta--clay{ color:#9F572B; }

@media (max-width:1080px){
  .spread-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .spread-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:760px){
  .entry-week.entry-spread{ padding:64px 0 70px; }
  .spread-grid{ grid-template-columns:1fr; gap:26px; margin-top:24px; }
  .spread-body{ font-size:17px; }
  .spread-art{ order:-1; }
  .spread-foot{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACROSS TIME — chronological ribbon of six sample practices
   Delta: timeline.css. Appended to the end of styles.css, so it also overrides the
   old .timeline-sec ground / padding and is scoped to this section only: every
   selector below starts with .timeline-sec or .time-ribbon / .time-*.
   Type is never conveyed by colour alone — every event carries its written
   "Practice period" / "Documentation period" label.
   ═════════════════════════════════════════════════════════════════════════════ */

.timeline-sec{
  background:var(--bg);          /* white leads — the ribbon stands on its own */
  padding:96px 0;
}

/* hidden must beat any layout rule we set on the same node */
.timeline-sec [hidden]{ display:none !important; }

/* ── intro copy ── */
.timeline-sec .time-lede{
  margin:14px 0 0; font-size:17px; color:var(--text-soft);
}
.timeline-sec .time-note{
  margin:30px 0 0; font-size:15.5px; line-height:1.6; color:var(--text-soft);
}

/* ── controls: real radios, styled as underline choices ── */
.timeline-sec .time-filters{
  border:0; margin:26px 0 0; padding:0; min-inline-size:0;
}
.timeline-sec .time-filters legend{
  padding:0; margin:0 0 6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-soft);
}
.timeline-sec .time-filter{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding-right:26px; margin:0;
  font-family:var(--sans); font-weight:600; font-size:15px; color:var(--text-soft);
  cursor:pointer;
}
.timeline-sec .time-filter input{
  appearance:none; -webkit-appearance:none; width:14px; height:14px; margin:0;
  border:1.5px solid var(--line-strong); border-radius:50%; background:#fff;
  display:grid; place-items:center; cursor:pointer; transition:border-color .2s ease;
}
.timeline-sec .time-filter input::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--teal);
  transform:scale(0); transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.timeline-sec .time-filter input:checked{ border-color:var(--teal); }
.timeline-sec .time-filter input:checked::after{ transform:scale(1); }
.timeline-sec .time-filter:hover input{ border-color:var(--sage); }
.timeline-sec .time-filter span{
  text-decoration-line:underline; text-decoration-color:transparent;
  text-decoration-thickness:2px; text-underline-offset:5px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.timeline-sec .time-filter:hover span{ color:var(--teal); }
.timeline-sec .time-filter input:checked + span{
  color:var(--teal); text-decoration-color:var(--teal);
}
.timeline-sec .time-filter input:focus-visible{
  outline:2px solid var(--teal-deep); outline-offset:3px;
}

.timeline-sec .time-status{
  margin:12px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft);
}

/* ── the ribbon ── */
.timeline-sec .time-axis{
  position:relative; margin-top:44px;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) auto;
  align-items:start;
}
/* the axis rule runs from the first dot to the "Today" end marker */
.timeline-sec .time-rule{
  position:absolute; left:4px; right:4px; top:4px; height:1px;
  background:var(--line-strong); border-radius:1px; transform-origin:left center;
}
.timeline-sec .time-sequence{
  grid-column:1 / 7;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  margin:0; padding:0; list-style:none;
}
/* explicit tracks: a filtered-out event leaves its position empty, so the
   practices that remain stay where they are on the axis instead of sliding left */
.timeline-sec .time-event:nth-child(1){ grid-column:1; }
.timeline-sec .time-event:nth-child(2){ grid-column:2; }
.timeline-sec .time-event:nth-child(3){ grid-column:3; }
.timeline-sec .time-event:nth-child(4){ grid-column:4; }
.timeline-sec .time-event:nth-child(5){ grid-column:5; }
.timeline-sec .time-event:nth-child(6){ grid-column:6; }

.timeline-sec .time-event{
  position:relative; min-width:0; padding:30px 22px 0 0;
}
.timeline-sec .time-event::before{          /* decorative dot, one per event */
  content:""; position:absolute; top:0; left:0;
  width:9px; height:9px; border-radius:50%; background:var(--teal);
}

.timeline-sec .time-date{
  margin:0; min-height:2.9em;               /* two date lines, so the names align */
  font-family:var(--mono); font-size:11.5px; line-height:1.45; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal);
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
}
.timeline-sec .time-name{
  margin:8px 0 0;
  font-family:var(--sans); font-weight:700; font-size:18px; line-height:1.3;
  letter-spacing:-.02em; color:var(--teal);
}
.timeline-sec .time-kind{
  margin:8px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-soft);
}

/* the axis end marker — not a practice event */
.timeline-sec .time-now{
  grid-column:7; position:relative; margin:0; padding:30px 0 0 24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); text-align:right; white-space:nowrap;
}
.timeline-sec .time-now::after{
  content:""; position:absolute; top:0; right:0;
  width:9px; height:9px; border-radius:50%; background:var(--clay);
}

.timeline-sec .link-more{ margin-top:32px; }
.timeline-sec .link-more:focus-visible{
  outline:2px solid var(--teal-deep); outline-offset:4px;
}

/* ── ≤1080px: two columns of events, no connecting rail ── */
@media (max-width:1080px){
  .timeline-sec .time-axis{ display:block; margin-top:40px; }
  .timeline-sec .time-rule{ display:none; }
  .timeline-sec .time-sequence{
    grid-column:auto; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px; row-gap:26px;
  }
  .timeline-sec .time-sequence .time-event:nth-child(n){ grid-column:auto; }
  .timeline-sec .time-event{
    padding:16px 0 0; border-top:1px solid var(--line);
  }
  .timeline-sec .time-event::before{ display:none; }
  .timeline-sec .time-date{ min-height:0; }
  .timeline-sec .time-now{
    grid-column:auto; margin-top:26px; padding:0;
  }
  .timeline-sec .time-now::after{ display:none; }
  .timeline-sec .time-now::before{
    content:""; display:inline-block; width:22px; height:1px;
    background:var(--line-strong); vertical-align:middle; margin-right:10px;
  }
}

/* ── ≤760px: one chronological column, no horizontal overflow ── */
@media (max-width:760px){
  .timeline-sec{ padding:64px 0; }
  .timeline-sec .time-sequence{ grid-template-columns:minmax(0,1fr); }
  .timeline-sec .time-now{ margin-top:22px; }
  .timeline-sec .link-more{ margin-top:26px; }
}

/* ═══ OPEN BY DESIGN — the principles register (delta) ═══ */
/* Display token at the brief's value, scoped to this section (plan §2 trap note).
   Harmless if the parent already defines it on the four scoped section roots. */
/* every display heading on the page shares the :root --head-size token — a
   section must never reintroduce its own clamp (client rule, HANDOFF §3a) */

/* ground + air — declared on both classes so it wins over the old .open-design rule */
.open-design.open-register{ background:var(--bg-soft); padding:96px 0; }

/* lede: plain body serif, no measure cap — the column is the measure */
.open-register .open-lede{
  font-family:var(--serif); font-size:17px; line-height:1.62;
  color:var(--text-soft); margin:14px 0 0;
}

/* the register: one stacked column of two-track rows — name opposite its meaning */
.open-register .open-rows{ margin-top:44px; }

.open-register .open-row{
  display:grid;
  grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:48px;
  padding:30px 0;
  border-top:1px solid var(--line-strong);
}
/* the register closes with a rule under the last row */
.open-register .open-row:last-child{ border-bottom:1px solid var(--line-strong); }

/* card-scale Manrope, deliberately NOT the display token; no numbering, no icon */
.open-register .open-name{
  font-family:var(--sans); font-weight:800; font-size:clamp(20px,1.7vw,24px);
  line-height:1.2; letter-spacing:-.025em; color:var(--teal); margin:0;
}

/* meaning fills its column; no cap, no decoration */
.open-register .open-meaning{
  font-family:var(--serif); font-size:17px; line-height:1.65;
  color:var(--text-soft); margin:0;
}

/* the one affordance: the route into governance. Teal, not --clay-text:
   #A85F33 on --bg-soft measures 4.49:1, under the 4.5:1 body minimum. */
.open-register .link-more{ margin-top:34px; color:var(--teal); }
.open-register .link-more:hover{ text-decoration:underline; text-underline-offset:3px; }
.open-register .link-more:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

@media (max-width:1080px){
  .open-register .open-row{ gap:32px; }
}

@media (max-width:760px){
  .open-design.open-register{ padding:64px 0; }
  .open-register .open-rows{ margin-top:36px; }
  .open-register .open-row{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:24px 0;
  }
  .open-register .link-more{ margin-top:28px; }
}

/* ═══ COLLECTIVE EFFORT — four ways into one commons (delta, appended to styles.css) ═══
   Replaces the old centred .cta-band CTA with a left-aligned partnership directory.
   Every selector is scoped to .cta-band / .collective-close: nothing else is restyled.
   Ground stays --teal (NOT --teal-deep) so the deep-teal footer stays a separate surface. */

.cta-band.collective-close{
  /* the display heading uses the :root --head-size token like every other
     section on the page (client rule, HANDOFF §3a) */
  background: var(--teal);
  color: #fff;
  padding: 96px 0;           /* 96px of air before the deep-teal footer */
}

/* ── composition: left-aligned directory, not a centred CTA ── */
.collective-close .cta-inner{ text-align: left; }

.collective-close .cta-title{ margin: 0; }

.collective-close .cta-sub{
  margin: 14px 0 40px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.86);   /* ≈6.8:1 on #14524A */
}

/* ── the four routes: CSS columns, each route a full-width link row ── */
.collective-close .collective-routes{
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  column-gap: 56px;
}
.collective-close .collective-routes[data-cols="2"]{ column-count: 2; }
.collective-close .collective-routes > li{ break-inside: avoid-column; }

.collective-close .collective-routes a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  transition: border-color .22s ease;
}
/* last row of each column (2 columns × 4 routes → even items) closes with a rule */
.collective-close .collective-routes > li:nth-child(even) a{
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.collective-close .collective-route-name{ min-width: 0; }

/* the arrow is the affordance — it slides, there is no 3px absolute stripe */
.collective-close .collective-route-go{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.8);
  transition: transform .22s cubic-bezier(.16,1,.3,1), color .22s ease;
}
.collective-close .collective-route-go svg{
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* hover / focus: gold underline on the label + arrow slides 4px right */
.collective-close .collective-routes a:hover{ border-top-color: rgba(255,255,255,.42); }
.collective-close .collective-routes a:hover .collective-route-name,
.collective-close .collective-routes a:focus-visible .collective-route-name{
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.collective-close .collective-routes a:hover .collective-route-go,
.collective-close .collective-routes a:focus-visible .collective-route-go{
  transform: translateX(4px);
  color: var(--gold);
}

/* focus on the teal field: the global teal outline is invisible here */
.collective-close .collective-routes a:focus-visible,
.collective-close .cta-actions .btn:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── the two existing invitations, left-aligned with the title ── */
.collective-close .cta-actions{
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 40px;
}

/* ── licence line: quiet mono, no rule of its own (the routes carry the structure) ── */
.collective-close .collective-licence{
  margin: 0;
  border: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.76);   /* ≈5.9:1 on #14524A — matches .meta scale */
}

/* ── ≤1080px: still two columns ── */
@media (max-width:1080px){
  .cta-band.collective-close{ padding: 96px 0; }
  .collective-close .collective-routes{ column-gap: 40px; }
  .collective-close .collective-routes[data-cols="2"]{ column-count: 2; }
}

/* ── ≤760px: one column, full-width stacked buttons, 64px padding ── */
@media (max-width:760px){
  .cta-band.collective-close{ padding: 64px 0; }
  .collective-close .collective-routes{ margin-bottom: 36px; }
  .collective-close .collective-routes[data-cols="2"]{ column-count: 1; }
  /* one column: only the final row closes the list */
  .collective-close .collective-routes > li:nth-child(even) a{ border-bottom: 0; }
  .collective-close .collective-routes > li:last-child a{
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .collective-close .cta-actions{ flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 32px; }
  .collective-close .cta-actions .btn{ width: 100%; }
}

/* ── reduced motion: no sliding arrow, no inherited button lift ── */
@media (prefers-reduced-motion: reduce){
  .collective-close .collective-routes a,
  .collective-close .collective-route-go,
  .collective-close .cta-actions .btn{ transition: none; }
  .collective-close .collective-routes a:hover .collective-route-go,
  .collective-close .collective-routes a:focus-visible .collective-route-go{ transform: none; }
  .collective-close .cta-actions .btn:hover{ transform: none; }
}

/* ═══ THE COMMONS — EXPLORE BY REGION (map view) ═══ */
.commons-page .map-sec{ padding-top:clamp(34px,4.4vw,58px); }
.commons-page .map-layout{ display:grid; grid-template-columns:minmax(260px,318px) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start; }

.commons-page .map-rail-lede{ margin:14px 0 26px; font:16px/1.62 var(--serif); color:var(--text-soft); }

.commons-page .region-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.commons-page .region-item{
  width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:13px;
  background:transparent; border:0; border-radius:9px; padding:10px 12px; cursor:pointer; text-align:left;
  transition:background .22s ease;
}
.commons-page .region-item:hover,
.commons-page .region-item.is-hot{ background:var(--bg-soft); }
.commons-page .region-item.is-on{ background:var(--bg-soft); }

.commons-page .region-mark{
  width:34px; height:34px; display:grid; place-items:center; border-radius:99px;
  background:#fff; border:1px solid var(--line); transition:border-color .22s ease, background .22s ease;
}
.commons-page .region-mark svg{ width:17px; height:17px; fill:none; stroke:var(--teal); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.commons-page .region-item.is-on .region-mark{ background:var(--teal); border-color:var(--teal); }
.commons-page .region-item.is-on .region-mark svg{ stroke:#fff; }

.commons-page .region-body{ min-width:0; display:block; }
.commons-page .region-name{ display:block; font-family:var(--sans); font-weight:600; font-size:15px;
  color:var(--teal); letter-spacing:-.01em; }
.commons-page .region-count{ display:block; margin-top:2px; font:400 12px/1.5 var(--mono);
  color:var(--text-soft); font-variant-numeric:tabular-nums; }
.commons-page .region-bar{ display:block; height:3px; margin-top:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.commons-page .region-bar-fill{ display:block; height:100%; border-radius:99px; background:var(--sage);
  transform-origin:left center; transition:background .22s ease; }
.commons-page .region-item.is-on .region-bar-fill{ background:var(--teal); }

.commons-page .map-full-btn{ margin-top:22px; display:inline-flex; align-items:center; gap:9px; }
.commons-page .map-full-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }

/* the rail decides the row height; the figure fills it so the map's bottom
   edge lines up with the last region row instead of floating short */
.commons-page .map-layout{ align-items:stretch; }
.commons-page .map-figure{ min-width:0; display:flex; flex-direction:column; }
.commons-page .map-canvas{
  flex:1 1 auto; min-height:clamp(340px,42vw,470px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-soft); overflow:hidden; box-shadow:var(--shadow-card);
  /* Leaflet gives its panes z-index:400 and its controls 800. Without a local
     stacking context those paint straight through the modal scrim. */
  position:relative; z-index:0; isolation:isolate;
}
.commons-page .map-status{ margin:14px 0 0; font:400 12px/1.6 var(--mono); color:var(--text-soft); }

/* ── Leaflet, themed to the brand ── */
/* the ground shows in the band left when the world is contained in a taller
   canvas — match the ocean AS RENDERED (tiles pass through the filter below,
   this background does not), so the band reads as sea instead of a grey gap */
.commons-page .leaflet-container{ background:#CBDADE; font-family:var(--sans); outline:none; }
.commons-page .leaflet-tile-pane{ filter:saturate(.34) brightness(1.06); }
.commons-page .leaflet-control-zoom a,
.map-modal .leaflet-control-zoom a{
  background:#fff; color:var(--teal); border:1px solid var(--line); width:30px; height:30px; line-height:28px;
  font-size:17px; font-weight:600;
}
.commons-page .leaflet-control-zoom a:hover,
.map-modal .leaflet-control-zoom a:hover{ background:var(--bg-soft); color:var(--teal-deep); }
.commons-page .leaflet-bar,
.map-modal .leaflet-bar{ border:0; box-shadow:var(--shadow-card); border-radius:8px; overflow:hidden; }
.commons-page .leaflet-control-attribution,
.map-modal .leaflet-control-attribution{
  background:rgba(255,255,255,.88); font-family:var(--mono); font-size:10px; color:var(--text-soft);
  padding:3px 7px;
}
.commons-page .leaflet-control-attribution a,
.map-modal .leaflet-control-attribution a{ color:var(--teal); }

/* region bubbles */
.region-bubble{ display:grid; place-items:center; border-radius:99px; cursor:pointer;
  background:rgba(20,82,74,.17); border:1.6px solid var(--teal);
  transition:background .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.region-bubble span{ font-family:var(--sans); font-weight:700; font-size:11.5px; color:var(--teal-deep);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; pointer-events:none; }
.region-bubble:hover,
.region-bubble.is-hot{ background:rgba(20,82,74,.3); transform:scale(1.07); }
.region-bubble.is-on{ background:rgba(232,181,77,.72); border-color:var(--teal-deep); }

/* practice pins */
.practice-pin{ width:13px; height:13px; border-radius:99px; background:var(--clay);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(20,82,74,.4); cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1); }
.practice-pin:hover{ transform:scale(1.35); }

.leaflet-popup-content-wrapper{ border-radius:9px; box-shadow:var(--shadow-lift); padding:0; }
.leaflet-popup-content{ margin:0; width:auto !important; }
.leaflet-popup-tip{ box-shadow:none; }
.map-pop{ padding:14px 16px 13px; min-width:180px; }
.map-pop-name{ display:block; font-family:var(--sans); font-weight:700; font-size:15px; color:var(--teal);
  letter-spacing:-.015em; }
.map-pop-meta{ display:block; margin-top:5px; font:400 11.5px/1.5 var(--mono); color:var(--text-soft); }

/* ── full-screen modal ── */
.map-modal{ position:fixed; inset:0; z-index:1200; }
.map-modal[hidden]{ display:none; }
.map-modal-scrim{ position:absolute; inset:0; background:rgba(14,59,53,.58); backdrop-filter:blur(3px);
  animation:mapFade .3s ease; }
.map-modal-panel{
  /* edge to edge: a full-screen map view, no viewport gutter */
  position:absolute; inset:0; background:#fff; border-radius:0;
  box-shadow:none; display:flex; flex-direction:column; overflow:hidden;
  animation:mapRise .36s cubic-bezier(.16,1,.3,1);
}
@keyframes mapFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mapRise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .map-modal-scrim, .map-modal-panel{ animation:none; }
  .region-bubble, .practice-pin{ transition:none; }
}

.map-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px); border-bottom:1px solid var(--line); flex:none; }
.map-modal-title{ font-family:var(--sans); font-weight:800; font-size:var(--head-size);
  line-height:var(--head-lh); letter-spacing:var(--head-ls); color:var(--teal); margin:0; }
.map-modal-close{ flex:none; width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1px solid var(--line-strong); border-radius:99px; transition:background .2s ease, border-color .2s ease; }
.map-modal-close:hover{ background:var(--bg-soft); border-color:var(--teal); }
.map-modal-close svg{ width:17px; height:17px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; }

.map-modal-body{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 296px; }
.map-modal-canvas{ height:100%; min-height:0; background:var(--bg-soft);
  position:relative; z-index:0; isolation:isolate; }
.map-modal-rail{ border-left:1px solid var(--line); padding:clamp(18px,2vw,26px) clamp(18px,2vw,24px);
  overflow-y:auto; background:#fff; }
.map-modal-rail .filter-label{ margin:0 0 12px; }
.map-modal-note{ margin:20px 0 0; font:15px/1.6 var(--serif); color:var(--text-soft); }
.map-modal .region-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.map-modal .region-item{ width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center;
  gap:13px; background:transparent; border:0; border-radius:9px; padding:10px 12px; cursor:pointer;
  text-align:left; transition:background .22s ease; }
.map-modal .region-item:hover,
.map-modal .region-item.is-hot,
.map-modal .region-item.is-on{ background:var(--bg-soft); }
.map-modal .region-mark{ width:34px; height:34px; display:grid; place-items:center; border-radius:99px;
  background:#fff; border:1px solid var(--line); }
.map-modal .region-mark svg{ width:17px; height:17px; fill:none; stroke:var(--teal); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.map-modal .region-item.is-on .region-mark{ background:var(--teal); border-color:var(--teal); }
.map-modal .region-item.is-on .region-mark svg{ stroke:#fff; }
.map-modal .region-body{ min-width:0; display:block; }
.map-modal .region-name{ display:block; font-family:var(--sans); font-weight:600; font-size:15px; color:var(--teal); }
.map-modal .region-count{ display:block; margin-top:2px; font:400 12px/1.5 var(--mono); color:var(--text-soft); }
.map-modal .region-bar{ display:block; height:3px; margin-top:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.map-modal .region-bar-fill{ display:block; height:100%; border-radius:99px; background:var(--sage); }
.map-modal .region-item.is-on .region-bar-fill{ background:var(--teal); }

body.map-open{ overflow:hidden; }

/* results that the map filters */
.commons-page .tradition-card[hidden]{ display:none; }
.commons-page .results-empty{ margin:0; padding:34px 0; font:16px/1.62 var(--serif); color:var(--text-soft); }
.commons-page .results-empty[hidden]{ display:none; }

@media (max-width:1100px){
  .commons-page .map-layout{ grid-template-columns:1fr; gap:26px; }
  /* scope to the page rail: the modal lives inside .commons-page too, and its
     296px rail cannot take two columns — the labels wrap to shreds */
  .commons-page .map-rail .region-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .commons-page .map-full-btn{ margin-top:18px; }
}
@media (max-width:860px){
  /* stacked: give the map a real share of the height. `auto` + max-height let a
     tall rail collapse the map to a sliver, so size both rows explicitly */
  .map-modal-body{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(0,44%); }
  .map-modal-rail{ border-left:0; border-top:1px solid var(--line); min-height:0; }
  .map-modal .region-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .commons-page .region-list{ grid-template-columns:1fr; }
  .map-modal .region-list{ grid-template-columns:1fr; }
  .commons-page .map-canvas{ height:320px; }
}

/* ═══ THE COMMONS — inline search + dropdown filters ═══ */
/* controls and results share one tinted shell, so the row needs its own
   breathing room above the results head instead of a section gap */
/* Two fixed rows. The search + selects never move: anything that appears when a
   filter is set (the region pill, Clear filters) lands in row two, whose height
   is reserved whether or not it holds anything. */
.commons-page .commons-controls{ display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:center;
  column-gap:18px; row-gap:0;
  padding-top:clamp(40px,4.5vw,64px); padding-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid var(--line); margin-bottom:clamp(22px,2.6vw,30px); }
.commons-page .commons-controls .commons-search{ grid-column:1; min-width:0; }
.commons-page .commons-controls .inline-filters{ grid-column:2; }
.commons-page .filter-active{ grid-column:1 / -1;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  /* holds the row open so nothing above it shifts when a filter is chosen;
     36px is the region pill's own height — the tallest thing that lands here */
  min-height:36px; margin-top:14px; }

.commons-page .inline-filters{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.commons-page .sec--tint .commons-search,
.commons-page .sec--tint .inline-filter select{ background:#fff; }
.commons-page .inline-filter{ position:relative; display:inline-flex; }
/* the label rides inside the control, so the row stays one line tall */
.commons-page .inline-filter label{
  position:absolute; left:16px; top:8px;
  font:500 9.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--clay-text); pointer-events:none;
}
.commons-page .inline-filter select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--text);
  background:#fff; border:1px solid var(--line-strong); border-radius:10px;
  /* matches the search field's 63px so the row reads as one control strip */
  padding:27px 40px 12px 15px; line-height:1.25; cursor:pointer; min-width:176px;
  transition:border-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.commons-page .inline-filter::after{
  content:""; position:absolute; right:16px; top:calc(50% + 6px); width:8px; height:8px;
  border-right:1.6px solid var(--text-soft); border-bottom:1.6px solid var(--text-soft);
  transform:translateY(-50%) rotate(45deg); pointer-events:none;
  transition:border-color .22s ease;
}
.commons-page .inline-filter select:hover{ border-color:var(--teal); }
.commons-page .inline-filter select:hover ~ label,
.commons-page .inline-filter select:focus-visible ~ label{ color:var(--teal); }
.commons-page .inline-filter:hover::after{ border-color:var(--teal); }
.commons-page .inline-filter select:focus-visible{ outline:none; border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(20,82,74,.09); }
/* an active filter is legible at a glance, not just when you read the value */
.commons-page .inline-filter.is-set select{ border-color:var(--teal); color:var(--teal);
  background:rgba(20,82,74,.045); }
.commons-page .inline-filter.is-set::after{ border-color:var(--teal); }

.commons-page .filter-clear{
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--text-soft);
  background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  padding:4px 2px; cursor:pointer; transition:color .22s ease, border-color .22s ease;
}
.commons-page .filter-clear:hover{ color:var(--teal); border-color:var(--teal); }
.commons-page .filter-clear[hidden]{ display:none; }

/* the map's region choice shows here too, so the two filters read as one system */
.commons-page .region-pill{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:13.5px;
  font-weight:500; color:var(--teal); background:rgba(20,82,74,.07);
  border-radius:99px; padding:7px 8px 7px 15px;
}
.commons-page .region-pill[hidden]{ display:none; }
.commons-page .region-pill button{
  width:20px; height:20px; display:grid; place-items:center; border:0; cursor:pointer;
  border-radius:50%; background:rgba(20,82,74,.12); color:var(--teal);
  font:600 13px/1 var(--sans); transition:background .2s ease;
}
.commons-page .region-pill button:hover{ background:rgba(20,82,74,.22); }

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

@media (max-width:900px){
  /* one column: the search and the filters stack, so the explicit
     grid-column placement from the desktop rule has to be released */
  .commons-page .commons-controls{ grid-template-columns:1fr; }
  .commons-page .commons-controls .commons-search,
  .commons-page .commons-controls .inline-filters{ grid-column:1; }
  .commons-page .commons-controls .inline-filters{ margin-top:14px; }
  .commons-page .inline-filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
  .commons-page .inline-filter select{ width:100%; min-width:0; }
  .commons-page .filter-clear{ justify-self:start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRACTICE DETAIL — single template, nine pages (practice-<slug>.html)
   Scoped to .practice-page; appended, nothing above is touched.
   ═══════════════════════════════════════════════════════════════════════════ */

.practice-page{ --rail-w:308px; --pcard-pad:clamp(20px,2.2vw,30px); }

/* ── breadcrumb ── */
.practice-page .crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-soft); margin:0 0 clamp(20px,2.4vw,30px);
}
.practice-page .crumbs a{ color:var(--text-soft); text-decoration:none; border-bottom:1px solid transparent; }
.practice-page .crumbs a:hover{ color:var(--teal); border-bottom-color:var(--sage); }
.practice-page .crumbs span[aria-hidden]{ color:var(--line-strong); }
.practice-page .crumbs [aria-current]{ color:var(--teal); }

/* ── hero: artwork | title + chips ── */
.practice-page .practice-hero{ padding-bottom:clamp(30px,3.4vw,44px); }
.practice-page .practice-head{
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(26px,3.2vw,46px); align-items:start;
}
.practice-page .practice-art{ margin:0; }
.practice-page .practice-art .ph{ border-radius:var(--r); overflow:hidden; }
.practice-page .art-caption{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--text-soft);
  margin:10px 0 0;
}

.practice-page .practice-title{
  font-family:var(--sans); font-weight:800; font-size:var(--head-size);
  line-height:var(--head-lh); letter-spacing:var(--head-ls); color:var(--teal);
  margin:0;
}
.practice-page .practice-sub{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-soft); margin:9px 0 0;
}
.practice-page .practice-lede{ margin:18px 0 0; max-width:60ch; }

/* save / share */
.practice-page .practice-actions{ display:flex; gap:10px; margin:18px 0 0; flex-wrap:wrap; }
.practice-page .pact{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--teal);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.practice-page .pact:hover{ border-color:var(--teal); transform:translateY(-1px); }
.practice-page .pact[aria-pressed="true"]{ background:var(--teal); color:#fff; border-color:var(--teal); }
.practice-page .pact[aria-pressed="true"] .ic{ fill:currentColor; }

/* the six dimension chips */
.practice-page .pchips{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; margin:24px 0 0;
}
.practice-page .pchip{
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r);
  background:#fff; padding:12px 14px; min-width:0;
}
.practice-page .pchip-label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:5px;
}
.practice-page .pchip-value{
  display:block; font-family:var(--sans); font-weight:600; font-size:14px;
  line-height:1.35; color:var(--teal); overflow-wrap:anywhere;
}
/* tinted per dimension — fills only, label colour meets 4.5:1 on white */
.practice-page .pchip--clay  { border-left-color:var(--clay);   background:#FDF6F1; }
.practice-page .pchip--clay   .pchip-label{ color:var(--clay-text); }
.practice-page .pchip--rose  { border-left-color:#C2708A; background:#FCF2F5; }
.practice-page .pchip--rose   .pchip-label{ color:#A14F68; }
.practice-page .pchip--green { border-left-color:var(--sage);   background:#F1F7F4; }
.practice-page .pchip--green  .pchip-label{ color:#3F7566; }
.practice-page .pchip--violet{ border-left-color:#8A7BB8; background:#F5F3FA; }
.practice-page .pchip--violet .pchip-label{ color:#5F5191; }
.practice-page .pchip--blue  { border-left-color:#6E93B8; background:#F1F5FA; }
.practice-page .pchip--blue   .pchip-label{ color:#456C92; }
.practice-page .pchip--gold  { border-left-color:var(--gold);   background:#FBF6E9; }
.practice-page .pchip--gold   .pchip-label{ color:#8A6A18; }

/* ── body: main column | standardised rail ── */
.practice-page .practice-body{ padding-bottom:clamp(50px,5.6vw,76px); }
.practice-page .practice-grid{
  display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w);
  gap:clamp(20px,2.4vw,30px); align-items:start;
}
.practice-page .practice-main{ display:grid; gap:clamp(20px,2.4vw,30px); min-width:0; }
.practice-page .practice-rail{ display:grid; gap:clamp(20px,2.4vw,30px); min-width:0; }

.practice-page .pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pcard-pad); box-shadow:var(--shadow-card);
}
.practice-page .pcard-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal); margin:0 0 18px; font-weight:500;
}

/* What is it? */
.practice-page .pcard-inner{ display:flex; gap:20px; align-items:flex-start; }
.practice-page .what-mark{
  flex:0 0 84px; width:84px; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
}
.practice-page .what-text{ margin:0; max-width:72ch; }

/* icons */
.practice-page .ic{
  width:17px; height:17px; flex:0 0 17px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.practice-page .ic--arrow{ width:15px; height:15px; flex:0 0 15px; }

/* ── rail cards ── */
.practice-page .rail-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pcard-pad); box-shadow:var(--shadow-card);
}
.practice-page .rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin:0 0 16px;
}
.practice-page .rail-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal); margin:0; font-weight:500;
}
.practice-page .rail-flag{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:#6B5A12; background:#FBF1D2; border-radius:999px; padding:3px 9px;
}

/* quick summary */
.practice-page .sum-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.practice-page .sum-list li{ display:flex; gap:12px; align-items:flex-start; }
.practice-page .sum-ic{
  flex:0 0 32px; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; background:var(--bg-soft); color:var(--teal);
}
.practice-page .sum-body{ min-width:0; }
.practice-page .sum-label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--text-soft); margin-bottom:2px;
}
.practice-page .sum-value{
  display:block; font-family:var(--sans); font-weight:600; font-size:13.5px;
  line-height:1.4; color:var(--teal); overflow-wrap:anywhere;
}
.practice-page .rail-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:18px; cursor:pointer;
}
.practice-page .rail-btn[aria-pressed="true"]{
  background:var(--teal); color:#fff; border-color:var(--teal);
}
.practice-page .rail-btn[aria-pressed="true"] .ic{ fill:currentColor; }

/* evidence */
.practice-page .ev-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-soft);
  margin:16px 0 7px;
}
.practice-page .ev-label:first-of-type{ margin-top:0; }
.practice-page .ev-tier{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0; }
.practice-page .tier-pill{
  font-family:var(--mono); font-size:11.5px; color:var(--teal);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
}
.practice-page .tier-name{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--teal); }
.practice-page .evdots{ display:flex; gap:6px; }
.practice-page .evdot{ width:10px; height:10px; border-radius:50%; background:var(--clay); }
.practice-page .evdot--off{ background:var(--line); }
.practice-page .ev-sub{
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--teal); margin:8px 0 0;
}
.practice-page .ev-meta{
  display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:18px 0 0;
  padding-top:16px; border-top:1px solid var(--line);
}
.practice-page .ev-meta dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-soft); margin:0;
}
.practice-page .ev-meta dd{ margin:0; }
.practice-page .lvl{
  font-family:var(--sans); font-weight:600; font-size:12px; border-radius:999px; padding:2px 10px;
}
.practice-page .lvl--low     { background:#EAF3EE; color:#31685A; }
.practice-page .lvl--moderate{ background:#FBF1D2; color:#6B5A12; }
.practice-page .lvl--high    { background:#F9EDE4; color:#8E4F24; }

.practice-page .rail-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--teal);
  text-decoration:none; border-bottom:1px solid var(--sage); padding-bottom:1px;
}
.practice-page .rail-link:hover{ border-bottom-color:var(--teal); }
.practice-page .rail-link .ic{ transition:transform .2s ease; }
.practice-page .rail-link:hover .ic{ transform:translateX(3px); }

/* related practices */
.practice-page .rel-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.practice-page .rel-list li{
  display:flex; align-items:center; gap:10px;
  border-radius:8px; padding:6px; margin:0 -6px;
  transition:background .2s ease;
}
.practice-page .rel-list li:hover{ background:var(--bg-soft); }
.practice-page .rel-link{
  display:flex; align-items:center; gap:11px; flex:1; min-width:0; text-decoration:none;
}
.practice-page .rel-thumb{
  flex:0 0 42px; width:42px; height:42px; border-radius:7px; overflow:hidden;
}
.practice-page .rel-body{ min-width:0; }
.practice-page .rel-name{
  display:block; font-family:var(--sans); font-weight:600; font-size:13.5px;
  color:var(--teal); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.practice-page .rel-trad{
  display:block; font-family:var(--mono); font-size:10.8px; color:var(--text-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.practice-page .rel-save{
  flex:0 0 auto; background:none; border:0; padding:5px; cursor:pointer;
  color:var(--text-soft); border-radius:6px; line-height:0;
}
.practice-page .rel-save:hover{ color:var(--teal); background:#fff; }
.practice-page .rel-save[aria-pressed="true"]{ color:var(--teal); }
.practice-page .rel-save[aria-pressed="true"] .ic{ fill:currentColor; }

/* ── geography ── */
.practice-page .geo-canvas{
  height:clamp(240px,26vw,320px); border-radius:var(--r); overflow:hidden;
  background:#CBDADE; position:relative; z-index:0; isolation:isolate;
}
.practice-page .geo-note{ margin:14px 0 0; color:var(--text-soft); font-size:15.5px; max-width:72ch; }
.practice-page .geo-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-top:16px;
}
.practice-page .geo-legend{
  list-style:none; margin:0; padding:0; display:flex; gap:26px; flex-wrap:wrap;
}
.practice-page .geo-legend li{ display:flex; align-items:flex-start; gap:9px; }
.practice-page .key{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex:0 0 10px; }
.practice-page .key--origin{ background:#2E7D5B; }
.practice-page .key--spread{ background:#4E86B4; }
.practice-page .key-label{
  display:block; font-family:var(--mono); font-size:11px; color:var(--text-soft);
}
.practice-page .key-value{
  display:block; font-family:var(--sans); font-weight:600; font-size:13px; color:var(--teal);
}
.practice-page .geo-btn{ display:inline-flex; align-items:center; gap:9px; }

/* ── taxonomy grid ──
   Auto-fit, never a fixed column count: 18 fields in a fixed 4-up grid gave each
   cell ~142px inside the 718px content column, so labels wrapped to three lines
   and values to five. The 230px floor keeps a label on one line and a value on
   one or two, and the grid simply drops to fewer columns when it cannot.
   262px is measured, not guessed: at 230px the ~900px viewport fitted three
   columns of 244px and the longest labels wrapped to two lines again. */
.practice-page .tx-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  column-gap:clamp(26px,2.8vw,44px); row-gap:clamp(22px,2.4vw,30px);
  margin:0;
}
.practice-page .tx-row{ display:flex; gap:11px; align-items:flex-start; min-width:0; }
.practice-page .tx-ic{ flex:0 0 17px; color:var(--sage); margin-top:3px; line-height:0; }
.practice-page .tx-body{ min-width:0; }
.practice-page .tx-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-soft);
  margin:0 0 5px; line-height:1.3;
}
.practice-page .tx-value{
  margin:0; font-family:var(--sans); font-weight:600; font-size:14px;
  line-height:1.5; color:var(--teal);
}
/* a field with no icon still lines up with the ones that have one */
.practice-page .tx-row--plain{ padding-left:28px; }

/* ── references ── */
.practice-page .ref-list{ margin:0; padding-left:20px; display:grid; gap:9px; }
.practice-page .ref-list li{ font-size:15.5px; max-width:74ch; }
.practice-page .ref-note{
  display:flex; align-items:flex-start; gap:10px; margin:18px 0 0;
  padding-top:16px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--text-soft); max-width:74ch;
}
.practice-page .ref-note .ic{ color:var(--sage); margin-top:3px; }

/* ── explore similar ── */
.practice-page .sim-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.practice-page .sim-head .rail-link{ margin-top:0; }
.practice-page .simtabs{
  display:flex; gap:26px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:26px;
}
.practice-page .simtab{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--text-soft);
  padding:0 0 11px; transition:color .2s ease, border-color .2s ease;
}
.practice-page .simtab:hover{ color:var(--teal); }
.practice-page .simtab[aria-selected="true"]{ color:var(--teal); border-bottom-color:var(--teal); }

.practice-page .simrow{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px); align-items:start;
  position:relative;
}
/* the connecting thread behind the nodes */
.practice-page .simrow::before{
  content:""; position:absolute; left:8%; right:8%; top:38px; height:1px;
  background:var(--line-strong); z-index:0;
}
.practice-page .simnode{ position:relative; z-index:1; text-align:center; min-width:0; }
.practice-page .simnode a,
.practice-page .sim-self{ text-decoration:none; display:block; }
.practice-page .sim-thumb{
  width:76px; height:76px; border-radius:50%; overflow:hidden; margin:0 auto 11px;
  border:3px solid var(--bg-soft); box-shadow:var(--shadow-card);
  transition:transform .2s ease, border-color .2s ease;
}
.practice-page .simnode a:hover .sim-thumb{ transform:translateY(-2px); border-color:var(--sage); }
.practice-page .simnode.is-anchor .sim-name{ font-weight:700; }
.practice-page .simnode.is-anchor .sim-thumb{ border-color:var(--teal); }
.practice-page .sim-name{
  display:block; font-family:var(--sans); font-weight:600; font-size:12.5px;
  line-height:1.35; color:var(--teal);
}

/* ── responsive ── */
/* four taxonomy columns need real width or every value wraps to one word
   per line; drop to two while the rail is still beside the main column */

@media (max-width:1100px){
  .practice-page .practice-grid{ grid-template-columns:1fr; }
  .practice-page .practice-rail{
    grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); align-items:start;
  }
  .practice-page .simrow{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:24px; }
  .practice-page .simrow::before{ display:none; }
}

@media (max-width:860px){
  .practice-page .practice-head{ grid-template-columns:1fr; }
  .practice-page .practice-art{ max-width:420px; }
  .practice-page .pchips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px){
  .practice-page .pchips{ grid-template-columns:1fr; }
  .practice-page .simrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .practice-page .pcard-inner{ flex-direction:column; }
  .practice-page .geo-foot{ align-items:flex-start; }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   KNOWLEDGE GRAPH — selector ring + comparison matrix
   Scoped to .kgx-page. Appended to styles.css by tools/build-knowledge-graph.py
   companion; nothing above this block is touched.
   ═══════════════════════════════════════════════════════════════════════════ */

.kgx-page{ --kgx-gap:clamp(16px,1.8vw,26px); --kgx-mid:clamp(150px,15vw,208px); }

/* the matrix is four tracks wide and does not fit the 1120px text cap —
   it gets its own wider container, still gutter-safe on small screens */
.kgx-page .wrap--kgx{ max-width:1320px; }

/* ── selector ring ── */
.kgx-page .kgx-figure{
  margin:0; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:clamp(18px,2vw,30px); box-shadow:var(--shadow-card);
}
.kgx-page .kgx-svg{ display:block; width:100%; height:auto; overflow:visible; }

.kgx-page .kgx-web path{ fill:none; stroke:var(--line); stroke-width:1; }

.kgx-page .kgx-chord{
  fill:none; stroke:var(--sage); stroke-width:1.8; opacity:.5;
  cursor:pointer; transition:stroke .25s ease, stroke-width .25s ease, opacity .25s ease;
}
.kgx-page .kgx-chord[data-active="true"]{ stroke:var(--clay); stroke-width:3; opacity:1; }
.kgx-page .kgx-chord:hover{ stroke:var(--clay); opacity:1; }

.kgx-page .kgx-node{ cursor:pointer; }
.kgx-page .kgx-node circle{
  fill:#fff; stroke:var(--sage); stroke-width:2.2;
  transition:fill .25s ease, stroke .25s ease, r .25s ease;
}
.kgx-page .kgx-node text{
  font-family:var(--sans); font-size:12.5px; font-weight:600; fill:var(--teal);
  transition:fill .25s ease;
}
.kgx-page .kgx-node[data-active="true"] circle{ fill:var(--clay); stroke:var(--clay); }
.kgx-page .kgx-node[data-active="true"] text{ fill:var(--clay-text); }
.kgx-page .kgx-node:hover circle{ stroke:var(--clay); }
/* keyboard focus must be visible on an SVG group, where outline does nothing */
.kgx-page .kgx-node:focus{ outline:none; }
.kgx-page .kgx-node:focus-visible circle{ stroke:var(--teal); stroke-width:4; }

.kgx-page .kgx-caption{ margin:20px 0 0; }
.kgx-page .kgx-legend{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px;
  font:400 11.5px/1.6 var(--mono); color:var(--text-soft);
}
.kgx-page .kgx-legend li{ display:flex; align-items:center; gap:9px; }
.kgx-page .kgx-key{ width:22px; height:2px; background:var(--line-strong); flex:0 0 22px; }
.kgx-page .kgx-key--node{
  width:11px; height:11px; flex:0 0 11px; border-radius:50%;
  background:#fff; border:2px solid var(--sage);
}
.kgx-page .kgx-key--chord{ background:var(--clay); height:3px; }

/* ── pair tabs ── */
.kgx-page .kgx-tabs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px; margin-top:26px;
}
.kgx-page .kgx-tab{
  appearance:none; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px; display:grid; gap:3px;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kgx-page .kgx-tab:hover{ border-color:var(--sage); transform:translateY(-1px); }
.kgx-page .kgx-tab[aria-selected="true"]{
  border-color:var(--clay); box-shadow:inset 0 0 0 1px var(--clay);
}
.kgx-page .kgx-tab-kicker{
  font:400 10.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-soft);
}
.kgx-page .kgx-tab-title{ font:600 14.5px/1.4 var(--sans); color:var(--teal); }

/* ── matrix ── */
.kgx-page .kgx-crown{
  background:var(--teal); color:#fff; border-radius:var(--r);
  padding:clamp(22px,2.4vw,34px); text-align:center; max-width:640px;
  margin:0 auto clamp(26px,3vw,40px);
}
.kgx-page .kgx-crown-kicker{
  margin:0 0 6px; font:400 11px/1.4 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--sage);
}
.kgx-page .kgx-crown-title{
  margin:0 0 10px; font:600 clamp(22px,2.4vw,30px)/1.2 var(--serif); letter-spacing:-.02em;
}
.kgx-page .kgx-crown-blurb{
  margin:0; font:400 14px/1.6 var(--sans); color:rgba(255,255,255,.82);
}

/* tradition headers sit on the SAME four tracks as every row below, so the
   two columns stay visually welded to their side all the way down */
.kgx-page .kgx-trads,
.kgx-page .kgx-row{
  display:grid;
  grid-template-columns:minmax(132px,168px) 1fr var(--kgx-mid) 1fr;
  gap:var(--kgx-gap);
  align-items:start;
}
.kgx-page .kgx-trads{ margin-bottom:22px; }
.kgx-page .kgx-trads .kgx-trad--l{ grid-column:2; }
.kgx-page .kgx-trads .kgx-trad-gap{ grid-column:3; }
.kgx-page .kgx-trads .kgx-trad--r{ grid-column:4; }

.kgx-page .kgx-trad{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; border-top:3px solid var(--sage);
}
.kgx-page .kgx-trad--r{ border-top-color:var(--clay); }
.kgx-page .kgx-trad-name{ margin:0 0 3px; font:600 15px/1.35 var(--sans); color:var(--teal); }
.kgx-page .kgx-trad-sub{ margin:0 0 8px; font:400 13.5px/1.5 var(--serif); color:var(--text); }
.kgx-page .kgx-trad-meta{ margin:0 0 12px; font:400 11px/1.5 var(--mono); color:var(--text-soft); }
.kgx-page .kgx-trad-link{
  font:600 12.5px/1 var(--sans); color:var(--clay-text); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.kgx-page .kgx-trad-link:hover{ color:var(--teal); }

.kgx-page .kgx-rows{ display:grid; gap:var(--kgx-gap); }
.kgx-page .kgx-row{
  padding-top:var(--kgx-gap); border-top:1px solid var(--line);
}
.kgx-page .kgx-rowhead{ padding-top:2px; }
.kgx-page .kgx-rowlabel{
  margin:0 0 4px; font:500 11px/1.4 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal);
}
.kgx-page .kgx-rowhint{ margin:0; font:400 12px/1.5 var(--sans); color:var(--text-soft); }

.kgx-page .kgx-cell{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; min-width:0;
}
.kgx-page .kgx-cell--l{ border-left:3px solid var(--sage); }
.kgx-page .kgx-cell--r{ border-left:3px solid var(--clay); }

.kgx-page .kgx-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.kgx-page .kgx-tags li{
  font:500 12.5px/1.3 var(--sans); color:var(--teal);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.kgx-page .kgx-tags--shared li{
  background:var(--ph-gold); border-color:var(--gold); color:var(--teal-deep);
}
/* hovering a term anywhere lights up the same term on the other side —
   this is the whole point of the middle column */
.kgx-page .kgx-tags li[data-match]{
  background:var(--clay); border-color:var(--clay); color:#fff;
}

.kgx-page .kgx-kv{ margin:0 0 9px; font:400 13px/1.55 var(--sans); color:var(--text); }
.kgx-page .kgx-kv:last-child{ margin-bottom:0; }
.kgx-page .kgx-kv span{
  display:block; font:400 10.5px/1.4 var(--mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:2px;
}
.kgx-page .kgx-empty{ margin:0; font:400 12.5px/1.5 var(--sans); color:var(--text-soft); }

.kgx-page .kgx-mid{
  border:1px dashed var(--line-strong); border-radius:var(--r);
  padding:14px 15px; background:rgba(255,255,255,.55); min-width:0;
}
.kgx-page .kgx-shared-label{
  margin:0 0 9px; font:500 10.5px/1.4 var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--clay-text);
}
.kgx-page .kgx-shared-none{
  margin:0; font:400 11.5px/1.5 var(--mono); color:var(--text-soft);
}

/* ── takeaways ── */
.kgx-page .kgx-takeaways{
  margin-top:clamp(28px,3vw,42px); padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line-strong);
}
.kgx-page .kgx-tk-head{
  margin:0 0 18px; font:500 12px/1.4 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--teal);
}
.kgx-page .kgx-takeaways ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(18px,2.2vw,30px);
}
.kgx-page .kgx-tk-title{ margin:0 0 6px; font:600 13.5px/1.4 var(--sans); color:var(--teal); }
.kgx-page .kgx-tk-body{ margin:0; font:400 13px/1.6 var(--sans); color:var(--text-soft); }
.kgx-page .kgx-tk-body strong{ color:var(--text); font-weight:600; }

/* ── responsive ── */
@media (max-width:1180px){
  /* the row label stops being a column and becomes a heading above the pair */
  .kgx-page .kgx-trads,
  .kgx-page .kgx-row{ grid-template-columns:1fr var(--kgx-mid) 1fr; }
  .kgx-page .kgx-trads .kgx-trad--l{ grid-column:1; }
  .kgx-page .kgx-trads .kgx-trad-gap{ grid-column:2; }
  .kgx-page .kgx-trads .kgx-trad--r{ grid-column:3; }
  .kgx-page .kgx-rowhead{ grid-column:1/-1; padding-top:0; }
}
@media (max-width:820px){
  /* side by side stops being readable; stack, and the shared panel moves
     between the two sides where it still reads as a bridge */
  .kgx-page .kgx-trads,
  .kgx-page .kgx-row{ grid-template-columns:1fr; }
  .kgx-page .kgx-trads .kgx-trad--l,
  .kgx-page .kgx-trads .kgx-trad--r{ grid-column:1; }
  .kgx-page .kgx-trads .kgx-trad-gap{ display:none; }
  .kgx-page .kgx-cell--r{ order:3; }
  .kgx-page .kgx-mid{ order:2; }

  /* stacked, a 3px border colour is not enough to tell the two traditions
     apart — name each box */
  .kgx-page .kgx-cell[data-side]::before{
    content:attr(data-side);
    display:block; margin-bottom:10px;
    font:500 10.5px/1.4 var(--mono); letter-spacing:.07em;
    text-transform:uppercase; color:var(--text-soft);
  }
  .kgx-page .kgx-cell--l[data-side]::before{ color:var(--teal); }
  .kgx-page .kgx-cell--r[data-side]::before{ color:var(--clay-text); }
}

@media (prefers-reduced-motion:reduce){
  .kgx-page *,
  .kgx-page *::before,
  .kgx-page *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA INSIGHTS — "Written twice": one ruler, two registers.
   Replaces the old .stat-card / .bar-row / .icon-list block entirely.
   Appended to styles.css by tools/build-data-insights.py.
   ═══════════════════════════════════════════════════════════════════════════ */

.insights-page{
  /* two easings only: things that DRAW, and things that DIM */
  --in-ease: cubic-bezier(.22,.61,.36,1);
  --in-ease-soft: cubic-bezier(.4,0,.2,1);
}

.insights-page .sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ─── S1 hero ─────────────────────────────────────────────────────────── */
.insights-page .in-hero{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start;
}
.insights-page .in-rule-note{
  margin:22px 0 0; font:17px/1.6 var(--serif); color:var(--text-soft);
}
.insights-page .in-rule{
  display:block; height:1px; background:var(--line); margin:30px 0 16px;
  transform:scaleX(1); transform-origin:left;
  transition:transform .38s var(--in-ease);
}
.insights-page .in-rule.is-in{ transform:scaleX(1); }
.insights-page .in-scrip{
  display:flex; flex-wrap:wrap; margin:0;
  font:500 11.5px/1.6 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-soft);
}
.insights-page .in-scrip span + span{
  margin-left:18px; padding-left:18px; border-left:1px solid var(--line);
}
.insights-page .in-colophon-side{
  border-left:1px solid var(--line); padding-left:32px;
}
.insights-page .in-colophon-side dl{ margin:0; font:12px/1.65 var(--mono); }
.insights-page .in-colophon-side dt{
  color:var(--text-soft); letter-spacing:.08em; text-transform:uppercase; font-size:10.5px;
}
.insights-page .in-colophon-side dd{ margin:2px 0 16px; color:var(--text); }
.insights-page .in-colophon-side dd:last-child{ margin-bottom:0; }

/* ─── shared ink vocabulary ───────────────────────────────────────────── */
.insights-page .in-swatch{
  display:inline-block; width:2px; height:18px; vertical-align:-4px; margin-right:9px;
}
.insights-page .in-swatch--culture{ background:var(--clay); }
.insights-page .in-swatch--clinical{ background:var(--teal); }
.insights-page .in-note{
  display:block; margin:8px 0 0; font:400 10.5px/1.6 var(--mono); color:var(--text-soft);
}

/* ─── S2 the register (signature) ─────────────────────────────────────── */
.insights-page .in-register{ margin:40px 0 0; }

.insights-page .in-ruler{
  position:relative; height:26px;
  border-bottom:1px solid var(--line-strong);
  margin-right:112px;  /* clears the figure column so 0 and 12,480 sit over the raster */
}
.insights-page .in-tick{
  position:absolute; left:var(--at); bottom:0; transform:translateX(-50%);
}
.insights-page .in-tick i{
  display:block; width:1px; height:6px; background:var(--line-strong); margin:0 auto;
}
.insights-page .in-tick b{
  display:block; font:400 11px/1.4 var(--mono); color:var(--text-soft);
  font-variant-numeric:tabular-nums; font-weight:400; padding-top:3px;
}
.insights-page .in-tick:first-child{ transform:none; }
.insights-page .in-tick:first-child i{ margin:0; }
.insights-page .in-tick:last-child{ transform:translateX(-100%); }
.insights-page .in-tick:last-child i{ margin:0 0 0 auto; }

.insights-page .in-regs{ display:grid; gap:16px; margin-top:14px; }
.insights-page .in-reg{
  display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:16px; align-items:center;
}
.insights-page .in-raster{ display:block; width:100%; height:auto; }
.insights-page.is-armed .in-lit{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--in-ease);
}
.insights-page .in-reg.is-in .in-lit{ clip-path:inset(0 0 0 0); }
.insights-page .in-reg--clinical .in-lit{ transition-delay:.12s; }

.insights-page .in-reg-fig{
  margin:0; text-align:right; font:400 13px/1.45 var(--mono);
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}
.insights-page .in-reg-fig b{ font-weight:500; color:var(--text); }
.insights-page .in-reg-fig .in-swatch{ margin:0 0 4px; height:2px; width:18px; display:block; margin-left:auto; }
.insights-page .in-of{ display:block; font-size:10.5px; color:var(--text-soft); }

.insights-page .in-colophon{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px;
  border-top:1px solid var(--line); padding-top:26px;
}
.insights-page .in-cell{ padding-left:28px; border-left:1px solid var(--line); }
.insights-page .in-cell:first-child{ padding-left:0; border-left:0; }
.insights-page .in-cell b{
  display:block; font:800 30px/1 var(--sans); letter-spacing:-.03em; color:var(--teal);
}
.insights-page .in-cell span{
  display:block; margin-top:9px; font:500 11px/1.5 var(--mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-soft);
}
.insights-page .in-register figcaption{
  margin-top:24px; font:15px/1.65 var(--serif); color:var(--text-soft); max-width:62ch;
}

/* ─── S3 flags on the shared ruler ────────────────────────────────────── */
.insights-page .in-flags{ margin:36px 0 0; }
.insights-page .in-ink-key{
  display:flex; flex-wrap:wrap; gap:22px; margin:0 0 28px;
  font:400 11px/1.5 var(--mono); color:var(--text-soft);
}
.insights-page .in-key{
  display:inline-block; width:20px; height:6px; vertical-align:0; margin-right:8px;
}
.insights-page .in-key--solid{ background:var(--teal); }
.insights-page .in-key--hatch{
  background:var(--ph-clay);
  background-image:repeating-linear-gradient(45deg,var(--clay) 0 1px,transparent 1px 4px);
}
.insights-page .in-key--outline{ border:1px solid var(--teal); }

.insights-page .in-bay + .in-bay{
  margin-top:30px; padding-top:30px; border-top:1px solid var(--line);
}
.insights-page .in-bay-label{
  margin:0 0 12px; font:500 11px/1.5 var(--mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-soft);
}
.insights-page .in-flagrow{ border-bottom:1px solid var(--line); }
.insights-page .in-flag{
  display:grid; grid-template-columns:200px minmax(0,1fr) 96px; gap:24px;
  align-items:center; width:100%; min-height:44px; padding:0;
  background:none; border:0; text-align:left; cursor:pointer; font:inherit;
}
.insights-page .in-flag-name{ font:500 15px/1.4 var(--sans); color:var(--text); }
.insights-page .in-flag-num{
  font:400 12.5px/1.4 var(--mono); color:var(--text); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* the track is a RULER, not a bar: a baseline with quartile ticks */
.insights-page .in-track{
  position:relative; display:block; height:14px;
}
.insights-page .in-track::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line-strong);
}
.insights-page .in-qt{
  position:absolute; left:var(--at); top:50%; transform:translateY(-50%);
  width:1px; height:6px; background:var(--line-strong); opacity:.4;
}
.insights-page .in-span{
  position:absolute; left:0; top:50%; transform:translateY(-50%) scaleX(1);
  transform-origin:left; width:var(--in-span); height:6px;
  transition:transform .62s var(--in-ease);
}
.insights-page .in-flagrow.is-in .in-span{ transform:translateY(-50%) scaleX(1); }
.insights-page .in-cap{
  position:absolute; right:-2px; top:50%; width:5px; height:5px; border-radius:50%;
  transform:translateY(-50%) scale(1);
  transition:transform .24s cubic-bezier(.34,1.56,.64,1) .5s;
}
.insights-page .in-flagrow.is-in .in-cap{ transform:translateY(-50%) scale(1); }

/* ink meanings — solid = stated, hatch = unresolved, outline = queued.
   The bay carries its own ink class: :first-child would be wrong here,
   because the ink key is the bay's first child, not a bay. */
.insights-page .in-flag--solid .in-span{ background:var(--teal); }
.insights-page .in-flag--solid .in-cap{ background:var(--teal); }
.insights-page .in-bay--culture .in-flag--solid .in-span{ background:var(--clay); }
.insights-page .in-bay--culture .in-flag--solid .in-cap{ background:var(--clay); }
.insights-page .in-flag--hatch .in-span{
  background:var(--ph-clay);
  background-image:repeating-linear-gradient(45deg,var(--clay) 0 1px,transparent 1px 4px);
}
.insights-page .in-flag--hatch .in-cap{ background:var(--clay); }
.insights-page .in-flag--outline .in-span{ border:1px solid var(--teal); background:transparent; }
.insights-page .in-flag--outline .in-cap{ border:1px solid var(--teal); }

.insights-page .in-gloss{
  margin:0; padding:0 0 16px 224px; max-width:70ch;
  font:15px/1.6 var(--serif); color:var(--text-soft);
}
.insights-page .in-flags figcaption{
  margin-top:26px; font:400 11.5px/1.7 var(--mono); color:var(--text-soft); max-width:74ch;
}

/* ─── S4 the fan ──────────────────────────────────────────────────────── */
.insights-page .in-fan{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:56px; align-items:center; margin:40px 0 0;
}
.insights-page .in-fan-svg svg{ display:block; width:340px; max-width:100%; height:auto; }
.insights-page .in-grat circle{ fill:none; stroke:var(--line); stroke-width:1; opacity:.6; }
.insights-page .in-spokes line{ stroke:var(--line); stroke-width:1; opacity:.6; }
.insights-page .in-wedge{
  opacity:var(--o,1); transition:opacity .7s var(--in-ease);
}
.insights-page .in-fan.is-in .in-wedge{ opacity:var(--o,1); }
.insights-page .in-tick-t{ opacity:1; transition:opacity .4s var(--in-ease-soft) .5s; }
.insights-page .in-fan.is-in .in-tick-t{ opacity:.9; }
.insights-page .in-empty-arc{
  stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 3;
}
.insights-page .in-leader{ stroke:var(--line-strong); stroke-width:1; }
.insights-page .in-tlabel{
  font:500 10.5px/1.3 var(--mono); fill:var(--text);
}
.insights-page .in-tnum{ fill:var(--text-soft); font-weight:400; }
.insights-page .in-hub{
  font:800 34px/1 var(--sans); fill:var(--teal); letter-spacing:-.03em;
}
.insights-page .in-hub-l{
  font:500 10px/1.4 var(--mono); fill:var(--text-soft);
  letter-spacing:.09em; text-transform:uppercase;
}
.insights-page .in-legend{
  display:grid; gap:9px; margin:0 0 20px; font:400 11.5px/1.5 var(--mono); color:var(--text-soft);
}
.insights-page .in-lg{
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:9px;
}
.insights-page .in-lg--on{ background:var(--clay); }
.insights-page .in-lg--off{ border:1px dashed var(--line-strong); }
.insights-page .in-fan-list{
  list-style:none; margin:0 0 18px; padding:0;
  font:400 11.5px/1.7 var(--mono); color:var(--text-soft);
}
.insights-page .in-fan-list b{ color:var(--text); font-weight:500; }

/* ─── S5 the gaps ─────────────────────────────────────────────────────── */
.insights-page .in-gaps{
  display:grid; grid-template-columns:168px minmax(0,1fr); gap:48px;
  align-items:start; margin:36px 0 0;
}
.insights-page .in-ghost{ margin:0; }
.insights-page .in-ghost svg{ display:block; width:168px; height:auto; }
.insights-page .in-gap{
  display:grid; grid-template-columns:132px minmax(0,1fr) 84px; gap:24px;
  align-items:center; padding:22px 0; border-bottom:1px solid var(--line);
}
.insights-page .in-code{
  margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--clay-text);
}
.insights-page .in-gap-body h3{
  margin:0 0 5px; font:700 15px/1.4 var(--sans); color:var(--teal);
}
.insights-page .in-gap-body p{ margin:0; font:16px/1.6 var(--serif); color:var(--text-soft); }
.insights-page .in-glyph{
  width:84px; height:84px; justify-self:end;
  fill:none; stroke:var(--line-strong); stroke-width:1.25;
  stroke-dasharray:3 3; stroke-linecap:round;
}
.insights-page .in-glyph .in-g-dot{ fill:var(--clay); stroke:none; }
.insights-page .in-plan{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font:400 11.5px/1.6 var(--mono); color:var(--text-soft);
}

/* ─── S6 the reading note ─────────────────────────────────────────────── */
/* tint comes from the shared .sec--tint modifier, so the flush/tint guard
   in check-pages.py and styles.css can both see it */
.insights-page .in-read-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:start;
}
.insights-page .in-read-lead{
  margin:0; font-family:var(--serif); font-size:clamp(20px,2.15vw,30px);
  line-height:1.45; color:var(--teal);
}
.insights-page .in-read-sub{
  margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font:15px/1.6 var(--serif); color:var(--text-soft);
}
.insights-page .in-licence{
  display:inline-block; margin:0 0 16px;
  background:var(--gold); color:var(--teal-deep);   /* the page's only gold, as a FILL */
}
.insights-page .in-read-links{ display:grid; gap:10px; margin:20px 0 0; }

/* ─── S7 the ledger ───────────────────────────────────────────────────── */

/* the opener: a card you can see, not a line of mono text */
.insights-page .led{
  border:1px solid var(--line); border-radius:14px; background:var(--bg);
  overflow:hidden;
}
.insights-page .led-open{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:26px 28px; min-height:44px; cursor:pointer; list-style:none;
  transition:background .18s ease;
}
.insights-page .led-open::-webkit-details-marker{ display:none; }
.insights-page .led-open:hover{ background:var(--bg-soft); }
.insights-page .led-open:focus-visible{
  outline:2px solid var(--teal); outline-offset:-4px;
}
.insights-page .led-open-text{ display:grid; gap:5px; }
.insights-page .led-open-eyebrow{
  font:500 11px/1.5 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-soft);
}
.insights-page .led-open-title{
  font:400 22px/1.3 var(--serif); color:var(--teal-deep);
}
.insights-page .led-open-sub{
  font:400 13.5px/1.6 var(--sans); color:var(--text-soft);
}
.insights-page .led-open-marks{
  display:flex; align-items:center; gap:14px; flex:none;
}
.insights-page .led-open-caret{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  color:var(--teal); background:var(--bg);
  transition:transform .22s ease, background .18s ease, border-color .18s ease;
}
.insights-page .led-open:hover .led-open-caret{
  background:var(--teal); border-color:var(--teal); color:#fff;
}
.insights-page .led[open] .led-open-caret{ transform:rotate(180deg); }
.insights-page .led[open] .led-open{ border-bottom:1px solid var(--line); }

/* the body */
.insights-page .led-body{ padding:26px 28px 30px; }

/* tab rail — revealed by JS; without JS all three panels simply stack */
.insights-page .led-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
}
.insights-page .led-tab{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  padding:0 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg); color:var(--text); cursor:pointer;
  font:500 13px/1 var(--sans);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.insights-page .led-tab:hover{ border-color:var(--teal); }
.insights-page .led-tab:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.insights-page .led-tab[aria-selected="true"]{
  background:var(--teal); border-color:var(--teal); color:#fff;
}
.insights-page .led-tab-count{
  font:500 11px/1 var(--mono); padding:4px 7px; border-radius:999px;
  background:var(--bg-soft); color:var(--text-soft);
}
.insights-page .led-tab[aria-selected="true"] .led-tab-count{
  background:rgba(255,255,255,.18); color:#fff;
}

/* panel head */
.insights-page .led-panel + .led-panel{ margin-top:44px; }
.insights-page .led-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin:0 0 18px; flex-wrap:wrap;
}
.insights-page .led-panel-headings{ flex:1 1 320px; min-width:0; }
.insights-page .led-panel-title{
  margin:0 0 6px; font:400 19px/1.35 var(--serif); color:var(--teal-deep);
}
.insights-page .led-panel-note{
  margin:0; max-width:56ch; font:400 14px/1.65 var(--sans); color:var(--text-soft);
}
.insights-page .led-copy{
  flex:none; min-height:44px; padding:0 15px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg);
  color:var(--teal); cursor:pointer; font:500 12.5px/1 var(--sans);
  transition:border-color .18s ease, background .18s ease;
}
.insights-page .led-copy:hover{ border-color:var(--teal); background:var(--bg-soft); }
.insights-page .led-copy:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.insights-page .led-copy[data-done="1"]{
  border-color:var(--teal); background:var(--teal); color:#fff;
}

/* the table itself.
   On a narrow screen the table scrolls sideways; a silent scroll looks like a
   clipped table, so the right edge fades while there is more to reach. */
.insights-page .in-tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  position:relative;
  scrollbar-width:thin;
}
/* JS arms the fade: without it we cannot know whether the table is scrolled,
   and a permanent fade would dim a table that already fits. */
.insights-page.is-armed .led-panel .in-tablewrap{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
}
.insights-page.is-armed .led-panel .in-tablewrap.is-end,
.insights-page.is-armed .led-panel .in-tablewrap.is-fits{
  -webkit-mask-image:none; mask-image:none;
}
.insights-page .led-table{
  width:100%; min-width:540px; border-collapse:collapse;
  font:400 14px/1.6 var(--sans); font-variant-numeric:tabular-nums;
}
.insights-page .led-table th,
.insights-page .led-table td{
  text-align:left; padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line); vertical-align:middle;
}
.insights-page .led-table thead th{
  font:500 11px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-soft); border-bottom:1px solid var(--text-soft);
  white-space:nowrap;
}
/* sortable headers get a button affordance only when JS wires them */
.insights-page .led-table thead th[data-sortable]{ cursor:pointer; user-select:none; }
.insights-page .led-table thead th[data-sortable]:hover{ color:var(--teal); }
.insights-page .led-table thead th[data-sortable]::after{
  content:"↕"; margin-left:7px; opacity:.4; font-size:11px;
}
.insights-page .led-table thead th[aria-sort="ascending"]::after{ content:"↑"; opacity:1; }
.insights-page .led-table thead th[aria-sort="descending"]::after{ content:"↓"; opacity:1; }
.insights-page .led-table thead th[data-sortable]:focus-visible{
  outline:2px solid var(--teal); outline-offset:-2px;
}
.insights-page .led-table tbody th{ font-weight:500; color:var(--text); }
.insights-page .led-table tbody tr{ transition:background .14s ease; }
.insights-page .led-table tbody tr:hover{ background:var(--bg-soft); }
.insights-page .led-num{ text-align:right; white-space:nowrap; font-weight:500; }
.insights-page .led-region,
.insights-page .led-means{ color:var(--text-soft); }

/* proportion cell: a bar plus the number it encodes */
.insights-page .led-share{
  display:flex; align-items:center; gap:12px; min-width:200px;
}
.insights-page .led-bar{
  flex:1; height:8px; border-radius:999px; background:var(--bg-soft);
  overflow:hidden; min-width:60px;
}
.insights-page .led-bar > i{
  display:block; height:100%; width:var(--w); border-radius:999px;
  background:var(--teal);
  transform-origin:left center;
}
.insights-page .led-bar--culture > i{ background:var(--clay); }
.insights-page .led-bar--clinical > i{ background:var(--teal); }
.insights-page .led-pct{
  flex:none; min-width:52px; text-align:right;
  font:400 12.5px/1 var(--mono); color:var(--text-soft);
}

/* flag swatch mirrors the ink used in the figures above */
.insights-page .led-flag{
  display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:10px; vertical-align:baseline;
}
.insights-page .led-flag--culture{ background:var(--clay); }
.insights-page .led-flag--clinical{ background:var(--teal); }

/* footers carry meaning, not decoration */
/* the total is a summary, not another row of data: set it apart.
   A caveat row (.led-foot-note) is prose, so it must never get this weight. */
.insights-page .led-table tfoot tr:first-child:not(.led-foot-note) th,
.insights-page .led-table tfoot tr:first-child:not(.led-foot-note) td{
  border-top:2px solid var(--teal-deep); border-bottom:0;
  padding-top:16px; font-weight:600; color:var(--teal-deep);
}
.insights-page .led-table tfoot th,
.insights-page .led-table tfoot td{
  border-bottom:0; padding-top:15px; font-weight:500; color:var(--text);
}
.insights-page .led-table tbody tr:last-child th,
.insights-page .led-table tbody tr:last-child td{ border-bottom:0; }
.insights-page .led-table tfoot .led-share{ color:var(--text-soft); font-weight:400; }
.insights-page .led-foot-note td{
  padding-top:16px; font:400 13px/1.65 var(--sans); color:var(--text-soft);
  font-weight:400; max-width:74ch;
}
.insights-page .led-table tfoot tr.led-foot-note:first-child td{
  border-top:1px solid var(--line);
}
.insights-page .led-foot{
  margin:30px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font:400 13.5px/1.7 var(--sans); color:var(--text-soft);
}

/* the reveal only animates once JS has armed the page */
.insights-page.is-armed .led-bar > i{
  transform:scaleX(0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.insights-page.is-armed .led[open] .led-bar > i{ transform:scaleX(1); }

/* ─── responsive ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  .insights-page .in-hero{ grid-template-columns:1fr; gap:34px; }
  .insights-page .in-colophon-side{
    border-left:0; border-top:1px solid var(--line); padding:26px 0 0;
  }
  .insights-page .in-colophon-side dl{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px;
  }
  .insights-page .in-reg{ grid-template-columns:1fr; gap:8px; }
  .insights-page .in-reg-fig{ text-align:left; }
  .insights-page .in-reg-fig .in-swatch{ display:inline-block; margin:0 9px 0 0; width:2px; height:14px; vertical-align:-3px; }
  .insights-page .in-reg-fig .in-of{ display:inline; margin-left:7px; }
  .insights-page .in-regs{ gap:28px; }
  .insights-page .in-ruler{ margin-right:0; }
  .insights-page .in-colophon{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .insights-page .in-cell:nth-child(3){ padding-left:0; border-left:0; }

  .insights-page .in-flag{ grid-template-columns:minmax(0,1fr) 96px; gap:10px 20px; padding:12px 0; }
  .insights-page .in-flag-name{ grid-column:1/2; }
  .insights-page .in-flag-num{ grid-column:2/3; }
  .insights-page .in-track{ grid-column:1/3; height:16px; }
  .insights-page .in-span{ height:8px; }
  .insights-page .in-gloss{ padding-left:0; }

  .insights-page .in-fan{ grid-template-columns:1fr; gap:32px; }
  .insights-page .in-fan-svg svg{ width:300px; margin:0 auto; }
  .insights-page .in-gaps{ grid-template-columns:1fr; gap:32px; }
  .insights-page .in-ghost svg{ width:150px; }
  .insights-page .in-read-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:520px){
  .insights-page .in-scrip span + span{
    margin:6px 0 0; padding:0; border-left:0; flex-basis:100%;
  }
  .insights-page .in-colophon-side dl{ grid-template-columns:1fr; }
  /* four stacked cards is exactly what the old page did — keep a ruled list */
  .insights-page .in-colophon{ grid-template-columns:1fr; gap:0; }
  .insights-page .in-cell{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:14px 0; border-left:0; border-bottom:1px solid var(--line); min-height:26px;
  }
  .insights-page .in-cell b{ font-size:24px; }
  .insights-page .in-cell span{ margin:0; text-align:right; }

  .insights-page .in-flag{ grid-template-columns:minmax(0,1fr) 84px; }
  .insights-page .in-track{ height:18px; }
  .insights-page .in-span{ height:10px; }
  .insights-page .in-cap{ width:7px; height:7px; }
  .insights-page .in-qt{ opacity:.55; }

  .insights-page .in-fan-svg svg{ width:264px; }
  /* labels and ticks are unreadable this small — the list beside it carries them */
  .insights-page .in-fan .in-labels,
  .insights-page .in-fan .in-ticks{ display:none; }

  /* three children into two columns needs explicit placement, or .in-gap-body
     lands in the 60px glyph column and its text is squeezed to one word wide */
  .insights-page .in-gap{
    grid-template-columns:minmax(0,1fr) 60px;
    grid-template-areas:"code glyph" "body body";
    gap:8px 16px; align-items:start;
  }
  .insights-page .in-gap .in-code{ grid-area:code; align-self:center; }
  .insights-page .in-gap .in-glyph{ grid-area:glyph; }
  .insights-page .in-gap-body{ grid-area:body; }
  .insights-page .in-code{ grid-column:1/3; }
  .insights-page .in-glyph{ width:60px; height:60px; grid-row:2/3; }
  .insights-page .in-tables table{ min-width:420px; }
}

/* ─── reduced motion: everything sits at its final state ──────────────── */
@media (prefers-reduced-motion:reduce){
  .insights-page *,
  .insights-page *::before,
  .insights-page *::after{
    animation:none!important; transition:none!important; scroll-behavior:auto!important;
  }
  .insights-page .in-rule{ transform:scaleX(1); }
  .insights-page .in-lit{ clip-path:none; }
  .insights-page .in-span{ transform:translateY(-50%) scaleX(1); }
  .insights-page .in-cap{ transform:translateY(-50%) scale(1); }
  .insights-page .in-wedge{ opacity:var(--o,1); }
  .insights-page .in-tick-t{ opacity:.9; }
}

/* ── raster variant switch ───────────────────────────────────────────────────
   Both rasters carry the same n; exactly one is ever displayed. Wide (312x40)
   above 900px, tall (104x120) below, so a mark never falls under 2px. */
.insights-page .in-raster--tall{ display:none; }
.insights-page .in-raster--wide{ display:block; }
@media (max-width:900px){
  .insights-page .in-raster--wide{ display:none; }
  .insights-page .in-raster--tall{ display:block; }
}

/* ── armed state ─────────────────────────────────────────────────────────────
   Applied by data-insights.js on load. Everything above renders at its FINAL
   value by default, so a visitor without JavaScript sees all of the data;
   only when JS is running do figures get pulled back to be revealed. */
.insights-page.is-armed .in-span{ transform:translateY(-50%) scaleX(0); }
.insights-page.is-armed .in-cap{ transform:translateY(-50%) scale(.6); }
.insights-page.is-armed .in-wedge{ opacity:0; }
.insights-page.is-armed .in-rule{ transform:scaleX(0); }
.insights-page.is-armed .in-tick-t{ opacity:0; }

/* ── the ledger on a narrow screen ─────────────────────────────────────────
   The head is a row of three on desktop; below 640px it must stack, or the
   note is squeezed into a one-word column beside the copy button. */
@media (max-width:640px){
  .insights-page .led-panel-head{ display:block; }
  .insights-page .led-panel-note{ max-width:none; }
  .insights-page .led-copy{ margin-top:14px; width:100%; }
  .insights-page .led-open-title{ font-size:22px; }
  .insights-page .led-tabs{ gap:8px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   Contact + Partner — "an open working table"
   Page-scoped via .contact-page / .partner-page on <main>. Nothing here may
   affect another page. See tools/briefs/contact-partner-PLAN.md §6.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.contact-page,.partner-page) .page-title {
  font-size:var(--head-size);
  line-height:var(--head-lh);
  letter-spacing:var(--head-ls);
}
:is(.contact-page,.partner-page) .wb-display {
  margin:0;
  font-family:var(--sans);
  font-size:var(--head-size);
  font-weight:800;
  line-height:var(--head-lh);
  letter-spacing:var(--head-ls);
  color:var(--teal);
}
:is(.contact-page,.partner-page) .wb-card-title {
  margin:0;
  font:700 26px/1.24 var(--sans);
  letter-spacing:-.025em;
  color:var(--teal);
}
:is(.contact-page,.partner-page) .wb-split,
.partner-page .wb-partner-record {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr);
  gap:48px;
  align-items:start;
}
:is(.contact-page,.partner-page) .wb-split > *,
.partner-page .wb-partner-record > * { min-width:0; }
:is(.contact-page,.partner-page) .wb-prose p {
  margin:0 0 20px;
  max-width:none;
  padding:0;
  font:400 17px/1.7 var(--serif);
  color:var(--text-soft);
}
:is(.contact-page,.partner-page) .wb-prose p:last-child { margin-bottom:0; }
:is(.contact-page,.partner-page) .wb-meta {
  margin:0;
  font:500 12px/1.5 var(--mono);
  letter-spacing:.025em;
  color:var(--teal);
}
:is(.contact-page,.partner-page) .wb-mark {
  display:block;
  width:64px;
  height:64px;
  flex:none;
  fill:none;
  stroke:var(--teal);
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:is(.contact-page,.partner-page) .wb-mark .wb-fill-clay { fill:var(--clay); stroke:none; }
:is(.contact-page,.partner-page) .wb-mark .wb-fill-gold { fill:var(--gold); stroke:none; }
.partner-page .wb-arrow {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:is(.contact-page,.partner-page) .wb-text-link {
  color:var(--teal);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  overflow-wrap:anywhere;
}
:is(.contact-page,.partner-page) .wb-text-link:hover { text-decoration-thickness:2px; }
:is(.contact-page,.partner-page) .wb-text-link:active { color:var(--teal-deep); }
:is(.contact-page,.partner-page) :is(.wb-button,.wb-text-button,.wb-directory-link,.wb-text-link):focus-visible,
.contact-page :is(.wb-partnership-links a,.wb-field input,.wb-field select,.wb-field textarea,.wb-draft-text):focus-visible {
  outline:2px solid var(--teal);
  outline-offset:4px;
}
:is(.contact-page,.partner-page) :is(.wb-button,.wb-text-button) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border:1px solid var(--teal);
  border-radius:4px;
  font:700 14px/1.5 var(--sans);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color 140ms ease-out,color 140ms ease-out;
}
:is(.contact-page,.partner-page) .wb-button { background:var(--teal); color:#fff; }
:is(.contact-page,.partner-page) .wb-button:hover { background:var(--teal-deep); }
:is(.contact-page,.partner-page) .wb-button:active { background:var(--teal-deep); text-decoration:underline; }
:is(.contact-page,.partner-page) .wb-button::selection { background:var(--gold); color:var(--teal-deep); }
.contact-page .wb-text-button {
  background:transparent;
  color:var(--teal);
  border-color:transparent;
  padding-inline:0;
  text-decoration:underline;
  text-underline-offset:4px;
}
.contact-page .wb-text-button:hover,
.contact-page .wb-text-button:active { text-decoration-thickness:2px; }
.partner-page .wb-directory {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 0 48px;
  border-top:1px solid var(--teal);
  border-bottom:1px solid var(--line);
}
.partner-page .wb-directory-link {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 16px;
  align-items:center;
  gap:12px;
  min-height:104px;
  padding:20px 16px;
  color:var(--teal);
  text-decoration:none;
  font:700 14px/1.45 var(--sans);
  transition:background-color 140ms ease-out;
}
.partner-page .wb-directory-link + .wb-directory-link { border-left:1px solid var(--line); }
.partner-page .wb-directory-link .wb-mark { width:40px; height:40px; }
.partner-page .wb-directory-link:hover { background:var(--bg-soft); text-decoration:underline; }
.partner-page .wb-directory-link:active { background:#E7EFEB; text-decoration:underline; }
.partner-page .wb-register-title { margin-bottom:36px; }
.partner-page .wb-partner-record {
  padding:36px 0;
  border-top:2px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.partner-page .wb-partner-record:last-child { padding-bottom:0; }
.partner-page .wb-partner-record:target { border-top-color:var(--teal); }
.partner-page .wb-partner-record:focus-visible { outline:2px solid var(--teal); outline-offset:6px; }
.partner-page .wb-record-head { display:grid; justify-items:start; gap:16px; }
.partner-page .wb-record-head > .wb-text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font:600 14px/1.5 var(--sans);
}
.partner-page .wb-scope-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px;
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.partner-page .wb-scope-list li {
  min-width:0;
  padding:12px 0;
  border-top:1px solid var(--line);
  font:500 14px/1.6 var(--sans);
  color:var(--teal);
  overflow-wrap:break-word;
}
.partner-page .wb-close-sign { display:grid; justify-items:start; gap:24px; }
.contact-page .wb-contact-rail { display:grid; gap:24px; }
.contact-page .wb-rail-heading { display:grid; gap:12px; }
.contact-page .wb-response-note { padding:20px; background:var(--bg-soft); }
.contact-page .wb-response-note > p:last-child {
  margin:12px 0 0;
  font:400 18px/1.6 var(--serif);
  color:var(--teal);
}
.contact-page .wb-contact-rail > .wb-text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  justify-self:start;
  font:600 14px/1.5 var(--sans);
}
.contact-page .wb-writing { padding-top:24px; border-top:2px solid var(--teal); }
.contact-page #contact-form { scroll-margin-top:calc(var(--header-h) + 24px); }
.contact-page #contact-form:focus-visible,
.contact-page #draft-title:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
.contact-page .wb-form-help {
  margin:12px 0 0;
  font:400 13px/1.6 var(--sans);
  color:var(--text-soft);
}
.contact-page .wb-contact-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:28px;
}
.contact-page .wb-field { display:grid; align-content:start; gap:8px; min-width:0; }
.contact-page .wb-field--full { grid-column:1/-1; }
.contact-page .wb-field label { font:600 14px/1.5 var(--sans); color:var(--teal); }
.contact-page .wb-field :is(input,select,textarea) {
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:48px;
  margin:0;
  padding:12px;
  border:1px solid var(--text-soft);
  border-radius:3px;
  background:#fff;
  color:var(--text);
  font:400 16px/1.5 var(--sans);
  box-shadow:none;
}
.contact-page .wb-field textarea {
  min-height:192px;
  resize:vertical;
  font-family:var(--serif);
}
.contact-page .wb-field :is(input,select,textarea):hover,
.contact-page .wb-field :is(input,select,textarea):focus { border-color:var(--teal); }
.contact-page .wb-field [aria-invalid="true"] { border:2px solid var(--teal); padding:11px; }
.contact-page .wb-error { margin:0; font:500 13px/1.5 var(--sans); color:var(--teal-deep); }
.contact-page .wb-partnership-help { margin-top:4px; padding:16px; background:var(--bg-soft); }
.contact-page .wb-partnership-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 20px;
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
.contact-page .wb-partnership-links a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  color:var(--teal);
  font:600 14px/1.5 var(--sans);
  text-decoration:underline;
  text-underline-offset:4px;
}
.contact-page .wb-partnership-links a:hover,
.contact-page .wb-partnership-links a:active { text-decoration-thickness:2px; }
.contact-page .wb-partnership-links .wb-mark { width:28px; height:28px; }
.contact-page .wb-context { margin:12px 0 0; font:600 14px/1.5 var(--sans); color:var(--teal); }
.contact-page .wb-form-actions { display:flex; align-items:center; gap:20px; }
.contact-page .wb-form-actions .wb-form-help { margin:0; }
.contact-page .wb-draft { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.contact-page .wb-draft-text {
  margin:20px 0 8px;
  padding:16px;
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--bg-soft);
  color:var(--text);
  font:400 13px/1.65 var(--mono);
}
.contact-page .wb-status { margin:12px 0 0; font:500 13px/1.6 var(--sans); color:var(--teal); }
.contact-page .wb-status:empty { margin:0; }
.contact-page [hidden] { display:none !important; }
@media (max-width:900px) {
  :is(.contact-page,.partner-page) .wb-split,
  .partner-page .wb-partner-record { grid-template-columns:minmax(0,1fr); gap:28px; }
  .partner-page .wb-directory { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:36px; }
  .partner-page .wb-directory-link { min-height:88px; }
  .partner-page .wb-directory-link:nth-child(3) { border-left:0; }
  .partner-page .wb-directory-link:nth-child(n+3) { border-top:1px solid var(--line); }
  .partner-page .wb-record-head { grid-template-columns:64px minmax(0,1fr); gap:12px 20px; }
  .partner-page .wb-record-head > .wb-mark { grid-row:1/3; }
  .partner-page .wb-record-head > .wb-text-link { grid-column:2; }
  .contact-page .wb-contact-rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
  .contact-page .wb-rail-heading { grid-column:1; }
  .contact-page .wb-contact-rail > .wb-prose { grid-column:1; grid-row:2; }
  .contact-page .wb-response-note { grid-column:2; grid-row:1/3; }
  .contact-page .wb-contact-rail > .wb-text-link { grid-column:1/-1; }
}
@media (max-width:600px) {
  :is(.contact-page,.partner-page) .wb-card-title { font-size:23px; }
  .partner-page .wb-directory-link { grid-template-columns:32px minmax(0,1fr); gap:10px; padding:16px 10px; min-height:96px; font-size:13px; }
  .partner-page .wb-directory-link .wb-mark { width:32px; height:32px; }
  .partner-page .wb-directory-link .wb-arrow { display:none; }
  .partner-page .wb-partner-record { padding:28px 0; gap:20px; }
  .partner-page .wb-record-head { grid-template-columns:48px minmax(0,1fr); gap:10px 16px; }
  .partner-page .wb-record-head > .wb-mark { width:48px; height:48px; }
  .partner-page .wb-scope-list { grid-template-columns:minmax(0,1fr); margin-top:20px; }
  .contact-page .wb-contact-rail,
  .contact-page .wb-contact-form { grid-template-columns:minmax(0,1fr); }
  .contact-page .wb-contact-rail > * { grid-column:1; grid-row:auto; }
  .contact-page .wb-field--full { grid-column:1; }
  .contact-page .wb-contact-form { gap:20px; }
  .contact-page .wb-form-actions { flex-direction:column; align-items:stretch; gap:12px; }
  .contact-page .wb-form-actions .wb-button { width:100%; }
  .contact-page .wb-partnership-help { padding:12px; }
  .contact-page .wb-partnership-links { gap:4px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  :is(.contact-page,.partner-page) :is(.wb-button,.wb-text-button,.wb-directory-link) { transition:none; }
}
@media (forced-colors:active) {
  :is(.contact-page,.partner-page) .wb-mark { stroke:CanvasText; }
  :is(.contact-page,.partner-page) .wb-mark :is(.wb-fill-clay,.wb-fill-gold) { fill:CanvasText; }
  :is(.contact-page,.partner-page) .wb-button { border-color:ButtonText; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Hero — flat accent fill, white type. Page-scoped: .page-hero on the other
   11 pages is untouched. The header sits transparent over it.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.contact-page,.partner-page) .wb-hero {
  background:var(--teal);
  padding:clamp(72px,10vh,124px) 0 clamp(64px,8vh,104px);
}
:is(.contact-page,.partner-page) .wb-hero .eyebrow { color:var(--gold); }
:is(.contact-page,.partner-page) .wb-hero .page-title {
  color:#fff;
  font-size:clamp(40px,6.4vw,84px);
  line-height:1.03;
  letter-spacing:-.04em;
  max-width:16ch;
}
:is(.contact-page,.partner-page) .wb-hero .page-lede {
  color:rgba(255,255,255,.82);
  max-width:62ch;
}

/* directory rides inside the hero, on the fill */
.partner-page .wb-hero .wb-directory {
  margin:clamp(44px,5.5vw,72px) 0 0;
  border-top:1px solid rgba(255,255,255,.28);
  border-bottom:0;
}
.partner-page .wb-hero .wb-directory-link {
  border-right:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.partner-page .wb-hero .wb-directory-link:last-child { border-right:0; }
.partner-page .wb-hero .wb-directory-link .wb-mark { stroke:#fff; }
.partner-page .wb-hero .wb-directory-link .wb-fill-clay { fill:var(--gold); }
.partner-page .wb-hero .wb-directory-link:hover { background:rgba(255,255,255,.08); }
.partner-page .wb-hero .wb-directory-link:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
@media (max-width:600px){
  :is(.contact-page,.partner-page) .wb-hero .page-title { max-width:none; }
  .partner-page .wb-hero .wb-directory-link:nth-child(2n) { border-right:0; }
}