/* ============================================================
   NNTC homepage — static replica
   Design tokens sampled from the live site (nntc.com.au).
   ============================================================ */

@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-Light.ttf") format("truetype");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-Regular.ttf") format("truetype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-Medium.ttf") format("truetype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-Bold.ttf") format("truetype");     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("assets/fonts/SeasonSans-Heavy.ttf") format("truetype");    font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --sand:   #f1eae8;   /* page background          */
  --ink:    #2b2e34;   /* dark cards, header, text */
  --lilac:  #b0aaf8;   /* primary button           */
  --olive:  #616c29;   /* acknowledgement panel    */
  --ochre:  #bc6f2a;   /* featured news card       */
  --rule:   rgba(43, 46, 52, .35);

  --shell:  1268px;
  --radius: 24px;
  --font:   "Season Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* The smallest type on the site: the uppercase eyebrow over a heading, a
     date, a category, a file size, a definition list's terms. Twenty-one rules
     used 11px, which reads on a monitor at arm's length and is tight on a
     phone held in one hand — and it is exactly the type that says what a thing
     is. One token so it can be raised on small screens in one place. */
  --micro: .6875rem;
}

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

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

body {
  margin: 0;

  /* Backstop for anything that bleeds past the right edge — the mission
     artwork above all. `hidden` first so browsers without `overflow: clip`
     still get a page that does not scroll sideways. */
  overflow-x: hidden;
  overflow-x: clip;

  background: var(--sand);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.2; }

a { color: inherit; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.shell {
  width: min(100% - 3rem, var(--shell));
  margin-inline: auto;
}

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

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--lilac);
  color: var(--ink);
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.btn:hover  { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn--icon { padding: .7rem 1.15rem; }
.btn--icon svg { width: 24px; height: 16px; display: block; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background-color .25s ease;
}
.site-header.is-stuck { background: var(--ink); }
/* Pages with no hero photograph behind the header need it solid from the
   start — the nav is set in sand and is invisible against the page otherwise. */
.site-header.is-solid { background: var(--ink); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
}

/* NNTC asked for the mark to sit a little larger in the header. The bar's
   height comes from its padding, not the logo, so this grows the mark without
   moving the navigation. */
.logo img { width: 136px; height: auto; }

.site-header__rule {
  flex: 1;
  height: 1px;
  background: var(--sand);
  opacity: .85;
}

.nav {
  display: flex;
  align-items: center;
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 0 0 0 .35rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a,
.nav__contact {
  display: block;
  padding: .8rem 1.05rem;
  color: var(--sand);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav__list a:hover { opacity: .75; }

.nav__contact {
  background: var(--lilac);
  color: var(--ink);
  border-radius: 999px;
  margin-left: .35rem;
}
.nav__contact:hover { filter: brightness(1.07); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: var(--sand);
  content: "";
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(4.5px); }

/* Open, the three bars become a cross.
   The control was three lines whether the menu was open or shut, so the only
   thing saying it was open was the panel underneath it — and the panel does
   not cover the page, so on a long page it can be scrolled away from while it
   is still open. The two outer bars converge on the centre line and cross;
   the middle one, which is the span's own background, goes. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  transition: transform .22s ease, background-color .22s ease;
}
.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(0) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after  { transform: translateY(-1.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
}

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 1rem 1.5rem 1.5rem;
}
.nav-mobile a {
  padding: .75rem 0;
  color: var(--sand);
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 234, 232, .18);
}
.site-header.is-open { background: var(--ink); }
.site-header.is-open .nav-mobile { display: flex; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 9rem 0 6rem;
  color: var(--sand);
  overflow: hidden;
}

/* Pinned to the viewport so the page scrolls over it, the way the news lead
   does. Sized to the viewport by definition, so nothing is upscaled. Touch
   browsers and reduced-motion fall back to a still photograph further down. */
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("assets/homepage/000000_BenjaminWarlngunduBayliss_05629.jpg") center / cover no-repeat;
  background-attachment: fixed;
}
.hero__bg::after {
  position: absolute;
  inset: 0;
  /* A light overall tint under the directional gradient. The photograph is
     bright and high-contrast on the right, where the heading's descenders and
     the lead paragraph were losing legibility against the pale rock. */
  background:
    linear-gradient(90deg, rgba(20, 22, 26, .58) 0%, rgba(20, 22, 26, .30) 55%, rgba(20, 22, 26, .14) 100%),
    rgba(20, 22, 26, .16);
  content: "";
}

.hero__inner { position: relative; }

.hero h1 {
  /* Sized so the heading breaks after "…advocating for", as the live site does. */
  max-width: 900px;
  font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.375rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1.75rem;
}

.hero__lead {
  max-width: 44ch;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: 2.25rem;
}

.hero__credit {
  position: absolute;
  right: 0;
  bottom: 1.5rem;
  margin: 0;
  padding: .5rem 1rem;
  background: rgba(28, 30, 34, .62);
  color: var(--sand);
  font-size: .875rem;
}

/* ── Mission ─────────────────────────────────────────────────────────── */

.mission {
  position: relative;
  padding: 6rem 0 4rem;

  /* Clip sideways but not downward: the artwork bleeds off the right edge and
     must stay off the page, while the extension has to leave this section
     entirely and run on behind the Highlights menu. `hidden` on one axis
     forces the other to `auto`, which would clip it at the section boundary —
     `clip` is the one that leaves the other axis alone. */
  overflow-x: clip;
  overflow-y: visible;
}

/* NNTC's wave graphic, at the size and position it has always had — the
   expander never moves or rescales it. */
.mission__wave {
  position: absolute;
  top: 1.5rem;
  left: 60%;
  width: 46rem;
  pointer-events: none;
}
.mission__wave img {
  display: block;
  width: 100%;
  max-width: none;
}

/* The extension. Its viewBox matches the PNG's own pixel space and it is laid
   at the same width, so its stroke weight and spacing track the artwork's at
   any viewport. It starts beyond the right of that space and runs well below
   the bottom of it, so overflow must stay visible — the clipping that keeps
   it off the page happens on .mission and body instead. */
.mission__trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
}
.mission__trail path {
  fill: none;
  stroke: #616c29;         /* sampled from the artwork itself */
  stroke-linecap: round;
  /* Weight is a presentation attribute on the <svg>, measured from the
     artwork by the generator — setting it here would override that. */

  /* pathLength="1" normalises every line, so one dashoffset value draws all
     five regardless of their differing turn radii. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;

  /* Near-constant speed with soft ends — a nib travelling at a steady pace,
     not a curtain snapping open. An ease-out here front-loads the motion so
     hard that the visible stretch is finished in a third of a second. */
  transition: stroke-dashoffset 1.5s cubic-bezier(.4, .05, .5, 1);
}

/* Expanding draws the line down; collapsing runs the same transition in
   reverse, so it retracts back into the graphic instead of vanishing. The
   inner strokes lead by a fraction, which gives the band a hand-drawn feel. */
.mission.is-open .mission__trail path { stroke-dashoffset: 0; }

.mission.is-open .mission__trail path:nth-child(4) { transition-delay: .04s; }
.mission.is-open .mission__trail path:nth-child(3) { transition-delay: .08s; }
.mission.is-open .mission__trail path:nth-child(2) { transition-delay: .12s; }
.mission.is-open .mission__trail path:nth-child(1) { transition-delay: .16s; }

/* No drawing motion for readers who have asked for less: the extension is
   simply there, at full length, whenever the text is open. */
@media (prefers-reduced-motion: reduce) {
  .mission__trail path { transition: none; }
  .mission.is-open .mission__trail path { transition-delay: 0s; }
}



/* No outline. The mission is the section's only content, so it is given the
   room rather than being fenced into a card in the corner of it. */
.mission__card {
  position: relative;
  max-width: 60ch;
  padding: 0;
  background: transparent;
  border: 0;
}

.mission__card h3 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem);
  line-height: 1.15;
  margin-bottom: 1.75rem;
}

.mission__card p {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  line-height: 1.55;
}

/* Collapsed to roughly a paragraph and a half: the whole opening paragraph,
   then the next one cut mid-flow under the fade so there is an obvious reason
   to open it. */
.mission__body {
  position: relative;
  max-height: 14.5rem;
  overflow: hidden;
  transition: max-height .85s cubic-bezier(.22, .61, .36, 1);
}
.mission__body::after {
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  background: linear-gradient(transparent, var(--sand));
  content: "";
  transition: opacity .25s ease;
}
.mission.is-open .mission__body { max-height: 46rem; }
.mission.is-open .mission__body::after { opacity: 0; }

.mission__card .btn { margin-top: 1.75rem; }
.mission.is-open #mission-toggle span[aria-hidden] { transform: rotate(45deg); }
#mission-toggle span[aria-hidden] {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .25s ease;
}

/* The card system that Highlights and Latest News used has been removed —
   both sections now carry their own imagery-led layouts. */

.grid { display: grid; gap: 1.5rem; }

/* ── Highlights ──────────────────────────────────────────────────────── */

.highlights { padding: 3rem 0 5rem; }

/* The extension now runs down through this section. Positioning the heading
   lifts it into the same paint tier as the wave, which is otherwise a
   positioned element in an earlier section and would draw over the top of it. */
.highlights .shell { position: relative; }

.highlights h2,
.news h2,
.mabo h2 {
  font-size: clamp(2rem, 1.3rem + 2vw, 3.15rem);
  line-height: 1.4;
}

.highlights h2 { margin-bottom: 2.25rem; }

/* ── Highlights: a full-bleed menu of three ──────────────────────────── */

.hl-menu {
  /* Break out of .shell to the full viewport width. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin-block: 0;
  padding: 0;
  /* Hairline separators are the section's own background showing through,
     so the columns read as divided without anything being outlined. */
  gap: 2px;
  background: var(--sand);
}

.hl { position: relative; isolation: isolate; }

.hl__link {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(72vh, 620px);
  padding: 2.5rem 2rem;
  overflow: hidden;
  color: var(--sand);
  text-decoration: none;
}

.hl__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

/* A scrim, not a box: keeps the copy legible over any photograph without
   drawing a container around it. */
.hl__link::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(28, 30, 34, .88) 0%,
    rgba(28, 30, 34, .62) 38%,
    rgba(28, 30, 34, .12) 72%,
    rgba(28, 30, 34, .04) 100%
  );
  content: "";
  transition: opacity .35s ease;
}

.hl__inner { display: flex; flex-direction: column; gap: .8rem; }

.hl__title {
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.hl__body {
  font-size: .98rem;
  line-height: 1.5;
  max-width: 40ch;
  opacity: .92;
}

.hl__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lilac);
}
.hl__cta::after {
  transition: transform .3s ease;
  content: "→";
}

.hl__link:hover .hl__img { transform: scale(1.05); }
.hl__link:hover .hl__cta::after { transform: translateX(4px); }
.hl__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: -6px; }

/* Narrow screens: the same menu, turned into full-bleed horizontal rows. */
@media (max-width: 860px) {
  .hl-menu { grid-template-columns: 1fr; }
  .hl__link {
    min-height: 15rem;
    padding: 1.75rem 1.5rem;
  }
  .hl__body { max-width: none; }
  .hl__link::after {
    background: linear-gradient(
      to top,
      rgba(28, 30, 34, .9) 0%,
      rgba(28, 30, 34, .66) 55%,
      rgba(28, 30, 34, .3) 100%
    );
  }
}

/* ── News ────────────────────────────────────────────────────────────── */

.news { padding: 3rem 0 5rem; }

.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.news__all svg { width: 40px; height: 16px; display: block; }
.news__all:hover { opacity: .6; }

/* ── Latest News: editorial hierarchy, not a row of equal cards ──────────
   The Highlights section already uses equal full-bleed columns with copy over
   the image. This one earns its imagery through scale instead: one large lead
   against three quieter rows, copy beneath the photograph, nothing boxed. */

.stories {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.story__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story__media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(43, 46, 52, .06);
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.story__link:hover .story__media img { transform: scale(1.04); }
.story__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }

.story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 1.1rem 0 .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story__cat { color: var(--olive); }
.story--feature .story__cat { color: var(--ochre); }
.story__date { color: rgba(43, 46, 52, .55); }

.story__title {
  display: block;
  font-weight: 500;
  line-height: 1.22;
  text-wrap: balance;
}
.story__link:hover .story__title { text-decoration: underline; text-underline-offset: 3px; }

/* The lead */
.story--lead .story__media { aspect-ratio: 16 / 10; }
.story--lead .story__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem); }
.story--lead .story__excerpt {
  display: block;
  margin-top: .85rem;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(43, 46, 52, .78);
}
.story--lead .story__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.story--lead .story__more::after { transition: transform .3s ease; content: "→"; }
.story__link:hover .story__more::after { transform: translateX(4px); }

/* The three beneath it */
.stories__rest { display: flex; flex-direction: column; gap: 2rem; }

/* Sits under the three, aligned to the left edge of their column so it reads
   as belonging to the list rather than to the lead story. */
.stories__all {
  align-self: flex-start;
  margin-top: .25rem;
}

