/* ========================================================================== foojay.io — Hugo theme stylesheet Replaces the v0 structural scaffolding with the site's visual design. THE PALETTE IS THE LIVE SITE'S, READ OUT OF THE LIVE SITE'S OWN CSS (wp-content/themes/foojay/css/main.css). The scaffold's original guess was a warm amber accent over navy ink with "Java blue" as the secondary, described here as "reconstructed from the live foojay.io theme". It was reconstructed wrong: there is no amber token in that stylesheet at all. Its `:root` is --text-main #37474f, --blue #3562e5, --green #5eb761, --section-bg #edf9fe, and #4fc3f7 (the logo blue) appears 153 times. So every brand token below is now either that file's value or derived from one of its hues. Three things about that are deliberate rather than transcription: 1. THE ACCENT IS #50c2f7, THE LOGO'S OWN VALUE, not the #4fc3f7 the live CSS uses -- one step apart and indistinguishable, but the logo PNG is the artwork everything else has to sit beside, so it wins. 2. A BRIGHT BLUE CANNOT BE ACCENT AND ACCENT-TEXT AT ONCE. #50c2f7 measures 2.02:1 on white, so it is a fill, a border and a tint here and never text -- --brand-accent-strong is the same hue walked down to 4.75:1. The live site does not make this split and pays for it: #4fc3f7 is its body-link colour, i.e. links at 2.02:1. 3. THE LIVE SITE'S MUTED INK IS NOT COPIED EITHER. rgba(55,71,79,.5) is 2.56:1 on white. --ink-muted is the same hue at 4.94:1. Realigning hues to the live design is the point; importing its contrast failures is not. Every pair below was measured, and the numbers in the comments are WCAG ratios against the surface named. If you change a value, re-measure it. Dark mode has no upstream to copy -- the live site has none -- so it is the same hues with the lightness inverted, and the same measurements. ========================================================================== */ :root { /* Brand -- the logo blue, its readable sibling, and its tint. accent #50c2f7 fills, borders, ticks, the featured panel's edge accent-strong accent AS TEXT: 4.75 on white, 4.59 on --page-bg accent-soft the featured panel's ground: --ink on it is 8.57 */ --brand-accent: #50c2f7; --brand-accent-strong: #087ab0; --brand-accent-soft: #e4f4fc; /* THE FOCUS RING IS ITS OWN TOKEN, and in the light scheme it is NOT --brand-accent. WCAG 1.4.11 asks a focus indicator for 3:1 against what it sits on, and #50c2f7 measures 2.02 on --surface, 1.95 on --page-bg and 1.88 on --surface-sunken -- the same reason point 2 above rules the accent out as text, applied to the one piece of UI a keyboard user navigates by. The readable sibling is 4.40 on --surface and 4.25 on --surface-sunken. Dark keeps #50c2f7, which is already 8.57 there. */ --focus-ring: #087ab0; /* The label on an accent FILL. Was #1c1204 in five places and #14100a in three more -- a warm near-black chosen for amber, which reads as a brown cast on blue. One token now, cool, 8.07 on --brand-accent. */ --on-accent: #06232f; /* Two more "label on a fill" tokens, and they exist because those fills INVERT between the schemes while --brand-accent does not: --brand-accent-strong is a dark blue on light and a pale one on dark, and the ink ramp does the same. A literal #fff was right in exactly one scheme each time -- .btn--accent:hover measured 1.60:1 in dark, .sponsor-badge 2.78. Both were wrong before this palette too; they are fixed here because re-measuring every pair is what a palette change is. */ --on-accent-strong: #ffffff; /* 4.75 on --brand-accent-strong */ --on-ink: #ffffff; /* 9.65 on --ink, 4.94 on --ink-muted */ /* Secondary = the live theme's --blue, and here as there it is the INTERACTIVE colour: `a { color }` is this token. 5.21 on white. */ --brand-secondary: #3562e5; --brand-secondary-soft:#eff2fd; /* Category chips are GREEN, which is what the live site does with a tag (--home-tags-text #5eb761 on --home-tags-bg rgba(94,183,97,.1)). Its own family rather than a third use of --brand-secondary, because the chips and the links are different things and a blue accent has already claimed the rest of the blue. #5eb761 is 2.49:1 as text, so the text is the same hue walked down to 5.18 and #5eb761 stays as the tint it is upstream. */ --tag-soft: #eff8ef; --tag-text: #377b39; /* Ink & surfaces -- --text-main verbatim, then its own hue for the two steps below it (the live site's rgba(.75)/(.5) are 4.74 and 2.56). */ --ink: #37474f; /* 9.65 on white */ --ink-soft: #4d646f; /* 6.24 */ --ink-muted: #5a7481; /* 4.94 -- the floor, meta lines live here */ --surface: #ffffff; --surface-sunken: #edf9fe; /* live --section-bg / --block-bg */ /* Was --surface-navy, and the name is kept because 30-odd rules use it: the header and footer ground. The live site's is --nav-bg #37474f, a dark blue-grey rather than a navy, i.e. the ink colour itself. */ --surface-navy: #37474f; /* Page background: the live --home-bg, a barely-there blue rather than the grey off-white the scaffold guessed, so cards read as white against it. */ --page-bg: #f7fcfe; /* Page-head band: a step into the section blue so the title area reads. */ --page-head-bg: #e2f3fb; /* Footer keeps its own tokens: it is dark in the light scheme, and needs a different treatment once the whole page is dark. Now the same blue-grey the live nav uses, with its lighter steps taken from that hue. */ --footer-bg: #37474f; --footer-fg: #c3cfd5; --footer-link: #dfe8ec; --footer-head: #ffffff; --footer-muted: #9fb0b8; --footer-border: #4d646f; /* live --border-color rgba(55,71,79,.1) and a stronger step of it */ --border: #ebeded; --border-strong: #d6dcde; /* The RSS mark on partials/feed-link.html. Not the canonical #f26522: that measures 2.77 on --page-head-bg, where most of these links live, and 1.4.11 asks 3:1 of a graphic that carries meaning. This is the same orange walked down until it clears 3:1 on every light ground (3.15 on the page head, 3.58 on --surface); the dark scheme takes it back up. It is deliberately not --tier-gold: that token means "gold sponsor" and nothing else. */ --feed: #e8590c; /* THE TWO ADMONITION SEVERITIES THAT HAD NO COLOUR OF THEIR OWN. An AsciiDoc article has five (NOTE, TIP, IMPORTANT, WARNING, CAUTION) and the palette had four usable accents, so WARNING and CAUTION were both mapped to --feed and rendered identically -- two different severities the reader could not tell apart, which is the one thing an admonition exists to do. Semantic rather than single-use names: any future alert or banner wants the same two. MEASURED AGAINST THE ADMONITION GROUND (--surface-sunken #edf9fe), not against white, because that is what the label actually sits on: --warning 5.13, --caution 5.50, both clear of 4.5. Reusing --feed would have measured 3.34 there -- it is tuned for the RSS mark on --page-head-bg, a different ground and a different job, which is the same reason its own comment gives for not being --tier-gold. */ --warning: #b34700; --caution: #8b5a00; /* Type */ --font-display: "Barlow", "Segoe UI", system-ui, sans-serif; --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* Metrics */ --max-width: 1240px; /* The article READING MEASURE -- the cap on .post-single / .page-single and on a board member page. Sized to fill the sidebar layout's article column rather than to a round number of characters: 1240 - 2*40 gutter - 330 sidebar - 52 gap = 778px of column, against 96ch = 770px at the 17px body size, so the cap no longer leaves ~70px of empty gutter beside the text on a desktop article. It is still doing work below 960px, where the sidebar collapses and the column becomes the full 1160px -- ~145 characters to a line, which is what this token exists to prevent. (`ch` resolves against the element's own font-size, so an article that is also `.prose` caps a shade wider; the two were already 88ch apart in the same way.) */ --measure: 96ch; --gutter: clamp(1rem, 4vw, 2.5rem); --radius: 10px; --radius-sm: 6px; --header-h: 76px; /* Blue-tinted, which is the live theme's signature: every shadow token there is rgba(79,195,247,.1-.3) rather than a neutral grey. Kept subtler than upstream's, since this theme puts shadows on far more surfaces. */ --shadow-sm: 0 1px 2px rgba(55, 71, 79, .06), 0 2px 8px rgba(79, 195, 247, .10); --shadow-md: 0 4px 12px rgba(55, 71, 79, .07), 0 16px 40px rgba(79, 195, 247, .16); --ease: cubic-bezier(.2, .7, .3, 1); } /* --------------------------------------------------------------- base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--page-bg); color: var(--ink-soft); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--brand-secondary); text-decoration: none; } a:hover { color: var(--brand-accent-strong); text-decoration: underline; text-underline-offset: 2px; } /* One focus indicator for everything focusable, including the two kinds that are not natively focusable and are given a tabindex: a click-to-enlarge image (js/lightbox.js) and a sideways-scrolling table region, which a keyboard user can only scroll once it can hold focus. 3px rather than 2 so the ring clears WCAG 1.4.11's area test against a light border as well as its contrast one. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, dialog:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); } h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.0625rem; } p { margin: 0 0 1.1em; } code, pre { font-family: var(--font-mono); font-size: .9em; } code { background: var(--surface-sunken); padding: .1em .35em; border-radius: 4px; } pre { background: var(--surface-navy); color: #e6edf3; padding: 1.1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; } pre code { background: none; padding: 0; color: inherit; } /* is a KEY, not a snippet of code -- same mono face and tint as `code`, plus a border and a thicker bottom edge so a run of them reads as something you press. The keyboard walkthrough on /accessibility/ is the main user; four articles carry one too, and were rendering at the browser default. */ kbd { font-family: var(--font-mono); font-size: .85em; white-space: nowrap; background: var(--surface-sunken); color: var(--ink); padding: .1em .4em; border-radius: 4px; border: 1px solid var(--border); border-bottom-width: 2px; } /* A ```mermaid fence renders as 
 (see
   _markup/render-codeblock.html), and mermaid replaces its text with an 
   IN PLACE -- the 
 stays. So the dark code-block styling above has to come
   off, or every diagram sits on a navy slab with code padding.

   Keyed on mermaid's OWN `data-processed`, which it stamps on a block once
   rendered, so the two states style themselves: before rendering (and with no
   JavaScript at all) the block keeps the code-block look and shows the diagram
   source, which is honest and readable; after rendering it is a centred,
   responsive figure. Nothing has to be toggled from the script. */
pre.mermaid[data-processed] {
  background: none; color: inherit; padding: 0;
  margin: 1.5rem 0; text-align: center; line-height: normal;
}
/* Mermaid sizes the SVG in the diagram's own units, which overflows a phone
   without this. height:auto keeps the aspect ratio while width shrinks. */
pre.mermaid[data-processed] svg { max-width: 100%; height: auto; }
blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--brand-accent);
  color: var(--ink); font-size: 1.1rem;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

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

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--ink); color: var(--on-ink); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 0; color: var(--on-ink); text-decoration: none; }

