/* ==========================================================================
   Ensign — the MFAI 2026 design system.
   Square corners, hard rules, no shadows except the nav panel, no gradients.
   Token values are fixed and have been through accessibility review.
   ========================================================================== */

/* --- Fonts, self-hosted. No third party request from a government site. --- */

@font-face { font-family: 'Archivo'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }

/* --- Tokens --- */

:root {
  /* ------------------------------------------------------------------
     Ensign 2026, the tapa palette.

     Four colours come straight off the Ministry's brand sheet and are used
     here byte for byte: --tapa is Primary, --clay is Secondary, --sand is
     Tertiary, --ink is Text/Alternative. Everything warm below them is the
     same colour at a different lightness, built on the Primary's own hue of
     14.6 degrees, so the whole page reads as one cloth rather than a set of
     browns that happen to sit together.

     Three things the brand sheet could not supply on its own, and why they
     are here. Secondary at #90796D measures 4.08:1 on white, so it cannot
     carry text; it keeps the decorative jobs it is good at (the 3px rule
     under a heading) and --clay-ink carries the warm accent wherever that
     accent is words. Primary and Text/Alternative sit 1.12:1 apart, which is
     the same darkness to the eye, so Primary does the brand work (headings,
     rules, fills) and Text/Alternative does the reading; that is the split
     the sheet implies by naming them differently. And nothing on the sheet
     could mark a link, a focus ring or an advisory, because four warm
     neutrals cannot say "this is different, act on it" -- so there is exactly
     one cool note, --sea, and it does only those jobs.

     Every pairing these tokens produce was measured, not eyeballed. 32 of 32
     clear WCAG AA. The tightest is the 3px heading rule at 4.08:1, which is
     decorative and needs 3:1.
     ------------------------------------------------------------------ */

  /* The dark end. Headings, section rules, buttons, the footer, the nav. */
  --tapa:        #3C1D13;   /* brand sheet, Primary */
  --tapa-deep:   #21100A;   /* pressed states, and text on any warm fill */
  --tapa-line:   #623628;   /* a rule drawn ON the dark band */

  /* The warm accent, in three jobs that need three lightnesses. */
  --clay:        #90796D;   /* brand sheet, Secondary. RULES ONLY: 4.08:1, fails as text */
  --clay-ink:    #A9583F;   /* the accent where it is words, or a bar that carries meaning */
  --clay-lt:     #DF8F76;   /* the accent on the dark band, and the advisory band itself */

  /* Surfaces, lightest last. */
  --sand-str:    #C6B0A9;   /* FILL ONLY. Chips and file badges, with --tapa on top */
  --sand:        #D5CFCB;   /* brand sheet, Tertiary. Panels and rail blocks */
  --border:      #DFD9D7;   /* hairlines */
  --tint:        #F5F3F2;   /* the quiet surface */
  --warm:        #F9F5F3;   /* the warmer surface, for a panel that needs to feel different */
  --marker:      #F1CEC3;   /* search-term highlight */

  /* Text. */
  --ink:         #111D25;   /* brand sheet, Text/Alternative */
  --muted:       #887165;   /* small print on WHITE only */
  --muted-tint:  #67554C;   /* small print on ANY tinted surface */

  /* Text on the dark band. */
  --on-tapa:     #D9C5BF;
  --on-tapa-str: #EDE2DE;
  --on-tapa-dim: #BEA59D;

  /* The one cool note. Links, focus rings, "you are here". Nothing else. */
  --sea:         #12566B;
  --sea-deep:    #0D4152;
  --sea-lt:      #8FC4D6;   /* a link on the dark band */

  /* Vertical rhythm for the intro band, org chart and header ornament.
     These were consumed in three rules but never defined, so the gap, the
     padding and the ornament's top all fell to their unset values: the
     intro photo touched the text, the chart lost its band padding, and the
     ornament's positioning box computed to nothing. Values match the
     section rhythm used everywhere else: 44px bands, 28px tight. */
  --band:        44px;
  --band-tight:  28px;

  --sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:  48px;
  --maxw:    1360px;

  /* Type scale. One home for heading sizes and the single card/list-title
     role, so a card title is not 20 / 21 / 22 / 24 depending on which card
     happens to hold it. h5 and h6 are sized here too, so a sub-heading in body
     copy can never fall back to the browser default and drop under the 12px
     floor. */
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-h5: 16px;
  --fs-h6: 13px;
  --fs-card-title: 22px;   /* card / list headline, equals h3 */
}

/* --- Reset --- */

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

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

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--tapa);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 16px;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.02em; }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 18px; }

a { color: var(--sea); }
a:hover { color: var(--sea-deep); }

/* Every focusable thing gets a visible ring. Gold as a fill behind dark text. */
:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
}

/* On the dark bands --sea disappears into the ground (1.87:1 on --tapa,
   1.36:1 on --sea-deep). --sea-lt is the ring the org chart already uses on
   its dark tier: 8.01:1 and 5.82:1 on the same grounds. */
.govbar a:focus-visible,
.site-footer a:focus-visible,
.worldbar a:focus-visible { outline-color: var(--sea-lt); }

/* No radius anywhere. Ensign is square. */
input, button, select, textarea, .btn, img, figure { border-radius: 0; }

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

/* --- Layout --- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--flush { max-width: var(--maxw); margin: 0 auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--tapa-deep); color: #fff; padding: 14px 22px;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Shared type utilities --- */

.eyebrow {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-ink);
  margin: 0 0 12px; display: block;
}
.eyebrow--on-dark { color: var(--clay-lt); }

.rule-heading { border-bottom: 3px solid var(--clay); padding-bottom: 8px; }

.meta {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}

.lede { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 60ch; }

.chip {
  display: inline-block; background: var(--tapa); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px;
}
.chip--live { background: var(--sand-str); color: var(--tapa-deep); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px 18px;
  background: var(--tapa); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; border: 0; cursor: pointer;
}
.btn:hover { background: var(--tapa-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--tapa); border: 2px solid var(--tapa); }
.btn--ghost:hover { background: var(--tapa); color: #fff; }

.arrow-link {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sea); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.arrow-link:hover { color: var(--sea-deep); text-decoration: underline; }

/* ==========================================================================
   Government bar
   ========================================================================== */

.govbar {
  background: var(--tapa-deep); color: var(--on-tapa);
  font-size: 13px; letter-spacing: 0.02em;
}
.govbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px;
}
.govbar__links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.govbar a {
  color: var(--on-tapa-str); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.govbar a:hover { color: #fff; text-decoration: underline; }
.govbar svg { flex: 0 0 auto; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }

/* Two marks side by side. The hairline between them says they are two things
   rather than one wide picture: the crest belongs to the country, the tapa
   panel to the Ministry. Aligned on their baselines, not their centres, since
   the crest is squarer than the panel and centring made it float. */
.brand__marks { display: flex; align-items: flex-end; gap: 14px; }
.brand__marks::after {
  content: ""; align-self: stretch; width: 1px; background: var(--border);
  margin-left: 4px;
}
.brand__crest { height: 68px; width: auto; display: block; }
.brand__mark  { height: 68px; width: auto; display: block; }

/* The divider is drawn by .brand__marks::after, so the text no longer needs
   one of its own. */
.brand__text { padding-left: 0; }
.brand__name {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 19px; letter-spacing: -0.025em; line-height: 1.12; color: var(--tapa);
}
/* The Ministry's motto. Not upper-cased and not letter-spaced the way the old
   government line was: this is Cook Islands Maori, and forcing capitals onto a
   language with long vowels makes it harder to read, not more official. */
.brand__motto {
  /* No italic face is shipped, so no italic: a synthetic oblique is the one
     distortion this type system cannot audit. Spacing does the work instead. */
  display: block; font-size: 13px; line-height: 1.3; color: var(--muted);
  margin-top: 7px; letter-spacing: 0.02em;
}

.masthead__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Landing-only cross-cutting links (About / Media / Contact).
   These are the ONLY navigation in the masthead on the atrium — every interior
   page swaps them for search and Online services — so three loose words had to
   carry the whole job while competing with the Ministry's name beside them.
   Grouped into one panel on the quiet surface, divided by the same hairline the
   two marks are divided by, they read as one control with three destinations.
   Square, flat, no shadow: the panel is the tint surface and the separators are
   the border token, so nothing new enters the system to say it. */
.masthead__links {
  display: flex; align-items: stretch;
  background: var(--tint); border: 1px solid var(--border);
}
.masthead__links a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 18px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--tapa); text-decoration: none;
  transition: background-color .12s linear, color .12s linear;
}
/* On the item, not in the gap: a wrapped row keeps its dividers correct. */
.masthead__links a + a { border-left: 1px solid var(--border); }
.masthead__links a:hover { background: #fff; color: var(--sea); }
/* Inside the panel, so the ring cannot be clipped by the neighbouring cell. */
.masthead__links a:focus-visible { outline-offset: -3px; }

.searchbox { display: flex; align-items: stretch; border: 2px solid var(--tapa); width: 250px; max-width: 100%; }
.searchbox input {
  flex: 1; border: 0; background: transparent; padding: 10px 12px;
  /* 16px, not 15: iOS Safari zooms the page when a smaller input takes focus. */
  font-family: var(--sans); font-size: 16px; color: var(--ink); min-width: 0;
}
.searchbox input:focus { outline-offset: -2px; }
.searchbox button {
  border: 0; background: var(--tapa); color: #fff; width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.searchbox button:hover { background: var(--tapa-deep); }

/* ==========================================================================
   Primary navigation
   ========================================================================== */

.nav {
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--tapa);
  position: relative;
}
.nav__bar { display: flex; gap: 4px; align-items: stretch; flex-wrap: wrap; }

.nav__item, .nav__toggle {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--tapa);
  text-decoration: none; background: transparent; border: 0; cursor: pointer;
  padding: 15px 14px; min-height: 44px;
  display: flex; align-items: center; gap: 7px;
}
.nav__item:hover, .nav__toggle:hover { color: var(--tapa); background: var(--tint); }
.nav__item.is-current { border-bottom: 3px solid var(--clay); padding-bottom: 12px; }
.nav__toggle[aria-expanded="true"] { background: var(--tapa); color: #fff; }
.nav__toggle svg { stroke: var(--muted); }
.nav__toggle[aria-expanded="true"] svg { stroke: var(--clay-lt); }

.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 400;
  background: #fff; border-bottom: 2px solid var(--tapa);
  box-shadow: 0 14px 24px rgba(11, 44, 74, .12);
  padding: 32px 0 36px;
}
.nav__panel[hidden] { display: none; }
.nav__panel-grid { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 44px; }
.nav__panel-grid--single { grid-template-columns: 300px 1fr; }

.nav__overview {
  text-decoration: none; background: var(--tapa); color: #fff;
  padding: 24px; display: flex; flex-direction: column;
  border-left: 6px solid var(--clay);
}
.nav__overview:hover { background: var(--tapa-deep); color: #fff; }
.nav__overview-title {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 10px; color: #fff;
}
.nav__overview-desc { font-size: 15px; line-height: 1.55; color: var(--on-tapa); }
.nav__overview-go {
  margin-top: auto; padding-top: 18px;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-lt);
}

.nav__group-label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-ink);
  border-bottom: 2px solid var(--tapa); padding-bottom: 8px; margin-bottom: 4px;
}
.nav__links { display: flex; flex-direction: column; }
.nav__link {
  display: block; text-decoration: none; padding: 13px 0;
  border-bottom: 1px solid var(--border); min-height: 44px;
}
.nav__link:last-child { border-bottom: 0; }
.nav__link:hover { background: var(--tint); }
.nav__link-title {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 16px; color: var(--tapa); letter-spacing: -0.01em;
}
/* --muted-tint, not --muted: the mega menu panel is --tint, where --muted measures 4.13:1. */
.nav__link-desc { display: block; font-size: 14px; color: var(--muted-tint); margin-top: 2px; }
.nav__link-flag {
  display: inline-block; background: var(--sand-str); color: var(--tapa-deep);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; margin-right: 8px;
}

.nav__aside { background: var(--sand); padding: 22px; align-self: start; }
.nav__aside-label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tapa); margin-bottom: 10px;
}
.nav__aside p { font-size: 15px; color: var(--muted-tint); margin: 0 0 10px; }
.nav__aside strong { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--tapa); }

/* Mobile menu button, hidden on desktop */
.nav__mobile-toggle { display: none; }

/* ==========================================================================
   Advisory band
   ========================================================================== */

.advisory {
  background: var(--clay-lt); color: var(--tapa-deep);
}
.advisory__inner {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.advisory__tag {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 2px solid var(--tapa-deep); padding: 4px 9px; flex: 0 0 auto;
}
.advisory__text {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; flex: 1 1 260px;
}
.advisory__link {
  color: var(--tapa-deep); font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid var(--tapa-deep);
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
}
.advisory__link:hover { color: var(--tapa-deep); background: rgba(48, 17, 10, .10); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--tapa); color: var(--on-tapa);
  border-top: 4px solid var(--clay);
  padding-top: 44px; padding-bottom: 32px;
  margin-top: 64px;
}
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; }
.site-footer__logo { height: 96px; width: auto; display: block; margin-bottom: 18px; }
.site-footer__name {
  font-family: var(--display); font-weight: 800; font-size: 18px; color: #fff;
  line-height: 1.2; letter-spacing: -0.02em; max-width: 24ch;
}
.site-footer__motto { font-size: 14px; margin-top: 8px; line-height: 1.6; }
.site-footer__col-label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-lt); margin-bottom: 12px;
}
.site-footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.site-footer a { color: var(--on-tapa-str); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__contact { font-size: 15px; line-height: 1.7; }
.site-footer__hours { color: var(--on-tapa-dim); }
.site-footer__legal {
  border-top: 1px solid var(--tapa-line); margin-top: 32px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--on-tapa-dim);
}
.site-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer__legal a { color: var(--on-tapa); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}
.breadcrumb__inner { padding-top: 14px; padding-bottom: 14px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--sea); text-decoration: underline; }
.breadcrumb__sep { margin: 0 10px; color: var(--muted); } /* --border here was 1.37:1 */
/* The current page is the one crumb that is not a link; give it the ink colour
   and a little weight so "you are here" reads at a glance. */
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Empty states — launch day is the empty state
   ========================================================================== */

.empty {
  border: 1px solid var(--border); background: var(--tint);
  padding: 44px; text-align: center; color: var(--muted-tint);
}
.empty h2 { font-size: 22px; margin-bottom: 8px; }
.empty p { margin: 0 auto; max-width: 46ch; }

