/* ==========================================================================
   BNWP WikiConnect v2
   Palette sampled from the WikiConnect mark:
     #00629B blue · #990000 deep red · #48A078 green · #FC0000 flame
   Mobile-first. No framework.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* brand, as drawn in the logo — graphics use these directly */
  --brand-blue:  #00629B;
  --brand-red:   #990000;
  --brand-green: #48A078;
  --brand-flame: #FC0000;

  /* light theme */
  --bg:            #FAF8F4;
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #F1ECE2;
  --ink:           #17150F;
  --ink-soft:      #57524A;
  --ink-faint:     #777065;
  --line:          #E2DACB;
  --line-strong:   #CFC5B1;

  --accent:        #00558A;   /* blue, darkened for 4.5:1 text */
  --accent-hover:  #003F68;
  --accent-soft:   #E3EEF6;
  --accent-2:      #2E7D5B;   /* green, darkened for text */
  --accent-2-soft: #E2F0E9;
  --accent-3:      #990000;
  --accent-3-soft: #F7E4E2;
  --on-accent:     #FFFFFF;

  /* chip text, darkened to clear 4.5:1 against its own tinted background */
  --chip-live-ink: #2B7656;
  --chip-soon-ink: #862017;

  --shadow-1: 0 1px 2px rgba(23, 21, 15, .05);
  --shadow-2: 0 6px 24px -8px rgba(23, 21, 15, .18);

  --font-display: "Tiro Bangla", Georgia, serif;
  --font-body: "Anek Bangla", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 1.1vw, 2rem);
  --step-4: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --step-5: clamp(2.2rem, 1.6rem + 3.4vw, 3.75rem);

  --gutter: 1.25rem;
  --maxw: 1200px;
  --radius: 14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 320ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Neutral grey, not pitch black and not tinted: the surfaces sit within
     1–2 points across R/G/B, so the brand colours are the only colour on
     screen. Roughly twice the luminance of a true black ground. */
  --bg:            #1A1A1B;
  --bg-raised:     #242426;
  --bg-sunken:     #131314;
  --ink:           #F2F1EF;
  --ink-soft:      #B3B2AE;
  --ink-faint:     #918F8B;
  --line:          #353537;
  --line-strong:   #4C4C4F;

  --accent:        #79BEE4;
  --accent-hover:  #A3D6F0;
  --accent-soft:   #1B3040;
  --accent-2:      #79CFA6;
  --accent-2-soft: #162E20;
  --accent-3:      #F2A19B;
  --accent-3-soft: #361F1C;
  --on-accent:     #07131B;

  --chip-live-ink: #A6E6C8;
  --chip-soon-ink: #F6B6B0;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* --- 2. Base ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.32;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol { margin: 0 0 1.15em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

code, pre, .tabular { font-variant-numeric: tabular-nums; }

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

::selection { background: var(--accent-soft); color: var(--ink); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--on-accent); }

/* --- 3. Layout ---------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); }

/* more breathing room as soon as there is room to spare */
@media (min-width: 480px) { :root { --gutter: 1.5rem; } }
@media (min-width: 900px) { :root { --gutter: 2rem; } }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--line); }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site__main { flex: 1 0 auto; }

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.section__head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: end; justify-content: space-between;
  margin-bottom: 2rem;
}
.section__head p { margin: 0; color: var(--ink-soft); }
.section__head h2 { margin: 0 0 .25em; }