/* --------------------------------------------------------------- shell --- */

.shell { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

.site-main { display: block; }

.layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  max-width: var(--max-width);
  margin: 2.5rem auto 4rem;
  padding-inline: var(--gutter);
  align-items: start;
}
.content-col { min-width: 0; }
.content-col.full-width {
  grid-column: 1 / -1;
  max-width: var(--max-width);
  margin: 2.5rem auto 4rem;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); }

.site-header__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

/* Brand -------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: .6rem; color: var(--ink); flex: 0 0 auto; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; }
/* The logo PNG carries the wordmark, so it is sized by height and replaces the
   text mark entirely. The file is cropped to the artwork (no transparent
   margin), so these heights are the height the mark actually renders at —
   re-export a padded PNG and it silently shrinks again. */
.logo__img { height: 36px; width: auto; }
.site-footer .logo__img { height: 44px; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; line-height: 1;
}
.logo__word b { font-weight: 800; }
.logo__word .dot { color: var(--brand-accent); }
.logo__tag {
  display: none;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-muted); font-weight: 600;
  padding-left: .7rem; margin-left: .1rem;
  border-left: 1px solid var(--border-strong);
}

/* Primary nav -------------------------------------------------- */
/* The nav sits right after the brand and the free space collects before the
   actions, rather than `margin-left: auto` on the nav pushing every item to the
   far right — which left a void beside the logo and made the bar read as one
   1240px-wide strip on a big screen. */