/* ==========================================================================
   Mobile — one breakpoint
   ========================================================================== */

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  body { font-size: 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  h3 { font-size: 20px; }

  .govbar__inner { justify-content: flex-start; }
  .govbar__hours { display: none; }

  .masthead__inner { gap: 16px; }
  .brand__crest, .brand__mark { height: 52px; }
  .brand__marks { gap: 10px; }
  .brand__name { font-size: 16px; }
  .brand__motto { font-size: 12px; margin-top: 5px; }
  .masthead__tools { width: 100%; }
  .searchbox { width: 100%; }

  /* Full width and equal thirds: on a phone this is the atrium's whole
     navigation, and an even row is easier to hit than a huddle of words. */
  .masthead__links { width: 100%; }
  .masthead__links a { flex: 1; justify-content: center; padding: 12px 8px; font-size: 14px; }

  /* Nav becomes a full-screen accordion. A parent row expands only, never
     navigates, so no row ever does two things. */
  .nav__mobile-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 52px; padding: 14px var(--gutter);
    background: var(--tapa); color: #fff; border: 0; cursor: pointer;
    font-family: var(--display); font-weight: 800; font-size: 13px;
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .nav__bar {
    display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--border);
  }
  .nav.is-open .nav__bar { display: flex; }
  .nav__item, .nav__toggle {
    width: 100%; justify-content: space-between; padding: 16px var(--gutter);
    border-bottom: 1px solid var(--border); min-height: 52px;
  }
  .nav__item.is-current { border-bottom: 1px solid var(--border); border-left: 4px solid var(--clay); }
  .nav__panel {
    position: static; box-shadow: none; border-bottom: 1px solid var(--border);
    padding: 0; background: var(--tint);
  }
  .nav__panel-grid, .nav__panel-grid--single { grid-template-columns: 1fr; gap: 0; }
  .nav__panel .wrap { padding: 0; }
  .nav__overview { border-left: 0; border-bottom: 1px solid var(--tapa-line); padding: 20px var(--gutter); }
  .nav__group-label { padding: 16px var(--gutter) 8px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
  .nav__link { padding: 14px var(--gutter); min-height: 52px; }
  .nav__aside { margin: 0; padding: 20px var(--gutter); }

  .advisory__inner { gap: 12px; }
  .advisory__text { font-size: 16px; flex-basis: 100%; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__legal { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   Sections, prose and lists
   ========================================================================== */

.section { padding-top: 44px; padding-bottom: 20px; }
/* .page carries no width of its own. It used to set max-width:100%, which sat
   later in this file than .wrap at equal specificity and therefore beat it,
   so every page using page.php ran the full width of the window while every
   other template stayed centred at --maxw. */
.page__image { margin: 0 0 32px; }
.page__image img { width: 100%; display: block; }

/* One column of reading at roughly 68 characters. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
/* Headings inside body copy carry the 3px bronze rule from the design system.
   Without them a long page of policy text is one undifferentiated column and
   there is nothing for the eye to land on. */
.prose h2 {
  font-size: 26px; margin-top: 2em;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--clay);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 20px; margin-top: 1.7em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* A rule under a heading needs the following paragraph closer to it than the
   default stack spacing, or the heading looks detached from what it labels. */
.prose h2 + *, .prose h3 + * { margin-top: .8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img { display: block; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--tint); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--tapa); }
.prose tbody tr:nth-child(even) { background: var(--tint); }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--clay); font-size: 19px; color: var(--muted-tint);
}

/* An instruction to the content team. Visible, deliberately unmissable. */
.editor-note {
  border: 1px solid var(--border); border-left: 4px solid var(--clay-ink);
  background: var(--tint); padding: 16px 18px; font-size: 15px; color: var(--muted-tint);
  margin-bottom: 28px;
}
.editor-note p { margin: 0; }
.editor-note strong { color: var(--tapa); }

/* --- Media list --- */

.media-list { border-top: 1px solid var(--border); }
/* After a featured lead, the list's own top rule would stack on the lead's 2px
   navy rule and read as one muddy 3px line. The lead already separates them. */
.media-lead + .media-list { border-top: 0; }

.media-row {
  display: grid;
  grid-template-columns: 168px 110px 1fr 160px;
  gap: 24px; align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.media-row__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-row__thumb-empty { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--sand); }
.media-row__date { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.media-row__title { font-size: var(--fs-card-title); margin: 0 0 6px; }
.media-row__title a { color: var(--tapa); text-decoration: none; }
.media-row__title a:hover { color: var(--sea); text-decoration: underline; }
.media-row__excerpt { margin: 0; font-size: 16px; color: var(--muted); max-width: 62ch; }
.media-row__tags {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding-top: 3px;
}

/* --- Simple link list --- */

.linklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 28px; }
.linklist a {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 18px 20px; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--tapa); text-decoration: none;
}
.linklist a::after { content: "→"; color: var(--sea); }
.linklist a:hover { background: var(--tint); }

/* --- Pagination --- */

.pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 32px 0 8px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--tapa);
}
.pagination .page-numbers:hover { background: var(--tint); }
.pagination .page-numbers.current { background: var(--tapa); color: #fff; border-color: var(--tapa); }
.pagination .page-numbers.dots { border: 0; min-width: 24px; color: var(--muted); }
.pagination .prev, .pagination .next {
  border: 0; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 800; color: var(--sea); margin-left: auto;
}

/* --- Wide search box, used on 404 and search --- */

.searchbox--wide { width: 100%; max-width: 520px; margin: 24px 0 8px; }

/* --- Screen reader text --- */

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}

@media (max-width: 768px) {
  .section { padding-top: 28px; }
  .media-row { grid-template-columns: 96px 1fr; gap: 14px; padding: 18px 0; }
  .media-row__date { grid-column: 2; padding-top: 0; }
  .media-row__body { grid-column: 2; }
  .media-row__title { font-size: 19px; }
  .media-row__tags { grid-column: 2; text-align: left; }
  .pagination .prev, .pagination .next { margin-left: 0; }
}

/* ==========================================================================
   Filter chips
   Link-based, so every filtered view has its own indexable URL.
   ========================================================================== */

.filters {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 0 22px; border-bottom: 2px solid var(--tapa);
}
.filters__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.filters__label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px;
}

.chipfilter {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); background: #fff;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tapa); text-decoration: none;
}
.chipfilter:hover { background: var(--tint); color: var(--tapa); }
.chipfilter.is-on { background: var(--tapa); border-color: var(--tapa); color: #fff; }

.searchbox--sm { width: 210px; border-width: 1px; }
.searchbox--sm input { padding: 10px; font-size: 16px; min-height: 44px; }
.searchbox--sm button { width: 44px; min-height: 44px; }

/* ==========================================================================
   Media lead
   ========================================================================== */

.media-lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  padding: 28px 0 32px; border-bottom: 2px solid var(--tapa);
  align-items: start;
}
/* 16:9, matching the mfai-lead crop the image is delivered in. At 4:3 the lead
   photograph was cover-cropped a second time and lost its sides. The empty
   state carries the same ratio so setting a photograph shifts nothing. */
.media-lead__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.media-lead__image-empty { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--tint); border: 1px solid var(--border); }
.media-lead__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.media-lead__title { font-size: 34px; margin: 0 0 12px; }
.media-lead__title a { color: var(--tapa); text-decoration: none; }
.media-lead__title a:hover { color: var(--sea); text-decoration: underline; }
.media-lead__excerpt { margin: 0; font-size: 17px; color: var(--ink); max-width: 56ch; }

/* ==========================================================================
   Single story
   ========================================================================== */

/* The rule sits immediately after the measure, not at the container edge. */
.story {
  display: grid; grid-template-columns: minmax(0, 68ch) 300px; gap: 48px;
  justify-content: start;
  padding-top: 40px; padding-bottom: 24px; align-items: start;
}
.story__main { max-width: 68ch; }
.story__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.story__image { margin: 26px 0 30px; }
.story__image img { display: block; width: 100%; }
.story__image figcaption { font-size: 13px; color: var(--muted); padding-top: 10px; }

.story__topics {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 40px; padding-top: 22px;
}
.story__topics-label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px;
}

.storynav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  border-top: 1px solid var(--border); margin-top: 28px; padding-top: 20px;
}
.storynav__item--next { text-align: right; }
.storynav__label {
  display: block; font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.storynav__item { position: relative; }
.storynav a {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--tapa); text-decoration: none;
}
.storynav a::after { content: ""; position: absolute; inset: 0; }
.storynav a:hover { color: var(--sea); text-decoration: underline; }

/* --- The rail --- */

.story__rail { border-left: 1px solid var(--border); padding-left: 32px; }
.rail__block { margin-bottom: 32px; }
.rail__block--tint { background: var(--sand); padding: 20px; }
.rail__block--tint p { color: var(--muted-tint); font-size: 15px; }
.rail__label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tapa);
  border-bottom: 3px solid var(--clay); padding-bottom: 7px; margin-bottom: 14px; display: block;
}
.rail__block--tint .rail__label { border-bottom-color: var(--clay); }
.rail__contact-name { font-family: var(--display); font-weight: 600; color: var(--tapa); margin-bottom: 6px; }

.rail__share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rail__share-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 6px;
  border: 1px solid var(--border); background: #fff;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; color: var(--tapa); text-decoration: none;
}
.rail__share-btn:hover { background: var(--tint); color: var(--tapa); }

.rail__related { position: relative; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rail__related:last-child { border-bottom: 0; }
.rail__related .meta { display: block; margin-bottom: 4px; font-size: 12px; }
.rail__related a { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--tapa); text-decoration: none; line-height: 1.25; }
.rail__related a:hover { color: var(--sea); text-decoration: underline; }
.rail__related a::after { content: ""; position: absolute; inset: 0; }

/* --- Document list --- */

.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { border-bottom: 1px solid var(--border); }
.doclist li:last-child { border-bottom: 0; }
.doclist a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; text-decoration: none; min-height: 44px; }
.doclist a:hover .doclist__title { color: var(--sea); text-decoration: underline; }
.doclist__type {
  flex: 0 0 auto; background: var(--sand-str); color: var(--tapa-deep);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; padding: 3px 6px; margin-top: 2px;
}
.doclist__title { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--tapa); line-height: 1.3; }
.doclist__size { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Front page
   ========================================================================== */

.home-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0;
  padding-top: 40px; padding-bottom: 44px; align-items: start;
}
.home-lead { padding-right: 44px; border-right: 1px solid var(--border); }
.home-lead__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.home-lead__title { font-size: 48px; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 16px; max-width: 19ch; }
.home-lead__title a { color: var(--tapa); text-decoration: none; }
.home-lead__title a:hover { color: var(--sea); text-decoration: underline; }
.home-lead__excerpt { font-size: 19px; line-height: 1.55; max-width: 60ch; margin-bottom: 22px; }
.home-lead__image { margin: 0; }
.home-lead__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.home-lead__image figcaption { font-size: 13px; color: var(--muted); padding-top: 10px; }

.home-latest { padding-left: 32px; }
.home-latest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--clay); padding-bottom: 7px; margin-bottom: 4px; }
.home-latest__head .rail__label { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.home-latest__all {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sea); text-decoration: none;
}
.home-latest__all:hover { text-decoration: underline; }
.home-latest__list { list-style: none; margin: 0; padding: 0; }
.home-latest__list li { position: relative; padding: 14px 0; border-bottom: 1px solid var(--border); }
.home-latest__list .meta { display: block; font-size: 12px; margin-bottom: 5px; }
.home-latest__list a { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.28; color: var(--tapa); text-decoration: none; }
.home-latest__list a:hover { color: var(--sea); text-decoration: underline; }
/* The whole row is the target. The row clears 44px, the headline alone does not. */
.home-latest__list a::after { content: ""; position: absolute; inset: 0; }
.home-latest__none { font-size: 15px; color: var(--muted); padding-top: 14px; }

.home-watch { background: var(--sand); padding: 18px; margin-top: 26px; }
.home-watch .rail__label { border-bottom-width: 2px; }
.home-watch__link { display: block; text-decoration: none; }
.home-watch__frame { position: relative; display: block; background: var(--sand); aspect-ratio: 16 / 9; }
.home-watch__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-watch__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tapa); }
.home-watch__title { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--tapa); padding-top: 12px; }
.home-watch__link:hover .home-watch__title { color: var(--sea); text-decoration: underline; }

/* --- Task cards --- */

.home-tasks { border-top: 2px solid var(--tapa); padding: 36px 0 44px; }
.taskgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; }
.taskgrid .task { padding: 4px 32px; border-left: 1px solid var(--border); }
.taskgrid .task:first-child { padding-left: 0; border-left: 0; }
.task__num { display: block; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.task__title { font-size: 24px; margin-bottom: 10px; }
.task__body { font-size: 16px; color: var(--muted); margin-bottom: 12px; }

/* --- Pillars --- */

.home-pillars { border-top: 2px solid var(--tapa); padding: 40px 0 48px; }
.pillargrid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.pillar:last-child { border-left: 1px solid var(--border); padding-left: 48px; }
.pillar__title { font-size: 30px; margin-bottom: 12px; }
.pillar__body { font-size: 16px; color: var(--muted); max-width: 48ch; margin-bottom: 20px; }
.pillar__links { border-top: 1px solid var(--border); }
.pillar__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; min-height: 44px;
  border-bottom: 1px solid var(--border);
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--tapa); text-decoration: none;
}
.pillar__links a::after { content: "→"; color: var(--sea); }
.pillar__links a:hover { color: var(--sea); }

/* --- Missions band --- */

