/* headers: the proposed shared page header (.hd) and the /headers options page (.hds-*). --b- tokens only. */

/* ---------------------------------------------------------------- the header: one component, two families
   It runs up behind the floating bar, as the category heads do, and its ground ends in the page's own colour
   (--b-paper), so nothing marks where the head stops. */
.hd { --hd-top: 56px; --hd-foot: 64px; --hd-art-w: clamp(280px, 27vw, 400px);
  position: relative; isolation: isolate; margin-top: calc(-1 * (var(--nav-h) + var(--sp-4)));
  padding: calc(var(--nav-h) + var(--sp-2) + var(--hd-top)) 0 var(--hd-foot);
  color: var(--b-hero-ink); --focus: var(--b-primary); background: var(--hd-ground, var(--b-paper)); }
body.has-annc .hd { padding-top: calc(var(--annc-h) + var(--nav-h) + var(--sp-2) + var(--hd-top)); }
/* The dot grid of the hero, fading out before the foot so it never ends on a line */
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(var(--b-shadow), .05) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(#000 25%, transparent 88%); mask-image: linear-gradient(#000 25%, transparent 88%); }
.hd.g-subtle { --hd-ground: linear-gradient(180deg, color-mix(in oklch, var(--b-deep-950) 78%, var(--b-paper)) 0%, color-mix(in oklch, var(--b-deep-950) 34%, var(--b-paper)) 58%, var(--b-paper) 100%); }
.hd.g-clay { --hd-ground: linear-gradient(180deg, transparent 70%, var(--b-paper) 100%), var(--b-hero-ramp); }
.hd.g-deep { --hd-ground: linear-gradient(180deg, transparent 66%, var(--b-paper) 100%),
  radial-gradient(60% 140% at 100% 0%, rgba(var(--b-accent-rgb), .16), transparent 70%),
  linear-gradient(180deg, color-mix(in oklch, var(--b-deep-600), var(--b-on-hero) 22%) 0%, var(--b-deep-600) 42%, var(--b-ground) 86%); }

.hd-ab { margin: 0 0 var(--sp-2); }
.hd-ab .ab-bar { margin: 0; }
.hd .crumbs { margin: 0 0 var(--sp-2); color: var(--b-hero-ink-2); }
.hd .crumbs a { color: var(--b-hero-ink); }
.hd .crumbs li + li::before { color: var(--b-hero-ink-2); }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
@media (min-width: 1001px) { .hd.has-art .hd-grid { grid-template-columns: minmax(0, 1fr) var(--hd-art-w); } }
@media (max-width: 1000px) { .hd-art { display: none; } }
.hd-eyebrow { margin: 0 0 var(--sp-1-5); font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-accent-ink-light); }
.hd-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.hd h1 { margin: 0; max-width: var(--hd-h1-w, 18em); font: 500 var(--lh-h1)/var(--lh-h1-lh) var(--font-display); letter-spacing: -0.035em; color: var(--b-hero-ink); text-wrap: balance; }
.hd .lede { max-width: var(--hd-lede-w, 40em); margin: var(--sp-2) 0 0; font-size: 18px; line-height: 1.55; color: var(--b-hero-ink-2); text-wrap: pretty; }
.hd .lede a { color: var(--b-hero-ink); }
/* A second paragraph (a category's introduction, an overview's), quieter than the lede */
.hd .hd-intro { max-width: var(--hd-intro-w, 40em); margin: var(--sp-1-5) 0 0; font-size: 16px; line-height: 1.6; color: var(--b-hero-ink-2); }
.hd-k { margin: 0 0 var(--sp-1); font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-hero-ink-2); }
.hd-qual { max-width: none; }
.hd-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.hd-center .hd-img { aspect-ratio: 21 / 8; }
.hd.hd-center .hd-h > h1 { margin-inline: 0; }
.hd-center .hd-ab { display: flex; justify-content: center; }
/* The slot (in the head) and the band just below it stack their parts with one gap, whatever the parts are, so a
   row of chips is never followed by a different space than a field or another row. */