.primary-nav { margin-left: .5rem; }
.primary-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }

.nav-link {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--ink); padding: .55rem .7rem; border-radius: var(--radius-sm);
  line-height: 1.2; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover { background: var(--surface-sunken); color: var(--brand-accent-strong); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--brand-accent-strong); }

/* chevron, drawn in CSS so there is no icon dependency */
.nav-link--parent::after {
  content: ""; width: .42em; height: .42em; margin-top: -.18em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
  opacity: .65;
}
.nav-item[data-open="true"] > .nav-link { background: var(--surface-sunken); color: var(--brand-accent-strong); }
.nav-item[data-open="true"] > .nav-link--parent::after { transform: rotate(-135deg); margin-top: .16em; }

/* Dropdown panels ---------------------------------------------- */
.site-header__inner { position: relative; }
.nav-item { position: relative; }

/* Multi-column panels are too wide to hang off their trigger: drop the item's
   containing block so the panel is laid out against .site-header__inner and
   clamp it to that width. */
.nav-item:has(.nav-panel__inner--cols-2),
.nav-item:has(.nav-panel__inner--cols-3) { position: static; }

.nav-panel {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  transform: translate(-50%, -6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .6rem;
  max-width: calc(100vw - 2rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-item:has(.nav-panel__inner--cols-2) > .nav-panel,
.nav-item:has(.nav-panel__inner--cols-3) > .nav-panel {
  left: 50%; right: auto;
  max-width: calc(100% - 2 * var(--gutter));
}
.nav-item[data-open="true"] > .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* keyboard/no-JS fallback */
.nav-item:focus-within > .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* keep the last panel from running off the right edge */
.nav-item:last-child > .nav-panel { left: auto; right: 0; transform: translate(0, -6px); }
.nav-item:last-child[data-open="true"] > .nav-panel,
.nav-item:last-child:focus-within > .nav-panel { transform: translate(0, 0); }

.nav-panel__inner { display: grid; gap: .25rem 1.75rem; align-items: start; }
.nav-panel__inner--cols-1 { min-width: 250px; }
.nav-panel__inner--cols-2 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.nav-panel__inner--cols-3 { grid-template-columns: repeat(3, minmax(170px, 1fr)); }

.nav-panel__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  align-content: start; grid-auto-rows: min-content;
}

.nav-panel a {
  display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink); font-size: .96rem; line-height: 1.35;
}
.nav-panel a:hover { background: var(--brand-accent-soft); color: var(--brand-accent-strong); text-decoration: none; }
.nav-panel a .nav-panel__desc {
  display: block; font-size: .82rem; color: var(--ink-muted); margin-top: .1rem;
}
.nav-panel a:hover .nav-panel__desc { color: var(--ink-soft); }

/* Third level: flattened into a titled column instead of a nested flyout.
   This is the main fix for the live site's cramped 3-deep hover menus. */
.nav-group { padding: .35rem 0; }
.nav-group__title {
  display: block;
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted);
  padding: .3rem .7rem .45rem;
}
a.nav-group__title:hover { background: none; color: var(--brand-accent-strong); text-decoration: underline; }
.nav-group .nav-panel__list a { font-size: .9rem; padding-block: .38rem; color: var(--ink-soft); }
.nav-group + .nav-group { border-top: 1px solid var(--border); margin-top: .3rem; }
.nav-panel__inner--cols-2 .nav-group + .nav-group,
.nav-panel__inner--cols-3 .nav-group + .nav-group { border-top: 0; margin-top: 0; }

.nav-panel__foot {
  grid-column: 1 / -1;
  margin-top: .35rem; padding: .7rem .7rem 0;
  border-top: 1px solid var(--border);
}
.nav-panel__foot a { font-weight: 600; font-size: .9rem; color: var(--brand-accent-strong); padding-inline: 0; }

/* Header actions ----------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.site-header__inner > .header-actions { margin-left: auto; }
/* The drawer copy exists only for the <=900px off-canvas menu. */
.header-actions--mobile { display: none; }

/* Collapsed to its magnifier until asked for — see search-form.html. The input
   stays in the DOM (and in the tab order only when open) so the form still
   submits, and so no layout jump happens on expand. */
.site-search { position: relative; display: flex; align-items: center; gap: .35rem; }
.site-search input {
  font: inherit; font-size: .92rem;
  /* `visibility` rather than only opacity: a 0-width invisible input would
     otherwise still be a tab stop. */
  width: 0; padding: .5rem 0; opacity: 0; visibility: hidden;
  background: var(--surface-sunken);
  border: 1px solid transparent; border-radius: 999px;
  color: var(--ink);
  /* `visibility` steps rather than eases, and it is delayed on the way OUT so
     the field is still there while it shrinks. On the way IN it must flip at
     once: a visibility:hidden element cannot take focus, so easing it would
     make the click land the caret nowhere. */
  transition: width .2s var(--ease), padding .2s var(--ease), opacity .15s var(--ease),
              visibility 0s linear .2s, background .15s var(--ease), border-color .15s var(--ease);
}
.site-search input::placeholder { color: var(--ink-muted); }
.site-search[data-open="true"] input {
  width: 210px; padding: .5rem .9rem; opacity: 1; visibility: visible;
  background: var(--surface); border-color: var(--border-strong);
  transition: width .2s var(--ease), padding .2s var(--ease), opacity .15s var(--ease),
              visibility 0s, background .15s var(--ease), border-color .15s var(--ease);
}
.site-search input:focus { outline-offset: 0; }

