/* ==========================================================================
   CDTIN design system
   Palette and components taken from the 2025 CDTIN x INGRYD design.
   Jade #118059 and indigo #18183D were SAMPLED from the comp, not chosen.
   Typeface is Poppins, as in the comp, self-hosted and latin-subset.

   Hard constraints: no external request of any kind (CSP default-src 'self');
   no inline styles (style-src 'self'); every page usable on a weak mobile
   connection and with JavaScript disabled.
   Values are hex, not oklch, because a large share of the audience is on older
   Android browsers.
   ========================================================================== */

@font-face{font-family:Poppins;src:url(/fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* jade — the brand carries the surface */
  --jade-900:#0A4A33; --jade-800:#0D6344; --jade:#118059; --jade-600:#16966A;
  --jade-500:#1FAE7C; --jade-100:#E4F4ED; --jade-50:#F1FAF6;
  /* indigo — weight, headings, dark sections */
  --indigo:#18183D; --indigo-800:#22224F; --indigo-700:#2E2E66; --indigo-100:#E7E7F1;
  /* neutrals, tinted toward jade */
  --ink:#18211E; --ink-70:#4A5754; --ink-50:#6E7A77; --ink-40:#939E9A;
  --line:#DCE5E1; --line-soft:#EDF2EF; --paper:#F7FAF8; --surface:#FFFFFF;
  /* accent from the CDTIN mark; accent only, never a surface */
  --gold:#E8B321; --gold-100:#FDF3D6;
  --danger:#A4231C; --danger-bg:#FBEBEA; --warn:#7A5300; --warn-bg:#FDF3D6;

  --r-sm:8px; --r:14px; --r-lg:22px; --pill:999px;
  --shadow:0 1px 2px rgba(24,33,30,.05), 0 8px 28px -12px rgba(10,74,51,.16);
  --wrap:1180px; --gutter:clamp(1.1rem,4vw,2rem);
  --sans:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --focus:3px solid var(--gold);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);
     background:var(--paper);-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--jade-800);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--jade)}
:focus-visible{outline:var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--jade-100);color:var(--jade-900)}

