/* ==========================================================================
   IXLabsNL — chrome.css
   What EVERY page shares: the bar, the footer with the CIIIC strip, the forms,
   and the news and agenda items. One file, so the home page and the depth
   pages can no longer drift into two sites (review 2026-09-03, §2).

   Written against the night tokens (tokens-night.css), which every page loads.
   No raw colour here: the CIIIC colours live in tokens-night.css too.
   ========================================================================== */


/* ==========================================================================
   1. THE BAR
   ========================================================================== */

.topnav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-block-size: var(--nav-h);
  padding-inline: var(--pad-x);
  background-color: color-mix(in srgb, var(--c-ground) 86%, transparent);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(0.92);
  backdrop-filter: blur(var(--panel-blur)) saturate(0.92);
  border-block-end: 1px solid var(--c-hair);
  transition: transform var(--t-4) var(--ease-land);
}

.topnav a { text-decoration: none; }

.topnav__mark { color: var(--c-text); flex: none; }

.topnav__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 78, "wght" 700;
  /* No uppercase: the name is written IXLabsNL, and its own casing is the brand (2026-09-13). */
  text-transform: none;
  letter-spacing: var(--track-annot);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.topnav__menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-inline-size: 0;
}

.topnav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.topnav__link {
  display: block;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
  border-block-end: 1px solid transparent;
  transition: color var(--t-2) var(--ease-rack), border-color var(--t-2) var(--ease-rack);
}
.topnav__link:hover { color: var(--c-text); border-block-end-color: var(--c-rule); }

/* Where you are: set by the home page's section observer (.is-here) or baked in
   for the page you are on (aria-current) — carried by the attribute as well as
   by colour. */
.topnav__link.is-here,
.topnav__link[aria-current="page"] { color: var(--c-signal); border-block-end-color: var(--c-signal); }

.topnav__end { display: flex; align-items: center; gap: var(--s-4); flex: none; }

.topnav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  min-block-size: var(--target-min);
  background-color: var(--c-signal);
  color: var(--c-on-accent);
  border: 1px solid var(--c-signal);
}
.topnav__cta:hover,
.topnav__cta[aria-current="page"] { background-color: var(--c-text); border-color: var(--c-text); color: var(--c-ground); }

.topnav .lang { display: flex; border: 1px solid var(--c-rule); border-radius: 0; background: none; padding: 0; }
.topnav .lang button {
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  color: var(--c-text-2);
  background: none;
  border: 0;
  border-radius: 0;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  cursor: pointer;
}
.topnav .lang button[aria-pressed="true"],
.topnav .lang button.is-active { background-color: var(--c-signal); color: var(--c-on-accent); }

.topnav__toggle {
  display: none;
  flex: none;
  margin-inline-start: auto;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  border: 1px solid var(--c-rule);
  background-color: transparent;
  color: var(--c-text-2);
  position: relative;
}
.topnav__toggle:hover { border-color: var(--c-signal); color: var(--c-signal); }

.topnav__bars,
.topnav__bars::before,
.topnav__bars::after {
  position: absolute;
  inline-size: 1.125rem;
  block-size: 1px;
  background-color: currentColor;
  transition: transform var(--t-3) var(--ease-land), opacity var(--t-2) var(--ease-rack);
}
.topnav__bars { inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }
.topnav__bars::before { content: ""; inset-inline-start: 0; transform: translateY(-6px); }
.topnav__bars::after  { content: ""; inset-inline-start: 0; transform: translateY(6px); }

.is-open .topnav__bars { background-color: transparent; }
.is-open .topnav__bars::before { transform: rotate(45deg); }
.is-open .topnav__bars::after  { transform: rotate(-45deg); }

