/* ==========================================================================
   Panyaza Lesufi Education Foundation — Site 2
   Institutional / editorial treatment: forest + ochre, hairline rules,
   square corners, no drop shadows, sans-serif throughout.
   Brand colours sampled from the logo artwork.
   ========================================================================== */

:root {
  /* Default palette: FOREST. Alternates live in themes.css. */
  --ink: #17231b;
  --ink-2: #465043;
  --ink-3: #666f64;

  --ochre: #C08A2C;
  --ochre-dark: #94681c;
  --ochre-pale: #f5efdf;
  --ochre-text: #94681c;

  --paper: #ffffff;
  --paper-2: #f7faf6;
  --paper-3: #e9f0e7;

  /* Form errors. Self-contained pair — dark red on pale red, 6.4:1 — so it
     reads correctly in all four palettes without a per-theme override. */
  --error-pale: #fbeceb;
  --error-text: #a3261c;

  --rule: #dee6da;
  --rule-dark: #c4cfbf;

  /* Dark surfaces — topbar, hero scrim, banners, dark sections, footer, buttons.
     Kept separate from --ink (body text) so a theme can recolour panels without
     tinting every paragraph. Overridden per palette in themes.css. */
  --surface-dark: #12281c;
  --on-dark: #ffffff;
  --on-dark-muted: #ddd8d0;
  --on-dark-faint: #b3aea6;
  --scrim-top: rgba(18,40,28,.58);
  --scrim-mid: rgba(18,40,28,.32);
  --scrim-bottom: rgba(18,40,28,.94);

  --wrap: 1240px;
  --gutter: 2rem;

  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --step--1: .82rem;
  --step-0: 1rem;
  --step-1: 1.16rem;
  --step-2: clamp(1.35rem, 2vw, 1.6rem);
  --step-3: clamp(1.7rem, 3vw, 2.3rem);
  --step-4: clamp(2.2rem, 4.4vw, 3.4rem);
  --step-5: clamp(2.8rem, 6.5vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -.01em; }
h4 { font-size: var(--step-1); letter-spacing: -.005em; }

p { margin: 0 0 1.1rem; }

/* Body lists — ochre rule marker, no bullets */
ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.editorial ul li,
.card ul li,
.projects__body ul li {
  position: relative;
  padding: .45rem 0 .45rem 1.5rem;
  color: var(--ink-2);
  font-size: .95rem;
  border-bottom: 1px solid var(--rule);
}
.editorial ul li:last-child,
.card ul li:last-child,
.projects__body ul li:last-child { border-bottom: 0; }
.editorial ul li::before,
.card ul li::before,
.projects__body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: 8px; height: 1px;
  background: var(--ochre);
}
.card ul { margin-bottom: 1.2rem; }

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

/* ---------- Section labels ---------- */
.label {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.6rem;
}
.label::before {
  content: attr(data-num);
  color: var(--ochre-text);
  font-variant-numeric: tabular-nums;
}
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* The lede is larger than body copy, so the unitless line-height it inherits
   from body (1.6) computed to looser leading than the paragraphs beneath it.
   Pinning it to the body's absolute leading keeps one rhythm down a section. */
.lede { font-size: var(--step-1); color: var(--ink-2); line-height: calc(1.6 * var(--step-0)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.7rem;
  border: 1px solid var(--surface-dark);
  background: var(--surface-dark);
  color: var(--on-dark);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--ochre); border-color: var(--ochre); color: #fff; }
/* Ochre is a mid-tone: a white label on it only reaches ~3.3:1, so the
   resting state uses a dark label and the darker hover fill uses white. */
.btn--ochre { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.btn--ochre:hover { background: var(--ochre-dark); border-color: var(--ochre-dark); color: var(--on-dark); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--surface-dark); color: var(--on-dark); border-color: var(--surface-dark); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Arrow link */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ochre);
  padding-bottom: .15rem;
}
.arrow::after { content: "→"; color: var(--ochre-text); transition: transform .16s ease; }
.arrow:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.topbar {
  background: var(--surface-dark);
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  padding: .5rem 0;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: var(--ochre); text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 88px;
}
.masthead__logo img { height: 50px; width: auto; }

.mainnav { display: flex; align-items: center; gap: 2rem; }
.mainnav a {
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { border-bottom-color: var(--ochre); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--ochre); font-weight: 700; }
.mainnav .btn { border-bottom: 1px solid var(--ink); }
.mainnav .btn:hover { border-bottom-color: var(--ochre); }

.navtoggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-dark);
  padding: .55rem .75rem;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: var(--on-dark);
  background: var(--surface-dark);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 26%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-mid) 40%, var(--scrim-bottom) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding: 5rem 0 4.5rem; }
