/* Windscreen Pretoria - archetype F, dense utility index.
   Workshop paper, one industrial cobalt, 1px rules as the layout device, no radius.
   Palette (measured): ink #101418 18.50:1 on ground; accent #1B4DDB 6.71:1 on
   ground and 5.82:1 on surface; muted #4A5460 7.70:1; accent-on-dark #547BEA
   4.75:1 on ink. Type: Lexend over Libre Franklin, scale 1.2 on a 15px base. */

@font-face{font-family:"Lexend";src:url("/assets/fonts/lexend-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/assets/fonts/libre-franklin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ground:#ffffff; --ink:#101418; --accent:#1b4ddb; --accent-hover:#0f36a6;
  --accent-on-dark:#547bea; --surface:#edeff1; --row:#f7f9fa; --rule:#d7dce0;
  --muted:#4a5460; --max:1200px; --railw:206px; --gap:38px;
  /* distance from the left edge of <main> to the left edge of the viewport, so the
     one full-bleed band can reach both edges from inside the grid column */
  --bleed-out:calc(max((100vw - var(--max)) / 2, 0px) + 20px + var(--railw) + var(--gap));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Libre Franklin",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display,.sec-num,.nav-link,.btn,th,.foot-title,.rail-title,.brand-text{
  font-family:"Lexend","Libre Franklin",system-ui,sans-serif;font-weight:600;letter-spacing:-.012em}
h1{font-size:clamp(30px,12px + 2.4vw,44px);line-height:1.08;margin:0 0 14px;font-weight:600}
h2{font-size:clamp(24px,18px + 1.1vw,32px);line-height:1.15;margin:0 0 10px;font-weight:600}
h3{font-size:clamp(17px,15px + .5vw,19px);line-height:1.25;margin:0 0 4px;font-weight:600}
h4{font-size:16px;line-height:1.3;margin:0 0 4px;font-weight:600}
p{margin:0 0 12px;max-width:70ch}
ul,ol{margin:0 0 12px;padding-left:20px}
li{margin:4px 0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.on-ink :focus-visible,.on-ink a:focus-visible{outline-color:var(--accent-on-dark)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:100}
.skip-link:focus{left:8px;top:8px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.layout .container{max-width:none;padding:0}

/* ---- header: a flat utility bar, not sticky (the rail is the only sticky element) ---- */
.site-header{border-bottom:1px solid var(--rule);background:var(--ground)}
.header-container{display:flex;align-items:center;gap:22px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand-text{font-size:15.5px;letter-spacing:-.01em}
.brand img{width:30px;height:30px}
.main-nav{margin-left:auto}
.nav-menu{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px;margin:0;padding:0}
.nav-link{display:block;text-decoration:none;color:var(--ink);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 0;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--accent)}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.header-cta{flex:0 0 auto}
.btn{display:inline-block;padding:11px 18px;font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid var(--accent);cursor:pointer;background:var(--accent);color:#fff;border-radius:0}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.btn-quiet{background:#fff;color:var(--accent);border-color:var(--rule)}
.btn-quiet:hover{background:var(--surface);color:var(--accent-hover);border-color:var(--accent)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--surface);color:var(--ink)}
.header-cta{padding:9px 14px}
.nav-toggle{display:none;align-items:center;gap:8px;background:#fff;border:1px solid var(--rule);
  padding:8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;margin-left:auto}
.nav-toggle-bar,.nav-toggle-bar:before,.nav-toggle-bar:after{display:block;width:16px;height:2px;
  background:var(--ink);position:relative;content:""}
.nav-toggle-bar:before{position:absolute;top:-5px}
.nav-toggle-bar:after{position:absolute;top:5px}

/* ---- layout: sticky index rail + main column ---- */
.layout{max-width:var(--max);margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:var(--railw) minmax(0,1fr);gap:var(--gap);align-items:start}
.layout>main{min-width:0}
.rail{position:sticky;top:18px;align-self:start;border-top:2px solid var(--ink);padding-top:10px}
.rail-title{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rail-list{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--rule)}
.rail-list li{margin:0;border-bottom:1px solid var(--rule)}
.rail-list a{display:block;padding:6px 0;font-size:13px;line-height:1.35;text-decoration:none;color:var(--muted)}
.rail-list a:hover{color:var(--accent)}
.rail-note{margin:0;font-size:12px;line-height:1.45;color:var(--muted);max-width:none}

/* ---- hero ---- */
.hero{border-bottom:1px solid var(--rule)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:34px;
  align-items:start;padding:30px 0 24px}
.kicker{margin:0 0 10px;font-family:"Lexend",system-ui,sans-serif;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);max-width:none}
.lead{font-size:clamp(15px,14px + .35vw,17px);color:var(--muted);max-width:64ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.hero-note{margin:0;font-size:13px;color:var(--muted);border-top:1px solid var(--rule);padding-top:9px;max-width:64ch}
.quick-index{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;border-top:1px solid var(--rule);
  padding:9px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.quick-index .qi-label{font-family:"Lexend",system-ui,sans-serif;color:var(--muted);font-weight:600}
.quick-index a{text-decoration:none}
.quick-index a:hover{text-decoration:underline}

/* ---- sections: hairlines are the layout device ---- */
.section{padding:26px 0;border-bottom:1px solid var(--rule)}
.section:last-child{border-bottom:0}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--ink);
  padding-bottom:6px;margin-bottom:14px}
.sec-head h2{margin:0;font-size:clamp(22px,16px + 1.05vw,30px)}
.sec-num{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.prose p{max-width:70ch}
.page-header{padding:26px 0 22px;border-bottom:1px solid var(--ink);margin-bottom:0}
.page-header h1{font-size:clamp(27px,12px + 2vw,36px)}
.page-header .lead{margin-bottom:0}
.breadcrumbs{padding-top:20px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.breadcrumbs li+li:before{content:"/";margin-right:6px;color:var(--rule)}
.breadcrumbs a{text-decoration:none}

/* ---- index rows (the table form) ---- */
.tbl{border-top:1px solid var(--ink);margin:0 0 16px}
.tbl-row{display:grid;grid-template-columns:var(--tbl-key,220px) minmax(0,1fr) 26px;gap:16px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule)}
.tbl-row>*{min-width:0}
.tbl-row .row-link{text-decoration:none;display:block}
.tbl-row .row-link:hover .tbl-key{text-decoration:underline}
.tbl-key{font-family:"Lexend",system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--ink);
  margin:0}
a.row-link .tbl-key{color:var(--accent)}
.tbl-val{margin:0;font-size:14px;color:var(--muted);max-width:none}
.tbl-val a{color:var(--accent)}
.tbl-mark{font-family:"Lexend",system-ui,sans-serif;font-size:12px;color:var(--accent);text-align:right}
.tbl-head{display:grid;grid-template-columns:var(--tbl-key,220px) minmax(0,1fr) 26px;gap:16px;
  background:var(--surface);padding:7px 0;border-bottom:1px solid var(--ink);
  font-family:"Lexend",system-ui,sans-serif;font-size:12px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.tbl-head span{padding:0 10px}
.tbl-row{padding-left:10px;padding-right:10px}
.tbl-row:hover{background:var(--row)}
.tbl-plate{padding:14px 10px 0}
.plate{margin:0;border:1px solid var(--rule);background:#fff}
.plate img{width:100%;height:auto}
.plate figcaption{border-top:1px solid var(--rule);padding:7px 9px;font-size:12px;line-height:1.4;
  color:var(--muted);background:var(--surface);max-width:none}
.plate-sm{max-width:420px}

/* ---- the one full-bleed photograph ---- */
.bleed{width:100vw;margin-left:calc(-1 * var(--bleed-out));border-top:1px solid var(--rule)}
.bleed figure{margin:0}
.bleed img{width:100%;height:auto}
.bleed figcaption{max-width:var(--max);margin:0 auto;padding:8px 20px 0;font-size:12px;color:var(--muted)}

/* ---- numbered steps ---- */
.steps{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink);counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule);margin:0}
.steps li:before{content:counter(step,decimal-leading-zero);font-family:"Lexend",system-ui,sans-serif;
  font-size:13px;font-weight:600;color:var(--accent)}
.tick-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.tick-list li{border-bottom:1px solid var(--rule);padding:10px 0;margin:0;max-width:70ch}
.tick-list li:before{content:"/";color:var(--accent);font-weight:600;margin-right:8px}
.link-list{list-style:none;padding:0;margin:0 0 12px;border-top:1px solid var(--ink);columns:2;column-gap:34px}
.link-list li{border-bottom:1px solid var(--rule);padding:8px 0;margin:0;break-inside:avoid}
.link-list a{text-decoration:none}
.link-list a:hover{text-decoration:underline}
.link-list.compact{columns:1;margin-top:10px}
.sources{font-size:13px}
.source-list{padding-left:18px}
.source-list li{margin:4px 0;color:var(--muted)}

/* ---- cards, restyled as ruled index rows (inner hubs) ---- */
.card-grid{border-top:1px solid var(--ink);margin:0 0 16px;display:block}
.card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:11px 10px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);
  background:#fff;border-radius:0}
a.card:hover{background:var(--row)}
.card h3{font-size:15px;font-weight:500;color:var(--accent);margin:0}
.card-static h3{color:var(--ink)}
.card p{margin:0;font-size:14px;color:var(--muted);max-width:none}
.card .card-sub{margin-top:6px;font-size:12px}

/* ---- FAQ ---- */
.faq-grid{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule);padding:0;margin:0}
.faq-item[open]{background:var(--row)}
.faq-question{font-family:"Lexend",system-ui,sans-serif;font-weight:500;font-size:15px;cursor:pointer;
  padding:11px 10px;display:block}