.stories__rest .story__link {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.stories__rest .story__media { aspect-ratio: 4 / 3; }
.stories__rest .story__meta { margin-top: 0; }
.stories__rest .story__title { font-size: 1.05rem; }

@media (max-width: 980px) {
  .stories { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Once the two columns collapse there is no column edge to sit against, so
     the button spans the list instead — and becomes an easier target. */
  .stories__all {
    align-self: stretch;
    margin-top: .75rem;
    padding-block: 1rem;
  }
}
@media (max-width: 520px) {
  .stories__rest .story__link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; }
  .stories__rest .story__title { font-size: .98rem; }
}

.card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card--news .card__title { margin-bottom: 0; font-size: 1.35rem; }

.card__excerpt { flex: 1; margin: 0; font-size: .95rem; }

/* ── Sector Events Calendar ──────────────────────────────────────────────
   The joint NNTC / Mabo Centre calendar. Given a slightly deeper ground than
   the rest of the page: it is a shared module living inside two different
   websites, and a change of surface says so without drawing a box round it. */

.events {
  padding: 5rem 0 4.5rem;
  background: #ece4e1;
}

.events__head { max-width: 46rem; }

.events__eyebrow {
  margin-bottom: .6rem;
  color: var(--olive);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.events h2 {
  font-size: clamp(2rem, 1.3rem + 2vw, 3.15rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.events__intro {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  line-height: 1.55;
  margin-bottom: 0;
}

/* Filters. Native selects on purpose — they are keyboard and screen-reader
   correct for free, they collapse to the platform picker on a phone, and they
   are the control The Events Calendar's own Filter Bar renders anyway. */
.events__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  margin: 2.5rem 0 1.25rem;
}

.filt { display: flex; flex-direction: column; gap: .4rem; }

.filt__label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

.filt__select {
  appearance: none;
  min-width: 11rem;
  padding: .7rem 2.4rem .7rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  /* Chevron drawn inline so the control needs no image request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2e34' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px 8px;
  color: var(--ink);
  font-family: var(--font);
  font-size: .95rem;
  cursor: pointer;
}
.filt__select:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

.filt__reset {
  padding: .7rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.events__count {
  margin-bottom: 1.5rem;
  font-size: .875rem;
  opacity: .7;
}

/* The listing. Hairline rules, no cards — the same instinct as unboxing the
   mission: rows can be separated without being fenced. */
.cal {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.cal__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.cal__row[hidden] { display: none; }

.cal__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--olive);
  line-height: 1;
}
.cal__day { font-size: 2.35rem; letter-spacing: -.02em; }
.cal__range { font-size: 1.35rem; }
.cal__mon {
  margin-top: .35rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: .55rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Host is the one piece of metadata that must never be ambiguous on a shared
   calendar, so it is the only one that carries colour. */
.cal__host { padding-right: .75rem; border-right: 1px solid var(--rule); }
.cal__host--nntc { color: var(--olive); }
.cal__host--mabo { color: var(--ochre); }
.cal__type, .cal__tag { opacity: .65; }

.cal__status {
  padding: .15rem .5rem;
  border-radius: 4px;
  background: var(--ochre);
  color: var(--sand);
  letter-spacing: .06em;
}

.cal__title {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.45rem);
  line-height: 1.3;
  margin-bottom: .45rem;
}
.cal__title a { text-decoration: none; }
.cal__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cal__where { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .75; }

.cal__add {
  align-self: center;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .2rem;
}
.cal__add:hover { border-bottom-color: var(--ink); }

.cal__row.is-postponed .cal__date { opacity: .5; }
.cal__row.is-postponed .cal__day { font-size: 1.5rem; }

.cal__empty { padding: 2.5rem 0; font-size: 1.05rem; }

.events__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
}

.events__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: rgba(43, 46, 52, .06); filter: none; }

.events__subscribe { margin: 0; font-size: .875rem; opacity: .75; }
.events__subscribe a { text-underline-offset: 3px; }
.events__subscribe span { margin: 0 .45rem; opacity: .5; }

.events__note {
  margin: 2rem 0 0;
  font-size: .8125rem;
  font-style: italic;
  opacity: .55;
}

@media (max-width: 760px) {
  .events { padding: 3.5rem 0 3rem; }
  .filt__select { min-width: 0; width: 100%; }
  .filt { flex: 1 1 12rem; }

  /* Date moves above the title rather than beside it: at this width a fixed
     date column costs more than it earns. */
  .cal__row {
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: 1.35rem 0;
  }
  .cal__date { flex-direction: row; align-items: baseline; gap: .5rem; }
  .cal__mon { margin-top: 0; }
  .cal__day { font-size: 1.75rem; }
  .cal__add { align-self: start; }
  .events__foot { flex-direction: column; align-items: flex-start; }
}

/* ── Mabo ────────────────────────────────────────────────────────────── */

.mabo { padding: 3rem 0 6rem; }

.mabo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.mabo h2 { margin-bottom: 2rem; }

.mabo h3 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 2rem);
  line-height: 1.35;
  margin-bottom: 2rem;
}

.mabo__text p { font-size: 1rem; line-height: 1.6; }
.mabo__text .btn { margin-top: 1rem; }

.mabo__figure { margin: 0; }

/* The radius and clipping belong to the picture, not to the whole figure —
   the caption below it should not be inside a rounded box. */
.mabo__figure-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.mabo__figure img { width: 100%; }

/* The closing paragraph, moved here from the left column. Set at the same size
   as the body copy it came from so it reads as text, not as a photo credit. */
.mabo__figure figcaption {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.mabo__credit {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: .5rem 1rem;
  background: rgba(28, 30, 34, .62);
  color: var(--sand);
  font-size: .875rem;
}

/* ── Acknowledgement of Country ──────────────────────────────────────────
   A full-bleed olive band opening the footer. It carries the interstitial's
   own colour and photograph, so the statement keeps the weight it had as a
   gate — it is the one place on the page that is not the sand background,
   and it is read rather than clicked past. */

.ack {
  background: var(--olive);
  color: var(--sand);
}

/* The photograph runs off the left edge of the page and fills the band top to
   bottom — no radius, no inset, no frame. A rounded box floating in a coloured
   panel reads as a photo in a picture frame, which is the treatment this
   redesign is getting away from. Only the right-hand side is held to the
   shell, so the text still lines up with everything else in the footer. */
.ack__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: stretch;
  padding-right: max(1.5rem, calc((100% - var(--shell)) / 2));
}

.ack__media {
  margin: 0;
  display: grid;          /* lets the image stretch to the row's full height */
}
/* Cropped by height rather than to a fixed ratio, so the column always meets
   the top and bottom of the band however long the statement runs. The crop is
   held high: the sunset and the ranges are in the upper half of the frame and
   the lower third is near-black foreground. */
.ack__media img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
  object-position: center 40%;
}

.ack__text { padding: 4rem 0; }

.ack__head {
  margin-bottom: 1.5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.ack__text p { font-size: 1.1875rem; line-height: 1.5; }

/* The warning is a second statement, not a continuation of the first, so it
   is set apart by a rule and a step down in size. */
.ack__warning {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(241, 234, 232, .3);
  font-size: 1rem;
  opacity: .85;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { padding: 0 0 3rem; }
.site-footer > .shell { padding-top: 3rem; }

.site-footer__top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo--footer img { width: 140px; }
/* The logo asset is white (drawn for the dark header); brightness(0) recolours
   it to solid black for the light footer while keeping its alpha channel. */
.logo--footer { filter: brightness(0); }

.site-footer__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.site-footer__links {
  display: flex;
  gap: .5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .35rem;
}
.site-footer__links a {
  padding: .55rem 1rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
}
.site-footer__links a:hover { background: rgba(43, 46, 52, .08); }

/* ── Footer sitemap ──────────────────────────────────────────────────────
   Set as plain columns of text. The restraint is the point: the page above it
   has already dropped its borders, so a footer fenced into ruled boxes would
   put them all back at the last moment. */

.fmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3.5rem;
}

.fmap__head {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.fmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.fmap__list a {
  font-size: .95rem;
  text-decoration: none;
}
.fmap__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Social links sit at the foot of the last column rather than in a row of
   their own — they are two more ways to reach NNTC, not a separate department. */
.fsocial {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.fsocial a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  text-decoration: none;
}
.fsocial svg { width: 20px; height: 20px; display: block; flex: none; }
.fsocial a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.fsocial a:focus-visible,
.fmap__list a:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.site-footer__copy {
  margin: 3.5rem 0 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   MEMBERS PAGE
   Same language as the homepage: photography at full bleed, no
   cards, no ruled boxes, hierarchy made by scale and by the
   edges of the imagery rather than by borders.
   ============================================================ */

/* ── Members hero ────────────────────────────────────────────────────────
   The live page puts its photograph in a rounded box beside the heading.
   Here the photograph is the hero, as on the homepage. Shorter than the home
   hero — this page's job is the directory, so the hero introduces and gets
   out of the way. */

.mhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 720px);
  padding: 10rem 0 3.5rem;
  color: var(--sand);
  overflow: hidden;
}

.mhero__bg {
  position: absolute;
  inset: 0;
  background: url("assets/members/jaru-country.jpg") center 55% / cover no-repeat;
  background-attachment: fixed;
}
.mhero__bg::after {
  position: absolute;
  inset: 0;
  /* The photograph is a warm sunset and very bright across the middle band,
     where the lead paragraph sits. Darker at the foot than the home hero. */
  background: linear-gradient(
    180deg, rgba(20, 22, 26, .52) 0%, rgba(20, 22, 26, .30) 35%, rgba(20, 22, 26, .74) 100%);
  content: "";
}

.mhero__inner { position: relative; }

.mhero__eyebrow {
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.mhero h1 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.375rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.mhero__lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.45;
  margin-bottom: 2rem;
}

.mhero__cta { margin-bottom: 2.75rem; }

.mhero__credit {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  margin: 0;
  padding: .5rem 1rem;
  background: rgba(28, 30, 34, .62);
  font-size: .8125rem;
}

/* The count is the argument this page is making, so it is set as a figure
   rather than buried in a sentence. Rules between, not boxes around. */
.mstats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 0;
}
.mstats > div {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(241, 234, 232, .35);
}
.mstats dt {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.mstats dd {
  margin: .15rem 0 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
}

/* ── Directory ─────────────────────────────────────────────────────────── */

.dir { padding: 5.5rem 0 4.5rem; }

.dir__head { max-width: 60ch; margin-bottom: 3rem; }
.dir__head h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  margin-bottom: .9rem;
}
.dir__intro { font-size: 1.125rem; opacity: .8; }

/* Map on the left, list on the right. The map is sticky: it is a control, and
   a control that scrolls away is useless by the time you have read far enough
   to want it. */
.dir__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3.5rem;
  align-items: start;
}

.dir__mapwrap { position: sticky; top: 6.5rem; }

/* ── The map ─────────────────────────────────────────────────────────────
   A real Australia with true state boundaries, generated from latitude and
   longitude by scripts/build-australia-map.mjs. Shaded by member count, so the
   distribution reads before anything is clicked. */

.amap__svg { width: 100%; height: auto; display: block; overflow: visible; }

.amap__shape,
.amap__isle {
  stroke: var(--sand);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill .18s ease;
}

/* Four steps of one colour rather than four colours: this is a quantity, not
   a set of categories. */
