/* ============================================================================
   i5Benchmark — round 2 components.

   Framework Signal Map hero, mobile navigation sheet, Challenge Signal
   Explorer, interactive domain architecture, benchmark pathway, evidence
   lineage, i5Index coordinate concept, UN SDG band, sticky page navigation
   and media slots.

   Inherits every token from i5.css. Adds no new colours beyond the existing
   palette and the single cobalt accent.
   ========================================================================== */

/* ==========================================================================
   1. Hero with the Framework Signal Map
   ========================================================================== */
.hero-sig {
  position: relative;
  padding-block: clamp(36px, 4vw, 60px) 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;              /* crops the oversized sphere */
  isolation: isolate;
}
/* Capped so a laptop viewport shows the start of the next section without
   shrinking the globe. Only applies where the sphere is a background bleed. */
@media (min-width: 1001px) {
  /* Capped so the next section starts to show on a 768-800px laptop viewport
     without shrinking the globe. */
  .hero-sig {
    min-height: clamp(620px, 76vh, 780px);
    max-height: clamp(620px, 82vh, 820px);
    display: flex; flex-direction: column; justify-content: center;
  }
}
.hero-sig__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 56px); align-items: start;
}
.hero-sig__copy { max-width: 60ch; }
.hero-sig h1 { max-width: 21ch; }
.hero-sig__lede { margin-top: clamp(20px, 2.4vw, 30px); max-width: 56ch; font-size: var(--step-1); line-height: 1.62; color: var(--graphite); }
.hero-sig__actions { margin-top: clamp(24px, 2.8vw, 36px); }
.hero-sig__link { margin-top: clamp(18px, 2vw, 26px); }

/* The map bleeds off the right and bottom edges, fading toward the copy. */
.sigmap {
  position: absolute; z-index: 1;
  inset: 0 -8% -16% 44%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.4) 5%, #000 13%);
          mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.4) 5%, #000 13%);
}
.sigmap { margin: 0; }            /* it is a <figure> */
.sigmap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: auto;
}
.sigmap { --sm-dot: #96948C; --sm-accent: #3B5CCC; --sm-ink: #111315; }
/* Canvas paints both states - animated, or drawn once under reduced motion -
   so there is no second DOM copy of the field to hide. */
.sigmap canvas { opacity: 0; }
.sigmap[data-signal-map="live"] canvas { opacity: 1; transition: opacity .5s var(--ease); }

/* Caption + signal-family controls sit in the flow, below the hero copy. */
.sigmap-legend {
  position: relative; z-index: 2;
  margin-top: clamp(28px, 4vw, 54px);
  padding-top: 16px; padding-bottom: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: auto 1fr; gap: 12px clamp(18px, 3vw, 32px);
  align-items: center;
}
.sigmap-legend__cap { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.sigmap-legend__fams { display: flex; flex-wrap: wrap; gap: 8px; justify-self: end; }
.sig-fam {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--panel);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--graphite);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.sig-fam::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.sig-fam:hover { border-color: var(--ink); color: var(--ink); }
.sig-fam[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
.sigmap-readout { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--graphite); min-height: 1.5em; }

@media (max-width: 1000px) {
  .hero-sig__grid { grid-template-columns: 1fr; }
  .hero-sig h1 { max-width: 24ch; }
  /* Keep the sphere behind the copy on the right, with a softer fade where
     the single-column text overlaps it. The hero clips the outer edge. */
  .sigmap {
    inset: 0 -34% 0 16%;
    opacity: .5;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.2) 22%, #000 62%);
            mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.2) 22%, #000 62%);
  }
  .sigmap-legend { grid-template-columns: 1fr; }
  .sigmap-legend__fams { justify-self: start; }
}
@media (max-width: 560px) {
  .sigmap { inset: 0 -42% 0 10%; opacity: .4; }
  .sig-fam { min-height: 44px; }
}

/* ==========================================================================
   2. Mobile navigation — full-width accordion sheet
   ========================================================================== */
.burger {
  display: none; margin-left: auto;
  align-items: center; gap: 9px;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink);
  font-size: 0.875rem; font-weight: 500;
}
.burger__bars { position: relative; display: block; width: 16px; height: 1px; background: currentColor; }
.burger__bars::before, .burger__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.burger__bars::before { top: -5px; } .burger__bars::after { top: 5px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { top: 0; transform: rotate(-45deg); }
.burger__label { line-height: 1; }
/* Round 1 styled `.burger span`, which also matches `.burger__label` and gave
   the label its own rotated pseudo-elements — two overlapping close icons.
   Confine the icon rules to the bars element. */
.burger .burger__label::before,
.burger .burger__label::after { content: none; display: none; }
.burger[aria-expanded="true"] .burger__label { background: transparent; }
/* Round 1's `.burger span` also forced a 17x1px block box on the label, so its
   text escaped the button. Restore intrinsic sizing. */
.burger .burger__label {
  width: auto; height: auto; background: transparent;
  display: inline-block; flex: none;
}
/* The header must never compress the Menu control at narrow widths. */
@media (max-width: 1080px) {
  .masthead__in { gap: 12px; }
  .burger { flex: none; white-space: nowrap; }
  .wordmark { min-width: 0; }
}
@media (max-width: 480px) {
  .burger__label { display: none; }        /* icon-only, still 44px, still labelled */
  .burger { min-width: 44px; padding: 0; justify-content: center; }
}

.msheet__backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(17,19,21,.34);
  opacity: 0; transition: opacity .2s var(--ease);
}
.msheet__backdrop[data-open="true"] { opacity: 1; }