.site-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.site-search__toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent-strong); background: var(--brand-accent-soft); }
.site-search__toggle svg { width: 19px; height: 19px; }
.site-search[data-open="true"] .site-search__toggle { border-color: var(--border-strong); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn--accent { background: var(--brand-accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--brand-accent-strong); color: var(--on-accent-strong); text-decoration: none; }
.btn--ghost { border-color: var(--border-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn--navy { background: var(--ink); color: var(--on-ink); }
.btn--navy:hover { background: #475c66; }

/* Theme toggle ------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.theme-toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent-strong); background: var(--brand-accent-soft); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile toggle ------------------------------------------------ */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .15s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 29, 47, .45);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s;
}
body[data-nav-open="true"] .nav-backdrop { opacity: 1; visibility: visible; }

/* -------------------------------------------------------- page headers -- */

.page-head {
  background: var(--page-head-bg);
  border-bottom: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
}
.page-head__inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.page-head .eyebrow { margin-bottom: .5rem; }
.page-head h1 { margin-bottom: .35rem; }
/* Page-head text runs the full width of the shell. The usual reading-column
   cap (62ch) left the right half of every page head empty, and a head is a
   short intro read once, not body copy read for minutes. */
.page-head p { color: var(--ink-soft); margin: 0; }
.page-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.page-head__meta p { margin: 0; }

/* AI portal: its editorial intro lives in the page head, so its paragraphs need
   the spacing `.page-head p` deliberately removes for the single-line meta text
   every other page head holds. */
.page-head__intro { margin: 0 0 1.1rem; }
.page-head__intro p { margin: 0; }
.page-head__intro p + p { margin-top: .75rem; }
/* /sitemap/'s jump links: a chip row in the page head rather than the sidebar
   "On this page" panel, because that page is full-width so its 2000-row
   articles table and 344-row authors table get the whole shell -- a rail would
   take ~300px back off exactly the thing that needs them. Reuses .chip-row, so
   there is nothing here but the spacing. */
.page-head__jump { margin-top: .9rem; }
/* A section-head whose subject is a chip list (the portal's "Topics covered")
   rather than a lead paragraph. */
.section-head .chip-row { margin-top: .75rem; }
.btn--sm { padding: .3rem .75rem; font-size: .82rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--brand-accent-strong);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--brand-accent); border-radius: 2px; }
/* The AI portal's eyebrow is a back link to /today/ (as it is on WordPress);
   keep it looking like an eyebrow rather than a body link. */
.eyebrow a { color: inherit; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.section-head h2 { margin: 0; }
.section-head p { margin: .3rem 0 0; color: var(--ink-muted); font-size: .98rem; }
.section-head .more { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--brand-accent-strong); }

.band { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.band--sunken { background: var(--surface-sunken); border-block: 1px solid var(--border); }

/* The home page's one-line strapline, directly under the sticky header
   (layouts/index.html). Sunken with a bottom rule so it reads as the foot of
   the site chrome rather than as the first item of content -- it belongs to the
   masthead, and must not compete with the lead card immediately below it.

   Sized to cost ~44px of the fold. If this ever grows past one line on a
   desktop width, shorten /who-we-are/'s description rather than restyling
   here: the length of that string is the real constraint, and it is also what
   search results and link previews show. */
.home-intro {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
.home-intro p {
  margin: 0; padding: .72rem 0;
  font-size: .95rem; color: var(--ink-soft);
}
/* nowrap so the link never breaks across lines away from its arrow. */
.home-intro a { font-weight: 600; white-space: nowrap; }
/* --------------------------------------------------- home: events strip -- */
/* The "next two weeks" band (partials/upcoming-events.html). One row that
   scrolls sideways, not a grid that wraps: the band is a glance at what is
   coming, and a wrapped second row of eleven meetups is a list -- which is
   what /calendar/ is for. */
.event-strip {
  list-style: none; margin: 0; padding: 0 .25rem .5rem 0;
  display: grid; grid-auto-flow: column;
  /* A card wide enough for two lines of title, and no wider than a third of a
     narrow viewport, so the next one always peeks in and the row reads as
     scrollable without a scrollbar having to say so. */
  grid-auto-columns: minmax(min(17rem, 78%), 1fr);
  gap: clamp(.75rem, 1.5vw, 1.1rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.event-strip__item {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .35rem; min-width: 0;
  padding: .9rem 1rem; border-radius: var(--radius);
  /* Sunken cards on a plain band, rather than plain cards on a sunken one:
     the podcast band below is sunken, and two sunken bands in a row read as
     one block with two headings. */
  background: var(--surface-sunken); border: 1px solid var(--border);
  /* The group's own colour, the same hue the calendar gives it. */
  border-left: 3px solid var(--cal-dot, var(--brand-secondary));
}
.event-strip__date {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--brand-accent-strong);
  font-variant-numeric: tabular-nums;
}
.event-strip__title {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  line-height: 1.3; color: var(--ink);
  /* Two lines then ellipsis: the cards are one row, so they share a height and
     a four-line title would set it for all of them. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.event-strip__title:hover { color: var(--brand-accent-strong); text-decoration: none; }
.event-strip__meta {
  margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem;
  font-size: .82rem; color: var(--ink-muted); line-height: 1.4;
}
.event-strip__group { color: var(--ink-soft); font-weight: 600; }
/* Outlined, for the same reason the agenda's is: the hue is hashed, so light
   text on it is a contrast lottery. */
.event-strip__group--type {
  padding: .02rem .4rem; border-radius: 999px;
  border: 1px solid var(--cal-dot, var(--border)); color: var(--ink-soft);
  font-size: .92em; text-transform: uppercase; letter-spacing: .05em;
}
.event-strip__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-strip__time { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ post grid -- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.post-card { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.post-card-image {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--surface-sunken); aspect-ratio: 300 / 200;
  /* Positioning context for the .thumb-ph tile, which sits behind the image. */
  position: relative;
}
.post-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s var(--ease);
  /* position+z-index, not source order: .thumb-ph is absolutely positioned and
     a positioned element paints ABOVE a non-positioned sibling regardless of
     where it sits in the DOM -- so without this the tile would cover the
     image on every card that has one. */
  position: relative; z-index: 1;
  /* And its own opaque ground, because a great many WordPress heroes are
     transparent PNG logos: without this the tile's diagonal stripes showed
     THROUGH them. The tile is the fallback for a missing image, not a mat to
     sit a present one on. */
  background: var(--surface-sunken);
}
.post-card:hover .post-card-image img { transform: scale(1.04); }

/* --- Derived thumbnail placeholder (partials/post-thumb.html, and the same
   markup built in JS by search/single.html) ------------------------------------
   What a card or a search result shows when the post has no `image:` -- and
   what shows THROUGH when a hotlinked hero has gone 404, since the  on
   top removes itself in onerror. Sits under the image rather than instead of
   it, so one box handles both cases and no template has to know which.

   --ph-hue is set inline by the template, hashed from the label (the post's
   first category), so a category reads as one colour across the site with no
   colour ever configured -- same idea as a JUG's dot on /calendar/. Saturation
   and lightness are fixed here, which is what keeps 123 arbitrary hues looking
   like one family instead of a paint chart. */
.thumb-ph {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; padding: .9rem;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px, hsl(var(--ph-hue) 60% 100% / .45) 11px 22px),
    linear-gradient(155deg, hsl(var(--ph-hue) 46% 91%), hsl(var(--ph-hue) 40% 79%));
}
.thumb-ph__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .08em;
  text-align: center; text-wrap: balance;
  color: hsl(var(--ph-hue) 52% 25%);
}
.post-card--lead .thumb-ph__label { font-size: 1.05rem; letter-spacing: .1em; }

.post-card-title { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--brand-accent-strong); text-decoration: none; }

.post-card-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: var(--ink-muted); font-size: .85rem;
}
.post-card-meta a { color: var(--ink-muted); font-weight: 600; }
.post-card-meta a:hover { color: var(--brand-accent-strong); }
/* The dot goes on whatever FOLLOWS the byline, because the byline now leads the
   meta line (post-card.html). `.byline-group + time`, not `time + a`: byline.html
   wraps its output in that span so the flex row treats a multi-author byline as
   ONE item (see the partial), and a selector keyed on  would additionally
   only match when the byline happens to be a link -- which it is not for a
   legacy slug with no author bundle, nor for the collapsed "N authors" form.
   Both of those silently lost their separator before. */