.hero__mission {
  /* Sized and measured to sit in the left of the frame. At 18ch and --step-5
     the block ran 58% across the hero and covered the subject's face. */
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 14ch;
  margin: 0 0 1.4rem;
}
.hero__mission em { font-style: normal; color: var(--ochre); }
.hero p { color: var(--on-dark-muted); max-width: 42ch; font-size: var(--step-1); }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* Page banner for inner pages */
.banner {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 4.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.banner__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .28;
}
.banner .wrap { position: relative; z-index: 2; }
.banner h1 { margin-bottom: .5rem; }
.banner p { color: var(--on-dark-muted); max-width: 60ch; margin: 0; font-size: var(--step-1); }
.banner .label { color: rgba(255,255,255,.65); }
.banner .label::after { background: rgba(255,255,255,.25); }

/* ---------- Quick nav strip ---------- */
.quicknav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
.quicknav a {
  padding: 2.2rem 1.8rem;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background .16s ease;
}
.quicknav--3 { grid-template-columns: repeat(3, 1fr); }
.quicknav--2 { grid-template-columns: repeat(2, 1fr); }
.quicknav a:last-child { border-right: 0; }
.quicknav a:hover { background: var(--paper-2); }
.quicknav__num { font-size: var(--step--1); font-weight: 700; color: var(--ochre-text); letter-spacing: .1em; }
.quicknav__title { font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; }
.quicknav__desc { font-size: .9rem; color: var(--ink-2); }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--surface-dark); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }
.section--dark .label { color: rgba(255,255,255,.6); }
.section--dark .label::after { background: rgba(255,255,255,.22); }

.section__head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.section__head p { margin: 0; }
.section__head--single { grid-template-columns: 1fr; max-width: 68ch; }

/* ---------- Editorial two-column ---------- */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.editorial--media { grid-template-columns: 1.05fr .95fr; }
.editorial figure { margin: 0; }
.editorial figcaption { font-size: .85rem; color: var(--ink-3); padding-top: .7rem; border-top: 1px solid var(--rule); margin-top: .7rem; }

/* ---------- Featured video ---------- */
/* Click-to-play facade: the poster is a local file and no request reaches
   YouTube until the visitor presses play. main.js swaps in the iframe. */
.videoblock { display: grid; grid-template-columns: 1.55fr .45fr; gap: 3rem; align-items: start; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.video__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, opacity .16s ease; }
.video__play:hover .video__poster { transform: scale(1.03); opacity: .88; }

.video__btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  background: var(--ochre);
  display: grid;
  place-items: center;
  transition: background .16s ease;
}
/* Play triangle, drawn with borders so there is no extra asset to load */
.video__btn::after {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--surface-dark);
  margin-left: 5px;
}
.video__play:hover .video__btn { background: var(--ochre-dark); }
.video__play:hover .video__btn::after { border-left-color: var(--on-dark); }
.video__play:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }

.video__fallback { font-size: .85rem; margin: .9rem 0 0; }
.video__fallback a { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: .2em; }

.video__meta { border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.4rem; }
.video__meta h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.video__meta p { font-size: .93rem; margin-bottom: 1rem; }
.video__meta p:last-child { margin-bottom: 0; }

/* Ochre on a dark panel: the darkened text ochre is too low-contrast here */
.section--dark .arrow { color: var(--on-dark); }
.section--dark .arrow::after { color: var(--ochre); }
.section--dark .card__kicker { color: var(--ochre); }

@media (prefers-reduced-motion: reduce) {
  .video__poster { transition: none; }
  .video__play:hover .video__poster { transform: none; }
}

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.card:hover { border-color: var(--ochre); }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
/* A programme with no photography yet. Keeps the card grid even instead of
   leaving a ragged gap or borrowing an unrelated photograph. */
.card__media--pending { display: grid; place-items: center; border-bottom: 1px solid var(--rule); }
.card__media--pending span {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* Flat illustration rather than a photograph: show it whole on white instead of
   cropping it to the 4:3 card, which would cut the figures at both edges. */
.card__media--contain { background: var(--paper); }
.card__media--contain img { object-fit: contain; padding: 1.2rem; }
.card:hover .card__media--contain img { transform: none; }
/* Same reason, in an editorial figure: sit it on white with room around it. */
.figure--art img { background: var(--paper); padding: 1.5rem; border: 1px solid var(--rule); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
/* A photograph sitting in the card grid: fills its cell and takes the same
   border as the cards beside it. The crop favours the upper middle, where
   the subject of a tall image sits, instead of the dead centre. */
.card--photo { margin: 0; padding: 0; overflow: hidden; }
.card--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.card__kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre-text);
  margin-bottom: .6rem;
}
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card p { font-size: .93rem; color: var(--ink-2); margin-bottom: 1rem; }
.card .arrow { margin-top: auto; align-self: flex-start; }