/* Portalled to <body>: full viewport width, no side panel, no nested flyouts. */
.msheet {
  position: fixed;
  top: var(--mobile-nav-top, 108px);
  left: 0; right: 0; bottom: 0;
  width: 100vw; max-width: none;
  z-index: 200;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  max-height: calc(100dvh - var(--mobile-nav-top, 108px));
  overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.msheet[data-open="true"] { opacity: 1; transform: none; }
.msheet__scroll {
  height: 100%;
  max-height: calc(100dvh - var(--mobile-nav-top, 108px));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
}
.msheet__nav { display: block; }

.msheet__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 14px 2px;
  font-size: var(--step-1); font-weight: 500; color: var(--ink);
}
.msheet__row--home { border-bottom: 1px solid var(--rule); }
.msheet__arw { color: var(--accent); }

.msheet__group { border-bottom: 1px solid var(--rule); }
.msheet__head { display: flex; align-items: stretch; gap: 0; }
.msheet__row--parent { flex: 1 1 auto; min-width: 0; }
.msheet__group[data-current="true"] .msheet__row--parent { color: var(--accent); }
.msheet__expand {
  flex: 0 0 auto; width: 56px; min-height: 56px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-left: 1px solid var(--rule-soft);
  color: var(--graphite);
}
.msheet__expand svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.msheet__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.msheet__expand[aria-expanded="true"] { color: var(--accent); }

/* Children render inline at full width — no second column, no fly-out. */
.msheet__panel { padding-bottom: 10px; }
.msheet__child {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 2px 12px 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--step-0); color: var(--graphite);
}
.msheet__child:active, .msheet__child:hover { color: var(--accent); }
.msheet__child .tagx {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8A6A1F; flex: none;
}
.msheet__cta { width: 100%; margin-top: 24px; min-height: 52px; }

/* Body scroll lock, applied while the sheet is open. */
body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  /* The desktop nav is fully replaced by the sheet at these widths. */
  .nav { display: none; }
}

/* ==========================================================================
   3. Challenge Signal Explorer
   ========================================================================== */
.explorer { border-top: 1px solid var(--rule); }
/* Seven equal columns while the labels stay readable. Flex-wrap previously
   left a single orphaned tab on a second row. */
.explorer__tabs {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
  border-bottom: 1px solid var(--rule);
}
.explorer__tab {
  min-width: 0;
  min-height: 60px; padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: var(--panel); border: 0;
  border-right: 1px solid var(--rule);
  color: var(--graphite); text-align: left;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.explorer__tab:last-child { border-right: 0; }
.explorer__tab-k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; }
.explorer__tab-t { font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.explorer__tab:hover { background: var(--accent-tint); color: var(--ink); }
.explorer__tab[aria-selected="true"] {
  background: var(--ink); color: #F4F2EC;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.explorer__tab[aria-selected="true"] .explorer__tab-k { color: #A8B4E4; }

.explorer__panel { padding-top: clamp(26px, 3vw, 40px); }
.explorer__q { font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; }
.explorer__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: clamp(22px, 2.6vw, 32px); }

/* Journey rail: Promise → Delivery → Experience → Response → Remedy → Learning */
.journey { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid var(--rule); margin-top: clamp(24px, 3vw, 36px); }
.journey__step {
  position: relative; padding: 22px clamp(8px, 1vw, 14px) 22px 0;
  border-bottom: 1px solid var(--rule);
}
.journey__step::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule); transform: translateY(-50%);
}
.journey__step:not(:last-child)::after {
  content: ""; position: absolute; top: -1px; left: 7px; right: 0; height: 1px; background: var(--rule);
}
.journey__step[data-break="true"]::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.journey__n { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .11em; text-transform: uppercase; color: var(--graphite); }
.journey__t { margin-top: 8px; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.journey__step[data-break="true"] .journey__t { color: var(--accent-deep); }
.journey__step[data-break="true"] .journey__n { color: var(--accent); }
.journey__flag { display: block; margin-top: 8px; font-size: var(--step--1); line-height: 1.45; color: var(--graphite); }

.exfacts { border-top: 1px solid var(--rule); }
.exfacts > div {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px clamp(14px, 2vw, 28px);
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.exfacts dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.exfacts dd { margin: 0; font-size: var(--step-0); line-height: 1.55; }
.exfacts .dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.exsources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.exsource {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 11px;
  border: 1px solid var(--rule); border-radius: 5px;
  font-size: var(--step--1); color: var(--ink); background: var(--panel);
}
.exsource:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.exsource span { color: var(--graphite); }

/* Intermediate widths: a balanced 4 + 3, each row filling the full width, in
   place of seven columns too narrow to read. Twelve tracks divide as 3+3+3+3
   then 4+4+4. */
@media (max-width: 1239px) and (min-width: 861px) {
  .explorer__tabs { grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 0; }
  .explorer__tab { border-bottom: 1px solid var(--rule); }
  .explorer__tab:nth-child(-n+4) { grid-column: span 3; }
  .explorer__tab:nth-child(n+5) { grid-column: span 4; }
  .explorer__tab:nth-child(4), .explorer__tab:nth-child(7) { border-right: 0; }
}
@media (max-width: 1000px) {
  .explorer__body { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .explorer__tabs { grid-template-columns: repeat(2, minmax(0,1fr)); border-bottom: 0; }
  .explorer__tab { min-height: 62px; border-bottom: 1px solid var(--rule); }
  .explorer__tab:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) {
  .explorer__tabs { grid-template-columns: 1fr; }
  .explorer__tab { border-right: 0; }
  .journey { grid-template-columns: 1fr; border-top: 0; }
  .journey__step { padding: 16px 0 16px 22px; border-top: 1px solid var(--rule); border-bottom: 0; }
  .journey__step::before { top: 22px; left: 0; }
  .journey__step:not(:last-child)::after { top: 22px; left: 3px; right: auto; bottom: -16px; width: 1px; height: auto; }
  .journey__step:last-child { border-bottom: 1px solid var(--rule); }
  .exfacts > div { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. Interactive five-domain architecture
   ========================================================================== */
.darch { border-top: 1px solid var(--rule); }
.darch__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.darch__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.darch__grid--enable { grid-template-columns: repeat(2, minmax(0,1fr)); }

.dnode {
  position: relative; width: 100%; text-align: left;
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 28px);
  background: var(--panel); border: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
  transition: background-color .2s var(--ease);
  cursor: pointer;
}
.dnode:last-child { border-right: 0; }
.darch__grid .dnode:nth-child(3) { border-right: 0; }
.dnode--enable { background: var(--panel-deep); }
.dnode:hover, .dnode[aria-expanded="true"] { background: var(--accent-tint); }
.dnode__k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; color: var(--accent); }
.dnode__n { font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.16; font-weight: 500; }
.dnode--enable .dnode__n { font-size: var(--step-2); }
.dnode__d { font-size: var(--step-0); line-height: 1.58; color: var(--graphite); margin: 0; }
.dnode__more {
  margin-top: auto; padding-top: 14px;
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 7px;
}
.dnode__more svg { width: 10px; height: 10px; transition: transform .2s var(--ease); }
.dnode[aria-expanded="true"] .dnode__more svg { transform: rotate(180deg); }

/* Detail is a normal block in the flow, present in the HTML for accessibility. */
.dnode-detail {
  grid-column: 1 / -1;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-edge);
}
.dnode-detail[hidden] { display: none; }
.dnode-detail__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 2.4vw, 36px); }
.dnode-detail h4 { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-deep); font-weight: 500; margin-bottom: 10px; }
.dnode-detail p { font-size: var(--step-0); line-height: 1.6; color: var(--ink); margin: 0; }
.dnode-detail ul { margin-top: 10px; }
.dnode-detail li { list-style: none; padding: 7px 0; border-top: 1px solid var(--accent-edge); font-size: var(--step--1); line-height: 1.5; color: var(--ink); }

