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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-feature-settings: "kern", "liga";
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--cyan-strong); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 2px; border-radius: 2px; }

.visually-hidden:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
@media (min-width: 600px) {
  .container {
    padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
  }
}

/* Type roles */

.label, .eyebrow, .site-nav a, .site-footer h2 {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.label-sm, .chip, .status {
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  line-height: var(--line-height-label-sm);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
}
.meta, .post-card .meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}
.eyebrow { margin: 0 0 var(--space-2); color: var(--brand-magenta); }



/* Skip link */

.skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 10; padding: var(--space-3) var(--space-4); border-radius: var(--radius-bubble-sm); background: var(--ink); color: var(--paper); font-weight: 700; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }

/* Button */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--ink);
  border-radius: var(--radius-bubble-sm);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--font-size-body-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--cyan-strong); border-color: var(--cyan-strong); color: var(--paper); text-decoration: none; }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-arrow { transition: transform 0.15s; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Chips: content types are plain; a project chip carries the project's colour as a dot */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 32px;
  padding: 0.45em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius-bubble-pill);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
a.chip:hover { border-color: var(--ink); color: var(--ink); }
/* Filter of content types (/blog/, archives): the current one filled, like the current menu item */
.post-filter { margin: calc(-1 * var(--space-4)) 0 var(--space-7); }
.post-filter .chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip-count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] .chip-count { color: inherit; opacity: 0.75; }
.post-list-grid { margin-top: var(--space-7); }
.chip--project { background: var(--paper-soft); border-color: var(--line-strong); }
/* the publication's language on the English site ("Slovenian"): small, outlined in magenta;
   on paper, so it stays legible on a cover */
.chip--lang { min-height: 0; padding: 0.15em 0.55em; border-color: var(--brand-magenta); background: var(--paper); color: var(--brand-magenta); }
/* after the type (and year): publication page, compact list */
.pub-type .chip--lang, .year-list-type .chip--lang { margin-left: var(--space-2); vertical-align: middle; }

/* Header */

.site-header { position: relative; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3); }
.site-logo { display: block; flex: none; }
/* fixed height: the Slovenian and English logos have different widths, the header doesn't */
.site-logo img { width: auto; height: 89px; }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-block;
  padding-block: var(--space-3);
  border-bottom: 3px solid transparent;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { border-bottom-color: var(--brand-cyan); }
/* The current page: a magenta underline with a speech-bubble tail at its left end, the square
   tail of the logo's bubbles */
.site-nav a[aria-current] { position: relative; border-bottom-color: var(--brand-magenta); }
.site-nav a[aria-current]::after { content: ""; position: absolute; left: 0; top: 100%; border-left: 10px solid var(--brand-magenta); border-bottom: 8px solid transparent; }
/* Language switch: SL and EN as two small speech bubbles facing each other, like the logo's.
   The current language is filled cyan; the other is a thin magenta outline that fills yellow on hover,
   blending to green where it overlaps the cyan (the logo's multiply). */
.lang-switch { display: flex; align-items: center; isolation: isolate; }
.site-nav .lang-bubble {
  display: grid; place-items: center; width: 36px; aspect-ratio: 1; padding: 0;
  border: 1.5px solid var(--brand-cyan); border-radius: var(--radius-bubble-round); color: var(--brand-cyan);
  font-size: var(--font-size-label-sm); line-height: 1; letter-spacing: 0.04em;
  mix-blend-mode: multiply; transition: background-color 120ms;
}
.site-nav .lang-bubble + .lang-bubble { margin-left: -6px; border-radius: var(--radius-bubble-round-mirror); }
.site-nav .lang-bubble--current { border-color: var(--brand-cyan); background: var(--brand-cyan); color: var(--paper); font-weight: 800; }
.site-nav a.lang-bubble:hover, .site-nav a.lang-bubble:focus-visible { border-color: var(--brand-yellow); background: var(--brand-yellow); color: var(--ink); }
/* Below 900px: a hamburger button (three bars, a cross while open, filled ink) opens the menu
   as an overlay under the header: the page behind it is dimmed and doesn't scroll, the panel
   starts with the logo stripe and lists the items as full-width rows between hairlines. */
.nav-toggle {
  display: none; place-items: center; flex: none; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--ink); border-radius: var(--radius-bubble-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.2s, background-color 0.2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}
@media (max-width: 899px) {
  .js .site-nav { display: none; }
  /* the scrim: from the header's bottom edge (--nav-top, set by site.js) to the bottom of the screen */
  .js .site-nav.is-open {
    display: block; position: fixed; inset: var(--nav-top, 0) 0 0; z-index: 20;
    overflow-y: auto; overscroll-behavior: contain;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
  }
  .js .site-nav.is-open ul {
    padding: 0 var(--space-4) var(--space-5);
    border-top: 3px solid; border-image: linear-gradient(90deg, var(--brand-cyan) 0 25%, var(--brand-magenta) 25% 50%, var(--brand-yellow) 50% 75%, var(--brand-green) 75%) 1;
    background: var(--paper);
  }
  .js .site-nav.is-open li:not(.lang-switch) { align-self: stretch; border-bottom: 1px solid var(--line); }
  .js .site-nav.is-open li:not(.lang-switch) a { padding-block: var(--space-4); font-size: var(--font-size-body); }
  .js .site-nav.is-open .lang-switch { padding-top: var(--space-5); }
  .site-nav ul { flex-direction: column; align-items: flex-start; }
  .js .nav-toggle { display: grid; }
  .site-header-inner { flex-wrap: wrap; }
}
html.nav-open { overflow: hidden; }