.amap__state[data-band="0"] .amap__shape { fill: #dcd3d0; }
.amap__state[data-band="1"] .amap__shape,
.amap__state[data-band="1"] .amap__isle { fill: #b3bd8a; }
.amap__state[data-band="2"] .amap__shape { fill: #8b9a51; }
.amap__state[data-band="3"] .amap__shape { fill: var(--olive); }

.amap__state[role="button"] { cursor: pointer; }
.amap__state[role="button"]:hover .amap__shape,
.amap__state[role="button"]:hover .amap__isle { fill: #7d8a45; }
.amap__state[role="button"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.amap__state.is-on .amap__shape,
.amap__state.is-on .amap__isle { fill: var(--ochre); }

/* The Torres Strait is a scatter of small islands, so a disc behind them marks
   the region as one selectable place — otherwise the only member region on the
   map without a landmass is also the hardest one to see or hit. */
.amap__halo {
  fill: var(--olive);
  opacity: .16;
  stroke: var(--olive);
  stroke-width: 1.5;
  stroke-opacity: .5;
  transition: opacity .18s ease;
}
.amap__state--isles[role="button"]:hover .amap__halo { opacity: .3; }
.amap__state--isles.is-on .amap__halo { fill: var(--ochre); stroke: var(--ochre); opacity: .32; }

.amap__hit { fill: transparent; cursor: pointer; }

.amap__count {
  fill: var(--sand);
  font-family: var(--font);
  font-size: 30px;
  font-weight: 600;
  pointer-events: none;
}
.amap__state[data-band="1"] .amap__count { fill: #2f3520; }
/* The Torres Strait is a scatter of small islands; its number sits beside
   them rather than on top of a 3px dot. */
.amap__count--isles { font-size: 28px; fill: var(--ink); font-weight: 600; }

.amap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: .8125rem;
}
.amap__legend li { display: flex; align-items: center; gap: .45rem; }
.amap__key { width: 14px; height: 14px; border-radius: 3px; display: block; }
.amap__key[data-band="0"] { background: #dcd3d0; }
.amap__key[data-band="1"] { background: #b3bd8a; }
.amap__key[data-band="2"] { background: #8b9a51; }
.amap__key[data-band="3"] { background: var(--olive); }

.amap__note { margin: .75rem 0 0; font-size: .8125rem; opacity: .65; }

/* ── Directory controls ──────────────────────────────────────────────────
   One rule under the search field rather than a bordered input: the page has
   no boxes anywhere else and the field does not need one to be findable. */

.dir__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.dsearch { position: relative; flex: 1 1 18rem; display: flex; align-items: center; }
.dsearch__icon {
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  opacity: .55;
  pointer-events: none;
}
.dsearch__input {
  width: 100%;
  padding: .7rem 0 .7rem 2rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
  border-radius: 0;
  appearance: none;
}
.dsearch__input::placeholder { color: inherit; opacity: .5; }
.dsearch__input:focus { outline: none; border-bottom-color: var(--ink); border-bottom-width: 2px; }
.dsearch__input:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }

.dtypes { display: flex; gap: .4rem; }
.dtype {
  padding: .55rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.dtype:hover { background: rgba(43, 46, 52, .07); }
.dtype.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.dtype:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

/* NNTC's own definitions, shown against the filter they explain. */
.ddef {
  max-width: 70ch;
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--lilac);
  font-size: .9375rem;
  line-height: 1.55;
  opacity: .85;
}
.ddef strong { font-weight: 600; }

.dir__status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.dir__count { margin: 0; font-size: .9375rem; font-weight: 500; }

.dir__clear {
  padding: .3rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.dir__clear:hover { background: rgba(43, 46, 52, .07); }
.dir__clear:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.dir__empty { margin: 2rem 0; font-size: 1.0625rem; }
.dir__note { margin: 3rem 0 0; max-width: 90ch; font-size: .8125rem; line-height: 1.6; opacity: .6; }

/* ── The list ────────────────────────────────────────────────────────────
   Rows divided by a hairline, not enclosed in cards. Each is a <details>, so
   expanding works with JavaScript off. */

/* Each state is a closed group. Ninety-seven members expanded is 12,700 pixels
   of scrolling before a reader reaches the bottom of a page whose real question
   is "is my region here?" — seven headings answer that in one screen. */
.mgroup { margin: 0; }
.mgroup[hidden] { display: none; }

.mgroup__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.mgroup__head::-webkit-details-marker { display: none; }
.mgroup__head:hover { color: var(--olive); }
.mgroup__head:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.mgroup__name { opacity: .75; }
.mgroup[open] .mgroup__name { opacity: 1; }

.mgroup__n {
  font-size: .75rem;
  letter-spacing: 0;
  opacity: .6;
}

/* The same chevron the member rows use, so opening a state and opening a member
   read as the same gesture. */
.mgroup__toggle {
  margin-left: auto;
  width: .55rem;
  height: .55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .6;
}
.mgroup[open] .mgroup__toggle { transform: rotate(-135deg); }

.mgroup__body { padding-bottom: 1.5rem; }
.mgroup__body .mrow:last-child { border-bottom: 0; }

.mrow { border-bottom: 1px solid var(--rule); }
.mrow[hidden] { display: none; }

.mrow__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.mrow__head::-webkit-details-marker { display: none; }
.mrow__head:hover .mrow__name { text-decoration: underline; text-underline-offset: 3px; }
.mrow:focus-within .mrow__head { outline: none; }
.mrow__head:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

/* ── Marks for organisations with no logo ────────────────────────────────
   A monogram rather than the organisation's full name set in a box: the name
   in a box reads as a caption that has escaped, and at this size it is
   unreadable anyway. The letters are the organisation's own abbreviation where
   it has one, otherwise initials from the distinctive part of its name.

   Tinted from the site palette and keyed to the name, so a given organisation
   always appears the same — and set in the same square as a real logo, so a
   row with a placeholder sits level with a row that has one. */
.mrow__mono {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--sand);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
}
/* Small marks need short strings; four letters get a size down to fit — but
   not below the floor the rest of the small type keeps. Four letters at 12px
   semibold measure about 30px inside a 44px tile, so there is room. */
.mrow__mono { font-size: clamp(var(--micro), .55rem + .35vw, .9375rem); }

.mrow__mono[data-tint="0"] { background: #616c29; }   /* olive  */
.mrow__mono[data-tint="1"] { background: #bc6f2a; }   /* ochre  */
.mrow__mono[data-tint="2"] { background: #2b2e34; }   /* ink    */
.mrow__mono[data-tint="3"] { background: #7d6f9e; }   /* lilac, darkened to hold white type */
.mrow__mono[data-tint="4"] { background: #3f5148; }   /* deep green-grey */

/* Logos arrive at wildly different aspect ratios, so they are contained in a
   fixed square and never cropped. */
.mrow__logo {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
}

.mrow__id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.mrow__name { font-size: 1.0625rem; line-height: 1.3; }
.mrow__meta { font-size: .8125rem; opacity: .6; }

.mrow__toggle {
  flex: none;
  /* Block, not inline: in the directory it is a flex item and gets blockified
     anyway, but on the board cards it sits inside a plain span, where an inline
     box would drop the width and height and render nothing at all. */
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
}
.mrow__toggle::before,
.mrow__toggle::after {
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.mrow__toggle::after { transform: rotate(90deg); }
.mrow[open] .mrow__toggle::after { transform: rotate(0); opacity: 0; }

.mrow__body { padding: 0 0 1.5rem 4.15rem; max-width: 70ch; }
.mrow__blurb { font-size: 1rem; line-height: 1.6; margin-bottom: .9rem; }

.mrow__site {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 500;
  text-underline-offset: 4px;
}
.mrow__nosite { font-size: .875rem; opacity: .5; margin: 0; }

/* ── What members say ────────────────────────────────────────────────────
   No cards and no carousel. The quotation marks are the only ornament, and
   they are set in the margin so the text block stays flush. */

.says { padding: 4.5rem 0 5.5rem; }
.says h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  margin-bottom: 3rem;
}

.says__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem 4rem;
  align-items: stretch;
}

.quote { margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote__text { margin: 0 0 1.5rem; position: relative; flex: 1 0 auto; }

.quote__text::before {
  position: absolute;
  top: -.55em;
  left: -.62em;
  color: var(--lilac);
  font-size: 3.5rem;
  line-height: 1;
  content: "\201C";
}
.quote__text p {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.55;
}

/* Pinned to the foot of the quote and given a common height. Both parts matter:
   the quotes stretch to the row so pinning aligns their bottoms, and the fixed
   height means a two-line role cannot push one attribution a line above its
   neighbour. Sized to clear the longest of them (Marcia McCullough's two-line
   role, 86px) with a little headroom. */
.quote__by {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: auto;
  min-height: 5.75rem;
}
.quote__by > span { display: flex; flex-direction: column; gap: .1rem; }
/* Height fixed, width free. A square plate suits the two round marks and
   loses the two wordmarks: Central Desert's lockup is 2010px wide with the name
   stacked under it, and contained in 54px it reads as a white square. Fixing
   the height instead gives every logo the same optical weight and lets the wide
   ones have the room they need. */
.quote__logo {
  flex: none;
  width: auto;
  max-width: 140px;
  height: 4.5rem;
  object-fit: contain;
  object-position: left center;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
}
.quote__who { font-weight: 600; font-size: .9375rem; }
.quote__role { font-size: .875rem; opacity: .7; line-height: 1.4; }
.quote__tag {
  margin-top: .2rem;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .55;
}

/* ── Join ────────────────────────────────────────────────────────────────
   Was two outlined boxes joined by a drawn connector. One invitation, so one
   band — photograph bleeding off the left edge, exactly as the
   Acknowledgement panel does at the foot of the page. */

.join {
  display: grid;
  /* Text left, photograph bleeding off the right edge — the mirror of the
     Acknowledgement panel beneath it, which keeps the two pictures clearly
     apart as well as separating them with a band of the page. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: stretch;
  background: var(--ink);
  color: var(--sand);
}

.join__media { display: grid; order: 1; }
.join__media img {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
}

.join__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 4.5rem clamp(2rem, 5vw, 5rem);
  /* Held to the shell on the left, which is the side the copy now starts on. */
  padding-left: max(2rem, calc(50vw - var(--shell) / 2));
}
.join__text h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.join__text p { font-size: 1.125rem; line-height: 1.5; max-width: 40ch; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.mhero--about { align-items: flex-end; min-height: min(70svh, 640px); }
.mhero--about .mhero__bg { background-image: url("assets/about/hero.jpg"); background-position: center 60%; }
.mhero--about h1 { max-width: 20ch; margin-bottom: 0; }

/* ── Who we are ──────────────────────────────────────────────────────── */

.intro {
  position: relative;
  padding: 5rem 0 4rem;
  /* The wave bleeds off the right edge and must stay off the page. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* NNTC's own line work, borrowed from the homepage's mission section, filling
   the open ground beside the opening statement. Decorative only. */
.intro__wave {
  position: absolute;
  top: 2rem;
  /* Never behind the words. The opening statement is 30ch wide at its own
     clamped size, and 52% of the page is short of that on anything under
     about 1500px — at 1470 the wave sat 21px under the last word, at 1180 it
     was 94px under. So the wave's left edge is the statement's right edge plus
     a gap, or 52%, whichever is further right. The font-size is the lead's,
     so that 30ch is the same 30ch. */
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  left: max(52%, calc(max(1.5rem, (100% - var(--shell)) / 2) + 30ch + 3.5rem));
  width: 46rem;
  pointer-events: none;
  opacity: .85;
}
.intro__wave img { width: 100%; height: auto; }

.intro__lead {
  position: relative;
  max-width: 30ch;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 2.5rem;
}
.intro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 4rem;
  max-width: 92ch;
}
.intro__cols p { font-size: 1.0625rem; line-height: 1.6; }

/* ── Full-bleed band ─────────────────────────────────────────────────────
   A thin strip of Country separating two sections. Same drifting photograph as
   the timeline rows — see .tl__media for why the movement is driven from script
   rather than from `background-attachment: fixed`. */

.band {
  height: clamp(9rem, 22vh, 15rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
/* A band that only a narrow screen needs: where a desktop lays a section index
   out as a row beside a block of copy, a phone stacks them and the eye wants
   something to say one has ended. */
@media (min-width: 901px) { .band--narrow { display: none; } }

/* ── Page not found ──────────────────────────────────────────────────────
   Two buttons, the six sections, a search: the three ways out of a dead end,
   in the order a person reaches for them. */
.mhero--nf { min-height: min(52svh, 480px); }
.nf { padding-top: 3rem; }
.nf__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 3.5rem; }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; max-width: 60rem; }
.nf h2 { font-size: var(--micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); margin-bottom: 1rem; }
.nf__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; }
.nf__list a { display: inline-block; padding-block: .45rem; font-size: 1.0625rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.nf__list a:hover { border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .nf__grid { grid-template-columns: 1fr; }
  .nf__actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ── Governance ──────────────────────────────────────────────────────── */

.gov { padding: 2rem 0 4.5rem; }

/* Two columns, two rows. The heading sits alone in row 1 so that the pull quote
   in row 2 starts level with the *first line of the copy* rather than with the
   heading — aligning it to the heading left it floating a heading's height
   above everything it sits beside. */
.gov__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 4rem;
  row-gap: 1.25rem;
  align-items: start;
}
.gov__title {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}
.gov__body { grid-column: 1; grid-row: 2; }
.gov__pull { grid-column: 2; grid-row: 2; }
.gov__body p { font-size: 1.0625rem; line-height: 1.6; }
.gov__link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  text-underline-offset: 4px;
}

/* The team line was an oversized boxed heading on the live page. It is a
   statement about people, so it is set as one — large, quiet, unenclosed. */
.gov__pull {
  padding-left: 1.75rem;
  border-left: 3px solid var(--lilac);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.45;
}

/* ── Board ───────────────────────────────────────────────────────────────
   One director on the stage at a time — the live page's flip-through, which
   suits a board you meet person by person — but every face sits on the strip
   below, so choosing someone is always possible and nobody is buried behind an
   arrow. No cards and no frames: the portrait's own edge is the boundary.

   Without JavaScript all nine panels stack into a plain list, so nothing is
   lost; the `.js` class in the head switches on the single-panel behaviour. */

.bstage { padding: 0 0 5rem; }

.bstage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.5rem; margin-bottom: 2.5rem; }
.bstage__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.bstage__note { margin: 0; font-size: .9375rem; opacity: .6; }

/* Frame and panel share the same two-column track, so the controls in the
   right column land exactly above the name of whoever is on the stage. Same fr
   values and gap on both, which keeps the columns aligned without subgrid. */
.bstage__frame {
  --bgap: clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--bgap);
}

/* No script, no flipping: every panel simply stacks and the controls are
   meaningless, so they are not shown. */
.bstage__controls { display: none; }
.js .bstage__controls {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.bstage__panel {
  /* All nine panels share one grid cell, so the cell is as tall as the tallest
     of them and every panel is stretched to it. Two columns, that is nothing.
     One column, the panel's own two rows share the extra height between them,
     and the portrait's row grows — on a phone the gap between the photograph
     and the director's name was 248px. Rows sit at the top; the panel keeps
     its cell's height and the space falls below, where it belongs. */
  align-content: start;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--bgap);
  align-items: start;
}
.bstage__panel + .bstage__panel { margin-top: 3rem; }   /* no-JS stacking only */

.js .bstage__panel { grid-row: 2; margin-top: 0; }
.js .bstage__panel:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.js .bstage__panel.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }

.bstage__portrait { margin: 0; }
.bstage__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

.bstage__detail { display: flex; flex-direction: column; align-items: flex-start; }

.bstage__count {
  margin: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  opacity: .45;
}
.bstage__n { color: var(--olive); opacity: 1; }

.bstage__name { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.15; }
.bstage__role {
  margin: .5rem 0 1.5rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}
.bstage__bio { max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; }

.bstage__arrows { display: flex; gap: .5rem; flex: none; }
.barrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease;
}
.barrow:hover { background: rgba(43, 46, 52, .08); }
.barrow:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.barrow svg { width: 26px; height: 12px; display: block; }

/* ── The timeline ────────────────────────────────────────────────────────
   A line down the page rather than a rail across it. Three things carry the
   idea:

     · distance is time — the gap above each entry is proportional to the years
       since the last one, so the two twelve-year waits are twelve years of
       empty line and are labelled as such;
     · the line draws itself as you scroll, the same gesture as the homepage's
       wave, and retracts if you scroll back;
     · each moment arrives with its photograph bleeding off the right edge.

   The whole thing degrades to a plain, fully-drawn vertical list with no
   JavaScript and under prefers-reduced-motion. */

.tl { padding: 4rem 0 0; }
.tl__head { max-width: 60ch; margin-bottom: 2rem; }
.tl__head-row { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.tl__head-row h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.tl__lead {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.4;
  font-weight: 500;
}

/* ── History prose ───────────────────────────────────────────────────────
   Six paragraphs set in two 16px columns was a wall. The first paragraph now
   opens the story at a readable size and the rest are behind the same expander
   the homepage uses for "Our Mission" — with a photograph under the opened
   text, so expanding is not just more prose. */

.tl__prose { margin-bottom: 5rem; }

.tl__prose-lead {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem);
  line-height: 1.6;
}

.tl__prose-rest {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .45s ease, opacity .35s ease, margin-top .45s ease;
  opacity: 0;
  margin-top: 0;
}
.tl__prose-rest > .tl__prose-inner { min-height: 0; }
.tl.is-open .tl__prose-rest {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 2rem;
}

/* Text, photograph, text. The picture sits between the two runs of prose
   rather than under them, so the opened block reads as one object. */
.tl__prose-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.tl__prose-col { font-size: 1.0625rem; line-height: 1.6; }
.tl__prose-col p { margin-bottom: 1.15em; }
.tl__prose-col p:last-child { margin-bottom: 0; }

/* Stretched to the tallest column so the photograph squares off the block
   instead of floating in the middle of it. */
.tl__prose-media { margin: 0; align-self: stretch; display: grid; }
.tl__prose-media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}

.tl__prose-toggle { flex: none; }
.tl.is-open .tl__prose-toggle span[aria-hidden] { visibility: hidden; position: relative; }
.tl.is-open .tl__prose-toggle span[aria-hidden]::before {
  visibility: visible;
  position: absolute;
  inset: 0;
  content: "–";
}

/* The track carries no padding of its own: the photographs must run the full
   width of the page, so the shell offset lives on the copy instead. The rail is
   positioned absolutely and keeps its alignment with every other left edge on
   the site regardless. */
.tl__track {
  position: relative;
  padding-bottom: 4rem;
}


.tl__list { list-style: none; margin: 0; padding: 0; }


/* ── Timeline entries ────────────────────────────────────────────────────
   One row per moment, each exactly half the page: the photograph bleeds off
   the edge it sits on, the year and its words hold the other half, and the
   sides alternate down the page.

   The rows are flush — no gap above or below — so each square's corner meets
   the corner of the one before and after it on the centre line. That is what
   fixes the photograph at half the viewport width and square: any other size
   and the corners miss. */

.tl__item { position: relative; }

.tl__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Stretch, not centre: the photograph's ratio sets the row height, but if a
     longer piece of copy needs more room the picture grows with it — otherwise
     the row would gain space above and below the photograph and the corners
     would stop meeting. */
  align-items: stretch;
}

/* Copy is written first for reading order; this puts the photograph on the
   left where the rhythm calls for it. */
.tl__item--photo-left .tl__media { order: -1; }
/* A milestone with no photograph is one column, not a half-empty pair. */
.tl__item--nophoto .tl__row { grid-template-columns: minmax(0, 1fr); }

/* A photograph the library only holds small. Held still to the window it is
   cropped to whatever part of the picture the window happens to line up with,
   and enlarged by the width of the screen; shown whole and at its own shape it
   is the picture that was taken. The row is deeper than its neighbours because
   the photograph is squarer, and the copy has the room to spare. */
.tl__item--whole .tl__media {
  background-attachment: scroll;
  background-size: cover;
}

.tl__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46ch;
  margin-inline: auto;
  padding: 2rem clamp(1.5rem, 4vw, 4rem);
  text-align: center;
}

.tl__year {
  margin: 0 0 .5rem;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--olive);
}

.tl__title {
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  line-height: 1.25;
  margin-bottom: .85rem;
}
.tl__text { max-width: 46ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.6; }

/* Half the page wide and shallow — 1.91:1, which is about as much height as
   the copy beside it asks for.

   Now that the frame is short, the picture is genuinely fixed to the viewport
   again: the window travels down over a still image, so its top edge uncovers
   the photograph and its bottom edge covers it back up. That is what
   `background-attachment: fixed` does, with no scroll handler at all.

   It was not usable while the frames were square — a fixed attachment sizes the
   image to the *viewport*, and a 720px square showed a magnified fragment of a
   1575px plane. At 720×377 the same sizing shows a little under half the width
   of a picture that is still being scaled *down* from its source, so it stays
   sharp. Where a browser does not honour the fixed attachment (iOS, most
   Android) it falls back to a normal photograph in the frame. */
.tl__media {
  /* Width from the column, height from the row. Without a definite width the
     aspect-ratio worked the other way round: on a narrow screen the copy makes
     the row tall, the ratio turns that height into a width — 637px inside a
     384px column — and About Us could be dragged 255px sideways at every width
     from 640 to about 1060, which is the whole tablet range and a small
     laptop. body's overflow-x: clip does not save it: `clip` on the body does
     not propagate to the viewport the way `hidden` does. */
  width: 100%;
  min-width: 0;
  position: relative;
  margin: 0;
  aspect-ratio: 1.91;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.tl__credit {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: .5rem .9rem;
  background: rgba(28, 30, 34, .68);
  color: var(--sand);
  font-size: .75rem;
  line-height: 1.45;
}

.tl__more { margin: 0 0 1.5rem; font-size: 1.0625rem; font-weight: 500; }
.tl__more a { text-underline-offset: 4px; }
.tl__note { margin: 0; max-width: 90ch; font-size: .8125rem; line-height: 1.6; opacity: .6; }

/* ── Documents ───────────────────────────────────────────────────────────
   Shown as documents rather than as a list of links: each has its own cover or
   cover photograph, cropped to one shape and anchored to the top so a report's
   masthead survives the crop. No card around any of it — the cover's own edge
   is the boundary, as everywhere else on the site. */

.docs { padding: 4.5rem 0; }
.docs__head { max-width: 60ch; margin-bottom: 2.5rem; }
.docs__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: .75rem; }
.docs__intro { margin: 0; font-size: 1.0625rem; opacity: .75; }

.docs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.doc__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }

.doc__cover {
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
}
/* 3:2 rather than 4:3: the three report covers are between 1.5 and 1.8 wide,
   so a squarer crop was cutting their mastheads off at the sides. Anchored to
   the top, which is where a document puts its title — including the Strategic
   Plan, which is the one portrait cover in the set. */
.doc__cover img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  transition: transform .4s ease;
}
.doc__link:hover .doc__cover img { transform: scale(1.03); }

.doc__kind {
  display: block;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: .3rem;
}
.doc__name { display: block; font-size: 1.0625rem; line-height: 1.3; }
.doc__link:hover .doc__name { text-decoration: underline; text-underline-offset: 3px; }

.doc__go {
  display: block;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--olive);
}
.doc__go::after { content: " \2192"; }

/* ── Join, above the Acknowledgement ─────────────────────────────────────
   Both bands bleed a photograph off the left edge, so stacked directly they
   read as one continuous column of imagery. A clear band of the page between
   them separates the two pictures.

   Set by a class rather than a sibling selector: .join sits inside <main> and
   the footer is a sibling of <main>, not of the band. */
.site-footer--after-join .ack { margin-top: 4rem; }

/* ============================================================
   OUR WORK PAGE
   ============================================================ */

.mhero--work .mhero__bg {
  background-image: url("assets/heroes/000000_BenjaminWarlngunduEllis_06254-cropped-scaled.jpg");
  background-position: center 62%;
}
.mhero--work h1 { max-width: 14ch; }


/* ── Current priorities ──────────────────────────────────────────────────
   The two topics the live page promotes above its accordion, kept prominent
   but paired, and opening in place rather than running to full length before
   the reader has seen the scope of the work. */

.pris { padding: 5rem 0 4rem; }
.pris__head { max-width: 60ch; margin-bottom: 2.5rem; }
.pris__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: .75rem; }
.pris__intro { margin: 0; font-size: 1.0625rem; opacity: .75; }