/* Event list cards (no image) */
.events { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.events > * {
  padding: 2rem 1.6rem 2.2rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.events--2 { grid-template-columns: repeat(2, 1fr); }
.events > *:last-child { border-right: 0; }
.events > *:hover { background: var(--paper-2); }
.event__date {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ochre-text);
  margin-bottom: .8rem;
}
.event h3 { font-size: var(--step-1); }
.event p { font-size: .92rem; color: var(--ink-2); }

/* ---------- Accordion projects ---------- */
.projects { border-top: 1px solid var(--rule); }
.projects details { border-bottom: 1px solid var(--rule); }
.projects summary {
  cursor: pointer;
  list-style: none;
  padding: 1.8rem 3rem 1.8rem 0;
  position: relative;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -.01em;
}
.projects summary::-webkit-details-marker { display: none; }
.projects summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ochre);
}
.projects details[open] summary::after { content: "–"; }
.projects__body { padding-bottom: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.projects__body p { color: var(--ink-2); margin-bottom: .8rem; }

/* ---------- Stats strip ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.figures > div { padding: 2rem 1.5rem; border-left: 1px solid rgba(255,255,255,.16); }
.figures > div:first-child { border-left: 0; padding-left: 0; }
.figures__num { font-size: var(--step-3); font-weight: 700; letter-spacing: -.02em; color: var(--ochre); line-height: 1; }
.figures__label { font-size: .9rem; color: var(--on-dark-muted); margin-top: .6rem; }

/* ---------- News ---------- */
.newslist { border-top: 1px solid var(--rule); }
.newsrow {
  display: grid;
  grid-template-columns: 160px 1fr 200px;
  gap: 2.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.newsrow:hover { background: var(--paper-2); }
.newsrow time { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); }
.newsrow h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.newsrow p { color: var(--ink-2); margin: 0; font-size: .95rem; }
.newsrow__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.newsrow__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { font-size: .85rem; color: var(--ink-3); padding-top: .6rem; }
.g-6 { grid-column: span 6; }
.g-4 { grid-column: span 4; }
.g-8 { grid-column: span 8; }
.g-12 { grid-column: span 12; }
.g-8 img, .g-12 img { aspect-ratio: 16 / 9; }

/* Mixed-orientation gallery: a portrait tile sets its row's height and the
   landscape tile beside it fills to match, so neither gets cropped to the
   other's shape. Scoped, so the all-landscape galleries keep 16:9 tiles. */
.gallery--mixed figure { display: flex; flex-direction: column; }
.gallery--mixed figure img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
.gallery--mixed .is-portrait img { aspect-ratio: 3 / 4; }
.gallery--mixed .g-8 img { aspect-ratio: auto; }

/* ---------- Contribute band ---------- */
.contribute {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
}
.contribute > div { padding: 3rem; }
.contribute > div + div { border-left: 1px solid var(--rule); background: var(--paper-2); }
/* On a tinted section the panel tint would match the ground and the two columns
   would read as one. Flip it to white so the split still shows. */
.section--tint .contribute > div + div { background: var(--paper); }
/* Contribute on a dark section. Its own hairline border, column divider and panel
   tint are all light tokens and would glare against the forest, and `.contribute p`
   sets --ink-2 later in this file than `.section--dark p`, so it needs restating. */
.section--dark .contribute { border-color: rgba(255,255,255,.22); }
.section--dark .contribute > div + div {
  border-left-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
}
.section--dark .contribute p { color: var(--on-dark-muted); }
.contribute h3 { font-size: var(--step-2); }
.contribute p { color: var(--ink-2); }

/* ---------- Newsletter ---------- */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.signup { display: flex; gap: 0; flex-wrap: wrap; }
.signup input {
  flex: 1;
  min-width: 220px;
  font: inherit;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule-dark);
  border-right: 0;
  background: var(--paper);
  color: var(--ink);
}
.signup input:focus { outline: 2px solid var(--ochre); outline-offset: -2px; }
.signup .btn { flex: none; }
.formnote { font-size: .85rem; color: var(--ink-3); margin: .8rem 0 0; }
.formstatus {
  display: none;
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--ochre-pale);
  color: var(--ochre-text);
  font-size: .9rem;
}
.formstatus.is-on { display: block; }
.formstatus--error { background: var(--error-pale); color: var(--error-text); }
/* The signup form is a flex row — give the status its own full-width line
   so a long error message wraps below the field instead of beside it. */