/* Footer */

/* The four logo colours as a 3px stripe across the top of the footer, on every page */
.site-footer { border-top: 3px solid; border-image: linear-gradient(90deg, var(--brand-cyan) 0 25%, var(--brand-magenta) 25% 50%, var(--brand-yellow) 50% 75%, var(--brand-green) 75%) 1; margin-top: var(--space-9); padding-block: var(--space-8) var(--space-6); background: var(--paper-soft); color: var(--ink); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
/* A page ending in a soft section runs straight into the footer; a hairline separates them. */
body:has(main > .section--soft:last-child) .site-footer { margin-top: 0; }
.site-footer-grid { display: grid; gap: var(--space-5) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Logos: the label in a shared first column, the logos beside it in two columns (.logos--grid,
   below); below 600px the label goes on top and the logos stack, one per line. */
.site-footer-logos { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.logo-group { display: contents; }
.site-footer .logo-group h2 { margin: 0; }
.logos { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.logos .logo { flex: 0 1 var(--w); min-width: 0; display: block; }
/* Partners and funders share two equal columns, each logo centred in its cell, so the rows line
   up (FDV over ARIS, PEF over the EU), and the ministries' joint logo centred across both; below
   900px, where the joint logo would get too small to read, one logo per line, the logos at the
   column's start and each ministry's own logo instead of the joint one (below). A logo keeps its
   full size (--w) while it fits, else shrinks to its cell. */
.logos--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: var(--space-5) var(--space-6); }
.logos--grid .logo { width: min(100%, var(--w)); }
@media (max-width: 899px) {
  .logos--grid { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .site-footer .logo-group h2 { align-self: start; }  /* the label at the top of its stack of logos */
}
.logos .logo img { display: block; width: 100%; height: auto; }
.logos .logo picture { display: block; }
.logo--aris { --w: 242px; }  /* the full logo with the agency's name */
.logos--grid .logo--rs { grid-column: 1 / -1; }  /* the ministries' joint logo: its own row */
.logo-rs-joint, .logo-rs-stack a { display: block; }
.logo-rs-stack { display: none; }
.logo--rs a:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 4px; }
/* one logo per line: each ministry's own logo, one per line, instead of the joint one. They share
   one scale, so coats of arms and text stay aligned: 35px tall, or, where the column is narrower
   than the longest logo (--max px wide at 35px), all shrunk by the same factor */
@media (max-width: 899px) {
  .logos--grid .logo--rs { width: 100%; }
  .logo-rs-joint { display: none; }
  .logo-rs-stack { display: grid; justify-items: start; gap: var(--space-5); container-type: inline-size; }
  .logos .logo .logo-rs-stack img { width: auto; max-width: none; height: min(35px, 100cqw * 35 / var(--max)); }
}
.logos a.logo:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 4px; }
@media (max-width: 599px) {
  .site-footer-logos { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }  /* minmax: a logo wider than the phone shrinks */
  .site-footer .logo-group h2:not(:first-child) { margin-top: var(--space-4); }
  /* One logo per line, in their order, so a narrow logo (ARIS) never shares a line */
  .logos { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .logos .logo { flex: none; width: var(--w); max-width: 100%; }
  .logo-rs-stack { gap: var(--space-4); }  /* the phone's gap between logos */
  .logos--grid { display: flex; }
}
.site-footer h2 { margin: 0 0 var(--space-3); }
.site-footer p { margin: 0 0 var(--space-3); }
.footer-address { margin: 0; font-style: normal; }
.site-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-muted); }

/* Prose: article text rendered from Markdown */

.prose { max-width: var(--layout-prose); font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--space-5); }
:where(.prose) :where(p, ul, ol, figure, blockquote, pre, table, h2, h3, h4) { margin: 0; }
.prose > * + :is(h2, h3, h4) { margin-top: var(--space-7); }
.prose h2 { font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); font-weight: var(--font-weight-heading-2); text-wrap: balance; }
.prose h3 { font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: var(--font-weight-heading-3); text-wrap: balance; }
.prose h4 { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); font-weight: var(--font-weight-heading-4); }
.prose :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose ul li::marker { color: var(--brand-magenta); }
.prose img { border-radius: var(--radius-bubble-md); }
.prose figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.prose hr { height: 0; border: 0; border-top: 1px solid var(--line); }
.prose strong { font-weight: 700; }

.bubble, .prose blockquote {
  --bubble: var(--paper-soft);
  position: relative;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-bubble-md);
  background: var(--bubble);
}
.bubble::after, .prose blockquote::after { content: ""; position: absolute; left: 0; bottom: -14px; border-left: 18px solid var(--bubble); border-bottom: 14px solid transparent; }
.prose blockquote { font-size: 1.25rem; line-height: 1.55; font-style: italic; }
.prose blockquote p + p { margin-top: var(--space-3); }
.prose figure:has(> blockquote) figcaption { margin-top: var(--space-5); padding-left: var(--space-6); }

.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; border-bottom: 2px solid var(--ink); }
.prose td.num, .prose th.num { text-align: right; }

/* Gallery: a grid of images from one post */

.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Lists laid out as grids (gallery, publication cards) are not bulleted lists: undo the
   prose list indent and the space between items; the grid gap spaces them */