.post-card-meta .byline-group + time::before,
.post-card-meta .views::before { content: "·"; margin-right: .5rem; color: var(--border-strong); }

/* THE FACE IN FRONT OF A BYLINE (byline.html, `avatars`). Round, like every
   other face on the site (.author-card img, .author-avatar).

   THE IMAGE IS INSIDE THE , NOT BESIDE IT, and that is load-bearing.
   .post-card-meta is a flex row with a .5rem gap, so an  placed as a
   sibling of the name would become its own flex item and take that gap on both
   sides -- the same failure .byline-group exists to fix for the comma between
   two names. Nested in the link it is the link's business, and the outer row
   still sees one item.

   The LINK is the flex container, which is what lets the circle be bigger than
   the .85rem text: `align-items: center` centres the name against the portrait
   whatever size it is, where a `vertical-align` offset has to be re-tuned every
   time the size changes and still drifts as the line box grows. inline-flex, so
   several authors still flow as text with the commas between them, and so it
   works unchanged on the plain  form (a legacy slug with no bundle, or
   the collapsed "12 authors") where there is no image at all.

   The background is a placeholder for the moment before a lazy image decodes,
   so a card does not flicker as faces arrive. */
.byline { display: inline-flex; align-items: center; gap: .4rem; }
.byline-avatar {
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%; object-fit: cover;
  background: var(--surface-sunken);
  /* A hairline, so a light-background portrait still reads as a disc against
     the card rather than bleeding into it. */
  box-shadow: 0 0 0 1px var(--border);
}

/* THREE OR MORE AUTHORS: the faces overlap into a row and the names collapse to
   a count (the $pile branch in byline.html). The overlap is what keeps twelve
   credits inside a 255px card -- laid out end to end, four portraits and a
   count are already wider than the card.

   The ring is --surface rather than --border here: each disc has to read
   against the DISC BEHIND IT, not against the card, so the ring is the card's
   own background punching a gap between neighbours. Drawn with box-shadow, not
   a border, so it sits outside the 1.9rem box and the circles keep their size.

   The FIRST author is the face on top, via descending z-index rather than a
   `direction: rtl` flip. The flip does put the first child in front -- painting
   order follows the DOM -- but it also reverses the row, which lands the "+N"
   chip at the LEFT end where it reads as part of the first face instead of as
   the overflow of the last. Five children at most, so five rules is the whole
   ladder. */
.byline-faces { display: inline-flex; }
.byline-faces > * { position: relative; }
.byline-faces > :nth-child(1) { z-index: 5; }
.byline-faces > :nth-child(2) { z-index: 4; }
.byline-faces > :nth-child(3) { z-index: 3; }
.byline-faces > :nth-child(4) { z-index: 2; }
/* A little over a tenth of a face tucked behind its neighbour: enough to read
   as a stack, little enough that each portrait is still a recognisable person. */
.byline-faces > * + * { margin-left: -.4rem; }
.byline-faces .byline-avatar { box-shadow: 0 0 0 2px var(--surface); display: block; }
.byline-face { display: inline-flex; border-radius: 50%; }
/* HOVER DOES NOT RESTACK, and that is a fix rather than an omission. A link
   box is a SQUARE around a round portrait, so in the overlap strip two boxes
   are under the pointer at once. Raising the hovered one to the top moved its
   square over its neighbour, which handed the pointer to the other face, which
   raised THAT one -- the two swapped back and forth for as long as the cursor
   sat in the overlap, flickering the ring and the label between two people.

   Leaving the nth-child ladder alone settles it: the face drawn on top in a
   given strip is also the one that receives the pointer there, so what you
   point at is what you see, and nothing moves. The cost is that the ring on a
   partly-covered face is clipped by the disc in front of it, which is what a
   stack of overlapping things should look like anyway. */
.byline-faces .byline-face:hover .byline-avatar,
.byline-faces .byline-face:focus-visible .byline-avatar { box-shadow: 0 0 0 2px var(--brand-accent-strong); }

/* THE NAME ON HOVER. A pile shows faces and a count, so this is the only place
   a reader is told which portrait is whom -- hence :focus-visible too, and
   hence the name staying on the  as alt regardless.

   It sits ABOVE the row, which is also why it survives the no-restack rule: the
   label never overlaps a sibling face, so it does not matter that a later face
   sits lower in the ladder. The only overflow: hidden on a card is on
   .post-card-image, which this is not inside, so nothing clips it. */