h1,h2,h3,h4{margin:0 0 .5em;color:var(--indigo);font-weight:700;line-height:1.12;letter-spacing:-.025em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);letter-spacing:-.02em;line-height:1.18}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.01em;line-height:1.28}
h4{font-size:1.02rem;font-weight:600;letter-spacing:0}
p,ul,ol{margin:0 0 1rem}
strong{font-weight:600;color:var(--indigo)}
small,.small{font-size:.85rem;line-height:1.55}
.muted{color:var(--ink-70)}
.lead{font-size:clamp(1.08rem,1.02rem + .4vw,1.28rem);line-height:1.55;color:var(--ink-70)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ---------------------------------------------------------------- skeleton */
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
.wrap-narrow{width:min(720px,100% - 2 * var(--gutter));margin-inline:auto}
.section{padding:clamp(2.75rem,6vw,5rem) 0}
.section--tight{padding:clamp(1.75rem,4vw,2.75rem) 0}
.section--surface{background:var(--surface)}
.section--soft{background:var(--jade-50)}
.section--navy{background:var(--indigo);color:#DEE0EC}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy a:not(.btn){color:#fff}
.section--navy .muted{color:#A9AEC8}
.section--navy .prose code,.section--green .prose code{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.section--green{background:var(--jade-800);color:#EDF8F2}
.section--green h1,.section--green h2,.section--green h3,.section--green h4{color:#fff}
.section--green a:not(.btn){color:#fff}
.section--green .muted{color:#CBE6D9}
.stack>*+*{margin-top:1rem}
.stack-lg>*+*{margin-top:clamp(1.5rem,3vw,2.25rem)}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.flow-between{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
            box-shadow:var(--shadow)}

/* ------------------------------------------------------------------ header */
.masthead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.masthead__bar{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);
               padding:.9rem 0;min-height:88px}
.brand{display:flex;align-items:center;gap:.48rem;text-decoration:none;color:var(--indigo);min-width:0}
.brand__seal{width:58px;height:58px;flex:0 0 58px;object-fit:contain}
/* Measured from the 2025 header, expressed as ratios of the seal (144px there, 58px here):
   gap 0.132 · line-height 0.212 · cap-height 0.120 · text block 2.41 wide.
   It sets in THREE lines: OFFICE OF THE SPECIAL / ASSISTANT TO THE PRESIDENT /
   ON CAPACITY DEVELOPMENT. No text-wrap:balance — balancing breaks that pattern. */
.brand__office{font-size:.605rem;font-weight:700;line-height:1.27;letter-spacing:.008em;
               text-transform:uppercase;color:var(--indigo);width:9.6rem;text-wrap:wrap}
.brand__x{color:var(--ink-40);font-size:.9rem;font-weight:400;flex:0 0 auto;margin-inline:.35rem}
.brand__lockup{height:34px;width:auto;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.nav a:not(.btn){padding:.5rem .72rem;border-radius:var(--pill);text-decoration:none;color:var(--ink-70);
       font-weight:500;font-size:.94rem;white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease)}
.nav a:not(.btn):hover{color:var(--indigo);background:var(--jade-50)}
.nav a:not(.btn)[aria-current=page]{color:var(--jade-800);font-weight:600;background:var(--jade-100)}
.nav .btn{margin-left:.4rem}
.nav-toggle{display:none}
@media(max-width:960px){
  .brand__office{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto;align-items:center;gap:.45rem;background:var(--jade-50);
              border:1px solid var(--line);border-radius:var(--pill);padding:.5rem 1rem;font:inherit;
              font-weight:600;font-size:.92rem;color:var(--indigo);cursor:pointer}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 .8rem}
  .nav a:not(.btn){padding:.8rem .4rem;border-radius:var(--r-sm);border-bottom:1px solid var(--line-soft)}
  .nav .btn{margin:.7rem 0 0;justify-content:center}
  .masthead__bar{flex-wrap:wrap;min-height:0}
  .masthead.is-open .nav{display:flex}
}
@media(max-width:520px){ .brand__x{display:none} .brand__seal{width:46px;height:46px;flex-basis:46px} }

/* -------------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;background:var(--jade-900);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,var(--jade-900) 0%,rgba(13,99,68,.96) 30%,rgba(17,128,89,.82) 52%,rgba(17,128,89,.28) 78%,rgba(17,128,89,.06) 100%)}
.hero__inner{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);position:relative}
/* On a narrow screen the horizontal gradient leaves text sitting over the photograph.
   Below 760px the wash becomes vertical and heavier so the copy stays legible on a phone,
   which is the primary device for this audience. */
@media(max-width:760px){
  .hero::after{background:linear-gradient(178deg,rgba(10,74,51,.97) 0%,rgba(13,99,68,.93) 45%,rgba(13,99,68,.92) 72%,rgba(10,74,51,.96) 100%)}
  .hero__media img{object-position:center 22%}
  .hero h1{max-width:none}
  .hero__actions .btn{width:100%}
}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.16);
  color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--pill);
  padding:.35rem .9rem;font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 1.4rem}
.hero h1{color:#fff;font-size:clamp(2.15rem,1.3rem + 4vw,4.15rem);line-height:1.04;letter-spacing:-.033em;
         max-width:19ch;margin-bottom:.55em;text-wrap:balance}
.hero__lead{color:rgba(255,255,255,.93);font-size:clamp(1.05rem,1rem + .55vw,1.35rem);line-height:1.5;
            max-width:46ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.25rem}
.hero__note{color:rgba(255,255,255,.78);font-size:.9rem;max-width:44ch;margin:0}
.hero strong,.section--green strong,.section--navy strong,.band strong{color:#fff;font-weight:600}
.hero__note strong{color:#fff;font-weight:600}

/* the three-column band that sits at the foot of the 2025 hero */
.band{background:var(--jade-800);border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:1}
.band__grid{display:grid;gap:0}
@media(min-width:760px){.band__grid{grid-template-columns:repeat(3,1fr)}}
.band__item{padding:1.35rem clamp(1rem,2.5vw,2rem);display:flex;align-items:flex-start;gap:1rem;
            border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:760px){
  .band__item{border-top:0;border-left:1px solid rgba(255,255,255,.14)}
  .band__item:first-child{border-left:0;padding-left:0}
  .band__item:last-child{padding-right:0}
}
.band__body{min-width:0;flex:1}
.band__title{color:#fff;font-weight:600;font-size:1.03rem;margin:0 0 .2rem}
.band__text{color:rgba(255,255,255,.82);font-size:.87rem;line-height:1.5;margin:0}
.band__icon{flex:0 0 34px;width:34px;height:34px;color:#fff;opacity:.9}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     padding:.78rem 1.5rem;border-radius:var(--pill);border:1.5px solid transparent;
     font:inherit;font-weight:600;font-size:.97rem;text-decoration:none;cursor:pointer;
     transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--jade);color:#fff}
.btn--primary:hover{background:var(--jade-800);color:#fff}
.btn--navy{background:var(--indigo);color:#fff}
.btn--navy:hover{background:var(--indigo-700);color:#fff}
.btn--ghost{background:var(--surface);border-color:var(--line);color:var(--indigo)}
.btn--ghost:hover{border-color:var(--jade);color:var(--jade-800);background:var(--jade-50)}
.btn--danger{background:var(--danger);color:#fff}
.btn--sm{padding:.5rem 1.05rem;font-size:.89rem}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.hero .btn--ghost,.section--green .btn--ghost,.section--navy .btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn--ghost:hover,.section--green .btn--ghost:hover,.section--navy .btn--ghost:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.hero .btn--primary{background:#fff;color:var(--jade-900)}
.hero .btn--primary:hover{background:var(--jade-50);color:var(--jade-900)}

/* ------------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(1.25rem,2.5vw,1.75rem);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{border-color:var(--jade-100);box-shadow:var(--shadow)}
.card--flat{border-color:var(--line-soft)}
.card--flat:hover{box-shadow:none;border-color:var(--line)}
.card h3{margin-bottom:.4rem}
.card__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
               color:var(--jade);margin-bottom:.5rem}
.card__meta{display:flex;flex-wrap:wrap;gap:.4rem .95rem;font-size:.83rem;color:var(--ink-70);
            margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.card__meta span{display:inline-flex;align-items:center;gap:.35rem}
.section--navy .card,.section--green .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.section--navy .card:hover,.section--green .card:hover{border-color:rgba(255,255,255,.4);box-shadow:none}

/* stat cells — a band of figures, as in the 2025 comp; not floating metric cards */
.tile{padding:1.2rem 0}
.grid .tile{border-top:2px solid var(--jade);padding-top:1rem}
.tile__num{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.6rem);font-weight:700;color:var(--indigo);
           line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile__label{font-size:.87rem;color:var(--ink-70);margin-top:.4rem;line-height:1.45;max-width:26ch}
.section--navy .tile{border-top-color:var(--jade-500)}
.section--navy .tile__num{color:#fff}
.section--navy .tile__label{color:#A9AEC8}
.section--green .tile{border-top-color:rgba(255,255,255,.6)}
.section--green .tile__num{color:#fff}
.section--green .tile__label{color:#CBE6D9}

/* ------------------------------------------------------------------- pills */
.pill{display:inline-block;padding:.28rem .8rem;border-radius:var(--pill);font-size:.75rem;
      font-weight:600;letter-spacing:.03em;background:var(--indigo-100);color:var(--indigo)}
.pill--green{background:var(--jade-100);color:var(--jade-900)}
.pill--gold{background:var(--gold-100);color:#6B4C00}
.pill--danger{background:var(--danger-bg);color:var(--danger)}
.pill--muted{background:var(--line-soft);color:var(--ink-70)}

/* ------------------------------------------------------------------- forms */
form{margin:0}
.field{margin-bottom:1.35rem}
.field>label,.field__legend{display:block;font-weight:600;margin-bottom:.35rem;color:var(--indigo);font-size:.97rem}
.field__hint{font-size:.85rem;color:var(--ink-70);margin:-.1rem 0 .45rem;line-height:1.5}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],
input[type=number],input[type=search],select,textarea{
  width:100%;padding:.72rem .9rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-sm);min-height:48px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{appearance:none;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-50) 50%),linear-gradient(135deg,var(--ink-50) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
input:hover,select:hover,textarea:hover{border-color:var(--ink-40)}
input:focus,select:focus,textarea:focus{border-color:var(--jade);outline:var(--focus);outline-offset:1px}
.field--error input,.field--error select,.field--error textarea{border-color:var(--danger);background:var(--danger-bg)}
.field__error{color:var(--danger);font-size:.86rem;font-weight:600;margin-top:.35rem}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;margin:0 0 1.35rem;background:var(--surface)}
legend{font-weight:700;color:var(--indigo);padding:0 .45rem;font-size:1.02rem}
.choice{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border:1.5px solid var(--line);
        border-radius:var(--r-sm);margin-bottom:.55rem;background:var(--surface);cursor:pointer;
        transition:border-color .16s var(--ease),background .16s var(--ease)}
.choice:hover{border-color:var(--jade-500);background:var(--jade-50)}
.choice input{margin-top:.3rem;width:20px;height:20px;flex:0 0 20px;accent-color:var(--jade)}
.choice__body{min-width:0}
.choice__title{font-weight:600;color:var(--indigo)}
.choice__desc{font-size:.86rem;color:var(--ink-70);line-height:1.5}
.choice:has(input:checked){border-color:var(--jade);background:var(--jade-50);box-shadow:inset 0 0 0 1px var(--jade)}
.required{color:var(--danger);font-weight:700}
.optional{font-weight:400;color:var(--ink-40);font-size:.85rem}

/* ----------------------------------------------------------------- notices */
.notice{background:var(--jade-50);border:1px solid var(--jade-100);padding:1rem 1.15rem;
        border-radius:var(--r);margin-bottom:1.35rem}
.notice--ok{background:var(--jade-50);border-color:var(--jade-100)}
.notice--error{background:var(--danger-bg);border-color:#F0CFCD}
.notice--warn{background:var(--warn-bg);border-color:#F2DFA8}
.notice p:last-child{margin-bottom:0}
.notice strong{color:var(--indigo)}

/* ------------------------------------------------------------------- steps */
.steps{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 2rem;font-size:.84rem}
.steps li{display:flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:var(--pill);
          background:var(--surface);color:var(--ink-70);border:1px solid var(--line)}
.steps li[aria-current]{background:var(--indigo);color:#fff;border-color:var(--indigo);font-weight:600}
.steps li.done{background:var(--jade-100);color:var(--jade-900);border-color:var(--jade-100);font-weight:500}

/* ------------------------------------------------------------------ tables */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:var(--jade-50);font-weight:600;color:var(--indigo);white-space:nowrap;font-size:.85rem;
   letter-spacing:.01em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--jade-50)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- progress */
.w--0{width:0}.w--5{width:5%}.w--10{width:10%}.w--15{width:15%}.w--20{width:20%}
.w--25{width:25%}.w--30{width:30%}.w--35{width:35%}.w--40{width:40%}.w--45{width:45%}
.w--50{width:50%}.w--55{width:55%}.w--60{width:60%}.w--65{width:65%}.w--70{width:70%}
.w--75{width:75%}.w--80{width:80%}.w--85{width:85%}.w--90{width:90%}.w--95{width:95%}
.w--100{width:100%}
.bar{height:8px;background:var(--line-soft);border-radius:var(--pill);overflow:hidden;display:block;
     border:0;appearance:none}
.bar>i{display:block;height:100%;background:var(--jade);border-radius:var(--pill);
       transition:width .3s var(--ease)}
progress.bar::-webkit-progress-bar{background:var(--line-soft);border-radius:var(--pill)}
progress.bar::-webkit-progress-value{background:var(--jade);border-radius:var(--pill)}
progress.bar::-moz-progress-bar{background:var(--jade);border-radius:var(--pill)}

/* ------------------------------------------------------------------- prose */
.prose{max-width:68ch}
.prose h2{margin-top:2.25rem}
.prose h3{margin-top:1.75rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.prose li::marker{color:var(--jade)}
.prose code{background:var(--jade-50);padding:.12rem .38rem;border-radius:4px;font-size:.9em;
            border:1px solid var(--line-soft)}
.prose pre{background:var(--indigo);color:#E4E7F2;padding:1.1rem;border-radius:var(--r);overflow-x:auto}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--jade-50);
                  border:1px solid var(--jade-100);border-radius:var(--r);color:var(--ink-70)}

/* ----------------------------------------------------------------- gallery */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.gallery figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
                overflow:hidden}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--line-soft)}
.gallery figcaption{padding:.75rem .9rem;font-size:.81rem;color:var(--ink-70);line-height:1.5}
.gallery figcaption b{display:block;color:var(--indigo);font-weight:600;margin-bottom:.15rem}

/* ------------------------------------------------------------------ footer */
.footer{background:var(--indigo);color:#B9BDD4;padding:clamp(2.5rem,5vw,4rem) 0 2rem;margin-top:0}
.footer h4{color:#fff;font-size:.83rem;margin-bottom:.85rem;text-transform:uppercase;letter-spacing:.08em;
           font-weight:600}
.footer a:not(.btn){color:#DCDFEC;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;gap:2.25rem}
@media(min-width:780px){.footer__grid{grid-template-columns:2.1fr 1fr 1fr 1.35fr}}
.footer__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.35rem;
               font-size:.83rem;color:#9AA0BC}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.45rem;font-size:.9rem}
.footer p{font-size:.9rem;line-height:1.6}

/* ------------------------------------------------------------------- print */
@media print{
  .masthead,.footer,.btn,.nav,.band,.hero__actions{display:none!important}
  body{background:#fff;font-size:11pt;color:#000}
  .hero::after,.hero__media{display:none}
  .hero,.section--navy,.section--green{background:#fff!important;color:#000!important}
  .hero h1,.section--navy h2,.section--green h2{color:#000!important}
  .card,.tile{border-color:#999}
  a[href^="/"]::after{content:" (cdtin.org" attr(href) ")";font-size:9pt;color:#555}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
  scroll-behavior:auto!important}}

/* ==========================================================================
   COMPOSITION PRIMITIVES — appended 2026-08-30 for the public pages.
   Nothing above this line is modified; these are new selectors only.

   ONE rhythm, held on every public page:

     .page-head  the page opener — eyebrow, h1 held to 24ch, one lead line
                 held to the reading measure, then one .actions row.
     .sect-head  every section's entry point — eyebrow, heading, one line that
                 says what the section is for. Always the same gap between the
                 head and the content that follows it.
     .split      THE asymmetric two-column arrangement: 7fr 5fr, wide column
                 first. It is the ONLY asymmetric split used on the site, so
                 that the asymmetry reads as deliberate rather than incidental.
     .ladder     the same ratio reversed (5fr 7fr) as a labelled vertical list:
                 a narrow label column, a body column. Used for the delivery
                 schedule, the syllabus units, and record detail.
     .measure    a single paragraph held to the reading measure.
     .actions    the one button row — one gap value, everywhere.

   Measure: body copy never exceeds 68ch (.prose), section ledes 62ch.
   ========================================================================== */

.measure{max-width:62ch}

.page-head{max-width:74ch}
.page-head>.pill{margin:0 0 1rem}
.page-head h1{max-width:24ch;text-wrap:balance;margin-bottom:.5rem}
.page-head .lead,.page-head>p{max-width:62ch}
.page-head .prose{margin-top:1rem}

.sect-head{max-width:62ch;margin:0 0 clamp(1.5rem,3.2vw,2.25rem)}
.sect-head>.card__eyebrow{margin-bottom:.45rem}
.sect-head h2,.sect-head h3{margin-bottom:.45rem;text-wrap:balance}
.sect-head p{color:var(--ink-70);margin-bottom:0}
.section--navy .sect-head p,.section--green .sect-head p{color:inherit;opacity:.86}
.section--navy .card__eyebrow{color:var(--jade-500)}
.section--green .card__eyebrow{color:#CBE6D9}

.actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
         margin:clamp(1.4rem,3vw,2rem) 0 0}
.actions:first-child{margin-top:0}

.split{display:grid;gap:clamp(1.5rem,3.4vw,2.75rem);align-items:start;
       grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.split>*>*:last-child{margin-bottom:0}

.ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ladder__item{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem clamp(1.25rem,3vw,2.5rem);
              padding:clamp(1.1rem,2.4vw,1.55rem) 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.ladder__item{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
                                      gap:0 clamp(1.5rem,3vw,2.75rem)}}
.ladder__label{min-width:0}
.ladder__when{display:block;font-weight:600;color:var(--indigo);font-size:.97rem;line-height:1.4}
.ladder__note{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
              text-transform:uppercase;color:var(--jade);margin-top:.25rem}
.ladder__body{min-width:0;max-width:62ch}
.ladder__body>*:last-child{margin-bottom:0}
.ladder__title{font-size:1.05rem;font-weight:600;color:var(--indigo);margin:0 0 .3rem;line-height:1.35}
.section--navy .ladder,.section--green .ladder,
.section--navy .ladder__item,.section--green .ladder__item{border-color:rgba(255,255,255,.2)}
.section--navy .ladder__when,.section--green .ladder__when,
.section--navy .ladder__title,.section--green .ladder__title{color:#fff}
.section--navy .ladder__note{color:var(--jade-500)}
.section--green .ladder__note{color:#CBE6D9}

/* Rhythm between a block of content and the line that qualifies it: one value,
   applied wherever a caption or note follows a grid, a table or a ladder. */
.grid+p,.grid+.notice,.table-scroll+p,.ladder+p,.gallery+p,.grid+.measure{
  margin-top:clamp(1.25rem,2.6vw,1.75rem)}

/* Nasarawa State choropleth. Boundaries are real OSM admin_level=6 geometry; the shading
   bands are set server-side as classes because the CSP carries no unsafe-inline, so a
   per-area fill cannot be written as a style attribute (rule R4). The map is a reading
   aid — the numbers live in the table beside it, which is what a screen reader gets.

   The ramp is its own five steps, not the page's jade surface tints: --jade-50 and
   --jade-100 are near-white by design and, used as the bottom two bands, left eight of
   the thirteen areas indistinguishable from the paper. Looked at, not measured. */
.lgamap{margin:0}
.lgamap__svg{display:block;width:100%;height:auto;max-width:760px;margin-inline:auto}
.lgamap__area{stroke:#fff;stroke-width:2;stroke-linejoin:round}
.lgamap__area--0{fill:#E2E2E8}
.lgamap__area--1{fill:#D3EFE1}
.lgamap__area--2{fill:#A2DCC2}
.lgamap__area--3{fill:#5FC49B}
.lgamap__area--4{fill:#219A70}
.lgamap__area--5{fill:#0D6344}
/* An outline in a mid jade so the pale end of the ramp still reads as land against paper. */
.lgamap__shapes{stroke:#8FBFAB;stroke-width:.75;paint-order:fill}
.lgamap__label{font-size:19px;font-weight:600;fill:var(--indigo);text-anchor:middle;
               paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
/* On the two darkest bands indigo-on-jade is too close to read, so the label inverts:
   white glyph, dark halo. The band is known server-side, so this needs no script. */
.lgamap__label--dark{fill:#fff;stroke:#0A4A33}
/* Keffi is the one LGA narrower than its own name at the normal size. */
.lgamap__label--sm{font-size:13px;stroke-width:3px}
.lgamap__legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;
                margin-top:.85rem;font-size:.85rem;color:var(--ink-70)}
.lgamap__key{display:inline-flex;align-items:center;gap:.4rem}
.lgamap__swatch{display:inline-block;width:1.1rem;height:.7rem;border-radius:2px;
                border:1px solid rgba(24,24,61,.15)}
.lgamap__swatch--0{background:#E2E2E8}
.lgamap__swatch--1{background:#D3EFE1}
.lgamap__swatch--2{background:#A2DCC2}
.lgamap__swatch--3{background:#5FC49B}
.lgamap__swatch--4{background:#219A70}
.lgamap__swatch--5{background:#0D6344}
/* On a narrow screen the map is drawn smaller, so the labels are set larger in viewBox
   units to keep their rendered size readable. Both sizes scale together — bumping only
   the base would put Keffi's name back outside Keffi on exactly the screens where the
   map is smallest. */
@media(max-width:520px){.lgamap__label{font-size:26px}.lgamap__label--sm{font-size:18px}}

/* Demonstration-environment ribbon (demo.cdtin.org only, cfg.demoMode). Gold on indigo so it
   reads as an official notice, not an error, and survives in any screenshot. */
.demo-ribbon{margin:0;padding:.5rem var(--gutter);background:var(--indigo);color:var(--gold);
             text-align:center;font-size:.85rem;font-weight:600}
.demo-ribbon strong{color:#fff}