.hd-slot, .hd-below { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.hd-slot { margin-top: var(--sp-4); }
.hd-slot > *, .hd-below > * { margin: 0; }
.hd:has(+ .hd-below) { --hd-foot: 36px; }
.hd-below { padding-block: 0 var(--sp-1); }
.hd-below > .hd-feat { align-self: stretch; margin-top: var(--sp-2); }
.hd-art .lh-rec { transform: none; }
.hd-art .ov-ill { min-height: 260px; }
.hd-cover { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px; }
.hd-search { align-self: stretch; width: 100%; max-width: 40em; }
.hd-search.is-wide { max-width: none; }
.hd-flag { --ch-fh: calc(var(--lh-h1) * var(--lh-h1-lh)); }
/* A flag (a country hub) sits beside the name, and the two centre together */
.hd-h > h1 { margin-inline: 0; }
.hd-h:has(> .hd-flag) { flex-wrap: nowrap; }
.hd-h .ptag { flex: none; }

/* One chip for every header: criteria, section links, figures, facts, suggestions, filters, switches */
.hd-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; }
.hd-chips > li { display: flex; }
.hd-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1-5); border: 0; border-radius: 999px;
  background: color-mix(in oklch, var(--b-surface) 62%, transparent); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1);
  color: var(--b-ink); font: 500 14.5px/1.25 var(--font-text); text-decoration: none; text-align: left; }
.hd-chip .tflag { flex: none; }
.hd-chip .tflag + .tflag { margin-left: calc(var(--sp-1-5) * -1); }
.hd-chip .ico { flex: none; width: 16px; height: 16px; color: var(--b-primary); }
.hd-chip > b { font-weight: 600; color: var(--b-primary); font-variant-numeric: tabular-nums; }
.hd-chip.is-fig { padding-left: var(--sp-2); }
:is(a, button, label).hd-chip { cursor: pointer; transition: background-color .15s, box-shadow .15s; }
:is(a, button, label).hd-chip:hover { background: var(--b-surface); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .2); }
button.hd-chip > b.n { color: var(--b-ink-2); font-weight: 500; }
.hd-chip:is([aria-pressed="true"], [aria-selected="true"]), .hd-chip:is([aria-pressed="true"], [aria-selected="true"]):hover { background: var(--b-ink-surface); color: var(--b-ink-surface-ink); box-shadow: none; }
.hd-chip:is([aria-pressed="true"], [aria-selected="true"]) :is(.ico, b, b.n) { color: inherit; }
.hd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b-ink-3); }
.hd-dot { flex: none; }
.hd-dot:is([data-s="ok"], [data-s="live"]) { background: var(--b-ok-ink); }
.hd-dot:is([data-s="proto"], [data-s="queue"]) { background: var(--b-accent-2); }
.hd-dot:is([data-s="build"], [data-s="cms"]) { background: var(--b-accent); }
.hd-dot[data-s="none"] { background: var(--b-rule); }
.hd-dot[data-s="part"] { background: linear-gradient(90deg, var(--b-ok-ink) 50%, var(--b-rule) 50%); }
.hd-chip.is-select { position: relative; padding: 0; }
.hd-chip.is-select select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 var(--sp-5) 0 var(--sp-2); border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: pointer; }
.hd-chip.is-select .ico { position: absolute; right: 15px; color: var(--b-ink-2); pointer-events: none; }
.hd-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-1-5); font-size: 14.5px; color: var(--b-hero-ink-2); }
.hd-count { font-size: 15px; color: var(--b-ink-2); }
.hd-count b { color: var(--b-ink); }
.hd-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.hd-sw span { position: relative; aspect-ratio: 1; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1); }
.hd-sw i { position: absolute; left: 10px; bottom: 8px; font: 500 10.5px/1 var(--font-mono); font-style: normal; color: var(--b-ink-2); background: var(--b-surface); padding: var(--sp-0-5) var(--sp-1); border-radius: 999px; }