.byline-face::after,
.byline--count[data-name]::after {
  content: attr(data-name);
  position: absolute; bottom: calc(100% + .4rem); left: 50%;
  transform: translateX(-50%) translateY(.15rem);
  padding: .2rem .45rem; border-radius: .35rem;
  background: var(--ink); color: var(--surface);
  font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.byline-face:hover::after,
.byline-face:focus-visible::after,
.byline--count[data-name]:hover::after,
.byline--count[data-name]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* THE COUNT ANSWERS "WHO ELSE?". Only four faces fit, so on a twelve-author
   post eight people are represented by the word "authors" alone -- hovering the
   count spells all of them out. It wraps, unlike a single name: twelve names on
   one nowrap line is wider than the viewport. max-content up to a cap, so two
   names stay on one line and twelve become a readable block rather than a
   column one name wide.

   `cursor: help` because this is the one hoverable thing in the byline that is
   not a link, and nothing else would say so. tabindex is deliberately NOT set:
   the faces beside it are already focusable and carry the same names, so making
   the count a fifth stop would repeat them for no gain. */
.byline--count[data-name] { position: relative; cursor: help; }
.byline--count[data-name]::after {
  white-space: normal; width: max-content; max-width: 16rem; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .byline-face::after,
  .byline-face:hover::after,
  .byline-face:focus-visible::after { transition: none; transform: translateX(-50%); }
}
/* Initial-in-a-disc, for an author bundle with no `avatar:`. All 354 have one
   today, so this is a safety net for the next one added rather than something
   on screen -- but it has to hold the row's shape if it ever fires, hence the
   same disc and the .byline-faces prefix to outrank the `display: block`
   above. */
.byline-faces .byline-avatar--initial {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--ink-muted);
}
/* WITH FACES ON, THE GROUP SPACES ITSELF and byline.html emits no comma between
   names -- a portrait already shows where one author ends and the next starts.
   That makes this the one case where .byline-group is itself a flex container,
   which is safe for the reason the wrapper exists at all: .post-card-meta sees
   the group as a single item either way, so the row's own .5rem gap still never
   reaches the names inside it. It also feeds the gap between the face row and
   the "N authors" count in the pile branch, which is why that has no margin of
   its own. flex-wrap, so two long names on a narrow card break to a second line
   rather than overflowing the card. */
.byline-group--avatars {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  column-gap: .6rem; row-gap: .15rem;
}

/* A NARROW CARD DROPS THE VIEW COUNT, because a face costs horizontal room the
   meta line does not have to spare. Cards are not all one width: the grid beside
   the sidebar gives 379px, the full-width bands on the home page ("Podcasts",
   4 across) give 269px. At 269 the line wants 314 -- and that is with ONE
   author, so it is the avatar, not the pile, that does it. Shrinking the
   portrait to fit needs 1.25rem, which is back below the size this was raised
   to, so the fix is to drop a field instead: the date says more about a post
   than its view count, and a fresh post has no count to show anyway.

   A CONTAINER query, not a media query, and that distinction is the whole point:
   both grids exist at the same viewport width, so only the card's OWN width can
   tell them apart. 330px is between the two, with room for the longer names.

   `container-type: inline-size` on the card is what makes it queryable. It
   contains layout and inline size, which is safe here -- a card is a grid item
   whose width comes from the grid, and nothing inside it is positioned against
   the page. */
.post-card { container-type: inline-size; }
/* THE META LINE PAINTS ABOVE THE THUMBNAIL, so a hover label can rise into it.
   .post-card-image is position: relative, which puts it in the positioned layer;
   a label growing upward out of the byline was drawn UNDER it and lost its top
   edge -- visible only on the multi-line "N authors" list, since a single name
   is short enough to clear the image's bottom edge.

   The lift goes on the whole meta row, NOT on the hovered face. Raising the
   hovered face is what caused the pointer to oscillate between two portraits in
   their overlap strip (see the no-restack note below); lifting their shared
   parent moves the whole row above the image and leaves the faces' order among
   themselves exactly as it was. */
.post-card-meta { position: relative; z-index: 1; }
@container (max-width: 330px) {
  .post-card-meta .views { display: none; }
}