.prose :is(.gallery, .publications) { padding-left: 0; }
.prose :is(.gallery, .publications) > li + li { margin-top: 0; }
/* … but the same space above them as any other block in the text (their own margin: 0 wins otherwise) */
.prose > * + :is(.gallery, .publications) { margin-top: var(--space-5); }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-bubble-md); }
.gallery-link { display: block; border-radius: var(--radius-bubble-md); }
.gallery-link:hover img { opacity: 0.85; }
/* Lightbox: a gallery image large over the page (site.js) */
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: var(--space-7) var(--space-8); border: 0; background: rgb(35 31 32 / 0.97); color: var(--paper); }
.lightbox::backdrop { background: transparent; }
.lightbox-figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3); height: 100%; margin: 0; justify-items: center; pointer-events: none; }
.lightbox-figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-bubble-md); pointer-events: auto; }
.lightbox-figure figcaption { max-width: var(--layout-prose); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); text-align: center; pointer-events: auto; }
.lightbox-count { position: absolute; top: var(--space-4); left: var(--space-5); margin: 0; color: var(--paper); opacity: 0.8; }
.lightbox-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-bubble-round); background: rgb(255 255 255 / 0.14); color: var(--paper); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox-btn:hover { background: rgb(255 255 255 / 0.28); }
.lightbox-btn:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 2px; }
.lightbox-prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-close { top: var(--space-3); right: var(--space-4); }
.lightbox--single .lightbox-prev, .lightbox--single .lightbox-next, .lightbox--single .lightbox-count { display: none; }
@media (max-width: 599px) {
  .lightbox { padding: var(--space-8) var(--space-3) var(--space-6); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: var(--space-3); transform: none; }
}

/* Video embed: loads the player only after a click */

.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-bubble-md); background: var(--ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-3); width: 100%; padding: var(--space-5); border: 0; background: var(--ink); color: var(--paper); font: inherit; text-align: center; cursor: pointer; }
.video-facade-play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-bubble-round); background: var(--brand-magenta); color: var(--ink); font-size: 1.5rem; }
.video-facade-title { font-weight: 700; }
.video-facade-note { color: var(--paper-soft); font-size: var(--font-size-body-sm); }

/* Callout: a tinted box for key findings and notes, in the page's project tint */

.callout { padding: var(--space-5) var(--space-6); border-radius: var(--radius-bubble-md); background: var(--paper-soft); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 var(--space-2); font-size: var(--font-size-body); font-weight: 700; }

/* Post card and list */

.post-grid { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.post-card > * { margin: 0; }
.post-card-image { aspect-ratio: 3 / 2; width: 100%; border-radius: var(--radius-bubble-md); background: var(--paper-soft); object-fit: cover; outline: 1px solid var(--line); outline-offset: -1px; }
/* a banner (over 3x wider or taller than 3:2) is shown whole on white, not cropped to a
   fragment; the full build pads its derivative the same way (pelicanconf cover()) */
.post-card-image--whole { object-fit: contain; background: var(--paper); }
/* a post without an image: the three logo bubbles, whole and centred */
.post-card-placeholder { display: grid; place-items: center; overflow: hidden; }
.post-card-placeholder svg { width: auto; height: 68%; }
.post-card-placeholder .b1 { fill: var(--brand-cyan); }
.post-card-placeholder .b2 { fill: var(--brand-magenta); mix-blend-mode: multiply; }
.post-card-placeholder .b3 { fill: var(--brand-yellow); mix-blend-mode: multiply; }
.post-card-title { font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: var(--font-weight-heading-3); text-wrap: balance; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card-title a { color: var(--cyan-text); text-decoration: underline; text-decoration-thickness: 2px; }
.post-card:has(a:focus-visible) { outline: 3px solid var(--brand-magenta); outline-offset: 6px; border-radius: var(--radius-bubble-md); }
.post-card-title a:focus-visible { outline: none; }
.post-card-summary { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.post-card .chips { position: relative; z-index: 1; }
/* Media cards (V medijih): the piece's type above the title, outlets under it */
.post-card-date { color: var(--ink-muted); }
.post-card-outlets { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: 700; }

/* Press clipping: outlet and date, the headline as a link, the quote as a speech bubble */

.clippings { display: grid; gap: var(--space-7) var(--space-6); margin: 0; padding: 0; list-style: none; }
.clippings--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.clipping { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.clipping > * { margin: 0; }
.clipping-outlet { color: var(--brand-magenta); font-size: var(--font-size-label-sm); font-weight: var(--font-weight-label-sm); line-height: var(--line-height-label-sm); letter-spacing: var(--tracking-label-sm); text-transform: uppercase; }
.clipping .clipping-title { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); font-weight: var(--font-weight-heading-4); text-wrap: balance; }
.clipping-title a { color: var(--ink); text-decoration: none; }
.clipping-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.clipping-quote { --bubble: var(--paper); margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.clipping-quote p { margin: 0; }
.clipping-note { color: var(--ink-muted); font-size: var(--font-size-body-sm); }

/* An archive header with a box beside it (tag.html, a type's aside()) */

.page-header-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-7); align-items: start; margin-bottom: var(--space-7); }
.page-header-aside .page-header { margin: 0; }
@media (max-width: 899px) { .page-header-aside { grid-template-columns: 1fr; gap: var(--space-5); } }

/* The featured post (home, /blog/, archives): a bubble on cyan-tint, the highlight
   colour (also the home hero panel), so it stands apart from the paper-soft footer, bands and
   info boxes (callouts, e.g. "Za novinarje"). Edge to edge: the image fills the left column (on
   phones the top), cut by the card's own bubble corners; only the text is padded. */
.post-card--lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; align-items: stretch;
  padding: 0; overflow: hidden; border-radius: var(--radius-bubble-lg); background: var(--cyan-tint); }
.post-card--lead:has(a:focus-visible) { border-radius: var(--radius-bubble-lg); }
.post-card--lead > .post-card-image { height: 100%; border-radius: 0; outline: none; }
/* a banner shown whole sits on the card's own tint, with some air around it */
.post-card--lead > .post-card-image--whole { padding: var(--space-5); background: transparent; }
.post-card--lead .chip { background: var(--paper); }
.post-card--lead .post-card-body { display: grid; gap: var(--space-3); align-content: center; padding: var(--space-6); }
.post-card--lead .post-card-body > * { margin: 0; }
.post-card--lead .post-card-title { font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); }
@media (max-width: 699px) {
  .post-card--lead { grid-template-columns: 1fr; }
  .post-card--lead > .post-card-image { height: auto; }
  .post-card--lead .post-card-body { padding: var(--space-5); }
}