/* The centred family: About, Team, Funders & partners, Contact (and the -C versions). Same spacing, one centre line. */
.hd-center { text-align: center; }
.hd-center .crumbs ol, .hd-center .hd-h { justify-content: center; }
/* Line length LEN-E (picked 23 Oct): the title on one line where it fits, lede and introduction as one paragraph */
.hd-center { --hd-h1-w: 26em; --hd-lede-w: 58em; --hd-intro-w: 62em; }
.hd-center :is(.lede, .hd-intro) { text-wrap: balance; }
.hd-center h1 { margin-inline: auto; }
.hd-center .lede { margin-inline: auto; }
/* Line length, as compared at /headers (LEN-E is the default above; LEN-A was the first measure) */
.hd-center.len-a { --hd-h1-w: 16em; --hd-lede-w: 36em; --hd-intro-w: 40em; }
.hd-center.len-a :is(.lede, .hd-intro) { text-wrap: pretty; }
.hd-center.len-b { --hd-h1-w: 22em; --hd-lede-w: 46em; --hd-intro-w: 52em; }
.hd-center.len-c { --hd-h1-w: 26em; --hd-lede-w: 56em; --hd-intro-w: 62em; }
.hd-center.len-d { --hd-h1-w: none; --hd-lede-w: 64em; --hd-intro-w: 72em; }
.hd-center.len-e { --hd-h1-w: 26em; --hd-lede-w: 58em; }
.hd-center:is(.len-b, .len-c, .len-d, .len-e) :is(.lede, .hd-intro) { text-wrap: balance; }
.hd-center .hd-slot, .hd-below.is-center { align-items: center; }
.hd-center .hd-chips, .hd-below.is-center .hd-chips, .hd-center .hd-try, .hd-center .hds-legend { justify-content: center; }
.hd-center .hd-intro, .hd-center .hds-rule { margin-inline: auto; }
.hd-center .hd-search { align-self: center; }
.hd-below.is-center > .hd-feat { text-align: left; }
/* A centred head with an image (an entry with a CMS image) puts it under the words, wide */
@media (min-width: 1001px) { .hd-center.has-art .hd-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-5); } }
.hd-center .hd-art { width: min(100%, 880px); }
.hd-center .hd-cover { aspect-ratio: 21 / 8; }
.hd-tabs ul { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-0-5); margin: 0; padding: var(--sp-0-5); border-radius: 999px;
  background: color-mix(in oklch, var(--b-surface) 55%, transparent); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1); }
.hd-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-2); border-radius: 999px; color: var(--b-hero-ink); font-weight: 500; font-size: 15px; text-decoration: none; }
.hd-tabs a:hover { background: color-mix(in oklch, var(--b-surface) 70%, transparent); }
.hd-tabs a[aria-current="page"] { background: var(--b-surface); box-shadow: 0 1px 2px rgba(var(--b-shadow), .12); }
.hd-led { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-0-5) var(--sp-1-5); margin: 0; font-size: 15px; color: var(--b-hero-ink-2); }
.hd-led b { font-weight: 600; color: var(--b-hero-ink); }

/* ---------------------------------------------------------------- the options page */
.hds-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; font-size: 15px; color: var(--b-hero-ink-2); }
.hds-legend li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.hds-legend b { color: var(--b-hero-ink); font-weight: 600; }
.hds-sw { width: 34px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .14); }
.hds-sw.g-subtle { background: linear-gradient(180deg, color-mix(in oklch, var(--b-deep-950) 78%, var(--b-paper)), var(--b-paper)); }
.hds-sw.g-clay { background: var(--b-hero-ramp); }
.hds-sw.g-deep { background: linear-gradient(180deg, color-mix(in oklch, var(--b-deep-600), var(--b-on-hero) 22%), var(--b-deep-600)); }
.hds-rule { max-width: 46em; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--b-hero-ink-2); }