.xband {
  display: grid; grid-template-columns: auto 1fr; gap: 8px clamp(18px, 3vw, 34px);
  align-items: baseline; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 32px);
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
.xband > .label { padding-top: 4px; }
.xband__n { font-size: var(--step-2); letter-spacing: -0.016em; font-weight: 500; }
.xband__l { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 10px; }
.xband__l li { list-style: none; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.xband__l li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--rule); }
.xband__note { grid-column: 2; margin-top: 12px; font-size: var(--step--1); color: var(--graphite); }

@media (max-width: 940px) {
  .darch__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .darch__grid .dnode:nth-child(2) { border-right: 0; }
  .darch__grid .dnode:nth-child(3) { border-right: 1px solid var(--rule); }
  .dnode-detail__grid { grid-template-columns: 1fr; }
  .xband { grid-template-columns: 1fr; }
  .xband__l, .xband__note { grid-column: 1; }
}
@media (max-width: 640px) {
  .darch__grid, .darch__grid--enable { grid-template-columns: 1fr; }
  .dnode { border-right: 0 !important; }
}

/* ==========================================================================
   5. Benchmark, Response & Improvement pathway
   ========================================================================== */
.bri { border-top: 1px solid var(--rule); }
.bri__steps { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.bri__step {
  position: relative; padding: 26px clamp(10px, 1.2vw, 18px) 26px 0;
  border-bottom: 1px solid var(--rule);
}
.bri__step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); transform: translateY(-50%);
}
.bri__step:not(:last-child)::after {
  content: ""; position: absolute; top: -1px; left: 7px; right: 0; height: 1px; background: var(--rule);
}
.bri__n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; color: var(--accent); }
.bri__t { margin-top: 11px; font-size: var(--step-1); letter-spacing: -0.012em; line-height: 1.3; font-weight: 500; }
.bri__p { margin-top: 9px; font-size: var(--step--1); line-height: 1.5; color: var(--graphite); }
@media (max-width: 1080px) { .bri__steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .bri__steps { grid-template-columns: 1fr; }
  .bri { border-top: 0; }
  .bri__step { padding: 18px 0 18px 22px; border-top: 1px solid var(--rule); border-bottom: 0; }
  .bri__step::before { top: 24px; left: 0; }
  .bri__step:not(:last-child)::after { top: 24px; left: 3px; right: auto; bottom: -18px; width: 1px; height: auto; }
  .bri__step:last-child { border-bottom: 1px solid var(--rule); }
}

/* ==========================================================================
   6. Evidence lineage + foundations
   ========================================================================== */