/* Team member: a speech-bubble card in one of the logo colours (cycling), the portrait in
   neutral black and white (the originals are monochrome with a yellow-green tint). Portrait
   and name side by side, bio and fields below across the card. Every card is equal, sorted
   by surname. */

/* the team as a list of equal cards (ul > li), without the list's bullets and indent */
.team { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin: 0; padding: 0; list-style: none; }
.team-member { --member: var(--brand-cyan); --member-tint: var(--cyan-tint);
  display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-4); align-content: start;
  padding: var(--space-5); border-radius: var(--radius-bubble-lg); background: var(--member-tint); }
/* The four logo colours in turn (cyan, magenta, yellow, green): a period of 4 in rows of 3
   shifts by itself, so the colours never form columns. */
.team-member:nth-child(4n+2) { --member: var(--brand-magenta); --member-tint: var(--magenta-tint); }
.team-member:nth-child(4n+3) { --member: var(--brand-yellow); --member-tint: var(--yellow-tint); }
.team-member:nth-child(4n+4) { --member: var(--brand-green); --member-tint: var(--green-tint); }
.team-member > div { display: contents; }
.team-member > div > * { margin: 0; grid-column: 1 / -1; }
.team-member-photo { grid-row: 1 / span 2; grid-column: 1; width: 96px; height: 96px; border-radius: var(--radius-bubble-round); object-fit: cover; object-position: 50% 25%; background: var(--member); filter: grayscale(1); }
.team-member > div > .team-member-name { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: var(--font-weight-heading-3); text-wrap: balance; }
.team-member .team-member-bio { margin-top: var(--space-4); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.team-member-fields strong { color: var(--ink); font-weight: 700; }
.team-member .team-member-fields { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
/* Hovering the portrait: an old TV with no signal, "snow" with the face coming through. A
   layer over the photo (the card's ::after, in the photo's grid cell): noise plus scanlines,
   jumping a few times a second, while the photo flickers. Off with reduced motion. */
.team-member::after { content: ""; grid-row: 1 / span 2; grid-column: 1; width: 96px; height: 96px; border-radius: var(--radius-bubble-round); pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.35) 0 1px, transparent 1px 3px), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='97'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 160px 160px, 97px 97px; mix-blend-mode: screen; transition: opacity 0.15s; }
.team-member:has(.team-member-photo:hover)::after { opacity: 1; animation: tv-snow 0.6s steps(1) infinite; }
.team-member-photo:hover { background: var(--ink); animation: tv-flicker 0.6s steps(1) infinite; }
@keyframes tv-snow {
  0% { background-position: 0 0, 0 0, 0 0; } 20% { background-position: 0 1px, -37px 53px, 41px -13px; }
  40% { background-position: 0 2px, 61px -19px, -23px 67px; } 60% { background-position: 0 1px, -83px -71px, 59px 31px; }
  80% { background-position: 0 0, 29px 97px, -71px -47px; }
}
@keyframes tv-flicker {
  /* the picture shifts inside its frame (object-position), the bubble itself stays put */
  0% { filter: grayscale(1) contrast(1.3) brightness(0.75); object-position: 50% 25%; }
  20% { filter: grayscale(1) contrast(1.6) brightness(0.95); object-position: calc(50% - 2px) 25%; }
  40% { filter: grayscale(1) contrast(1.2) brightness(0.65); object-position: calc(50% + 1px) calc(25% + 1px); }
  60% { filter: grayscale(1) contrast(1.5) brightness(0.85); object-position: 50% 25%; }
  80% { filter: grayscale(1) contrast(1.3) brightness(0.8); object-position: calc(50% + 2px) 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .team-member:has(.team-member-photo:hover)::after, .team-member-photo:hover { animation: none; }
}
/* Some cards mirror: the portrait on the right and both bubble tails (the square corners) at the
   bottom-right. Picked by a 7-card cycle, so with rows of three it looks irregular, never in
   columns; fixed, so the page doesn't reshuffle between visits. */
.team-member:is(:nth-child(7n+3), :nth-child(7n+4), :nth-child(7n+6)) { grid-template-columns: minmax(0, 1fr) 96px; border-radius: var(--radius-bubble-lg-mirror); }
.team-member:is(:nth-child(7n+3), :nth-child(7n+4), :nth-child(7n+6))::after { grid-column: 2; border-radius: var(--radius-bubble-round-mirror); }
.team-member:is(:nth-child(7n+3), :nth-child(7n+4), :nth-child(7n+6)) .team-member-photo { grid-column: 2; border-radius: var(--radius-bubble-round-mirror); }
.team-member:is(:nth-child(7n+3), :nth-child(7n+4), :nth-child(7n+6)) > div > .team-member-name { grid-column: 1; }
@media (max-width: 599px) {
  .team-member:is(:nth-child(7n+3), :nth-child(7n+4), :nth-child(7n+6)) { grid-template-columns: minmax(0, 1fr) 80px; }
}
@media (max-width: 599px) {
  .team-member { grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-4); }
  .team-member-photo { grid-row: 1 / span 2; width: 80px; height: 80px; }
  .team-member::after { width: 80px; height: 80px; }
}

