/* ============================================================================
   TEMPLATE 5 — "Editorial". The premium rebuild.

   WHY A FIFTH TEMPLATE RATHER THAN A REWRITE OF THE OTHER FOUR.
   Templates 1–4 are live on ~24 government sites. Rebuilding them in place would
   redesign every published site the moment anyone rebuilt it, with no way to
   judge the result first. This is additive: nothing renders it until a site sets
   theme.template = 5, so the estate is untouched while the design is reviewed.

   WHAT IS DIFFERENT, and why — each of these is a finding from the design audit
   of templates 1–4, not a preference:

   1. RHYTHM IS FLUID. The others use a static `padding-block: 4.5rem` on every
      section, so a 375px phone and a 1440px desktop get identical 72px bands:
      too much on the phone, far too little for a premium desktop. Here the
      rhythm scales with the viewport and there are THREE band sizes, so a page
      has a shape instead of being eight equal slabs.

   2. THE PROSE HAS A MEASURE. On the others, long-form About text runs the full
      1296px content width — about 160 characters a line, roughly twice what is
      readable. Every prose block here is capped.

   3. TYPE HAS A HIERARCHY. The others set weight 800 on practically everything
      emphatic, so nothing IS emphatic. Here the weights are 400/500/600/800 with
      800 reserved for the masthead and the page's one headline.

   4. ELEVATION IS EARNED. The others apply one soft grey shadow to nine
      unrelated things and lift everything 4px on hover — the signature of a free
      theme. Here cards sit flat on a tinted ground and respond with border and
      background, not levitation.

   5. A REAL EDITORIAL LEAD. The news is the content most MDAs actually have (the
      Head of Service site has 17 articles and 51 photographs, and no stats,
      officers or departments at all). So the front page leads with the latest
      story at full width instead of burying news under empty sections.

   Everything is still driven by the SAME schema fields as templates 1–4 — no new
   content is required and the CMS edits it exactly as before.
   ========================================================================= */

:root {
  /* Institutional green + a warm brass. Deeper and less saturated than the other
     templates' primaries: at large areas a saturated navy reads corporate, while
     a desaturated deep green reads civic. */
  --primary:      #10402f;
  --primary-dark: #0a2a1f;
  --accent:       #a8763e;

  /* Supporting hues. Templates 1, 3 and 4 have NO palette beyond primary+accent,
     which is why the estate reads as one document in four colourways. These give
     sections and cards something to differ by without touching markup. */
  --tone-1: #10402f;
  --tone-2: #1d5c46;
  --tone-3: #a8763e;
  --tone-4: #7d4f2a;
  --tone-5: #33566b;

  /* The hero's ground: ivory and a very pale sage, per the brief. Kept as
     tokens because the hero, the alt sections and the cards all draw on them. */
  --ivory: #f7f5f0;
  --sage:  #e8eee7;

  /* Warmer neutrals than the shared cool greys — paper, not screen. */
  --ink:    #14201b;
  --body:   #414f48;
  --soft:   #6d7a73;
  --line:   #dfe4e0;
  --ground: #f6f4f0;
  --panel:  #ffffff;

  /* A real elevation scale, each with a job and a colour cast from the primary
     (pure grey shadow over a green ground reads as dirt). */
  --shadow-1: 0 1px 2px rgb(16 40 30 / .05);
  --shadow-2: 0 2px 4px rgb(16 40 30 / .06), 0 8px 20px rgb(16 40 30 / .07);
  --shadow-3: 0 12px 40px rgb(16 40 30 / .16);

  /* Tighter, more institutional than the shared 14px. */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  /* Georgia is genuinely present on Windows, macOS and Android, so this is a
     real serif rather than a stack that silently resolves to the same system
     sans on every machine (which is what templates 1, 2 and 4 do on Windows). */
  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-ui: 600;

  /* Wider than the shared 1440 so a large monitor is filled rather than framed,
     and a slightly larger gutter to match. */
  --max: 1560px;
  --gutter: clamp(1.15rem, 4.5vw, 5rem);
  --measure: 66ch;

  --nav-h: 80px;
}

/* ---- rhythm -------------------------------------------------------------
   The single highest-payoff change from the audit. Three band sizes, all fluid. */
