/* ==========================================================================
   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); }
.sitefoot__lab { font-weight: 500; color: var(--c-lab); }
.sitefoot__city { color: var(--c-text-3); }

.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);
}