/* Publication: a downloadable report or paper */

.publications { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.prose .publications { margin-block: var(--space-6); }
.publication { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-bubble-md); background: var(--paper); }
.publication-icon { display: grid; place-items: center; width: 44px; height: 52px; border-radius: var(--radius-bubble-sm); background: var(--paper-soft); color: var(--ink); font-size: var(--font-size-label-sm); font-weight: 800; letter-spacing: var(--tracking-label-sm); box-shadow: inset 0 -6px 0 var(--line); }
.publication-title { margin: 0; font-size: var(--font-size-body); line-height: 1.35; font-weight: 700; }
.publication-meta { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
@media (max-width: 599px) {
  .publication { grid-template-columns: auto 1fr; }
  .publication .btn { grid-column: 1 / -1; justify-content: center; }
}

/* Publication tile and page: the cover as a document on a project-tinted sheet */

.pub-grid { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.pub-group { container-type: inline-size; }
.pub-group + .pub-group { margin-top: var(--space-9); }
.pub-group-title { margin: 0 0 var(--space-6); font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); font-weight: var(--font-weight-heading-2); }
/* A compact list by year (/publikacije/ groups shown as "list"): the year beside its items,
   years set apart by space, no lines; each item type, title, authors, source (like the cards) */
.year-list { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: start; }
.year-list + .year-list { margin-top: var(--space-7); }
.year-list-year { margin: 0; font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .year-list { grid-template-columns: 1fr; } }
.year-list-items { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.year-list-item { display: grid; gap: var(--space-1); }
.year-list-item > * { margin: 0; }
.year-list-type { color: var(--ink-muted); }
.year-list-title { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); font-weight: 700; text-wrap: pretty; }
.year-list-title a { color: var(--ink); text-decoration: none; }
.year-list-title a:hover { color: var(--cyan-text); text-decoration: underline; }
/* a Slovenian publication's original title, "(orig. …)", under its English one (English site) */
.pub-title-orig { color: var(--ink); font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 600; font-style: italic; text-wrap: pretty; }
.pub-page .pub-title-orig { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); }
.year-list-source { color: var(--ink-muted); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.pub-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.pub-tile > * { margin: 0; }
/* Covers: the image itself is the bubble (no sheet behind it), outlined so white covers keep an
   edge; the frame keeps a 3:4 space so titles line up, the cover sits on its baseline */
.pub-cover-frame { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 3 / 4; width: 100%; container-type: size; }
/* as large as the frame allows, full width or full height, in its own proportions (--r = w / h,
   from the template) */
.pub-cover { display: block; width: min(100cqw, 100cqh * var(--r, 0.75)); height: auto; border-radius: var(--radius-bubble-md); outline: 1px solid var(--line); outline-offset: -1px; }
/* in the tiles: a shelf. The frame's height follows the tile's width, set so the widest portrait
   cover (about 0.77:1) just fills the width: every portrait cover the same height, filling its
   tile; landscape slides at full width; all on one baseline, aligned with the text below */
.pub-tile .pub-cover-frame { aspect-ratio: 0.78; justify-content: flex-start; margin-bottom: var(--space-2); }
/* One column (phones; two need 2 × 220px + the gap): stacked covers run into each other, so
   each tile gets a hairline above it and the cover takes 70% of the width, an entry with its text
   on about one screen */
@container (max-width: 471px) {
  .pub-grid { row-gap: var(--space-6); }
  .pub-tile { padding-top: var(--space-5); border-top: 1px solid var(--line); }
  .pub-tile .pub-cover-frame { width: 70%; }
}
/* the language tag (English list) in the cover's top right corner: on the cover itself (its
   wrapper takes the image's size), or on the drawn sheet, which fills the frame */
.pub-cover-wrap { position: relative; display: block; }
.pub-cover-tag { position: absolute; top: var(--space-2); right: var(--space-2); }
/* beside a record (publication page, publication card) the cover hangs from the top */
.pub-page-cover .pub-cover-frame, .pub-feature-cover .pub-cover-frame { align-items: flex-start; }
/* the publication page's cover stays in view while the record and abstract scroll, like a
   post's publication card (.post-aside); stacked below 800px */
@media (min-width: 800px) { .pub-page-cover { position: sticky; top: var(--space-6); } }
.pub-feature-cover { display: block; }
/* Cover sheets take the logo tints in turn, by position (decoration, not a project code) */
.pub-cover--none { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--space-4); background: var(--paper-soft); outline: none; }
.pub-cover--none span { display: grid; place-items: end start; width: 72%; aspect-ratio: 3 / 4; padding: var(--space-3); border-radius: var(--radius-bubble-sm); background: var(--paper); box-shadow: inset 0 -8px 0 var(--brand-cyan); font-size: var(--font-size-label-sm); font-weight: 800; letter-spacing: var(--tracking-label-sm); text-transform: uppercase; box-sizing: border-box; }
.pub-type { color: var(--ink-muted); }
.pub-tile-title { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); font-weight: var(--font-weight-heading-4); text-wrap: pretty; }
.pub-tile-title a { color: var(--ink); text-decoration: none; }
.pub-tile-title a::after { content: ""; position: absolute; inset: 0; }
.pub-tile:hover .pub-tile-title a { color: var(--cyan-text); text-decoration: underline; text-decoration-thickness: 2px; }
.pub-tile:has(a:focus-visible) { outline: 3px solid var(--brand-magenta); outline-offset: 6px; border-radius: var(--radius-bubble-md); }
.pub-tile-title a:focus-visible { outline: none; }
.pub-tile .chips { position: relative; z-index: 1; margin-top: var(--space-1); }