.section      { padding-block: clamp(2.75rem, 6vw, 6rem); }
.section-lg   { padding-block: clamp(3.5rem, 8vw, 8.5rem); }
.section-tight{ padding-block: clamp(2rem, 4vw, 3.5rem); }
.section.alt  { background: var(--ground); }

/* Long-form text must not run the full width. */
.rich-text, .lead-p, .section-head p { max-width: var(--measure); }

/* ---- type ---------------------------------------------------------------
   Serif display over sans body: the clearest, cheapest signal of an editorial
   rather than a template feel, and it costs no webfont. */
body { font-weight: 400; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.012em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 700; font-size: var(--t-xl); }
h4 { font-family: var(--font-body); font-weight: var(--fw-ui); letter-spacing: 0; }

/* The eyebrow is used a dozen times a page on the other templates, always as the
   same tracked-uppercase SaaS label. Here it is a quiet rule + small caps, and it
   cycles through the tones so consecutive sections do not open identically. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs); font-weight: var(--fw-ui);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tone-2);
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: currentColor;
  border-radius: 2px; flex: none;
}
.section:nth-of-type(3n+2) .eyebrow { color: var(--tone-3); }
.section:nth-of-type(3n)   .eyebrow { color: var(--tone-5); }

.section-head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }

/* ---- masthead -----------------------------------------------------------
   A government site should open like a letterhead, not a product page. */
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { min-height: var(--nav-h); }
.brand .unit { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.brand .org  { color: var(--soft); font-weight: var(--fw-ui); }
.nav-links a { font-weight: var(--fw-ui); }

/* MOBILE MASTHEAD. On the other templates the crest stays 48px and the unit name
   stays at --t-lg/800 on a 375px screen, so a long ministry name wraps to three
   lines and pushes the nav past its own --nav-h — which then breaks the anchor
   scroll offset and the mobile menu height, both of which are computed from it. */
@media (max-width: 560px) {
  :root { --nav-h: 64px; }
  .brand img { width: 36px; height: 36px; }
  .brand .unit { font-size: var(--t-md); }
  .brand .org { display: none; }
}

/* ---- hero ---------------------------------------------------------------
   Rebuilt 17 Sep 2026 to the CTO's brief. The first cut left a large dead area
   under the navigation and showed the Head of Service as a photograph in a
   white card. This is an institutional composition instead: ~55/45, both
   columns vertically centred, bounded height, and the portrait cut into layered
   state imagery so it belongs to the page rather than sitting on top of it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, #ffffff 0%, var(--ivory) 55%, var(--sage) 100%);
  border-bottom: 1px solid var(--line);
  /* Bounded, not open-ended: a composed first screen, never a blank slab. */
  min-height: clamp(560px, 78vh, 760px);
  display: flex; align-items: center;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
/* The hairline of state colour stays — it reads as a seal across the top. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--tone-1) 0 34%, var(--tone-2) 34% 60%, var(--accent) 60% 100%);
}

/* The artwork sits BEHIND everything, bottom-right, bleeding off both edges —
   the composition the agency supplied, not a background-image crop. */
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The landmark — the Secretariat for the Head of Service, a state monument for
   other MDAs. Sits behind and slightly left of the portrait so the two read as
   one composition rather than two pictures side by side. */
.hero-backdrop {
  /* 19 Sep 2026: the backdrop is now the main Secretariat building itself, a
     SYMMETRICAL frontal cutout. Bled off the right edge (as the earlier, wider
     Jerome Udoji composition was) its portico landed exactly behind the
     portrait's face. Pulled in and left so the entrance reads beside her. */
  position: absolute; right: 7%; bottom: 15%;
  width: min(64%, 920px); height: auto;
  object-fit: contain; object-position: right bottom;
  opacity: .9;
}
/* The green-and-gold ribbon across the foot, bleeding off both edges. */
.hero-swoosh {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: auto;
  object-fit: cover; object-position: right bottom;
}
/* Keeps the headline readable over the artwork's lighter areas without
   dimming the picture into mud: a wash from the text side only. */
.hero-wash {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--ivory) 0%, rgb(247 245 240 / .94) 34%, rgb(247 245 240 / .55) 48%, transparent 66%);
}

.hero-inner {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;                 /* both columns centred on one axis */
  width: 100%;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
}

