/* Layout: left-aligned registry, 1240px column; the world map is the hero; feeds sit in two columns; record pages read like a filing sheet. */
:root{
  --paper:#F4F6FA; --surface:#FFFFFF; --sunk:#EBEFF5;
  --ink:#13203A; --ink-2:#4B5872; --ink-3:#77839A;
  --rule:#DCE2EB; --rule-2:#C3CCDA;
  --accent:#2747C7; --accent-ink:#FFFFFF; --accent-soft:#E5EAFB; --accent-hover:#1C379F;
  --seal:#9A6512;
  --st-force:#1D7A4E; --st-partial:#0E6E86; --st-enacted:#5A45B8; --st-proposed:#9C5506; --st-delayed:#B03E18; --st-off:#6B7280;
  --m0:#E4E6EA; --m1:#C9D5F5; --m2:#A8BCF0; --m3:#7391E0; --m4:#4264CB; --m5:#1D389B;
  --series-1:#2747C7; --series-2:#B0761A;
  --font-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:6px; --maxw:1240px;
  --step--1:.8125rem; --step-0:.9375rem; --step-1:1.125rem; --step-2:1.375rem; --step-3:1.875rem; --step-4:clamp(2rem,4.2vw,3.25rem);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0C1322; --surface:#121B2E; --sunk:#0A101D;
  --ink:#E6EBF4; --ink-2:#A9B4C8; --ink-3:#7C889E;
  --rule:#222D45; --rule-2:#33405D;
  --accent:#8CA4FF; --accent-ink:#0C1322; --accent-soft:#1B2650; --accent-hover:#B3C3FF;
  --seal:#E0A846;
  --st-force:#4CC38A; --st-partial:#4EC1DB; --st-enacted:#A795F5; --st-proposed:#F0A54A; --st-delayed:#F07A52; --st-off:#9AA3B2;
  --m0:#262C38; --m1:#243C7C; --m2:#2C4488; --m3:#4565BE; --m4:#6D8DEA; --m5:#AFC3FF;
  --series-1:#6F8CF0; --series-2:#BF8420;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0C1322; --surface:#121B2E; --sunk:#0A101D;
  --ink:#E6EBF4; --ink-2:#A9B4C8; --ink-3:#7C889E;
  --rule:#222D45; --rule-2:#33405D;
  --accent:#8CA4FF; --accent-ink:#0C1322; --accent-soft:#1B2650; --accent-hover:#B3C3FF;
  --seal:#E0A846;
  --st-force:#4CC38A; --st-partial:#4EC1DB; --st-enacted:#A795F5; --st-proposed:#F0A54A; --st-delayed:#F07A52; --st-off:#9AA3B2;
  --m0:#262C38; --m1:#243C7C; --m2:#2C4488; --m3:#4565BE; --m4:#6D8DEA; --m5:#AFC3FF;
  --series-1:#6F8CF0; --series-2:#BF8420;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.55;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-stretch:112%;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--step-4);font-weight:800}
h1.long{font-size:clamp(1.6rem,3vw,2.3rem)}
h2{font-size:var(--step-2);font-weight:750}
h3{font-size:var(--step-1);font-weight:700}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.small{font-size:var(--step--1)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap,12px);align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:26px;height:26px;flex:none}
.brand-name{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.nav a{white-space:nowrap;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:999px;font-weight:550;font-size:.9rem}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--accent-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:650;font-size:.9rem;border-radius:999px;padding:8px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
@media (max-width:1100px){
  .top .wrap{gap:10px;padding-top:8px;justify-content:space-between}
  .nav{order:3;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .nav::-webkit-scrollbar{display:none}
}
@media (max-width:420px){.top .btn-primary{padding:8px 12px;font-size:.84rem}.top .brand-logo{height:18px}}
.sm-show{display:none}
@media (max-width:420px){.sm-hide{display:none}.sm-show{display:inline}}
/* large displays: wider column and slightly larger type so the layout doesn't float in empty space */
@media (min-width:1800px){:root{--maxw:1480px}html{font-size:17px}}
@media (min-width:2300px){:root{--maxw:1720px}html{font-size:19px}}

main{padding-block:28px 64px}
.page-head{display:flex;flex-direction:column;gap:10px;padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.page-head .lede{font-size:var(--step-1);color:var(--ink-2);max-width:68ch}
.crumbs{font-size:var(--step--1);color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}

/* hero */
.hero{display:grid;gap:18px;padding-bottom:8px}
.hero h1{max-width:20ch}
.hero .lede{font-size:var(--step-1);color:var(--ink-2);max-width:62ch}
.tally{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:4px}
.tally div{display:flex;flex-direction:column}
.tally b{font-family:var(--font-display);font-stretch:118%;font-size:1.6rem;font-weight:800;line-height:1.1}
.tally span{font-size:var(--step--1);color:var(--ink-2)}

/* atlas */
.atlas{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;background:var(--surface);border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:22px}
@media (max-width:980px){.atlas{grid-template-columns:minmax(0,1fr)}}
.atlas-map{position:relative;min-width:0;border-right:1px solid var(--rule)}
@media (max-width:980px){.atlas-map{border-right:0;border-bottom:1px solid var(--rule)}}
.layers{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.layers button{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-2);background:transparent;border:1px solid var(--rule-2);border-radius:999px;padding:5px 12px;cursor:pointer}
.layers button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.map-svg{display:block;width:100%;height:auto;aspect-ratio:1.9/1;max-width:100%}
.map-svg path.c{stroke:var(--surface);stroke-width:.5;cursor:pointer;transition:opacity .15s}
.map-svg path.c.nodata{cursor:default}
.map-svg path.c:hover,.map-svg path.c.sel{stroke:var(--ink);stroke-width:1.2}
.map-svg circle.dot{stroke:var(--surface);stroke-width:1.5;cursor:pointer}
.map-fallback{padding:20px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 14px 14px;font-size:var(--step--1);color:var(--ink-2)}
.legend .sw{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .src{margin-left:auto;color:var(--ink-3)}
.panel{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h3{font-size:var(--step-2)}
.panel .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:var(--step--1)}
.panel .kv dt{color:var(--ink-3)}
.panel .kv dd{margin:0;text-align:right;font-weight:600}
.panel-hint{color:var(--ink-3);font-size:var(--step--1)}
.m0{fill:var(--m0)}.m1{fill:var(--m1)}.m2{fill:var(--m2)}.m3{fill:var(--m3)}.m4{fill:var(--m4)}.m5{fill:var(--m5)}
.bg-m1{background:var(--m1)}.bg-m2{background:var(--m2)}.bg-m3{background:var(--m3)}.bg-m4{background:var(--m4)}.bg-m5{background:var(--m5)}.bg-m0{background:var(--m0)}

/* sections */
.section{margin-top:48px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head p{color:var(--ink-2);font-size:var(--step--1)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.cols,.cols-3{grid-template-columns:minmax(0,1fr)}}

/* feed */
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.feed li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.feed time{font-size:var(--step--1);color:var(--ink-3);padding-top:2px}
.feed .what{font-size:var(--step--1);color:var(--ink-2)}
.feed a.t{font-weight:650;color:var(--ink);text-decoration:none}
.feed a.t:hover{color:var(--accent)}
.countdown{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:1.05rem;color:var(--ink);line-height:1.2}
.countdown small{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;color:var(--ink-3);font-stretch:100%}

/* tags & chips */
.jtag{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:1px 6px;border-radius:4px;background:var(--sunk);color:var(--ink-2);font-size:.72rem;font-weight:700;letter-spacing:.02em;text-decoration:none;border:1px solid var(--rule)}
a.jtag:hover{border-color:var(--ink-3);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--st-off))}
.chip.s-in-force{--c:var(--st-force)}.chip.s-partially-in-force{--c:var(--st-partial)}.chip.s-enacted{--c:var(--st-enacted)}
.chip.s-proposed,.chip.s-consultation{--c:var(--st-proposed)}.chip.s-delayed{--c:var(--st-delayed)}.chip.s-withdrawn,.chip.s-superseded{--c:var(--st-off)}
.pill{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--rule)}
.pill.on{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.new{color:var(--seal);font-weight:700;font-size:.74rem}

/* rule list */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;margin-bottom:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:5}
.filters input,.filters select{font:inherit;font-size:.88rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:6px;padding:7px 10px;min-width:0}
.filters input[type=search]{flex:1 1 220px}
.filters .count{margin-left:auto;font-size:var(--step--1);color:var(--ink-3)}
@media (max-width:760px){.filters{position:static}.filters select{flex:1 1 140px}}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rules li{display:grid;grid-template-columns:64px minmax(0,1fr) 170px;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rules li[hidden]{display:none}
.rules .t{font-weight:700;color:var(--ink);text-decoration:none;font-size:1rem}
.rules .t:hover{color:var(--accent)}
.rules .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px;font-size:var(--step--1);color:var(--ink-3)}
.rules .sum{margin-top:6px;color:var(--ink-2);font-size:.9rem;max-width:78ch}
.rules .side{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;font-size:var(--step--1);color:var(--ink-3)}
@media (max-width:760px){.rules li{grid-template-columns:52px minmax(0,1fr)}.rules .side{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:8px}}

/* record sheet */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px}
@media (max-width:900px){.sheet{grid-template-columns:minmax(0,1fr)}}
.sheet .body{display:flex;flex-direction:column;gap:22px;min-width:0}
.sheet .body p{max-width:70ch}
.facts{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:6px 16px}
.facts dl{margin:0}
.facts .f{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.88rem}
.facts .f:last-child{border-bottom:0}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.callout{border-left:3px solid var(--accent);padding:4px 0 4px 14px}
.callout h3{font-size:var(--step-0);margin-bottom:4px}
.source{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--sunk);border-radius:8px;font-size:.88rem}
.source a{overflow-wrap:anywhere}
.cta-box{border:1px solid var(--rule-2);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.cta-box p{font-size:.88rem;color:var(--ink-2)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.stats div{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats b{font-family:var(--font-display);font-stretch:115%;font-size:1.5rem;font-weight:800;line-height:1.15}
.stats b.txt{font-size:1.05rem;font-stretch:105%;line-height:1.3}
.stats span{font-size:var(--step--1);color:var(--ink-2)}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font-weight:650;color:var(--ink-2);padding:9px 12px;border-bottom:1px solid var(--rule-2);background:var(--sunk);white-space:nowrap;position:sticky;top:0}
.tbl th button{all:unset;cursor:pointer}
.tbl th button:focus-visible{outline:2px solid var(--accent)}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .zh{color:var(--ink-3);font-size:.8rem}
.tbl a{text-decoration:none;font-weight:600}
.pager{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 2px;font-size:var(--step--1);color:var(--ink-3)}

/* charts */
.chart{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:16px;min-width:0}
.chart h3{font-size:var(--step-0);font-weight:700;font-family:var(--font-body);font-stretch:100%;letter-spacing:0}
.chart .sub{font-size:var(--step--1);color:var(--ink-3);margin:2px 0 10px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{fill:var(--ink-3);font-size:11px;font-family:var(--font-body)}
.chart .lbl{fill:var(--ink-2);font-size:11.5px;font-family:var(--font-body)}
.chart .val{fill:var(--ink);font-size:11.5px;font-weight:650;font-family:var(--font-body)}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .base{stroke:var(--rule-2);stroke-width:1}
.chart .s1{fill:var(--series-1)}.chart .s2{fill:var(--series-2)}
.chart .l1{stroke:var(--series-1);fill:none;stroke-width:2}.chart .l2{stroke:var(--series-2);fill:none;stroke-width:2}
.chart .partial{fill:var(--series-1);opacity:.45}
.chart [data-tip]:hover{opacity:.82}
.chart-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:.75rem;color:var(--ink-3)}
.chart-foot button{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.key{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--step--1);color:var(--ink-2);margin-bottom:6px}
.key i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.78rem;padding:6px 9px;border-radius:6px;max-width:260px;line-height:1.35;box-shadow:0 4px 16px rgb(0 0 0 / .18)}

/* matrix */
.matrix td.mark{text-align:center}
.dotb{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.doth{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent)}
.lock{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;border:1px dashed var(--rule-2);border-radius:8px;padding:16px;color:var(--ink-2);font-size:.86rem}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:12px}
.tier.feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tier .price{font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:2rem;line-height:1}
.tier .price small{font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--ink-3);font-stretch:100%}
.tier ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--ink-2)}
.toggle{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;padding:3px}
.toggle button{font:inherit;font-size:.85rem;font-weight:600;border:0;background:transparent;color:var(--ink-2);padding:5px 14px;border-radius:999px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* subscribe band */
.band{margin-top:56px;background:var(--ink);color:var(--paper);border-radius:12px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:center}
.band h2{color:var(--paper)}
.band p{color:color-mix(in srgb,var(--paper) 78%,transparent)}
@media (max-width:820px){.band{grid-template-columns:minmax(0,1fr)}}
.signup{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1 1 200px;font:inherit;padding:10px 14px;border-radius:999px;border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);min-width:0}
.signup .msg{flex-basis:100%;font-size:var(--step--1)}
.band .signup .btn-primary{background:var(--paper);color:var(--ink)}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgb(8 12 24 / .55);padding:16px}
.modal[hidden]{display:none!important}
.modal-card{background:var(--surface);color:var(--ink);border-radius:12px;max-width:440px;width:100%;padding:24px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--rule)}
.modal-card .x{align-self:flex-end;all:unset;cursor:pointer;color:var(--ink-3);font-size:1.4rem;line-height:1}