@media (max-width: 980px) {
  .topnav { flex-wrap: wrap; }
  .topnav__toggle { display: block; }

  /* Closed is display:none: an invisible panel still takes tab stops. */
  .topnav__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding-block: var(--s-4) var(--s-5);
    border-block-start: 1px solid var(--c-hair);
    max-block-size: calc(100svh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .topnav.is-open .topnav__menu { display: flex; }

  .topnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav__link {
    padding-block: var(--s-3);
    font-size: var(--fs-md);
    border-block-end: 1px solid var(--c-hair);
  }
  .topnav__link.is-here,
  .topnav__link[aria-current="page"] { border-inline-start: 2px solid var(--c-signal); padding-inline-start: var(--s-3); }

  .topnav__end { justify-content: space-between; }
  .topnav__cta { flex: 1; text-align: center; }
}

/* The panel covers the page, so the page must not scroll behind it. */
.is-nav-open { overflow: hidden; }


/* ==========================================================================
   2. THE FOOTER
   ========================================================================== */

.sitefoot {
  position: relative;
  z-index: var(--z-content);
  border-block-start: 1px solid var(--c-hair);
  background-color: var(--c-ground);
  color: var(--c-text-2);
}

.sitefoot__inner {
  max-inline-size: 90rem;
  margin-inline: auto;
  padding: var(--s-7) var(--pad-x) var(--s-6);
  display: grid;
  gap: var(--s-7);
}

.sitefoot__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

@media (max-width: 900px) {
  .sitefoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sitefoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .sitefoot__cols { grid-template-columns: minmax(0, 1fr); }
}

.sitefoot__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 78, "wght" 700;
  text-transform: none;
  letter-spacing: var(--track-annot);
  font-size: var(--fs-lg);
  color: var(--c-text);
}
.sitefoot__claim { margin-block-start: var(--s-2); color: var(--c-text-2); max-inline-size: 34ch; }

.sitefoot__head {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-block-end: var(--s-3);
}

.sitefoot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sitefoot__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-block-size: var(--target-min);
  padding-block: var(--s-2);
  color: var(--c-text);
  text-decoration: none;
}
.sitefoot__list a:hover { color: var(--c-signal); text-decoration: underline; text-underline-offset: 0.2em; }
.sitefoot__list a[aria-current="page"] { color: var(--c-signal); }
/* Name on one line, its venues on the next — for every lab alike. Inline, PRIME and SHINE (short
   venue lists) sat beside their name while the long ones wrapped under it (note tool 2026-09-13:
   "make on new line for each lab the description"). */
.sitefoot__lab { display: block; font-weight: 500; color: var(--c-lab); }
.sitefoot__city { display: block; color: var(--c-text-3); }
/* The link itself is a wrapping flex row (for the other columns), which put two short blocks side by
   side anyway; a lab link is a column. */
.sitefoot__list a[data-lab] { flex-direction: column; align-items: flex-start; gap: 0; }

.sitefoot__governance { margin-block-start: var(--s-3); color: var(--c-text-3); }

.sitefoot__base {
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-hair);
  color: var(--c-text-3);
}

/* --- the CIIIC block ------------------------------------------------------
   The three marks sit on ONE light strip: two of them are dark marks (CIIIC
   black, TNO) and none may be recoloured, so the ground adapts rather than
   the logo. Equal cells give equal visual weight. Clear space: the cell padding
   is 40% of the logo height, above the 30% the guideline asks. */

/* The WHOLE block stands on the plate — logos, credit, paragraph and links —
   not only the logo strip (user 2026-09-13: "make this block entire background
   the beige"). Everything inside therefore uses the plate's own ink: the night
   text colours and the orange signal would fail contrast on a light ground. */
.ciiic {
  --logo-h: 2.75rem;
  display: grid;
  gap: var(--s-4);
  padding: calc(var(--logo-h) * 0.4) calc(var(--logo-h) * 0.5) calc(var(--logo-h) * 0.5);
  background-color: var(--c-ciiic-plate);
  color: var(--c-ciiic-ink);
}

.ciiic__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0 calc(var(--logo-h) * 0.4);
  border-block-end: 1px solid color-mix(in srgb, var(--c-ciiic-ink) 18%, transparent);
  color: var(--c-ciiic-ink);
}