.pris__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
}

.pri__media { margin: 0 0 1.5rem; }
.pri__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.pri__title { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.2; margin-bottom: 1rem; }
.pri__lead { font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }

.pri__more > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--olive);
  cursor: pointer;
  list-style: none;
}
.pri__more > summary::-webkit-details-marker { display: none; }
.pri__more > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.pri__more > summary:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.pri__more > summary::after { content: " \2192"; }
.pri__close { display: none; }
.pri__more[open] .pri__open { display: none; }
.pri__more[open] .pri__close { display: inline; }

.pri__body { padding-top: 1.25rem; max-width: 60ch; font-size: 1rem; line-height: 1.65; }
.pri__body > * + * { margin-top: 1em; }

/* ── Focus chapters ──────────────────────────────────────────────────────
   Six chapters rather than six closed accordion rows. Each opens with a
   photograph and its number, then runs its content at a readable measure. */

.chs { padding: 2rem 0 4rem; }
.chs__head { max-width: 70ch; margin-bottom: 1rem; }
.chs__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: .75rem; }
.chs__intro { margin: 0 0 2rem; font-size: 1.0625rem; opacity: .75; }

/* A contents list, so the scope of the work is visible before the reading
   starts — the one thing the accordion did well, kept. */
.chs__index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 2.5rem;
  counter-reset: none;
}
.chs__index a {
  display: flex;
  gap: .9rem;
  padding: .7rem 0;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  text-decoration: none;
}
.chs__index a span { color: var(--olive); font-weight: 600; font-variant-numeric: tabular-nums; }
.chs__index a:hover { text-decoration: underline; text-underline-offset: 4px; }
.chs__index a:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

/* A chapter is one grid: the photograph in a column of its own, and the number,
   title and words running down the other beside it.
 *
 * It used to be two grids stacked — a head with the photograph and title, then
 * a body underneath — so the words always began below the photograph however
 * short the title was. Centring the title in that row left 175px between a
 * heading and its first paragraph; bottom-aligning it fixed that but put the
 * number level with the foot of the picture rather than its top.
 *
 * Dissolving the head with `display: contents` lets the photograph span both
 * rows while the text takes them one after the other. So "01 —" starts level
 * with the top of its own photograph, and the prose follows the title directly
 * instead of waiting for the picture to finish.
 */
.ch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 2rem;
  align-items: start;
  width: min(100% - 3rem, var(--shell));
  margin-inline: auto;
  padding-top: 4.5rem;
  scroll-margin-top: 6rem;
}
.ch__head { display: contents; }

/* The photograph keeps its own height and stays at the top; the column it sits
   in is as tall as the words beside it. */
.ch__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; }
.ch__id    { grid-column: 2; grid-row: 1; }
.ch__body  { grid-column: 2; grid-row: 2; }

.ch--photo-right .ch__media { grid-column: 2; }
.ch--photo-right .ch__id,
.ch--photo-right .ch__body { grid-column: 1; }

.ch__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Ordinary prose in its cell — no grid of its own, so margins collapse and the
   rhythm is the one the rest of the site uses. */
.ch__body {
  font-size: 1.0625rem;
  line-height: 1.65;
}
.ch__body > * + * { margin-top: 1.15em; }

.ch__n {
  margin: 0 0 .6rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}
.ch__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.15; }

.ch__sub {
  margin-top: 2.25em;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}
.ch__body > .ch__sub:first-child { margin-top: 0; }

.ch__list { padding-left: 1.25rem; }
.ch__list li { margin-bottom: .6em; }

/* Several chapters link with the bare URL as the link text — long, unbreakable
   strings that push the column past the screen edge on a phone. */
.ch__body a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Where a chapter has had duplicated copy lifted out of it. */
.ch__xref {
  margin-top: 2em;
  padding-left: 1.25rem;
  border-left: 3px solid var(--lilac);
  font-size: .9375rem;
  opacity: .8;
}

/* ============================================================
   EVENTS — THE SECTOR EVENTS CALENDAR
   Scope of Work 3.4. Rendered natively in NNTC's own type and
   colour rather than framed, which is what lets it meet the
   brand guidelines at all.
   ============================================================ */

.mhero--events .mhero__bg {
  background-image: url("assets/heroes/1B3A3405-scaled.jpg");
  background-position: center 55%;
}
.mhero--events h1 { max-width: 20ch; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem); }
/* The second paragraph, at a step down — the hero carried a row of figures
   here, and without them the statement needs to fill the space itself. */
.mhero__lead--sub {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  opacity: .85;
  margin-bottom: 0;
}
.mstats__soon { color: var(--lilac); }

.cal { padding: 4.5rem 0 0; }
.cal__head { max-width: 62ch; margin-bottom: 2.5rem; }
.cal__eyebrow {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.cal__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: .9rem; }
.cal__intro { margin: 0; font-size: 1.0625rem; opacity: .8; }

/* ── The year ahead ──────────────────────────────────────────────────────
   Twelve months of density before a single listing is read: the quiet months
   and the busy ones. Months holding something are a link into them. */

.yr { margin-bottom: 2.5rem; }
.yr__label {
  margin: 0 0 .9rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}
.yr__strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
.yr__cell > * {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
  height: 5.5rem;
  padding-bottom: .5rem;
  text-decoration: none;
  color: inherit;
}
.yr__bar {
  width: 100%;
  height: var(--h, 0%);
  min-height: 2px;
  background: var(--rule);
  border-radius: 2px 2px 0 0;
  transition: background-color .18s ease;
}
.yr__cell.is-on .yr__bar { background: var(--olive); }
.yr__cell.is-on > a:hover .yr__bar { background: var(--ochre); }
.yr__cell.is-on > a:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
.yr__mon { font-size: var(--micro); letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.yr__cell.is-on .yr__mon { opacity: 1; font-weight: 600; }
.yr__n { font-size: .75rem; font-weight: 600; color: var(--olive); min-height: 1em; }

/* ── Filters and count ───────────────────────────────────────────────────── */
.cal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: flex-end;
  padding-bottom: 1.5rem;
}
.cal__count {
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
  font-weight: 500;
}

/* ── Month bands ─────────────────────────────────────────────────────────
   Each month opens on a full-bleed band with its photograph pinned to the
   viewport, so the month name travels up across a still image as you scroll
   into it — the about page's treatment, marking the passage of time down the
   calendar. */
.cal__month { scroll-margin-top: 5rem; }

.cal__band {
  margin: 3.5rem 0 0;
  min-height: clamp(11rem, 26vh, 17rem);
  display: flex;
  align-items: flex-end;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--sand);
}
/* A scrim across the foot of the band only. The photographs vary from dark
   ranges to a bright orange sky, and a text-shadow alone left the event count
   barely legible against the light ones; a full overlay would flatten every
   picture to fix one. */
.cal__band { position: relative; }
.cal__band::before {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(20, 22, 26, 0) 0%, rgba(20, 22, 26, .58) 100%);
  content: "";
  pointer-events: none;
}
/* Carries the .shell class, so it must not restate width — doing so overrode
   the shell and let the month name run to the page edge. */