.home-missions { background: var(--tapa); color: var(--on-tapa); padding: 40px 0 44px; }
.home-missions__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--clay); padding-bottom: 12px; margin-bottom: 26px; }
.home-missions__head .eyebrow { margin: 0; }
.home-missions__all {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--clay-lt); text-decoration: none;
}
.home-missions__all:hover { color: #fff; text-decoration: underline; }
.home-missions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.home-missions__item h2 { font-size: 20px; color: #fff; margin-bottom: 6px; }
.home-missions__item h2 a { color: #fff; text-decoration: none; }
.home-missions__item h2 a:hover { color: var(--clay-lt); text-decoration: underline; }
.home-missions__item { position: relative; }
.home-missions__item h2 a::after { content: ""; position: absolute; inset: 0; }
.home-missions__item p { font-size: 15px; color: var(--on-tapa); margin: 0; }

/* ==========================================================================
   Front page and story, mobile
   ========================================================================== */

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 32px; }
  .story__rail { border-left: 0; border-top: 2px solid var(--tapa); padding-left: 0; padding-top: 24px; }
  .home-top { grid-template-columns: 1fr; }
  .home-lead { padding-right: 0; border-right: 0; padding-bottom: 32px; border-bottom: 2px solid var(--tapa); }
  .home-latest { padding-left: 0; padding-top: 26px; }
  .taskgrid { grid-template-columns: 1fr; }
  .taskgrid .task { padding: 20px 0; border-left: 0; border-top: 1px solid var(--border); }
  .taskgrid .task:first-child { border-top: 0; padding-top: 8px; }
  .pillargrid { grid-template-columns: 1fr; gap: 36px; }
  .pillar:last-child { border-left: 0; padding-left: 0; border-top: 2px solid var(--tapa); padding-top: 32px; }
  .media-lead { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
  .home-lead__title { font-size: 30px; max-width: none; }
  .home-lead__excerpt { font-size: 17px; }
  .media-lead__title { font-size: 25px; }
  .filters { gap: 14px; }
  .filters__right { width: 100%; justify-content: space-between; }
  .searchbox--sm { width: 100%; }
  .rail__share { grid-template-columns: 1fr 1fr 1fr; }
  .storynav { grid-template-columns: 1fr; gap: 20px; }
  .storynav__item--next { text-align: left; }
}

/* ==========================================================================
   Section landings
   ========================================================================== */

/* The title zone closes with the 2px navy rule the design system specifies for
   a section break, so the page title reads as its own band rather than
   floating above the content with 76px of unexplained air. Every template that
   has a title now uses this block, so every page opens the same way. */
.section-head {
  /* The containing block for .ornament--head. Without this the ornament's
     absolute box resolves against the viewport and the motif paints over
     whatever sits one screen-height down the page. */
  position: relative;
  padding-top: 40px; padding-bottom: 26px;
  border-bottom: 2px solid var(--tapa);
  margin-bottom: 4px;
}
.section-head h1 { max-width: 20ch; }
.section-head .lede { max-width: 62ch; margin-bottom: 0; }

.cardsection { border-top: 2px solid var(--tapa); padding: 32px 0 40px; }
/* Two lines, a few pixels apart, at different widths. .section-head draws a
   rule inside the content column and .cardsection draws one across the whole
   window, so a page whose card section follows the head directly got both.
   The head's rule is the one that belongs to the content, so it stays. */
.section-head + .cardsection,
.section-head + .cardsection + .cardsection { border-top: 0; padding-top: 8px; }
.cardsection h2 { font-size: 26px; margin-bottom: 20px; }

.cardgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.linkcard {
  display: block; background: #fff; padding: 22px 24px;
  text-decoration: none; min-height: 44px;
}
.linkcard:hover { background: var(--tint); }
.linkcard__title {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: var(--fs-card-title); letter-spacing: -.025em; color: var(--tapa); margin-bottom: 6px;
}
.linkcard:hover .linkcard__title { color: var(--sea); }
.linkcard__desc { display: block; font-size: 15px; color: var(--muted-tint); max-width: 46ch; }

/* --- Help / emergency panels --- */

.helppanel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: var(--sand); padding: 24px 28px; margin: 32px 0 8px;
}
.helppanel__title { font-size: 20px; margin: 0 0 4px; }
.helppanel__body { margin: 0; font-size: 15px; color: var(--muted-tint); }

.emergency {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--tapa); color: var(--on-tapa);
  padding: 26px 30px; border-left: 6px solid var(--clay);
}
.emergency__title { font-size: 22px; color: #fff; margin: 0 0 6px; }
.emergency__body { margin: 0; font-size: 15px; max-width: 52ch; }
.emergency__number {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  letter-spacing: -.02em; color: #fff; text-decoration: none;
  border-bottom: 3px solid var(--clay-lt); padding-bottom: 2px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.emergency__number:hover { color: var(--clay-lt); }

/* --- Two panels side by side --- */

.twopanel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.panel { border: 1px solid var(--border); padding: 22px 24px; }
.panel__title { font-size: 19px; margin-bottom: 8px; }
.panel p { margin: 0; font-size: 15px; color: var(--muted); }

/* ==========================================================================
   Document library
   ========================================================================== */

.filters--docs { border-bottom: 2px solid var(--tapa); padding-top: 0; }

.doclist--wide li a { padding: 16px 0; align-items: center; gap: 16px; }
.doclist--wide .doclist__body { flex: 1; }
.doclist--wide .doclist__title { font-size: 17px; font-weight: 800; }
.doclist__weight {
  flex: 0 0 auto; font-size: 13px; color: var(--muted);
  letter-spacing: .04em; text-align: right;
}

/* ==========================================================================
   Advisories archive
   ========================================================================== */

.advisorylist { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.advisorycard { background: #fff; padding: 22px 24px; border-left: 4px solid transparent; }
.advisorycard--live { border-left-color: var(--clay-ink); }
.advisorycard__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.advisorycard__flag {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--sand-str); color: var(--tapa-deep); padding: 4px 8px;
}
.advisorycard__flag--off { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.advisorycard__title { font-size: var(--fs-card-title); margin: 0 0 8px; }
.advisorycard__title a { color: var(--tapa); text-decoration: none; }
.advisorycard__title a:hover { color: var(--sea); text-decoration: underline; }
.advisorycard__body { margin: 0; font-size: 16px; color: var(--muted); max-width: 68ch; }

/* ==========================================================================
   Careers
   ========================================================================== */

.vacancylist { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.vacancy {
  background: #fff; padding: 22px 24px;
  display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: start;
}
.vacancy__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vacancy__title { font-size: var(--fs-card-title); margin: 0 0 8px; }
.vacancy { position: relative; }
.vacancy__title a { color: var(--tapa); text-decoration: none; }
.vacancy__title a::after { content: ""; position: absolute; inset: 0; }
.vacancy__title a:hover { color: var(--sea); text-decoration: underline; }
.vacancy__excerpt { margin: 0; font-size: 16px; color: var(--muted); max-width: 60ch; }
.vacancy__side { text-align: right; }
.vacancy__closes-label {
  display: block; font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.vacancy__closes-date {
  display: block; font-family: var(--display); font-weight: 800; font-size: 19px;
  color: var(--tapa); letter-spacing: -.02em; margin: 4px 0 12px;
}

/* ==========================================================================
   Overseas missions
   ========================================================================== */

.missionlist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 32px; }
.mission { background: #fff; padding: 24px 26px; }
.mission__head { border-bottom: 3px solid var(--clay); padding-bottom: 12px; margin-bottom: 14px; }
.mission__title { font-size: var(--fs-card-title); margin: 0 0 4px; }
.mission__title a { color: var(--tapa); text-decoration: none; }
.mission__title a:hover { color: var(--sea); text-decoration: underline; }
.mission__jurisdiction {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.mission__details p { margin: 0 0 8px; font-size: 15px; }
.mission__hours { color: var(--muted); }

@media (max-width: 900px) {
  .cardgrid { grid-template-columns: 1fr; }
  .twopanel { grid-template-columns: 1fr; }
  .missionlist { grid-template-columns: 1fr; }
  .vacancy { grid-template-columns: 1fr; gap: 16px; }
  .vacancy__side { text-align: left; }
  .emergency { flex-direction: column; align-items: flex-start; }
  .helppanel { flex-direction: column; align-items: flex-start; }
  .section-head h1 { max-width: none; }
}


/* ==========================================================================
   Tap targets
   The Ensign rule is a 44px minimum. A card headline is a 24px line of type,
   so instead of padding the text out of shape, the headline link is stretched
   over its whole card. Any other control inside the card is lifted above it.
   ========================================================================== */

.media-row, .media-lead, .advisorycard, .vacancy { position: relative; }

.media-row__title a::after,
.media-lead__title a::after,
.advisorycard__title a::after,
.vacancy__title a::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
}

/* Real controls sit above the stretched link so they stay clickable. */
.vacancy__side .btn,
.media-row__thumb a,
.media-lead__image a { position: relative; z-index: 1; }

/* A mission card holds its own phone and email links, so the card is not
   stretched. The heading gets a real hit area instead. */
.mission__title a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.mission__head { padding-bottom: 6px; }

/* Stacked contact links in the rail each need their own hit area. */
.rail__block--tint p a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* The filter row got taller with 44px chips; tighten the gap so it does not
   read as a band of its own. */
.filters { padding-bottom: 16px; }
.filters__group { gap: 6px; }

/* A fee table with four columns cannot shrink below its content on a phone.
   Let it scroll sideways inside its own box rather than pushing the page.
   The scrollbar is styled always-visible: iOS overlay scrollbars only appear
   once a scroll has started, so without this the only sighted cue that half
   the table exists is a column cut mid-word. */
.wp-block-table, .prose figure.wp-block-table {
  overflow-x: auto;
}
.wp-block-table::-webkit-scrollbar { height: 8px; }
.wp-block-table::-webkit-scrollbar-track { background: var(--tint); }
.wp-block-table::-webkit-scrollbar-thumb { background: var(--sand-str); }
.wp-block-table table { min-width: 32rem; }
/* The scroller is focusable (see mfai_table_scrollers), so it needs to show
   focus like anything else that takes it. Without this a keyboard user would
   land on the table with nothing on screen to say so. */
.wp-block-table:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }

@media (max-width: 768px) {
  .prose table { font-size: 15px; }
  .prose th, .prose td { padding: 8px 10px; }
}

/* ==========================================================================
   Photography — the 2026 image pass
   Ensign has no gradients, so the hero uses a flat navy scrim. That keeps the
   type at AA regardless of what the photograph underneath is doing.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--tapa);
  display: flex; align-items: flex-end;
  min-height: 440px;
  overflow: hidden;
}
.hero--flat { min-height: 0; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A light flat fill, only to settle the photograph down. The type does not
   depend on it — that is the panel's job. */
.hero__scrim { position: absolute; inset: 0; background: rgba(11, 44, 74, .22); }

.hero__inner {
  position: relative; z-index: 1;
  padding-top: 56px; padding-bottom: 56px;
  width: 100%;
}

.hero__panel {
  background: var(--tapa);
  border-left: 6px solid var(--clay);
  padding: 32px 36px;
  max-width: 640px;
}
.hero--flat .hero__panel { border-left: 0; padding-left: 0; background: transparent; max-width: 720px; }

.hero__heading {
  color: #fff; font-size: 40px; line-height: 1.06; letter-spacing: -.035em;
  max-width: 20ch; margin: 0 0 12px;
}
.hero__text {
  color: var(--on-tapa-str); font-size: 18px; line-height: 1.5;
  max-width: 52ch; margin: 0;
}
.hero__credit {
  position: absolute; right: var(--gutter); bottom: 10px; z-index: 1;
  margin: 0; font-size: 12px; color: rgba(255, 255, 255, .78);
  background: rgba(7, 30, 51, .55); padding: 3px 8px;
}

/* --- Section banner --- */

.banner { margin: 0 0 8px; }
.banner img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.banner figcaption { font-size: 13px; color: var(--muted); padding-top: 10px; }

/* --- Illustrated task cards --- */

.home-tasks--illustrated .taskgrid { gap: 28px; }
.home-tasks--illustrated .task { border-left: 0; padding: 0; }
.home-tasks--illustrated .task:first-child { padding-left: 0; }
.task__image { margin-bottom: 16px; }
.task__image img {
  display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
}
.home-tasks--illustrated .task__num { color: var(--clay-ink); }

/* --- Illustrated mission cards --- */

.mission--illustrated { padding: 0; }
.mission__image img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.mission--illustrated .mission__head,
.mission--illustrated .mission__details { padding-left: 26px; padding-right: 26px; }
.mission--illustrated .mission__head { padding-top: 20px; }
.mission--illustrated .mission__details { padding-bottom: 24px; }

/* --- Our People --- */

/* Lines drawn by the cards' own borders, not by a 1px gap over a coloured
   background. The gap technique leaves the unused cells of the last row
   showing that background, so seven people in a four column grid ended with a
   grey rectangle that looked like a card which had failed to load.

   Two across, and each card lies down rather than standing up. The first
   version stacked a full height portrait above the text, four to a row: with
   no photographs yet that was about 1000px of grey placeholder before a single
   name, on a page whose whole problem was already that it was too long. A
   portrait beside the text keeps the photograph slot visible, which is the
   point of it, and gives the page back roughly 700px. */
.peoplegrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.person {
  background: #fff; display: flex; align-items: stretch;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* The portrait, and the placeholder standing in for one.

   These rules went missing when .person__* was renamed to .profile__* for the
   single profile template: the listing card uses the same names and was left
   with no styles at all, so the portrait collapsed to nothing and the division
   line fell back to plain body text. Both are restored here, scoped to the
   card so the two templates cannot collide again. */
.person__portrait {
  position: relative; background: var(--sand);
  flex: 0 0 132px; width: 132px; aspect-ratio: 600 / 760;
  align-self: flex-start; overflow: hidden;
}
.person__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person__initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800;
  font-size: 30px; letter-spacing: -.02em;
  color: var(--tapa); opacity: .30;
}
.person__division {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.profile__portrait { background: var(--sand); }
.profile__portrait img { display: block; width: 100%; aspect-ratio: 600 / 760; object-fit: cover; }
.profile__portrait-empty { display: block; width: 100%; aspect-ratio: 600 / 760; background: var(--sand); }
.person__body { padding: 18px 22px 20px; flex: 1 1 auto; min-width: 0; }
.person__name { font-size: var(--fs-card-title); margin: 0 0 4px; }
.person__role {
  margin: 0 0 6px; font-family: var(--display); font-weight: 600;
  font-size: 14px; color: var(--clay-ink); letter-spacing: -.01em;
}
.profile__division {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.person__bio { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.person__email { margin: 0; font-size: 15px; }
.person__email a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Mobile --- */

@media (max-width: 900px) {
  .mission--illustrated .mission__head,
  .mission--illustrated .mission__details { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 768px) {
  .hero { min-height: 0; display: block; }
  .hero__media { position: relative; height: 220px; }
  .hero__inner { padding-top: 0; padding-bottom: 0; }
  .hero__panel { max-width: none; padding: 24px var(--gutter); border-left: 0; border-top: 4px solid var(--clay); }
  .hero .wrap { padding-left: 0; padding-right: 0; }
  .hero__heading { font-size: 28px; max-width: none; }
  .hero__text { font-size: 16px; }
  /* Sits inside the navy panel at this width, so it needs an on-navy colour.
     --muted-white is for white surfaces only and gives 2.83:1 here. */
  .hero__credit { position: static; display: block; background: none; color: var(--on-tapa); padding: 8px var(--gutter) 0; text-align: right; }
  .banner img { aspect-ratio: 3 / 2; }
  .home-tasks--illustrated .taskgrid { gap: 24px; }
  .peoplegrid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* On the narrowest phones the portrait costs more than it gives. */
  .person__portrait { flex-basis: 96px; width: 96px; }
  .person__initials { font-size: 24px; }
}

/* ==========================================================================
   Offices
   A media release can belong to an overseas post or to head office. The chip
   is bronze-outlined rather than navy-filled, so at a glance it reads as a
   different kind of label from the category.
   ========================================================================== */

.chip--office {
  background: transparent;
  color: var(--clay-ink);
  border: 1px solid var(--clay-ink);
  text-decoration: none;
}
.chip--office:hover { background: var(--clay-ink); color: #fff; }

.media-row__office {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--clay-ink); margin-bottom: 4px;
}

.filters--offices {
  border-bottom: 1px solid var(--border);
  padding-top: 14px; padding-bottom: 14px;
}

.mission__news { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.mission__news .arrow-link { font-size: 12px; }

/* --- A single mission --- */

.missiondetail {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px;
  align-items: start;
}
.missiondetail__contact {
  border-left: 1px solid var(--border); padding-left: 32px;
}
.missiondetail__contact p { font-size: 16px; margin: 0 0 10px; }
.missiondetail__contact .muted { color: var(--muted); }
.missiondetail__emergency {
  background: var(--tapa); color: var(--on-tapa);
  border-left: 6px solid var(--clay);
  padding: 20px 22px; margin-top: 28px;
}
.missiondetail__emergency .rail__label { color: #fff; border-bottom-color: var(--clay-lt); }
.missiondetail__emergency p { font-size: 15px; margin: 0 0 8px; }
.missiondetail__number {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  color: #fff; text-decoration: none;
  border-bottom: 2px solid var(--clay-lt);
  display: inline-flex; align-items: center; min-height: 44px;
}
.missiondetail__number:hover { color: var(--clay-lt); }

@media (max-width: 900px) {
  .missiondetail { grid-template-columns: 1fr; gap: 28px; }
  .missiondetail__contact {
    border-left: 0; padding-left: 0;
    border-top: 2px solid var(--tapa); padding-top: 24px;
  }
}

/* An administrator-only hint, shown where a switched-off feature would be. */
.adminhint {
  border: 1px dashed var(--clay);
  background: var(--warm);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--muted-tint);
}
.adminhint__label {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay-ink); margin-bottom: 8px;
}
.adminhint p { margin: 0 0 8px; }
.adminhint p:last-child { margin-bottom: 0; }
.adminhint strong { color: var(--tapa); }


/* ==========================================================================
   Search
   --------------------------------------------------------------------------
   The rail exists to answer "where is this thing" before anybody clicks. A
   count of six against Documents tells somebody the answer is a form.

   Sizes differ from the mockup in two places, deliberately: badges are 12px
   rather than 10px, and every rail row and chip clears 44px. WORDPRESS-BUILD
   sets those floors and it beats the mockups.
   ========================================================================== */

.searchhead {
  padding-top: 28px; padding-bottom: 22px;
  border-bottom: 2px solid var(--tapa);
}
.searchhead h1 { margin: 0 0 18px; font-size: 42px; letter-spacing: -.04em; line-height: 1.02; }

.searchbox--lg { width: 620px; max-width: 100%; }
.searchbox--lg input { padding: 13px 16px; font-size: 18px; }
.searchbox--lg button {
  width: auto; padding: 0 22px; min-height: 48px;
  font-family: var(--display); font-weight: 800; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
}

.searchhead__count { margin: 14px 0 0; font-size: 16px; color: var(--muted); }
.searchhead__count strong { color: var(--tapa); font-weight: 600; }
.searchhead__clear {
  margin-left: 10px; font-family: var(--display); font-weight: 800;
  font-size: 13px; color: var(--sea);
}

/* The help panel is a third child rather than part of the rail, so that on a
   narrow screen it can drop below the results instead of pushing them down.
   It is a fallback, not the path most people want. */
.searchbody {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "rail results" "help results";
  /* Row one takes the rail's own height; row two absorbs whatever the results
     column is taller by, so the help panel sits directly under the filters
     instead of floating halfway down the page. */
  grid-template-rows: auto 1fr;
  align-items: start; gap: 0;
  padding-top: 0; padding-bottom: 56px;
}

/* --- The type rail --- */

.searchrail   { grid-area: rail;    padding: 28px 28px 8px 0; }
.searchhelp   { grid-area: help;    margin: 16px 28px 40px 0; background: var(--sand); padding: 16px; }
.searchresults{ grid-area: results; }

.searchhelp__title {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  color: var(--tapa); margin-bottom: 8px;
}
.searchhelp p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--muted-tint); }
.searchrail__list { display: block; margin-top: 4px; }
.searchrail__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; box-sizing: border-box;
  padding: 11px 4px 11px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  text-decoration: none; color: var(--tapa); font-size: 15px;
}
.searchrail__item:hover { background: var(--tint); }
.searchrail__item.is-on {
  border-left-color: var(--clay-ink);
  font-family: var(--display); font-weight: 800;
}
.searchrail__count { color: var(--muted); font-weight: 400; font-size: 14px; }

/* --- Results --- */

.searchresults {
  padding: 28px 0 40px 32px; min-width: 0;
  border-left: 1px solid var(--border);
}

.bestmatch {
  background: var(--warm); border-left: 4px solid var(--clay-ink);
  padding: 16px 20px; margin-bottom: 24px;
}
.bestmatch__label {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tapa); margin-bottom: 6px;
}
.bestmatch__title {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 24px; letter-spacing: -.03em; line-height: 1.15;
  color: var(--tapa); text-decoration: none; margin-bottom: 4px;
}
.bestmatch__title:hover { text-decoration: underline; }
/* The whole panel is the target. Nothing else in it is interactive, so the
   stretched link cannot swallow a sibling control. */
.bestmatch { position: relative; }
.bestmatch__title::after { content: ""; position: absolute; inset: 0; }
.bestmatch__body { display: block; font-size: 15px; line-height: 1.55; color: var(--muted-tint); }

.searchresult {
  display: block; padding: 18px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.searchresult:hover .searchresult__title { text-decoration: underline; }

.searchresult__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 6px;
}
.searchresult__badge {
  background: var(--tapa); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px;
}
.searchresult__badge--file { background: var(--sand-str); color: var(--tapa-deep); }
.searchresult__ctx { font-size: 13px; color: var(--muted); }

.searchresult__title {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: var(--fs-card-title); letter-spacing: -.025em; line-height: 1.2;
  color: var(--tapa); margin-bottom: 5px;
}
.searchresult__excerpt {
  display: block; font-size: 16px; line-height: 1.55; color: var(--ink);
  max-width: 68ch;
}

/* Relevanssi's highlight element is a setting, so every plausible one is
   normalised to the same marker rather than depending on how it is set. */
.searchresult__excerpt mark,
.searchresult__excerpt strong,
.searchresult__excerpt b,
.searchresult__excerpt .relevanssi-query-term,
.searchresult__title mark,
.searchresult__title strong,
.bestmatch__body mark,
.bestmatch__body strong,
.bestmatch__title mark,
.bestmatch__title strong {
  background: var(--marker); color: var(--ink);
  font-weight: inherit; font-style: inherit; padding: 0 2px;
}
.searchresult__title mark,
.searchresult__title strong,
.bestmatch__title mark,
.bestmatch__title strong { color: var(--tapa); }

/* --- Nothing found --- */

.noresults { border: 1px solid var(--border); padding: 24px; }
.noresults__title {
  margin: 0 0 8px; font-size: 24px; letter-spacing: -.03em; color: var(--tapa);
}
.noresults__suggest {
  margin: 0 0 16px; font-size: 16px; line-height: 1.6;
  color: var(--ink); max-width: 60ch;
}
.noresults__suggest--tight { margin-bottom: 4px; }
/* The suggestion is the whole point of this screen when it appears, so it is a
   target in its own right rather than one word inside a sentence. */
.noresults__didyoumean {
  display: inline-flex; align-items: center; min-height: 44px;
  box-sizing: border-box; padding: 6px 0;
  font-family: var(--display); font-weight: 800; font-size: 21px;
  letter-spacing: -.02em; color: var(--sea);
  margin: -6px 0 18px;
}
.noresults__didyoumean:hover { color: var(--sea-deep); }

.noresults__label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.noresults__links { display: flex; flex-wrap: wrap; gap: 8px; }
.noresults__links a {
  display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--sand-str); color: var(--tapa); text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  padding: 9px 14px;
}
.noresults__links a:hover { background: var(--tapa); color: #fff; border-color: var(--tapa); }

.adminhint--search { margin-top: 0; }

@media (max-width: 900px) {
  /* The rail stops being a rail and becomes a row of chips above the results,
     because a vertical list here pushes every result below the fold. */
  .searchbody { display: flex; flex-direction: column; padding-bottom: 40px; }
  .searchrail   { order: 1; padding: 24px 0 0; }
  .searchresults{ order: 2; border-left: 0; }
  .searchhelp   { order: 3; margin: 28px 0 0; }
  .searchrail__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .searchrail__item {
    border: 1px solid var(--border); border-left: 1px solid var(--border);
    padding: 10px 14px; gap: 8px;
  }
  .searchrail__item.is-on {
    background: var(--tapa); color: #fff; border-color: var(--tapa);
  }
  .searchrail__item.is-on:hover { background: var(--tapa); }
  .searchrail__item.is-on .searchrail__count { color: var(--on-tapa-str); }
  .searchresults { padding: 24px 0 0; }
}

@media (max-width: 768px) {
  .searchhead h1 { font-size: 30px; }
  .searchbox--lg input { font-size: 16px; }
  .searchresult__title { font-size: 19px; }
  .bestmatch__title { font-size: 21px; }
}


/* Mission cards hold their own tel: and mailto: links, so the card is NOT
   stretched. The contact lines are padded instead, so each is its own target.
   The 8px rhythm between lines is set once, on .mission__details p above. */
.mission__details a {
  display: inline-flex; align-items: center; min-height: 44px;
  box-sizing: border-box; padding: 2px 0;
}


/* ==========================================================================
   Editor blocks — Button
   The theme does not enqueue wp-block-library, so nothing in the stylesheet
   ever claimed the Button block and an editor-inserted call to action came
   out as an underlined line of body copy. Online services is four of those,
   and they are the whole point of the page. What follows is .btn's metrics,
   colours and states wearing Gutenberg's class names, so a button placed in
   the editor and a button printed by a template are the same object.
   ========================================================================== */

.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Gutenberg writes the chosen justification onto the container, and moves it
   from the main axis to the cross axis once the stack is vertical. */
.wp-block-buttons.is-nowrap { flex-wrap: nowrap; }
.wp-block-buttons.is-vertical { flex-direction: column; align-items: flex-start; }
.wp-block-buttons.is-content-justification-left { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
.wp-block-buttons.is-vertical.is-content-justification-left { align-items: flex-start; }
.wp-block-buttons.is-vertical.is-content-justification-center { align-items: center; }
.wp-block-buttons.is-vertical.is-content-justification-right { align-items: flex-end; }

/* The wrapper is only a flex item. It may not out-grow the reading column, or
   a long label pushes the page sideways on a phone. */
.wp-block-button { display: inline-flex; margin: 0; max-width: 100%; }

.wp-block-button__link,
.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 18px;
  background: var(--tapa); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
  border: 0; cursor: pointer;
}
.wp-block-button__link:hover,
.wp-element-button:hover { background: var(--tapa-deep); color: #fff; text-decoration: none; }

/* The outline variant is .btn--ghost. Its 2px border sits inside the 44px
   because everything in this file is border-box. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background: transparent; color: var(--tapa); border: 2px solid var(--tapa);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover { background: var(--tapa); color: #fff; }

/* The one warm button. --gold is a fill and never a text colour: white on it
   is 3.55:1 and fails, --bronze-ink is 4.89:1 and passes. The has-* selectors
   are the classes WordPress emits when a warm swatch is picked from the
   colour panel, so that route lands on the same ink rather than on white. */
.wp-block-button.is-style-warm > .wp-block-button__link,
.wp-block-button__link.is-style-warm {
  background: var(--sand-str); color: var(--tapa-deep);
}
.wp-block-button.is-style-warm > .wp-block-button__link:hover,
.wp-block-button__link.is-style-warm:hover { background: var(--clay-ink); color: #fff; }
.wp-block-button__link.has-gold-background-color,
.wp-block-button__link.has-warm-background-color,
.wp-block-button__link.has-bronze-lt-background-color { color: var(--tapa-deep); }

/* Restated rather than left to the global rule: an editor can give a button
   its own fill, and a ring drawn tight against a dark fill is invisible. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }


/* ==========================================================================
   Editor blocks — figures
   The browser's own sheet gives every figure `margin: 1em 40px`, which is why
   an editor-inserted table started 40px inside the reading column while every
   other prose child started at its edge — and why on a phone it was 240px of
   a 320px column, so the fee table needed 272px of sideways scrolling instead
   of 192px. Only the editor's figures are reset. The theme's own —
   .home-lead__image, .story__image, .banner — set their own margins and all
   sit outside .prose, so none of them is touched.
   ========================================================================== */

.prose figure,
figure.wp-block-table,
figure.wp-block-image,
figure.wp-block-embed,
figure.wp-block-video,
figure.wp-block-audio,
figure.wp-block-gallery,
figure.wp-block-pullquote,
figure.wp-block-media-text { margin-left: 0; margin-right: 0; }


/* ==========================================================================
   Thin tap targets, the AAA pass
   Everything below already clears AA through the 2.5.8 spacing exception, so
   these rules only grow the hit box. Vertical padding on an inline link never
   changes a line box, and where the link is a flex item a matching negative
   margin cancels it, so no line of type moves. Breadcrumbs are deliberately
   left out: the crumbs sit close enough that a 44px box would start catching
   taps meant for the crumb above.
   ========================================================================== */

.govbar a,
.site-footer__legal a { padding: 12px 0; margin: -12px 0; }

/* Padding here has to be measured against the row pitch it sits in, and the
   pitch is not the same everywhere.

   A contact TABLE gives each number its own row 41px apart, so a 10px pad
   makes a comfortable 42px target with room to spare. A LIST does not: list
   items sit about 32px apart, and the same 10px produced two 42px boxes that
   overlapped by 10px, so the bottom of the email link was firing the phone
   link underneath it. A target that hits the wrong destination is worse than
   a target that is slightly small.

   So the generous version is scoped to table cells, and everything else gets
   4px, which lifts a 21px link to 29px inside a 32px pitch and still clears
   its neighbour. */
.prose a[href^="tel:"],
.prose a[href^="mailto:"] { padding: 4px 0; }
.prose td a[href^="tel:"],
.prose td a[href^="mailto:"] { padding: 10px 0; }

/* The same idea on a mission's contact block, where the lines are stacked
   paragraphs 35px apart. It stops short of 44px rather than overlap. The
   child combinator keeps it off the emergency number nested below, which is
   an inline-flex control with a 44px rule of its own: padding there is inside
   the line box and would push the whole panel down. */
.missiondetail__contact > p a { padding: 6px 0; }

/* ==========================================================================
   One member of the senior team
   A profile borrows the reading column and rail from a media story, because
   the shape of the problem is the same: one column of prose with a small
   block of facts beside it. It does not borrow the story's furniture, since
   a person is not an announcement and has no publication date, no share
   panel and no related coverage.
   ========================================================================== */

.profile {
  display: grid; grid-template-columns: minmax(0, 68ch) 300px; gap: 48px;
  justify-content: start; align-items: start;
}
.profile__main { max-width: 68ch; }
.profile__rail { border-left: 1px solid var(--border); padding-left: 32px; }

/* Portraits are shot 4:5. A fixed width rather than a full-bleed image, so a
   head-and-shoulders photograph does not dominate the page it introduces. */
.profile__portrait { margin: 0 0 28px; max-width: 300px; }
.profile__portrait img { display: block; width: 100%; height: auto; }

/* Scoped to the tint block on purpose. Both of these sit inside it, and
   .rail__block--tint p already sets a colour and a size at higher specificity,
   so a bare class here would have been silently overruled. */
.rail__block--tint .profile__division {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: var(--tapa); margin: 0 0 8px;
}
/* --muted-tint, not --muted-white: this sits on the mist-tinted rail block. */
.rail__block--tint .profile__fallback {
  font-size: 14px; line-height: 1.5; color: var(--muted-tint); margin-top: 14px;
}
.profile__nobio { color: var(--muted); font-size: 16px; }

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; gap: 32px; }
  .profile__rail { border-left: 0; border-top: 2px solid var(--tapa); padding-left: 0; padding-top: 24px; }
  .profile__portrait { max-width: 220px; }
}

/* A search result title is a heading now, so screen reader users can move
   between results. The class already carries every visual property, so this
   only has to undo what being an h2 brings with it. */
.bestmatch__h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }


/* ==========================================================================
   Page layouts

   One column of reading inside a full width container leaves roughly 690px of
   a 1360px page empty. The measure was right and the layout around it was not.
   Both templates below put something useful in that space, and both stack back
   to a single column on a phone, where reading order is the only order there is.
   ========================================================================== */

/* ---- A document: reading column plus a rail ---- */

.pagebody { display: block; }
.pagebody__main { max-width: 68ch; }
/* Stacked, the rail sits under the reading column and has to share its
   measure. Left to fill the container it ran 187px wider than the text above
   it, which reads as a different page rather than the same one. */
.pagebody__rail { margin-top: 40px; max-width: 68ch; }

@media (min-width: 1024px) {
  /* Left aligned. The reading column shares the left edge of the breadcrumb,
     H1 and lede above it, so the eye follows one clean margin down the page.
     Centring the pair (an earlier choice) pushed the body about 105px right of
     the H1, which read as a broken indent with a dead gutter on the left, not
     as deliberate space. The leftover width becomes a right margin, the way
     .profile already handles it. */
  .pagebody {
    display: grid;
    grid-template-columns: minmax(0, 68ch) 300px;
    gap: 48px;
    justify-content: start;
    align-items: start;
  }
  /* Without a rail the column may run wider, so the cap on .pagebody__main
     has to lift with it or the track is 74ch holding 68ch of text and the
     whole thing sits 25px left of the centre it claims to be in. */
  .pagebody--solo { grid-template-columns: minmax(0, 74ch); }
  .pagebody--solo .pagebody__main { max-width: none; }
  .pagebody__rail {
    margin-top: 0;
    position: sticky;
    top: 28px;
    border-left: 1px solid var(--border);
    padding-left: 32px;
  }
}

/* The contents list. Numbered, because on a fee schedule or a policy page the
   order is part of the information. */
.contents__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.contents__list li { counter-increment: toc; }
.contents__list a {
  display: block; position: relative;
  padding: 8px 0 8px 30px;
  font-size: 14px; line-height: 1.35;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
/* 12px, not 11. Nothing on this site is allowed below 12px, and the
   Accessibility page says so in as many words. */
.contents__list a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 9px;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  color: var(--clay-ink); letter-spacing: .04em;
}
.contents__list a:hover { color: var(--sea); text-decoration: underline; }
.contents__list li:last-child a { border-bottom: 0; }

.railhelp { margin-top: 30px; background: var(--sand); padding: 18px 20px; }
.railhelp p { font-size: 14px; line-height: 1.5; color: var(--muted-tint); margin: 0 0 10px; }

/* Jumping to a heading must not tuck it under the top of the window. */
.prose h2 { scroll-margin-top: 24px; }

/* ---- A hub: orientation beside the routes ---- */

.hubbody { display: block; }
.hubbody__intro .prose { max-width: 62ch; }
.hubbody__routes { margin-top: 40px; }

@media (min-width: 1080px) {
  .hubbody {
    display: grid;
    grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .hubbody--solo { grid-template-columns: minmax(0, 74ch); }
  .hubbody__intro { position: sticky; top: 28px; }
  .hubbody__intro .prose { max-width: none; }
  .hubbody__routes { margin-top: 0; }
}

.routegroup + .routegroup { margin-top: 34px; }
.routegroup__label {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay-ink); margin: 0 0 12px;
  padding-bottom: 9px; border-bottom: 2px solid var(--tapa);
}

/* Two across where there is room, one where there is not. The cards carry the
   same 1px grid as .cardgrid elsewhere, so a hub and a card section still read
   as the same site. */
.routegrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 620px) { .routegrid { grid-template-columns: 1fr; } }
.routegrid .linkcard { background: #fff; }
.routegrid .linkcard:hover { background: var(--tint); }
/* A lone or trailing odd card leaves the other grid cell empty, and the 1px
   grid background paints that empty cell as a solid grey block. Let it span
   both columns so the grid never shows a hole. */
.routegrid .linkcard:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ==========================================================================
   Two-world atrium and navigation
   The welcome landing, the per-world switcher bar and short nav, and the world
   home task cards. Immigration wears the brand brown, Foreign Affairs the sea.
   ========================================================================== */

/* --- Welcome --- */
/* The question is a band, and the doors below it are the answer.
   It was centred text on the same white as everything under it, so the page
   opened with no arrival: the eye met a headline and two cards as one
   undifferentiated block. On the quiet surface and closed with the 2px rule
   every band on this site closes with, the atrium now reads in two beats —
   what do you need, then choose. */
.welcome {
  text-align: center;
  background: var(--tint);
  border-bottom: 2px solid var(--tapa);
  padding: 54px 0 46px;
  margin-bottom: 30px;
}
.welcome__kia { font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-ink); margin: 0 0 12px; }
.welcome__title { font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 4.6vw, 46px); line-height: 1.06;
  letter-spacing: -0.025em; color: var(--tapa); margin: 0 0 14px; text-wrap: balance; }
.welcome__lede { font-size: 20px; line-height: 1.5; color: var(--muted-tint); max-width: 60ch; margin: 0 auto; }

/* --- The two doors --- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 6px 0 10px; }
.door { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); }
.door__head { padding: 26px 28px 22px; color: #fff; }
.door--imm .door__head { background: var(--tapa); }
.door--fa  .door__head { background: var(--sea-deep); }
.door__kicker { font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin: 0 0 10px; }
.door__title { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05;
  letter-spacing: -0.02em; margin: 0; color: #fff; }
.door__body { padding: 14px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.door__lead { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 16px 0 8px; }
.tasks { list-style: none; margin: 0 0 20px; padding: 0; }
.task { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 15px 0;
  border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: 18px; font-weight: 600; }
.task:hover, .task:focus-visible { background: var(--warm); }
.task .arw { margin-left: auto; color: var(--tapa); flex: 0 0 auto; }
.door--fa .task .arw { color: var(--sea); }
.door__enter { margin-top: auto; }
/* A door is one choice, so the whole card answers rather than each row on its
   own: the border takes the world's own colour on hover and on keyboard focus
   anywhere inside it. Colour only — no lift, no shadow, nothing that would
   make a government page feel like a marketing card. */
.door { transition: border-color .12s linear; }
.door--imm:hover, .door--imm:focus-within { border-color: var(--tapa); }
.door--fa:hover,  .door--fa:focus-within  { border-color: var(--sea-deep); }
/* The arrow moves the way the row is about to. Covered by the global
   prefers-reduced-motion guard at the top of this file. */
.task .arw { transition: transform .12s ease-out; }
.task:hover .arw, .task:focus-visible .arw { transform: translateX(4px); }
.door__btn { width: 100%; justify-content: center; color: #fff; min-height: 56px;
  font-size: 17px; text-transform: none; letter-spacing: 0; }
.door--imm .door__btn { background: var(--tapa); }
.door--imm .door__btn:hover { background: var(--tapa-deep); }
.door--fa  .door__btn { background: var(--sea-deep); }
.door--fa  .door__btn:hover { background: var(--sea); }
.atrium-help { text-align: center; font-size: 18px; color: var(--muted-tint); padding: 26px 0 8px; }
.atrium-help a { font-weight: 600; }

/* --- Atrium: the "About the Ministry" closing band --- */
/* Quiet by design: it sits under the doors and must not compete with them, so
   it is a plain measure of text beside a short link list. No fill, no colour. */
.ministry { border-top: 2px solid var(--tapa); margin-top: 8px; padding: 34px 0 42px; }
.ministry__in { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.ministry__blurb { font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 58ch; margin: 6px 0 0; }
.ministry__links { display: flex; flex-direction: column; }
.ministry__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; min-height: 44px;
  border-bottom: 1px solid var(--border);
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--tapa); text-decoration: none;
}
.ministry__links a:first-child { border-top: 1px solid var(--border); }
.ministry__links a::after { content: "\2192"; color: var(--sea); }
.ministry__links a:hover { color: var(--sea); }

/* About links tucked under the footer identity column. */
.site-footer__about { margin-top: 16px; }

@media (max-width: 900px) {
  .ministry__in { grid-template-columns: 1fr; gap: 24px; }
}

/* --- The world switcher bar --- */
.worldbar { color: #fff; }
.worldbar--imm { background: var(--tapa); }
.worldbar--fa  { background: var(--sea-deep); }
.worldbar__in { display: flex; align-items: center; gap: 18px; min-height: 46px; flex-wrap: wrap; font-size: 15px; }
.worldbar__here { font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; }
.worldbar__links { margin-left: auto; display: flex; gap: 20px; }
.worldbar a { color: #fff; text-decoration: none; padding: 9px 0; display: inline-flex; align-items: center; }
.worldbar a:hover { text-decoration: underline; }

/* --- The per-world (and neutral) short nav --- */
.worldnav { background: #fff; border-bottom: 3px solid var(--tapa); }
.worldnav--fa { border-bottom-color: var(--sea-deep); }
.worldnav--neutral { border-bottom-color: var(--clay); }
.worldnav__bar { display: flex; align-items: center; flex-wrap: wrap; }
.worldnav__toggle {
  display: none; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--tapa); background: transparent; border: 0; cursor: pointer;
  padding: 12px 0; min-height: 44px;
}
.worldnav__in { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.worldnav a { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--tapa);
  text-decoration: none; padding: 18px 18px; border-bottom: 4px solid transparent; margin-bottom: -3px; }
.worldnav a:hover { background: var(--warm); }
/* The first tab shares the chrome column's left edge (breadcrumb, brand) rather
   than sitting a tab's padding in from it. */
.worldnav a:first-child { padding-left: 0; }
.worldnav a[aria-current] { border-bottom-color: var(--clay-ink); color: var(--clay-ink); }
.worldnav--fa a { color: var(--sea-deep); }
.worldnav--fa a[aria-current] { border-bottom-color: var(--sea); color: var(--sea); }

/* The tabs collapse behind the Menu button and expand into a vertical list,
   so seven destinations never wrap into a ragged block. 1120, not 780: the
   seven Immigration tabs at this type size need ~1081px for one row plus a
   classic scrollbar's width, so the whole iPad range wrapped into exactly
   the ragged block this collapse exists to prevent. */
@media (max-width: 1120px) {
  .worldnav__toggle { display: inline-flex; }
  .worldnav__in { display: none; flex-direction: column; align-items: stretch; flex-basis: 100%; }
  .worldnav.is-open .worldnav__in { display: flex; }
  .worldnav a { padding: 13px 4px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
  .worldnav a:first-child { padding-left: 4px; }
  .worldnav a:hover { background: transparent; }
}

/* --- World home task cards --- */
.wsection__label { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-tint); margin: 0 0 16px; }
.wtasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 26px; }
.wcard { background: #fff; border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; }
.wcard__kicker { font-family: var(--display); font-weight: 800; font-size: 12px; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-ink);
  min-height: 2.6em; margin: 0 0 12px; }
.wcard__title { font-family: var(--display); font-weight: 800; font-size: var(--fs-card-title); line-height: 1.15; color: var(--tapa); margin: 0 0 8px; }
.wcard__body { font-size: 16px; color: var(--muted-tint); margin: 0 0 20px; flex: 1; }
.wcard .btn { width: 100%; justify-content: center; text-transform: none; font-size: 16px; letter-spacing: 0; min-height: 52px; }
.immworld__intro { margin-top: 8px; }

@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; }
  .wtasks { grid-template-columns: 1fr; }
  .welcome { padding: 38px 0 32px; margin-bottom: 24px; }
  .welcome__lede { font-size: 18px; }
}