.faq-question::marker{color:var(--accent)}
.faq-answer{padding:0 10px 12px 32px}
.faq-answer p{margin:0;color:var(--muted);font-size:14px;max-width:70ch}

/* ---- notes, CTA, form ---- */
.disclosure-note{border-left:3px solid var(--accent);background:var(--surface);padding:11px 14px;
  margin:20px 0;max-width:760px}
.disclosure-note p{margin:0;font-size:13.5px;max-width:none}
.cta-banner{background:var(--ink);color:#fff;padding:24px 22px;margin:26px 0}
.cta-banner h2,.cta-banner p{max-width:70ch}
.cta-title{margin:0 0 8px;font-size:clamp(20px,14px + .95vw,26px);color:#fff}
.cta-text{margin:0 0 16px;color:#dfe4e8}
.form-section{background:var(--surface);border-top:2px solid var(--ink);padding:22px;margin:24px 0}
.lead-form{display:grid;gap:12px;max-width:720px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.form-field label{font-family:"Lexend",system-ui,sans-serif;font-weight:500;font-size:13px}
.form-field input,.form-field select,.form-field textarea{font:inherit;font-size:15px;width:100%;
  min-width:0;padding:9px 10px;border:1px solid #9aa3ad;border-radius:0;background:#fff;color:var(--ink)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form-check{flex-direction:row;align-items:flex-start;gap:10px}
.form-check input{margin-top:4px;width:18px;height:18px;flex:0 0 auto}
.form-check label{font-weight:400;font-size:14px}
.form-hint{margin:0;font-size:12px;color:var(--muted);max-width:none}
.form-status{margin:4px 0 0;font-weight:600;font-size:14px}
.form-status.is-error{color:#a3160f}
.form-status.is-ok{color:#0b5c46}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}
.cf-turnstile{min-height:65px}
.post-meta{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}

/* ---- footer: the catalogue cover, on ink ---- */
.site-footer{background:var(--ink);color:#dfe4e8;margin-top:34px;padding:30px 0 18px}
.site-footer a{color:var(--accent-on-dark);text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1.1fr 1.1fr 1.1fr;gap:26px;
  border-top:1px solid rgba(255,255,255,.28);padding-top:18px}
.foot-title,.footer-title{font-family:"Lexend",system-ui,sans-serif;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 8px}
.footer-text,.footer-contact-item{font-size:13px;margin:0 0 6px;max-width:52ch}
.footer-links{list-style:none;padding:0;margin:0;font-size:13px}
.footer-links li{margin:3px 0}
.footer-logo{display:inline-block;vertical-align:-4px;margin-right:6px;width:20px;height:20px}
.credits{font-size:12px;line-height:1.5;color:#aab2ba;margin:20px 0 0;border-top:1px solid rgba(255,255,255,.18);
  padding-top:12px;max-width:none}
.credits-list{list-style:none;padding:0;margin:6px 0 0;columns:2;column-gap:30px;font-size:12px}
.credits-list li{margin:2px 0;break-inside:avoid}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:16px;padding-top:12px;font-size:12px;color:#aab2ba}
.footer-bottom p{margin:4px 0;max-width:none}
.preferred-source{margin-top:14px}

@media (max-width:1023px){
  :root{--bleed-out:calc(max((100vw - var(--max)) / 2, 0px) + 20px)}
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .rail{display:none}
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-inner .plate{max-width:560px}
  .credits-list{columns:1}
}
@media (max-width:860px){
  .header-container{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .main-nav{display:none}
  /* the panel takes its own line: a 100%-wide flex item in a nowrap row only
     squeezes every other item and pushes the labels past the viewport edge. */
  .main-nav.is-open{display:block;flex:0 0 100%;width:auto;order:3;margin:0;border-top:1px solid var(--rule)}
  .nav-menu{flex-direction:column;gap:0;padding:4px 0 10px}
  .nav-link{border-bottom:1px solid var(--rule);padding:10px 0}
  .nav-link.active{border-bottom-color:var(--accent)}
  .header-cta{margin-left:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:31px}
  .page-header h1{font-size:27px}
  h2{font-size:23px}
  .sec-head h2{font-size:22px}
  .cta-title{font-size:21px}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .link-list{columns:1}
  .header-cta{display:none}
  .tbl-row{grid-template-columns:minmax(0,1fr);gap:2px;--tbl-key:auto}
  .tbl-mark{display:none}
  .tbl-head{display:none}
  .card{grid-template-columns:minmax(0,1fr);gap:3px}
  .steps li{grid-template-columns:32px minmax(0,1fr);gap:10px}
}

/* ---- split groups: a ruled index beside one catalogue plate ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start;margin:0 0 6px}
.group{margin:0 0 20px}
.section .plate{margin:0 0 14px}
.split>.plate+.plate,.split>div>.plate+.plate{margin-top:14px}
.tbl-note{margin:8px 0 0;font-size:12px;color:var(--muted);max-width:70ch}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split .plate{max-width:520px}}