.post-card-categories, .post-categories, .chip-row {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.post-card-categories a, .post-categories a, .chip-row a {
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .22rem .6rem; border-radius: 999px;
  /* Green, as a tag is on the live site (--home-tags-bg / --home-tags-text).
     Not --brand-secondary: that token is the LINK colour, and a chip is not a
     link into prose. */
  background: var(--tag-soft); color: var(--tag-text);
}
.post-card-categories a:hover, .post-categories a:hover, .chip-row a:hover {
  background: var(--brand-accent-soft); color: var(--brand-accent-strong); text-decoration: none;
}

.post-card-excerpt { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* ---------------------------------------------------- highlight panel ---
   THE SINGLE DEFINITION OF "THIS BLOCK IS THE ONE TO LOOK AT". Two users so
   far: the most recent post on the home page (post-card-lead.html) and the
   monthly featured authors at the top of /today/author/
   (featured-authors-band.html). A third gets it by adding the class -- which
   is the reason it is a class rather than a selector list, since the whole
   point is that the site has ONE highlight treatment and not one per section.

   The ground is --brand-accent-soft: the logo blue's own tint, already carrying
   the eyebrow tick and the accent button, so this introduces no colour that
   exists for one block only -- and it retunes itself for dark, where the token
   is a translucent blue over the page rather than a pale solid.

   --ink-muted IS REDEFINED INSIDE THE PANEL, and that is the interesting part:
   the token measures 4.39:1 on this ground against 4.94 on white, and it is
   used by a dozen descendants (card meta, an author's article count, a latest
   article's date). Stepping the token up once here fixes all of them at 4.71
   and keeps it lighter than --ink-soft, so the hierarchy inside the panel
   survives; naming each descendant instead would be a dozen rules that a new
   descendant silently misses. Dark needs no equivalent -- --ink-muted is 5.76
   on the dark panel already. */
.highlight-panel {
  --ink-muted: #566f7b;
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius);
}
/* An eyebrow inside a highlight panel is a LABEL, not a chip.

   It used to be a solid accent pill, which solved a contrast problem and
   created a worse affordance one: a filled, rounded, uppercase pill is exactly
   what every clickable thing on this site looks like -- .btn, .chip-row a, the
   category chips on a card, the pagination cells -- so "Most recent post" read
   as a button that does nothing when clicked. An affordance that lies is worse
   than low contrast, because the reader acts on it.

   So the pill is gone and the contrast problem is solved the other way: the
   text takes the panel's own --ink (9.4:1 on --brand-accent-soft) instead of
   --brand-accent-strong, which is the token that could only manage 4.22 here.
   The 22px tick comes back as the marker and takes --brand-accent-strong,
   where a 3px bar of the lighter accent would have vanished into the tint.
   Nothing else on the site draws a label this way, so it cannot be mistaken
   for a control. */
.highlight-panel .eyebrow { color: var(--ink); }
.highlight-panel .eyebrow::before { background: var(--brand-accent-strong); }

/* Lead / featured card -- the most recent post.

   It sits in the highlight panel above rather than behind the hairline rule it
   used to carry, because the home page opens straight into this card: there is
   no hero and the 
 is visually hidden (see index.html), so the first thing
   a reader sees is a card whose only distinction from the ten below it was
   being wider. Every card on the page is unfilled, so one filled block is all
   the focus this needs. Layout only here; the highlight is not this card's to
   define. */
.post-card--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}
.post-card--lead .post-card-image { aspect-ratio: 16 / 9; }

/* THE TWO COLUMNS CANNOT AGREE ON A HEIGHT, and these two rules are what keeps
   the disagreement small. The image is locked to 16/9, so its height follows its
   column width and nothing else; the text column -- the NARROWER of the two --
   holds everything and grows. align-items:center then splits the difference, so
   the image floats in the middle of a tinted band.

   It is not a long-title bug. Measured against the real archive, the text column
   runs 1.46x the image height at the median 48-character title and 1.88x at 90,
   and 10% of the 2161 posts are over 70 characters -- so it comes round about
   every tenth lead post, and a long title only makes it obvious.

   Shrinking the image is the tempting fix and it makes things WORSE: a narrower
   column loses height at 9/16 of the width it gives up while the text saves a
   single line, taking 1.88x to 2.16x. Stretching the image to fill the row does
   equalise them, at the cost of cropping -- 55% of a 700x307 banner, and a great
   many foojay heroes are wide screenshots where the crop is destructive.

   So the height comes off the TEXT instead, and the title size is the real
   culprit: 2.1rem in a 326px column is about 19 characters per line, far too
   narrow for display type. 1.75rem gives 23 and drops a 90-character title from
   5 lines to 4. With the excerpt clamped the gap roughly halves (92px to 43px at
   a 1240px window) with nothing cropped, no conditional, and no threshold for an
   author to fall either side of. */
.post-card--lead .post-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  /* A 4-line headline should not end on one orphan word. */
  text-wrap: balance;
}
.post-card--lead .post-card-excerpt {
  font-size: 1.05rem;
  /* The excerpt is a summary and is the expendable half: a long title takes its
     space rather than stretching the card. -webkit-line-clamp is unprefixed
     nowhere yet, and every engine we serve supports the -webkit- form. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* The most-recent-posts panel (lead-posts.html) -- the box the lead card and the
   label now live INSIDE, rather than the card being the box itself.

   It carries the padding and the bottom margin the lead card used to, because
   the card is no longer the only thing in here: on a day that published several
   articles the panel holds a grid of ordinary cards instead, and both shapes
   want the same ground, the same inset and the same gap to the grid below. The
   tint, border and radius come from .highlight-panel, which AGENTS.md's rule
   makes the single definition of "look at this one" -- so this class must not
   restate any of them. */
.lead-panel {
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* The label. An 
 in the markup for the heading order (see the partial), so
   its own margin has to be set rather than inherited from the h2 rule, which is
   in `em` of a font-size .eyebrow has already overridden. */
.lead-panel > .eyebrow { margin: 0 0 .9rem; }

/* auto-FIT, not the auto-fill .post-grid uses: this grid holds 2 to 5 cards
   rather than a full row of 10, and auto-fill leaves the tracks it could not
   fill standing at 1fr each -- so two same-day posts would sit in the left two
   thirds of the panel with an empty third beside them. auto-fit collapses the
   empty tracks, so however many there are they share the width. The 255px floor
   is .post-grid's, deliberately: these are the same cards as the grid below and
   comparing them is the point, so the panel is what marks them out, not a size
   nothing else on the page uses. */
.lead-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}


/* ------------------------------------------------------------- sidebar --- */

.sidebar { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 1.25rem); }
.sidebar .widget {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0;
}
/* h2, not h4: these are the top-level headings of the complementary landmark
   they sit in, and as h4s they skipped a level or two under the page's h1/h2s
   on every page of the site (WCAG 1.3.1). The size is set here, so the tag was
   never carrying the look. Same for the footer's column headings below. */
.sidebar h2 {
  margin: 0 0 .8rem; padding: 0 0 .55rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink);
  border-bottom: 2px solid var(--brand-accent);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sidebar li a {
  display: block; padding: .3rem 0; font-size: .95rem; color: var(--ink-soft);
}
.sidebar li a:hover { color: var(--brand-accent-strong); }
.sidebar .view-all {
  display: inline-block; margin-top: .8rem;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--brand-accent-strong);
}
/* Sidebar sponsor widget (partials/sidebar-sponsors.html).

   One ROW PER TIER, not one row per sponsor: seven logo+name rows ran ~420px in
   a sticky column that also holds the TOC and a banner, so bronze fell below the
   fold. Tier drives the logo size as well as the order, so gold still reads
   first and largest -- the sidebar counterpart to the tier grouping on
   /our-sponsors/. */
.sponsor-tiers { display: grid; gap: .55rem; }
.sponsor-tier__label {
  margin: 0 0 .25rem;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}
/* The tier's own colour on the caption, which is where the gold/silver/bronze
   tokens now do the work the per-sponsor  used to. */