.lineage { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.lineage__track { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.lineage__frame { padding: 14px 18px; border-bottom: 1px solid var(--rule); background: #fbfaf8; }
.lineage__frame p { max-width: 78ch; }
.lineage__frame p[hidden] { display: none; }
.lin-step {
  position: relative; width: 100%; text-align: left;
  padding: 18px 14px 20px; background: var(--panel); border: 0;
  border-right: 1px solid var(--rule);
  transition: background-color .18s var(--ease);
  cursor: pointer;
}
.lin-step:last-child { border-right: 0; }
.lin-step:hover { background: var(--accent-tint); }
.lin-step[aria-selected="true"] { background: var(--accent-tint); box-shadow: inset 0 -2px 0 var(--accent); }
.lin-step__k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lin-step__t { margin-top: 8px; font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.lineage__detail {
  padding: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rule);
  background: var(--panel-deep);
}
.lineage__detail[hidden] { display: none; }
.lineage__detail h3 { font-size: var(--step-2); letter-spacing: -0.016em; }
.lineage__detail p { margin-top: 10px; font-size: var(--step-0); line-height: 1.6; color: var(--graphite); max-width: 74ch; }
@media (max-width: 1000px) { .lineage__track { grid-template-columns: repeat(4, minmax(0,1fr)); } .lin-step { border-bottom: 1px solid var(--rule); } }
@media (max-width: 620px) { .lineage__track { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.founds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.found { padding: clamp(20px, 2.4vw, 28px); background: var(--panel); border-right: 1px solid var(--rule); }
.found:last-child { border-right: 0; }
.found__k { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.found__t { margin-top: 12px; font-size: var(--step-2); letter-spacing: -0.016em; line-height: 1.22; }
.found__p { margin-top: 10px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
@media (max-width: 1000px) {
  .founds { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .found:nth-child(2) { border-right: 0; }
  .found:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .founds { grid-template-columns: 1fr; }
  .found { border-right: 0; border-bottom: 1px solid var(--rule); }
  .found:last-child { border-bottom: 0; }
}

/* ==========================================================================
   7. i5Index coordinate concept
   ========================================================================== */
.coord { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.coord__bar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--panel-deep);
}
.coord__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.coord__plot { position: relative; padding: clamp(14px, 2vw, 24px); }
.coord__plot svg { display: block; width: 100%; height: auto; }
.coord .cg-grid { stroke: var(--rule); stroke-width: 1; }
.coord .cg-axis { stroke: var(--rule); stroke-width: 1; }
.coord .cg-label { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; fill: var(--graphite); text-transform: uppercase; }
.coord .cg-pt { fill: var(--ink); opacity: .42; }
.coord .cg-halo { fill: var(--accent); opacity: 0; transition: opacity .3s var(--ease), r .3s var(--ease); }
.coord .cg-traj { stroke: var(--accent); stroke-width: 1; fill: none; stroke-dasharray: 2 3; opacity: 0; transition: opacity .3s var(--ease); }
.coord .cg-cohort { fill: none; stroke: var(--accent-edge); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .3s var(--ease); }
.coord[data-coverage="on"] .cg-halo { opacity: .2; }
.coord[data-context="on"] .cg-cohort { opacity: 1; }
.coord[data-change="on"] .cg-traj { opacity: .75; }
.coord__foot { padding: 14px 18px; border-top: 1px solid var(--rule); }

/* ==========================================================================
   8. UN SDG Acceleration Action band
   ========================================================================== */
.sdg { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--panel); }
.sdg__grid {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px); align-items: center;
  padding-block: clamp(28px, 3.4vw, 44px);
}
/* The supplied mark is a wide lock-up (403x152), so it is placed on its own
   rather than boxed into a square slot. */
.sdg__mark {
  width: 168px; height: auto; display: block;
}
.sdg__t { font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.18; }
.sdg__p { margin-top: 12px; font-size: var(--step-0); line-height: 1.6; color: var(--graphite); max-width: 72ch; }
.sdg__cta { white-space: normal; text-align: center; height: auto; min-height: 46px; padding-block: 11px; }
@media (max-width: 900px) {
  .sdg__grid { grid-template-columns: 1fr; }
  .sdg__mark { width: 148px; }
  .sdg__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 420px) { .sdg__cta { width: 100%; } }

/* ==========================================================================
   9. Sticky in-page navigation (long destination pages)
   ========================================================================== */
/* The masthead is sticky at top:0, so the page navigation must stack directly
   beneath it rather than under it. Heights are measured in i5.js; the fallbacks
   match the built layout (68px min-height + 1px rule, 52px nav). */
:root { --masthead-h: 69px; --pagenav-h: 52px; --anchor-gap: 18px; }
.pagenav {
  position: sticky; top: var(--masthead-h, 69px); z-index: 40;
  background: rgba(244,242,236,.96);
  border-bottom: 1px solid var(--rule);
}
.pagenav__in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pagenav__in::-webkit-scrollbar { display: none; }
.pagenav a {
  flex: none; padding: 13px 12px;
  font-size: 0.875rem; color: var(--graphite); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.pagenav a:hover { color: var(--ink); }
.pagenav a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
/* Sections offset so neither sticky bar covers a heading it links to.
   Must clear the masthead AND the page navigation, plus a small visual gap. */
[data-anchor] {
  scroll-margin-top: calc(var(--masthead-h, 69px) + var(--pagenav-h, 52px) + var(--anchor-gap, 18px));
}
/* Pages with no in-page navigation only need to clear the masthead. */
body:not(:has(.pagenav)) [data-anchor] {
  scroll-margin-top: calc(var(--masthead-h, 69px) + var(--anchor-gap, 18px));
}

/* ==========================================================================
   10. Media slots — fixed ratio, no visible placeholder text
   ========================================================================== */
[data-image-slot] {
  display: block; width: 100%;
  background: var(--panel-deep);
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; position: relative;
}
[data-image-slot] img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-image-slot][data-ratio="4-3"]  { aspect-ratio: 4 / 3; }
[data-image-slot][data-ratio="3-2"]  { aspect-ratio: 3 / 2; }
[data-image-slot][data-ratio="16-9"] { aspect-ratio: 16 / 9; }
[data-image-slot][data-ratio="21-9"] { aspect-ratio: 21 / 9; }
[data-image-slot][data-ratio="1-1"]  { aspect-ratio: 1 / 1; }
/* Quiet neutral composition until a real asset is supplied. */
[data-image-slot]:empty::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(59,92,204,.05), transparent 62%),
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(17,19,21,.022) 26px 27px);
}

/* ==========================================================================
   11. Filter chips (Cases & Research contexts)
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--panel); color: var(--ink); font-size: 0.875rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
.filter__n { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .09em; color: var(--graphite); }
[data-context-card][hidden] { display: none; }

/* ==========================================================================
   12. Compact footer adjustments
   ========================================================================== */
.footer__grid--compact { grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .footer__grid--compact { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer__grid--compact { grid-template-columns: 1fr; } }

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .msheet, .msheet__backdrop { transition: none; }
  .sigmap canvas { opacity: 1; transition: none; }
  .coord .cg-halo, .coord .cg-traj, .coord .cg-cohort { transition: none; }
}

/* ==========================================================================
   14. Desktop nav: parent link + caret toggle
   The parent label stays a real link to the destination page. The caret is a
   separate button layered over the caret glyph, so keyboard users can open the
   section list without losing access to the page itself.
   ========================================================================== */
.nav__item { position: relative; }
.nav__item[data-dropdown] .nav__link { padding-right: 28px; }
.nav__toggle {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  width: 26px; height: 30px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.nav__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.nav__caret { pointer-events: none; }

/* ==========================================================================
   15. Round-2 visual review corrections
   ========================================================================== */

/* Card meta lines were inline, so "Domains:" ran straight into the question
   text. Give them their own line with a clear space above. */
.cell__meta { display: block; margin-top: 10px; }

/* The Challenge Library holds seven records. In a three-column grid that
   leaves the last card orphaned beside two empty cells; auto-fit lets the
   final row centre and fill instead. */
.matrix--3.matrix--flow {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 1240px) {
  /* Four across, then three across: no empty cells at either end. */
  .matrix--3.matrix--flow { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .matrix--3.matrix--flow > :nth-child(-n+4) { grid-column: span 3; }
  .matrix--3.matrix--flow > :nth-child(n+5)  { grid-column: span 4; }
}
/* Three columns would leave the seventh card alone on a third row, so the
   last three share that row as 2 + 2 + 2 halves of a six-track grid. */
@media (min-width: 1100px) and (max-width: 1239px) {
  .matrix--3.matrix--flow { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .matrix--3.matrix--flow > :nth-child(-n+4) { grid-column: span 3; }
  .matrix--3.matrix--flow > :nth-child(n+5)  { grid-column: span 4; }
}
/* Below that, four across would drop each card under ~240px, so the rows run
   3 + 2 + 2 across a six-track grid and stay legible. */
@media (min-width: 861px) and (max-width: 1099px) {
  .matrix--3.matrix--flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .matrix--3.matrix--flow > :nth-child(-n+3) { grid-column: span 2; }
  .matrix--3.matrix--flow > :nth-child(n+4)  { grid-column: span 3; }
}

/* ==========================================================================
   16. Challenge experience — journey, gap view, Explorer, Challenge Map
   ========================================================================== */

/* ---- Journey: number, phase label and stage title on separate lines ---- */
.journey__phase {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: .12em;
  text-transform: uppercase; color: #9A9C97;
}
.journey__t { display: block; }
.journey__step[data-break="true"] .journey__phase { color: var(--accent); }
.journey__step[data-related="true"] .journey__phase { color: #8A6A1F; }
.journey__step[data-related="true"]::before { background: #C9A227; }
/* The breakdown is marked with weight and colour, never by taking width from
   its neighbours: every stage keeps an equal track. */
.journey__step[data-break="true"] { background: linear-gradient(180deg, var(--accent-tint), transparent 70%); }

/* Vertical stepper on mobile: a continuous rail down the left edge. */
@media (max-width: 620px) {
  .journey { position: relative; padding-left: 22px; }
  .journey::before {
    content: ""; position: absolute; top: 6px; bottom: 6px; left: 3px;
    width: 1px; background: var(--rule);
  }
  .journey__step { padding: 14px 0 14px 4px; }
  .journey__step::before { left: -19px; top: 22px; }
  .journey__step:not(:last-child)::after { display: none; }
  .journey__step[data-break="true"] { background: none; }
  .journey__step[data-break="true"]::before { box-shadow: 0 0 0 3px var(--accent-tint); }
}

/* ---- Two perspectives, balanced side by side ---- */
.gapview {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(24px, 3vw, 34px);
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden;
}
.gapview__side { padding: clamp(16px, 2vw, 22px); background: var(--panel); }
.gapview__side--alt { background: var(--accent-tint); }
.gapview__hd { margin-top: 10px; font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.gapview__side--alt .gapview__hd { color: var(--accent-deep); }
.gapview__p { margin-top: 8px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
@media (max-width: 720px) { .gapview { grid-template-columns: 1fr; } }

/* ---- Evidence state: known / disputed / missing ---- */
.estate {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px); margin-top: clamp(22px, 2.6vw, 32px);
}
.estate__col { padding-top: 14px; border-top: 2px solid var(--rule); }
.estate__col:nth-child(2) { border-top-color: #C9A227; }
.estate__col:nth-child(3) { border-top-color: #B4483C; }
@media (max-width: 860px) { .estate { grid-template-columns: 1fr; } }

/* ---- Explorer stages ---- */
.xplorer { border-top: 1px solid var(--rule); }
.xstage { padding-block: clamp(26px, 3.4vw, 42px); border-bottom: 1px solid var(--rule); }
.xstage:last-child { border-bottom: 0; }
.xstage__hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xstage__n {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.xstage__t { font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.22; }
.xstage__body { margin-top: clamp(18px, 2.4vw, 26px); }

.xchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
@media (max-width: 1000px) { .xchips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .xchips { grid-template-columns: 1fr; } }
.xchip {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  min-height: 44px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--graphite);
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.xchip:hover { border-color: var(--ink); color: var(--ink); }
.xchip[aria-selected="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.xchip__k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.xchip__t { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.xchip__c { font-size: var(--step--1); line-height: 1.4; color: var(--graphite); }
.xchip--own { border-style: dashed; }

.xdef__list { border-top: 1px solid var(--rule); }
.xdef__list > div {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 6px clamp(14px, 2vw, 28px); padding: 14px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .xdef__list > div { grid-template-columns: 1fr; } }
.xdef__list dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.xdef__list dd { margin: 0; font-size: var(--step-0); line-height: 1.55; }
.xdef__note { display: block; margin-top: 6px; font-size: var(--step--1); line-height: 1.5; color: var(--graphite); }
.xdef__lede { font-size: var(--step-0); line-height: 1.6; color: var(--graphite); max-width: 76ch; }

.xq {
  margin-top: clamp(22px, 2.6vw, 30px); padding: clamp(16px, 2vw, 22px);
  border-left: 2px solid var(--accent); background: var(--accent-tint);
  font-size: var(--step-1); line-height: 1.45; color: var(--ink);
}
.xq .exgrid__k { display: block; margin-bottom: 8px; }

/* ---- Challenge Brief ---- */
.brief { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel); padding: clamp(18px, 2.2vw, 26px); }
.brief__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.brief__t { font-size: var(--step-1); font-weight: 500; }
.brief__meta { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.brief__list > div {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 6px clamp(14px, 2vw, 28px); padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.brief__list > div:last-child { border-bottom: 0; }
@media (max-width: 720px) { .brief__list > div { grid-template-columns: 1fr; } }
.brief__list dt { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.brief__list dd { margin: 0; font-size: var(--step--1); line-height: 1.55; }
.brief__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.2vw, 26px); }
.brief__status { margin-top: 12px; min-height: 1.4em; font-size: var(--step--1); color: var(--accent-deep); }

/* ---- Challenge Map: challenge-by-domain matrix ---- */
.cmap { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.cmap__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmap__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmap__corner { border-bottom: 1px solid var(--rule); }
.cmap__dh { padding: 0; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); vertical-align: bottom; background: var(--panel); }
.cmap__dh[data-active="true"] { background: var(--accent-tint); }
.cmap__dbtn {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  width: 100%; min-height: 64px; padding: 12px 10px; text-align: left;
  background: transparent; border: 0; color: var(--graphite);
}
.cmap__dbtn:hover { color: var(--ink); background: var(--accent-tint); }
.cmap__dcode { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; color: var(--accent); }
.cmap__dname { font-size: 0.8125rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.cmap__dh--enabling .cmap__dcode { color: #8A6A1F; }
.cmap__rh { padding: 0; border-bottom: 1px solid var(--rule); text-align: left; }
.cmap__rbtn {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  width: 100%; min-height: 56px; padding: 12px 12px 12px 14px; text-align: left;
  background: transparent; border: 0; color: var(--ink);
}
.cmap__rbtn:hover { background: var(--accent-tint); }
.cmap__rcode { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; color: var(--accent); }
.cmap__rname { font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
.cmap__cell {
  border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule);
  text-align: center; vertical-align: middle; padding: 10px 6px;
}
.cmap__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #B9BAB4; }
.cmap__cell[data-primary="true"] .cmap__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cmap__none { color: #CFCFC8; }
.cmap__table tr[data-active="true"] .cmap__rbtn { background: var(--accent-tint); }
.cmap__cell[data-active="true"] { background: var(--accent-tint); }
.cmap__cell[data-active="true"] .cmap__dot { background: var(--accent); }
.cmap__cross { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(14px, 2vw, 24px); align-items: start; padding: clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--rule); background: var(--panel-deep); }
@media (max-width: 720px) { .cmap__cross { grid-template-columns: 1fr; } }
.cmap__crossk { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cmap__crossp { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.cmap__read { margin: 0; padding: 12px clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink); min-height: 1.4em; }

.estatus--inline { display: block; padding: 14px 0; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.estatus--inline .tagx { margin-right: 10px; }

/* ==========================================================================
   17. Foundational Design Charter
   ========================================================================== */
.charter { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg); }
.charter__masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px); align-items: start;
  padding: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--rule); background: var(--panel);
}
@media (max-width: 820px) { .charter__masthead { grid-template-columns: 1fr; } }
.charter__k { font-size: 0.625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.charter__t { margin-top: 8px; font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.2; }
.charter__meta { margin-top: 10px; font-size: var(--step-0); font-weight: 500; color: var(--ink); }
.charter__auth { margin-top: 6px; font-size: var(--step--1); color: var(--graphite); }
.charter__dl { display: grid; gap: 10px; justify-items: start; }
.charter__dlmeta { font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.charter__lede {
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.6vw, 30px) 0;
  font-size: var(--step-0); line-height: 1.62; color: var(--graphite); max-width: 84ch;
}
.charter__block { padding: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--rule); }
.charter__block:first-of-type { margin-top: clamp(16px, 2vw, 22px); }
.charter__h { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em; }
.charter__h5 { margin-top: clamp(20px, 2.4vw, 28px); font-size: var(--step-0); font-weight: 500; }
.charter__note { margin-top: 10px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); max-width: 84ch; }
.charter__quote {
  margin: 14px 0 0; padding: clamp(14px, 1.8vw, 20px);
  border-left: 2px solid var(--accent); background: var(--accent-tint);
  font-size: var(--step-0); line-height: 1.6; color: var(--ink);
}
.chdl { margin-top: 16px; border-top: 1px solid var(--rule); }
.chdl > div {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 6px clamp(14px, 2vw, 28px); padding: 13px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .chdl > div { grid-template-columns: 1fr; } }
.chdl dt { font-size: var(--step-0); font-weight: 500; line-height: 1.35; }
.chdl dd { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.chtag {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--rule); border-radius: 3px;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite); vertical-align: 2px;
}
.chcycle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 1000px) { .chcycle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .chcycle { grid-template-columns: 1fr; } }
.chcycle__step { display: flex; gap: 9px; padding: 12px 11px; background: var(--panel); font-size: var(--step--1); line-height: 1.4; }
.chcycle__n { font-family: var(--mono); font-size: 0.5625rem; color: var(--accent); flex: none; padding-top: 2px; }
.chsecs { margin-top: 16px; border-top: 1px solid var(--rule); }
.chsec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.chsec__n { font-family: var(--mono); font-size: 0.6875rem; color: var(--accent); padding-top: 3px; min-width: 1.6em; }
.chsec__t { font-size: var(--step-0); font-weight: 500; line-height: 1.35; }
.chsec__p { margin-top: 6px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.charter__foot { display: grid; gap: 16px; justify-items: start; padding: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--rule); background: var(--panel); }

/* The Charter download label is long ("Download the Charter (PDF, 254 KB)"),
   so it must wrap rather than force the page wider at 320px. */
.charter__dl .btn, .charter__foot .btn {
  white-space: normal; text-align: left; height: auto; min-height: 46px; padding-block: 11px;
}
@media (max-width: 520px) {
  .charter__dl, .charter__foot { justify-items: stretch; }
  .charter__dl .btn, .charter__foot .btn { width: 100%; text-align: center; }
  .brief__acts { display: grid; grid-template-columns: 1fr; }
  .brief__acts .btn { width: 100%; white-space: normal; height: auto; min-height: 46px; padding-block: 11px; text-align: center; }
}

/* ==========================================================================
   18. Record grid — labels and values (previously unstyled)
   ========================================================================== */
.exgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(22px, 2.6vw, 32px);
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden;
}
.exgrid__cell { padding: clamp(14px, 1.8vw, 20px); background: var(--panel); }
.exgrid__cell--wide { grid-column: 1 / -1; }
/* The key must read as a label, not as another line of body text. */
.exgrid__k {
  display: block;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite);
}
.exgrid__v { margin-top: 9px; font-size: var(--step--1); line-height: 1.55; }
.exgrid__v--q { font-size: var(--step-0); line-height: 1.5; color: var(--accent-deep); }
.exgrid__list { margin-top: 9px; padding-left: 18px; }
.exgrid__list li { font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.exgrid__list li + li { margin-top: 5px; }
.exgrid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .exgrid, .exgrid--compact { grid-template-columns: 1fr; } }

.estate__col .exgrid__list { margin-top: 10px; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; }

.exfoot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--rule);
}
@media (max-width: 900px) { .exfoot { grid-template-columns: 1fr; } }

.explorer__lede { margin-top: 12px; font-size: var(--step-1); line-height: 1.55; color: var(--graphite); max-width: 68ch; }
.explorer__read {
  margin-top: clamp(20px, 2.4vw, 28px); padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: var(--step-0); line-height: 1.6; color: var(--ink); max-width: 78ch;
}
.explorer__cta { margin-top: clamp(20px, 2.4vw, 28px); }

/* ==========================================================================
   19. Supplied figures
   ========================================================================== */
.fig { margin: 0; }
.fig__img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel-deep);
}
.fig__cap {
  margin-top: 12px; font-size: var(--step--1); line-height: 1.55;
  color: var(--graphite); max-width: 84ch;
}

/* A row of supplied images. One fixed frame per tile so the three share a
   height; the source ratios differ slightly. */
.figrow { margin: 0; }
.figrow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 860px) { .figrow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .figrow__grid { grid-template-columns: 1fr; } }
.figrow__img {
  height: auto;
  display: block; width: 100%; height: 100%; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel-deep);
}
.figrow__img[data-ratio="3-2"] { aspect-ratio: 3 / 2; }
.figrow__img[data-ratio="4-3"] { aspect-ratio: 4 / 3; }

/* ---- Citable publication records ---- */
.cites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 900px) { .cites { grid-template-columns: 1fr; } }
.cite { padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg); }
.cite__t { font-size: var(--step-1); font-weight: 500; line-height: 1.28; }
.cite__status { margin-top: 8px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cite__sum { margin-top: 12px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }
.cite__meta { margin-top: 16px; border-top: 1px solid var(--rule); }
.cite__meta > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 620px) { .cite__meta > div { grid-template-columns: 1fr; } }
.cite__meta dt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); padding-top: 2px; }
.cite__meta dd { margin: 0; font-size: var(--step--1); line-height: 1.5; word-break: break-word; }
.cite__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ==========================================================================
   20. Challenges page layout and the local draft form
   ========================================================================== */