.signup .formstatus { flex-basis: 100%; }

/* ---------- Forms ----------
   Stays in the Site 2 language: square corners, hairline rules, no shadows.
   Depth comes from the tinted panel behind white fields, not from elevation. */
.formpanel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ochre);
  padding: 2.4rem;
}
.formpanel > h2:first-child { margin-top: 0; }
.section--tint .formpanel { background: var(--paper); }

.form { display: grid; gap: 1.35rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field .req { color: var(--ochre-text); margin-left: .15rem; }

.field input, .field select, .field textarea {
  font: inherit;
  font-size: .95rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--rule-dark);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .16s ease, background .16s ease;
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--ink-3);
  opacity: .75;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ochre);
  outline-offset: -2px;
  border-color: var(--ochre);
}
/* A field the browser has judged invalid, but only once the visitor has left it */
.field input:not(:placeholder-shown):invalid { border-color: var(--error-text); }
.field textarea { min-height: 160px; resize: vertical; }

/* Native select arrows differ per platform — draw our own so the control
   matches the text inputs. The chevron is --ochre (#C08A2C), URL-encoded. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C08A2C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}

.form .btn { justify-content: center; padding-inline: 2.4rem; }
.formhint { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0; }

/* ---------- Tables ---------- */
.tablescroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: .95rem; }
th, td { text-align: left; padding: 1rem; border-bottom: 1px solid var(--rule); }
th { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.person { border-top: 2px solid var(--ochre); padding-top: 1.2rem; }
.person h3 { font-size: var(--step-1); margin-bottom: .2rem; }
.person__role { font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.person p { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-dark); color: var(--on-dark-faint); padding: 4.5rem 0 2rem; }
/* Official reversed logo export, used straight on the dark footer — no plate.
   This is the stacked lockup (2166x926), so it needs more height than the
   single-line masthead version to keep the wordmark legible. */
.footer__logo { display: inline-block; margin-bottom: 1.5rem; }
.footer__logo img { height: 78px; width: auto; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; }
.footer h4 { color: var(--on-dark); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer a { color: var(--on-dark-faint); text-decoration: none; font-size: .93rem; }
.footer a:hover { color: var(--ochre); }
.footer p { font-size: .93rem; }
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
}
.social { display: flex; gap: 1rem; }
.social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.social a:hover { border-color: var(--ochre); color: var(--ochre); }


/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .masthead .wrap { gap: 1.2rem; }
  .mainnav { gap: 1.2rem; }
  .quicknav { grid-template-columns: repeat(2, 1fr); }
  .quicknav a:nth-child(2) { border-right: 0; }
  .quicknav a:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .quicknav--2 a { border-bottom: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .events { grid-template-columns: repeat(2, 1fr); }
  .events > *:nth-child(2n) { border-right: 0; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .section { padding: 4rem 0; }
  .section__head { grid-template-columns: 1fr; gap: 1rem; }
  .editorial, .editorial--media { grid-template-columns: 1fr; gap: 2.5rem; }
  .videoblock { grid-template-columns: 1fr; gap: 2rem; }
  .video__btn { width: 64px; height: 64px; }
  .projects__body { grid-template-columns: 1fr; gap: 1rem; }
  .newsrow { grid-template-columns: 1fr; gap: 1rem; }
  .newsrow__media { max-width: 320px; }
  .contribute { grid-template-columns: 1fr; }
  .contribute > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .newsletter { grid-template-columns: 1fr; gap: 1.5rem; }
  .g-6, .g-4, .g-8 { grid-column: span 12; }
  .hero { min-height: 520px; }
}

@media (max-width: 700px) {
  :root { --gutter: 1.25rem; }
  .masthead__logo img { height: 38px; }
  .masthead .wrap { min-height: 70px; position: relative; }
  .navtoggle { display: block; }
  .mainnav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem 1.25rem 1.2rem;
  }
  .mainnav.is-open { display: flex; }
  .mainnav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .mainnav a:hover { border-bottom-color: var(--rule); }
  .mainnav .btn { justify-content: center; margin-top: .8rem; }
  .cards, .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .events { grid-template-columns: 1fr; }
  .events > * { border-right: 0; }
  .figures { grid-template-columns: 1fr; }
  .figures > div { border-left: 0; padding-left: 0; }
  .people { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .form-row { grid-template-columns: 1fr; }
  .formpanel { padding: 1.5rem 1.25rem; }
  .form .btn { width: 100%; }
  .signup input { border-right: 1px solid var(--rule-dark); min-width: 100%; }
  .signup .btn { width: 100%; justify-content: center; margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card__media img, .card:hover .card__media img { transition: none; transform: none; }
  .arrow::after { transition: none; }
}