/* ==========================================================================
   Org chart — /about-us/our-people/

   One unbroken vertical rule, the spine, runs down the left edge of the chart
   at the same x as the H1; each level of the Ministry hangs off it on a short
   horizontal tick; and the spine terminates by running into a solid --tapa
   band holding the overseas posts.

   Not a centred tree with elbow connectors, for three reasons. The body column
   left-aligns to the H1 on this site and a centred tree cannot. A forty-four
   person ministry is not a machine, and a symmetric branching diagram implies
   a scale MFAI does not have. And a centred tree's geometry depends on child
   counts, whereas the chart is data driven from wp-admin and the counts will
   change: a left-anchored spine is invariant, one person or twenty.

   Every device carries a fact rather than decorating one. The continuous rule
   is the line of accountability. The --clay rule on the ministerial strip says
   political direction is a different kind of authority, so the spine changes
   colour exactly where the Ministry begins. Each level's label closes on a 2px
   rule that runs the full width of the level, and every person on that level
   hangs off that rule on a connector of their own.

   That last part was drawn once per LEVEL in the first build, on the reasoning
   that SOSI defines tiers and not individual reporting lines. The reasoning
   was about the data and the problem was on the screen: one tick and four
   identical cards beneath it is a list, and it read as one. Nothing about who
   reports to whom is being claimed by a connector — what it says is that this
   person is on this level, which is exactly what the data supports.

   Node width descends with span of control. The dark band is the site's
   existing treatment of "overseas" (.home-missions), and it gives the spine a
   terminus: a rule that stops in mid air looks unfinished, a rule that runs
   into a solid block has landed. Where that level is empty there is no block
   to land in, so the last level draws a foot instead.

   Every connector is a border or a ::before. No SVG, no images, no canvas.

   TWO THINGS THAT WILL BREAK THIS IF THEY ARE CHANGED.
   1. The gap between tiers is padding-top on .orgchart__tier + .orgchart__tier.
      A MARGIN HAS NO BORDER and would cut the spine into segments. The +
      form also means the last tier has no trailing space, so the spine never
      dangles past the final node.
   2. Every border lives on .orgchart__node. Nothing draws a border on a grid
      CONTAINER and nothing uses gap over a coloured background, so an
      arbitrary person count can never leave a grey ghost cell — the defect
      this pass removed from .missionlist, .cardgrid and .routegrid. A short
      last band widens its cards to fill the row for the same reason.
   ========================================================================== */