.cal__band-inner {
  position: relative;
  padding: 2rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  text-shadow: 0 1px 10px rgba(20, 22, 26, .5);
}
.cal__month-name { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; }
.cal__month-name span { opacity: .75; }
.cal__month-n { margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* ── The listing ─────────────────────────────────────────────────────────── */
.cal__list { list-style: none; margin: 0; padding: 0; }

.cal__rule {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 3rem 0 0;
  padding-bottom: .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}
.cal__rule span { letter-spacing: 0; }

.ev {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.ev[hidden] { display: none; }

.ev__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--olive);
}
.ev__day { font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 500; }
.ev__to { font-size: .6em; }
.ev__dow { margin-top: .35rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ev__date--none { margin: 0; font-size: 2rem; opacity: .25; color: inherit; }

.ev__flag {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .25rem .6rem;
  background: var(--lilac);
  color: var(--ink);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ev__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.ev__meta > span {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* The host is the one label that carries a colour: on a jointly and equally
   managed calendar, whose event it is should be legible at a glance. */
.ev__host { padding: .2rem .55rem; color: var(--sand); }
.ev__host--nntc  { background: var(--olive); }
.ev__host--mabo  { background: var(--ochre); }
.ev__host--joint { background: var(--ink); }
.ev__type, .ev__theme { padding: .2rem .55rem; border: 1px solid var(--rule); opacity: .75; }

.ev__title { font-size: 1.125rem; line-height: 1.35; margin-bottom: .5rem; max-width: 54ch; }
.ev__title a { text-decoration: none; }
.ev__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev__sum { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.55; max-width: 60ch; opacity: .85; }
.ev__where { margin: 0; font-size: .875rem; opacity: .65; }
.ev__where--tbc { font-style: italic; opacity: .5; }

.ev__add {
  align-self: center;
  padding: .6rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ev__add:hover { background: rgba(43, 46, 52, .07); }
.ev__add:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.ev--standing .ev__date--none { align-self: center; }

/* ── Already held ────────────────────────────────────────────────────────
   Past events keep their place in their own month rather than being moved to a
   separate list; whole months in the past fold away behind one control. */
.ev--past { opacity: .55; }
.ev--past .ev__date { color: inherit; }
.ev__held {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .25rem .6rem;
  border: 1px solid var(--rule);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.cal__earlier { margin: 2.5rem 0 0; }
.cal__earlier button[hidden] { display: none; }

/* ── Recently held ───────────────────────────────────────────────────────── */
.cal__past { margin-top: 3.5rem; }
.cal__past summary {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  cursor: pointer;
  list-style: none;
}
.cal__past summary::-webkit-details-marker { display: none; }
.cal__past summary::after { content: " +"; }
.cal__past details[open] summary::after { content: " \2013"; }
.cal__past summary span { letter-spacing: 0; }
.cal__past .ev { opacity: .6; }

/* ── Foot ────────────────────────────────────────────────────────────────── */
.cal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.cal__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cal__subscribe { margin: 0; font-size: .9375rem; }
.cal__subscribe a { margin: 0 .35rem; text-underline-offset: 3px; }
.cal__empty { margin: 3rem auto; font-size: 1.0625rem; }
.cal__note { margin: 2.5rem 0 0; max-width: 92ch; font-size: .8125rem; line-height: 1.6; opacity: .6; }

/* ── Standing programmes in full ─────────────────────────────────────────── */
.prog { padding: 4.5rem 0; }
.prog__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.prog__kind {
  margin: 0 0 .75rem;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
}
.prog__id h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.15; }
.prog__tag { margin: .75rem 0 0; font-size: 1rem; opacity: .7; }
.prog__body { font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; }
.prog__body > * + * { margin-top: 1.15em; }
.prog__list { padding-left: 1.25rem; }
.prog__list li { margin-bottom: .5em; }

/* ── Submit an event ─────────────────────────────────────────────────────
   The site has no forms anywhere else, so the controls are built here in the
   same language as everything else: hairline rules rather than boxes, the
   label above its field, and no rounded input chrome. */

.sub { padding: 8rem 0 5rem; }
.sub__crumb { margin-bottom: 2rem; font-size: .875rem; opacity: .65; }
.sub__crumb a { text-underline-offset: 3px; }
.sub__crumb span { margin: 0 .4rem; }

.sub__head { max-width: 60ch; margin-bottom: 2rem; }
.sub__head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 1rem; }
.sub__lead { margin: 0; font-size: 1.125rem; line-height: 1.55; opacity: .85; }

.sub__proto {
  max-width: 70ch;
  margin: 0 0 3rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--lilac);
  background: rgba(176, 170, 248, .14);
  font-size: .9375rem;
}

.sub__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* ── Fieldsets and fields ────────────────────────────────────────────────── */
.fs { border: 0; margin: 0 0 3rem; padding: 0; }
.fs__legend {
  padding: 0 0 .75rem;
  width: 100%;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.fs__note { margin: 1rem 0 0; font-size: .9375rem; opacity: .7; max-width: 58ch; }

.fld { margin-top: 1.75rem; }
.fld__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.fld__row .fld { margin-top: 1.75rem; }

.fld label,
.fld__label {
  display: block;
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 500;
}
.fld__req { color: var(--ochre); }

/* `tel` was missing from this list, so every Mobile field on the site — the
   contact page included — rendered as an unstyled browser default box beside
   properly styled neighbours. */
.fld input[type="text"],
.fld input[type="email"],
.fld input[type="tel"],
.fld input[type="number"],
.fld input[type="url"],
.fld input[type="date"],
.fld input[type="time"],
.fld textarea,
.fld select {
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
}
.fld select { appearance: none; padding-right: 1.5rem; cursor: pointer; }
.fld textarea { border: 1px solid var(--rule); padding: .8rem 1rem; resize: vertical; }
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}
.fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible {
  outline: 3px solid var(--lilac);
  outline-offset: 4px;
}
.fld input[type="file"] { font-size: .9375rem; }

.fld__hint { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.5; opacity: .6; max-width: 56ch; }

.fld--check { display: flex; align-items: flex-start; gap: .7rem; }
.fld--check input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--olive); }
.fld--check label { margin: 0; font-weight: 400; font-size: .9375rem; line-height: 1.5; }

.fld__radios { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fld__radios label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; }
.fld__radios input { width: 1.05rem; height: 1.05rem; accent-color: var(--olive); }

.sub__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.sub__submit .btn:disabled { opacity: .45; cursor: not-allowed; }
.sub__disabled { margin: 0; font-size: .8125rem; opacity: .6; }

/* ── Side panels ─────────────────────────────────────────────────────────── */
.sub__aside { position: sticky; top: 6.5rem; display: grid; gap: 2.5rem; }
.sub__panel h2 {
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.sub__panel p { font-size: .9375rem; line-height: 1.6; }

.sub__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sub__steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; font-size: .9375rem; line-height: 1.55; }
.sub__steps span { color: var(--olive); font-weight: 600; }

.sub__rules { margin: 0; padding-left: 1.15rem; display: grid; gap: .6rem; font-size: .9375rem; line-height: 1.55; }
.sub__aside-note { margin-top: 1rem; font-size: .8125rem; opacity: .65; }
.sub__link { font-weight: 500; text-underline-offset: 4px; }

.sub__note { margin: 4rem 0 0; max-width: 92ch; font-size: .8125rem; line-height: 1.6; opacity: .6; }

/* ============================================================
   NEWS & MEDIA
   The homepage's Latest News language at page scale: one lead
   story earning its place through size, then the copy beneath
   the photograph on open ground, no card around any of it.
   ============================================================ */

.nlead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76svh, 700px);
  padding: 10rem 0 3.5rem;
  color: var(--sand);
  overflow: hidden;
}
.nlead__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.nlead__bg::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .55) 0%, rgba(20, 22, 26, .32) 40%, rgba(20, 22, 26, .82) 100%);
  content: "";
}
.nlead__inner { position: relative; }

.nlead__eyebrow {
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.nlead__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .9rem; }
.nlead__cat {
  padding: .25rem .6rem;
  background: var(--lilac);
  color: var(--ink);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nlead__date { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; align-self: center; }

.nlead__title {
  max-width: 22ch;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
.nlead__title a { text-decoration: none; }
.nlead__title a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nlead__excerpt { max-width: 52ch; font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); line-height: 1.5; margin-bottom: 2rem; }

/* ── The archive ─────────────────────────────────────────────────────────── */
.narchive { padding: 4.5rem 0 5rem; }
.narchive__head { max-width: 60ch; margin-bottom: 2rem; }
.narchive__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: .75rem; }
.narchive__intro { margin: 0; font-size: 1.0625rem; opacity: .75; }

.nfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
/* ── Tabs ────────────────────────────────────────────────────────────────
   Only rendered as a control when script is running; without it both panels
   show and these are just two headings. */
.ntabs { display: none; }
.js .ntabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.ntab {
  padding: 0 0 .9rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  opacity: .5;
}
.ntab:hover { opacity: .8; }
.ntab.is-on { opacity: 1; border-bottom-color: var(--olive); }
.ntab:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.ntab__n { margin-left: .4rem; font-size: .8125rem; opacity: .55; font-variant-numeric: tabular-nums; }

/* The stream's own heading is redundant once the tabs name it. */
.js .nstream__head { display: none; }

/* ── Streams ─────────────────────────────────────────────────────────────
   Media releases and everything else, kept apart the way the live page keeps
   them, each with its own count that follows the filter. */