.hds { --hds-cols: 2; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-block: var(--sp-1-5) var(--sp-15); }
.hds-toc { position: sticky; top: calc(var(--nav-h) + 34px); max-height: calc(100vh - var(--nav-h) - 50px); overflow: auto; padding: var(--sp-0-5) var(--sp-0-5) var(--sp-1-5); }
body.has-annc .hds-toc { top: calc(var(--annc-h) + var(--nav-h) + 34px); max-height: calc(100vh - var(--annc-h) - var(--nav-h) - 50px); }
.hds-toc h2, .hds-picks h3 { margin: 0 0 var(--sp-1); font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink-2); }
.hds-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hds-toc ol button { display: flex; align-items: baseline; gap: var(--sp-1); width: 100%; min-height: 30px; padding: var(--sp-0-5) var(--sp-1); border: 0; border-radius: 10px; background: none; color: var(--b-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hds-toc ol button:hover { background: var(--b-surface); }
.hds-toc ol button span { flex: none; width: 3.6em; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--b-primary); }
.hds-size { display: flex; gap: var(--sp-0-5); margin: var(--sp-2) 0 var(--sp-3); padding: 3px; border-radius: 999px; background: var(--b-surface-2); width: fit-content; }
.hds-size > span { align-self: center; padding: 0 var(--sp-1) 0 var(--sp-1); font-size: 13px; color: var(--b-ink-2); }
.hds-size button { white-space: nowrap; min-width: 34px; min-height: 30px; padding: 0 var(--sp-1-5); border: 0; border-radius: 999px; background: none; color: var(--b-ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.hds-size button[aria-pressed="true"] { background: var(--b-surface); color: var(--b-ink); box-shadow: 0 1px 2px rgba(var(--b-shadow), .12); }
.hds-picks { margin-bottom: var(--sp-0-5); padding: var(--sp-2); border-radius: 18px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .05); }
.hds-picks-l { margin: 0 0 var(--sp-1); font: 500 14px/1.5 var(--font-mono); color: var(--b-ink); word-break: break-word; }
.hds-picks-l.is-empty { font-family: inherit; font-size: 14px; color: var(--b-ink-2); margin: 0; }
.hds-picks .linkish { margin-left: var(--sp-1); font-size: 14px; }

.hds-sec { margin-bottom: var(--sp-9); scroll-margin-top: calc(var(--nav-h) + 34px); outline: none; }
body.has-annc .hds-sec { scroll-margin-top: calc(var(--annc-h) + var(--nav-h) + 34px); }
.hds-sec-h { margin-bottom: var(--sp-2-5); }
.hds-sec-h h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-1); font: 500 1.6rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--b-ink); }
.hds-code { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--b-primary); }
.hds-fam { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-1) var(--sp-1); border-radius: 999px; background: var(--b-surface-2); color: var(--b-ink-2); }
.hds-covers, .hds-today { max-width: 60em; margin: var(--sp-0-5) 0 0; font-size: 14.5px; line-height: 1.5; color: var(--b-ink-2); }
.hds-covers b, .hds-today b { color: var(--b-ink); font-weight: 600; }
.hds-grid { display: grid; grid-template-columns: repeat(var(--hds-cols), minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }

.hds-card { margin: 0; }
.hds-frame { position: relative; height: calc(var(--hds-h) * var(--hds-s, .3)); overflow: hidden; border-radius: 14px; background: var(--b-paper);
  box-shadow: 0 0 0 1px rgba(var(--b-shadow), .12), 0 8px 24px -14px rgba(var(--b-shadow), .4); }
.hds-card.is-cur .hds-frame { box-shadow: 0 0 0 1px rgba(var(--b-shadow), .12), 0 0 0 5px var(--b-surface-2); }
.hds-card.is-picked .hds-frame { box-shadow: 0 0 0 3px var(--b-primary), 0 8px 24px -14px rgba(var(--b-shadow), .4); }
.hds-zoom { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.hds-zoom:focus-visible { outline: 3px solid var(--b-primary); outline-offset: 2px; }
.hds-card figcaption { display: flex; align-items: flex-start; gap: var(--sp-1-5); margin-top: var(--sp-1-5); }
.hds-id { flex: none; padding: var(--sp-0-5) var(--sp-1) var(--sp-0-5); border-radius: 999px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); font: 500 12px/1.1 var(--font-mono); letter-spacing: .05em; }
.hds-card.is-cur .hds-id { background: var(--b-surface-2); color: var(--b-ink); }
.hds-t { display: grid; gap: 3px; min-width: 0; flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--b-ink); }
.hds-t b { font-weight: 600; }
.hds-t span { font-size: 13.5px; color: var(--b-ink-2); }
.hds-pick { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 34px; padding: 0 var(--sp-2); border-radius: 999px; border: 1px solid rgba(var(--b-shadow), .2); background: var(--b-surface); color: var(--b-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.hds-pick:hover { border-color: var(--b-primary); }
.hds-pick[aria-pressed="true"] { background: var(--b-primary); border-color: var(--b-primary); color: var(--b-accent-ink); }
.hds-pick .ico { width: 15px; height: 15px; }

/* A sample is the page at 1440px, scaled into its frame. The values that follow the viewport are fixed at 1440's. */
.hds-stage { --page-pad: 120px; --lh-h1: 3.6rem; --hd-art-w: 400px; --annc-h: 0px;
  position: absolute; top: 0; left: 0; width: 1440px; height: var(--hds-h); overflow: hidden; background: var(--b-paper);
  transform: scale(var(--hds-s, .3)); transform-origin: 0 0; pointer-events: none; }
.hds-stage .hd { margin-top: 0; padding-top: calc(var(--nav-h) + var(--sp-2) + var(--hd-top)); }
.hds-stage .site-head { position: absolute !important; top: 14px !important; left: var(--page-pad) !important; right: var(--page-pad) !important; transform: none !important; }
.hds-stage.with-annc { --annc-h: 40px; }
.hds-stage .annc { position: absolute !important; }
.hds-stage.with-annc .site-head { top: calc(var(--annc-h) + 14px) !important; }
.hds-stage.with-annc .hd { padding-top: calc(var(--annc-h) + var(--nav-h) + var(--sp-2) + var(--hd-top)); }
.hds-stage iframe { display: block; width: 1440px; height: 100%; border: 0; background: var(--b-paper); }
.hds-pg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding-top: var(--sp-4); }
.hds-pg span { height: 240px; border-radius: 22px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .05); }