.sponsor-tier--gold   .sponsor-tier__label { color: var(--tier-gold); }
.sponsor-tier--silver .sponsor-tier__label { color: var(--tier-silver); }
.sponsor-tier--bronze .sponsor-tier__label { color: var(--tier-bronze); }
.sponsor-tier--community-partner .sponsor-tier__label { color: var(--tier-community-partner); }
/* A GRID OF WIDE TILES, not a flex row of square ones, and the reason is what a
   sponsor logo actually is: most are WORDMARKS, two to four times wider than
   they are tall. `object-fit: contain` in a SQUARE tile therefore fits them to
   the tile's WIDTH and leaves two thirds of the height empty -- a 42px bronze
   tile rendered the adesso and APIdia wordmarks about 32x11px, which is not a
   readable logo, it is a smudge. Tier still sets the size, but only the HEIGHT;
   the width comes from the column.

   The track max is 92px because the widget's content box is 330px of sidebar
   less 1.25rem of padding each side, and three gold logos plus two .35rem gaps
   have to fit on one line: 3*92 + 2*5.6 = 287 <= 288. auto-fit then does the
   rest -- a tier with 4+ sponsors shrinks its tracks instead of overflowing,
   and a tier with one gets one 92px tile rather than a stretched one. */
.sponsor-tier__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 92px));
  align-items: center; gap: .35rem;
}
.sponsor-side { display: block; color: var(--ink-soft); }
.sponsor-side:hover { color: var(--brand-accent-strong); }
/* Width from the grid track, height per tier -- so gold still reads largest
   while every tier gets the full column width to show its wordmark in. */
.sponsor-logo--side { width: 100%; height: 46px; padding: .3rem; border-radius: 8px; }
.sponsor-side--gold   .sponsor-logo--side { height: 60px; }
.sponsor-side--silver .sponsor-logo--side { height: 52px; }
.sponsor-side--bronze .sponsor-logo--side { height: 46px; }
/* Smallest of the four: the ladder is what the paid tiers buy, and a partner
   sits outside it rather than beneath bronze -- but the row still has to say
   which logos are which without a label on every one. */
.sponsor-side--community-partner .sponsor-logo--side { height: 42px; }

/* Sidebar "Coming soon" widget (partials/coming-soon.html) -- the posts that
   are written and scheduled but not published yet. Home page only, and it
   renders nothing when the queue is empty, so on most days the aside is exactly
   what it was.

   Rows of plain text rather than the link list every other widget here is,
   because the titles deliberately are NOT links: the page does not exist yet. */
/* A full row of gap, not the .1rem the link-list widgets use: an item here is
   two lines (title + meta), so at a tight gap the second title crowds the first
   item's date and the two dashed rules read as one continuous list rather than
   two entries.

   BOTH SELECTORS ARE NEEDED, and the bare one never won on its own. `.sidebar
   ul` above is (0,1,1) and sets `gap: .1rem`, so a lone `.coming-soon-side`
   (0,1,0) lost the gap whatever the source order -- the widget shipped at
   1.6px, i.e. exactly the crowding this comment claims to have fixed, with
   nothing to say so. The list form keeps ONE declared value while giving the
   in-sidebar case (0,2,0), the way `.sidebar .coming-soon-side__meta a` below
   restates only what collides. Same trap as the `.prose` and `.sitemap-table`
   overrides. */
.coming-soon-side,
.sidebar .coming-soon-side { display: grid; gap: 1rem; }
/* NO MARKER DOWN THE SIDE OF AN ITEM. It was a dashed accent rule, on the
   reasoning that a dash is the visual difference between "here is an article"
   and "there will be one" -- Frank's call, and the rule was carrying the idea
   badly: it was the only dashed border on the site, so it read as an artefact
   rather than as a tense, and it indented the titles out of line with every
   other widget in the aside. The section heading already says "Coming soon",
   and a title that is plain text rather than a link is the other half of
   saying it. So an item is a plain row and the gap above does the separating.
   If these ever need dividing more firmly, a hairline `border-top` on
   `__item + __item` is the shape to reach for -- not a rule beside each one. */
.coming-soon-side__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; line-height: 1.3; color: var(--ink);
}
/* A flex row with a gap, like .event-strip__meta and .post-card-meta -- the
   site's other meta lines -- rather than relying on template whitespace for the
   space between the date and the byline. That is also what makes the
   __by wrapper load-bearing: a flex container makes EVERY child its own item,
   so without it "by" and the author's name would be two items with the gap
   applied between them, rendering "by  Frank Delporte". Same reason
   byline.html wraps its own output in .byline-group. */
.coming-soon-side__meta {
  margin: .15rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0 .4rem;
  font-size: .82rem; color: var(--ink-muted); line-height: 1.4;
}
.coming-soon-side__meta time { font-weight: 600; color: var(--ink-soft); }
/* `.sidebar li a` is (0,1,2) and turns every link inside a widget list into a
   PADDED BLOCK -- so the author link dropped onto its own line and spaced
   itself out like a nav item. Restated at (0,2,1) so the meta line stays one
   sentence. Colour and hover are deliberately left to that rule. */
.sidebar .coming-soon-side__meta a { display: inline; padding: 0; font-size: inherit; }

/* "On this page" table of contents + scroll-spy (partials/toc.html,
   static/js/toc.js). Nested for h2 > h3 (Hugo's default TOC levels). */
.toc #TableOfContents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.toc #TableOfContents > ul > li > ul { margin-top: .05rem; padding-left: .9rem; }
.toc #TableOfContents a {
  display: block; padding: .32rem 0 .32rem .75rem; font-size: .92rem;
  color: var(--ink-soft); border-left: 2px solid transparent; line-height: 1.3;
}
.toc #TableOfContents a:hover { color: var(--brand-accent-strong); }
.toc #TableOfContents a.is-active { color: var(--brand-accent-strong); border-left-color: var(--brand-accent-strong); font-weight: 600; }

/* End matter -- "About the author", "Related posts", "Join the discussion" --
   appended to the panel by partials/toc.html. Ruled off from the article's own
   headings above it, because those three are on nearly every post and without a
   break a five-heading article reads as an eight-heading one.

   The divider goes on the FIRST tail item via the adjacent-sibling selector
   rather than on a fixed child position: which entries exist varies per post
   (a post with no related posts has two, a fork with giscus unconfigured has
   one), so :nth-child would put the line in the wrong place. `li:not(.toc__tail)
   + li.toc__tail` is "the first tail item that follows a real heading" -- and
   it correctly draws nothing on a podcast episode whose panel is tail-only,
   where there is no article section to separate it from.

   Nested headings are in a child