footer.foot{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:var(--step--1);color:var(--ink-2)}
footer.foot .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:800px){footer.foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer.foot h4{margin:0 0 8px;font-size:.82rem;color:var(--ink)}
footer.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer.foot a{color:var(--ink-2);text-decoration:none}
footer.foot a:hover{color:var(--accent)}

.prose{max-width:72ch;display:flex;flex-direction:column;gap:14px}
.prose h2{margin-top:18px}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:10px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.grp{margin-top:28px}
.grp h2{font-size:var(--step-1);margin-bottom:10px}
.month{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
@media (max-width:700px){.month{grid-template-columns:minmax(0,1fr);gap:8px}}
.month h3{font-size:var(--step-1)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.prose .btn{align-self:flex-start}

.brand-logo{display:block;height:24px;width:auto;color:var(--ink)}
.foot-logo{height:20px;align-self:flex-start}
@media (max-width:760px){.brand-logo{height:20px}}

/* use cases */
.uc-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:14px}
.uc-jump a,.who-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink)}
.uc-jump a:hover,.who-card:hover{border-color:var(--accent)}
.uc-jump b,.uc-tag{font-size:.74rem;font-weight:700;color:var(--accent);letter-spacing:.01em}
.uc-jump span{font-size:.9rem;font-weight:600}
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.who{grid-template-columns:minmax(0,1fr)}}
.who-card b{font-size:1rem;line-height:1.35}
.uc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink-2);margin:6px 0 10px}
.uc-legend .lg{display:inline-block;width:18px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.uc{border-top:1px solid var(--rule);padding-top:28px;margin-top:28px;scroll-margin-top:80px}
.uc header{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.uc header p{max-width:75ch}
.uc h2{font-size:var(--step-3)}
.uc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px}
@media (max-width:960px){.uc-grid{grid-template-columns:minmax(0,1fr)}}
.uc-scn{background:var(--sunk);border-radius:8px;padding:14px 16px;max-width:75ch}
.uc-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;max-width:75ch}
.uc-steps li::marker{font-weight:700;color:var(--accent)}
.uc-h{font-family:var(--font-body);font-stretch:100%;font-size:.95rem;font-weight:700;letter-spacing:0;margin-bottom:8px}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stages li{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center}
.stages .bar{grid-row:1/3;height:10px;border-radius:3px;border:1.5px solid var(--accent)}
.stages b{font-size:.9rem;font-weight:600}
.stages .small{color:var(--ink-3)}
.st-full .bar,.lg.st-full{background:var(--accent);border:1.5px solid var(--accent)}
.st-part .bar,.lg.st-part{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%);border:1.5px solid var(--accent)}
.st-none .bar,.lg.st-none{background:transparent;border:1.5px dashed var(--ink-3)}