.ciiic__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--logo-h) * 0.8);
}

.ciiic__logo { display: flex; align-items: center; }
.ciiic__logo img { display: block; block-size: var(--logo-h); inline-size: auto; max-inline-size: none; }

/* CIIIC's own minimum: 80px wide. At 44px tall the mark is 156px. */
.ciiic__logo--ciiic img { min-inline-size: 80px; }
.ciiic__logo a { display: block; }
.ciiic__logo a:focus-visible { outline: 2px solid var(--c-ciiic-ink); outline-offset: 4px; box-shadow: none; }

.ciiic__tagline {
  margin: 0;
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  background-color: var(--c-ciiic-tagline);
  color: var(--c-ciiic-ink);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ciiic__credit { color: var(--c-ciiic-ink); font-size: var(--fs-md); font-weight: 500; max-inline-size: 72ch; }
.ciiic__about { color: var(--c-ciiic-ink); font-size: var(--fs-md); line-height: var(--lh-body, 1.55); max-inline-size: 72ch; }

.ciiic__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.ciiic__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--c-ciiic-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ciiic__links a:hover { text-decoration-thickness: 2px; }
.ciiic__links a:focus-visible { outline: 2px solid var(--c-ciiic-ink); outline-offset: 3px; box-shadow: none; }
.ciiic__links a::after { content: "\2197"; margin-inline-start: 0.35em; text-decoration: none; }

@media (max-width: 560px) {
  .ciiic { --logo-h: 2.25rem; }
  .ciiic__logos { gap: var(--s-5); }
}


/* ==========================================================================
   3. BUTTONS AND FORMS
   The same controls on every page. A form either sends through CoVince or
   says plainly that nothing was sent (js/forms.js).
   ========================================================================== */

.ixbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--target-min);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-text-2);
  background-color: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.ixbutton:hover { background-color: var(--c-text); color: var(--c-ground); border-color: var(--c-text); }
.ixbutton--solid { background-color: var(--c-signal); border-color: var(--c-signal); color: var(--c-on-accent); }
.ixbutton--solid:hover { background-color: var(--c-text); border-color: var(--c-text); }
.ixbutton[aria-expanded="true"] { background-color: var(--c-ground-lift); }

.ixform { display: grid; gap: var(--s-4); max-inline-size: 36rem; }
.ixform--inline {
  margin-block-start: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  background-color: var(--c-ground-up);
}

.ixform__row { display: grid; gap: var(--s-2); margin: 0; max-inline-size: none; }

.ixform__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.ixform__req { text-transform: none; letter-spacing: 0; color: var(--c-text-3); }

.ixform__input {
  inline-size: 100%;
  min-block-size: var(--target-min);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-rule);
  border-radius: 0;
  background-color: var(--c-ground-lift);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-md);
}
textarea.ixform__input { min-block-size: 8rem; resize: vertical; }
select.ixform__input { appearance: auto; }
.ixform__input:focus-visible { border-color: var(--c-signal); }
.ixform__input:user-invalid { border-color: var(--c-alert); }

.ixform__actions { margin: 0; }

.ixform__status {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--c-signal);
  background-color: var(--c-ground-lift);
  color: var(--c-text);
  font-size: var(--fs-md);
  max-inline-size: none;
}
.ixform__status[data-covince-error],
.ixform__status[data-covince-offline] { border-inline-start-color: var(--c-alert); }
.ixform__status:focus { outline: none; }

/* The honeypot: out of sight and out of the tab order, but still in the form. */
.ixform__hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   4. NEWS AND THE AGENDA
   Shared by the home page column and by nieuws.html and agenda.html.
   ========================================================================== */

.newslist, .eventlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.newsitem {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--c-hair);
  scroll-margin-block-start: calc(var(--nav-h) + var(--s-5));
}
.newsitem:first-child { border-block-start-color: var(--c-lab); }