/* Two component scoped customs, deliberately NOT in :root.

   Every spine measurement below derives from --orgchart-spine — the tier
   padding, the tick offset, the tick width, the band's own padding — so the
   gutter changes in one place and the breakpoints only restate this one value.

   --orgchart-drop is the length of the connector between a level's rule and
   the cards hanging off it, and it is also the gap between them: the label's
   margin-bottom is set from it, so the connector always spans the distance
   exactly and can never end short of either end. */
.orgchart {
  --orgchart-spine: 24px;
  --orgchart-drop: 18px;
  border-top: 2px solid var(--tapa);
  padding: var(--band-tight) 0 var(--band);
}
/* The chart was specified without a top rule, on the premise that it always
   follows .section-head and can use the rule that block already draws. In the
   template it does not: page-our-people.php puts a .section of body copy
   between them, so the chart opened with nothing but air where every other
   band on the site opens on a 2px --tapa rule — including "Other staff",
   immediately below it. It stands the rule down only where the premise is
   actually true, which is a page with no body copy and no banner, and that is
   the guard .section-head + .cardsection already takes for the same collision. */
.section-head + .wrap > .orgchart { border-top: 0; padding-top: 8px; }

.orgchart__head { margin-bottom: 26px; }
/* The chart is a direct child of .wrap, never of .cardsection: .cardsection h2
   is 0-1-1 and would beat this class no matter the source order. Every
   property the global h1-h6 rule sets is restated here for the same reason the
   .bestmatch__h comment gives — the class carries the appearance, the element
   only carries the outline level. */