/* tap targets: every standalone link or control is at least 24px tall (WCAG 2.2 AA 2.5.8); 44px on touch screens for the main ones */
.brand{min-height:44px}
.jtag{min-height:24px;min-width:24px}
.rules .t,.feed a.t{display:inline-block;padding-block:3px}
footer.foot a{display:inline-block;padding-block:4px}
footer.foot ul{gap:2px}
.cta-box .row a,.section-head a,.chart-foot button,.chart-foot a,.uc .row a{display:inline-block;padding-block:4px}
.nav a{min-height:32px;display:inline-flex;align-items:center}
@media (pointer:coarse){
  .nav a,.btn,.layers button,.toggle button{min-height:44px}
  footer.foot a{padding-block:10px}
  .filters input,.filters select{min-height:44px}
}

/* =================== developments, Lines of Thought, search =================== */
:root{--sec-defence:#B4462F;--sec-health:#12805C;--sec-finance:#8A6A00;--sec-work:#7A4DB8;--sec-information:#B42F80;--sec-frontier:#2747C7;--sec-compute:#0E6E86;--sec-science:#4F7A16;--sec-government:#4B5872;--line:#13203A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sec-defence:#F0876C;--sec-health:#4CC38A;--sec-finance:#E0B84A;--sec-work:#B596F0;--sec-information:#F07BC0;--sec-frontier:#8CA4FF;--sec-compute:#4EC1DB;--sec-science:#9BD35A;--sec-government:#A9B4C8;--line:#E6EBF4}}
:root[data-theme="dark"]{--sec-defence:#F0876C;--sec-health:#4CC38A;--sec-finance:#E0B84A;--sec-work:#B596F0;--sec-information:#F07BC0;--sec-frontier:#8CA4FF;--sec-compute:#4EC1DB;--sec-science:#9BD35A;--sec-government:#A9B4C8;--line:#E6EBF4}
.sec-defence{--sc:var(--sec-defence)}.sec-health{--sc:var(--sec-health)}.sec-finance{--sc:var(--sec-finance)}.sec-work{--sc:var(--sec-work)}.sec-information{--sc:var(--sec-information)}.sec-frontier{--sc:var(--sec-frontier)}.sec-compute{--sc:var(--sec-compute)}.sec-science{--sc:var(--sec-science)}.sec-government{--sc:var(--sec-government)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* header actions */
.top-act{display:flex;gap:8px;align-items:center;margin-left:auto}
.icon-btn{gap:6px;padding:7px 12px}
.icon-btn kbd,.hero-search kbd{font:600 .72rem var(--font-body);border:1px solid var(--rule-2);border-radius:4px;padding:0 5px;color:var(--ink-3)}
@media (max-width:1100px){.top-act{margin-left:0}}

/* hero */
.hero2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center;padding:8px 0 4px}
@media (max-width:960px){.hero2{grid-template-columns:minmax(0,1fr);gap:24px}}
.hero-l{display:flex;flex-direction:column;gap:16px;min-width:0}
.hero2 h1{max-width:18ch}
.hero2 .lede{font-size:var(--step-1);color:var(--ink-2);max-width:60ch}
.hero-search{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;max-width:560px;min-height:52px;padding:0 16px;border:1.5px solid var(--rule-2);border-radius:999px;background:var(--surface);color:var(--ink-3);cursor:text;font-size:1rem;box-shadow:0 1px 2px rgb(0 0 0 / .04)}
.hero-search:hover,.hero-search:focus-visible{border-color:var(--accent);outline:none}
.hero-search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:14px;background:var(--ink);color:var(--paper);text-decoration:none;min-width:0;--line:var(--paper)}
.feat .eyebrow{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.feat b{font-family:var(--font-display);font-stretch:112%;font-size:1.45rem;line-height:1.15;color:var(--paper)}
.feat .q{color:color-mix(in srgb,var(--paper) 78%,transparent);font-size:.92rem}
.feat .go{font-weight:700;color:var(--paper);margin-top:4px}
.feat:hover{color:var(--paper)}.feat:hover .go{text-decoration:underline}
.feat .mini li span{color:var(--paper)}

/* mini metro */
.mini{list-style:none;margin:6px 0 0;padding:0;position:relative}
.mini li{position:relative;padding:0 0 10px 22px;font-size:.86rem;line-height:1.35}
.mini li::before{content:"";position:absolute;left:5px;top:5px;bottom:-5px;width:2px;background:var(--line);opacity:.35}
.mini li:last-child::before{display:none}
.mini li::after{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-sizing:border-box}
.mini li.k-r::after{border-color:var(--st-enacted);border-radius:3px}
.mini li.k-c::after{border-color:var(--seal)}
.mini li.more span{color:var(--ink-3)}
.mini li.more::after{border-style:dotted}
.mini li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.feat .mini li::after{background:var(--ink);border-color:#8CA4FF}
.feat .mini li.k-r::after{border-color:#B9A8FF}
.feat .mini li.more span{color:color-mix(in srgb,var(--paper) 60%,transparent)}

/* split: latest + lines */
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}}
.devs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.devs li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.devs li[hidden]{display:none}
.devs time{font-size:var(--step--1);color:var(--ink-3);padding-top:3px}
.devs a.t{font-weight:700;color:var(--ink);text-decoration:none;font-size:1rem;display:inline-block;padding-block:2px;line-height:1.35}
.devs a.t:hover{color:var(--accent)}
.devs .what{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:4px;font-size:var(--step--1);color:var(--ink-3)}
.devs .sum{margin-top:6px;color:var(--ink-2);font-size:.9rem;max-width:78ch}
@media (max-width:560px){.devs li{grid-template-columns:minmax(0,1fr);gap:2px}}
.mgroup[hidden]{display:none}
.mh{font-size:var(--step-1);margin:26px 0 8px}
.mgroup:first-child .mh{margin-top:4px}
.stag{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--ink-2);text-decoration:none;min-height:24px}
.stag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sc,var(--ink-3))}
a.stag:hover{color:var(--ink)}
.ttag{display:inline-flex;align-items:center;min-height:26px;font-size:.78rem;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-2);text-decoration:none;background:var(--surface)}
a.ttag:hover{border-color:var(--accent);color:var(--ink)}
.ttag.plain{border-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipl{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);color:var(--ink);text-decoration:none;font-size:.84rem;font-weight:600}
.chipl span{color:var(--ink-3);font-weight:500}
a.chipl:hover{border-color:var(--accent)}
.chipl.plain{background:transparent}
.conf{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid}
.conf.ok{color:var(--st-force);border-color:color-mix(in srgb,var(--st-force) 40%,transparent)}
.conf.rep{color:var(--st-proposed);border-color:color-mix(in srgb,var(--st-proposed) 40%,transparent)}