.post-publications { display: grid; gap: var(--space-3); max-width: var(--layout-prose); margin-top: var(--space-8); }
.post-publications > h2 { margin: 0; }
/* The post's publications and media (.post-aside) come first in the HTML. Below 1100px they
   show after the text (before the EU notice); from 1100px beside it (below). */
.reading--aside > .post-aside { order: 1; margin-top: var(--space-8); }
.post-aside { display: grid; gap: var(--space-7); }
.post-aside > .post-publications { margin: 0; }
.reading--aside > .funding-notice { order: 2; }
/* Wide screens: the reading column keeps its width, the publication goes into the free space
   on the right, from the top of the post, and stays in view while reading. The card stacks
   (cover on top) in the narrower column. */
@media (min-width: 1100px) {
  .reading.reading--aside { grid-template-columns: minmax(0, var(--layout-prose)) minmax(260px, 320px); column-gap: var(--space-7); }
  .reading--aside > * { grid-column: 1; }
  .reading--aside > .post-aside { grid-column: 2; grid-row: 1 / span 99; align-self: start; position: sticky; top: var(--space-6); margin: 0; }
  /* Several cards may be taller than the screen: then the column scrolls with the page */
  .reading--aside > .post-aside:has(.pub-feature ~ .pub-feature, .post-publications ~ .post-publications) { position: static; }
  .reading--aside .pub-feature { grid-template-columns: 1fr; gap: var(--space-4); }
  .reading--aside .pub-feature-cover { width: 120px; }
  .reading--aside .pub-feature .pub-record { grid-template-columns: 1fr; gap: 0; }
  .reading--aside .pub-feature .pub-record dd + dt { margin-top: var(--space-2); }
  .reading--aside .pub-feature .actions { flex-direction: column; align-items: stretch; }
  .reading--aside .pub-feature .actions .btn { justify-content: center; }
}
.publication-title a { color: var(--ink); }