.orgchart__title {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 800;
  font-size: 25px; letter-spacing: -.03em; line-height: 1.1;
  color: var(--tapa);
}
.orgchart__note {
  margin: 0;
  font-family: var(--sans); font-weight: 400; font-size: 17px;
  line-height: 1.6; color: var(--ink); max-width: 62ch;
}

/* The Minister strip. Deliberately not a node: no portrait, no tick, and its
   segment of the spine is --clay rather than --tapa, because the authority
   above the Secretary is a different kind of authority. It names the OFFICE,
   never a person, so a reshuffle cannot make the chart wrong. */
.orgchart__ministerial {
  background: var(--tint);
  border-left: 2px solid var(--clay);
  padding: 14px 0 16px var(--orgchart-spine);
  margin-bottom: 0;
}
/* --muted-tint, not --muted: this label sits on a tinted surface. */
.orgchart__ministerial-label {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.6;
  color: var(--muted-tint);
}
.orgchart__ministerial-name {
  margin: 0;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; line-height: 1.25; color: var(--tapa);
}

/* --- The spine --- */

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

/* Consecutive tiers abut with zero margin, so their left borders form one
   continuous line with no positioning, no height calculation and no script.
   position: relative is for the foot below and is safe here: the stretched
   link resolves against .orgchart__node, which is a nearer positioned
   ancestor, so the tier cannot take that job off it. */
.orgchart__tier {
  position: relative;
  border-left: 2px solid var(--tapa);
  padding: 0 0 0 var(--orgchart-spine);
}
.orgchart__tier + .orgchart__tier { padding-top: 28px; }

/* The foot. The spine ends by running into the overseas band, and where that
   level is empty — one unpublished record does it — it had nothing to run into
   and stopped 2px past the last card, in mid air. The last level draws a
   terminus in that case. Absolute against the tier's padding box, whose left
   edge is the inner face of the spine, so left: 0 needs no arithmetic. */
.orgchart__tier:last-child:not(.orgchart__tier--overseas)::after {
  content: ""; position: absolute;
  left: 0; bottom: 0;
  width: 14px; height: 2px;
  background: var(--tapa);
}

/* --- A tier's bracket: spine, tick, label, rule --- */

/* margin-bottom is the connector's length, not a spacing choice: the drop from
   this rule into each card below is exactly --orgchart-drop tall, so the two
   have to be the same number or the connector ends in air. */
.orgchart__tier-label {
  position: relative;
  margin: 0 0 var(--orgchart-drop);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--tapa);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.6;
  color: var(--clay-ink);
}
/* left equals the negative of the tier's padding, so the tick's left edge
   lands exactly on the inner face of the 2px spine and butt-joins it. The
   width stops 14px short of the label so it reads as a drawn connector rather
   than an underline running into the word. top: 9px centres it on the first
   line box — 12px of type in a 1.6 line height is a 19.2px box. */
.orgchart__tier-label::before {
  content: ""; position: absolute;
  left: calc(var(--orgchart-spine) * -1);
  top: 9px;
  width: calc(var(--orgchart-spine) - 14px);
  height: 2px;
  background: var(--tapa);
}

/* --- Hanging a level off its bracket ---

   The connector each person gets. Without it the label's rule sits above a set
   of cards that merely begin below it, and four cards under one tick is a card
   grid with a heading — which is what the first build of this chart was.

   Drawn by .orgchart__node and not by .orgchart__item, because the item must
   not become a positioning context (see the note on it below) and the node
   already is one. The child combinator is what keeps it off a nested report,
   which hangs off its own parent card and draws its own elbow.

   In one column a drop is the wrong mark. Every card sits directly under the
   one above it, so a vertical line between two of them would read as one
   reporting to the other. At this width each card takes a tick straight off
   the spine instead — the same connector .orgchart__sub-item draws, saying the
   true thing: these all hang off the same line. The extra pixel is the node's
   own 1px border: the tick is positioned against the padding box, so without
   it the mark would start 1px clear of the spine and stop 1px short of the
   card, missing both ends of what it connects. */
.orgchart__item > .orgchart__node::before {
  content: ""; position: absolute;
  left: calc((var(--orgchart-spine) + 1px) * -1);
  top: 26px;
  width: calc(var(--orgchart-spine) + 1px); height: 2px;
  background: var(--tapa);
}

/* --- The node grid --- */

.orgchart__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
/* Not position: relative. The stretched link's inset: 0 has to resolve against
   .orgchart__node; if the item became a positioning context the overlay would
   cover any nested sub-list and swallow the link on the card inside it. */
.orgchart__item { display: flex; flex-direction: column; min-width: 0; }
/* Peers in a row are the same height, which is what makes the row read as a
   level rather than as a set of cards. */
.orgchart__item > .orgchart__node { flex: 1 1 auto; }
/* FALLBACK ONLY, for a browser without subgrid, and it is a compromise. An item
   carrying a nested report is a node plus that report tall and the grid
   stretches its neighbours to match; with the node still growing to fill that,
   a peer rendered 326px against the parent's 164px. Giving the growth up costs
   equal heights but keeps the cards within a line of each other, which is the
   better of the two failures. Nothing on the chart is nested today — the
   :has() guard below means both rules simply never match — but the nesting is
   data driven off the Reports to field, so an editor can produce this shape
   from wp-admin at any time. */
.orgchart__row:has(.orgchart__sub) > .orgchart__item > .orgchart__node { flex: 0 0 auto; }

/* The fix the row above stands in for. Node and report take one track each of
   the ROW's grid rather than of the item's own box, so every node on the level
   resolves against the same track and ends on the same line, and the reports
   hang below in a track of their own. Nothing shorter does this: a lone flex
   item stretches to its container and the container is as tall as the tallest
   item in its grid row, so a report's height always reached the card beside it
   one way or the other. Dormant while nothing is nested, and kept for the same
   reason as the fallback above: the shape comes back the moment somebody fills
   in Reports to. */
@supports (grid-template-rows: subgrid) {
  .orgchart__row:has(.orgchart__sub) { grid-template-rows: auto auto; }
  /* minmax(0, 1fr) and not the implicit auto column that comes free with
     display: grid. An auto track takes its max-content width first, and the
     mission link on a head of post is a long unbreakable phrase, so the card
     rendered 291px inside a 287px cell and hung 4px over the card beside it.
     A 1fr track with a zero floor may be narrower than its contents want. */
  .orgchart__row:has(.orgchart__sub) > .orgchart__item {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid; grid-row: span 2;
  }
  /* The row's own row-gap now sets this distance, and a second margin on top
     of it would open the gap to 32px on the one level that has reports. */
  .orgchart__row:has(.orgchart__sub) > .orgchart__item > .orgchart__sub { margin-top: 0; }
}

/* --- The node --- */

.orgchart__node {
  position: relative;
  display: flex; align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
}
.orgchart__node:hover { background: var(--tint); }
.orgchart__node:hover .orgchart__name a { color: var(--sea); text-decoration: underline; }
/* The hit area is the whole card, so the ring belongs to the card — and the
   stretched link must not then draw a second ring around its text alone. */
.orgchart__node:focus-within { outline: 3px solid var(--sea); outline-offset: 2px; }
.orgchart__name a:focus-visible { outline: 0; }

.orgchart__portrait {
  position: relative;
  flex: 0 0 96px; width: 96px; min-height: 120px;
  background: var(--sand);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
/* Absolute rather than height: 100%, because the portrait is a stretched flex
   item with no aspect-ratio of its own and its height is only definite once
   the row has resolved. */
.orgchart__portrait img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
/* Nobody on the chart has a portrait and none is coming, so the monogram is
   not a placeholder for an image, it IS what the card ships with. At .30 on
   --sand it read as a photograph that had failed to load — nine flat grey
   plates down the left of the chart, which is the second thing anyone noticed
   about this page. Drawn as a plate that was chosen instead: --sand-str
   carrying --tapa is the pairing the token block already sanctions for chips
   and file badges, and slight positive tracking makes two letters read as a
   mark rather than as a truncated word. The fill is on the monogram and not on
   .orgchart__portrait, so a card that does get a photograph keeps the quieter
   --sand behind it while the image loads. */
.orgchart__initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand-str);
  font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: .04em;
  color: var(--tapa);
}

.orgchart__body { flex: 1 1 auto; min-width: 0; padding: 16px 18px 18px; }

.orgchart__name {
  margin: 0 0 5px;
  font-family: var(--display); font-weight: 800;
  font-size: 20px; letter-spacing: -.025em; line-height: 1.15;
  color: var(--tapa);
}
.orgchart__name a { color: var(--tapa); text-decoration: none; }
.orgchart__name a::after { content: ""; position: absolute; inset: 0; }

.orgchart__role {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: -.01em; line-height: 1.35; color: var(--clay-ink);
}
/* --muted is the white-surface token and that is correct here: the nodes stay
   white even where the tier around them is --tapa. */
.orgchart__division {
  margin: 0;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.45;
  color: var(--muted);
}
/* A small target inside a large one. It has to sit above the stretched link to
   stay clickable, and it takes the 44px floor the same way .person__email a
   and .arrow-link do. It keeps its own focus ring from the global rule: both
   rings showing at once is the correct, informative result. */
.orgchart__mission {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 10px;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--sea); text-decoration: none;
}
.orgchart__mission:hover { color: var(--sea-deep); text-decoration: underline; }

/* --- The apex, and a nested report --- */

.orgchart__node--apex .orgchart__portrait { flex-basis: 120px; width: 120px; min-height: 150px; }
/* The apex portrait is 200px tall and the card now carries three lines of type
   against it — name, role, division — which measure 132px. Without this the
   body stretched to the portrait and the name sat in the top corner of a card
   602px wide, with 68px of air under it. align-self stops the stretch and
   centres the text on the plate instead. This used to be the fallback for a
   Secretary with no written summary; with the summaries gone it is the only
   state the card has. */
.orgchart__node--apex .orgchart__body { align-self: center; padding: 18px 20px 20px; }
.orgchart__node--apex .orgchart__name { font-size: 28px; }
.orgchart__node--apex .orgchart__role { font-size: 16px; }
.orgchart__node--apex .orgchart__initials { font-size: 40px; }

.orgchart__node--sub .orgchart__portrait { flex-basis: 84px; width: 84px; min-height: 105px; }
.orgchart__node--sub .orgchart__name { font-size: 17px; }
.orgchart__node--sub .orgchart__initials { font-size: 22px; }

/* A person nested under a peer on the same level, which the chart draws with a
   thinner rule than the spine because a subordinate relationship is not the
   same line. Auckland used to be the one case — a representative office under
   the Wellington High Commission — and it is a peer now, so nothing on the
   site renders this today. It is not dead: page-our-people.php nests off the
   Reports to field for any two people on the same level, so this comes back
   whenever an editor sets one. Keeping it costs six rules; deleting it would
   drop the next nested card into the row unstyled and unconnected. */
.orgchart__sub {
  list-style: none;
  margin: 14px 0 0 20px;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--border);
}
.orgchart__sub-item { position: relative; }
.orgchart__sub-item + .orgchart__sub-item { margin-top: 14px; }
.orgchart__sub-item::before {
  content: ""; position: absolute;
  left: -18px; top: 26px; width: 12px; height: 1px;
  background: var(--border);
}