.newsitem__head { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.newsitem__date { color: var(--c-text-3); }
.newsitem__scope { color: var(--c-lab); }

.newsitem__title, .eventitem__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0;
}
.newsitem__title a, .eventitem__title a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-rule); text-underline-offset: 0.2em; }
.newsitem__title a:hover, .eventitem__title a:hover { color: var(--c-signal); text-decoration-color: currentColor; }

.newsitem__body { color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-dense); max-inline-size: 60ch; margin: 0; }
.newsitem__image { inline-size: 100%; max-inline-size: 40rem; block-size: auto; }
.newsitem__links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; }
.newsitem__links a, a.newsitem__links { color: var(--c-signal); text-decoration: underline; text-underline-offset: 0.2em; min-block-size: var(--target-min); display: inline-flex; align-items: center; }

.eventitem {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--c-hair);
  scroll-margin-block-start: calc(var(--nav-h) + var(--s-5));
}
.eventitem:first-child { border-block-start-color: var(--c-lab); }

.eventitem__when { display: grid; justify-items: start; align-content: start; gap: 2px; margin: 0; max-inline-size: none; }
.eventitem__day {
  font-family: var(--font-mono);
  font-size: var(--fs-n2);
  font-weight: 500;
  line-height: 0.9;
  color: var(--c-lab);
  font-variant-numeric: tabular-nums;
}
.eventitem__month { color: var(--c-text-3); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.eventitem__tbc { color: var(--c-text-3); line-height: 1.2; }

.eventitem__body { display: grid; gap: var(--s-2); align-content: start; justify-items: start; min-inline-size: 0; }
.eventitem__body > .ixform { justify-self: stretch; }
.eventitem__scope { color: var(--c-lab); margin: 0; }
.eventitem__where { color: var(--c-text-3); margin: 0; }
.eventitem__signup { margin-block-start: var(--s-2); }

[data-lab=""] { --c-lab: var(--c-signal); }

@media (max-width: 560px) {
  .eventitem { grid-template-columns: 1fr; gap: var(--s-2); }
  .eventitem__when { display: flex; gap: var(--s-2); align-items: baseline; }
  .eventitem__day { font-size: var(--fs-xl); }
}

/* The "all news" / "full agenda" link under the home page column. */
.feedmore { margin: var(--s-2) 0 0; }
.feedmore a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--c-signal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.feedmore a::after { content: "\2192"; margin-inline-start: 0.4em; }


/* ==========================================================================
   5. PAGES OF TEXT: news, agenda, privacy, accessibility
   ========================================================================== */

.textpage {
  max-inline-size: 60rem;
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--s-7)) var(--pad-x) var(--s-8);
  display: grid;
  gap: var(--s-6);
}

.textpage__head { display: grid; gap: var(--s-3); }
.textpage__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin: 0;
}
.textpage__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" 800;
  font-size: var(--fs-d3);
  line-height: 0.95;
  color: var(--c-text);
  margin: 0;
  text-wrap: balance;
}
.textpage__lead { font-size: var(--fs-xl); line-height: var(--lh-lead, 1.4); color: var(--c-text-2); max-inline-size: 48ch; margin: 0; }

.textpage__concept {
  justify-self: start;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--c-signal);
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.textpage__section { display: grid; gap: var(--s-2); padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-hair); }
.textpage__section h2 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 500; color: var(--c-text); margin: 0; }
.textpage__section p { color: var(--c-text-2); font-size: var(--fs-md); line-height: 1.6; max-inline-size: 64ch; margin: 0; }
.textpage__section a { color: var(--c-signal); }
.textpage__meta { color: var(--c-text-3); }


/* ==========================================================================
   6. LAB PAGES: the locations' own websites, and the drawn plate
   ========================================================================== */