.hds-dlg { max-width: none; max-height: none; padding: 0; border: 0; border-radius: 18px; background: var(--b-surface); box-shadow: 0 30px 80px -20px rgba(var(--b-shadow), .5); }
.hds-dlg::backdrop { background: rgba(var(--b-shadow), .55); }
.hds-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1-5) var(--sp-1) var(--sp-2-5); }
.hds-dlg-top h2 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--b-ink); }
.hds-dlg-box { position: relative; overflow: hidden; }

@media (max-width: 1000px) {
  .hds { grid-template-columns: minmax(0, 1fr); }
  .hds-toc { position: static; max-height: none; }
  .hds-toc ol { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .hds-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- ground colours (/headers COL-1…8)
   LIRNEasia's secondary yellow and slate are not in the theme yet, so they are named here. Each hue sets --hd-c, its
   full-strength top colour; the sample's ground (subtle, Clay, deeper) sets how much of it shows. Clay is the default
   and keeps the ramps above. Ember and Ink are dark: one strength, light text, and a short fade at the foot. */
:root { --b-hd-sun: #fcba04; --b-hd-slate: #444751; }
/* Linen: the theme's paper a few shades down, neutral where Clay is brown (the paper itself was too close to the page to read) */
[data-hue="linen"] { --hd-c: color-mix(in oklch, var(--b-deep-600), var(--b-on-hero) 16%); }
[data-hue="rose"] { --hd-c: color-mix(in oklch, var(--b-accent) 30%, var(--b-paper)); }
[data-hue="coral"] { --hd-c: color-mix(in oklch, var(--b-accent-2) 42%, var(--b-paper)); }
[data-hue="sand"] { --hd-c: color-mix(in oklch, var(--b-hd-sun) 46%, var(--b-paper)); }
[data-hue="stone"] { --hd-c: color-mix(in oklch, var(--b-hd-slate) 30%, var(--b-paper)); }
[data-hue="ember"] { --hd-c: var(--b-accent-600); --hd-c0: color-mix(in oklch, var(--b-accent-600), var(--b-ink-surface-2) 38%); }
[data-hue="ink"] { --hd-c: var(--b-ink-surface); --hd-c0: var(--b-ink-surface-2); }
.hd { --hd-k: 78%; --hd-dk: 0%; }
.hd.g-subtle { --hd-k: 42%; }
.hd.g-deep { --hd-k: 100%; --hd-dk: 14%; }
.hd:is([data-hue="linen"], [data-hue="rose"], [data-hue="coral"], [data-hue="sand"], [data-hue="stone"]) {
  --hd-top-c: color-mix(in oklch, color-mix(in oklch, var(--hd-c) var(--hd-k), var(--b-paper)), var(--b-on-hero) var(--hd-dk));
  --hd-ground: linear-gradient(180deg, var(--hd-top-c) 0%,
    color-mix(in oklch, var(--hd-top-c) 62%, var(--b-paper)) 34%,
    color-mix(in oklch, var(--hd-top-c) 24%, var(--b-paper)) 68%, var(--b-paper) 100%); }
.hd:is([data-hue="ember"], [data-hue="ink"]) { --hd-foot: 104px;
  --hd-ground: linear-gradient(180deg, var(--hd-c0) 0%, var(--hd-c) calc(100% - 96px), var(--b-paper) 100%);
  --b-hero-ink: var(--b-ink-surface-ink); --b-hero-ink-2: color-mix(in oklch, var(--b-ink-surface-ink) 80%, transparent);
  --b-hero-chip-line: color-mix(in oklch, var(--b-ink-surface-ink) 36%, transparent); --focus: var(--b-accent-on-dark); }
.hd:is([data-hue="ember"], [data-hue="ink"])::before { opacity: 0; }
.hd:is([data-hue="ember"], [data-hue="ink"]) .hd-eyebrow { color: var(--b-accent-on-dark); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .lh-stats { border-color: color-mix(in oklch, var(--b-ink-surface-ink) 22%, transparent); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .lh-stats dt { color: var(--b-hero-ink-2); }
.hd[data-hue="ember"] .lh-stats dd { color: var(--b-ink-surface-ink); }
.hd[data-hue="ink"] .lh-stats dd { color: var(--b-accent-on-dark); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .hd-meta .ico { color: var(--b-hero-ink); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .hd-tabs ul { background: color-mix(in oklch, var(--b-ink-surface-ink) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--b-ink-surface-ink) 20%, transparent); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .hd-tabs a:hover { background: color-mix(in oklch, var(--b-ink-surface-ink) 14%, transparent); }
.hd:is([data-hue="ember"], [data-hue="ink"]) .hd-tabs a[aria-current="page"] { color: var(--b-ink); }

/* the colour switch on /headers */
.hds-hue { margin-top: var(--sp-2); }
.hds-hue h3 { margin: 0 0 var(--sp-1); font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink-2); }
.hds-hue-n { margin: 0 0 var(--sp-1); font-size: 12.5px; line-height: 1.45; color: var(--b-ink-2); }
.hds-hue-sw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-0-5); }
.hds-hue-sw button { display: flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 3px var(--sp-1) 3px var(--sp-0-5); border: 0; border-radius: 999px; background: none; color: var(--b-ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.hds-hue-sw button:hover { background: var(--b-surface); }
.hds-hue-sw button[aria-pressed="true"] { background: var(--b-surface); box-shadow: inset 0 0 0 1.5px var(--b-primary); }
.hds-chip { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .16); background: linear-gradient(160deg, var(--hd-c) 30%, var(--b-paper)); }
.hds-chip[data-hue="clay"] { background: var(--b-hero-ramp); }
.hds-chip:is([data-hue="ember"], [data-hue="ink"]) { background: linear-gradient(160deg, var(--hd-c0), var(--hd-c)); }

/* Counts on toggle chips, one treatment site-wide (Shajee, 24 Oct): the number sits in a circle at the chip's end, on a
   subtle tint; a selected chip keeps its full fill and the circle turns white with the number in red. Covers the header
   filter chips (b / b.n), the partner type chips, the overview chips and the Fixes switch. */
button.hd-chip > b, .ptn-chip > b, .ov-chip .ov-chip-n, .fx-seg button > b {
  display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; margin-right: calc(var(--sp-1) * -1); padding: 0 var(--sp-1);
  border-radius: 999px; background: rgba(var(--b-shadow), .08); color: var(--b-ink-2); opacity: 1;
  font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.fx-seg button > b { min-width: 20px; height: 20px; padding: 0 var(--sp-1); margin-right: calc(var(--sp-1) * -1); font-size: 11px; background: rgba(255, 255, 255, .12); color: inherit; }
:is(button.hd-chip, .ptn-chip, .ov-chip, .fx-seg button):is([aria-pressed="true"], [aria-selected="true"]) > :is(b, .ov-chip-n),
:is(button.hd-chip, .ptn-chip, .ov-chip, .fx-seg button):is([aria-pressed="true"], [aria-selected="true"]) > b.n { background: #fff; color: var(--b-primary); }

/* Filter chips that switch a list (formerly a tab track): the same chips, one row above the cards */
.ov-chips { margin: 0 0 var(--sp-controls); }
.ov-chips .hd-chip { white-space: nowrap; }

/* ext/hd-dots.js: the homepage's halftone dots toward the header's top right, a cloud that fades out on every side (no hard edge) */
.hd-dots { position: absolute; top: 0; right: 0; z-index: -1; width: min(70%, 960px); height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 55% at 72% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(60% 55% at 72% 45%, #000 25%, transparent 100%); }
@media print { .hd-dots { display: none; } }

/* Selected pills: a subtle ink gradient (Shajee, 25 Oct; chosen over flat ink, red and ink-to-red) */
:root { --sel-bg: linear-gradient(135deg, color-mix(in srgb, var(--b-ink-surface) 82%, #fff) 0%, var(--b-ink-surface) 55%, color-mix(in srgb, var(--b-ink-surface) 82%, #000) 100%); }
:root :is(.hd-chip, .ptn-chip, .ov-chip, .pj .pe-tab, .dsx-tjump [role="tab"]):is([aria-pressed="true"], [aria-selected="true"]),
:root :is(.hd-chip, .ptn-chip, .ov-chip, .pj .pe-tab):is([aria-pressed="true"], [aria-selected="true"]):hover {
  background: var(--sel-bg); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -14px rgba(var(--b-shadow, 40, 10, 10), .7); }