.eyebrow {
  margin: 0 0 1rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

/* --- 4. Brand mark ------------------------------------------------------ */

.brand__logo {
  flex: none;
  transform-origin: 50% 50%;
  transition: transform 700ms var(--ease);
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo { transform: rotate(90deg); }

/* --- 5. Header ---------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-2); }

.site-header__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  min-height: 64px; padding-block: .5rem;
}
.site-header.is-stuck .site-header__bar { min-height: 56px; }

.brand {
  display: flex; align-items: center; gap: .625rem;
  margin-inline-end: auto;
  min-width: 0;                      /* let the name shrink before the row wraps */
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* On a narrow phone the wordmark plus three controls overflowed, pushing the
   menu button onto a second line. Below 480px the mark speaks for itself. */
@media (max-width: 479px) {
  .brand__name {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 560px) { .brand__name { font-size: 1.375rem; } }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--bg-sunken); border-color: var(--line-strong); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 44px; min-width: 44px; padding-inline: .75rem; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.lang-switch:hover { background: var(--bg-sunken); color: var(--ink); }
.lang-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-switch span { display: none; }
@media (min-width: 560px) { .lang-switch span { display: inline; } }

/* nav — mobile: stacked accordion; desktop: row with hover/focus dropdowns */

.nav { flex-basis: 100%; order: 10; border-top: 1px solid var(--line); }
.nav[hidden] { display: none; }

.nav__list,
.nav__sub { list-style: none; margin: 0; padding: 0; }

.nav__list { display: flex; flex-direction: column; }

.nav__item { border-bottom: 1px solid var(--line); }
.nav__item:last-child { border-bottom: 0; }

.nav__link {
  display: block;
  padding: .85rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.nav__link:hover { color: var(--accent); }

/* nested items, mobile: indented under their parent, always visible */
.nav__sub { padding-inline-start: 1rem; padding-bottom: .4rem; }
.nav__sub .nav__item { border-bottom: 0; }
.nav__sub .nav__link {
  padding: .5rem 0;
  font-size: .9688rem;
  color: var(--ink-soft);
}
.nav__sub .nav__link::before { content: "— "; color: var(--line-strong); }
.nav__sub .nav__link:hover { color: var(--accent); }

/* current page */
.current-menu-item > .nav__link,
.current-menu-parent > .nav__link,
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }

@media (min-width: 900px) {
  .nav { flex-basis: auto; order: 0; border-top: 0; }
  .nav[hidden] { display: block; }

  .nav__list { flex-direction: row; align-items: center; gap: 1.5rem; }
  .nav__item { border-bottom: 0; position: relative; }

  .nav__link { position: relative; padding: .55rem 0; white-space: nowrap; }
  .nav__link::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px;
    height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link:hover::after,
  .current-menu-item > .nav__link::after,
  .current-menu-parent > .nav__link::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  /* parent gets a caret */
  .menu-item-has-children > .nav__link { padding-inline-end: 1rem; }
  .menu-item-has-children > .nav__link::before {
    content: ""; position: absolute; inset-inline-end: 0; top: 50%;
    width: 6px; height: 6px; margin-top: -4px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
  }
  .menu-item-has-children:hover > .nav__link::before,
  .menu-item-has-children:focus-within > .nav__link::before { transform: rotate(-135deg); margin-top: -1px; }

  /* dropdown panel */
  .nav__sub {
    position: absolute; inset-inline-start: -.9rem; top: 100%;
    z-index: 120; min-width: 230px;
    padding: .5rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .menu-item-has-children:hover > .nav__sub,
  .menu-item-has-children:focus-within > .nav__sub {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__sub .nav__link {
    padding: .5rem .7rem; border-radius: 6px;
    font-size: .9688rem; color: var(--ink); white-space: nowrap;
  }
  .nav__sub .nav__link::before { content: none; }
  .nav__sub .nav__link::after { content: none; }
  .nav__sub .nav__link:hover { background: var(--accent-soft); color: var(--accent); }

  .nav-toggle { display: none; }
}

/* --- 6. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.4rem;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--ink-faint); }

.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; text-decoration: none;
}
.arrow-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
[lang="bn"] .arrow-link:hover svg { transform: translateX(4px); }

/* --- 7. Hero ------------------------------------------------------------ */

.hero { padding-block: clamp(2.25rem, 6vw, 4rem) clamp(2.5rem, 6vw, 4rem); }

/* The showcase and the intro are siblings in either order, so the space
   between them belongs to the container, not to one of their margins. */
.hero > .wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 6vw, 3.5rem);
}

.hero h1 { margin-bottom: .4em; }
/* A measure cap helps a wide column and hurts a narrow one — Bengali
   headlines broke into four ragged lines on a phone. */
@media (min-width: 720px) { .hero h1 { max-width: 20ch; } }

/* the description runs the full measure rather than being squeezed into a column */
.hero__lead {
  font-size: var(--step-1);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 88ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* mark + impact numbers share a row; the container supplies the gap */
.hero__showcase {
  display: grid; gap: 2rem;
  align-items: center;
}
@media (min-width: 880px) {
  .hero__showcase { grid-template-columns: minmax(200px, .62fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
}

.hero__mark { display: grid; place-items: center; }
.hero__mark-img {
  width: min(62vw, 300px); height: auto;
  transition: transform 700ms var(--ease);
}
.hero__mark:hover .hero__mark-img { transform: scale(1.03); }

/* --- 8. Stats ----------------------------------------------------------- */

.stats {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: var(--shadow-1);
}
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
@media (min-width: 420px) { .stats__grid { gap: 1.75rem 2rem; } }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.1;
  color: var(--accent);
}
.stat:nth-child(3n+2) .stat__value { color: var(--accent-2); }
.stat:nth-child(3n+3) .stat__value { color: var(--accent-3); }
.stat__label { margin: .3rem 0 0; font-size: .9375rem; color: var(--ink-soft); }

/* --- 9. Cards ----------------------------------------------------------- */

.card {
  position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* accent sweep on hover */
.card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue), var(--brand-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform 480ms var(--ease);
}
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }

/* A finished project keeps a red bar whether or not you are pointing at it,
   so "this one is over" reads from the grid without opening anything. The
   chip carries the same state in words, for anyone who cannot see the red. */
.card--ended::before {
  background: var(--brand-red);
  transform: scaleX(1);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }

/* The whole card is the link: the title's anchor is stretched over it, so
   there is still exactly one link and one tab stop per card. Every .card in
   this theme is a project card with a single title link — check that before
   adding a second link inside one, it would end up unclickable. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .arrow-link svg { transform: translateX(4px); }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__title { margin: 0; font-size: var(--step-2); }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__text { margin: 0; color: var(--ink-soft); font-size: .9688rem; flex: 1 0 auto; }

/* project logo tile — real project logos, letterboxed on a neutral tile */
.logo-tile {
  display: grid; place-items: center;
  width: 72px; height: 72px; flex: none;
  padding: 9px;
  background: var(--bg-sunken);
  border-radius: 12px;
  transition: background var(--dur) var(--ease);
}

/* Tiles cycle through the three logo colours across a grid, so a row of
   projects carries the brand rather than reading as neutral boxes. */
.grid > *:nth-child(3n + 1) .logo-tile { background: var(--accent-soft); }
.grid > *:nth-child(3n + 2) .logo-tile { background: var(--accent-2-soft); }
.grid > *:nth-child(3n + 3) .logo-tile { background: var(--accent-3-soft); }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; }
.logo-tile--lg { width: 104px; height: 104px; padding: 12px; }

.chip {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78125rem; font-weight: 600; letter-spacing: .04em;
  background: var(--bg-sunken); color: var(--ink-soft);
  white-space: nowrap;
}
.chip--live { background: var(--accent-2-soft); color: var(--chip-live-ink); }
.chip--soon { background: var(--accent-3-soft); color: var(--chip-soon-ink); }
.chip--past { background: var(--bg-sunken); color: var(--ink-soft); }

/* A status chip carries a dot, so the state reads at a glance and does not
   depend on colour alone — which matters for colour-blind readers. */
.chip--status {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid transparent;
}
.chip--status::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-radius: 999px;
  background: currentColor;
}
.chip--live { border-color: color-mix(in srgb, var(--chip-live-ink) 26%, transparent); }
.chip--soon { border-color: color-mix(in srgb, var(--chip-soon-ink) 26%, transparent); }
.chip--past { border-color: var(--line); }

/* only the live one breathes */
.chip--live::before { animation: bnwp-pulse 2.4s ease-in-out infinite; }
@keyframes bnwp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

/* an ended project is stated plainly, not shouted */
.chip--past { font-weight: 500; }
.chip--past::before { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .chip--live::before { animation: none; }
}

/* --- 10. People --------------------------------------------------------- */

.person {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  text-align: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-decoration: none; color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); color: var(--ink); }
.person__avatar {
  width: 88px; height: 88px; border-radius: 999px;
  object-fit: cover;
  background: var(--bg-sunken);
  border: 2px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.person:hover .person__avatar { border-color: var(--accent); }

/* avatar rings cycle the same three colours */
.grid > *:nth-child(3n + 1) .person__avatar { border-color: var(--accent-soft); }
.grid > *:nth-child(3n + 2) .person__avatar { border-color: var(--accent-2-soft); }
.grid > *:nth-child(3n + 3) .person__avatar { border-color: var(--accent-3-soft); }
.grid > *:nth-child(3n + 1):hover .person__avatar { border-color: var(--accent); }
.grid > *:nth-child(3n + 2):hover .person__avatar { border-color: var(--accent-2); }
.grid > *:nth-child(3n + 3):hover .person__avatar { border-color: var(--accent-3); }
.person__name { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }
.person__handle { font-size: .875rem; color: var(--ink-soft); }
.person__role { font-size: .875rem; color: var(--accent-2); }

/* organiser / jury lists in the project sidebar */
.peoplelist { display: grid; gap: .35rem; }
/* An external juror has no page here, so the row is not a link unless one was
   given; the description sits under the name in place of a role. */
.peoplelist__row--static { cursor: default; }
.peoplelist__row--static:hover { background: none; }
.peoplelist__note {
  font-size: .875rem; color: var(--ink-soft); line-height: 1.45;
}
.peoplelist__row {
  display: flex; align-items: center; gap: .75rem;
  min-height: 48px; padding: .4rem .5rem;
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.peoplelist__row:hover { background: var(--bg-sunken); color: var(--ink); }
.peoplelist__avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px; object-fit: cover;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.peoplelist__text { display: grid; min-width: 0; }
.peoplelist__name { font-size: 1rem; line-height: 1.3; }
.peoplelist__role {
  font-size: .8125rem; color: var(--ink-soft); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* marks a card that leaves the site — external jurors, guest reviewers */
.ext-mark {
  width: 14px; height: 14px; flex: none;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}
.peoplelist__row .ext-mark { margin-inline-start: auto; }
.person .ext-mark { margin-top: .15rem; }
.peoplelist__row:hover .ext-mark,
.person:hover .ext-mark { color: var(--accent); }

/* --- 11. Post list ------------------------------------------------------ */

.postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.postlist__item { border-bottom: 1px solid var(--line); }
.postlist__link {
  display: grid; gap: .35rem;
  padding: 1.35rem 0;
  text-decoration: none; color: var(--ink);
}
.postlist__link:hover .postlist__title { color: var(--accent); }
@media (min-width: 760px) {
  .postlist__link { grid-template-columns: 150px 1fr auto; gap: 1.5rem; align-items: baseline; }
}
.postlist__meta { font-size: .875rem; color: var(--ink-soft); }
.postlist__title {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.45;
  transition: color var(--dur) var(--ease);
}
.postlist__excerpt { margin: .3rem 0 0; font-size: .9375rem; color: var(--ink-soft); }

/* --- 12. Prose ---------------------------------------------------------- */

.prose { font-size: var(--step-1); line-height: 1.9; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.8em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.5em; }
.prose img, .prose figure { border-radius: var(--radius-sm); }

/* Project cover: centred, never wider than its column, capped in height so a
   tall portrait image cannot push the whole page down on a phone. */
.cover {
  margin: 0 0 2rem;
}
.cover img,
.project__cover {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
  object-position: center;
  margin-inline: auto;
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.cover figcaption {
  margin-top: .6rem;
  font-size: .875rem;
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 639px) {
  .cover { margin-bottom: 1.5rem; }
  .cover img, .project__cover { max-height: 46vh; border-radius: var(--radius-sm); }
}
.prose figcaption { font-size: .875rem; color: var(--ink-soft); text-align: center; margin-top: .5rem; }
.prose blockquote {
  margin: 1.6em 0; padding: .25em 0 .25em 1.25em;
  border-inline-start: 3px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: start; }
.prose thead th { background: var(--bg-sunken); }

/* --- 13. Page furniture ------------------------------------------------- */

.pagehead { padding-block: clamp(1.75rem, 4vw, 3rem); }
.pagehead--sunken { background: var(--bg-sunken); border-bottom: 1px solid var(--line); }

.breadcrumb { font-size: .875rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: .45rem; color: var(--line-strong); }

.meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: var(--ink-soft); font-size: .9375rem; }

.factlist { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; margin: 0; font-size: .9688rem; }
.factlist dt { color: var(--ink-soft); }
.factlist dd { margin: 0; }

.panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.panel__title {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}

.layout-aside { display: grid; gap: 2rem; }
@media (min-width: 1000px) {
  .layout-aside { grid-template-columns: minmax(0, 1fr) 360px; gap: 3.5rem; align-items: start; }
}
/* Stacked into one column, the sidebar would otherwise land after the whole
   body — dates, status and jury pushed several screens below the title. Put
   it first while stacked; from 1000px it is a real column again and this
   stops applying. */
@media (max-width: 999px) {
  .layout-aside > aside { order: -1; }
}

/* contact channels */
.channels {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.channel {
  display: flex; align-items: center; gap: .65rem;
  min-height: 48px; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.channel:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); transform: translateY(-2px);
}
.channel svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
/* The outline arrow marking an external link must not be filled like the
   solid brand glyphs the .channel rule above is written for. */
.channel .ext-mark { fill: none; margin-inline-start: auto; }

.searchform { display: flex; gap: .5rem; }
.searchform input[type="search"] {
  flex: 1 1 auto; min-height: 48px; padding: .5rem .9rem;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit;
}

.notice { padding: 1.25rem 1.5rem; background: var(--bg-sunken); border-radius: var(--radius); color: var(--ink-soft); }

/* pagination */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px; padding-inline: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink);
}
.pagination .page-numbers:hover { background: var(--bg-sunken); }
.pagination .page-numbers.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* --- 14. Partners ------------------------------------------------------- */

.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  max-width: 860px;
  margin-inline: auto;
}
.partner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem;
  min-height: 148px; padding: 1.5rem 1rem 1.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: var(--ink-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* brand sweep, same language as the project cards */
.partner::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue), var(--brand-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform 480ms var(--ease);
}
.partner:hover, .partner:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
  color: var(--accent);
}
.partner:hover::before, .partner:focus-visible::before { transform: scaleX(1); }