.sites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 var(--s-5); }
.sites li { border-block-start: 1px solid var(--c-hair); }
.sites a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 3rem;
  padding-block: var(--s-2);
  color: var(--c-text);
  text-decoration: none;
}
.sites a::after { content: "\2197"; color: var(--c-lab); }
.sites a:hover { color: var(--c-signal); }
.sites__host { color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--fs-xs); margin-inline-start: auto; }

/* The title block on a phone: a long label ("BRIX — BRABANT EN VERDER") took the
   max-content column and left the value one word per line ("loca-ties"). Below
   560px the label sits above its value. */
@media (max-width: 560px) {
  .titleblock { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .titleblock dt { margin-block-start: var(--s-3); }
  .titleblock dt:first-child { margin-block-start: 0; }
}

.film__frame { position: relative; }
.film__drawing {
  position: absolute;
  inset: 8% 6%;
  inline-size: 88%;
  block-size: 84%;
  color: var(--c-lab);
}

/* ==========================================================================
   THE SITE SEARCH (2026-09-14): one search for the whole site, in the bar of
   every page (js/site-search.js). A 44px line-icon button; the panel drops
   under the bar on the right, and spans the screen on a phone.
   ========================================================================== */
.sitesearch { position: relative; flex: none; order: 3; margin-inline-start: var(--s-4); }

.sitesearch__toggle {
  display: inline-grid;
  place-items: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  padding: 0;
  border: 1px solid var(--c-rule);
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.sitesearch__toggle:hover,
.sitesearch.is-open .sitesearch__toggle { border-color: var(--c-signal); color: var(--c-signal); }
.sitesearch__toggle:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 2px; }
.sitesearch__icon { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.sitesearch__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--s-3));
  inset-inline-end: 0;
  inline-size: min(34rem, calc(100vw - 2 * var(--pad-x)));
  max-block-size: calc(100svh - var(--nav-h) - var(--s-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  background-color: var(--c-ground);
  border: 1px solid var(--c-rule);
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--c-void) 60%, transparent);
}

.sitesearch__form { margin: 0; }
.sitesearch__input {
  inline-size: 100%;
  min-block-size: var(--target-min);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-text);
  background-color: var(--c-void);
  border: 1px solid var(--c-rule);
  border-radius: 0;
}
.sitesearch__input::placeholder { color: var(--c-text-3); }
.sitesearch__input:focus-visible { outline: none; border-color: var(--c-signal); }

.sitesearch__status { margin: 0; font-size: var(--fs-sm); color: var(--c-text-3); }
.sitesearch__status:empty { display: none; }

.sitesearch__results { display: grid; gap: var(--s-4); }
.sitesearch__group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sitesearch__grouptitle {
  margin: 0 0 var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-signal);
}
.sitesearch__hit {
  display: grid;
  gap: 2px;
  align-content: center;
  min-block-size: var(--target-min);
  padding: var(--s-2) var(--s-3);
  color: var(--c-text);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.sitesearch__hit:hover,
.sitesearch__hit:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--c-text) 7%, transparent);
  border-inline-start-color: var(--c-signal);
}
.sitesearch__hittitle { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.sitesearch__hitsub { font-size: var(--fs-sm); color: var(--c-text-3); line-height: 1.35; }

@media (max-width: 980px) {
  .sitesearch { order: 1; margin-inline-start: auto; margin-inline-end: var(--s-2); }
  .topnav__toggle { order: 2; margin-inline-start: 0; }
  .topnav__menu { order: 4; }
  .sitesearch__panel {
    position: fixed;
    inset-block-start: calc(var(--nav-h) + var(--s-1));
    inset-inline: var(--s-3);
    inline-size: auto;
    max-block-size: calc(100svh - var(--nav-h) - var(--s-4));
  }
}

/* An agenda item's picture (2026-09-14): full width of the item, a steady 16:9 so the column does not jump
   while it loads. */
.eventitem__image {
  display: block;
  justify-self: stretch;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-block-end: var(--s-2);
  border: 1px solid var(--c-hair);
  background-color: var(--c-void);
}