/* On /challenges/ the masthead title and introduction stack vertically. */
body.page-challenges .phero__grid { grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 28px); }
body.page-challenges .phero__grid > div:last-child .body { max-width: 78ch; }

/* Section headings sit above their explanatory copy rather than beside it. */
.split--stack { grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
.split--stack .stack { max-width: 82ch; }

/* The Challenge Brief actions previously left a large blank gap before the
   next section, because the status line reserved space it rarely used. */
.brief__status:empty { min-height: 0; margin-top: 0; }
.xstage:last-child { padding-bottom: clamp(18px, 2.2vw, 26px); }

/* ---- Local-only draft form ---- */
.ownform { margin-top: clamp(18px, 2.2vw, 26px); }
.ownform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 760px) { .ownform__grid { grid-template-columns: 1fr; } }
.ownform__field { margin: 0; display: grid; gap: 7px; }
.ownform__field--wide { grid-column: 1 / -1; }
.ownform__field label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.ownform__opt { text-transform: none; letter-spacing: 0; color: #9A9C97; }
.ownform__field input, .ownform__field select, .ownform__field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.ownform__field textarea { min-height: 68px; resize: vertical; line-height: 1.5; }
.ownform__field input:focus-visible, .ownform__field select:focus-visible, .ownform__field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.ownform__set { margin-top: clamp(18px, 2.2vw, 26px); padding: 0; border: 0; }
.ownform__set legend { padding: 0; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.ownform__hint { margin-top: 6px; font-size: var(--step--1); color: var(--graphite); }
.ownform__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .ownform__checks { grid-template-columns: 1fr; } }
.ownform__check {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg); font-size: var(--step--1); line-height: 1.4;
}
.ownform__check:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.ownform__check input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.ownform__ccode { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .08em; color: var(--accent); }
.ownform__ckind { font-family: var(--mono); font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; color: #9A9C97; }
.ownform__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.2vw, 26px); }
.ownform__status { margin-top: 10px; font-size: var(--step--1); color: var(--accent-deep); }
.ownform__status:empty { margin-top: 0; }
.ownform__empty { font-size: var(--step--1); color: var(--graphite); }
.brief--draft { border-style: dashed; }
@media (max-width: 520px) {
  .ownform__acts { display: grid; grid-template-columns: 1fr; }
  .ownform__acts .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   21. Application pathway (Case & Pilot Library)
   ========================================================================== */
.pathway {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px); margin-top: clamp(20px, 2.4vw, 30px);
  list-style: none; padding: 0; counter-reset: none;
}
@media (max-width: 900px) { .pathway { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pathway { grid-template-columns: 1fr; } }
.pathway__step {
  display: flex; flex-direction: column;
  padding-bottom: 4px; border-top: 2px solid var(--rule); padding-top: 16px;
}
.pathway__step:first-child { border-top-color: var(--accent); }
.pathway__media { display: block; margin-bottom: 16px; }
.pathway__media img {
  /* height:auto is required: without it the HTML height attribute wins over
     aspect-ratio and each image keeps its natural height, misaligning the
     three steps. */
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel-deep);
}
a.pathway__media img { transition: border-color .18s var(--ease), opacity .18s var(--ease); }
a.pathway__media:hover img { border-color: var(--accent); opacity: .94; }
.pathway__n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; color: var(--accent); }
.pathway__t { margin-top: 8px; font-size: var(--step-1); font-weight: 500; line-height: 1.28; }
.pathway__link { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid var(--accent-edge); }
.pathway__link:hover { border-bottom-color: var(--accent); }
.pathway__p { margin-top: 10px; font-size: var(--step--1); line-height: 1.55; color: var(--graphite); }

/* ======================================================================
   22. Legal definition lists (Round 6, item 6)
   Used in the Privacy Notice to set the two demonstration data stores
   side by side, so temporary and browser-persisted data cannot be read
   as the same thing.
   ====================================================================== */
.prose .legal-dl { margin: 18px 0 0; display: grid; gap: 14px; }
.prose .legal-dl > div { border-left: 2px solid var(--accent-edge); padding: 2px 0 2px 16px; }
.prose .legal-dl dt { font-size: var(--step-0); font-weight: 500; color: var(--ink); line-height: 1.5; }
.prose .legal-dl dd { margin: 7px 0 0; font-size: var(--step-0); line-height: 1.65; color: var(--graphite); }
.prose .legal-dl em { font-style: normal; font-family: var(--mono); font-size: .875em; }