.line-mini{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink)}
.line-mini b{font-size:1rem;line-height:1.3}
.line-mini:hover{border-color:var(--accent)}

/* sector grid */
.sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sec-grid{grid-template-columns:minmax(0,1fr)}}
.sec-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--rule);border-top:4px solid var(--sc);border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink);min-width:0}
.sec-card:hover{border-color:var(--sc)}
.sec-card b{font-family:var(--font-display);font-stretch:108%;font-size:1.15rem;line-height:1.2}
.sec-card .eyebrow i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--sc);margin-right:6px}
.sec-card .latest{font-size:.84rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sec-card .latest time{color:var(--ink-3);margin-right:4px}

/* how it works */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:8px}
@media (max-width:760px){.how{grid-template-columns:minmax(0,1fr)}}
.how>div{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:10px;background:var(--sunk)}
.how>div>b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--font-display);font-weight:800}

/* line cards */
.lines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media (max-width:360px){.lines-grid{grid-template-columns:minmax(0,1fr)}}
.line-card{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink);min-width:0}
.line-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.line-card b{font-family:var(--font-display);font-stretch:108%;font-size:1.2rem;line-height:1.2}
.line-card .q{font-size:.88rem;color:var(--ink-2)}

/* metro (a Line of Thought) */
.metro{list-style:none;margin:8px 0 0;padding:0}
.stop{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);padding-bottom:22px}
.stop::before{content:"";position:absolute;left:14px;top:14px;bottom:-4px;width:4px;background:var(--accent);border-radius:2px}
.stop:last-child::before{display:none}
.stop .node{position:relative;z-index:1;width:22px;height:22px;margin:3px 0 0 5px;border-radius:50%;background:var(--paper);border:4px solid var(--accent);box-sizing:border-box}
.stop.k-r .node{border-color:var(--st-enacted);border-radius:5px}
.stop.k-c .node{border-color:var(--seal)}
.stop.xchg .node{width:26px;height:26px;margin:1px 0 0 3px;border-width:5px;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.stop-b{display:flex;flex-direction:column;gap:4px;min-width:0;padding:2px 0 0 8px}
.stop-m{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--step--1);color:var(--ink-3)}
.stop-m time{font-weight:700;color:var(--ink-2)}
.stop-t{font-weight:750;font-size:1.06rem;line-height:1.35;color:var(--ink);text-decoration:none;padding-block:2px}
a.stop-t:hover{color:var(--accent)}
.stop-n{color:var(--ink-2);font-size:.92rem;max-width:72ch}
.xl{font-size:var(--step--1);color:var(--ink-3)}
.xl a{font-weight:600;display:inline-block;padding-block:3px}