/* --- The terminus: overseas posts on the dark band ---
   The one bold move in the component, and the only one. The nodes themselves
   are unchanged — still white, still the same names, roles and divisions —
   because the distinction being drawn is the field, not the object: the same
   kind of thing, in a different place. Only the furniture is re-inked, and
   every replacement was measured on #3C1D13. --tapa-line is 1.51:1 there and
   would vanish, which is why the sub rules take --clay at 3.73:1; --sea is
   1.4:1 there, which is why the focus ring takes --sea-lt at 8.79:1.

   Written as .orgchart__tier.orgchart__tier--overseas, 0-2-0, and placed after
   .orgchart__tier + .orgchart__tier, which is also 0-2-0. At one class it
   would lose to the sibling rule and the band's padding would collapse. */
.orgchart__tier.orgchart__tier--overseas {
  background: var(--tapa);
  border-left-color: var(--tapa);
  padding: 28px var(--orgchart-spine) 26px;
}
/* The band paints its own segment of the spine in --tapa on a --tapa ground,
   which is invisible and does not matter while a level above it is drawing the
   spine in the same ink on white. It matters when there is no level above it:
   'post' is last in the template's level list, so --first on the band means the
   band is the only level anybody has been given, and the whole chart renders
   with no spine at all while the ticks off it still show. --clay-lt because the
   tick that butt-joins this border is already --clay-lt, and a spine and its
   tick have to read as one drawn line. 0-2-0, after the rule above it. */
.orgchart__tier--overseas.orgchart__tier--first { border-left-color: var(--clay-lt); }
.orgchart__tier--overseas .orgchart__tier-label { color: var(--clay-lt); border-bottom-color: var(--clay-lt); }
.orgchart__tier--overseas .orgchart__tier-label::before { background: var(--clay-lt); }
/* --clay-lt for the connectors that carry the level, --clay for the ones that
   carry a report under it: the same two weights the chart uses on white, in
   the two inks that survive #3C1D13. */
.orgchart__tier--overseas .orgchart__item > .orgchart__node::before { background: var(--clay-lt); }
.orgchart__tier--overseas .orgchart__sub { border-left-color: var(--clay); }
.orgchart__tier--overseas .orgchart__sub-item::before { background: var(--clay); }
.orgchart__tier--overseas .orgchart__node:focus-within { outline-color: var(--sea-lt); }

/* --- Three steps. 769px is the exact complement of this file's existing
       max-width: 768px query, so the two cannot collide; 1080px is the file's
       own .hubbody breakpoint. --- */

@media (min-width: 769px) {
  .orgchart { --orgchart-spine: 32px; }
  .orgchart__title { font-size: 26px; }
  .orgchart__tier + .orgchart__tier { padding-top: 34px; }
  .orgchart__tier.orgchart__tier--overseas { padding: 36px var(--orgchart-spine) 34px; }
  /* Six tracks for two across, because three across is also a whole number of
     sixths: one track system serves both steps, and a level whose last band
     comes up short can fill the row by widening its cards instead of leaving a
     hole in it. With an 18px gap, three of six tracks measures exactly what
     one of two used to, so nothing moved when this changed. Every span below
     is in sixths. */
  .orgchart__row { grid-template-columns: repeat(6, 1fr); }
  .orgchart__item { grid-column: span 3; }
  /* Declared only from here up. In the single column grid below this width it
     would create implicit columns and overflow a 375px screen; kept inside the
     query, no reset is ever needed. */
  .orgchart__item--wide { grid-column: 1 / -1; }
  /* The last card of a level, alone on its band, took one column and left the
     rest of the row empty — 336px of it under the fifth member of the senior
     team, on a band sitting directly under an apex card that was itself two
     columns of three. It fills the band instead. This is the idiom
     .person:last-child:nth-child(odd) already uses on the grid below this
     chart, written against position rather than against a count, because the
     chart is data driven and the number of directors will change. It has
     changed once already: the National Security Advisor had a level of their
     own above the directors, and folding that one card into the directors
     took the level from five to six.

     Deliberately NOT scoped away from the overseas band now that the band can
     hold an odd number. Half a row was tried there and is worse: measured at
     1024 with three posts it left 415x164px of bare --tapa beside the third
     card, which is the ghost-cell defect this whole component was built to
     avoid, and it is only invisible on the white levels because their ground is
     white. On the band a short last card fills, and every count from one to six
     covers the band exactly. */
  .orgchart__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Two across, so the bracket fans into two cards; the drop replaces the tick
     the single column layout uses. Geometry for every card, shown only on the
     first band: a card on a second band has no bracket above it, only another
     card, and a drop there would draw a reporting line that does not exist. */
  .orgchart__item > .orgchart__node::before {
    display: none;
    /* The extra pixel is the node's own 1px border, for the same reason the
       horizontal tick above allows for it: the drop is positioned against the
       padding box, so without it the mark stops 1px short of the level rule it
       is supposed to hang from. */
    left: 50%; top: calc((var(--orgchart-drop) + 1px) * -1);
    width: 2px; height: calc(var(--orgchart-drop) + 1px);
    margin-left: -1px;
  }
  .orgchart__item:nth-child(-n+2) > .orgchart__node::before { display: block; }

  /* Card heights are levelled by grid row stretch plus flex: 1 1 auto on
     .orgchart__node, and by nothing else. There used to be a seven-line clamp
     here holding a pasted paragraph in check; with the summaries gone every
     card is name, role, division and at most a mission link, so the tallest
     thing a card can hold is a wrapped name and there is no runaway left to
     cap. Measured at 1440 with the summaries out: the pooled level comes out
     137px across all six cards and the overseas band 164px across all three. */

  .orgchart__portrait { flex-basis: 108px; width: 108px; min-height: 135px; }
  .orgchart__node--apex .orgchart__portrait { flex-basis: 140px; width: 140px; min-height: 175px; }
  .orgchart__body { padding: 18px 22px 20px; }
  .orgchart__node--apex .orgchart__body { padding: 24px 28px 26px; }
  .orgchart__sub { margin: 18px 0 0 30px; padding-left: 22px; }
  .orgchart__sub-item::before { left: -22px; top: 30px; width: 14px; }
}

@media (min-width: 1080px) {
  /* The connector grows with the chart. At three across the cards are a third
     of the width they were at one, and an 18px drop that read clearly on a
     phone reads as a nick at this size. The label's margin follows it, so the
     level gets the extra air under its rule as well. */
  .orgchart { --orgchart-spine: 40px; --orgchart-drop: 22px; }
  /* Three across, in the same sixths, and EVERY LEVEL INCLUDING THE OVERSEAS
     BAND. These five rules were scoped `.orgchart__row:not(.orgchart__row--pair)`
     while Auckland hung nested under Wellington and the band therefore only ever
     held two cards. Auckland is a peer now, the band holds three, and pinned at
     two across the third card fell to the short-band rule below and rendered
     1182px wide on a row of its own under two 582px cards.

     `.orgchart__tier ` replaces the :not() rather than the scope simply being
     dropped, and it is not decoration: the :not() was CARRYING THE SPECIFICITY
     that settles these against the two-across rules in the query above. Its
     argument counts, so the old selector was 0-3-0 against the 0-3-0 of the
     rule it replaces, later and therefore winning — and 0-5-0 below for the
     ragged cases. A bare `.orgchart__row > .orgchart__item` is 0-2-0 and would
     LOSE to .orgchart__item:last-child:nth-child(odd) above, putting a lone
     last card full width at every level. The tier is the row's own parent, so
     the selector matches exactly what it did before plus the band, at the
     specificity the cascade here was built around.

     .orgchart__row--pair is now inert: nothing in this file selects it. The
     template may keep emitting it or drop it, and the layout is identical
     either way. */
  .orgchart__tier .orgchart__row > .orgchart__item { grid-column: span 2; }
  .orgchart__tier .orgchart__row > .orgchart__item--wide { grid-column: 1 / -1; }
  /* Two ways a band of three comes up short and both of them fill: a last card
     on its own takes half the row, a last pair takes half each.

     Half, not the whole row. Full width is the only thing marking the office at
     the top of the chart, so a full-width card anywhere below it reads as
     seniority that is not there — and a seventh director, which the template
     comments say to expect, is exactly the edit that produces one. Span 3 fills
     the gap without ever matching the apex.

     These now govern the overseas band too, and posts do open and close, so the
     whole range was measured at 1440 with the band at 1182px. 2, 3, 5 and 6
     cards fill it to the pixel; 1 and 4 leave a half band under a full first
     row, which is the same half row every level on white already leaves and
     reads as the band's own bottom padding rather than as a missing card. */
  .orgchart__tier .orgchart__row > .orgchart__item:last-child:nth-child(3n+1) { grid-column: span 3; }
  .orgchart__tier .orgchart__row > .orgchart__item:last-child:nth-child(3n+2),
  .orgchart__tier .orgchart__row > .orgchart__item:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
  /* One more card on the first band than there was at two across. */
  .orgchart__tier .orgchart__row > .orgchart__item:nth-child(-n+3) > .orgchart__node::before { display: block; }
  .orgchart__node--apex .orgchart__portrait { flex-basis: 160px; width: 160px; min-height: 200px; }
}

/* ==========================================================================
   The tapa ornament, and the Our People photograph slot

   Every page opens on a .section-head whose H1 is capped at 20ch and whose lede
   is capped at 62ch, which leaves a 644x150px rectangle of nothing to the right
   of the title on every template on the site. This fills it with a fragment of
   the Ministry's own cloth: six motifs redrawn from the mark as flat inline SVG,
   one chosen per page, laid in at an opacity no stronger than a hairline.

   INLINE SVG, NOT A CROPPED RASTER, AND THE REASON IS COLOUR, NOT WEIGHT.
   The ornament has to sit on white in a page header and on --tint inside the
   photograph slot, and a cropped PNG carries both its ink and the anti-aliasing
   halo of the black ground it was cut from — which shows as a dirty fringe on
   white. Every path is stroked or filled with currentColor, so one motif serves
   both surfaces from a single `color` declaration and a dark-band variant costs
   one more. It also happens to be smaller: the six average 966 bytes gzipped,
   inline, in zero extra requests, against 6-25 KB and a request per raster —
   which on Pacific mobile data is the whole argument.

   WHY THE OPACITY IS SPLIT ACROSS TWO ELEMENTS.
   The motif class carries how much ink the drawing puts down; the variant class
   carries how loud that particular space is allowed to be. They are on
   different elements — .ornament--{motif} on the wrapper, the value applied to
   .ornament__art inside it — because CSS opacity on nested elements MULTIPLIES,
   and that is what lets one set of six numbers serve two very different
   surfaces. A single flat opacity across all six would make `lattice`, at 42%
   ink coverage, a grey block and `ray`, at 8% stroke, invisible.

   The six values below are the SLOT's, where the motif is the only thing in the
   box and has to carry it. .ornament--head multiplies them by 0.45, which lands
   every motif on the ceiling the page header needs: NO STROKE DARKER THAN
   --border, the hairline this site already draws. Both ends, computed against
   the real tokens — header over #fff, slot over --tint:

              slot ink            header ink
     sawtooth  #CCC4C1  (.22)      #ECE9E8  (.099)
     lattice   #D4CCCA  (.18)      #EFEDEC  (.081)
     chevron   #B8ACA8  (.33)      #E2DDDC  (.149)
     scallop   #C5BBB8  (.26)      #E8E5E3  (.117)
     ray       #B4A8A4  (.35)      #E0DBDA  (.158)
     scroll    #BCB1AD  (.31)      #E4DFDE  (.140)

   The darkest header stroke is `ray` at #E0DBDA, one step LIGHTER than
   --border's #DFD9D7, so nothing in the set can compete with a 48px/800 --tapa
   H1 sitting 20px to its left. At the other end `lattice`, the heaviest
   covering of the six, lands on #D4CCCA in the slot — which is --sand to within
   a value or two, and --sand is this site's panel. That is the point of the
   multiplier: the same drawing reads as a reserved panel in one place and as a
   watermark in the other, off one number.
   ========================================================================== */

.ornament {
  position: absolute;
  overflow: hidden;
  color: var(--tapa);
  /* It can never intercept a click and can never break a text-selection drag
     across the header it is lying behind. */
  pointer-events: none;
}
/* No colour hook here any more. These are cuts of the logo, so they carry the
   logo's own two browns; the only thing this system varies is how far back the
   fade takes them. Putting one on a --tapa band would need a different cut, not
   a different colour. */

.ornament__art { display: block; }

/* --- The page header --- */

/* HIDDEN BY DEFAULT AND TURNED ON AT 1024, rather than drawn by default and
   hidden below 1023, and the difference is not stylistic. The two forms are not
   complements on a fractional viewport: at the 1.25 device pixel ratio Windows
   ships at 125% scaling, a 1023px window reports a media width of 1023.216, so
   `max-width: 1023px` and `min-width: 1024px` BOTH fail. Written the other way
   round the ornament survived into that sliver while .introband had already
   collapsed and .section-head h1 had already given up its max-width — which is
   the one state where the motif lands under live text. Opting in at a single
   min-width makes the two states exact complements by construction and there is
   no gap to fall into.

   1024 is the theme's existing structural breakpoint, not a new one: it is
   .pagebody's grid and .introband's, and it is the last width at which the box
   still carries a motif — 293px there, of which the mask fades the first 64px.
   Below it the box shrinks past useful, and at 900 .section-head h1 gives up
   its max-width and runs the full measure, so from there the title would run
   into the ornament outright. The markup is still emitted and hidden here
   rather than branched in PHP, because the server cannot know the viewport and
   one hidden kilobyte is cheaper than any alternative. */
.ornament--head { display: none; }