.nstream { margin-bottom: 4.5rem; }
.nstream[hidden] { display: none; }
.nstream__head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: 1.5rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.nstream__n { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.nstream__note { margin: -.75rem 0 1.75rem; font-size: .9375rem; opacity: .65; max-width: 60ch; }

.nchips { display: flex; flex-wrap: wrap; gap: .45rem; }
.nchip {
  padding: .5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
}
.nchip span { opacity: .5; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.nchip:hover { background: rgba(43, 46, 52, .07); }
.nchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.nchip.is-on span { opacity: .6; }
.nchip:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.nfilters__right { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 1.5rem; }
.nsearch { flex: 0 1 16rem; }

.narchive__status { display: flex; align-items: center; gap: 1rem; }
.narchive__count { margin: 0; font-size: .9375rem; font-weight: 500; }
/* The button that brings the rest of a long listing. Centred under the list
   and quiet: it is a way of going on reading, not a call to action. */
.listmore {
  margin: 2.5rem 0 0;
  text-align: center;
}

.narchive__empty { margin: 3rem 0; font-size: 1.0625rem; }
.narchive__note { margin: 3.5rem 0 0; max-width: 88ch; font-size: .8125rem; line-height: 1.6; opacity: .6; }

/* ── The grid ────────────────────────────────────────────────────────────
   Photograph, then the copy beneath it. This is the homepage treatment the
   client picked out, at archive scale. */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 2.5rem;
}
.post[hidden] { display: none; }

.post__link { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.post__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }

.post__media { display: block; overflow: hidden; margin-bottom: 1.1rem; }
.post__media img {
  width: 100%;
  /* Square. Every preview the same shape means every card is the same height
     without the layout having to compensate for a photograph that happens to be
     portrait — and a square crop suits a mixed library better than 3:2, which
     cut the top off a lot of the portraits. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}
.post__link:hover .post__media img { transform: scale(1.04); }

.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .6rem; }
.post__cat {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--olive);
}
.post__date { font-size: .75rem; opacity: .55; }

.post__title { font-size: 1.0625rem; line-height: 1.35; margin-bottom: .5rem; }
.post__link:hover .post__title { text-decoration: underline; text-underline-offset: 3px; }
.post__excerpt { font-size: .9375rem; line-height: 1.55; opacity: .7; }

/* ── Resources & Contact ─────────────────────────────────────────────────── */

.mhero--res .mhero__bg {
  background-image: url("assets/heroes/1B3A3376-scaled.jpg");
  background-position: center 55%;
}
.mhero--res h1 { max-width: 18ch; }

.mhero--contact .mhero__bg {
  background-image: url("assets/heroes/1B3A3405-scaled.jpg");
  background-position: center 60%;
}
.mhero--contact { min-height: min(60svh, 540px); }
.mhero--contact h1 { max-width: 14ch; }

/* Three of the 83 resources have no image. A typographic panel says what the
   resource is, rather than a broken frame or the flat colour block the live
   news page falls back to. */
.post__media--none {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 1.5rem;
  background: var(--olive);
  text-align: center;
}
.post__media--none span {
  color: var(--sand);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Contact details ─────────────────────────────────────────────────────
   Plain columns divided by hairlines — it was a bordered card, and the email
   was not even a link. */
.cdetails { padding: 4rem 0 1rem; }
.cdetails__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}
.cdetails__grid dt {
  margin-bottom: .6rem;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
.cdetails__grid dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.cdetails__grid a { text-underline-offset: 3px; }

.sub--contact { padding-top: 3rem; }
.sub--contact .sub__head { margin-bottom: 1.5rem; }
.sub--contact .sub__head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.sub--contact .sub__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.sub__rules a { text-underline-offset: 3px; }

/* A superseded page kept at its own URL for reference. */
.archived-note {
  position: relative;
  z-index: 60;
  margin: 0;
  padding: 5.5rem 1.5rem .9rem;
  background: var(--ink);
  color: var(--sand);
  text-align: center;
  font-size: .875rem;
}
.archived-note a { color: var(--lilac); text-underline-offset: 3px; }

/* ── Our Work sub-pages ──────────────────────────────────────────────────
   Long-form copy at a readable measure with a contents list that stays beside
   it, then resources queried live from the library rather than hand-listed. */

.mhero--sub { min-height: min(62svh, 560px); align-items: flex-end; }
.mhero--sub h1 { max-width: 20ch; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); }
.mhero__crumb { margin: 0 0 1rem; font-size: .8125rem; opacity: .85; }
.mhero__crumb a { text-underline-offset: 3px; }
.mhero__crumb span { margin: 0 .4rem; }

.ona { padding: 4.5rem 0 4rem; }
.ona__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.ona__rail { position: sticky; top: 6.5rem; }
.ona__rail-head {
  margin: 0 0 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
.ona__contents { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ona__contents a {
  display: block;
  padding: .5rem 0 .5rem .8rem;
  border-left: 2px solid transparent;
  font-size: .9375rem;
  line-height: 1.4;
  text-decoration: none;
  opacity: .7;
}
.ona__contents a:hover { opacity: 1; }
.ona__contents a.is-on { opacity: 1; font-weight: 500; border-left-color: var(--olive); }
.ona__contents a:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
.ona__back { margin: 1.5rem 0 0; font-size: .875rem; }
.ona__back a { text-underline-offset: 3px; }

/* 1.65 rather than 1.7, to match the other prose columns. The paragraph margins
   are left alone: this body nests its paragraphs inside <section> elements, so
   a rule on the direct children reaches the sections and not the words. */
.ona__body { max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; }
.ona__sec { scroll-margin-top: 6rem; }
/* A heading following a break image gets no margin from the rule below — the
   figure sits between the two sections, so the adjacent-sibling selector never
   matches — and the heading ends up hard against the photograph. Images also
   want a little more air beneath them than a paragraph does. */
.ona__break + .ona__sec { margin-top: 3.25rem; }
/* Focus is moved here on a contents jump so keyboard users land in the right
   place; the outline would otherwise draw a box round a whole section. */
.ona__sec:focus, .ch:focus { outline: none; }
.ona__sec + .ona__sec { margin-top: 2.75rem; }
.ona__sec h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.25; margin-bottom: 1rem; }
.ona__sec p + p { margin-top: 1.1em; }
.ona__sec a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Section-break photograph. Deliberately NOT pinned: the hero at the top of a
   sub-page already scrolls its text over a fixed image, and repeating that
   three or four times down a long read is a distraction rather than a device.
   These scroll with the copy. (Pinning stays on heroes and on the timeline.) */
.ona__break {
  margin: 2.75rem 0 0;
  aspect-ratio: 16 / 9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  position: relative;
}
.ona__break figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .6rem .9rem;
  background: rgba(28, 30, 34, .68);
  color: var(--sand);
  font-size: .75rem;
  line-height: 1.45;
}

.ona__block { margin-top: 4rem; scroll-margin-top: 6rem; }
.ona__block-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.ona__block-head span { letter-spacing: 0; }
.posts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.ona__all { margin-top: 1.5rem; font-size: .9375rem; font-weight: 500; }
.ona__all a { text-underline-offset: 4px; }

.ch__more { margin-top: 1.75rem; font-weight: 500; }
.ch__more a { text-underline-offset: 4px; }
.ch__cta { margin-top: 1.75rem; }
.ch__out { font-weight: 500; }
.ch__out a { text-underline-offset: 4px; }

.intro--work { padding: 4rem 0 1rem; }
.intro__cols--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .nav__list a, .nav__contact { padding-inline: .75rem; font-size: .75rem; }
  .logo img { width: 112px; }
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mabo__inner { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Map above the list rather than beside it, and no longer sticky — at this
     width a sticky map would eat most of the viewport the list needs. Held to
     a readable width so it does not become a full-page illustration. */
  .dir__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Two runs of text side by side, photograph across the foot of them. */
  .tl__prose-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl__prose-media { grid-column: 1 / -1; order: 1; }
  .tl__prose-media img { min-height: 0; aspect-ratio: 21 / 9; max-height: 22rem; }
  .dir__mapwrap { position: static; max-width: 30rem; }
  .gov__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  /* One column on the template is not one column on the page while the pull
     quote is still told to sit in column 2: an item placed in a column the
     template does not declare makes the grid invent one. So a phone got two
     columns of 150px — the governance copy in one and the pull quote in the
     other — which is what "crammed" looks like. It goes under the copy. */
  .gov__pull { grid-column: 1; grid-row: 3; }
  .pris__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .prog__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Guidance above the form: you want to know what happens to a submission
     before you fill one in, not after. */
  /* Both selectors, or the more specific .sub--contact rule keeps its two
     columns and squeezes the form off the side of the screen. */
  .sub__grid,
  .sub--contact .sub__grid { grid-template-columns: 1fr; }
  /* Contents above the copy, and not sticky — a rail that tall would take the
     screen. */
  .ona__grid { grid-template-columns: 1fr; }
  .ona__rail { position: static; }
  .intro__cols--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdetails__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .sub__aside { position: static; order: -1; }
  .yr__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .yr__cell > * { height: 4.5rem; }
  /* One column: photograph, then number and title, then the words. The
     photograph no longer spans anything, and neither side alternates. */
  .ch { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .ch__media,
  .ch--photo-right .ch__media { grid-column: 1; grid-row: 1; }
  .ch__id,
  .ch--photo-right .ch__id { grid-column: 1; grid-row: 2; }
  .ch__body,
  .ch--photo-right .ch__body { grid-column: 1; grid-row: 3; }
  .chs__index { grid-template-columns: 1fr; }
  .bstage__frame, .bstage__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .docs__inner { grid-template-columns: 1fr; gap: 2rem; }
  .says__grid { gap: 3rem; }
  /* Stacked: photograph first, as before. */
  .join { grid-template-columns: 1fr; }
  .join__media { order: -1; }
  .join__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .join__text { padding: 3rem clamp(1.5rem, 5vw, 3rem) 3.5rem; }

  /* Artwork only from here down. Below this width the text measure runs to
     within ~70px of the right edge, which is not enough margin for a band of
     five strokes — it would either cut across the copy or fall off the page.
     The extension exists to fill the space beside the text, so where there is
     no such space it simply does not appear. */
  .mission__trail { display: none; }
}

@media (max-width: 900px) {
  .fmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav, .site-header__rule { display: none; }
  .nav-toggle { display: block; }
  .grid--3 { grid-template-columns: 1fr; }

  /* Stacked, and still edge to edge — the photograph spans the full width with
     the text below it, shallower so the statement is not pushed off screen. */
  .ack__inner { grid-template-columns: 1fr; gap: 0; padding-right: 0; }
  .ack__media img { height: auto; min-height: 0; aspect-ratio: 21 / 9; }
  .ack__text { padding: 2.5rem 1.5rem 3rem; }
}

@media (max-width: 900px) {
  .says__grid { grid-template-columns: 1fr; }
  /* One column puts the quotation mark in the page's gutter, and it is set
     .62em outside the text — 35px of a 24px gutter, so on a phone the mark was
     cut off at the left edge of the screen. Brought inside the measure. */
  .quote__text::before { left: -.1em; top: -.5em; }
}

/* The wave behind the About Us opening statement starts at 52% of the page
   and the statement runs to about 30ch. From 1470 down that is fine; below
   about 1100 the statement reaches past 52% and the line work runs behind the
   words. The pattern is not worth a single word being harder to read, so it
   goes wherever the two would meet — which, at 1100, is a tablet in either
   orientation. Desktop is unchanged. */
/* And now, not at all. The statement it was drawn beside was nine lines deep
   and the two columns sat below it; the tightened statement is four, the
   columns rise into the space the wave filled, and at every width from 1180 to
   1680 its line work runs 300px into the right-hand column. The rule is that
   the pattern is never behind a word, so it goes. The markup stays: give the
   section a layout that keeps the columns left of it and this rule can come
   out again. The homepage mission wave is a different layout and is clear at
   every width. */
.intro__wave { display: none; }

/* The homepage's wave runs on behind the section under it, and below about
   1150px that section's heading and paragraphs sit where the line work
   crosses. Tablets in both orientations and small laptops are in that range.
   Measured: 344px of overlap at 768, still 29px at 1100, clear at 1180. The
   pattern is never behind a word, so it goes there; the desktop keeps it. */
@media (max-width: 1150px) {
  .mission__wave { display: none; }
}

/* ── Touch ────────────────────────────────────────────────────────────────
   Apple asks for 44px and Google for 48. The footer's site map was 37px
   between rows, its two pills 38px tall, the two social links 24px — the
   height of their icon — the news and resources dropdowns 36px, the members
   type pills 40px, and the link out to a member's own website 23px. Close
   enough to hit most of the time is the problem: a near miss on a list of
   links opens the wrong page.

   By pointer as well as by width. A tablet at 900px and a touch laptop at 1400
   are both thumbs on glass, and a width query alone answers neither. In the
   footer the gap between rows becomes padding inside them, so the target grows
   without the list looking sparser.

   Links inside running prose are deliberately not here. "Find out more about
   the ALRC review" is a phrase in a sentence, and a 44px box around a phrase
   breaks the paragraph it belongs to. */
@media (max-width: 1024px), (pointer: coarse) {
  .fmap__list { gap: 0; }
  .fmap__list a { display: block; padding-block: .7rem; }
  .site-footer__links a { padding-block: .8rem; }

  .fsocial { gap: 0; }
  .fsocial a { padding-block: .7rem; }
  .tl__prose-toggle { min-height: 44px; }

  .nsel__btn { min-height: 44px; }
  .dtype { min-height: 44px; }
  .mrow__site { padding-block: .6rem; }

  /* The compact row of sibling pages under a sub-page's hero, and the
     questions on FAQs: a question's row is 65px tall but only its 25px of
     text answered a tap, because the padding was on the panel and not on the
     summary. The padding moves to the summary; the row is the same height. */
  .secnav__link { display: inline-block; padding-block: .75rem; }
  .faq__item { padding-top: 0; }
  .faq__item > summary { padding-top: 1.25rem; }
}

/* 11px is the design's smallest size and it holds on a monitor at arm's
   length. On anything held in the hand the same words are read closer and
   under worse light, so the floor comes up a point — which is the width at
   which the rest of the page has already gone to one column. */
@media (max-width: 900px) {
  :root { --micro: .75rem; }
}

@media (max-width: 640px) {

  .grid--4 { grid-template-columns: 1fr; }
  .hero { padding: 7.5rem 0 5rem; }

  /* 5rem at the foot, not 2.5. On a phone the photo credit moves from the
     right-hand corner to the left, under the words — and 2.5rem is less than
     the credit's own height plus its offset, so on About Us it sat across the
     last line of the headline, and on Our Work, Events and Contact across the
     last line of the lead. The homepage hero already kept 5rem, which is why
     it was the one that did not. */
  .mhero { padding: 8rem 0 5rem; min-height: 0; }
  .mhero__credit { right: auto; left: 1.5rem; font-size: .75rem; }
  /* Three figures side by side stop being figures at this width. */
  .mstats { gap: 1.25rem 2rem; }
  .mstats > div { padding-left: 1rem; }
  .dir { padding: 3.5rem 0 3rem; }
  .dir__head { margin-bottom: 2rem; }
  .dir__controls { gap: 1rem; }
  .dtypes { width: 100%; }
  .dtype { flex: 1; padding-inline: .5rem; }
  .mrow__logo { width: 44px; height: 44px; }
  .mrow__body { padding-left: 0; }
  .says { padding: 3rem 0 3.5rem; }

  .intro { padding: 3rem 0 2.5rem; }
  .pris { padding: 3rem 0 2.5rem; }
  .cal { padding-top: 3rem; }
  .sub { padding: 6.5rem 0 3rem; }
  .posts, .posts--three { grid-template-columns: 1fr; gap: 2.5rem; }
  .intro__cols--three { grid-template-columns: 1fr; }
  .ona { padding: 3rem 0; }
  .nlead { padding: 8rem 0 2.5rem; min-height: 0; }
  .nlead__bg { background-attachment: scroll; }
  .nfilters__right { width: 100%; }
  .cdetails__grid { grid-template-columns: 1fr; }
  .cdetails { padding: 2.5rem 0 .5rem; }
  .nsearch { flex: 1 1 100%; }
  .fld__row { grid-template-columns: 1fr; gap: 0; }
  .cal__band { background-attachment: scroll; min-height: 9rem; }
  /* Date above the listing rather than beside it, and the Details link drops
     to its own line — three columns do not fit a phone. */
  .ev { grid-template-columns: 1fr; gap: .75rem; padding: 1.5rem 0; }
  .ev__date { flex-direction: row; align-items: baseline; gap: .5rem; }
  .ev__dow { margin-top: 0; }
  .ev__add { justify-self: start; align-self: start; }
  .prog { padding: 3rem 0; }
  .ch { padding-top: 3rem; }
  .mstats--four { gap: 1rem 1.5rem; }
  .mstats--four dt { font-size: var(--micro); }
  .intro__cols { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl__prose { columns: 1; margin-bottom: 3rem; }
  .tl__prose-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .tl__prose-media img { aspect-ratio: 16 / 9; }
  .tl__credit { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; font-size: .75rem; }
  /* Stacked, so corners cannot meet: the photograph runs the full width above
     its words, a little shallower than square so a moment fits on one screen. */
  .tl__row { grid-template-columns: 1fr; }
  .tl__item--photo-left .tl__media,
  .tl__item--photo-right .tl__media { order: -1; }
  .tl__media { aspect-ratio: 4 / 3; }
  .tl__copy { padding: 2rem 1.5rem 3rem; }
  .band { height: 8rem; }
  /* Portrait above the biography; the controls move up to a single column. */
  .bstage__frame { grid-template-columns: 1fr; }
  .js .bstage__controls { grid-column: 1; }
  .bstage__panel { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .bstage__portrait img { aspect-ratio: 3 / 2; }
  .docs__cols { grid-template-columns: 1fr; gap: 2rem; }
  .hero__credit { right: auto; left: 1.5rem; font-size: .75rem; }
  .card-outline { padding: 1.75rem 1.5rem; }
  .ack__text { padding: 2rem 1.5rem 2.5rem; }
  .ack__text p { font-size: 1.0625rem; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__rule { display: none; }
  .fmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* iOS and most Android browsers ignore a fixed attachment and render it as
   `scroll` anyway; declaring it for touch pointers avoids the half-implemented
   versions and the repaint cost. Readers who have asked for less motion get a
   still photograph too. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .tl__media, .band, .hero__bg, .mhero__bg, .nlead__bg { background-attachment: scroll; }
}

/* ── Resource detail (/resources/<slug>/) ───────────────────────────────────
   Replaces NNTC's originals, which put a dark palette matching nothing else on
   the site behind two navigation bars, and — on the annual reports — gave you a
   heading and a download button on an otherwise empty page.

   A document card: cover on the left, everything you need to decide on the
   right. File type and size are stated before the click. Page count is not,
   because it cannot be read reliably out of these PDFs and a wrong number is
   worse than none. */
.rdoc { padding: 8.5rem 0 0; background: var(--shell); }

.rdoc__crumb {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  margin-bottom: 1.75rem;
}
.rdoc__crumb a { color: inherit; }
.rdoc__crumb span { margin: 0 .45em; opacity: .5; }

.rdoc__card {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

/* No heavy frame — a plain edge, per the site-wide note about borders.

   The covers are not one shape and cannot be made into one. They are report
   covers at A4, partner logos at 361x140, and landscape photographs — and
   cropping them to a common ratio would cut the title off a report and behead a
   logo. So the whole picture is always shown, and what is made consistent is
   the space it sits in: every cover occupies the same block, centred in it,
   whatever its proportions.

   The block is the page's own sand, not a panel — nothing is drawn around a
   picture here, so a wide logo simply has air above and below it rather than
   sitting in a box. */
.rdoc__cover {
  margin: 0;
  background: var(--sand);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rdoc__cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rdoc__cover-none {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 1.25rem;
  background: var(--olive);
  color: var(--sand);
}
.rdoc__cover-none span {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

.rdoc__cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.rdoc__cats span {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  background: color-mix(in srgb, var(--olive) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.rdoc__detail h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.rdoc__lead {
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  max-width: 40em;
}
.rdoc__meta {
  margin-top: 1.5rem;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.rdoc__get { margin-top: 1.25rem; }
/* Says where the file will open, so nobody has to guess. Same tab: forcing a
   new one takes away the back button, which is what people reach for. */
/* Everything else a resource offers. Under the button rather than beside it:
   these are the same kind of thing as the action, just not the first one, and a
   row of equal buttons makes a reader choose before they have read anything.
   Twenty-nine resources have one of these; four have several. */
.rdoc__links { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rdoc__links li + li { margin-top: .55rem; }
.rdoc__links a {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .9375rem;
  line-height: 1.5;
  text-underline-offset: 3px;
}
.rdoc__links a span { font-size: .8125rem; opacity: .55; }

/* A resource that is a video. Sized like the cover it sits beneath so the card
   and the still read as one object. */
.rdoc__video {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}

.rdoc__note {
  margin-top: .7rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.rdoc__parts { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.rdoc__parts-head {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: .6rem;
}
.rdoc__parts ul { list-style: none; margin: 0; padding: 0; }
.rdoc__parts li + li { margin-top: .35rem; }
.rdoc__parts a { font-size: .9375rem; }

/* Vimeo, embedded and ready to press, with Do Not Track as the current site
   already sets. */
.rvid {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.rdoc__body {
  max-width: 42rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.rdoc__body p + p { margin-top: 1.1em; }

.rrel { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; background: var(--sand); }
.rrel__head {
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.rrel__head span {
  margin-left: .5em;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.rrel__all { margin-top: 2rem; font-size: .9375rem; }

@media (max-width: 780px) {
  .rdoc { padding-top: 6.5rem; }
  .rdoc__card { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the reserved block would be a lot of empty page above the title,
     so the cover takes only the height its picture needs. */
  .rdoc__cover { max-width: 16rem; aspect-ratio: auto; }
}

/* File type and size on the library card, so the click is informed. */
.post__file {
  display: inline-block;
  margin-top: .7rem;
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}


/* ── News article (/YYYY/MM/DD/<slug>/) ─────────────────────────────────────
   The 83 posts previously kept the mirrored original. These use the same fixed
   hero as the Our Work sub-pages, so an article looks like the rest of the
   site rather than like a different website that happens to share a logo.

   Media releases are quote-driven — 245 quotations across the 83 — so the
   typography has to carry speech well. Quotes read in the flow, set off by a
   rule; one per article is lifted into a pull-quote where the sentence names
   its speaker, in place of the paragraph it came from. */
.mhero--art h1 { max-width: 24ch; }
.art__date {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* --shell is the page's max width, not a colour, so `background: var(--shell)`
   was never a declaration a browser kept — the article has been drawing on the
   page's own sand this whole time. Said properly, and it looks the same. */
.art { padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 clamp(3rem, 2.5rem + 2vw, 4.5rem); background: var(--sand); }

/* A single measure, centred. A contents rail like the sub-pages carry would be
   wrong here: the median article is 395 words with no headings at all. */
.art__col { max-width: 40rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.75; }
.art__col > * + * { margin-top: 1.15em; }
.art__col > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.art__col h2 {
  margin-top: 2.25rem;
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  line-height: 1.3;
}
.art__col a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.art__list { padding-left: 1.15rem; }
.art__list li + li { margin-top: .4em; }
.art__rule { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--rule); }

/* Speech in the flow. Enough of a shift to read as a quotation without
   interrupting the article the way a pull-quote does. */
.art__quote {
  padding-left: 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--olive) 45%, transparent);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.art__pull {
  margin: 2.5rem 0;
  padding: 0;
  border: 0;
}
.art__pull p {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  line-height: 1.35;
  text-indent: -.4em;              /* hang the opening quote mark */
}
.art__pull p::before { content: '\201C'; }
.art__pull p::after  { content: '\201D'; }
.art__pull cite {
  display: block;
  margin-top: .9rem;
  font-size: .8125rem;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.art__pull cite::before { content: '\2014\00a0'; }

/* Photographs bleed to the edge of the measure — no frame, no rounded box. */
.art__fig { margin: 2.25rem 0; }
.art__fig img { display: block; width: 100%; height: auto; }
.art__fig figcaption {
  margin-top: .6rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.art__action { margin-top: 2rem; }

.art__contact,
.art__bios {
  max-width: 40rem;
  margin: 2.75rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.art__contact h2,
.art__bios h2 {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: .8rem;
}
.art__contact p { margin: 0; line-height: 1.7; }
.art__bio + .art__bio { margin-top: 1.5rem; }
.art__bio h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.art__bio p { margin: 0; font-size: .9375rem; line-height: 1.65; }

.art__back { max-width: 40rem; margin: 2.75rem auto 0; font-size: .9375rem; }

.post__date {
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

@media (max-width: 780px) {
  .art__col { font-size: 1rem; }
  .art__pull { margin: 2rem 0; }
}

/* When the picture is the resource. Several of these are documents published
   as an image — the Five-year Strategic Plan is an A4 page — and the original
   site showed them as a small cropped thumbnail, so the material could not be
   read on its own page. Here the image leads at its own size. */
.rdoc__card--subject { grid-template-columns: minmax(0, 1fr); }
.rdoc__card--subject .rdoc__detail { max-width: 46rem; }

.rdoc__subject {
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto 0;
  background: var(--sand);
}
/* No frame and no rounded corners — the image is the content, not a card. */
.rdoc__subject img { display: block; width: 100%; height: auto; }
.rdoc__subject figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.rdoc__dims { margin-left: .5em; font-variant-numeric: tabular-nums; opacity: .8; }

/* An article that is a scanned document rather than prose. The reading measure
   is right for words and wrong for an A4 page. */
.art__col--figures { max-width: 54rem; }
.art__col--figures .art__fig:first-child { margin-top: 0; }

/* ── Footer-linked pages ────────────────────────────────────────────────────
   /our-people/, /our-governance/, /our-alliances-partnerships/, /work-for-us/,
   /join-us/, /faqs/, /privacy-policy/. These were the last pages the footer of
   every rebuilt page pointed at while still running the original design. */
.fp { padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 clamp(3.5rem, 3rem + 2vw, 5rem); background: var(--shell); }

/* Prose pages read at one measure; /our-people/ and /faqs/ need the full width. */
/* The rhythm of a prose page, in proportion to its own leading.
 *
 * It was 1.75 line-height with paragraphs 1.25em apart — so two paragraphs sat
 * 21px apart while two lines inside one sat 29.75px apart. A paragraph break was
 * narrower than a line break, which makes a column read as one loose mass
 * rather than as paragraphs: over-spaced to look at and under-separated in fact.
 *
 * Leading comes down and the gap goes up, so a paragraph break is now clearly
 * wider than a line break. The column is tighter overall, because on a page of
 * four-line paragraphs the leading is the number that decides how much space
 * there is.
 *
 * Headings keep more room above than below, so each belongs to what follows it —
 * but 2.5rem was a lot of nothing on a page whose sections are two sentences.
 */
.fp__col { max-width: 42rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.65; }
.fp__col > * + * { margin-top: 1.4em; }
.fp__col h2 {
  margin-top: 2rem;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.3;
}
.fp__col h2:first-child { margin-top: 0; }
.fp__col a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.fp__list { padding-left: 1.15rem; }
/* Items were 7px apart against a 30px line, so a wrapped item ran into the next
   one — tighter between items than inside them. */
.fp__list li + li { margin-top: .6em; }
.fp__count {
  margin-left: .5em;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* ── People ───────────────────────────────────────────────────────────────
   32 portraits and biographies. The bios run long — the CEO's is seven
   paragraphs — so each card shows the first and puts the rest behind a
   disclosure. Every word stays on the page: for several of these people this
   is the only place their biography exists. */
.ppl + .ppl { margin-top: clamp(3.5rem, 3rem + 2vw, 5.5rem); }
.ppl__intro { max-width: 46rem; margin-bottom: 2.5rem; }
.ppl__intro h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: .9rem; }
.ppl__intro p { font-size: 1.0625rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.ppl__count {
  margin-top: .8rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.ppl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  align-items: start;
}
/* The "Read more" control sits on the same line across a row rather than
   wherever each biography happens to end. */
.ppl__card { display: flex; flex-direction: column; height: 100%; }
.ppl__detail { display: flex; flex-direction: column; flex: 1; }
.ppl__more { margin-top: auto; padding-top: .7rem; }

/* Portraits bleed to the edge of their column — no frame, no rounded box. */
.ppl__portrait { margin: 0 0 1rem; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.ppl__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.ppl__name { font-size: 1.0625rem; line-height: 1.3; margin-bottom: .2rem; }
.ppl__role {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .8rem;
}
/* First paragraphs run from 47 to 623 characters, which left the grid ragged
   and pushed portraits to wildly different heights down the page. Clamping the
   preview gives every closed card the same height; opening "Read more" releases
   it. Where :has() is unavailable the preview simply stays clamped, and the
   rest of the biography still opens beneath it. */
.ppl__bio {
  font-size: .9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.ppl__card:has(.ppl__more[open]) .ppl__bio {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.ppl__more > summary {
  cursor: pointer;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.ppl__more > summary::-webkit-details-marker { display: none; }
.ppl__more > summary::after { content: ' \2193'; }
.ppl__more[open] > summary::after { content: ' \2191'; }
.ppl__more[open] > summary { margin-bottom: .7rem; }
.ppl__more > summary:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.ppl__more p { font-size: .9375rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.ppl__more p + p { margin-top: .8em; }

/* ── FAQs ─────────────────────────────────────────────────────────────────
   Open by default. Seventeen questions that all start shut is a page that
   looks empty and cannot be searched with the browser's own find. */
.faq { margin-top: 0; }
.faq h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: 1.5rem; }
.faq__item { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.faq__item:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: '\002B';
  flex: none;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.faq__item[open] > summary::after { content: '\2212'; }
.faq__item > summary:focus-visible { outline: 3px solid var(--lilac); outline-offset: 4px; }
.faq__body { margin-top: .9rem; font-size: .9375rem; line-height: 1.7; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.faq__body p + p { margin-top: .9em; }

/* ── Glossary ─────────────────────────────────────────────────────────────
   55 acronyms. A two-column definition list reads far faster than the run of
   single lines the original used. */
.gloss { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--rule); }
.gloss h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: 1.75rem; }
.gloss__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  margin: 0;
}
.gloss__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  gap: 0 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.gloss__row dt { font-weight: 500; font-variant-numeric: tabular-nums; }
.gloss__row dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 78%, transparent); }

@media (max-width: 780px) {
  .fp__col { font-size: 1rem; }
  .ppl__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
}

/* The closing action on /work-for-us/. The original page had an "Upcoming
   Jobs" heading with nothing under it, which reads as a fault rather than as
   "none at the moment". */
.fp__jobs { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.fp__jobs h2 { margin-top: 0; }
.fp__none { color: color-mix(in srgb, var(--ink) 65%, transparent); }

/* ── Vacancies ───────────────────────────────────────────────────────────── */

/* The openings list that replaces .fp__none when there is something to list.
   A vacancy is a decision, not a link in a paragraph, so each one is a block
   with its own tap area rather than a bullet. */
.joblist { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.joblist__item + .joblist__item { margin-top: .75rem; }
.joblist__item {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: color-mix(in srgb, var(--sand) 55%, transparent);
}
.joblist__link {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.joblist__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.joblist__where,
.joblist__closes {
  margin: .4rem 0 0;
  font-size: .9375rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.joblist__closes { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }

/* The facts strip on a vacancy's own page: label above value, as many across
   as fit, so a role with three facts does not leave two empty columns. */
.job__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.job__fact dt {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.job__fact dd { margin: .35rem 0 0; font-size: 1.0625rem; line-height: 1.4; }
/* Two 150px columns held the longest fact — the location, which names four
   cities — to four ragged lines. One column reads it in two. */
@media (max-width: 640px) {
  .job__facts { grid-template-columns: 1fr; gap: 1.15rem; }
}

.job__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2.25rem; }
.job__actions--end { margin: 2.5rem 0 0; }
/* The size sits on the button so nobody opens an 800 KB document on mobile
   data without being told. */
.job__size { margin-left: .5rem; font-size: .8125rem; opacity: .75; }

/* An ad that has closed still has its page, because ads get forwarded. */
.job__closed {
  margin: 0 0 1.75rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--olive);
  background: color-mix(in srgb, var(--olive) 8%, transparent);
  font-size: 1rem;
}
.job__back { margin-top: 3rem; font-size: .9375rem; }
/* The prose column is narrower than the contact page's own grid. */
.fp__col .sub { margin-top: 3rem; padding: 0; background: none; }
.fp__col .sub__grid { display: block; }

/* Embedded video inside an article. The posts that carry these published a
   screengrab linking out to Vimeo, so the videos were unreachable once the
   link was lost — and one of those links pointed at Vimeo's own dashboard,
   which sends a visitor to a login screen. */
.art__video { margin: 2.25rem 0; }
.art__video figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: .7rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.art__video-label { color: var(--ink); font-weight: 500; }

/* Section-break photograph inside an article. Scrolls rather than pins: the
   hero above already scrolls its text over a fixed image, and repeating that
   inside the article is the same distraction that was removed from the Our
   Work sub-pages. */
.art__break {
  margin: 2.5rem 0;
  aspect-ratio: 16 / 9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  position: relative;
}
.art__break figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .55rem .9rem;
  background: rgba(28, 30, 34, .68);
  color: var(--sand);
  font-size: .75rem;
  line-height: 1.45;
}

/* ── A photograph added in the editor ─────────────────────────────────────
   The imported articles carry `.art__fig` and `.art__break`, which the build
   wrote by hand. Anything added from now on is an ordinary Image block, and
   these give the block the same two appearances so an editor never has to know
   which era an article came from. Core's own block stylesheet is dequeued (see
   nntc_drop_block_css), so these rules are the whole of it — nothing here is
   overriding anything.

   Default: the picture whole, at the measure, caption underneath — `.art__fig`.
*/
.art__col .wp-block-image { margin: 2.25rem 0; }
.art__col .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;    /* nothing frames a photograph */
}
.art__col .wp-block-image figcaption {
  margin-top: .6rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  text-align: left;
}

/* Styles → Section break: the wide photograph that breaks up a long run of
   text. Cropped to 16:9 and the caption laid over it, exactly as `.art__break`
   is drawn, so old and new articles cannot be told apart. */
.art__col .wp-block-image.is-style-break { position: relative; margin: 2.5rem 0; }
.art__col .wp-block-image.is-style-break img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.art__col .wp-block-image.is-style-break figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .55rem .9rem;
  background: rgba(28, 30, 34, .68);
  color: var(--sand);
  font-size: .75rem;
  line-height: 1.45;
  text-align: left;
}

/* Wide and Full are offered by the editor, so they have to mean something.
   The measure is 40rem; wide takes the photograph out to the reading column's
   own limit, full to the edge of the window — the bleed the design asks for.
   `body` clips horizontal overflow, so 100vw cannot introduce a sideways
   scrollbar. */
.art__col .wp-block-image.alignwide,
.art__col .wp-block-image.alignfull {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
.art__col .wp-block-image.alignwide { width: min(54rem, 100vw - 3rem); }
.art__col .wp-block-image.alignfull { width: 100vw; }

/* How every video is presented. Nothing is embedded: several of NNTC's videos
   are whitelisted to nntc.com.au and refuse to play anywhere else, so a player
   worked on some pages and showed a privacy error on others. The video's own
   still and a link to Vimeo is the same everywhere. */
.rvid { position: relative; }
.vblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: var(--sand);
  text-decoration: none;
  text-align: center;
  padding: 1.5rem;
}
/* The still is dimmed so the invitation stays legible over any frame. */
.vblock::before { content: ''; position: absolute; inset: 0; background: rgba(28, 30, 34, .58); }
.vblock > * { position: relative; }

.vblock__play {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--lilac);
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}
.vblock__play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: .25rem;
  border-left: 1.15rem solid var(--ink);
  border-top: .7rem solid transparent;
  border-bottom: .7rem solid transparent;
}
.vblock:hover .vblock__play { transform: scale(1.06); }
.vblock:focus-visible { outline: 3px solid var(--lilac); outline-offset: -3px; }

.vblock__text {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.35;
  text-wrap: balance;
}
@media (max-width: 520px) {
  .vblock__play { width: 3rem; height: 3rem; }
  .vblock__play::after { border-left-width: .85rem; border-top-width: .52rem; border-bottom-width: .52rem; }
}

/* Separator between mentions that were pasted in butted together. */
.art__sep { margin: 0 .15em; color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* ── Event detail (/events/<slug>/) ─────────────────────────────────────────
   The practical facts sit in a rail beside the copy: when, where, who, and the
   one thing to do. The status line is written by site.js from the visitor's
   clock, because a status typed into the page goes stale — NNTC's ALRC webinar
   ran on 6 August 2026 and still said "Register". */
.evd__status {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .35rem .75rem;
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--lilac);
  color: var(--ink);
  border-radius: 100px;
}
.evd__status[hidden] { display: none; }
/* Finished, postponed or cancelled reads as a note, not as a call to action. */
.evd[data-event-state="past"] .evd__status,
.evd[data-event-state="postponed"] .evd__status,
.evd[data-event-state="cancelled"] .evd__status {
  background: rgba(255, 255, 255, .16);
  color: var(--sand);
}
.evd__dates { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); opacity: .9; }

.evd__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 clamp(3rem, 2.5rem + 2vw, 4.5rem);
}
.evd { background: var(--shell); }
.evd__rail { position: sticky; top: 6.5rem; }

.evd__detail { margin: 0 0 1.75rem; }
.evd__row { padding: .85rem 0; border-top: 1px solid var(--rule); }
.evd__row:last-child { border-bottom: 1px solid var(--rule); }
.evd__row dt {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: .3rem;
}
.evd__row dd { margin: 0; font-size: .9375rem; line-height: 1.5; }

.evd__rail-cta { margin: 0 0 1.75rem; }
.evd__rail-cta[hidden] { display: none; }
.evd__back { margin: 0; font-size: .9375rem; }

.evd__col { max-width: 42rem; font-size: 1.0625rem; line-height: 1.75; }
.evd__col > * + * { margin-top: 1.15em; }
.evd__col h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  line-height: 1.3;
}
.evd__col h2:first-child { margin-top: 0; }
.evd__col a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.evd__list { padding-left: 1.15rem; }
.evd__list li + li { margin-top: .45em; }
.evd__cta { margin-top: 1.75rem; }

.evd__contact {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.evd__contact h2 {
  margin-top: 0;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: .8rem;
}
.evd__contact p { margin: 0; line-height: 1.7; }

@media (max-width: 900px) {
  .evd__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .evd__rail { position: static; }
  .evd__col { max-width: none; font-size: 1rem; }
}

/* ── Self-hosted video ──────────────────────────────────────────────────────
   Where NNTC supplied the file, it plays on the page. The browser's own
   controls are used rather than a custom skin: they are keyboard accessible,
   they carry the caption menu, and they are what a viewer already knows. */
.vplayer {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.vplayer:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
/* Captions sit on a dark plate rather than over bare picture. */
.vplayer::cue { background: rgba(28, 30, 34, .78); color: var(--sand); font-size: .9em; }

.rvideo { margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0; }
.rvideo__cap {
  margin-top: .7rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.rvideo__cap span { margin-left: .6em; opacity: .8; font-variant-numeric: tabular-nums; }

/* Vimeo's player, for the one film too long to serve from here. */
.rvid--embed { aspect-ratio: 16 / 9; background: var(--ink); }
.rvid--embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.rvideo__cap a { margin-left: .6em; }

/* A hero with something anchored to its top right. Used for the FAQs button on
   Resources: NNTC said the FAQs felt buried, and on their current site they
   sit inside the Resources dropdown, so this is where a visitor already looks. */
.mhero__inner--withaside { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.mhero__aside { margin: 0; flex: none; }
.btn--ghost-light {
  background: transparent;
  color: var(--sand);
  border: 1px solid rgba(255, 255, 255, .55);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); filter: none; }
@media (max-width: 780px) {
  .mhero__inner--withaside { flex-direction: column; gap: 1.25rem; }
  .mhero__aside { order: 2; }
}

/* Upcoming / All events. A calendar that opens on things already held is
   answering the wrong question, so upcoming is the default and the past is
   one click away rather than scrolled past. */
.calseg { display: inline-flex; border: 1px solid var(--rule); border-radius: 100px; overflow: hidden; }
.calseg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .04em;
  padding: .5rem 1rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.calseg__btn.is-on { background: var(--ink); color: var(--sand); }
.calseg__btn:focus-visible { outline: 3px solid var(--lilac); outline-offset: -3px; }
/* Held months read as reference rather than as what is coming. */
.cal__month--past .cal__band { filter: saturate(.55); }
.cal__month--past[hidden] { display: none; }

/* A diagram supplied as a dark-mode image. Rather than recolour it, it sits on
   a plate of its own so it reads as intended instead of floating on the light
   page. */
.fp__figure { margin: 2.5rem 0 0; }
.fp__figure img { display: block; width: 100%; height: auto; }
.fp__figure--dark { background: var(--ink); padding: clamp(1rem, .5rem + 2vw, 2rem); }
.fp__figure figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ============================================================
   Section navigation
   ============================================================
   NNTC, August 2026: "We're not wedded to dropdown menus… the concern is more
   that some of the submenu content — Our People, Alliances — is not that easy
   to find. There is a lot of content between the top and the detailed footer
   on some pages."

   Two components answer that. `.secx` on the page a section opens on, listing
   its children with their own standfirsts. `.secnav` on every page inside a
   section — a compact row of siblings directly under the hero, so moving
   sideways never requires scrolling to the footer.

   Both are type and rules. No cards, no boxes, nothing framed: a row of
   bordered tiles under the hero would compete with the page it belongs to,
   and boxing things was the criticism these are meant to answer.
   ============================================================ */

.secnav {
  border-bottom: 1px solid var(--rule);
  background: var(--sand);
}
.secnav__inner {
  display: flex;
  align-items: baseline;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding: 1.15rem 0;
}
.secnav__label {
  margin: 0;
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  flex: 0 0 auto;
}
.secnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
}
.secnav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.secnav__link:hover { border-bottom-color: currentColor; }
.secnav__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

/* The page you are on is marked but stays in the list — removing it would make
   the row change shape between siblings, which reads as a different menu. */
.secnav__link.is-current {
  font-weight: 700;
  border-bottom-color: var(--ochre);
}

/* ── The landing-page index ─────────────────────────────────────────────── */
.secx {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 3rem 0;
}
.secx__label {
  margin: 0 0 1.75rem;
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.secx__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
}
/* Hairlines between, not around: the grid is divided rather than boxed. */
.secx__item + .secx__item { border-left: 1px solid var(--rule); }
.secx__link {
  display: block;
  height: 100%;
  padding: .25rem 1.75rem .25rem 0;
  text-decoration: none;
  color: var(--ink);
}
.secx__item + .secx__item .secx__link { padding-left: 1.75rem; }
.secx__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .5rem;
}
.secx__link:hover .secx__title { color: var(--olive); }
.secx__lead {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.secx__link:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

@media (max-width: 860px) {
  .secx { padding: 2.25rem 0; }
  .secx__list { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the divider belongs above each item rather than beside it. */
  .secx__item + .secx__item { border-left: 0; border-top: 1px solid var(--rule); }
  .secx__link,
  .secx__item + .secx__item .secx__link { padding: 1.25rem 0; }
  .secnav__inner { padding: 1rem 0; gap: .5rem 1.25rem; }
  .secnav__label { flex: 1 0 100%; }
}

/* The working form's additions to the design: an alert, per-field errors, and
   the honeypot. The prototype had none of these because it never submitted. */
.sub__alert {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--ochre);
  background: color-mix(in srgb, var(--ochre) 12%, transparent);
  font-size: .9375rem;
  font-weight: 500;
}
.fld.is-bad input,
.fld.is-bad select,
.fld.is-bad textarea { border-color: #a4442e; border-width: 2px; }
.fld__err {
  display: block;
  margin-top: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #a4442e;
}
/* Off-screen rather than display:none — a bot that skips hidden fields skips
   the trap, which is the opposite of what a trap is for. */
.sub__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub__sent { padding: 2rem 0; }

/* The consent tick on the enquiry forms. */
.fld--check { margin-bottom: .5rem; }
.fld__check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .9375rem; line-height: 1.45; }
.fld__check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--olive); flex: 0 0 auto; }


/* ---------------------------------------------------------------------------
   The framed sector calendar
   ---------------------------------------------------------------------------
   The calendar is a separate WordPress shared with the Mabo Centre, rendered by
   its own templates and framed here. It posts its height to this page and
   site.js applies it, so the frame grows to fit and never scrolls inside itself.

   This lives in src/styles.css, not in the theme's copy: sync-theme-assets.sh
   overwrites wp/nntc/site.css from this file on every build, so a rule added
   there survives exactly until the next sync. Without the width, an iframe
   falls back to its HTML default of 300px and the calendar renders in a narrow
   column down the left of the page. */
/* The calendar is a page inside a page, and the page it frames draws to its
   own edges — it is told how wide it is by the frame. Placed full-bleed the
   dates started hard against the window and DETAILS ran to the far right,
   hundreds of pixels outside the margin every other line on the page keeps. The
   frame takes the page's own measure instead. */
.calembed {
  width: min(100% - 3rem, var(--shell));
  margin-inline: auto;
}
/* Unless it is already inside one. The events page puts the frame outside the
   shell so it can take the page's measure itself; the homepage puts it inside,
   and applying the measure twice indented the calendar 24px further than the
   heading above it. */
.shell .calembed { width: 100%; }
.calembed iframe {
  display: block;
  width: 100%;
  min-height: 22rem;
  border: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------------
   News cards: every card in a row ends at the same place
   ---------------------------------------------------------------------------
   The photographs already share an aspect ratio, so the ragged bottoms came
   from the words — a two-line headline beside a four-line one, and an excerpt
   that runs to five lines beside one that runs to two. The grid stretches the
   cards to match, which just moves the ragged edge inside them.

   So the text is clamped: two lines of headline, three of summary. Clamping
   rather than truncating with an ellipsis in the markup, because the full text
   stays in the page for search and for a screen reader — only the display is
   cut. */
.posts .post__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.posts .post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A card with no photograph reserves the same square, so its headline starts
   level with its neighbours' rather than at the top of the row. */
.posts .post__link > .post__meta:first-child { margin-top: calc(100% + 1.1rem); }

/* The square belongs to the container, not the image.
   WordPress prints width and height attributes on a thumbnail, and those beat
   an aspect-ratio set on the <img> itself — the previews were still rendering
   at whatever shape the photograph happened to be, 396x512 beside 396x238. A
   ratio on the box the image fills cannot be argued with. */
.posts .post__media {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.posts .post__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* ── The news filters, in the design's own idiom ──────────────────────────────
   The site has one filter control and it is a pill: a hairline outline on
   nothing, a full ink fill when it is on, and the same lilac focus ring as
   everything else. `.dtype` on Resources, `.nchip` in the streams, `.dir__clear`
   beside the count — all the same object.

   These two were the exception. A browser <select> with a 10px corner and a
   label set as ordinary text is the one control on the site that looks like a
   form, and it sits at the top of the busiest page. So they are pills too.

   The ink fill is not decoration: a select that has been changed says so from
   across the page, which is the thing a dropdown is otherwise worst at. Setting
   it needs one class from site.js, and the row still reads correctly without
   script — it is simply all outline. */
.nfilters .filt { display: flex; flex-direction: column; gap: .45rem; }

/* The label is an eyebrow, like every other small label on the site. */
.nfilters .filt__label {
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.nfilters .filt__select {
  min-width: 0;
  padding: .55rem 2.5rem .55rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background-color: transparent;
  background-position: right 1.05rem center;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .12s, border-color .12s, color .12s;
}
.nfilters .filt__select:hover { background-color: rgba(43, 46, 52, .07); }
.nfilters .filt__select:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

/* ── The dropdown, once it opens ──────────────────────────────────────────
   The pill above is only half the control. Click a <select> and the list that
   drops is the operating system's — its font, its blue highlight, its corners —
   and it is the moment the page stops being NNTC's. site.js replaces it with a
   listbox drawn here; the <select> stays behind it, hidden, still holding the
   value, so with script off you get the plain control and nothing is lost.

   The open panel is ink on sand, which is the site's own emphasis: the header
   bar, the chosen chip, the caption laid over a photograph. A chosen pill is
   already ink, so opening it extends the same shape downward rather than
   introducing a new surface. */
.nsel { position: relative; }

/* The native control is kept for its value, not its appearance. `display:none`
   would take it out of the form; this leaves it there and invisible. */
.nsel__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The trigger wears the select's own classes, so it inherits the pill above and
   only the parts a <button> gets wrong are restated. The chevron becomes a real
   element rather than a background image, because a background cannot turn
   over and the control should say which way it is going. */
.nsel__btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background-image: none;
  padding-right: 1.05rem;
}
.nsel__btn::after {
  content: '';
  flex: none;
  width: 12px;
  height: 8px;
  background: currentColor;
  /* The same chevron the select carried, as a mask, so it takes the pill's
     colour in both states instead of needing a second copy in sand. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .12s ease-out;
}
.nsel.is-open .nsel__btn::after { transform: rotate(180deg); }
/* Open is a state of the control, not only of the panel. */
.nsel.is-open .nsel__btn { border-color: var(--ink); }

.nsel__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + .4rem);
  left: 0;
  min-width: 100%;
  max-height: 17rem;
  overflow-y: auto;
  padding: .35rem;
  border-radius: 18px;
  background: var(--ink);
  border: 1px solid rgba(241, 234, 232, .16);
  box-shadow: 0 14px 34px rgba(28, 30, 34, .22);
}

.nsel__opt {
  padding: .5rem .9rem;
  border-radius: 999px;
  color: var(--sand);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
/* One highlight, whether it arrived by mouse or by arrow key — two different
   ones is how a keyboard user ends up watching the mouse's row light up. */
.nsel__opt.is-cursor { background: rgba(241, 234, 232, .14); }
/* What is currently chosen, marked rather than filled: the filled row is where
   you are, not what you picked. */
.nsel__opt[aria-selected="true"] { color: var(--lilac); }

/* The divider a disabled <option> becomes. */
.nsel__sep {
  height: 1px;
  margin: .35rem .9rem;
  background: rgba(241, 234, 232, .2);
}

@media (prefers-reduced-motion: no-preference) {
  .nsel__menu { animation: nsel-in .12s ease-out; }
}
@keyframes nsel-in {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: none; }
}

/* Chosen. The same fill `.nchip.is-on` and `.dtype.is-on` take, and the chevron
   is redrawn in the sand so it does not disappear into the ink. */
.nfilters .filt__select.is-on {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f1eae8' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* The open menu is drawn by the operating system, which does not inherit the
   pill's colours — so the options are set back to the page's own. */
.nfilters .filt__select option { background: var(--sand); color: var(--ink); }

/* The search sits in the same row as two pills and must not be a third shape.
   It keeps the rule-under-the-field the rest of the site uses, sized and
   letterspaced to sit on the same baseline as them. */
.nfilters .nsearch .dsearch__input {
  padding: .55rem 0 .55rem 1.85rem;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nfilters .nsearch .dsearch__icon { width: 18px; height: 18px; }

/* Clear sits with the count, and is the same pill at the smaller size the
   Resources directory uses for it. */
.narchive__status .dir__clear { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }

@media (max-width: 640px) {
  /* Two pills and a search on one line becomes three cramped columns. Given the
     width, the search takes the row. */
  .nfilters__right { gap: 1rem; }
  .nfilters .nsearch { flex: 1 0 100%; }
}

/* A conditional question block on the enquiry forms. */
.fld__when[hidden] { display: none; }
.fld__when { display: contents; }