.breadcrumb { margin: 0 0 var(--space-5); font-size: var(--font-size-body-sm); font-weight: 700; }
.breadcrumb a::before { content: "← "; }
.pub-page { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.pub-page-body { display: grid; gap: var(--space-6); max-width: var(--layout-prose); }
.pub-page-body > * { margin: 0; }
.pub-page .post-header { display: grid; gap: var(--space-3); margin: 0; }
.pub-page .post-header > * { margin: 0; }
.pub-page .post-title { font-size: var(--font-size-display-lg); }
.pub-byline { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.btn-meta { font-weight: 400; opacity: 0.85; }
.pub-record { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.pub-record dt { color: var(--ink-muted); font-weight: 700; }
.pub-record dd { margin: 0; overflow-wrap: anywhere; }
/* A publication on a post: the cover sheet beside its record, on a cyan-tint bubble */
.pub-feature { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); border-radius: var(--radius-bubble-md); background: var(--cyan-tint); }
.pub-feature + .pub-feature { margin-top: var(--space-4); }
.pub-feature--plain { grid-template-columns: 1fr; }
.pub-feature-body { display: grid; gap: var(--space-2); }
.pub-feature-body > * { margin: 0; }
.pub-feature-title { font-size: var(--font-size-heading-4); line-height: var(--line-height-heading-4); font-weight: var(--font-weight-heading-4); text-wrap: pretty; }
.pub-feature-title a { color: var(--ink); text-decoration: none; }
.pub-feature-title a:hover { color: var(--cyan-text); text-decoration: underline; text-decoration-thickness: 2px; }
.pub-feature-byline { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.pub-feature .pub-record { margin-top: var(--space-2); padding-top: var(--space-3); border-top-color: var(--line-strong); }
.pub-feature .actions { margin-top: var(--space-3); }
@media (max-width: 499px) {
  .pub-feature { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .pub-feature-cover { width: 96px; }
}
.pub-contents, .pub-abstract { display: grid; gap: var(--space-3); }
.pub-contents > h2, .pub-abstract > h2 { margin: 0; }
/* the abstract under the record, a size smaller than body text: long ones stay manageable */
.pub-abstract .prose { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.pub-abstract .prose > :first-child { margin-top: 0; }
.pub-abstract .prose > :last-child { margin-bottom: 0; }
.pub-parts { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pub-part { display: grid; gap: var(--space-1); padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.pub-part > * { margin: 0; }
.pub-part-title { font-weight: 700; line-height: var(--line-height-body-sm); text-wrap: pretty; }
.pub-part-title a { color: var(--ink); }
.pub-part-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--font-size-body-sm); }
@media (max-width: 799px) {
  .pub-page { grid-template-columns: 1fr; gap: var(--space-6); }
  .pub-page-cover { max-width: 240px; }
}
@media (max-width: 499px) {
  .pub-record { grid-template-columns: 1fr; gap: 0; }
  .pub-record dd + dt { margin-top: var(--space-3); }
}

/* Project card: the four projects, oldest first, each in its brand colour */

.projects { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (max-width: 799px) { .projects { grid-template-columns: 1fr; } }
/* The cards take the logo tints in turn, by position, not by project: decoration that works
   for any number of projects (like the team cards and publication sheets). */
.project-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-bubble-md); background: var(--cyan-tint); }
.project-card:nth-child(4n+2) { background: var(--magenta-tint); }
.project-card:nth-child(4n+3) { background: var(--yellow-tint); }
.project-card:nth-child(4n+4) { background: var(--green-tint); }
.project-card > * { margin: 0; }
.project-card-title { font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: var(--font-weight-heading-3); text-wrap: balance; }
.project-card-title a { color: var(--ink); text-decoration: none; }
.project-card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.project-card-name { font-weight: 700; line-height: var(--line-height-body); }
.project-card-summary { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.project-card-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.project-card-facts dt { font-weight: 700; }
.project-card-facts dd { margin: 0; }
.project-card-action { margin-top: auto; padding-top: var(--space-3); }
.project-card .btn--outline { background: var(--paper); }
.project-card .btn--outline:hover { background: var(--ink); }
@media (max-width: 499px) {
  .project-card { padding: var(--space-6) var(--space-5) var(--space-5); }
  .project-card-facts { grid-template-columns: 1fr; gap: 0; }
  .project-card-facts dd + dt { margin-top: var(--space-2); }
}

.status { display: inline-flex; align-self: flex-start; align-items: center; padding: 0.3em 0.65em; border-radius: var(--radius-bubble-sm); }
.status--done { border: 1px solid var(--ink-muted); color: var(--ink-muted); }
.status--active { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.status--new { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.status--upcoming { border: 1px dashed var(--ink); color: var(--ink); }

/* Funding notice: EU emblem + funding statement + disclaimer for EU-funded projects */

.funding-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5); align-items: start; padding-block: var(--space-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.funding-notice-emblem { display: block; height: 56px; width: auto; margin: var(--space-2); }
.funding-notice-text > * { margin: 0; }
.funding-notice .funding-notice-grant { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.funding-notice .funding-notice-disclaimer { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
@media (max-width: 599px) { .funding-notice { grid-template-columns: 1fr; } }

/* Page layout */

.section { padding-block: var(--space-8); }
/* "More to read" bands at the end of a page (related posts, project posts, posts about a
   publication, the press archive): green-tint, so they never merge with the paper-soft footer */
.section--soft { background: var(--green-tint); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-head h2 { margin: 0; font-size: var(--font-size-heading-2); line-height: var(--line-height-heading-2); font-weight: var(--font-weight-heading-2); }
.section-head a { font-weight: 700; }
.page-header { position: relative; display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.page-header > * { margin: 0; }
/* an eyebrow in the space above the header (the section's top padding), so the title sits where
   it does on a page without one: /blog/ and its categories line up */
.page-header > .eyebrow--above { position: absolute; bottom: 100%; left: 0; margin-bottom: var(--space-3); }
.page-title, .post-title, .home-title { margin: 0; font-size: var(--font-size-display-lg); line-height: var(--line-height-display-lg); font-weight: var(--font-weight-display-lg); letter-spacing: var(--tracking-display-lg); text-wrap: balance; }
.page-lead, .home-lead { max-width: var(--layout-prose); margin: 0; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.page-body { max-width: var(--layout-container); }
.page-body > * + * { margin-top: var(--space-6); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* Home hero: the cover photo full width, the text in a white speech-bubble panel over it */
.home-hero { position: relative; display: flex; align-items: center; min-height: clamp(460px, 62vh, 640px); padding-block: var(--space-8); overflow: hidden; background: var(--brand-cyan); }
.home-hero .container { position: relative; width: 100%; }
.home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
/* The hero's text in a see-through light-cyan bubble (60%, a light blur keeps the text calm over
   the photo); its tail is the same surface, cut to a triangle */
.home-hero-panel { --bubble: color-mix(in srgb, var(--cyan-tint) 50%, transparent); --frost: blur(2px);
  position: relative; max-width: 600px; padding: var(--space-7); border-radius: var(--radius-bubble-md); background: var(--bubble);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.home-hero-panel::after { content: ""; position: absolute; left: 0; top: 100%; width: 28px; height: 22px; background: var(--bubble);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); clip-path: polygon(0 0, 100% 0, 0 100%); }
.home-hero-panel > * { margin: 0; }
.home-hero-panel > :not(:first-child) { margin-top: var(--space-5); }
.home-hero-panel .actions { margin-top: var(--space-6); }
.home-title { font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); font-weight: var(--font-weight-display-xl); letter-spacing: var(--tracking-display-xl); max-width: 14ch; }
@media (max-width: 699px) {
  .home-hero { display: block; min-height: 0; padding: 0 0 var(--space-7); background: var(--paper); }
  .home-hero-bg { position: relative; height: 240px; }
  /* below the photo, not over it: solid light cyan */
  .home-hero-panel { --bubble: var(--cyan-tint); --frost: none; margin-top: calc(-1 * var(--space-8)); padding: var(--space-6) var(--space-5); }
}
.home-grid { margin-top: var(--space-7); }

/* Home topics: speech bubbles in the logo's colours */
/* Home page text (the English home): its heading beside the text on wide screens */
.home-intro { max-width: none; }
.home-intro > * { max-width: var(--layout-prose); }
@media (min-width: 900px) {
  .home-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 var(--space-8); align-items: start; }
  .home-intro > h2 { grid-row: 1 / span 9; margin-top: 0; }
  .home-intro > :not(h2) { grid-column: 2; }
}
.topics { display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0 0 var(--space-4); list-style: none; }
.topic { --bubble: var(--brand-cyan); --topic-ink: var(--ink); position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-bubble-lg); background: var(--bubble); color: var(--topic-ink); transition: transform 0.15s; }
.topic::after { content: ""; position: absolute; left: 0; bottom: -20px; border-left: 26px solid var(--bubble); border-bottom: 20px solid transparent; }
.topic--cyan { --bubble: var(--brand-cyan); }
.topic--magenta { --bubble: var(--brand-magenta); --topic-ink: var(--paper); }
.topic--yellow { --bubble: var(--brand-yellow); }
.topic--green { --bubble: var(--brand-green); }
.topic > * { margin: 0; }
.topic-title { font-size: var(--font-size-heading-3); line-height: var(--line-height-heading-3); font-weight: var(--font-weight-heading-3); }
.topic-title a { color: var(--topic-ink); text-decoration: none; }
.topic-title a::after { content: ""; position: absolute; inset: 0; }
.topic:hover { transform: translateY(-3px); }
.topic:hover .topic-title a { text-decoration: underline; text-decoration-thickness: 2px; }
.topic:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.topic-title a:focus-visible { outline: none; }
.topic .meta { margin-top: auto; padding-top: var(--space-2); color: var(--topic-ink); font-weight: 700; }
/* Projects as topic bubbles (the English home): titles share a two-line box, so the texts start
   level; the years and the status (a white bubble) share one line at the bubble's foot */
@media (min-width: 600px) {
  .topics--projects .topic-title { min-height: calc(2em * var(--line-height-heading-3)); }
}
.topic .topic-when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-3); }
.topic .topic-years { font-size: var(--font-size-body); line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.topic .topic-status { border: 0; background: var(--paper); color: var(--ink); }


.post-header { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
/* Reading pages (posts, plain text pages): one centred column, layout-prose wide, measured at
   the text size (body-lg; `ch` depends on the font size), so header, cover, text and notes share
   the same edges and the free space is even on both sides. */
.reading { display: grid; grid-template-columns: minmax(0, var(--layout-prose)); justify-content: center; font-size: var(--font-size-body-lg); }
.reading > * { min-width: 0; max-width: none; }
.reading > :not(.prose) { font-size: var(--font-size-body); }
.post-header > * { margin: 0; }
/* Above the title, one line: what kind of post (chips) and when (the date, in the same label style) */
.post-kicker { display: grid; gap: var(--space-3); }
.post-kicker > * { margin: 0; }
.post-date { color: var(--ink-muted); }
.post-cover { margin: 0 0 var(--space-7); }
.post-cover img { width: 100%; border-radius: var(--radius-bubble-md); }
article.section > .funding-notice { max-width: 820px; margin-top: var(--space-8); }

/* The project page's header band (the logo stripe comes from the site header above it) */
.project-hero { padding-block: var(--space-8); background: var(--paper-soft); }
.project-hero-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-7); align-items: center; }
.project-hero-inner > div { display: grid; gap: var(--space-3); justify-items: start; }
.project-hero-inner > div > * { margin: 0; }
.project-hero-logo { width: 280px; max-width: 100%; height: auto; }
.project-hero + .section > .funding-notice { max-width: 820px; margin-top: var(--space-7); }
@media (max-width: 699px) {
  .project-hero-inner { grid-template-columns: 1fr; }
  .project-hero-logo { width: 200px; }
}
/* The project's official title and EU funding line in the side box */
.project-facts-name { margin: 0; font-weight: var(--font-weight-heading-4); line-height: var(--line-height-body); }
.project-facts-eu { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.project-facts-eu img { display: block; max-width: 100%; height: auto; }

.pagination-wrap { margin-top: var(--space-8); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.video-figure { margin: 0; }
.video-figure figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--font-size-body-sm); }
a.video-facade { text-decoration: none; }
a.video-facade:hover .video-facade-title { text-decoration: underline; }
.footer-list { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.footer-list li + li { margin-top: var(--space-1); }
.footer-list a { color: var(--ink); }
.team-member-bio a { color: var(--cyan-text); }

/* 404: the code as three overlapping speech bubbles in the logo colours, blending where they
   overlap like the logo's bubbles (the colours multiply behind the digits, which stay crisp) */
.notfound { display: grid; justify-items: center; text-align: center; padding-block: var(--space-8) var(--space-9); }
.notfound > * { margin: 0; }
.notfound-code { --size: clamp(104px, 20vw, 188px); display: flex; justify-content: center; isolation: isolate; margin-bottom: var(--space-7); padding-inline: calc(var(--size) * 0.12); }
.notfound-code span { position: relative; display: grid; place-items: center; width: var(--size); aspect-ratio: 1; margin-inline: calc(var(--size) * -0.12);
  font-size: calc(var(--size) * 0.62); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.notfound-code span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-bubble-round); background: var(--brand-cyan); mix-blend-mode: multiply; }
.notfound-code span:nth-child(2) { color: var(--paper); top: calc(var(--size) * -0.14); }
.notfound-code span:nth-child(2)::before { background: var(--brand-magenta); border-radius: var(--radius-bubble-round-mirror); }
.notfound-code span:nth-child(3)::before { background: var(--brand-yellow); }
.notfound-text { max-width: var(--layout-prose); margin-top: var(--space-4); font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.notfound-text > * { margin: 0; }
.notfound-actions { justify-content: center; margin-top: var(--space-6); }

/* Pagination */

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination li > span { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 44px; min-height: 44px; padding-inline: var(--space-3); border-radius: var(--radius-bubble-sm); color: var(--ink); font-weight: 700; text-decoration: none; }
.pagination a:hover { background: var(--cyan-tint); color: var(--cyan-strong); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (max-width: 599px) {
  .pagination li:not(:first-child):not(:last-child):not(:has([aria-current])) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}