@media (min-width: 1024px) {
  /* 620 is the H1's own max-width: 20ch, which measures exactly 600px at this
     type size, plus 20px of clearance; it clears the 62ch lede's 585px by 35px.
     Both caps are max-width, so no page can push text into this box however
     long its title runs — measured at 20px off the H1 and 35px off the lede on
     a one-line title, a wrapped two-line title and a title with no lede at all.
     right: var(--gutter) lands the ornament on the content column's right edge
     rather than in the outer margin — the one-spine rule .pagebody argues for
     at length applies to the right side too, and a motif floating in a 280px
     gutter at 1920 would read as detached.

     top: var(--band) aligns the box with the eyebrow. bottom: 0 resolves to the
     padding box, which is the inner face of the 2px --tapa rule the band closes
     with: the motif STANDS ON that rule, the way every band in the cloth is
     bounded by one. Measured at 0px between the artwork's foot and that rule on
     all three header shapes. A two-line H1 grows the air above the artwork and
     moves nothing; a header with no lede clips 8px off its top, which still
     reads as a band sitting on a rule. */
  .ornament--head {
    display: block;
    top: var(--band);
    right: var(--gutter);
    bottom: 0;
    left: calc(var(--gutter) + 620px);
    /* "Fade it a bit", done along the ornament's own length rather than as a
       flat drop: the motif emerges out of nothing as it moves away from the
       text and is at full — already very low — strength only at the far right.
       This is what guarantees it never crowds the lede no matter how long the
       lede runs.

       This is the file's only linear-gradient() and it does not break the
       no-gradients rule: it paints nothing. It is an ALPHA MASK, so the value
       is a fade curve rather than ink, and every colour on screen is still a
       flat token. -webkit- for Safari; where masking is unsupported both are
       dropped and the ornament simply gets a hard left edge, which is
       acceptable because the box already starts 20px clear of the longest
       possible line of text. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
            mask-image: linear-gradient(to right, transparent 0, #000 22%);
    opacity: .45;
  }
  /* THE ARTWORK NEVER SCALES. It is pinned to the bottom-right of the clipping
     box at its own 660x128, so as the space narrows the motif is cropped from
     the left at unchanged scale: 16px off at 1440 and 1920, 311px at 1080,
     367px at 1024. A shrinking ornament would thin its strokes out until it
     vanished; a cropped one keeps its texture, and the bleed is drawn into the
     artwork itself — every motif starts at a negative x and runs past x=660 —
     so both edges cut mid-unit and it reads as a fragment of a larger cloth. */
  /* object-fit, because these are photographs of cloth rather than a vector that
     can be told to letterbox: the six cuts have six different aspect ratios, and
     stretching any of them to a fixed 660x128 would shear the geometry the logo
     is made of. cover crops instead, anchored bottom-right so every motif shows
     the same corner of the cloth and the cut edge falls where the eye is already
     leaving the page. */
  .ornament--head .ornament__art {
    position: absolute;
    right: 0; bottom: 0;
    width: 660px; height: 128px;
    object-fit: cover;
    object-position: right bottom;
  }
}

/* --- Inside the photograph slot --- */

.ornament--slot { inset: 0; }
/* Fills the frame and crops rather than letterboxing, anchored to the same
   right-hand end of the cloth the header shows. */
.ornament--slot .ornament__art {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* --- Ink per motif. See the note at the head of this section. --- */

/* Per motif, because ink coverage varies: the sawtooth band is near-solid and
   the diamond band is outline only, so one flat value would make the first a
   block and the second invisible. */
.ornament--sawtooth .ornament__art { opacity: .20; }
.ornament--stars    .ornament__art { opacity: .32; }
.ornament--lattice  .ornament__art { opacity: .22; }
.ornament--vaka     .ornament__art { opacity: .26; }
.ornament--diamond  .ornament__art { opacity: .30; }
.ornament--wave     .ornament__art { opacity: .26; }

/* Forced colours ignores the intent of opacity and repaints the strokes at full
   system ink, which would turn a 0.08 tone into a solid mass across the header.
   It has to be removed, not recoloured. */
@media (forced-colors: active) {
  .ornament { display: none; }
}

/* NO ANIMATION, TRANSITION OR TRANSFORM ANYWHERE IN THIS SYSTEM, so
   prefers-reduced-motion has nothing to respect. Stated so it is not "improved"
   with a fade-in later. */

/* ==========================================================================
   Our People: the intro band and its photograph slot
   ========================================================================== */

/* The band below the header carries the Ministry's intro prose in a 68ch
   column, which left roughly 690px of white to its right. The photograph goes
   there — in the SAME track the contents rail occupies on every other page, so
   it lands on a column the reader has already met rather than in a bespoke
   well. The geometry is .pagebody's, restated rather than shared because the
   two have different children and one selector for both would be a coincidence
   waiting to break. */
.introband {
  display: flex;
  flex-direction: column;
  gap: var(--band-tight);
}
/* On one column the picture leads. The prose here is long and the slot is the
   band's visual entry point; source order keeps the text first for a reader who
   is not seeing the layout. */
.introband__aside { order: -1; }

@media (min-width: 1024px) {
  /* The picture takes whatever the reading measure does not.
     This track used to be a fixed 480px, chosen so the band "still clears the
     right edge" — and clearing it is exactly what looked wrong: 575 of prose +
     64 + 480 left 115px of dead paper between the photograph and the rule, on a
     page where the rules above and below the band run the full column. A
     photograph in a band should end where the band ends. 1fr resolves to 625px
     at the widest container and shrinks with it, so the right edge always
     lines up with the rules. */
  .introband {
    display: grid;
    /* 575px, not 68ch: 68ch resolves to 623px here, and with a fluid second
       track the prose would render 68 characters wide while .pagebody__main —
       every other page on the site — renders 62. One measure, and the width
       that buys goes to the photograph, which is the point of this band. */
    grid-template-columns: minmax(0, 575px) minmax(0, 1fr);
    gap: 64px;
    justify-content: start;
    align-items: start;
  }
  /* The photograph is centred against the prose, so the air above it always
     equals the air below it whichever column happens to be taller. Top
     alignment left the shorter of the two floating with all its slack at the
     bottom, which is the imbalance this band was reported for. */
  .introband__aside { align-self: center; }
  /* The 68ch cap below is the stacked state's reading-measure limit. With a
     fluid track it would bind first and put the dead space straight back.
     Scoped to the aside rather than written as a bare .photoslot: the cap is
     declared later in this file, so at equal specificity source order would
     win and the frame would stop 20px short of the column it sits in. */
  .introband__aside .photoslot { max-width: none; }
  /* Grid honours `order` too, so the mobile reversal has to be stood down
     explicitly or the picture would place into the first track. */
  .introband__aside { order: 0; }
}

/* 68ch is the reading measure, and stacked the picture has to share it. This is
   the correction .pagebody__rail already carries for the same reason and in the
   same words: left to fill the container, the frame measured 912px at a 1023px
   viewport against 575px of prose directly above it, and at 4:3 that is a
   684px-tall empty panel — a placeholder louder than the page it is on. Capped,
   it is 575x431 at 1023 and 335x251 on a 375px phone. The cap needs no media
   query: from 1024 up the aside track is 340px and it never binds. */
.photoslot { margin: 0; max-width: 68ch; }

/* THE FRAME IS THE SAME BOX IN BOTH STATES, and that is the point of it. It
   carries the aspect ratio and the border whether or not a photograph exists,
   so the slot is already at its final size before any image is set and setting
   one causes no layout shift at all.

   16:9, so 625x352 at the widest desktop. This was 4:3, which cropped the sides
   off every photograph the Ministry supplies: mfai-lead, the theme's own
   photographic crop, is 16:9, so a 4:3 frame cut a second time into a picture
   that had already been cut once. Whatever is supplied is cropped to fill the
   frame by object-fit: cover on .photoslot__img — the frame's shape wins, and
   no image can change the layout.

   1px --border on three sides and a 2px --tapa rule on the top edge only: the
   same "a block announces itself with a hard rule" language .section-head and
   .cardsection already speak. --tint rather than white so the empty state reads
   as a panel that has been reserved, not as a hole in the page. */
.photoslot__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tint);
  border: 1px solid var(--border);
  border-top: 2px solid var(--tapa);
  overflow: hidden;
}
.photoslot__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The label is INSIDE the frame, not under it, so it can never be mistaken for
   the caption of a photograph that does not exist. --sand-str carrying --tapa
   is the pairing the token block sanctions by name for chips and badges, and
   the type is .chip's exactly — this is a badge on a panel, and the site
   already has one way of drawing that. It is emitted after the ornament, so it
   paints over the motif without either needing a z-index. */
.photoslot__label {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--sand-str); color: var(--tapa);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px;
}
/* Only ever present once a real photograph is, so --muted is right: this line
   sits below the frame, on white. */
.photoslot__caption {
  margin: 10px 0 0;
  font-family: var(--sans); font-weight: 400; font-size: 14px;
  line-height: 1.5; color: var(--muted);
}


/* ==========================================================================
   Photograph placeholder

   A reserved panel that stands in for a photograph until a featured image is
   set, at which point the template swaps it for the real picture. It holds the
   exact aspect ratio of the image size it stands in for (set inline), so the
   layout is final and nothing jumps when the photo arrives. The dashed frame,
   camera mark and crop dimensions are a marker for the content team; to a
   reader it still reads as a deliberately reserved panel.
   ========================================================================== */

.phold {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  background: var(--tint);
  border: 1px dashed var(--sand-str);
  color: var(--muted-tint);
}
.phold svg { opacity: .7; }
/* What a visitor sees where a photograph is still to come. --tint with a
   hairline, not the --sand fill the media list rows use: at row size that fill
   reads as a reserved thumbnail, but the atrium's lead slot is 878x494 and two
   of them at that weight turned the news band into a pair of grey slabs. Quiet
   enough to read as space held open, defined enough not to look broken. */
.phold--public { border: 1px solid var(--border); background: var(--tint); }
.phold__text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.phold__label {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  color: var(--muted-tint); text-align: center; padding: 0 12px;
}
.phold__size {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: var(--muted);
}
/* A real photograph filling a reserved band slot: crop to the slot, never
   stretch, so any upload sits cleanly in the reserved space. */
.introband__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   Foreign Affairs news landing

   The world home opens with news: one lead story on the left and two stacked
   thumbnails on the right, then a view-all link. Collapses to a single column
   on small screens.
   ========================================================================== */

.fanews__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.fanews__head .wsection__label { margin: 0; }
.fanews { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }

.fanews-lead__image { display: block; }
.fanews-lead__image img, .fanews-lead__image .phold { display: block; width: 100%; height: auto; object-fit: cover; }
.fanews-lead__body { padding-top: 14px; }
.fanews-lead__title { font-size: var(--fs-h3); line-height: 1.15; margin: 6px 0 8px; }
.fanews-lead__title a { color: var(--tapa); text-decoration: none; }
.fanews-lead__title a:hover { color: var(--sea); }
.fanews-lead__excerpt { color: var(--muted-tint); margin: 0; max-width: 56ch; }

.fanews__thumbs { display: flex; flex-direction: column; gap: 26px; }
.fanews-thumb__image { display: block; }
.fanews-thumb__image img, .fanews-thumb__image .phold { display: block; width: 100%; height: auto; object-fit: cover; }
.fanews-thumb__body { padding-top: 10px; }
.fanews-thumb__title { font-size: var(--fs-h5); line-height: 1.3; margin: 4px 0 0; }
.fanews-thumb__title a { color: var(--tapa); text-decoration: none; }
.fanews-thumb__title a:hover { color: var(--sea); }
/* The photograph and the headline are two links to one story — the image is
   aria-hidden and duplicate — so hovering either lights the headline. Without
   this, pointing at the picture looked like pointing at nothing. */
.fanews-lead:hover .fanews-lead__title a,
.fanews-thumb:hover .fanews-thumb__title a {
  color: var(--sea); text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .fanews { grid-template-columns: 1fr; }
}

/* A section that ends in a photograph band sits in equal air.
   .section is 44px top and 20px bottom, which is the right rhythm for stacked
   prose — more space above a heading than below the paragraph that ends it —
   but wrong the moment the block is a picture bounded by a rule at each end,
   because the eye reads the two gaps against each other and 44 against 20 looks
   like a mistake. 48px, not 44px: the title band above contributes its own 4px
   margin, so 44 + 4 above is matched by 48 below. */
.section--photo { padding-bottom: 48px; }
/* Inside such a section, whatever precedes the band is separated by the same
   48px, so the photograph is evenly spaced from both neighbours rather than
   just from the section edges. */
.section--photo .wtasks { margin-bottom: 48px; }

/* On the atrium the news strip sits below the doors; a hairline separates it
   from the chooser above so the two read as distinct bands. */
.atrium-news { border-top: 1px solid var(--border); margin-top: 30px; padding-top: 34px; }

/* ==========================================================================
   Print
   LAST IN THE FILE ON PURPOSE. These rules override things defined earlier at
   the same specificity, and a stylesheet resolves that by source order. The
   first version of this block sat near the top, so .wp-block-table table's
   min-width, 600 lines below it, won: the fee table stayed 512px wide inside a
   495px column and the Amount column was cut off every sheet. Moving the block
   here fixed it. Nothing else needs to change.
   ========================================================================== */

@media print {
  .govbar, .nav, .worldbar, .worldnav, .advisory, .site-footer, .searchbox, .skip-link, .breadcrumb { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* Paper has no scrollbar, so a table that is wider than the column does not
     scroll, it is guillotined. On screen .prose is 575px and the fee table's
     512px minimum fits inside it; at 11pt the same 68ch column measures 495px
     and the last 17px of the table, which is the Amount column, went off the
     edge of the page. Drop the minimum and let the table use the full width of
     the paper: a fee schedule is the single most likely thing on this site to
     be printed and carried to a counter. */
  .prose { max-width: none; }
  .wp-block-table, .prose figure.wp-block-table { overflow-x: visible; margin-left: 0; margin-right: 0; }
  .wp-block-table table { min-width: 0; width: 100%; table-layout: auto; }
  .wp-block-table th, .wp-block-table td { word-break: break-word; }

  /* Keep a fee and its description on the same sheet. */
  .wp-block-table tr, .prose h2, .prose h3 { break-inside: avoid; }
  .prose h2, .prose h3 { break-after: avoid; }
}

/* ==========================================================================
   Added in 2.12.0
   ========================================================================== */

/* Bilingual passages. The published content already carries these classes;
   nothing styled them, so English and Maori read as one undifferentiated
   column. The reo takes a quiet left rule so each pair reads as one unit
   with a visible language switch. Flat colour, square, no italic. */
.prose .mfai-reo {
  color: var(--muted-tint);
  border-left: 3px solid var(--sand-str);
  padding-left: 14px;
}
/* The English gloss inside a bilingual heading. The em asks for italic and no
   italic face exists at heading weight; weight and colour mark it instead. */
.mfai-term em { font-style: normal; font-weight: 600; color: var(--muted-tint); }

/* Foreign Affairs task-card buttons wear the world's own colour. The door
   buttons already define this pairing; the cards had been left brand-brown. */
.btn--fa { background: var(--sea-deep); }
.btn--fa:hover { background: var(--sea); }
.btn--ghost.btn--fa { background: transparent; color: var(--sea-deep); border-color: var(--sea-deep); }
.btn--ghost.btn--fa:hover { background: var(--sea-deep); color: #fff; }

/* The last-updated line under a page body. A fee schedule with no date makes
   the reader phone to confirm it; the date is the cheaper answer. */
.page-updated { margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--border); }