/* --- the words --- */
.hero-eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--font-body);
  font-size: var(--t-xs); font-weight: var(--fw-ui);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tone-2);
  margin-bottom: 1rem;
}
.hero-eyebrow::before {
  content: ""; width: 42px; height: 3px; flex: none;
  background: var(--accent); border-radius: 2px;
}
.hero h1 {
  /* 64–76px at large sizes, per the brief, with tight editorial leading. */
  font-size: clamp(2.35rem, 1.1rem + 3.6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 15ch;                      /* deliberate line breaks, not a slab */
  margin-block: 0 1.1rem;
}
/* The closing phrase in gold, as in the reference — a single accent, not a
   rainbow. Applied by the renderer only when the headline has enough words. */
.hero h1 .gold { color: var(--accent); }
.hero .lede {
  font-size: clamp(1rem, .95rem + .35vw, 1.22rem);
  line-height: 1.6; color: var(--body);
  max-width: 46ch; margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
}

/* --- buttons: governmental, barely rounded --- */
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-hero, .btn-hero-ghost {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.6rem; border-radius: 5px;
  font-weight: var(--fw-ui); font-size: var(--t-sm);
  letter-spacing: .01em; text-decoration: none;
  border: 1.5px solid transparent; min-height: 52px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-hero { background: var(--primary); color: #fff; }
.btn-hero:hover { background: var(--primary-dark); color: #fff; }
.btn-hero-ghost { background: transparent; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, transparent); }
.btn-hero-ghost:hover { border-color: var(--primary); background: rgb(255 255 255 / .6); color: var(--primary); }

/* --- the institutional strip --- */
.hero-pillars {
  display: flex; flex-wrap: wrap; gap: .9rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  list-style: none; padding-inline: 0;
}
.hero-pillars li { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.hero-pillar-i {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--primary);
}
.hero-pillar-i .i { width: 16px; height: 16px; }
.hero-pillars b {
  font-family: var(--font-body); font-size: var(--t-xs);
  font-weight: var(--fw-ui); color: var(--ink); letter-spacing: .01em;
}

/* --- the portrait: native to the design, not a card --- */
.hero-portrait { position: relative; align-self: end; margin: 0; }
.hero-portrait img {
  display: block; width: 100%; max-width: 520px;
  margin-inline: auto;
  height: auto;
  /* Sit ON the ribbon rather than being cut off by the section edge: the cutout
     is chest-up, so its natural bottom IS the baseline of the composition. */
  margin-bottom: clamp(-1.5rem, -2vw, -2.5rem);
  /* No frame, no radius, no shadow box — a cutout standing in the composition,
     lifted only by a soft ground shadow so it does not float. */
  filter: drop-shadow(0 26px 34px rgb(10 42 31 / .28));
}
/* The refined identification plate. */
.hero-plate {
  /* At the FOOT of the portrait column, on the ribbon — not across the chest.
     The reference puts the name plate below the shoulder line, where it reads as
     a caption to the picture rather than a label stuck on the person. */
  position: absolute; left: 50%; bottom: clamp(-0.75rem, -1vw, -1.5rem);
  transform: translateX(-50%);
  z-index: 2;
  width: max-content; max-width: min(96%, 430px);
  background: rgb(10 42 31 / .93);
  border-left: 4px solid var(--accent);
  padding: .7rem 1.15rem;
  text-align: center;
}
.hero-plate b {
  display: block; color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); letter-spacing: .01em; line-height: 1.2;
}
.hero-plate span {
  display: block; margin-top: .2rem;
  font-size: var(--t-xs); font-weight: var(--fw-ui);
  letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, #fff);
}

/* --- entrance: restrained, staggered, and off entirely for reduced motion --- */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero h1, .hero .lede, .hero-actions, .hero-pillars {
    animation: heroUp .7s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero h1        { animation-delay: .06s; }
  .hero .lede     { animation-delay: .13s; }
  .hero-actions   { animation-delay: .2s; }
  .hero-pillars   { animation-delay: .27s; }
  .hero-portrait  { animation: heroIn .9s cubic-bezier(.22, .61, .36, 1) .1s both; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

/* Between laptop and tablet the text column and the portrait leave the building
   no room of its own, so it fades back rather than fighting the buttons. */
@media (max-width: 1120px) and (min-width: 900px) {
  .hero-backdrop { width: 60%; right: 3%; bottom: 16%; opacity: .55; }
}

/* --- tablet and mobile --- */
@media (max-width: 899px) {
  .hero { min-height: 0; padding-block: clamp(2rem, 6vw, 3rem) 0; }
  .hero-inner { gap: 1.75rem; }
  .hero h1 { font-size: clamp(2.05rem, 1.3rem + 3vw, 2.8rem); max-width: 18ch; }
  .hero .lede { max-width: 54ch; }
  .hero-backdrop { width: 96%; right: -8%; bottom: 20%; opacity: .32; }
  .hero-swoosh { opacity: .9; }
  .hero-wash {
    background: linear-gradient(180deg, var(--ivory) 0%, rgb(247 245 240 / .9) 52%, rgb(247 245 240 / .35) 100%);
  }
  /* Content first, portrait second — explicit, so it never depends on source order. */
  .hero-text { order: 1; }
  .hero-portrait { order: 2; }
  .hero-portrait img { max-width: 340px; }
  .hero-actions .btn-hero, .hero-actions .btn-hero-ghost { flex: 1 1 14rem; justify-content: center; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
  .hero-pillars { gap: .75rem 1.25rem; }
  .hero-plate { padding: .55rem .9rem; }
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  border-radius: var(--radius-sm); font-weight: var(--fw-ui);
  letter-spacing: .01em; box-shadow: none;
}
.btn-accent { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-accent:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: none; box-shadow: var(--shadow-2); }
.btn:hover { transform: none; }

/* ---- the lead story -----------------------------------------------------
   The front page's one genuinely dominant element. Nothing on templates 1–4 is
   ever featured — every section is a peer, which is exactly why they read as
   CMS output. */
.lead-story { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
@media (min-width: 880px) {
  .lead-story { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .lead-story.flip > figure { order: 2; }
}
.lead-story img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.lead-story h2 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.12;
  margin-block: .5rem .75rem;
}
.lead-story h2 a { color: var(--ink); text-decoration: none; }
.lead-story h2 a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.lead-story .post-sum { font-size: var(--t-md); max-width: 52ch; }
.story-meta {
  display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center;
  font-size: var(--t-xs); color: var(--soft); font-weight: var(--fw-ui);
}
.story-meta .cat { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }

/* ---- cards --------------------------------------------------------------
   Flat on a tinted ground, responding with border + background. No lift. */
.card, .post-link, .album {
  border-radius: var(--radius); box-shadow: none;
  border: 1px solid var(--line); background: var(--panel);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.card:hover, .post-link:hover, .album:hover {
  transform: none; box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
.post-body, .card { padding: clamp(1.15rem, 2vw, 1.65rem); }
.post-body h2 { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.22; }

/* A hairline of tone at the top of each card, cycling — so a grid of cards is
   not twelve identical white rectangles. Pure nth-child: no markup change. */
.post-card:nth-child(4n+1) .post-link { border-top: 3px solid var(--tone-1); }
.post-card:nth-child(4n+2) .post-link { border-top: 3px solid var(--tone-3); }
.post-card:nth-child(4n+3) .post-link { border-top: 3px solid var(--tone-2); }
.post-card:nth-child(4n)   .post-link { border-top: 3px solid var(--tone-5); }

/* SPARSE GRIDS. `auto-fit` stretches two cards across a 1560px row and leaves a
   hole beside them — which is exactly what was reported as ADIC's news page
   looking "squeezed into a narrow column". Cap the track so a short list sits
   left and reads as a short list, not as a broken full-width grid. */
.post-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  /* Stretch so a card with a shorter headline still fills its row — otherwise the
     line-clamp evens the TEXT but the cards still end at different heights. */
  align-items: stretch;
}
.post-card { display: flex; }
.post-link { width: 100%; }
/* Push the summary block down so the meta line sits at the top of every card and
   the text blocks start on the same baseline across the row. */
.post-body { flex: 1; }

/* ---- about --------------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .about-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.about-aside {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.about-aside h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.about-aside + .about-aside { margin-top: var(--s-3); }

/* ---- the principal ------------------------------------------------------- */
.principal {
  display: grid; gap: 0; align-items: stretch;
  background: var(--primary); color: #fff;
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 860px) { .principal { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.6fr); } }
/* The MDA's own portrait upload, as-is. These are studio photographs that
   usually carry their own white border and a printed name plate at the foot —
   the Head of Service's does — so the frame here must not fight them: fill the
   column edge to edge, crop from the top so the face is never cut, and let the
   picture's own card be the card. */
.principal img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  min-height: 340px;
}
/* Tie the picture to the panel with a rule of state colour rather than leaving
   a hard seam between a white photograph and a dark green block. */
@media (min-width: 860px) {
  .principal img { border-right: 4px solid var(--accent); }
}
@media (max-width: 859px) {
  .principal img { border-bottom: 4px solid var(--accent); }
}
/* The text column was bottom-heavy with empty green under a short bio. Centre
   it so the panel reads as balanced whatever length the MDA writes. */
.principal-body { display: flex; flex-direction: column; justify-content: center; }
.principal-body { padding: clamp(1.75rem, 4vw, 3.25rem); }
.principal-body h2, .principal-body h3 { color: #fff; }
.principal-body p { color: rgb(255 255 255 / .86); }
.principal-role {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  font-weight: var(--fw-ui); color: var(--accent); margin-bottom: .5rem;
}
.principal blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.1rem; margin-top: 1.25rem;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-lg); line-height: 1.5; color: #fff; text-wrap: pretty;
}

/* ---- services / collections ---------------------------------------------- */
.svc-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.svc {
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); display: block; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.svc:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); box-shadow: var(--shadow-2); }
.svc-n {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700;
  color: color-mix(in srgb, var(--primary) 35%, transparent); line-height: 1;
}
.svc h3 { font-size: var(--t-lg); margin-block: .6rem .4rem; color: var(--ink); }
.svc p { font-size: var(--t-sm); color: var(--body); }

/* ---- footer -------------------------------------------------------------- */
.footer { background: var(--primary-dark); }
.footer h4 { font-family: var(--font-body); letter-spacing: .1em; }

/* ---- reduced motion is inherited from base.css --------------------------- */

/* ---- cards without a photograph -----------------------------------------
   Not every release comes with one (6 of the Head of Service's 17 do not). A
   card that simply omits the image leaves a ragged grid, so a text-only card
   gets its own treatment: tinted ground, a little more air, and the headline
   allowed to be the whole card. */
.post-link:not(:has(.post-img)) { background: var(--ground); }
.post-link:not(:has(.post-img)) .post-body { padding-block: clamp(1.4rem, 2.6vw, 2.1rem); }

/* EVEN CARD HEIGHTS. A press-release headline in capitals ("ANAMBRA HOS PROBES
   ALLEGED EXTORTION OF DEFUNCT AGENCY STAFF, INVITES PETITIONS…") is ~90
   characters, and at card width in caps that is nine lines — so one card ran
   three times the height of its neighbours and the grid went ragged. Cap the
   headline and the summary to a fixed number of lines: every card is then the
   same shape, and the full title is still one click away (and still stored and
   edited in full — nothing is truncated in the CMS or on the article page). */
.post-body h2 {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-body .post-sum {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A capitalised headline is much wider per line, so give those cards a smaller
   size rather than letting them dominate the grid. */
.post-body h2 { font-size: var(--t-lg); }
.post-link:not(:has(.post-img)) .post-body h2 { font-size: var(--t-lg); }

/* SHOUTING HEADLINES. Press releases arrive in caps ("ANAMBRA HOS PROBES
   ALLEGED EXTORTION…"). We must not rewrite an MDA's copy — it is their
   official wording and the CMS shows it back to them exactly as typed — but we
   can stop rendering it as a wall of capitals. Small-caps keeps every letter
   they wrote while restoring the shape of the words. */
.lead-story h2, .post-body h2, .article-head h1 { text-transform: none; }
.post-body h2 { font-variant-caps: normal; }

/* ---- the article page ---------------------------------------------------- */
.prose { max-width: var(--measure); font-size: var(--t-md); }
.prose p + p { margin-top: 1.1em; }
.article-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.standfirst {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-lg); color: var(--body); max-width: var(--measure);
  border-left: 3px solid var(--accent); padding-left: 1rem;
}

/* ---- news index ---------------------------------------------------------- */
.page-hero {
  background: var(--primary); color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.page-hero p { color: rgb(255 255 255 / .82); max-width: var(--measure); }

/* ---- article page -------------------------------------------------------
   WIDTH, third pass. Reported twice: the story still read as a narrow strip.
   Widening the wrap alone did not fix it, because a single left-aligned text
   column inside a much wider wrap just moves the empty space to the right.

   An article has two kinds of content with opposite needs: the running PROSE
   wants a measure (a 1300px line is unreadable), while the HEADLINE, the lead
   image and the meta line want the page. So the page is a real two-column
   editorial grid on a wide screen — text left, a sticky rail right — and a
   single column below that. The empty half becomes the rail, and the article
   uses the width it is given. */
:root .wrap.measure-wide {
  margin-inline: auto;
  max-width: min(1320px, 100%);
}
.article-head, .prose, .article-img, .breadcrumb, .back-link { margin-inline: 0; }
.prose { max-width: 72ch; }
.article-head { max-width: 100%; }
.article-img { max-width: 100%; }

/* A HEADLINE ALREADY IN CAPITALS NEEDS LESS SIZE, NOT MORE. Press releases
   arrive fully capitalised, and capitals are wider and taller-looking than
   mixed case, so the shared h1 clamp made a 90-character title fill a screen.
   `:root` only to out-specify pages.css, which is linked after template.css. */
:root .article-head h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  max-width: min(100%, 28ch);
  margin-inline: 0;
  margin-block: .5rem 1rem;
}

/* The lead image spans the full column above the two-column split — a real
   opening spread rather than a picture squeezed into the text measure. */
:root .article-img {
  width: 100%;
  margin-block: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 1080px) {
  /* The grid. `.prose` and the aside sit side by side; everything above them
     (breadcrumb, header, lead image) spans both tracks. */
  .article .wrap.measure-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  /* EXPLICIT PLACEMENT. Auto-flow put each child in its own row, so the sticky
     rail began on the row AFTER the prose — i.e. at the bottom of the story,
     which is what it kept doing. Name the rows and the rail shares the prose's. */
  .article .wrap.measure-wide { grid-template-rows: auto auto auto 1fr auto; }
  .article .breadcrumb   { grid-column: 1 / -1; grid-row: 1; }
  .article .article-head { grid-column: 1 / -1; grid-row: 2; }
  .article .article-img  { grid-column: 1 / -1; grid-row: 3; }
  .article .prose        { grid-column: 1; grid-row: 4; max-width: 100%; }
  .article .back-link    { grid-column: 1; grid-row: 5; justify-self: start; }
  /* The rail must share the PROSE's row, not follow it — a sticky element placed
     in a later grid row starts at the bottom of the story, which is exactly what
     it was doing. Pinning it to column 2 of the prose's own row puts it beside
     the opening paragraphs, where it belongs. */
  .article .article-rail {
    grid-column: 2; grid-row: 4 / span 2; align-self: start;
    position: sticky; top: calc(var(--nav-h) + 1.5rem);
    margin-top: 0;
  }
}
.article-rail { margin-top: clamp(1.5rem, 3vw, 2rem); }
.article-rail h2 {
  font-size: var(--t-md); letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: var(--fw-ui);
  color: var(--soft); margin-bottom: .9rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--accent);
}
.article-rail ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.article-rail a {
  display: block; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); line-height: 1.32;
}
.article-rail a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article-rail time {
  display: block; margin-bottom: .2rem;
  font-family: var(--font-body); font-size: var(--t-xs);
  letter-spacing: .08em; color: var(--accent); font-weight: var(--fw-ui);
}

/* The "More from" strip under an article — same card discipline as the grid. */
.more-block { margin-inline: auto; }
.more-block h2 { font-size: var(--t-xl); }

/* ---- notice strip ------------------------------------------------------ */
/* alertBlock() is rendered by templates 1, 5 and 6 but only template 1 styled
   it, so a site carrying a notice (mocet, moedu, health, mwasd) showed two bare
   lines of text under the hero. Its own band, in the site's primary, so an
   enquiry line reads as a notice rather than a stray paragraph. */
.alert-strip { background: var(--primary); color: #fff; }
.alert-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem var(--s-2, 1.25rem);
  padding-block: .8rem;
}
.alert-strip .tag {
  font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: .28rem .7rem; flex: none;
}
.alert-strip p { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.alert-strip a { color: #fff; text-decoration-color: var(--accent); }