/* Line of Thought panel */
.lot{margin-top:40px;padding:24px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);scroll-margin-top:80px}
.lot-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.lot-head h2{font-size:var(--step-3);margin:4px 0}
.lot-lines{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.line-row{display:flex;flex-wrap:wrap;gap:8px}
.line-pill{display:flex;flex-direction:column;padding:8px 14px;border-radius:10px;background:var(--ink);color:var(--paper);text-decoration:none;min-width:0}
.line-pill b{font-size:.9rem}
.line-pill span{font-size:.74rem;opacity:.75}
.line-pill:hover{color:var(--paper);background:var(--accent-hover)}
.lot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.lot-col h3{font-size:var(--step-0);font-family:var(--font-body);font-stretch:100%;letter-spacing:0;font-weight:750}
.lot-col>.small{margin:2px 0 8px}
.lcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lc{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:8px;background:var(--paper);min-width:0}
.lc.k-rule{border-left-color:var(--st-enacted)}
.lc a{font-weight:700;color:var(--ink);text-decoration:none;line-height:1.35;padding-block:2px}
.lc a:hover{color:var(--accent)}
.lc-k{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.lc-s{font-size:.78rem;color:var(--ink-3)}
.lc-why{font-size:.82rem;color:var(--ink-2)}

/* personal trail */
.trail{margin:0 0 22px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.trail[hidden]{display:none}
.trail-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.trail-h .eyebrow{color:var(--accent)}
.trail-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;align-items:stretch}
.trail-l li{display:flex;flex-direction:column;max-width:260px;padding:4px 26px 4px 0;position:relative;min-width:0}
.trail-l li:not(:last-child)::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:2px;background:var(--accent)}
.trail-l .tk{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.trail-l a,.trail-l b{font-size:.86rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trail-l a{font-weight:600;color:var(--ink);text-decoration:none;padding-block:2px}
.trail-l a:hover{color:var(--accent)}

/* search palette */
.pal{position:fixed;inset:0;z-index:70;background:rgb(8 12 24 / .5);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.pal[hidden]{display:none!important}
.pal-card{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:0 20px 60px rgb(0 0 0 / .3);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rule);color:var(--ink-3)}
.pal-in input{flex:1;min-width:0;font:inherit;font-size:1.05rem;border:0;background:transparent;color:var(--ink);outline:none;min-height:36px}
.pal-x{all:unset;cursor:pointer;font-size:.74rem;font-weight:700;border:1px solid var(--rule-2);border-radius:4px;padding:3px 6px;color:var(--ink-3)}
.pal-r{list-style:none;margin:0;padding:6px;overflow:auto}
.pal-r a{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.pal-r [aria-selected="true"] a,.pal-r a:hover{background:var(--accent-soft)}
.pal-r .pk{grid-row:1/3;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding-top:3px}
.pal-r b{font-size:.95rem;line-height:1.3}
.pal-r .ps{font-size:.78rem;color:var(--ink-3)}
.pal-r .none{padding:16px;color:var(--ink-3)}
.pal-f{padding:10px 16px;border-top:1px solid var(--rule);font-size:.78rem;color:var(--ink-3)}
@media (max-width:560px){.pal{padding-top:12px}.pal-r a{grid-template-columns:minmax(0,1fr)}.pal-r .pk{grid-row:auto;padding:0}}
@media (pointer:coarse){.icon-btn{min-height:44px}.ttag,.chipl,.stag{min-height:36px}}
@media (max-width:560px){.trail-l{flex-direction:column;gap:0}.trail-l li{max-width:none;padding:4px 0 8px 16px;border-left:2px solid var(--accent)}.trail-l li:not(:last-child)::after{display:none}.trail-l li[aria-current]{border-left-style:dotted}}