/* A definite height keeps every logo on one optical baseline —
   `max-height: 100%` collapses against an auto-sized grid area. */
.partner img {
  height: 58px; width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.partner:hover img { transform: scale(1.06); }

/* Logos are full colour. Several of these marks are black-on-transparent
   (Wikimedia Foundation, Wikimedia Bangladesh), which would vanish on a dark
   tile — so in dark mode the tile becomes a light plate, the way print does it. */
:root[data-theme="dark"] .partner {
  background: #F4F2ED;
  border-color: #2E3129;
}
:root[data-theme="dark"] .partner__name { color: #4A453C; }
:root[data-theme="dark"] .partner:hover { color: #00558A; }
:root[data-theme="dark"] .partner:hover .partner__name { color: #00558A; }

.partner__name {
  font-size: .875rem; line-height: 1.35; text-align: center;
  transition: color var(--dur) var(--ease);
}

/* --- 15. Footer --------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3.25rem) 1.5rem;
}
/* the logo's four colours, drawn once across the foot of the page */
.site-footer::before {
  content: "";
  position: absolute; inset-inline: 0; top: -1px; height: 3px;
  background: linear-gradient(90deg,
    var(--brand-red) 0%, var(--brand-red) 25%,
    var(--brand-blue) 25%, var(--brand-blue) 50%,
    var(--brand-green) 50%, var(--brand-green) 75%,
    var(--brand-flame) 75%);
}
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 720px)  { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.site-footer h3 {
  font-family: var(--font-body);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.site-footer__legal p { margin: 0; }

/* --- 16. Motion --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* JS absent → never leave content invisible */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}