/* ==========================================================================
Programmatic Academy — design system
Editorial, not documentation. Serif for reading, sans for interface,
monospace reserved strictly for code, spec field names and figures.
Self-hosted Source Serif / Source Sans (SIL OFL, see assets/fonts/).
========================================================================== */
@font-face{font-family:'Source Serif';src:url('../fonts/SourceSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif';src:url('../fonts/SourceSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif';src:url('../fonts/SourceSerif-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif';src:url('../fonts/SourceSerif-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans';src:url('../fonts/SourceSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans';src:url('../fonts/SourceSans-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans';src:url('../fonts/SourceSans-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans';src:url('../fonts/SourceSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
/* --- surfaces: separated by luminance, not by hairlines --- */
--bg:#0d1017;
--bg-2:#13161f;
--bg-3:#191d29;
--bg-4:#212636;
--bg-5:#2a3145;
--line:rgba(255,255,255,.055);
--line-2:rgba(255,255,255,.10);
/* --- ink --- */
--ink:#eef0f6;
--ink-2:#b6bdcd;
--ink-3:#828a9f;
--ink-4:#5c637a;
/* --- accents --- */
--accent:#9db4ff;
--accent-deep:#6f8ef5;
--accent-soft:rgba(157,180,255,.13);
--accent-2:#f0a882;
--accent-2-soft:rgba(240,168,130,.13);
/* semantic, desaturated to sit inside the palette */
--warn:#f0c274; --warn-soft:rgba(240,194,116,.11);
--money:#9fd6a0; --money-soft:rgba(159,214,160,.11);
--floor:#c5aef7; --floor-soft:rgba(197,174,247,.12);
--open:#f2949a; --open-soft:rgba(242,148,154,.11);
--desk:#8fbcff; --desk-soft:rgba(143,188,255,.11);
/* stage hues — give the learner spatial memory of where things live.
--s8 is the Foundation, which sits in front of Stage 0. It is deliberately
the warmest, least saturated hue in the set: the front door reads as paper
and lamplight, and the curriculum blooms into colour after it. */
--s0:#9db4ff; --s1:#7fc9f0; --s2:#6fd8c4; --s3:#96d68e;
--s4:#f0cb74; --s5:#f0a882; --s6:#f298b8; --s7:#bda6f5;
--s8:#e8d3ae;
/* --s9 and --s10 close the curriculum. s9 is a cool slate-teal — the landscape
stage is survey material and should read as cartography, not as heat. s10 is
the only near-gold in the set, reserved for the concluding stage so arriving
at it feels like arriving somewhere. */
--s9:#8fc4c8; --s10:#e0b667;
--stage:var(--accent);
/* --- type --- */
--display:'Source Serif',Iowan Old Style,Charter,Georgia,Cambria,serif;
--text:'Source Serif',Iowan Old Style,Charter,Georgia,Cambria,serif;
--ui:'Source Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
--radius:14px;
/* FOUR RADII, ADDED 31 AUGUST 2026 with the home page rebuild.
`modernity_audit.md` §5 counted the problem and it has grown since: 1,046
`border-radius` declarations across these stylesheets, nine of them using
the token, and about thirty distinct values in play. Nobody consciously
notices that a 9px radius sits beside an 11px one. Everybody feels the
result, and what they feel is assembled rather than designed.
The audit costed the full pass at a day. This is not that pass. These four
tokens exist so the pass has somewhere to land, and they are applied HERE
only to the home page surface, under `body.slimrail`, which took it from nine
distinct radii to four. Book and module pages are untouched. */
--r-1:6px; /* chips, keys, small controls */
--r-2:10px; /* buttons, inputs, list rows */
--r-3:14px; /* cards and panels. The same value as --radius, on purpose */
--r-full:999px; /* pills and circles */
--sidebar:296px; --rail:236px;
--shadow-1:0 1px 2px rgba(0,0,0,.30);
--shadow-2:0 4px 18px -6px rgba(0,0,0,.55);
--shadow-3:0 18px 48px -18px rgba(0,0,0,.75);
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
background:var(--bg);color:var(--ink);
font-family:var(--text);font-size:18px;line-height:1.72;
font-feature-settings:"kern" 1,"liga" 1;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* a soft, high, off-centre glow so the page isn't a flat slab */
body::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(1100px 620px at 68% -12%,rgba(111,142,245,.10),transparent 62%),
radial-gradient(760px 460px at 6% 4%,rgba(240,168,130,.05),transparent 60%);
}
#app{position:relative;z-index:1}
a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:#c3d0ff}
::selection{background:rgba(157,180,255,.26);color:#fff}
/* ---------- layout ---------- */
#app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
#sidebar{
background:linear-gradient(180deg,var(--bg-2),var(--bg));
border-right:1px solid var(--line);
position:sticky;top:0;height:100vh;overflow-y:auto;padding:0 0 40px;
scrollbar-width:thin;scrollbar-color:var(--bg-5) transparent;
}
#sidebar::-webkit-scrollbar{width:9px}
#sidebar::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:9px;border:3px solid transparent;background-clip:content-box}
#main{min-width:0;display:flex;flex-direction:column}
.wrap{max-width:1260px;width:100%;margin:0 auto;padding:52px 56px 120px;
display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:60px;align-items:start}
.wrap.solo{grid-template-columns:minmax(0,1fr)}
article{min-width:0}
#rail{position:sticky;top:34px}
/* ---------- sidebar ---------- */
.brand{padding:26px 24px 20px;cursor:pointer;border-bottom:1px solid var(--line)}
/* THIS RULE IS NOW THE BOOK'S NAME ONLY, NOT THE PLATFORM'S.
Inside a book the sidebar still sets the book's title in serif capitals, and
that is correct and unchanged: a book is a book. The PLATFORM lockup moved to
the sans on 3 Sep 2026 and is set separately, under `.brand .lock h1` below.
Tracking is POSITIVE here, and the sign is the whole point. Of 417 uppercase
declarations across these stylesheets, 397 are tracked at .04em or more. This
one escaped that convention only because it uses literal capitals rather than
text-transform:uppercase, so it never matched the selector anyone was thinking
about, and it inherited the DISPLAY rule instead: -.015em, correct for 76px
lowercase and wrong for 21px capitals. Tight capitals are what mastheads do.
Loosened to .04em and dropped from 700 to 600 on 30 Aug 2026 with the mark. */
.brand h1{font-family:var(--display);font-size:21px;margin:0;letter-spacing:.04em;font-weight:600;line-height:1.2;color:var(--ink)}
.brand h1 span{color:var(--accent);display:block}
.brand p{margin:7px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4);letter-spacing:.01em}
.progwrap{display:flex;align-items:center;gap:13px;padding:18px 24px 6px}
.progwrap svg{flex:none;overflow:visible}
.progwrap .track{stroke:rgba(255,255,255,.09)}
#ring{transition:stroke-dashoffset .9s var(--ease),stroke .5s var(--ease)}
.progwrap .pt{font-family:var(--ui);font-size:12px;color:var(--ink-4);line-height:1.4}
.progwrap .pt b{display:block;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.005em}
.progwrap .pt span{display:block}
.searchbtn{margin:16px 18px 8px;width:calc(100% - 36px);display:flex;align-items:center;gap:9px;
background:var(--bg-3);border:1px solid var(--line);color:var(--ink-3);
padding:10px 13px;border-radius:11px;font-family:var(--ui);font-size:13.5px;cursor:pointer;
transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.searchbtn:hover{background:var(--bg-4);border-color:var(--line-2);color:var(--ink-2)}
.searchbtn kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;color:var(--ink-4)}
nav{padding:10px 14px}
.stage{margin:20px 0 6px;padding:0 10px;font-family:var(--ui);font-size:11.5px;
letter-spacing:.02em;color:var(--ink-4);font-weight:600;display:flex;align-items:center;gap:9px}
.stage .sd{width:7px;height:7px;border-radius:50%;background:var(--st,var(--accent));flex:none;
box-shadow:0 0 0 3px color-mix(in srgb,var(--st,var(--accent)) 16%,transparent)}
.stage i{flex:1;height:1px;background:var(--line);font-style:normal}
nav a.mod{display:flex;gap:11px;align-items:baseline;padding:7px 11px;border-radius:9px;
color:var(--ink-3);font-family:var(--ui);font-size:14px;line-height:1.42;position:relative;
transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
nav a.mod:hover{background:var(--bg-3);color:var(--ink);text-decoration:none;transform:translateX(2px)}
nav a.mod.on{background:var(--bg-4);color:var(--ink);font-weight:600}
nav a.mod.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2.5px;border-radius:2px;background:var(--st,var(--accent))}
nav a.mod .n{font-family:var(--mono);font-size:11px;color:var(--ink-4);flex:none;width:27px;letter-spacing:-.02em}
nav a.mod.done .n::after{content:"✓";color:var(--st,var(--accent));margin-left:3px}
.navfoot{margin-top:24px;padding:18px 24px 0;border-top:1px solid var(--line)}
.navfoot a{display:block;font-family:var(--ui);font-size:13px;color:var(--ink-4);padding:5px 0;transition:color .18s var(--ease)}
.navfoot a:hover{color:var(--accent)}
/* ---------- module opening: a moment of arrival ---------- */
.opener{padding:8px 0 0;margin:0 0 56px;position:relative}
.opener::after{content:'';display:block;height:1px;margin-top:40px;
background:linear-gradient(90deg,var(--stage),transparent 62%);opacity:.5}
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:13px;
font-weight:600;letter-spacing:.005em;color:var(--ink-3);margin:0 0 22px}
.kicker .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 10px;border-radius:100px;
background:color-mix(in srgb,var(--stage) 12%,transparent);color:var(--stage);
font-size:12.5px;font-weight:600}
.kicker .chip .sd{width:6px;height:6px;border-radius:50%;background:var(--stage)}
.kicker .sep{color:var(--ink-4)}
h2.mt{font-family:var(--display);font-size:clamp(40px,4.4vw,60px);line-height:1.03;
margin:0 0 26px;letter-spacing:-.032em;font-weight:700;color:#fff;max-width:20ch}
.standfirst{font-family:var(--display);font-size:23px;line-height:1.56;color:var(--ink-2);
margin:0 0 34px;max-width:60ch;padding-left:26px;border-left:2px solid var(--stage);font-weight:400}
.standfirst strong{color:var(--ink);font-weight:600}
.meta{display:flex;column-gap:26px;row-gap:8px;flex-wrap:wrap;font-family:var(--ui);font-size:13px;
color:var(--ink-4);padding:0;margin:0}
.meta b{color:var(--ink-2);font-weight:600}
.meta .muted{color:var(--ink-4)}
/* the prerequisite strip — quieter than the objectives box that follows it */
.prereq{margin:0 0 22px;padding:16px 20px;border-radius:12px;background:var(--bg-2);
border-left:2px solid var(--s8)}
.prereq h5{margin:0 0 6px;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
text-transform:uppercase;color:var(--s8);font-weight:600}
.prereq .need{margin:0;font-family:var(--ui);font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:76ch}
.prereq .from{margin:7px 0 0;font-family:var(--ui);font-size:13px;color:var(--ink-4)}
.prereq .from a{color:var(--s8)}
.br-mod{display:block;font-family:var(--ui);font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.objectives{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border-radius:var(--radius);
padding:26px 30px;margin:0 0 52px;box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.objectives::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stage);opacity:.75}
.objectives h5{margin:0 0 12px;font-family:var(--ui);font-size:12px;letter-spacing:.02em;
color:var(--stage);font-weight:600;text-transform:none}
.objectives ul{margin:0;padding-left:20px;font-family:var(--text);font-size:17px;color:var(--ink-2);line-height:1.62}
.objectives li{margin:7px 0}
.objectives li::marker{color:var(--stage)}
/* ---------- typography ---------- */
h3.sec{font-family:var(--display);font-size:30px;margin:0 0 6px;letter-spacing:-.022em;
line-height:1.18;scroll-margin-top:26px;color:#fff;font-weight:600;max-width:26ch}
h4{font-family:var(--ui);font-size:18px;margin:34px 0 8px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
h5{font-family:var(--ui);font-size:15.5px;margin:26px 0 6px;color:var(--ink-2);font-weight:600}
article p{margin:17px 0;max-width:66ch}
article ul,article ol{max-width:66ch;padding-left:24px;margin:17px 0}
article li{margin:8px 0}
article li::marker{color:var(--ink-4)}
strong{color:#fff;font-weight:600}
em{color:var(--ink)}
code{font-family:var(--mono);font-size:.82em;background:rgba(157,180,255,.09);
padding:2px 6px;border-radius:6px;color:#c7d3ff;letter-spacing:-.01em;white-space:nowrap}
pre{background:var(--bg-2);border-radius:var(--radius);padding:20px 22px;overflow-x:auto;
font-family:var(--mono);font-size:13px;line-height:1.68;color:var(--ink-2);
box-shadow:var(--shadow-1);margin:22px 0;border-left:2px solid var(--line-2)}
pre code{background:none;padding:0;color:inherit;font-size:inherit;white-space:pre}
blockquote{margin:26px 0;padding:4px 0 4px 24px;border-left:2px solid var(--stage);
color:var(--ink-2);font-style:italic;font-size:19.5px;line-height:1.6;max-width:60ch}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
table{border-collapse:collapse;width:100%;margin:24px 0;font-family:var(--ui);font-size:14.5px;
display:block;overflow-x:auto;line-height:1.55}
th,td{padding:11px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--bg-3);font-size:12.5px;letter-spacing:.01em;color:var(--ink-2);
font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line-2)}
th:first-child{border-top-left-radius:10px}
th:last-child{border-top-right-radius:10px}
tbody tr{transition:background .16s var(--ease)}
tbody tr:hover{background:rgba(255,255,255,.022)}
/* ---------- depth layers ---------- */
.layerbar{display:inline-flex;gap:2px;background:var(--bg-2);border-radius:13px;padding:4px;
margin:30px 0 0;box-shadow:var(--shadow-1);flex-wrap:wrap}
.layerbar button{background:none;border:0;color:var(--ink-3);font-family:var(--ui);font-size:13.5px;
font-weight:500;padding:9px 20px;border-radius:10px;cursor:pointer;white-space:nowrap;
transition:background .22s var(--ease),color .22s var(--ease)}
.layerbar button:hover{color:var(--ink)}
.layerbar button.on{background:var(--bg-4);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.layerbar button .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:1px;opacity:.9}
.dot.l1{background:var(--ink-3)}.dot.l2{background:var(--desk)}.dot.l3{background:var(--accent)}.dot.l4{background:var(--floor)}
section.layer{display:none}
section.layer.show{display:block;margin:0 0 64px}
section.layer.show>h3.sec{margin-bottom:10px}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.layertag{display:inline-block;font-family:var(--ui);font-size:11.5px;letter-spacing:.015em;
padding:3px 11px;border-radius:100px;font-weight:600;flex:none}
.layertag.l1{background:rgba(255,255,255,.05);color:var(--ink-3)}
.layertag.l2{background:var(--desk-soft);color:var(--desk)}
.layertag.l3{background:var(--accent-soft);color:var(--accent)}
.layertag.l4{background:var(--floor-soft);color:var(--floor)}
/* entrance motion */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}
/* ---------- callouts as designed objects ---------- */
.call{border-radius:var(--radius);padding:22px 26px 22px 24px;margin:30px 0;max-width:70ch;
background:var(--bg-2);box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.call::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.call .ch{font-family:var(--ui);font-size:12.5px;letter-spacing:.01em;font-weight:600;
margin:0 0 10px;display:flex;align-items:center;gap:9px}
.call .ch span:first-child{font-size:14px;line-height:1;opacity:.95}
.call p{margin:11px 0;max-width:62ch;font-size:17px}
.call p:first-of-type{margin-top:0}.call p:last-child{margin-bottom:0}
.call ul,.call ol{font-size:17px;max-width:62ch}
.call.myth{background:linear-gradient(112deg,var(--warn-soft),var(--bg-2) 58%)}
.call.myth::before{background:var(--warn)}.call.myth .ch{color:var(--warn)}
.call.desk{background:linear-gradient(112deg,var(--desk-soft),var(--bg-2) 58%)}
.call.desk::before{background:var(--desk)}.call.desk .ch{color:var(--desk)}
.call.money{background:linear-gradient(112deg,var(--money-soft),var(--bg-2) 58%)}
.call.money::before{background:var(--money)}.call.money .ch{color:var(--money)}
.call.open{background:linear-gradient(112deg,var(--open-soft),var(--bg-2) 58%)}
.call.open::before{background:var(--open)}.call.open .ch{color:var(--open)}
.call.spec{background:linear-gradient(112deg,var(--floor-soft),var(--bg-2) 58%)}
.call.spec::before{background:var(--floor)}.call.spec .ch{color:var(--floor)}
/* the figure-colour legend on the contents page */
.legend{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;margin-right:2px}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none;transform:translateY(-1px)}
.lg-neutral{background:var(--ink)}
.lg-key{background:var(--accent)}
.lg-good{background:var(--money)}
.lg-warn{background:var(--warn)}
.lg-bad{background:var(--open)}
/* worked example */
.worked{border-radius:var(--radius);margin:32px 0;overflow:hidden;background:var(--bg-2);
box-shadow:var(--shadow-2);max-width:70ch}
.worked>h5{margin:0;padding:15px 26px;background:var(--bg-4);font-family:var(--ui);font-size:12.5px;
letter-spacing:.015em;color:var(--accent-2);font-weight:600;display:flex;align-items:center;gap:9px}
.worked>h5::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent-2)}
.worked .wb{padding:8px 26px 22px}
.worked table{margin:16px 0}
.calcline{display:flex;justify-content:space-between;gap:22px;font-family:var(--ui);font-size:15.5px;
padding:9px 0;border-bottom:1px solid var(--line)}
.calcline:last-child{border-bottom:0}
.calcline .v{font-family:var(--mono);font-size:14.5px;color:var(--accent);white-space:nowrap;font-weight:500}
.calcline.tot{border-top:1px solid var(--line-2);border-bottom:0;margin-top:8px;padding-top:14px;
color:#fff;font-weight:600}
.calcline.tot .v{color:#fff;font-weight:700}
.calcline.neg .v{color:var(--open)}
/* ---------- right rail ---------- */
.railbox{border-radius:13px;background:var(--bg-2);padding:20px 22px;margin-bottom:16px;
font-family:var(--ui);font-size:13.5px;box-shadow:var(--shadow-1)}
.railbox h5{margin:0 0 13px;font-family:var(--ui);font-size:11.5px;letter-spacing:.03em;
color:var(--ink-4);font-weight:600;text-transform:uppercase}
#toc a{display:block;color:var(--ink-3);padding:6px 0 6px 15px;line-height:1.42;font-size:13.5px;
border-left:2px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease),padding-left .2s var(--ease)}
#toc a:hover{color:var(--ink);border-left-color:var(--ink-4);text-decoration:none;padding-left:18px}
#toc a.on{color:var(--stage);border-left-color:var(--stage);font-weight:600}
.keyfact{margin:16px 0}
.keyfact:first-child{margin-top:0}
.keyfact .kv{font-family:var(--mono);color:var(--accent-2);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.keyfact .kk{color:var(--ink-3);font-size:12.5px;line-height:1.45;margin-top:5px}
.railstatus .rs{display:flex;align-items:center;gap:9px}
/* ---------- buttons ---------- */
button,select,input{font-family:var(--ui)}
.markdone{background:var(--accent);border:0;color:#0d1017;padding:13px 26px;border-radius:11px;
cursor:pointer;font-family:var(--ui);font-size:14.5px;font-weight:600;
box-shadow:0 4px 14px -6px rgba(157,180,255,.6);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.markdone:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(157,180,255,.75);background:#b3c5ff}
.markdone.done{background:var(--bg-4);color:var(--ink-2);box-shadow:none}
.markdone.done:hover{background:var(--bg-5);transform:none}
.btn{background:var(--bg-4);border:0;color:var(--ink);padding:10px 18px;border-radius:10px;cursor:pointer;font-size:14px;transition:background .2s var(--ease)}
.btn:hover{background:var(--bg-5)}
/* ---------- end-of-module bar ---------- */
.endbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
border-radius:var(--radius);background:linear-gradient(135deg,var(--bg-4),var(--bg-2) 70%);
padding:26px 30px;margin:56px 0 0;box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.endbar::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--stage),transparent 70%)}
.endbar h5{margin:0 0 4px;font-family:var(--display);font-size:21px;color:#fff;font-weight:600;letter-spacing:-.015em}
.endbar p{margin:0;font-family:var(--ui);font-size:14px;color:var(--ink-3);max-width:52ch}
/* ---------- interactive shell ---------- */
.sim{border-radius:16px;background:var(--bg-2);margin:36px 0;overflow:hidden;box-shadow:var(--shadow-3)}
.sim>header{padding:17px 24px;display:flex;align-items:center;gap:12px;
background:linear-gradient(135deg,var(--bg-4),var(--bg-3));border-bottom:1px solid var(--line)}
.sim>header h5{margin:0;font-family:var(--display);font-size:19px;letter-spacing:-.015em;color:#fff;font-weight:600}
.sim>header .tag{font-family:var(--ui);font-size:11px;letter-spacing:.02em;color:var(--accent);
background:var(--accent-soft);padding:4px 12px;border-radius:100px;margin-left:auto;font-weight:600;flex:none}
.sim .body{padding:24px}
.sim .lede{font-family:var(--text);font-size:16.5px;color:var(--ink-2);margin:0 0 22px;max-width:66ch;line-height:1.62}
.ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-bottom:24px}
.ctrl label{display:flex;justify-content:space-between;font-family:var(--ui);font-size:13px;
color:var(--ink-2);margin-bottom:8px;gap:10px;font-weight:500}
.ctrl label .v{font-family:var(--mono);color:var(--accent);font-weight:600;font-size:13px}
/* Every slider anywhere takes the page's stage colour by default. Without this a
new interactive that builds its own control markup instead of using .ctrl
ships the browser's own blue, which is off-palette and reads as unfinished.
Three of the four shared modules did exactly that. .ctrl below is more
specific and still wins where it applies. */
input[type=range]{accent-color:var(--stage);height:4px}
.ctrl input[type=range]{width:100%;accent-color:var(--accent);height:4px}
.ctrl select,.ctrl input[type=number],.ctrl input[type=text]{width:100%;background:var(--bg);
border:1px solid var(--line-2);color:var(--ink);padding:9px 12px;border-radius:9px;font-size:14px;
transition:border-color .2s var(--ease)}
.ctrl select:focus,.ctrl input:focus{outline:none;border-color:var(--accent)}
.ctrl .hint{font-family:var(--ui);font-size:12px;color:var(--ink-4);margin-top:6px;line-height:1.45}
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:13px;margin:20px 0;
align-items:stretch}
.ro{background:var(--bg-3);border-radius:12px;padding:14px 16px;transition:transform .2s var(--ease);
display:flex;flex-direction:column;height:100%}
.ro:hover{transform:translateY(-1px)}
.ro .k{font-family:var(--ui);font-size:11px;letter-spacing:.02em;color:var(--ink-4);font-weight:600;
text-transform:uppercase;line-height:1.3;min-height:2.6em;display:flex;align-items:flex-start}
/* ---- FIGURE COLOUR CONVENTION -------------------------------------------
One rule, applied to every figure in every interactive:
(default) neutral — an input you set, or a descriptive fact
.key accent — THE payoff figure this component exists to teach.
At most one per component.
.good green — healthy: value retained, captured or protected
.warn amber — at risk: borderline, or a figure that should worry you
.bad red — failing: value destroyed or leaked, or a number below
the level a practitioner should accept
Colour therefore always means the same thing, and a coloured figure is
always a judgement rather than decoration. Stated for the learner on the
contents page and in the README.
------------------------------------------------------------------------ */
.ro .v{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--ink);line-height:1.28;letter-spacing:-.025em;margin-top:3px}
.ro.key{background:linear-gradient(160deg,var(--accent-soft),var(--bg-3) 62%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.ro.key .v{color:var(--accent)}
.ro.key .k{color:var(--accent)}
.ro.warn .v{color:var(--warn)}
.ro.bad .v{color:var(--open)}
.ro.good .v{color:var(--money)}
/* `alt` predates the convention and is retained only as an alias for neutral,
so no component silently keeps a second accent colour */
.ro.alt .v{color:var(--ink)}
.ro .sub{font-family:var(--ui);font-size:11.5px;color:var(--ink-4);margin-top:auto;padding-top:4px;line-height:1.4}
.simnote{font-family:var(--ui);font-size:14px;color:var(--ink-3);border-top:1px solid var(--line);
padding-top:18px;margin-top:22px;line-height:1.65}
.simnote b{color:var(--ink-2)}
canvas,svg{max-width:100%}
.simtable{font-size:13.5px}
/* ---------- capability matrix (Stage 8) ----------
A comparison table, not a scoreboard: the verdict chip carries the colour and
the prose carries the meaning, so no cell can be read as a score out of ten. */
.simtable.mx{table-layout:fixed}
.simtable.mx td{vertical-align:top;line-height:1.6}
.simtable.mx td:first-child{width:19%}
.simtable.mx td:nth-child(2){width:44%}
/* The widths above are tuned for the three-column capability matrix. Any table
with more columns needs to size itself, or the last column collapses to one
word per line — which is what it did before this was added. */
.simtable.mx.wide{table-layout:auto}
.simtable.mx.wide td:first-child,.simtable.mx.wide td:nth-child(2){width:auto}
.simtable.mx.wide td{padding-right:14px}
.simtable.mx.wide td:last-child{min-width:22ch}
.mx-own{font-family:var(--ui);font-size:11px;color:var(--ink-4);margin-top:3px;font-weight:400;letter-spacing:.005em}
.mx-v{display:inline-block;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.03em;
text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-right:7px;white-space:nowrap;
background:var(--bg-4);color:var(--ink-3);vertical-align:1px}
.mx-v.good{background:color-mix(in srgb,var(--money) 16%,transparent);color:var(--money)}
.mx-v.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.mx-v.bad{background:color-mix(in srgb,var(--open) 16%,transparent);color:var(--open)}
.mx-lesson{margin-top:22px;padding:16px 20px;border-radius:12px;background:var(--bg-2);
border-left:2px solid var(--stage)}
.mx-lesson p{margin:0;font-size:15px;line-height:1.68;color:var(--ink-2)}
.mx-lesson p+p{margin-top:10px}
@media(max-width:720px){
.simtable.mx,.simtable.mx tbody,.simtable.mx tr,.simtable.mx td{display:block;width:auto}
.simtable.mx thead{display:none}
.simtable.mx tr{padding:14px 0;border-bottom:1px solid var(--line)}
.simtable.mx td{width:auto!important;padding:3px 0}
}
.bar{height:7px;border-radius:100px;background:var(--bg-4);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .5s var(--ease)}
.pill{display:inline-block;font-family:var(--ui);font-size:11.5px;letter-spacing:.01em;
padding:3px 11px;border-radius:100px;background:var(--bg-4);color:var(--ink-3);font-weight:500}
/* ---------- quiz ---------- */
.quiz{border-radius:16px;background:var(--bg-2);margin:44px 0;overflow:hidden;box-shadow:var(--shadow-2)}
.quiz>header{padding:18px 26px;background:linear-gradient(135deg,var(--bg-4),var(--bg-3));
border-bottom:1px solid var(--line);display:flex;align-items:center}
.quiz>header h5{margin:0;font-family:var(--display);font-size:20px;color:#fff;font-weight:600;letter-spacing:-.015em}
.quiz>header .score{margin-left:auto;font-family:var(--mono);font-size:13.5px;color:var(--ink-3)}
.q{padding:24px 26px;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q .qt{font-family:var(--text);font-size:18px;margin:0 0 15px;font-weight:600;color:var(--ink);line-height:1.5;max-width:64ch}
.q .qt .num{font-family:var(--mono);color:var(--accent);font-size:13px;margin-right:10px;font-weight:600}
.opt{display:block;width:100%;text-align:left;background:var(--bg-3);border:1px solid transparent;
color:var(--ink-2);padding:14px 18px;border-radius:11px;margin:9px 0;cursor:pointer;
font-family:var(--ui);font-size:15px;line-height:1.5;
transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.opt:hover:not(:disabled){background:var(--bg-4);color:var(--ink);transform:translateX(3px)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--money);background:var(--money-soft);color:#e6f6e6}
.opt.wrong{border-color:var(--open);background:var(--open-soft);color:#ffe4e6}
.why{font-family:var(--ui);font-size:14.5px;line-height:1.65;padding:14px 18px;margin:8px 0 4px;
border-radius:11px;background:var(--bg-3);color:var(--ink-3);display:none;border-left:2px solid var(--line-2)}
.why.show{display:block;animation:rise .4s var(--ease)}
.why.ok{border-left-color:var(--money)}
.why.no{border-left-color:var(--open)}
.why b{color:var(--ink-2)}
@keyframes rise{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* ---------- scenario ---------- */
.scen{border-radius:16px;margin:44px 0;overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-2)}
.scen>header{padding:18px 26px;background:linear-gradient(135deg,var(--floor-soft),var(--bg-3));border-bottom:1px solid var(--line)}
.scen>header h5{margin:0;font-family:var(--display);font-size:20px;color:var(--floor);font-weight:600;letter-spacing:-.015em}
.scen .setup{padding:24px 26px;font-family:var(--text);font-size:17.5px;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.66}
.scen .setup p{margin:13px 0;max-width:64ch}
.scen .setup p:first-child{margin-top:0}
.scen .choices{padding:24px 26px}
.scen .prompt{font-family:var(--text);font-size:18px;font-weight:600;margin:0 0 16px;color:var(--ink)}
.verdict{font-family:var(--ui);font-size:14.5px;line-height:1.68;padding:15px 18px;border-radius:11px;
margin:9px 0 4px;display:none;border-left:2px solid}
.verdict.show{display:block;animation:rise .4s var(--ease)}
.verdict .vh{font-family:var(--ui);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.verdict.best{background:var(--money-soft);border-left-color:var(--money)}.verdict.best .vh{color:var(--money)}
.verdict.ok{background:var(--desk-soft);border-left-color:var(--desk)}.verdict.ok .vh{color:var(--desk)}
.verdict.poor{background:var(--warn-soft);border-left-color:var(--warn)}.verdict.poor .vh{color:var(--warn)}
.verdict.bad{background:var(--open-soft);border-left-color:var(--open)}.verdict.bad .vh{color:var(--open)}
/* ---------- glossary ---------- */
.gsearch{width:100%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);
padding:16px 20px;border-radius:13px;font-family:var(--ui);font-size:16.5px;margin-bottom:10px;
transition:border-color .2s var(--ease),background .2s var(--ease)}
.gsearch::placeholder{color:var(--ink-4)}
.gsearch:focus{outline:none;border-color:var(--accent);background:var(--bg-3)}
.galpha{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0 26px}
.galpha button{background:var(--bg-2);border:0;color:var(--ink-4);width:33px;height:33px;border-radius:9px;
cursor:pointer;font-family:var(--ui);font-size:13px;font-weight:600;transition:background .18s var(--ease),color .18s var(--ease)}
.galpha button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.galpha button:disabled{opacity:.22;cursor:default}
.gitem{border-bottom:1px solid var(--line);padding:22px 0;scroll-margin-top:26px}
.gitem h4{margin:0 0 5px;font-family:var(--display);font-size:20px;color:var(--ink);font-weight:600;letter-spacing:-.015em}
.gitem h4 .abbr{font-family:var(--ui);font-size:13px;color:var(--ink-4);margin-left:11px;font-weight:400}
.gitem p{margin:7px 0;font-size:16.5px;color:var(--ink-2);max-width:70ch;line-height:1.62}
.gitem .xr{font-family:var(--ui);font-size:13px;color:var(--ink-4);margin-top:9px}
.gitem .xr a{margin-right:12px}
.gitem .mod{font-family:var(--ui);font-size:11.5px;letter-spacing:.01em;color:var(--accent);
background:var(--accent-soft);padding:3px 10px;border-radius:100px;margin-left:12px;font-weight:600}
a.term{color:var(--ink);border-bottom:1px solid rgba(157,180,255,.35);cursor:help;transition:border-color .2s var(--ease),color .2s var(--ease)}
a.term:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}
/* ---------- search palette ---------- */
#palette{position:fixed;inset:0;background:rgba(6,8,13,.72);display:none;z-index:200;padding-top:11vh;backdrop-filter:blur(8px)}
#palette.show{display:block;animation:fadein .18s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.pbox{max-width:680px;margin:0 auto;background:var(--bg-3);border-radius:17px;overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.7);animation:rise .26s var(--ease)}
.pbox input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);
padding:20px 24px;font-family:var(--ui);font-size:17px}
.pbox input::placeholder{color:var(--ink-4)}
.pbox input:focus{outline:none}
.presults{max-height:54vh;overflow-y:auto;padding:9px}
.presults a{display:block;padding:12px 16px;border-radius:11px;color:var(--ink-3);font-family:var(--ui);font-size:14.5px;transition:background .14s var(--ease)}
.presults a:hover,.presults a.sel{background:var(--bg-4);color:var(--ink);text-decoration:none}
.presults a .t{font-weight:600;color:var(--ink)}
.presults a .c{font-size:12.5px;color:var(--ink-4);display:block;margin-top:2px}
.presults a .k{font-family:var(--ui);font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent);margin-right:9px;font-weight:600}
.pempty{padding:34px;text-align:center;color:var(--ink-4);font-family:var(--ui);font-size:14.5px}
/* ---------- home ---------- */
.hero{padding:22px 0 46px;margin-bottom:22px;position:relative}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:13px;
font-weight:600;color:var(--accent);background:var(--accent-soft);padding:6px 15px;border-radius:100px;margin-bottom:26px}
.hero h2{font-family:var(--display);font-size:clamp(46px,5.6vw,76px);margin:0 0 24px;
letter-spacing:-.038em;line-height:.99;color:#fff;font-weight:700;max-width:15ch}
.hero h2 em{font-style:italic;color:var(--accent);font-weight:400}
.hero .lede{font-family:var(--display);font-size:23px;color:var(--ink-2);max-width:58ch;margin:0 0 28px;line-height:1.55}
.hero .stats{display:flex;flex-wrap:wrap;gap:34px;font-family:var(--ui);font-size:14px;color:var(--ink-4);
padding-top:26px;border-top:1px solid var(--line)}
.hero .stats b{display:block;font-family:var(--mono);font-size:25px;color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1.2}
/* the hero's single call to action — the front door of the whole curriculum */
.herocta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 6px}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--s8);color:#141013;
font-family:var(--ui);font-size:16px;font-weight:600;padding:15px 24px;border-radius:12px;
box-shadow:0 10px 30px -12px rgba(232,211,174,.55);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
.cta:hover{color:#141013;background:#f2e0c2;transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(232,211,174,.7);text-decoration:none}
.cta .ar{font-size:17px;transition:transform .22s var(--ease)}
.cta:hover .ar{transform:translateX(3px)}
.ctasub{font-family:var(--ui);font-size:13.5px;color:var(--ink-4)}
/* what the four depth layers mean on this page */
.depthnote{font-family:var(--ui);font-size:13.5px;color:var(--ink-4);margin:14px 0 0;max-width:70ch;line-height:1.6}
.depthnote b{color:var(--ink-2);font-weight:600}
.stagehead{margin:64px 0 8px;padding-top:26px;border-top:1px solid var(--line);position:relative}
/* the Foundation opens the contents page: no rule above it, more presence */
.stagehead.first{margin-top:30px;border-top:0;padding-top:0}
.stagehead.first::before{display:none}
.stagehead.first h3{font-size:40px}
nav .stage.first{margin-top:8px}
.stagehead::before{content:'';position:absolute;top:-1px;left:0;width:80px;height:2px;background:var(--st,var(--accent))}
.stagehead .sn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:12.5px;
letter-spacing:.02em;color:var(--st,var(--accent));font-weight:600;margin-bottom:10px}
.stagehead .sn .sd{width:7px;height:7px;border-radius:50%;background:var(--st,var(--accent))}
.stagehead h3{margin:0 0 8px;font-family:var(--display);font-size:35px;color:#fff;font-weight:600;letter-spacing:-.026em;line-height:1.1}
.stagehead p{margin:0;font-family:var(--text);font-size:18px;color:var(--ink-3);max-width:58ch;line-height:1.55}
.cards{display:flex;flex-wrap:wrap;gap:16px;margin:26px 0 8px}
.card{flex:1 1 260px;max-width:420px;border-radius:14px;background:var(--bg-2);padding:24px 26px 22px;
display:block;color:inherit;position:relative;overflow:hidden;box-shadow:var(--shadow-1);
transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--st,var(--accent));opacity:.55;transition:opacity .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);background:var(--bg-3);text-decoration:none}
.card:hover::before{opacity:1}
.card .n{font-family:var(--mono);font-size:12px;color:var(--st,var(--accent));letter-spacing:-.01em;font-weight:600}
.card h4{margin:9px 0 9px;font-family:var(--display);font-size:22px;color:var(--ink);font-weight:600;letter-spacing:-.018em;line-height:1.22}
.card p{font-family:var(--ui);font-size:14px;color:var(--ink-3);margin:0;line-height:1.55}
.card .st{font-family:var(--ui);font-size:12.5px;color:var(--ink-4);margin-top:16px;display:flex;align-items:center;gap:8px}
.card .st .tick{color:var(--money)}
/* a stage with a single module must not imply three missing ones */
.cards.solo-card .card{flex:0 1 420px}
/* pager */
.pager{display:flex;gap:16px;margin:56px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.pager a{flex:1;border-radius:13px;padding:18px 22px;color:var(--ink-3);background:var(--bg-2);
transition:transform .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease)}
.pager a:hover{background:var(--bg-3);text-decoration:none;color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.pager a .d{font-family:var(--ui);font-size:12px;letter-spacing:.02em;color:var(--ink-4);font-weight:600}
.pager a .t{display:block;font-family:var(--display);font-size:18px;margin-top:5px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.pager a.nx{text-align:right}
/* misc */
.srcref{font-family:var(--ui);font-size:14px;color:var(--ink-3);border-top:1px solid var(--line);
margin-top:52px;padding-top:22px}
.srcref h5{font-family:var(--ui);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4);margin:0 0 12px;font-weight:600}
.srcref ol{padding-left:22px;margin:0;max-width:76ch}
.srcref li{margin:6px 0;line-height:1.6}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-4)}
#burger{display:none;position:fixed;top:14px;left:14px;z-index:160;width:44px;height:44px;
align-items:center;justify-content:center;background:var(--bg-3);border:1px solid var(--line-2);
border-radius:11px;color:var(--ink);cursor:pointer;font-size:18px}
#scrim{position:fixed;inset:0;background:rgba(6,8,13,.65);z-index:140;display:none;backdrop-filter:blur(3px)}
#scrim.show{display:block}
#storagewarn{font-family:var(--ui)}
/* ---------- glossary hover layer ---------- */
/* the affordance is deliberately quiet: a faint dotted rule, never link colour */
.gterm{
border-bottom:1px dotted rgba(182,189,205,.42);
cursor:help;color:inherit;
transition:border-color .18s var(--ease),background .18s var(--ease);
border-radius:2px;
}
.gterm:hover,.gterm[aria-expanded="true"]{
border-bottom-color:var(--stage);
background:color-mix(in srgb,var(--stage) 10%,transparent);
}
.gterm:focus-visible{outline:2px solid var(--stage);outline-offset:2px;border-radius:3px}
a.term[data-term]{cursor:help}
.gpop{
position:fixed;z-index:300;display:none;max-width:352px;width:max-content;
background:var(--bg-4);border-radius:13px;padding:16px 18px 14px;
box-shadow:0 22px 60px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07);
font-family:var(--ui);opacity:0;transform:translateY(4px);
transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.gpop.show{display:block;opacity:1;transform:none}
.gpop::after{
content:'';position:absolute;left:var(--ax,50%);margin-left:-7px;
border:7px solid transparent;border-top-color:var(--bg-4);bottom:-14px;
}
.gpop.below::after{bottom:auto;top:-14px;border-top-color:transparent;border-bottom-color:var(--bg-4)}
/* clamped away from its trigger: an arrow would point at nothing */
.gpop.noarrow::after{display:none}
.gpop-t{font-family:var(--display);font-size:17.5px;font-weight:600;color:#fff;
letter-spacing:-.015em;line-height:1.25;margin-bottom:7px}
.gpop-abbr{font-family:var(--ui);font-size:12px;color:var(--ink-4);font-weight:400;margin-left:9px}
.gpop-p{margin:0 0 13px;font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.gpop-link{display:flex;align-items:center;gap:10px;text-decoration:none;
background:var(--bg-2);border-radius:9px;padding:10px 12px;margin-bottom:7px;
transition:background .18s var(--ease),transform .18s var(--ease)}
.gpop-link:hover{background:var(--bg-3);text-decoration:none;transform:translateX(2px)}
.gpop-link:focus-visible{outline:2px solid var(--st,var(--accent));outline-offset:2px}
.gpop-lk{display:none}
.gpop-lm{flex:1;font-size:12.5px;color:var(--st,var(--accent));font-weight:600;line-height:1.35}
.gpop-ls{display:block;color:var(--ink-3);font-weight:400;font-size:12px;margin-top:2px}
.gpop-arrow{color:var(--st,var(--accent));font-size:14px;flex:none}
.gpop-more{display:block;font-size:12px;color:var(--ink-4);text-align:center;padding-top:2px}
.gpop-more:hover{color:var(--accent)}
/* the section a hover card sent you to, briefly marked so you can see you arrived */
section.layer.jumped{animation:jumped 1.8s var(--ease)}
@keyframes jumped{
0%{background:color-mix(in srgb,var(--stage) 13%,transparent);box-shadow:0 0 0 14px color-mix(in srgb,var(--stage) 13%,transparent)}
100%{background:transparent;box-shadow:0 0 0 14px transparent}
}
@media(max-width:560px){
.gpop{max-width:calc(100vw - 24px)}
}
@media(prefers-reduced-motion:reduce){
.gpop{transition:none}
section.layer.jumped{animation:none;outline:2px solid var(--stage);outline-offset:8px}
}
@media print{.gterm{border-bottom:0}.gpop{display:none!important}}
/* ==========================================================================
Interaction kit
========================================================================== */
.kit{font-family:var(--ui)}
/* --- stepper --- */
.stp-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.stp-controls .btn{padding:8px 14px;font-size:13.5px}
.stp-play{background:var(--stage)!important;color:#0d1017!important;font-weight:600}
.stp-count{margin-left:auto;font-size:12.5px;color:var(--ink-4);font-family:var(--mono)}
.stp-budget{margin-bottom:18px}
.stp-budget-bar{height:9px;border-radius:100px;background:var(--bg-4);overflow:hidden;display:flex}
.stp-budget-bar i{display:block;height:100%;background:var(--stage);transition:width .45s var(--ease)}
.stp-budget-bar u{display:block;height:100%;background:var(--open);transition:width .45s var(--ease)}
.stp-budget-lab{font-size:12.5px;color:var(--ink-3);margin-top:7px}
.stp-budget-lab b{font-family:var(--mono);color:var(--ink)}
.stp-over{color:var(--open);font-weight:600}
.stp-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.stp-item{display:flex;align-items:center;gap:8px;background:var(--bg-3);border-radius:100px;
padding:6px 13px 6px 9px;font-size:12.5px;color:var(--ink-4);cursor:pointer;
transition:background .2s var(--ease),color .2s var(--ease)}
.stp-item:hover{background:var(--bg-4);color:var(--ink-2)}
.stp-item:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.stp-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:none;transition:background .2s var(--ease)}
.stp-item.done{color:var(--ink-3)}
.stp-item.done .stp-dot{background:var(--stage);opacity:.55}
.stp-item.on{background:color-mix(in srgb,var(--stage) 16%,var(--bg-3));color:var(--ink);font-weight:600}
.stp-item.on .stp-dot{background:var(--stage);box-shadow:0 0 0 3px color-mix(in srgb,var(--stage) 24%,transparent)}
.stp-cost{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.stp-item.on .stp-cost{color:var(--stage)}
.stp-detail{background:var(--bg-3);border-radius:12px;padding:18px 20px;min-height:120px}
.stp-d-head{display:flex;align-items:baseline;gap:11px;margin-bottom:8px;flex-wrap:wrap}
.stp-d-head b{font-family:var(--display);font-size:19px;color:#fff;letter-spacing:-.015em}
.stp-d-who{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--stage);
background:color-mix(in srgb,var(--stage) 13%,transparent);padding:3px 10px;border-radius:100px;font-weight:600}
.stp-detail p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:9px 0;max-width:70ch;font-family:var(--ui)}
.stp-pain{font-size:13px;color:var(--warn);margin-top:10px;line-height:1.55}
/* --- tree --- */
.tree-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px}
.tree{background:var(--bg);border-radius:12px;padding:12px;max-height:440px;overflow:auto}
.trow{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:7px;cursor:pointer;
margin-left:calc(var(--d,0) * 16px);transition:background .16s var(--ease)}
.trow:hover{background:var(--bg-3)}
.trow.sel{background:color-mix(in srgb,var(--stage) 15%,transparent)}
.trow:focus-visible{outline:2px solid var(--stage);outline-offset:1px}
.tcaret{color:var(--ink-4);font-size:10px;width:11px;flex:none;transition:transform .2s var(--ease)}
.tcaret.leaf{opacity:.4}
.trow[aria-expanded="true"] .tcaret{transform:rotate(90deg)}
.tkey{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:none;padding:0;white-space:nowrap}
.tval{font-family:var(--mono);font-size:12px;color:var(--money);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttag{font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-4);
background:var(--bg-4);padding:2px 7px;border-radius:100px;margin-left:auto;flex:none;font-weight:600}
.ttag.crit{color:var(--accent-2);background:var(--accent-2-soft)}
.tkids{display:none}
.tkids.open{display:block}
.tree-detail{background:var(--bg-3);border-radius:12px;padding:18px 20px;align-self:start;position:sticky;top:0}
.tree-detail p,.tree-detail li{font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink-2);max-width:none}
.td-key{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.td-key code{font-size:13px}
.td-val{font-family:var(--mono);font-size:12.5px;color:var(--money)}
/* --- before/after toggle --- */
.tg-switch{display:inline-flex;background:var(--bg-2);border-radius:12px;padding:4px;margin-bottom:20px}
.tg-b{background:none;border:0;color:var(--ink-3);font-size:13.5px;padding:9px 20px;border-radius:9px;
cursor:pointer;font-weight:500;transition:background .22s var(--ease),color .22s var(--ease)}
.tg-b.on{background:var(--stage);color:#0d1017;font-weight:600}
.tg-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;margin-bottom:18px}
.tg-metric{background:var(--bg-3);border-radius:12px;padding:14px 16px}
.tg-mk{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-4);font-weight:600}
.tg-mv{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin-top:4px}
.tg-mv.good{color:var(--money)}.tg-mv.bad{color:var(--open)}
.tg-mo{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.tg-diag{margin:18px 0}
.tg-note p{font-family:var(--ui);font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:70ch}
/* --- sorter --- */
.srt-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.srt-item{display:flex;align-items:center;gap:13px;background:var(--bg-3);border-radius:11px;
padding:12px 15px;cursor:grab;border:1px solid transparent;
transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.srt-item:hover{background:var(--bg-4)}
.srt-item:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.srt-item.drag{opacity:.45}
.srt-item.over{border-color:var(--stage);transform:translateX(4px)}
.srt-item.ok{border-color:var(--money);background:var(--money-soft)}
.srt-item.no{border-color:var(--open);background:var(--open-soft)}
.srt-n{font-family:var(--mono);font-size:12px;color:var(--ink-4);width:20px;flex:none}
.srt-t{flex:1;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.srt-moves{display:flex;gap:3px;flex:none}
.srt-moves button{background:var(--bg);border:0;color:var(--ink-3);width:28px;height:28px;
border-radius:7px;cursor:pointer;font-size:13px;transition:background .16s var(--ease),color .16s var(--ease)}
.srt-moves button:hover{background:var(--stage);color:#0d1017}
.srt-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.srt-score{font-size:13px;color:var(--ink-3);font-family:var(--mono)}
.srt-fb{margin-top:14px}
.srt-win{background:var(--money-soft);border-left:2px solid var(--money);border-radius:10px;
padding:14px 17px;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.srt-hint{background:var(--warn-soft);border-left:2px solid var(--warn);border-radius:10px;
padding:14px 17px;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
/* --- classifier --- */
.cls-card{background:var(--bg-3);border-radius:12px;padding:20px 22px;margin-bottom:16px;min-height:150px}
.cls-sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.cls-s{background:var(--bg);border-radius:9px;padding:11px 13px}
.cls-sk{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-4);font-weight:600}
.cls-sv{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);margin-top:3px}
.cls-note{font-size:14px;color:var(--ink-3);margin:14px 0 0;line-height:1.55}
.cls-buttons{display:flex;gap:10px;flex-wrap:wrap}
.cls-b{flex:1;min-width:150px;padding:13px}
.cls-progress{margin-top:13px;font-size:12.5px;color:var(--ink-4);font-family:var(--mono)}
.cls-fb{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.cls-fb p{font-family:var(--ui);max-width:none;font-size:14.5px}
.cls-fh{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:9px;letter-spacing:-.015em}
.cls-fb.ok .cls-fh{color:var(--money)}
.cls-fb.no .cls-fh{color:var(--open)}
.cls-next{margin-top:14px}
.cls-done b{font-family:var(--display);font-size:22px;color:#fff;display:block;margin-bottom:8px}
.cls-done p{font-family:var(--ui);font-size:14.5px;color:var(--ink-2);line-height:1.62}
/* --- sankey --- */
.sankey{width:100%;height:auto;background:var(--bg);border-radius:12px;padding:8px}
/* --- scrubber --- */
.scr-range{width:100%;accent-color:var(--stage);height:4px;margin-bottom:12px}
.scr-ticks{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:20px}
.scr-tick{background:var(--bg-3);border:0;color:var(--ink-4);font-size:12px;padding:6px 12px;
border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--ui);
transition:background .18s var(--ease),color .18s var(--ease)}
.scr-tick span{width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
.scr-tick.past{color:var(--ink-3)}.scr-tick.past span{background:var(--stage);opacity:.5}
.scr-tick.on{background:color-mix(in srgb,var(--stage) 16%,var(--bg-3));color:var(--ink);font-weight:600}
.scr-tick.on span{background:var(--stage);box-shadow:0 0 0 3px color-mix(in srgb,var(--stage) 24%,transparent)}
.scr-panel{background:var(--bg-3);border-radius:12px;padding:20px 22px}
.scr-when{font-family:var(--mono);font-size:12px;color:var(--stage);letter-spacing:.02em;margin-bottom:5px}
.scr-t{font-family:var(--display);font-size:22px;color:#fff;margin:0 0 10px;font-weight:600;letter-spacing:-.018em}
.scr-panel p{font-family:var(--ui);font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:70ch}
/* ==========================================================================
FOUNDATION — journey
========================================================================== */
.jr-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.jr-top .btn{padding:8px 14px;font-size:13.5px}
.jr-play{background:var(--stage)!important;color:#141013!important;font-weight:600}
.jr-speed{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-4)}
.jr-speed select{background:var(--bg);border:1px solid var(--line-2);color:var(--ink-2);
border-radius:8px;padding:6px 9px;font-size:12.5px}
.jr-clock{margin-left:auto;font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.jr-clock b{font-family:var(--mono);font-size:15px;color:var(--stage);font-weight:600}
.jr-svg{display:block;width:100%;height:auto;background:var(--bg);border-radius:12px;padding:6px 0}
/* below ~760px a 980-unit canvas scales labels down to ~4px, so scroll the
diagram horizontally instead of shrinking it into illegibility */
.svgscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
@media(max-width:760px){
.svgscroll>svg{min-width:680px}
}
.jr-link{fill:none;stroke:var(--bg-5);stroke-width:2.4;stroke-linecap:round;transition:stroke .35s var(--ease)}
.jr-link.done{stroke:color-mix(in srgb,var(--stage) 62%,transparent)}
.jr-node{cursor:pointer}
.jr-node:focus-visible{outline:none}
.jr-node:focus-visible .jr-halo{fill:color-mix(in srgb,var(--stage) 26%,transparent);stroke:var(--stage);stroke-width:2}
.jr-halo{fill:transparent;transition:fill .3s var(--ease)}
.jr-disc{fill:var(--bg-3);stroke:var(--bg-5);stroke-width:1.6;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.jr-node.done .jr-disc{stroke:color-mix(in srgb,var(--stage) 55%,transparent)}
.jr-node.on .jr-disc{fill:color-mix(in srgb,var(--stage) 20%,var(--bg-3));stroke:var(--stage);stroke-width:2.2}
.jr-node.on .jr-halo{fill:color-mix(in srgb,var(--stage) 11%,transparent)}
.jr-node:hover .jr-disc{fill:var(--bg-4)}
.jr-glyph{fill:var(--ink-3);stroke:none;transition:fill .3s var(--ease)}
.jr-glyph .ko{fill:none;stroke:var(--bg-3);stroke-width:1.6;stroke-linecap:round}
.jr-node.on .jr-glyph{fill:var(--stage)}
.jr-node.done .jr-glyph{fill:var(--ink-2)}
.jr-badge{fill:var(--bg);stroke:var(--bg-5);stroke-width:1.4;transition:stroke .3s var(--ease)}
.jr-node.on .jr-badge{stroke:var(--stage)}
.jr-num{font-family:var(--mono);font-size:10px;fill:var(--ink-3);text-anchor:middle}
.jr-node.on .jr-num{fill:var(--stage)}
.jr-lab{font-family:var(--ui);font-size:12px;font-weight:600;fill:var(--ink-2);text-anchor:middle}
.jr-node.on .jr-lab{fill:#fff}
.jr-who{font-family:var(--ui);font-size:10.5px;fill:var(--ink-4);text-anchor:middle;letter-spacing:.02em}
.jr-pulse{fill:var(--stage);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--stage) 70%,transparent))}
.jr-cash{stroke:var(--money);stroke-width:1.4;stroke-dasharray:3 7;opacity:.42;
fill:none;color:var(--money)}
.jr-cashlab{font-family:var(--ui);font-size:10.5px;fill:var(--money);opacity:.62;letter-spacing:.02em}
.jr-bar{display:flex;gap:2px;height:8px;margin:18px 0 8px}
.jr-bar i{display:block;background:var(--bg-4);border-radius:2px;transition:background .3s var(--ease)}
.jr-bar i.past{background:color-mix(in srgb,var(--stage) 45%,transparent)}
.jr-bar i.now{background:var(--stage)}
.jr-scalelab{font-family:var(--ui);font-size:12.5px;color:var(--ink-4);margin:0 0 18px;line-height:1.55;max-width:78ch}
.jr-scalelab b{font-family:var(--mono);color:var(--ink-2)}
.jr-panel{background:var(--bg-3);border-radius:13px;padding:20px 22px}
.jr-ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.jr-ph b{font-family:var(--display);font-size:21px;color:#fff;letter-spacing:-.018em}
.jr-step{font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.04em}
.jr-actor{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--stage);
background:color-mix(in srgb,var(--stage) 13%,transparent);padding:3px 10px;border-radius:100px;font-weight:600}
.jr-ms{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);margin-left:auto}
.jr-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:2px 26px}
.jr-row{padding:9px 0;border-top:1px solid var(--line)}
.jr-row dt{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
color:var(--ink-4);font-weight:600;margin-bottom:3px}
.jr-row dd{margin:0;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink-2)}
.jr-row.cash dt{color:var(--money)}
.jr-nb{font-family:var(--ui);font-size:13.5px;line-height:1.62;color:var(--warn);margin:14px 0 0;
border-top:1px solid var(--line);padding-top:13px}
/* ---- foundation: ecosystem map ---- */
.mp-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.mp-f{background:var(--bg-3);border:0;color:var(--ink-3);font-family:var(--ui);font-size:12.5px;
padding:8px 14px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
transition:background .18s var(--ease),color .18s var(--ease)}
.mp-f:hover{background:var(--bg-4);color:var(--ink)}
.mp-f.on{background:var(--bg-5);color:#fff;font-weight:600}
.mp-f:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.mp-key{width:8px;height:8px;border-radius:2px;background:var(--ink-4)}
.mp-f.f-request .mp-key{background:var(--desk)}
.mp-f.f-money .mp-key{background:var(--money)}
.mp-f.f-data .mp-key{background:var(--floor)}
.mp-f.f-control .mp-key{background:var(--accent-2)}
.mp-fhint{font-family:var(--ui);font-size:12px;color:var(--ink-4);margin-left:4px}
.mp-svg{display:block;width:100%;height:auto;background:var(--bg);border-radius:12px;padding:4px 0}
.mp-col{font-family:var(--ui);font-size:11px;font-weight:600;fill:var(--ink-4);text-anchor:middle;
letter-spacing:.06em;text-transform:uppercase}
.mp-rule{stroke:var(--line);stroke-width:1}
.mp-link{fill:none;stroke-width:1.6;opacity:.42;transition:opacity .22s var(--ease),stroke-width .22s var(--ease)}
.mp-link.t-request{stroke:var(--desk);color:var(--desk)}
.mp-link.t-money{stroke:var(--money);color:var(--money)}
.mp-link.t-data{stroke:var(--floor);color:var(--floor)}
.mp-link.t-control{stroke:var(--accent-2);color:var(--accent-2)}
.mp-link.on{opacity:1;stroke-width:2.6}
.mp-link.dim{opacity:.08}
.mp-link.hide{opacity:0;pointer-events:none}
.mp-node{cursor:pointer}
.mp-box{fill:var(--bg-3);stroke:var(--bg-5);stroke-width:1.4;
transition:fill .22s var(--ease),stroke .22s var(--ease),opacity .22s var(--ease)}
.mp-t{font-family:var(--ui);font-size:12.5px;font-weight:600;fill:var(--ink-2);text-anchor:middle;
transition:fill .22s var(--ease)}
.mp-node.hover .mp-box{fill:var(--bg-4)}
.mp-node.on .mp-box{fill:color-mix(in srgb,var(--stage) 22%,var(--bg-3));stroke:var(--stage);stroke-width:2}
.mp-node.on .mp-t{fill:#fff}
.mp-node.rel .mp-box{stroke:color-mix(in srgb,var(--stage) 55%,transparent)}
.mp-node.rel .mp-t{fill:var(--ink)}
.mp-node.dim{opacity:.42}
.mp-node:focus-visible{outline:none}
.mp-node:focus-visible .mp-box{stroke:var(--stage);stroke-width:2.4;stroke-dasharray:4 3}
/* the services band reads as infrastructure, not as a trading party */
.mp-node.k-service .mp-box{fill:var(--bg-2);stroke-dasharray:5 4}
.mp-panel{background:var(--bg-3);border-radius:13px;padding:20px 22px;margin-top:16px}
.mp-ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mp-ph b{font-family:var(--display);font-size:22px;color:#fff;letter-spacing:-.018em}
.mp-aka{font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.mp-side{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--stage);
background:color-mix(in srgb,var(--stage) 13%,transparent);padding:3px 10px;border-radius:100px;
font-weight:600;margin-left:auto}
.jr-row.breaks dt{color:var(--open)}
.mp-links{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.mp-links h6{margin:0 0 9px;font-family:var(--ui);font-size:11px;text-transform:uppercase;
letter-spacing:.04em;color:var(--ink-4);font-weight:600}
.mp-links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 20px}
.mp-links li{font-family:var(--ui);font-size:13.5px;color:var(--ink-3);display:flex;align-items:baseline;gap:9px;
padding:5px 0;border-left:2px solid transparent;padding-left:11px}
.mp-links li.t-request{border-left-color:var(--desk)}
.mp-links li.t-money{border-left-color:var(--money)}
.mp-links li.t-data{border-left-color:var(--floor)}
.mp-links li.t-control{border-left-color:var(--accent-2)}
.mp-links li b{color:var(--ink);font-weight:600}
.mp-dir{font-family:var(--mono);color:var(--ink-4);flex:none}
.mp-ld{color:var(--ink-4);font-size:12.5px}
/* ---- foundation: one impression, three buyers ---- */
.f3-out{background:var(--bg-3);border-radius:12px;padding:16px 19px;margin:4px 0 22px;
font-family:var(--ui);font-size:15px;line-height:1.62;color:var(--ink-2);
border-left:3px solid var(--money)}
.f3-out b{color:#fff}
.f3-out.none{border-left-color:var(--open)}
.f3-req{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:10px;margin:14px 0 26px}
.f3-f{background:var(--bg);border-radius:10px;padding:12px 14px}
.f3-fk{font-family:var(--ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
color:var(--ink-4);font-weight:600}
.f3-fv{font-family:var(--ui);font-size:14.5px;color:var(--ink);margin:3px 0 5px;font-weight:600;line-height:1.4}
.f3-fn{font-family:var(--ui);font-size:12.5px;color:var(--ink-4);line-height:1.55}
.f3-buyers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.f3-b{background:var(--bg-3);border-radius:13px;padding:17px 19px;border:1px solid transparent;
transition:border-color .25s var(--ease),background .25s var(--ease)}
.f3-b.win{border-color:var(--money);background:linear-gradient(160deg,var(--money-soft),var(--bg-3) 60%)}
.f3-b.out{opacity:.72}
.f3-bh{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.f3-bh b{font-family:var(--display);font-size:19px;color:#fff;letter-spacing:-.015em}
.f3-bs{margin-left:auto;font-family:var(--ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
font-weight:700;color:var(--ink-4);background:var(--bg-4);padding:3px 9px;border-radius:100px}
.f3-b.win .f3-bs{color:#0d1017;background:var(--money)}
.f3-b.out .f3-bs{color:var(--open);background:var(--open-soft)}
.f3-goal{font-family:var(--ui);font-size:13px;color:var(--ink-4);margin:0 0 12px;line-height:1.5}
.f3-num{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;padding-bottom:12px;
border-bottom:1px solid var(--line);margin-bottom:11px}
.f3-val,.f3-bid{font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.f3-val b{font-family:var(--mono);font-size:17px;color:var(--ink-2);font-weight:600;letter-spacing:-.02em}
.f3-bid b{font-family:var(--mono);font-size:19px;color:var(--accent-2);font-weight:600;letter-spacing:-.02em}
.f3-why{list-style:none;margin:0;padding:0}
.f3-why li{margin:0 0 10px;font-family:var(--ui)}
.f3-why li b{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-bottom:2px}
.f3-why li span{display:block;font-size:12.5px;color:var(--ink-4);line-height:1.55}
/* ---- foundation: follow one dollar ---- */
.d4-scen{background:var(--bg-3);border-radius:12px;padding:15px 18px;margin:4px 0 18px}
.d4-scen b{font-family:var(--display);font-size:18px;color:#fff;letter-spacing:-.015em}
.d4-scen p{font-family:var(--ui);font-size:13.5px;color:var(--ink-3);margin:7px 0 0;line-height:1.6;max-width:80ch}
.d4-base{color:var(--ink-4)!important;border-left:2px solid var(--warn);padding-left:11px}
.d4-base b{color:var(--warn)}
.d4-bar{display:block;width:100%;height:auto;margin-bottom:6px}
.d4-seg{fill:var(--open);opacity:.62;transition:opacity .2s var(--ease)}
.d4-seg:nth-of-type(2){fill:var(--warn)}
.d4-seg:nth-of-type(3){fill:var(--floor)}
.d4-seg:nth-of-type(4){fill:var(--accent-2)}
.d4-seg.pub{fill:var(--money);opacity:.9}
.d4-sv{font-family:var(--mono);font-size:13px;fill:#0d1017;text-anchor:middle;font-weight:700;dominant-baseline:middle}
.d4-legend{margin-top:14px}
.d4-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 48px minmax(90px,.8fr) minmax(0,3fr);
gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-family:var(--ui)}
.d4-row.pub{border-top:1px solid var(--line-2)}
.d4-k{font-size:13.5px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:9px}
.d4-row.pub .d4-k{color:var(--money)}
.d4-swatch{width:9px;height:9px;border-radius:2px;background:var(--open);flex:none;opacity:.75}
.d4-row:nth-child(2) .d4-swatch{background:var(--warn)}
.d4-row:nth-child(3) .d4-swatch{background:var(--floor)}
.d4-row:nth-child(4) .d4-swatch{background:var(--accent-2)}
/* the publisher swatch must win against the positional colours above it,
whatever position the publisher row happens to occupy in a scenario */
.d4-row.pub .d4-swatch.pub{background:var(--money);opacity:1}
.d4-v{font-family:var(--mono);font-size:15px;color:var(--ink-2);font-weight:600;text-align:right}
.d4-w{font-size:12.5px;color:var(--ink-3)}
.d4-d{font-size:12.5px;color:var(--ink-4);line-height:1.55}
.d4-src{display:inline-block;font-size:10.5px;letter-spacing:.02em;padding:2px 8px;border-radius:100px;
margin-left:6px;font-weight:600;white-space:nowrap;cursor:help}
.d4-src.audited{background:var(--money-soft);color:var(--money)}
.d4-src.derived{background:var(--desk-soft);color:var(--desk)}
.d4-src.analyst{background:var(--warn-soft);color:var(--warn)}
.d4-src.illus{background:var(--open-soft);color:var(--open)}
.d4-quality{margin-top:26px;border-top:1px solid var(--line-2);padding-top:18px}
.d4-quality h4{margin:0 0 8px}
.d4-qn{font-family:var(--ui);font-size:13px;color:var(--ink-3);line-height:1.6;max-width:80ch;margin:9px 0}
.d4-q{display:flex;align-items:center;gap:14px;margin:9px 0}
.d4-qk{font-family:var(--ui);font-size:13px;color:var(--ink-2);width:210px;flex:none}
.d4-qbar{flex:1;height:12px;background:var(--bg-4);border-radius:100px;overflow:hidden}
.d4-qbar i{display:block;height:100%;background:var(--accent);border-radius:100px}
.d4-qbar i.good{background:var(--money)}
.d4-qbar i.bad{background:var(--open)}
.d4-qv{font-family:var(--mono);font-size:15px;color:var(--ink-2);width:56px;text-align:right;font-weight:600}
.d4-qv.good{color:var(--money)}.d4-qv.bad{color:var(--open)}
/* ---- foundation: the phrasebook / decoder ---- */
.pb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pb-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pb-tab{background:var(--bg-3);border:0;color:var(--ink-3);font-family:var(--ui);font-size:12.5px;
padding:8px 14px;border-radius:100px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.pb-tab:hover{background:var(--bg-4);color:var(--ink)}
.pb-tab.on{background:var(--stage);color:#141013;font-weight:600}
.pb-tab:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.pb-search{margin-left:auto;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
border-radius:9px;padding:8px 12px;font-size:13px;font-family:var(--ui);min-width:210px}
.pb-search:focus{outline:none;border-color:var(--stage)}
.pb-gd{font-family:var(--ui);font-size:13px;color:var(--ink-4);margin:0 0 16px;line-height:1.6;max-width:82ch}
.pb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start}
.pb-list{display:flex;flex-direction:column;gap:7px;max-height:520px;overflow-y:auto;padding-right:4px}
.pb-item{text-align:left;background:var(--bg-3);border:0;border-left:2px solid transparent;
border-radius:10px;padding:12px 15px;cursor:pointer;font-family:var(--ui);
transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.pb-item:hover{background:var(--bg-4);transform:translateX(2px)}
.pb-item.on{background:color-mix(in srgb,var(--stage) 16%,var(--bg-3));border-left-color:var(--stage)}
.pb-item:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.pb-said{display:block;font-family:var(--text);font-size:15px;color:var(--ink);line-height:1.5;font-style:italic}
.pb-term{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4);
font-weight:600;margin-top:6px}
.pb-item.on .pb-term{color:var(--stage)}
.pb-detail{background:var(--bg-3);border-radius:13px;padding:20px 22px;position:sticky;top:0}
.pb-h{display:flex;align-items:baseline;gap:11px;margin-bottom:12px}
.pb-h b{font-family:var(--display);font-size:22px;color:#fff;letter-spacing:-.018em}
.pb-abbr{font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.pb-quote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--stage);
font-family:var(--text);font-size:17px;font-style:italic;color:var(--ink-2);line-height:1.55}
.pb-row{margin-bottom:13px}
.pb-row h6{margin:0 0 4px;font-family:var(--ui);font-size:10.5px;text-transform:uppercase;
letter-spacing:.05em;color:var(--ink-4);font-weight:600}
.pb-row p{margin:0;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink-2);max-width:none}
.pb-row.watch h6{color:var(--warn)}
.pb-rel{margin:16px 0 12px;padding-top:13px;border-top:1px solid var(--line)}
.pb-rel h6{margin:0 0 8px;font-family:var(--ui);font-size:10.5px;text-transform:uppercase;
letter-spacing:.05em;color:var(--ink-4);font-weight:600}
.pb-chip{display:inline-block;background:var(--bg-4);border:0;color:var(--ink-2);font-family:var(--ui);
font-size:12.5px;padding:5px 12px;border-radius:100px;margin:0 6px 6px 0;cursor:pointer;
transition:background .18s var(--ease),color .18s var(--ease)}
.pb-chip:hover{background:var(--stage);color:#141013}
.pb-chip.flat{background:transparent;color:var(--ink-4);cursor:default;padding-left:0}
.pb-chip.flat:hover{background:transparent;color:var(--ink-4)}
.pb-more{display:inline-block;font-family:var(--ui);font-size:12.5px;color:var(--stage);margin-top:4px}
/* ---- foundation: a day in the life ---- */
.dy-meters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dy-meter{background:var(--bg-3);border-radius:10px;padding:10px 14px;min-width:132px}
.dy-mk{display:block;font-family:var(--ui);font-size:10.5px;text-transform:uppercase;
letter-spacing:.04em;color:var(--ink-4);font-weight:600}
.dy-mv{display:block;font-family:var(--mono);font-size:19px;color:var(--ink);font-weight:600;
letter-spacing:-.02em;margin-top:2px}
.dy-meter.good .dy-mv{color:var(--money)}
.dy-meter.bad .dy-mv{color:var(--open)}
.dy-track{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.dy-tick{background:var(--bg-3);border:0;border-radius:10px;padding:8px 13px;cursor:pointer;
text-align:left;font-family:var(--ui);transition:background .18s var(--ease)}
.dy-tick:hover{background:var(--bg-4)}
.dy-tick b{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.dy-tick span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:1px;max-width:130px}
.dy-tick.done b{color:var(--money)}
.dy-tick.on{background:color-mix(in srgb,var(--stage) 18%,var(--bg-3))}
.dy-tick.on b{color:var(--stage)}
.dy-tick.on span{color:var(--ink-2)}
.dy-tick:focus-visible{outline:2px solid var(--stage);outline-offset:2px}
.dy-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.dy-time{font-family:var(--mono);font-size:14px;color:var(--stage);font-weight:600}
.dy-head b{font-family:var(--display);font-size:22px;color:#fff;letter-spacing:-.018em}
.dy-brief{font-family:var(--ui);font-size:15px;line-height:1.62;color:var(--ink-2);margin:0 0 16px;max-width:78ch}
.dy-screen{background:var(--bg);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.dy-screen-h{font-family:var(--ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-4);font-weight:600;margin-bottom:12px}
.dy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.dy-cell{background:var(--bg-2);border-radius:10px;padding:12px 14px}
.dy-ck{font-family:var(--ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
color:var(--ink-4);font-weight:600}
.dy-cv{font-family:var(--mono);font-size:21px;color:var(--ink);font-weight:600;letter-spacing:-.025em;margin-top:3px}
.dy-cell:has(.dy-cv.key){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.dy-cv.key{color:var(--accent)}
.dy-cv.key.warn{color:var(--warn)}
.dy-cv.key.bad{color:var(--open)}
.dy-cv.good{color:var(--money)}.dy-cv.bad{color:var(--open)}.dy-cv.warn{color:var(--warn)}
.dy-cs{font-family:var(--ui);font-size:11.5px;color:var(--ink-4);margin-top:3px;line-height:1.4}
.dy-screen table{margin:10px 0 0;font-size:13px}
.dy-screen th{background:var(--bg-2)}
.spark{display:block;width:100%;max-width:560px;height:auto;margin-top:10px;overflow:visible}
.spark-line{fill:none;stroke:var(--stage);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.spark-area{fill:color-mix(in srgb,var(--stage) 14%,transparent);stroke:none}
.spark-dot{fill:var(--stage)}
.spark-ref{stroke:var(--ink-4);stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.spark.bad .spark-line{stroke:var(--open)}
.spark.bad .spark-area{fill:color-mix(in srgb,var(--open) 14%,transparent)}
.spark.bad .spark-dot{fill:var(--open)}
.spark.good .spark-line{stroke:var(--money)}
.spark.good .spark-area{fill:color-mix(in srgb,var(--money) 14%,transparent)}
.spark.good .spark-dot{fill:var(--money)}
.dy-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:18px}
.dy-col h6{margin:0 0 7px;font-family:var(--ui);font-size:10.5px;text-transform:uppercase;
letter-spacing:.05em;color:var(--ink-4);font-weight:600}
.dy-col ul{margin:0;padding-left:18px;font-family:var(--ui);font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:none}
.dy-col li{margin:5px 0}
.dy-col li::marker{color:var(--stage)}
.dy-prompt{font-family:var(--text);font-size:18px;font-weight:600;color:var(--ink);margin:0 0 14px}
.dy-opt[data-picked]{border-color:var(--stage)}
.dy-after{background:var(--bg-3);border-radius:11px;padding:14px 18px;margin-top:14px}
.dy-after p{font-family:var(--ui);font-size:14px;color:var(--ink-2);line-height:1.62;margin:8px 0;max-width:none}
.dy-after p:first-child{margin-top:0}
.dy-next{margin-top:16px}
.dy-go{background:var(--stage)!important;color:#141013!important;font-weight:600}
.dy-end h4{margin:0 0 8px;font-family:var(--display);font-size:26px;color:#fff;letter-spacing:-.02em}
.dy-endline{font-family:var(--ui);font-size:15px;color:var(--ink-2);line-height:1.62;margin:0 0 16px;max-width:78ch}
.dy-endline b{color:#fff}
.dy-recap{margin:18px 0;display:flex;flex-direction:column;gap:6px}
.dy-rec{display:flex;gap:14px;align-items:baseline;background:var(--bg-3);border-radius:9px;
padding:9px 14px;border-left:2px solid var(--ink-4)}
.dy-rec.best{border-left-color:var(--money)}
.dy-rec.ok{border-left-color:var(--desk)}
.dy-rec.poor{border-left-color:var(--warn)}
.dy-rec.bad{border-left-color:var(--open)}
.dy-rt{font-family:var(--mono);font-size:12px;color:var(--ink-4);flex:none;width:48px}
.dy-rd{font-family:var(--ui);font-size:13.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){
.pb-grid{grid-template-columns:minmax(0,1fr)}
.pb-detail{position:static}
.pb-list{max-height:none}
}
@media(max-width:760px){
.jr-lab{font-size:11px}
.jr-who{display:none}
.jr-dl{grid-template-columns:minmax(0,1fr)}
.mp-links ul{grid-template-columns:minmax(0,1fr)}
.f3-req,.f3-buyers{grid-template-columns:minmax(0,1fr)}
.d4-row{grid-template-columns:minmax(0,1fr) 48px;row-gap:4px}
.d4-w,.d4-d{grid-column:1 / -1}
.d4-qk{width:120px}
}
@media(prefers-reduced-motion:reduce){
.jr-link,.jr-disc,.jr-glyph,.jr-bar i{transition:none}
.jr-pulse{filter:none}
}
@media(max-width:900px){
.tree-wrap{grid-template-columns:minmax(0,1fr)}
.tree-detail{position:static}
}
@media(prefers-reduced-motion:reduce){
.stp-budget-bar i,.stp-budget-bar u,.srt-item,.trow,.tg-b{transition:none}
}
/* ---------- responsive ---------- */
@media(max-width:1250px){
.wrap{grid-template-columns:minmax(0,1fr);padding:44px 44px 100px}
#rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:52px}
.railbox{margin-bottom:0}
}
@media(max-width:900px){
#app{grid-template-columns:1fr}
/* 100dvh, not 100vh. On a phone 100vh is the height of the viewport with the
browser chrome hidden, which it usually is not, so the last two menu items
sat under the address bar and could not be reached. vh first for anything
that does not know dvh. */
#sidebar{position:fixed;left:0;top:0;width:296px;z-index:150;transform:translateX(-100%);
height:100vh;height:100dvh;
transition:transform .3s var(--ease);box-shadow:0 0 70px rgba(0,0,0,.7);
overscroll-behavior:contain}
#sidebar.open{transform:none}
#burger{display:flex}
/* The burger is fixed at top:14 left:14, is 44px square and opaque, and sits
at z-index 160 against the sidebar's 150, so it paints OVER the top left of
the brand block whenever the menu is open. That was already true of the
wordmark, which lost its first letter and a half behind the button on every
phone; nobody caught it because the render pass photographs the mobile menu
closed. Adding the mark made it obvious rather than causing it.
58px is the bottom of the button, plus room to breathe. */
.brand{padding-top:70px}
.wrap{padding:78px 28px 80px}
h2.mt{font-size:clamp(32px,7vw,42px)}
.hero h2{font-size:clamp(36px,8.5vw,48px)}
.standfirst{font-size:20px;padding-left:20px}
.stagehead h3{font-size:28px}
body{font-size:17px}
}
@media(max-width:560px){
.wrap{padding:74px 18px 64px}
.readouts{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.ro .v{font-size:19px}
.layerbar{width:100%;display:flex}
.layerbar button{flex:1;padding:9px 8px;font-size:12.5px}
.layerbar button .dot{display:none}
.pager{flex-direction:column}
.endbar{flex-direction:column;align-items:stretch;gap:16px}
.endbar .markdone{width:100%}
.cards .card{max-width:none}
.sim .body,.q,.scen .choices,.scen .setup{padding-left:18px;padding-right:18px}
.call{padding:18px 20px}
table{font-size:13.5px}
}
/* ---------- motion preference ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ---------- print ---------- */
@media print{
#sidebar,#rail,#burger,.layerbar,.pager,.endbar,#palette{display:none}
body{background:#fff;color:#000;font-size:11pt}
body::before{display:none}
section.layer{display:block!important}
.reveal{opacity:1;transform:none}
.wrap{display:block;max-width:none;padding:0}
.call,.worked,.sim,.quiz,.scen{box-shadow:none;border:1px solid #ccc}
}
/* ==========================================================================
PLATFORM LAYER — The Connected Advertising Atlas
Added when the single-Academy site became a platform. Everything above this
line is the original design system and is unchanged; everything below is
additive. Academy hues are separate families so the two curricula can never
be confused by colour.
========================================================================== */
:root{
/* --- the platform mark -------------------------------------------------
NO COLOUR IS MINTED HERE. #e8d3ae is already declared six times below, as
--s8, --c0, --t0, --l0, --n0 and --r0, and every one of those is chapter 0
of a book: "the front door, paper and lamplight". It is the one hue all
seven books already share rather than one any single book owns, which is
exactly the relationship a parent mark needs to its children. It is also
the highest contrast value in the system, 13.01:1 on --bg, ahead of all
seven book accents.
The rule that follows, and it matters more than the value: the parent mark
is never drawn in a book's hue, and a book is never accented in this one.
Seven colours that each mean one curriculum plus one that means the whole
thing is a system a reader can hold. Eight that overlap is not.
AND THE USAGE RULE, which matters more than the value. #e8d3ae is an
ACCENT, NEVER A GROUND. It may be a dot, a rule, a border, a number, a
mark, or one small filled control. It is never the background of a page, a
card, a panel, a table row or a modal.
The reason is the platform's competitive claim. Atlas, Library, books and
a hue whose own comment says "paper and lamplight" all lean antiquarian on
paper, and the only thing keeping this a modern mapping product rather than
a heritage one is that the warm hue is never a surface. Measured on 30 Aug
2026 it covers 0.42% of the platform home, 0.98% of a book contents page
and 0.00% of a module page, and at that scale against --bg it reads as
lamplight. Parchment needs area. The moment this becomes the background of
anything, the Atlas starts to look like an antique.
Reasoning in _platform_build/identity/hues.md and modernity_audit.md. */
--mark:#e8d3ae;
/* Academy identity colours, used on the home page and the sidebar switcher */
--acad-prog:#9db4ff; /* the original accent — Programmatic keeps it */
--acad-cs:#7fd6b0; /* Connected Search: a distinct green-teal, minted not recycled */
/* Connected Search stage hues --c0..--c8. Deliberately a different family
from --s0..--s10: cooler, and running from paper-warm (the front door)
through the five ecosystems to a concluding gold, so the learner builds
spatial memory inside this Academy without it echoing Programmatic's. */
--c0:#e8d3ae; /* Part I — the behaviour: paper and lamplight, like the Foundation */
--c1:#8fbcff; /* paid search */
--c2:#7fd6b0; /* organic */
--c3:#f0c274; /* retail */
--c4:#f2949a; /* social */
--c5:#c5aef7; /* AI answers */
--c6:#6fd8c4; /* the connectives */
--c7:#e0b667; /* judgement */
--c8:#8fc4c8; /* spare */
--acad-tv:#f0a882; /* TV and Video: warm amber, a third family again */
/* TV and Video stage hues --t0..--t10. Warmer than either of the others and
running from lamplight through to a cool close, because this Academy's ten
chapters follow a chain from a promise made to proof delivered, and the
temperature drop is the journey. Ten chapters plus the front door. */
--t0:#e8d3ae; /* one product, many doors: the front door, paper and lamplight */
--t1:#f0a882; /* the money */
--t2:#f2b06a; /* the lock */
--t3:#e8c07a; /* the audience */
--t4:#d9b98a; /* the supply */
--t5:#c9b7a4; /* the pick */
--t6:#a8b6b2; /* what arrived */
--t7:#8fb6c4; /* the count */
--t8:#7fa8d6; /* the proof */
--t9:#9d9ce0; /* putting it together */
--t10:#b8a0d8; /* spare */
--acad-local:#8fc4c8; /* Connected Local: a cool slate-teal, a fourth family */
/* Connected Local chapter hues --l0..--l6. A fourth family again, and the
logic is geographic rather than temperature: the front door is paper, the
four crafts each take a hue a reader can hold in their head across ten
modules, and the two closing chapters cool toward the payoff. Seven
chapters, and no value here is new — each is already declared above and
reused deliberately, because a fourth Academy that mints seven more colours
makes the palette the thing a reader remembers. */
--l0:#e8d3ae; /* understand local: the front door, paper and lamplight */
--l1:#8fbcff; /* local television */
--l2:#7fd6b0; /* local audio and radio */
--l3:#f0c274; /* out of home */
--l4:#f2949a; /* cinema */
--l5:#6fd8c4; /* one market, four crafts */
--l6:#8fc4c8; /* shared foundations */
--acad-social:#c3a6e0; /* Connected Social: a violet, the fifth family */
/* Connected Social chapter hues --n0..--n7. The letter is 'n', not 's':
--s0..--s10 have belonged to Programmatic since the site was a single
course, and a fifth Academy reaching for the obvious initial would have
painted every social chapter in another curriculum's colours and rendered
perfectly while doing it.
The logic is the organising idea rather than temperature. The front door is
paper. The three disciplines take three hues a reader can hold across eleven
modules. The audience chapter is deliberately the warmest, because it is the
one where somebody else is in charge. The two closing chapters cool toward
the payoff. No value here is new: each is already declared above and reused
deliberately, because a fifth Academy that mints eight more colours makes
the palette the thing a reader remembers. */
--n0:#e8d3ae; /* understand social: the front door, paper and lamplight */
--n1:#c3a6e0; /* paid social */
--n2:#7fd6b0; /* organic social */
--n3:#8fbcff; /* creator partnerships */
--n4:#f2949a; /* when the audience already decided */
--n5:#f0c274; /* what you are allowed to find out */
--n6:#6fd8c4; /* one brand, everything connected */
--n7:#8fc4c8; /* shared foundations */
--acad-retail:#d8b45e; /* Connected Retail Media: a warm gold, the sixth family */
/* Connected Retail Media chapter hues --r0..--r9. The letter is 'r'.
hueVar() in app.js falls through to 's' for any Academy it does not name,
and --s0..--s10 have belonged to Programmatic since the site was a single
course. A sixth Academy that did not add itself to that function would have
painted every retail chapter in another curriculum's colours and rendered
perfectly while doing it. Connected Social recorded that trap. The entry is
added in the same edit as this block.
The logic is the run rather than temperature. The front door is paper, as it
is in every Academy. Chapter 1 is the gold of the Academy accent, because it
is the chapter everything else depends on and a reader should recognise it
when the run points back at it. The middle chapters walk warm to cool along
the run. Chapter 8 returns toward the accent because it is the payoff and it
is the whole run stacked. No value here is minted: each is already declared
above and reused deliberately, because a sixth Academy inventing ten more
colours makes the palette the thing a reader remembers instead of the
curriculum. */
--r0:#e8d3ae; /* understand retail media: the front door, paper and lamplight */
--r1:#d8b45e; /* who you are buying from, and whose money it is */
--r2:#f0a882; /* reading a number you did not compute */
--r3:#f2949a; /* what the advertisement is made of */
--r4:#c3a6e0; /* what gets shown, and who decides */
--r5:#8fbcff; /* leaving the shop */
--r6:#7fd6b0; /* inside the shop */
--r7:#6fd8c4; /* proving it */
--r8:#f0c274; /* several runs at once */
--r9:#8fc4c8; /* shared foundations */
--acad-ev:#a9c4d8; /* Connected Evidence: a cool pale blue, the seventh family */
/* Connected Evidence chapter hues --g0..--g8. THE LETTER IS 'g', NOT 'e'.
'e' is the obvious choice and it is wrong. The evidence-chip layer below
already owns --ev-doc, --ev-evi, --ev-inf and their siblings. --e0 would not
technically collide with --ev-doc, and that is exactly the hazard: a
maintainer reading a rule that mixes --e4 and --ev-inf has to hold two
unrelated systems that look like one. hueVar() in app.js carries the same
note, and the two were edited together.
hueVar() falls through to 's' for any Academy it does not name, and
--s0..--s10 have belonged to Programmatic since the site was a single
course. A seventh Academy that did not add itself to that function would
have painted every chapter in another curriculum's colours and rendered
perfectly while doing it. Connected Social recorded that trap and Connected
Retail Media repeated the note. The entry is added in the same edit as this
block.
The logic is the five methods rather than temperature. The front door is
paper, as it is in every Academy. Chapter 1 takes the Academy accent because
it is the number all five methods run on and a reader should recognise it
when a later chapter points back. Chapters 2, 3, 5 and 6 are the method
chapters and walk cool to warm. Chapter 4 is where the methods meet, so it
takes the green that means documented in the chip layer above, deliberately.
Chapter 7 returns toward the accent because it is the payoff and it is all
five stacked.
NO VALUE HERE IS MINTED except the accent itself. Each is already declared
above and reused on purpose, because a seventh Academy inventing nine more
colours makes the palette the thing a reader remembers instead of the
curriculum. */
--g0:#dfe6ec; /* what people mean when they say measurement: the front door */
--g1:#a9c4d8; /* the number all five run on */
--g2:#8fbcff; /* two answers you can have without spending anything */
--g3:#7fd6b0; /* buying the variation */
--g4:#9fd6a0; /* what each method says about the others */
--g5:#f0c274; /* forecasts, and what they inherit */
--g6:#f0a882; /* what would happen if we moved the money */
--g7:#c3a6e0; /* spending the variation, and the price of keeping it */
--g8:#8fc4c8; /* shared foundations */
/* Evidence layer. Ordered by strength, and the ORDER is the point:
documented > evidenced > inferred > contested > unknowable. */
--ev-doc:#9fd6a0; --ev-doc-s:rgba(159,214,160,.12);
--ev-evi:#8fbcff; --ev-evi-s:rgba(143,188,255,.12);
--ev-trd:#7fc9c0; --ev-trd-s:rgba(127,201,192,.12);
--ev-inf:#f0c274; --ev-inf-s:rgba(240,194,116,.12);
--ev-cnv:#c3a6e0; --ev-cnv-s:rgba(195,166,224,.13);
--ev-con:#f0a882; --ev-con-s:rgba(240,168,130,.12);
--ev-unk:#8a90a6; --ev-unk-s:rgba(138,144,166,.14);
}
/* ---------- sidebar: platform mode ---------- */
/* THE MARK. An open atlas spread: a frame, the gutter, and one contour that
crosses it, because a plate does not stop at the fold and neither does the
subject. It is inline SVG rather than an ![]()
for three reasons: no second
request on a platform that makes none, it inherits `color` so one drawing
serves every context, and it stays sharp at any size.
It is drawn twice, in index.html and in buildNav(), and the two must be
edited together: the static copy is what a reader sees before app.js runs.
Full strength at platform level and quiet inside a book. That is deliberate.
On a book page the book is the loudest thing on the page and the parent is a
way back, not a badge, so the mark there inherits the back link's --ink-4
rather than carrying --mark. */
.brand .lock{display:flex;align-items:center;gap:13px}
.brand .lock .m{flex:none;width:34px;height:34px;display:block;color:var(--mark)}
/* ---------- THE PLATFORM WORDMARK, 3 September 2026 ----------
SET IN THE SANS, IN TITLE CASE, AND THE SANS IS THE POINT RATHER THAN A
CONVENIENCE. `modernity_audit.md` section 2 measured a module page at 6,607
serif characters against 6,897 sans and concluded that "if the modernity claim
ever needs strengthening, the sans is the lever, not the serif, because the
sans is doing half the talking". The same audit found Source Sans reads soft
only because it never appears above 14px anywhere on the platform. This is the
first place it is set large, which is that lever being pulled.
NOT INTER, AND THE OBJECTION IS DISTINCTIVENESS RATHER THAN COST. Inter is
open licence and would be four woff2 files on disk, so the argument is not
effort and should not be answered with effort next time it is raised. Inter is
the default of nearly every SaaS product, which means it reads as SOFTWARE
GENERICALLY rather than as this product. Source Sans is already here, is
humanist rather than neutral, and pairs with the Source Serif the reading
layer is set in because they were drawn as a family.
HIERARCHY RATHER THAN A SINGLE LINE. "Connected Advertising" is the qualifier
and "Atlas" is the thing, so the second line is larger, heavier and carries
the accent. Read on its own the mark says Atlas, which is what people call it.
THE ACCENT IS --accent, NOT --mark. The warm hue belongs to the icon and to
chapter 0 of all nine books; the blue is the platform's own. Nothing new is
minted either way, which is the rule the books have kept nine times.
NO DESCRIPTOR. `The platform` named a category and said nothing, and the
whitespace where it was is deliberate rather than a gap waiting for a
tagline. Full reasoning in app.js beside buildNav(). */
.brand .lock h1{margin:0;font-family:var(--ui);font-size:15.5px;font-weight:500;
line-height:1.3;letter-spacing:0;color:var(--ink-3)}
.brand .lock h1 span{display:block;font-size:23px;font-weight:700;letter-spacing:-.015em;
line-height:1.15;color:var(--accent)}
.brand .backup{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-size:11.5px;
color:var(--ink-4);margin:0 0 10px;letter-spacing:.01em}
.brand .backup .m{flex:none;width:14px;height:14px;display:block;color:inherit;
transition:color .18s var(--ease)}
.brand .backup:hover{color:var(--accent)}
#nav a.mod.acadlink .n{font-size:10px;letter-spacing:.06em;min-width:26px}
#nav .mod.soon{display:flex;align-items:center;gap:11px;padding:7px 24px;font-family:var(--ui);
font-size:13px;color:var(--ink-4);opacity:.62;cursor:default}
#nav .mod.soon .n{min-width:26px;text-align:center;font-family:var(--mono)}
/* ---------- shared modules ----------
A handful of subjects are taught once and appear in both curricula. The mark
is quiet on purpose: a reader who has met the module before needs to know the
repeat is deliberate and already counted, and a reader meeting it for the
first time should not be made to care. */
#nav a.mod.shared .shmark{margin-left:auto;font-size:10px;color:var(--ink-4);opacity:.55;
flex:0 0 auto;line-height:1}
#nav a.mod.shared:hover .shmark,#nav a.mod.shared.active .shmark{opacity:.9;color:var(--stage)}
/* NOT inline-flex with a gap. Flex puts its gap between every item including the
anonymous text runs, so "Programmatic. Read it once" rendered as
"Programmatic . Read it once" with the full stop pushed off the word. This is
a sentence, so it is laid out as one. */
.sharedbadge{display:inline-block;font-family:var(--ui);font-size:12px;
color:var(--ink-3);background:var(--bg-3);border:1px solid var(--line);
border-radius:999px;padding:4px 13px 4px 11px;margin:0 0 4px;line-height:1.5}
.sharedbadge b{color:var(--ink-2);font-weight:600}
.sharedbadge .dot{color:var(--stage);font-size:10px;margin-right:6px}
/* ---------- platform home ---------- */
.platformhero h2{max-width:19ch}
.wrap.platform .hero .lede{max-width:64ch}
.resume{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
padding:20px 24px;margin:34px 0 8px}
.resume .rk{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-4)}
.resume h4{margin:0;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25}
.resume .rs{margin:5px 0 0;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.acadcards{margin-bottom:18px}
.card.acadcard{padding:24px 24px 20px}
.card.acadcard .n{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.card.acadcard h4{font-size:24px;margin:12px 0 10px;letter-spacing:-.012em}
.card.acadcard .asks{font-family:var(--display);font-style:italic;font-size:16px;
color:var(--st,var(--accent));margin:0 0 12px;line-height:1.45}
.card.acadcard .st b{color:var(--ink-2)}
.soongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin:4px 0 10px}
.sooncard{border:1px dashed var(--line-2);border-radius:11px;padding:15px 16px;background:transparent}
.sooncard h4{margin:0 0 6px;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink-3);
letter-spacing:.005em}
.sooncard p{margin:0;font-family:var(--display);font-size:14.5px;font-style:italic;
color:var(--ink-4);line-height:1.5}
/* ---------- evidence layer ---------- */
.ev{display:inline-flex;align-items:center;gap:4px;font-family:var(--ui);font-size:9.5px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:1px 6px 1px 5px;
border-radius:5px;vertical-align:.14em;margin:0 1px;white-space:nowrap;
opacity:.30;transition:opacity .2s var(--ease),background .2s var(--ease);cursor:help;
border:1px solid transparent}
body.evidence .ev{opacity:1}
.ev.doc{color:var(--ev-doc)} body.evidence .ev.doc{background:var(--ev-doc-s);border-color:var(--ev-doc-s)}
.ev.evi{color:var(--ev-evi)} body.evidence .ev.evi{background:var(--ev-evi-s);border-color:var(--ev-evi-s)}
.ev.trd{color:var(--ev-trd)} body.evidence .ev.trd{background:var(--ev-trd-s);border-color:var(--ev-trd-s)}
.ev.inf{color:var(--ev-inf)} body.evidence .ev.inf{background:var(--ev-inf-s);border-color:var(--ev-inf-s)}
.ev.cnv{color:var(--ev-cnv)} body.evidence .ev.cnv{background:var(--ev-cnv-s);border-color:var(--ev-cnv-s)}
.ev.con{color:var(--ev-con)} body.evidence .ev.con{background:var(--ev-con-s);border-color:var(--ev-con-s)}
.ev.unk{color:var(--ev-unk)} body.evidence .ev.unk{background:var(--ev-unk-s);border-color:var(--ev-unk-s)}
.ev .flag{font-size:8.5px;opacity:.8}
.evbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.evbtn{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line-2);border-radius:8px;padding:6px 12px;cursor:pointer;
transition:all .18s var(--ease)}
.evbtn:hover{color:var(--ink);border-color:var(--line-2);background:var(--bg-4)}
.evbtn.on{color:var(--bg);background:var(--ink-2);border-color:var(--ink-2)}
.evkey{display:none;gap:12px;flex-wrap:wrap;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
body.evidence .evkey{display:flex}
.evkey span{display:inline-flex;align-items:center;gap:5px}
.evkey i{width:9px;height:9px;border-radius:3px;display:inline-block}
/* ---------- prediction gate ---------- */
.gate{border:1px solid var(--line-2);border-left:3px solid var(--stage,var(--accent));
border-radius:var(--radius);background:var(--bg-2);padding:22px 24px;margin:30px 0}
.gate .gk{margin:0 0 4px;font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--stage,var(--accent))}
.gate h5{margin:0 0 10px;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}
.gate .gsetup{font-size:16.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.62}
.gate .gq{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);margin:16px 0 9px}
.gate .gopts{display:flex;flex-direction:column;gap:7px}
.gate button.gopt{text-align:left;font-family:var(--text);font-size:15.5px;line-height:1.5;
color:var(--ink-2);background:var(--bg-3);border:1px solid var(--line);border-radius:9px;
padding:11px 14px;cursor:pointer;transition:all .16s var(--ease)}
.gate button.gopt:hover:not(:disabled){border-color:var(--line-2);color:var(--ink);background:var(--bg-4)}
.gate button.gopt:disabled{cursor:default;opacity:.72}
.gate button.gopt.picked{border-color:var(--stage,var(--accent));color:var(--ink)}
.gate .gv{display:none;margin:10px 0 0;padding:13px 15px;border-radius:9px;font-size:15px;
line-height:1.6;background:var(--bg-3);border:1px solid var(--line)}
.gate .gv.show{display:block}
.gate .gv.right{border-color:rgba(159,214,160,.3);background:var(--money-soft)}
.gate .gv.wrong{border-color:rgba(240,194,116,.3);background:var(--warn-soft)}
.gate .gv b{color:var(--ink)}
.gate .gafter{display:none;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.gate .gafter.show{display:block}
.gate .gafter p{margin:0;font-size:16px;color:var(--ink-2)}
.gate .gwhy{font-family:var(--ui);font-size:11.5px;color:var(--ink-4);margin:12px 0 0;line-height:1.55}
/* ---------- transfer scorecard ---------- */
.transfer{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg-2);
padding:22px 24px;margin:34px 0}
.transfer h5{margin:0 0 12px;font-family:var(--ui);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3)}
.transfer .trow{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:11px 0;
border-top:1px solid var(--line)}
.transfer .trow:first-of-type{border-top:0}
.transfer .tv{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;padding-top:3px}
.transfer .tv.carried{color:var(--money)}
.transfer .tv.broke{color:var(--open)}
.transfer .tv.new{color:var(--warn)}
.transfer .tt{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.transfer .tt b{color:var(--ink)}
@media (max-width:820px){
.resume{flex-direction:column;align-items:flex-start;gap:14px}
.transfer .trow{grid-template-columns:1fr;gap:4px}
}
/* ---------- the platform field map ---------- */
.pf-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.pf-stage{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:6px}
.pf-svg{width:100%;height:auto;display:block}
.pf-n{cursor:pointer}
.pf-n circle{transition:fill .18s var(--ease),stroke .18s var(--ease)}
.pf-n:hover circle,.pf-n:focus circle{fill:var(--bg-5);stroke:var(--ink)}
.pf-n:focus{outline:none}
.pf-n:focus circle{stroke-width:2.4}
.pf-detail{margin:16px 0 0}
.pf-lead{margin:0 0 12px;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.pf-list{display:flex;flex-direction:column;gap:2px}
.pf-item{display:grid;grid-template-columns:10px 190px minmax(0,1fr);gap:11px;align-items:baseline;
padding:9px 0;border-top:1px solid var(--line)}
.pf-dot{width:7px;height:7px;border-radius:50%;display:inline-block;transform:translateY(-2px)}
.pf-pair{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pf-d{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.pf-go{display:inline-block;margin:14px 0 0;font-family:var(--ui);font-size:13px;font-weight:600}
@media (max-width:820px){
.pf-item{grid-template-columns:10px minmax(0,1fr);gap:8px}
.pf-pair{grid-column:2}
.pf-d{grid-column:2}
}
/* ---------- the loop locator chip on a module page ---------- */
.loclab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 0;
font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.loclab .lc{display:inline-flex;align-items:center;gap:6px;background:var(--bg-3);
border:1px solid var(--line-2);border-radius:20px;padding:3px 11px 3px 8px;color:var(--ink-3)}
.loclab .lc b{color:var(--stage,var(--accent));font-weight:600}
.loclab .lc .ln{font-family:var(--mono);font-size:10px;opacity:.7}
/* ---------- B1 · the matchmaker ---------- */
.mm-need{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:13px 16px;
background:var(--bg);border:1px solid var(--line);border-radius:10px;margin:0 0 14px}
.mm-nk{font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.mm-nv{font-family:var(--display);font-size:17px;font-style:italic;color:var(--ink)}
.mm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.mm-t{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-bottom:2px solid transparent;border-radius:8px;padding:7px 13px;
cursor:pointer;transition:all .16s var(--ease)}
.mm-t:hover{color:var(--ink);background:var(--bg-4)}
.mm-t.seen{border-bottom-color:var(--line-2)}
.mm-t.on{color:var(--ink);background:var(--bg-4);border-bottom-color:var(--st,var(--accent))}
.mm-panel{border:1px solid var(--line-2);border-left:3px solid var(--st,var(--accent));
border-radius:11px;background:var(--bg-2);padding:18px 20px}
.mm-r{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:10px 0;
border-top:1px solid var(--line)}
.mm-r:first-child{border-top:0;padding-top:0}
.mm-k{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-4);padding-top:3px}
.mm-v{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.mm-q{font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--bg-4);
padding:2px 7px;border-radius:5px}
.mm-w{font-family:var(--ui);font-size:11.5px;color:var(--ink-4);margin-left:9px}
.mm-obj{margin:16px 0 0;padding:15px 16px;border-radius:9px;background:var(--bg-4);
border:1px solid var(--line-2)}
.mm-ok{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-4)}
.mm-ov{margin:0 0 12px;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.35;
color:var(--st,var(--accent))}
.mm-oy,.mm-op{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.mm-op{margin-bottom:0;color:var(--ink-3);font-size:14.5px}
.mm-prog{margin:13px 0 0;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.mm-done{margin:14px 0 0;padding:16px 18px;border-radius:10px;background:var(--money-soft);
border:1px solid rgba(159,214,160,.24)}
.mm-dh{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--money)}
.mm-done p{margin:0 0 9px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.mm-done p:last-child{margin-bottom:0}
@media (max-width:820px){
.mm-r{grid-template-columns:1fr;gap:3px}
.mm-k{padding-top:0}
}
/* ---------- B2 · the Demand Loop ---------- */
.lp-ctl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.lp-cl{font-family:var(--ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.lp-o.on{border-color:var(--st,var(--ink-2));color:var(--ink);background:var(--bg-4)}
.lp-stage{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:6px}
.lp-svg{width:100%;height:auto;display:block}
.lp-n{cursor:pointer}
.lp-n rect{transition:fill .16s var(--ease),stroke .16s var(--ease)}
.lp-n:hover rect{fill:var(--bg-5)}
.lp-n:focus{outline:none}
.lp-n:focus rect{stroke:var(--ink);stroke-width:2.4}
.lp-detail{margin:16px 0 0}
.lp-h{margin:0 0 6px;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em}
.lp-num{display:inline-block;font-family:var(--ui);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-4);margin-right:10px;vertical-align:.22em}
.lp-d{margin:0 0 9px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.lp-l{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-3)}
.lp-hint{margin:14px 0 0;font-family:var(--ui);font-size:12.5px;color:var(--ink-4);font-style:italic}
.lp-over{margin:14px 0 0;padding:14px 16px;border-radius:9px;background:var(--bg-4);
border-left:3px solid var(--st,var(--accent))}
.lp-ok{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--st,var(--accent))}
.lp-ov{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.lp-lens{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.lp-lt.on{background:var(--bg-5);color:var(--ink)}
.lp-lnote{margin:11px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.lp-lenses{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0 0}
.lp-le{padding:12px 13px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.lp-lek{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
.lp-leq{font-size:14.5px;line-height:1.5;color:var(--ink-3);font-style:italic}
/* ---------- B3 · follow one intent ---------- */
.fi-persona{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:13px 16px;
background:var(--bg);border:1px solid var(--line-2);border-radius:10px;margin:0 0 14px}
.fi-pn{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.fi-pd{font-size:15px;line-height:1.55;color:var(--ink-3);flex:1 1 320px}
.fi-phase{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.fi-ph.on{background:var(--bg-5);color:var(--ink);border-color:var(--line-2)}
.fi-steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.fi-s{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-left:3px solid transparent;border-radius:7px;padding:6px 11px;
cursor:pointer;transition:all .16s var(--ease)}
.fi-s:hover{color:var(--ink);background:var(--bg-4)}
.fi-s.seen{border-left-color:var(--line-2)}
.fi-s.on{color:var(--ink);background:var(--bg-4);border-left-color:var(--st,var(--accent))}
.fi-panel{border:1px solid var(--line-2);border-left:3px solid var(--st,var(--accent));
border-radius:11px;background:var(--bg-2);padding:18px 20px}
.fi-h{margin:0 0 12px;font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink)}
.fi-r{display:grid;grid-template-columns:158px minmax(0,1fr);gap:14px;padding:9px 0;
border-top:1px solid var(--line)}
.fi-r:first-child{border-top:0;padding-top:0}
.fi-k{font-family:var(--ui);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-4);padding-top:3px}
.fi-v{font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.fi-v.meas{color:var(--ink-3)}
.fi-q{font-family:var(--mono);font-size:13.5px;color:var(--ink);background:var(--bg-4);
padding:2px 7px;border-radius:5px}
.fi-roll{margin-left:10px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2);
background:var(--bg-4);border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;cursor:pointer}
.fi-roll:hover{background:var(--bg-5);color:var(--ink)}
.fi-rn{margin-left:8px;font-family:var(--ui);font-size:11px;color:var(--ink-4);font-style:italic}
.fi-note{margin:14px 0 0;padding:11px 13px;border-radius:8px;background:var(--bg-3);
font-size:14.5px;line-height:1.58;color:var(--ink-3)}
.fi-warn{margin:9px 0 0;font-family:var(--ui);font-size:12.5px;color:var(--warn)}
.fi-done{margin:16px 0 0;padding:17px 19px;border-radius:11px;background:var(--money-soft);
border:1px solid rgba(159,214,160,.24)}
.fi-dh{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--money)}
.fi-done p{margin:0 0 9px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.fi-done p:last-child{margin-bottom:0}
@media (max-width:820px){ .fi-r{grid-template-columns:1fr;gap:3px} .fi-k{padding-top:0} }
/* ---------- B4 · open and closed ---------- */
.oc-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
table.oc{border-collapse:collapse;width:100%;min-width:660px;margin:0}
table.oc th,table.oc td{padding:0;border:0}
table.oc thead th{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--ink-4);
text-align:center;padding:11px 8px;line-height:1.35;border-bottom:1px solid var(--line);
vertical-align:bottom}
table.oc tbody th{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2);
text-align:left;padding:9px 12px;white-space:nowrap;border-left:3px solid var(--st,var(--line-2));
border-top:1px solid var(--line)}
table.oc tbody td{border-top:1px solid var(--line);text-align:center;padding:5px 6px}
.oc-c{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;border:1px solid transparent;border-radius:6px;padding:5px 10px;
cursor:pointer;width:100%;transition:all .15s var(--ease)}
.oc-c.o{color:var(--money);background:var(--money-soft)}
.oc-c.p{color:var(--warn);background:var(--warn-soft)}
.oc-c.c{color:var(--open);background:var(--open-soft)}
.oc-c:hover{filter:brightness(1.35)}
.oc-c.on{border-color:currentColor;filter:brightness(1.35)}
.oc-detail{margin:16px 0 0;padding:15px 17px;border:1px solid var(--line-2);border-radius:10px;
background:var(--bg-2)}
.oc-h{margin:0 0 8px;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.oc-d{margin:0 0 8px;font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.oc-n{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-3)}
.oc-cost{margin:11px 0 0;padding:10px 12px;border-radius:8px;background:var(--bg-4);
font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.oc-score{margin:16px 0 0}
.oc-foot{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
/* ---------- B5 · the same word ---------- */
.cx-card{border:1px solid var(--line-2);border-radius:11px;background:var(--bg-2);padding:20px 22px;
margin:0 0 12px}
.cx-w{margin:0 0 10px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-4)}
.cx-s{margin:0;font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ink)}
.cx-btns{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.cx-prog{font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.cx-fb{margin:16px 0 0;padding:15px 16px;border-radius:9px;border:1px solid var(--line)}
.cx-fb.ok{background:var(--money-soft);border-color:rgba(159,214,160,.26)}
.cx-fb.no{background:var(--warn-soft);border-color:rgba(240,194,116,.26)}
.cx-fh{margin:0 0 8px;font-family:var(--ui);font-size:13px;font-weight:700;color:var(--ink)}
.cx-fb p{margin:0 0 9px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.cx-other{margin:12px 0 0;padding:11px 13px;border-radius:8px;background:var(--bg-4)}
.cx-ok{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.cx-other p{margin:0;font-size:14.5px;color:var(--ink-3)}
.cx-next{margin-top:12px}
.cx-done{padding:4px 0}
.cx-done b{font-family:var(--display);font-size:20px;color:var(--ink)}
.cx-done p{margin:10px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
/* ==========================================================================
PHASE 7 — fixes found by the real-browser render pass.
None of these were visible to eleven green suites, because jsdom has no
layout engine. Recorded here as a standing reminder of why the screenshot
pass is not optional.
========================================================================== */
/* 1. Wide SVG diagrams were scaling to fit a 430px viewport, which rendered
12.5px labels at about 5px — illegible, and the exact defect the
predecessor's log warns about. Both diagrams now behave like the openness
matrix: they keep their natural size and scroll horizontally. One
mechanism, already proven in this codebase, rather than two. */
.lp-stage,.pf-stage{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lp-stage .lp-svg{min-width:760px}
.pf-stage .pf-svg{min-width:720px}
@media (max-width:820px){
.lp-stage,.pf-stage{position:relative}
/* a right-edge fade, so it is obvious the diagram continues off-screen */
.lp-stage::after,.pf-stage::after{content:'';position:sticky;right:0;top:0;float:right;
width:26px;height:100%;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--bg))}
}
/* 2. The active filter button was not distinguishable from the inactive ones —
the ecosystem hue was set as a border colour that read as ordinary chrome.
The selected state now carries the hue as a fill and a left rule. */
.lp-o.on,.pf-f.on{background:var(--bg-5);color:var(--ink);
border-color:var(--st,var(--ink-2));box-shadow:inset 3px 0 0 var(--st,var(--accent))}
/* 3. Monospace is reserved for code, field names and figures. A descriptive
sentence about what someone said is none of those, so the journey
component only sets it in mono when the datum is an actual query. */
.fi-q.desc{font-family:var(--text);font-size:15.5px;background:transparent;padding:0;color:var(--ink-2)}
/* a chapter that is still being written says so, rather than looking finished */
.stagehead h3 .wip{display:inline-block;margin-left:11px;font-family:var(--ui);font-size:10.5px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);
border:1px solid var(--line-2);border-radius:20px;padding:3px 10px;vertical-align:.28em}
/* how long a chapter costs, at the two depths people actually choose */
.stagehead .stagetime{margin:9px 0 0;font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.stagehead .stagetime b{color:var(--ink-2);font-weight:600}
/* ---------- P1 · where did that branded search come from ---------- */
.bs-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:13px 15px;
background:var(--bg);border:1px solid var(--line);border-radius:10px}
.bs-l{display:flex;align-items:center;gap:11px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.bs-q{width:170px}
.bs-qv{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--stage,var(--accent));
min-width:82px}
.bs-chk{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.bs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.bs-col{border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);padding:14px 16px}
.bs-col h6{margin:0 0 11px;font-family:var(--ui);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4);font-weight:600}
.bs-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 42px;gap:9px;align-items:center;
padding:5px 0}
.bs-rl{font-size:13.5px;line-height:1.35;color:var(--ink-3)}
.bs-rb{height:9px;background:var(--bg-4);border-radius:5px;overflow:hidden}
.bs-rb i{display:block;height:100%;background:var(--ink-3);border-radius:5px;transition:width .22s var(--ease)}
.bs-rb i.key{background:var(--stage,var(--accent))}
.bs-rv{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);text-align:right}
.bs-out{margin:16px 0 0}
.bs-note{margin:13px 0 0}
.bs-note p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3)}
/* ---------- P2 · the eight gates ---------- */
.gt-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px 14px;
margin:0 0 15px;padding:13px 15px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.gt-c{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.gt-list{list-style:none;margin:0;padding:0}
.gt-i{display:grid;grid-template-columns:26px minmax(0,1fr) 118px;gap:11px;align-items:center;
padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin:0 0 5px;background:var(--bg-2)}
.gt-n{font-family:var(--mono);font-size:12px;color:var(--ink-4);text-align:center}
.gt-t{font-size:14.5px;color:var(--ink-2)}
.gt-s{font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
text-align:right;color:var(--ink-4)}
.gt-i.pass{border-color:rgba(159,214,160,.22)}
.gt-i.pass .gt-s{color:var(--money)}
.gt-i.stop{border-color:var(--open);background:var(--open-soft)}
.gt-i.stop .gt-s{color:var(--open);font-weight:700}
.gt-i.stop .gt-t{color:var(--ink)}
.gt-i.moot{opacity:.42}
.gt-out{margin:15px 0 0}
.gt-fail,.gt-win{padding:15px 17px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2)}
.gt-win{background:var(--money-soft);border-color:rgba(159,214,160,.24)}
.gt-win b{font-family:var(--display);font-size:18px}
.gt-win p{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.gt-fh{margin:0 0 7px;font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--open)}
.gt-fw{margin:0 0 10px;font-family:var(--display);font-size:17.5px;line-height:1.45;color:var(--ink)}
.gt-fx,.gt-fb{margin:0 0 8px;font-size:15px;line-height:1.58;color:var(--ink-2)}
.gt-fb{color:var(--warn);font-family:var(--ui);font-size:13.5px;margin-bottom:0}
.gt-fb.ok{color:var(--money)}
/* ---------- P3 · what decides the order ---------- */
.ar-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:9px 16px;
margin:0 0 15px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.ar-l{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.ar-l.ar-qs{border-left:2px solid var(--warn);padding-left:11px}
.ar-board{border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);padding:12px 14px}
.ar-row{display:grid;grid-template-columns:26px 92px minmax(0,1fr) 48px 120px;gap:10px;
align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.ar-row:first-child{border-top:0}
.ar-row.you .ar-name{font-weight:700}
.ar-row.outn{opacity:.45}
.ar-pos{font-family:var(--mono);font-size:13px;color:var(--ink-4);text-align:center}
.ar-name{font-family:var(--ui);font-size:13px}
.ar-bar{height:9px;background:var(--bg-4);border-radius:5px;overflow:hidden}
.ar-bar i{display:block;height:100%;border-radius:5px;transition:width .2s var(--ease)}
.ar-val{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.ar-st{font-family:var(--ui);font-size:10.5px;color:var(--open);text-align:right}
.ar-out{margin:15px 0 0}
.ar-note{margin:13px 0 0}
.ar-note p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3)}
/* ---------- P4 · what a sale actually costs ---------- */
.tc-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px 16px;
margin:0 0 15px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.tc-l{display:flex;flex-direction:column;gap:4px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.tc-v{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.tc-note{margin:13px 0 0}
.tc-note p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3)}
/* ---------- P5 · where to look first ---------- */
.dg-list{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 15px}
.dg-b{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;
transition:all .16s var(--ease);text-align:left}
.dg-b:hover{color:var(--ink);background:var(--bg-4)}
.dg-b.on{color:var(--ink);background:var(--bg-4);border-color:var(--stage,var(--accent))}
.dg-out{padding:16px 18px;border:1px solid var(--line-2);border-left:3px solid var(--stage,var(--accent));
border-radius:10px;background:var(--bg-2)}
.dg-step{margin:0 0 12px;font-family:var(--display);font-size:19px;color:var(--ink-2)}
.dg-step b{color:var(--stage,var(--accent))}
.dg-f,.dg-t{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;margin:0 0 9px;
font-size:15px;line-height:1.58;color:var(--ink-2)}
.dg-t{margin-bottom:0;color:var(--ink-3)}
.dg-f span,.dg-t span{font-family:var(--ui);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-4);padding-top:4px}
/* ---------- P6 · reading demand ---------- */
.dr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.dr-t.on{background:var(--bg-5);color:var(--ink);border-color:var(--stage,var(--accent))}
.dr-reveal{margin-left:auto}
.dr-chart{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.dr-svg{width:100%;height:auto;display:block}
.dr-key{display:flex;gap:18px;margin:8px 0 0;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.dr-key span{display:inline-flex;align-items:center;gap:6px}
.dr-key i{width:14px;height:2.5px;border-radius:2px;display:inline-block}
.dr-out{margin:14px 0 0}
.dr-hide{margin:0;font-family:var(--ui);font-size:13px;color:var(--ink-4);font-style:italic}
.dr-read{margin:0;padding:14px 16px;border-radius:9px;background:var(--bg-4);
border-left:3px solid var(--stage,var(--accent));font-size:15.5px;line-height:1.6;color:var(--ink-2)}
/* ---------- P7 · diagnostic or outcome ---------- */
.mt-card{border:1px solid var(--line-2);border-radius:11px;background:var(--bg-2);padding:20px 22px;
margin:0 0 12px}
.mt-m{margin:0;font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink)}
.mt-btns{display:flex;gap:8px;margin:0 0 10px}
.mt-prog{font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.mt-fb{margin:16px 0 0;padding:14px 16px;border-radius:9px;border:1px solid var(--line)}
.mt-fb.ok{background:var(--money-soft);border-color:rgba(159,214,160,.26)}
.mt-fb.no{background:var(--warn-soft);border-color:rgba(240,194,116,.26)}
.mt-fh{margin:0 0 7px;font-family:var(--ui);font-size:13px;font-weight:700;color:var(--ink)}
.mt-fb p{margin:0 0 9px;font-size:15px;line-height:1.58;color:var(--ink-2)}
.mt-done b{font-family:var(--display);font-size:20px;color:var(--ink)}
.mt-done p{margin:10px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
/* ---------- P8 · what you take with you ---------- */
.cy-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.cy-t.on{background:var(--bg-5);color:var(--ink);border-color:var(--st,var(--accent));
box-shadow:inset 3px 0 0 var(--st,var(--accent))}
.cy-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px}
.cy-col{border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);padding:14px 16px}
.cy-col h6{margin:0 0 11px;font-family:var(--ui);font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;font-weight:600}
.cy-col.carries{border-top:2px solid var(--money)}
.cy-col.carries h6{color:var(--money)}
.cy-col.breaks{border-top:2px solid var(--warn)}
.cy-col.breaks h6{color:var(--warn)}
.cy-col.none{border-top:2px solid var(--open)}
.cy-col.none h6{color:var(--open)}
.cy-r{padding:8px 0;border-top:1px solid var(--line)}
.cy-r:first-of-type{border-top:0;padding-top:0}
.cy-h{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.cy-d{font-size:14px;line-height:1.55;color:var(--ink-3)}
/* an evidence chip and the punctuation after it never break apart */
.evwrap{white-space:nowrap}
/* ---------- organic chapter ---------- */
.tv-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
table.tv{border-collapse:collapse;width:100%;min-width:620px;margin:0}
table.tv thead th{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-4);
text-align:left;padding:11px 13px;border-bottom:1px solid var(--line)}
table.tv tbody th{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2);
text-align:left;padding:11px 13px;vertical-align:top;width:190px;border-top:1px solid var(--line)}
table.tv tbody td{font-size:14px;line-height:1.5;color:var(--ink-3);padding:11px 13px;
vertical-align:top;border-top:1px solid var(--line)}
table.tv tbody td.win{color:var(--ink-2);background:var(--money-soft)}
.tv-foot{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink-3)}
.us-list{list-style:none;margin:0 0 15px;padding:0;display:flex;flex-direction:column;gap:5px}
.us-b{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:var(--ui);
font-size:13.5px;color:var(--ink-3);background:var(--bg-3);border:1px solid var(--line);
border-left:3px solid var(--open);border-radius:8px;padding:9px 13px;cursor:pointer;
transition:all .16s var(--ease)}
.us-b.rank{border-left-color:var(--money)}
.us-b:hover{color:var(--ink);background:var(--bg-4)}
.us-b.on{color:var(--ink);background:var(--bg-4)}
.us-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);min-width:14px}
.us-out{padding:16px 18px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2)}
.us-h{margin:0 0 8px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink)}
.us-w{margin:0 0 10px;font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.us-f{margin:0 0 10px;font-size:15px;line-height:1.58;color:var(--ink-2)}
.us-note{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--warn)}
.us-note.ok{color:var(--money)}
.pz-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 18px;
margin:0 0 15px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.pz-l{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.pz-note{margin:13px 0 0}
.pz-note p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3)}
/* the prediction gate sits inside the standard interactive shell */
.sim.gate{border:1px solid var(--line-2);border-left:3px solid var(--stage,var(--accent));
border-radius:var(--radius);background:var(--bg-2);padding:22px 24px;margin:30px 0}
/* ---------- O4 · what got built ---------- */
.bt-ctl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 15px}
.bt-b{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;
transition:all .16s var(--ease)}
.bt-b:hover{color:var(--ink);background:var(--bg-4)}
.bt-b.on{color:var(--ink);background:var(--bg-5);border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent)}
.bt-note{margin:13px 0 0}
.bt-note p{margin:0 0 9px;font-size:15px;line-height:1.6;color:var(--ink-3)}
.bt-flag{padding:11px 14px;border-left:3px solid var(--warn);background:var(--bg-2);
border-radius:0 8px 8px 0}
/* ---------- O6 · one plan, four answers ---------- */
.fc-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 18px;
margin:0 0 13px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.fc-l{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:12px;color:var(--ink-3)}
.fc-curves{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 15px}
.fc-c{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-radius:8px;padding:8px 13px;cursor:pointer;
transition:all .16s var(--ease)}
.fc-c:hover{color:var(--ink);background:var(--bg-4)}
.fc-c.on{color:var(--ink);background:var(--bg-5);border-color:var(--accent)}
.fc-note{margin:13px 0 0}
.fc-note p{margin:0 0 9px;font-size:15px;line-height:1.6;color:var(--ink-3)}
.fc-flag{padding:11px 14px;border-left:3px solid var(--warn);background:var(--bg-2);
border-radius:0 8px 8px 0}
/* ---------- O7 · which test can answer this ---------- */
.ts-cases{display:flex;flex-direction:column;gap:5px;margin:0 0 15px}
.ts-c{text-align:left;font-family:var(--ui);font-size:13.5px;color:var(--ink-3);
background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--line-2);
border-radius:8px;padding:9px 13px;cursor:pointer;transition:all .16s var(--ease)}
.ts-c:hover{color:var(--ink);background:var(--bg-4)}
.ts-c.on{color:var(--ink);background:var(--bg-4);border-left-color:var(--accent)}
.ts-rows{display:flex;flex-direction:column;gap:7px}
.ts-r{display:grid;grid-template-columns:200px 130px 1fr;gap:10px;align-items:start;
padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
.ts-d{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-2)}
.ts-v{font-family:var(--ui);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
.ts-r.yes{border-left:3px solid var(--money)}
.ts-r.yes .ts-v{color:var(--money)}
.ts-r.weak{border-left:3px solid var(--warn)}
.ts-r.weak .ts-v{color:var(--warn)}
.ts-r.no{border-left:3px solid var(--open)}
.ts-r.no .ts-v{color:var(--ink-4)}
.ts-w{font-size:14px;line-height:1.55;color:var(--ink-3)}
.ts-note{margin:13px 0 0;padding:11px 14px;border-left:3px solid var(--money);
background:var(--bg-2);border-radius:0 8px 8px 0;font-size:15px;line-height:1.6;color:var(--ink-3)}
.ts-note.none{border-left-color:var(--warn)}
@media (max-width:720px){.ts-r{grid-template-columns:1fr;gap:4px}}
/* ---------- O8 · one server, four consumers ---------- */
.cw-bar{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
margin:0 0 15px}
.cw-cap{font-family:var(--ui);font-size:12px;color:var(--ink-4);margin-bottom:9px}
.cw-legs{display:flex;flex-wrap:wrap;gap:6px}
.cw-leg{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);background:var(--bg-4);
border-radius:6px;padding:5px 9px}
.cw-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 15px}
.cw-b{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);background:var(--bg-3);
border:1px solid var(--line);border-radius:8px;padding:8px 13px;cursor:pointer;
transition:all .16s var(--ease)}
.cw-b:hover{color:var(--ink);background:var(--bg-4)}
.cw-b.on{color:var(--ink);background:var(--bg-5);border-color:var(--accent)}
.cw-out{padding:16px 18px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2)}
.cw-h{margin:0 0 11px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink)}
.cw-rows{display:flex;flex-direction:column;gap:9px}
.cw-r{font-size:15px;line-height:1.55;color:var(--ink-2)}
.cw-r span{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.cw-r.warn span{color:var(--warn)}
/* ==========================================================================
STRATEGY AND PLANNING — the eighth book's hues.
A SEPARATE :root BLOCK AT THE FOOT OF THE FILE, DELIBERATELY. Everything
above this line is untouched. A new book adds a block and never edits one,
because the one time a book reached up into another book's declarations it
emptied seventy-one entries and every route still rendered.
========================================================================== */
:root{
--acad-strategy:#b8c98e; /* Strategy and Planning: a sage, the eighth family */
/* Chapter hues --p0..--p10. THE LETTER IS 'p', FOR PLANNING.
's' is Programmatic's and has been since the site was a single course. 'c',
'n', 'r', 'l', 't' and 'g' are the other six books. Every free letter in the
word "strategy" collides, which is the whole reason to check the list rather
than take the initial: hueVar() in app.js has no fall-through any more, so a
book with no letter now draws in the neutral accent and looks wrong on
purpose rather than quietly wearing another book's colours.
ONE MORE STEP IS OWED ON WIRING DAY AND IT IS NOT THIS FILE'S TO MAKE. The
book's row in app.js carries no `hueLetter` yet. Until it does, every
chapter here draws --stage. That edit belongs with the script tags.
NO VALUE BELOW IS MINTED EXCEPT THE ACCENT. Each is already declared above
and reused on purpose, because an eighth book inventing eleven more colours
makes the palette the thing a reader remembers instead of the curriculum.
The logic is the argument the book makes rather than temperature. The front
door is paper, as it is in six other books. Chapter 1 takes the book accent
because the objective is what everything after it is measured against.
Chapters 2 and 3 are the arithmetic, cool. Chapter 4 is the half of the
subject nothing else in the Library teaches and takes the violet. Chapter 5
is the island where a human decides and a method can see, so it takes the
green that means documented in the chip layer, deliberately. Chapters 6 and
7 are the two places the plan leaves solid ground and run warm to hot.
Chapter 8 is the near-gold, reserved as it is in Programmatic for the
concluding chapter, so arriving at it feels like arriving somewhere. */
--p0:#e8d3ae; /* what a plan is: the front door, paper and lamplight */
--p1:#b8c98e; /* the objective nobody wrote down */
--p2:#f0c274; /* how much, in total */
--p3:#8fbcff; /* the audience you have to author */
--p4:#c3a6e0; /* what to say, and whether it decides where it runs */
--p5:#7fd6b0; /* what each line is for: the island */
--p6:#f0a882; /* the sum nobody owns: the media break */
--p7:#f2949a; /* lines the plan cannot hold */
--p8:#e0b667; /* the page, assembled */
--p9:#8fc4c8; /* shared foundations */
--p10:#6fd8c4; /* spare */
}
/* ==========================================================================
AI AND AUTOMATION — the ninth book's hues.
ANOTHER SEPARATE :root BLOCK AT THE FOOT OF THE FILE. Everything above this
line is untouched, including the eighth book's block. A new book adds a
block and never edits one, because the one time a book reached up into
another book's declarations it emptied seventy-one entries and every route
still rendered.
========================================================================== */
:root{
--acad-ai:#d89aa6; /* AI and Automation: a muted rose, the ninth family */
/* Chapter hues --a0..--a8. THE LETTER IS 'a', FOR AI AND AUTOMATION.
's' is Programmatic's and has been since the site was a single course.
'c', 'n', 'r', 'l', 't', 'g' and 'p' are the other seven books. 'a' is
free and it is the initial for once, which is luck rather than method:
the list was checked before the letter was taken, because hueVar() in
app.js has no fall-through and a book with no letter now draws the
neutral accent and looks wrong on purpose rather than quietly wearing
another book's colours.
THE ACCENT IS THE ONLY MINTED VALUE HERE, and it is minted because suite
11 requires that no two open books share one. The eight existing accents
sit at blue, green-teal, orange, cyan, violet, gold, pale blue and sage.
The gap on that wheel is rose, so the ninth family is rose. Every chapter
value below is already declared higher up this file and is reused on
purpose: a ninth book inventing nine more colours makes the palette the
thing a reader remembers instead of the curriculum.
THE LOGIC IS THE BOOK'S ARGUMENT RATHER THAN TEMPERATURE. The front door
is paper, as it is in seven other books. Chapter 1 takes the book accent,
because access is the chapter about people and the people are what the
rest of it is measured on. Chapter 2 is money moving between lines and
runs warm. Chapter 3 is the arithmetic of a purchase and runs cool.
Chapter 4 takes the violet the platform already uses for creative work.
Chapter 5 takes the green the chip layer means DOCUMENTED by, deliberately,
because it is the one chapter where the answer is written down somewhere
public. Chapter 6 is measurement and takes the deepest blue in the file.
Chapter 7 runs hot, because it is the chapter about what happens to you
whether you decide or not. Chapter 8 is the shared foundations slate every
book uses for it. */
--a0:#e8d3ae; /* the word, and what is already switched on: the front door */
--a1:#d89aa6; /* bought for a role, used by a person */
--a2:#f0c274; /* one line, and the money moves between channels */
--a3:#8fbcff; /* agree the number before you buy the thing */
--a4:#c3a6e0; /* when the variants outnumber the reviewers */
--a5:#9fd6a0; /* the duty is the same size for everybody */
--a6:#7fa8d6; /* how big you have to be to find out */
--a7:#f0a882; /* a market number, and not about you */
--a8:#8fc4c8; /* shared foundations */
}
/* ==========================================================================
THE FRONT DOOR, REBUILT 31 AUGUST 2026
==========================================================================
Everything in this block is scoped to `body.slimrail` or to a class that only
appears on the home page. No book page and no module page is touched by it,
which is the whole reason it sits at the end of the file rather than being
woven into the sections above.
THREE THINGS DECIDED THE LAYOUT, and they pull against each other. A map
wants room. A five second read wants restraint. A corporate laptop is 1366 by
768, which is about 640 pixels of usable height. So: the rail collapses to 68
pixels on this route only, the map takes the right half at full height, and
the copy column carries one sentence rather than four paragraphs.
The display face here is Source Sans, not Source Serif, and that is the
single biggest change. It is drawn from Franklin Gothic and News Gothic, the
same family of shapes the contemporary grotesques come from, and it reads
soft on this platform only because it has never appeared above 14px. Set at
46px with -.032em it is a different face. `--text` is NOT changed: the home
page is the one page with no modules on it and no computed reading time, so
the display type can move here at no risk to the 440.
========================================================================== */
/* ---------- the slim rail, platform routes only, desktop only ----------
THREE STATES, and the third one is why hover is not enough on its own.
collapsed 68px. The mark, the expand control, the book hues, and search
at the foot. This is what a first-time visitor meets.
hovered 296px as an overlay. The grid track stays at 68px, so nothing
under it moves and the page does not reflow.
pinned 296px, held open by pressing the control.
HOVER IS NOT THE ONLY WAY IN. A pointer is one way. `:focus-within` is
another, so tabbing into the rail opens it. And the control pins it for
anybody who would rather not hold a pointer still, carrying `aria-expanded`
and a real accessible name.
THE CONTROL IS AT THE TOP AND IT TAKES THE ACCENT, because in a 68px column
it is the one thing a reader has to find. Everything else in there is a
destination. This is the only control that changes the shape of the page.
The narrow-state rules below hang off one long selector rather than a class
toggled by script. The width is decided by CSS, and a script watching hover
would be a second source of truth for the same fact. */
#railtoggle{display:none;width:34px;height:30px;align-items:center;justify-content:center;
background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r-2);
color:var(--accent);cursor:pointer;font-size:13px;line-height:1;flex:none;
transition:background .18s var(--ease),color .18s var(--ease)}
#railtoggle:hover{background:var(--accent);color:#0b0e15}
#railtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:901px){
body.slimrail #app{grid-template-columns:68px minmax(0,1fr)}
/* 151, not 60, and the number matters. Suite 11 reads the LAST z-index
declared for #sidebar anywhere in the stylesheet and requires it to beat the
scrim's 140, because a scrim painting over an open menu is the most
expensive defect this project has had. A desktop-only rule cannot be
trusted to stay desktop-only, so it sits above the scrim too. */
body.slimrail #sidebar{width:68px;z-index:151;overflow-x:hidden;
display:flex;flex-direction:column;padding:16px 0 16px;
transition:width .2s var(--ease)}
body.slimrail:not(.railopen) #sidebar:hover,
body.slimrail:not(.railopen) #sidebar:focus-within,
body.slimrail.railopen #sidebar{width:var(--sidebar)}
/* One order in both widths, so nothing jumps when it opens. Search sits at
the foot, where the expand arrow used to be. */
body.slimrail .brand{order:1}
body.slimrail #railtoggle{order:2;display:flex;margin:14px auto 2px}
/* Once the rail is wide the control belongs at the edge it collapses towards,
not floating in the middle of a 296px column. */
body.slimrail:not(.railopen) #sidebar:hover #railtoggle,
body.slimrail:not(.railopen) #sidebar:focus-within #railtoggle,
body.slimrail.railopen #railtoggle{margin-left:auto;margin-right:22px}
body.slimrail nav{order:3}
body.slimrail .navfoot{order:4}
body.slimrail .searchbtn{order:5;margin-top:auto;margin-bottom:4px}
body.slimrail .progwrap{display:none}
/* ---- and everything from here applies only while it is actually narrow ---- */
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .brand{
padding:0 0 14px;text-align:center;border-bottom:1px solid var(--line)}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .brand h1,
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .brand p,
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .navfoot{display:none}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .brand .m{
width:30px;height:30px;margin:0 auto}
/* The search control keeps its accessible name and loses its label. The
shortcut still works everywhere and the button still opens the palette. */
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .searchbtn{
width:36px;height:36px;margin-left:auto;margin-right:auto;padding:0;justify-content:center}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .searchbtn span,
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .searchbtn kbd{display:none}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) .searchbtn::before{
content:'⌕';font-size:17px;line-height:1}
/* One hue dot a book, in registry order, which is the same order and the same
colours as the ring. A reader who has met the map recognises the rail. */
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav{
padding:12px 0 0;display:flex;flex-direction:column;align-items:center;gap:9px}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav .stage{display:none}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav .mod{
display:block;width:26px;height:26px;padding:0;border-radius:var(--r-full);
position:relative;overflow:hidden;text-indent:-999em}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav .mod::after{
content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
border-radius:var(--r-full);background:var(--st,var(--accent));opacity:.6;
transition:opacity .18s var(--ease),transform .18s var(--ease)}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav .mod:hover::after{
opacity:1;transform:scale(1.25)}
body.slimrail:not(.railopen) #sidebar:not(:hover):not(:focus-within) nav .mod.soon::after{
background:transparent;box-shadow:inset 0 0 0 1px var(--ink-4);opacity:.55}
}
@media(prefers-reduced-motion:reduce){
#sidebar{transition:none}
}
/* ---------- the hero ---------- */
.wrap.platform{padding-top:38px}
.platformhero{padding:16px 0 30px;margin-bottom:6px;
display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:34px;align-items:center}
.platformhero .hcopy{min-width:0;max-width:560px}
.platformhero .hmap{min-width:0}
.platformhero .eyebrow,.connpage .eyebrow{display:inline-flex;align-items:center;gap:9px;
background:none;border:0;padding:0;margin:0 0 20px;font-family:var(--ui);font-size:11px;
font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4)}
.platformhero .eyebrow .ebd,.connpage .eyebrow .ebd{width:6px;height:6px;
border-radius:var(--r-full);background:var(--mark,#e8d3ae);flex:none}
/* The one large object on the page, and it is set in the sans. */
.platformhero h2{font-family:var(--ui);font-weight:700;font-size:clamp(32px,3.3vw,46px);
line-height:1.04;letter-spacing:-.032em;color:#fff;margin:0 0 18px;max-width:15ch}
.platformhero h2 em{font-style:normal;font-weight:700;color:var(--accent)}
.wrap.platform .platformhero .lede{font-family:var(--ui);font-size:16.5px;line-height:1.55;
color:var(--ink-2);max-width:44ch;margin:0 0 26px}
.platformhero .herocta{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.platformhero .cta{border-radius:var(--r-2);font-family:var(--ui);font-size:14.5px;font-weight:600;
padding:11px 19px;background:var(--accent-deep);color:#0b0e15;border:1px solid var(--accent-deep);
display:inline-flex;align-items:center;gap:9px;transition:background .18s var(--ease)}
.platformhero .cta:hover{background:var(--accent);border-color:var(--accent);color:#0b0e15}
.platformhero .cta.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.platformhero .cta.ghost:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}
/* The live connection. This is the payload: the ring is the evidence that there
are fifty-seven more of them. */
.atlasnow{border-top:1px solid var(--line);padding:17px 0 0;min-height:152px}
.atlasnow .ank{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-family:var(--ui);
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.atlasnow .ank i{width:7px;height:7px;border-radius:var(--r-full);flex:none}
.atlasnow .ank span{font-weight:400;letter-spacing:.06em;color:var(--ink-4)}
.atlasnow .ank span::before{content:'·';margin-right:9px}
.atlasnow .anp{margin:0 0 8px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
line-height:1.4}
.atlasnow .anp i{font-style:normal;color:var(--ink-4);padding:0 9px}
.atlasnow .anp.plain{font-family:var(--display);font-style:italic;font-weight:400;color:var(--ink-3);
font-size:16px}
.atlasnow .anw{margin:0 0 11px;font-family:var(--ui);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.atlasnow .ane{margin:0;font-family:var(--ui);font-size:12.5px;color:var(--ink-4);line-height:1.8}
.atlasnow .ane .evchip{margin-right:8px;vertical-align:.06em}
.atlasnow.subj .ane{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.atlasnow .ane a{color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.atlasnow .ane a:hover{color:var(--ink)}
.atlasnow .ago{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:13px;
font-weight:600;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;border-bottom:0}
.atlasnow .ago.ghost{color:var(--ink-3)}
.atlasnow .ago:hover{color:var(--ink)}
/* The evidence chip. Same five levels and the same colour tokens a reader
already meets behind the evidence toggle on every module page, so nothing new
is minted and nothing new has to be learned. Unlike `.ev` these are always
visible: on the front door the evidence level IS the argument. */
.evchip{display:inline-flex;align-items:center;font-family:var(--ui);font-size:9.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-1);
border:1px solid transparent;white-space:nowrap}
.evchip.ev-doc{color:var(--ev-doc);background:var(--ev-doc-s);border-color:var(--ev-doc-s)}
.evchip.ev-evi{color:var(--ev-evi);background:var(--ev-evi-s);border-color:var(--ev-evi-s)}
.evchip.ev-inf{color:var(--ev-inf);background:var(--ev-inf-s);border-color:var(--ev-inf-s)}
.evchip.ev-con{color:var(--ev-con);background:var(--ev-con-s);border-color:var(--ev-con-s)}
.evchip.ev-unk{color:var(--ev-unk);background:var(--ev-unk-s);border-color:var(--ev-unk-s)}
/* ---------- the ring ---------- */
.atlasmap{position:relative}
.platformhero .pf-svg{width:100%;max-width:540px;height:auto;display:block;margin:0 auto;overflow:visible}
.pf-e{stroke:#eef0f6;stroke-opacity:.055;stroke-width:1;
transition:stroke-opacity .3s var(--ease),stroke-width .3s var(--ease)}
.pf-e.via{stroke-opacity:0}
.pf-e.near{stroke-opacity:.34;stroke-width:1.3}
.pf-e.via.near{stroke-opacity:.5}
.pf-e.far{stroke-opacity:.02}
.pf-e.lit{stroke-opacity:.9;stroke-width:2}
.pf-e.via.lit{stroke-opacity:.75;stroke-width:1.6}
.pf-n{cursor:pointer}
.pf-n .halo{opacity:0;transition:opacity .22s var(--ease)}
.pf-n .dot{transition:opacity .22s var(--ease),transform .22s var(--ease);transform-box:fill-box;
transform-origin:center;opacity:.62}
.pf-n .pf-l{font-family:var(--ui);font-size:11.5px;font-weight:600;fill:var(--ink-3);
transition:fill .22s var(--ease);pointer-events:none}
.pf-n.on .pf-l{fill:var(--ink-3)}
.pf-n:not(.on) .pf-l{font-weight:400;fill:var(--ink-4)}
.pf-n.hot .dot{opacity:1;transform:scale(1.22)}
.pf-n.hot .halo{opacity:.45}
.pf-n.hot .pf-l{fill:var(--ink)}
.pf-n.dim .dot{opacity:.28}
.pf-n.dim .pf-l{fill:var(--ink-4)}
.pf-n.chosen .halo{opacity:.85}
.pf-n:focus{outline:none}
.pf-n:focus-visible .halo{opacity:1;stroke-width:2}
.pf-n:focus-visible .pf-l{fill:var(--ink)}
.pf-hint{margin:6px 0 0;text-align:center;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.platformhero .stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:14px 0 0;
padding-top:14px;border-top:1px solid var(--line);font-family:var(--ui);font-size:11.5px;
color:var(--ink-4);letter-spacing:.01em}
/* THE CALL TO ACTION UNDER THE MAP. The brief asked for it directly beneath the
drawing, and the two existing calls sit in the copy column beside it. This one
is under the map, between the drawing and the counts, because that is where a
person's eye lands after the ring has finished animating. */
.mapcta{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.mapcta .cta{margin:0 0 9px}
.mapctad{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-3);
max-width:64ch}
.mapctad b{color:var(--ink-2);font-weight:600}
@media(max-width:900px){.mapcta{margin-top:12px}}
.platformhero .stats span{display:flex;align-items:baseline;gap:6px}
.platformhero .stats b{display:inline;font-family:var(--mono);font-size:14px;color:var(--ink-2);
font-weight:600;letter-spacing:-.02em}
/* ---------- the connections list ---------- */
.wayfilters{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 4px;align-items:center}
.wayfilters .wf,.wayfilters .wdf{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-2)}
.wayfilters .wf i,.wayfilters .wdf i{width:7px;height:7px;border-radius:var(--r-full);display:inline-block}
/* TWO FILTER ROWS, EACH LABELLED. Unlabelled they read as one row of eleven
buttons where some are colours and some are methods, and a reader cannot tell
that the two rows combine rather than replace each other. */
.wayfilters .wfl{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-4);margin-right:3px;min-width:118px}
.dfilters{margin:8px 0 4px}
@media(max-width:700px){.wayfilters .wfl{min-width:100%;margin:0 0 2px}}
.waylist{margin:10px 0 6px}
.waypair{border-top:1px solid var(--line);padding:16px 0 6px}
.waypair.bad{color:var(--open);font-family:var(--ui);font-size:13px}
.wph{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin:0 0 10px}
.wpn{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.wpn .wpx{font-style:normal;color:var(--ink-4);padding:0 9px;font-weight:400}
.wpc,.viab{font-family:var(--ui);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-4);font-weight:600}
.viab{color:var(--ev-inf)}
.way{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:7px 0 9px;align-items:start}
.wk{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--wk,var(--ink-3));padding-top:3px}
.wb{min-width:0}
.wl{margin:0 0 6px;font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--ink-2)}
.wd{margin:0 0 8px;font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink-4)}
.wd b{color:var(--ink-3);font-weight:600}
/* The decision no longer hides behind a control in the browse list: it is not
in the browse list at all. `Open this pair` takes a reader to the answer,
where the decision, how it works and how to prove it all arrive together. */
.wsrc{display:inline}
.wpopen{margin:4px 0 6px;font-size:11.5px;padding:5px 11px;border-radius:var(--r-2)}
/* Block flow rather than flex, so the chip and the citation read as one
sentence and a long module title wraps under itself instead of orphaning the
chip on a line of its own. */
.wev{margin:0;font-family:var(--ui);font-size:12px;color:var(--ink-4);line-height:1.75}
.wev .evchip{margin-right:8px;vertical-align:.06em}
.wev a{color:var(--ink-3);border-bottom:1px solid var(--line)}
.wev a:hover{color:var(--ink)}
/* The filter is one attribute and the stylesheet does the rest. Nothing is
re-rendered and nothing leaves the document, so a reader on a keyboard keeps
their place and the filter cannot fall out of step with the data. */
.waylist[data-filter="demand"] .way:not([data-kind="demand"]),
.waylist[data-filter="money"] .way:not([data-kind="money"]),
.waylist[data-filter="signal"] .way:not([data-kind="signal"]),
.waylist[data-filter="content"] .way:not([data-kind="content"]),
.waylist[data-filter="proof"] .way:not([data-kind="proof"]){display:none}
.waylist[data-filter="demand"] .waypair:not([data-kinds~="demand"]),
.waylist[data-filter="money"] .waypair:not([data-kinds~="money"]),
.waylist[data-filter="signal"] .waypair:not([data-kinds~="signal"]),
.waylist[data-filter="content"] .waypair:not([data-kinds~="content"]),
.waylist[data-filter="proof"] .waypair:not([data-kinds~="proof"]){display:none}
/* The cap. It does not apply while a filter or a subject is narrowing the list,
because a cap and a filter together would show a subset of a subset and say
neither. */
/* The design filter, written as a hide for the same reason the kind filter is:
a hide-then-show ordering defect was already caught here once by the render
pass, and the note explaining it is a few lines below. The two filters are
independent hides, so both apply at once and a reader can ask for the money
connections that are settled by reading a contract. */
.waylist[data-design="rct"] .waypair:not([data-designs~="rct"]),
.waylist[data-design="quasi"] .waypair:not([data-designs~="quasi"]),
.waylist[data-design="intelligence"] .waypair:not([data-designs~="intelligence"]),
.waylist[data-design="audit"] .waypair:not([data-designs~="audit"]),
.waylist[data-design="obs"] .waypair:not([data-designs~="obs"]),
.waylist[data-design="none"] .waypair:not([data-designs~="none"]){display:none}
.waylist[data-cap]:not([data-subject]):not([data-filter]) .waypair:nth-of-type(n+11),
.waylist[data-cap][data-filter="all"][data-design="all"]:not([data-subject]) .waypair:nth-of-type(n+11){display:none}
.wayall{display:inline-flex;margin:14px 0 0;border-radius:var(--r-2)}
.waylist:not([data-cap]) + .wayall{display:none}
/* WRITTEN AS A HIDE RATHER THAN AS A HIDE-THEN-SHOW, and the difference is a
defect the render pass caught.
The first version hid every pair and then showed the ones matching the
subject. Because those show rules came later, they beat the kind filter, so
picking Connected Search and then filtering by Proof drew eight pair headings
with no connections under any of them. A pair that says "2 ways" and shows
none is worse than showing nothing.
Every rule here now only ever HIDES, so the subject and the kind filter
compose instead of fighting. */
.waylist[data-subject="strategy"] .waypair:not([data-has~="strategy"]),
.waylist[data-subject="programmatic"] .waypair:not([data-has~="programmatic"]),
.waylist[data-subject="tv-video"] .waypair:not([data-has~="tv-video"]),
.waylist[data-subject="social"] .waypair:not([data-has~="social"]),
.waylist[data-subject="connected-search"] .waypair:not([data-has~="connected-search"]),
.waylist[data-subject="retail"] .waypair:not([data-has~="retail"]),
.waylist[data-subject="local"] .waypair:not([data-has~="local"]),
.waylist[data-subject="evidence"] .waypair:not([data-has~="evidence"]),
.waylist[data-subject="ai"] .waypair:not([data-has~="ai"]){display:none}
/* The section headings follow the hero into the sans. A 46px sans headline
above a 40px serif section heading reads as two products. The serif keeps
exactly one job on this page, which is the question on a book card. */
body.slimrail .stagehead h3{font-family:var(--ui);font-weight:700;letter-spacing:-.028em;
font-size:31px;line-height:1.1}
body.slimrail .stagehead.first h3{font-size:35px}
body.slimrail .stagehead p{font-family:var(--ui);font-size:15.5px;line-height:1.6;max-width:64ch}
body.slimrail .call p{font-family:var(--ui);font-size:15px;line-height:1.6}
/* ---------- the doors ---------- */
/* The book's question is the ONE serif on this page, and it keeps the book's
own hue. The card title follows the hero and the section headings into the
sans, because a serif title above a serif italic question puts two thirds of
the card in the face the rest of the page has moved away from. */
body.slimrail .card.acadcard h4{font-family:var(--ui);font-weight:700;font-size:20px;
letter-spacing:-.02em;margin:12px 0 9px}
body.slimrail .card.acadcard .asks{font-size:15.5px;line-height:1.5}
body.slimrail .card.acadcard .st{font-family:var(--ui);font-size:12px}
/* ---------- four radii on this surface, and only this surface ---------- */
body.slimrail .searchbtn{border-radius:var(--r-2)}
body.slimrail .searchbtn kbd{border-radius:var(--r-1)}
body.slimrail nav a.mod,body.slimrail nav .mod{border-radius:var(--r-2)}
body.slimrail .card,body.slimrail .resume,body.slimrail .call,
body.slimrail .sooncard{border-radius:var(--r-3)}
body.slimrail .cta,body.slimrail .btn{border-radius:var(--r-2)}
body.slimrail .stagehead::before,body.slimrail .stagehead .sd,body.slimrail nav .stage .sd,
body.slimrail .platformhero .eyebrow{border-radius:var(--r-full)}
/* Every BOX on this page now takes one of the four. The only other radius a
reader meets here is the 2px on `.gterm`, the inline glossary highlight,
which is text decoration rather than a box and is shared with every module
page. Rounding that to 6px would bow the underline. It is left alone, and it
is named here so the next person does not think it was missed. */
/* ---------- responsive ----------
The laptop is the case that decides this design, so it is checked first:
at 1366 by 768 the copy column and the ring both sit inside the first
viewport, with the next section showing beneath. */
@media(max-width:1180px){
.platformhero{grid-template-columns:minmax(0,1fr);gap:26px}
.platformhero .hcopy{max-width:none}
.platformhero h2{max-width:20ch}
.platformhero .pf-svg{max-width:460px}
.atlasnow{min-height:0}
}
/* ---------- THE PHONE HERO, 3 September 2026 ----------
THE PHONE IS NOT THE DESKTOP STACKED, AND THIS BLOCK IS THE WHOLE OF THAT
CLAIM. Above 900px the hero is two columns and the map sits beside the copy,
which is a balanced composition and is not being touched. Below 900px those
two columns are the wrong object: stacked, they put 391px of prose, buttons
and evidence between the headline and the one thing on this page nobody else
has.
MEASURED BEFORE, at the three widths the brief names. The map's top edge sat
at 708px on a 740px viewport, at 620 on 844 and at 598 on 896, so on the
narrowest common Android phone 32 pixels of a 322 pixel drawing were above the
fold and the rest was not. AFTER: the map is wholly inside the first viewport
at all three, and so is the action beneath it.
THE ORDER WAS CHOSEN BY BUILDING BOTH. The brief offered two sequences and
both were prototyped against this stylesheet and measured. Both fit. What
separated them is that putting the map immediately after the headline lands
the map's own caption, "Pick a subject to see every way it connects",
directly above the page's supporting line, so two grey sentences stack and
read as one paragraph while the action moves further away. One short line
before the drawing costs 51px and buys the drawing a frame. The comparison
shots are in design/_orderA_*.png and design/_orderB_*.png.
`display:contents` DISSOLVES THE TWO COLUMNS so their children become grid
items of the hero itself and one `order` can interleave copy and map without
a second copy of the markup in the JavaScript. It is applied only to two
plain `div`s that carry no implicit role, so it costs nothing in the
accessibility tree; the known `display:contents` defect is about elements
with implicit roles, such as lists and tables. */
@media(max-width:900px){
.wrap.platform{padding-top:78px}
.platformhero{padding:6px 0 22px;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.platformhero h2{font-size:clamp(29px,6.6vw,40px);max-width:none;margin:0 0 14px}
.platformhero .hcopy,.platformhero .hmap{display:contents}
/* Big idea, then the visual proof, then the action, then the evidence. */
.platformhero .eyebrow{order:1}
.platformhero h2{order:2}
.wrap.platform .platformhero .lede{order:3;margin:0 0 18px}
.platformhero [data-sim="atlasfield"]{order:4;margin:0}
.mapcta{order:5;margin:16px 0 0}
.atlasnow{order:6;margin:18px 0 0}
.platformhero .herocta{order:7}
.platformhero .stats{order:8;margin:16px 0 0}
/* The phone's edit of the copy. Both spans restate something the reader is
given better elsewhere on the same page; neither is deleted, and every
figure inside them is still computed on both widths. */
.platformhero .ldwide{display:none}
/* ONE PRIMARY ACTION, AND IT IS THE ONE UNDER THE DRAWING.
"Explore the connections" and "Explore cross-channel experiments" go to the
same route, #/connections, as does the panel below and the rail link. On
the desktop they sit in different columns and read as one action each.
Stacked on a phone they become two identical buttons, 400px apart, to one
destination. The hero's copy is the one that goes, because the survivor sits
directly beneath the drawing it refers to and names what is behind the door.
Nothing is unreachable: it is the same page. */
.platformhero .herocta .cta:not(.ghost){display:none}
.platformhero .herocta{margin:18px 0 0}
/* And "Open a book" stops competing. It is a text link, below the evidence,
because a reader who wants a book will scroll to the Library it points at. */
.platformhero .herocta .cta.ghost{flex:0 0 auto;background:none;border:0;padding:0;
color:var(--ink-3);text-decoration:underline;text-underline-offset:4px}
.platformhero .herocta .cta.ghost:hover{background:none;color:var(--ink)}
.way{grid-template-columns:minmax(0,1fr);gap:5px}
.wk{padding-top:0}
}
@media(max-width:560px){
.platformhero .pf-svg{max-width:none}
.platformhero .pf-n .pf-l{font-size:10.5px}
.platformhero .stats{gap:14px 18px;justify-content:flex-start}
.platformhero .herocta{gap:9px}
.platformhero .cta{flex:1 1 auto;justify-content:center}
.wph{gap:6px}
}
/* Motion here is one thing: a dot travelling along a live connection. Under
reduced motion the cycle does not start, the dot never draws, and the map is
a static picture with every control still working. */
@media(prefers-reduced-motion:reduce){
.pf-e,.pf-n .dot,.pf-n .halo,.pf-n .pf-l{transition:none}
.pf-run{display:none}
}
.homelinks{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 0!important;
font-family:var(--ui);font-size:13px}
.homelinks a{color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.homelinks a:hover{color:var(--ink)}
/* ==========================================================================
THE CONNECTIONS PAGE, and the two-up that leads to it
==========================================================================
The interface is the user's own sentence with the nouns as controls. Two
native selects inside a headline, because they are keyboard operable with no
work, correct on a phone, cannot trap focus, need no library, and everybody
already knows how they behave. Styling them to sit inside a line of prose is
the whole of the craft here, and it is worth more than a custom picker.
========================================================================== */
/* ---------- the home page two-up ---------- */
.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin:34px 0 0}
.twoup .call{margin:0;max-width:none}
.connbox{display:flex;flex-direction:column;border-radius:var(--r-3);padding:22px 24px;
background:linear-gradient(112deg,var(--accent-soft),var(--bg-2) 62%);
border:1px solid var(--line-2);color:var(--ink-2);
transition:border-color .2s var(--ease),transform .2s var(--ease)}
.connbox:hover{border-color:var(--accent-deep);color:var(--ink-2)}
.connbox .ch{margin:0 0 11px;font-family:var(--ui);font-size:12.5px;font-weight:600;
color:var(--accent);display:flex;align-items:center;gap:9px}
.connbox h4{margin:0 0 10px;font-family:var(--ui);font-size:21px;font-weight:700;
letter-spacing:-.024em;line-height:1.18;color:#fff}
.connbox .cbd{margin:0 0 16px;font-family:var(--ui);font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.connbox .cbst{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px;
font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.connbox .cbst b{font-family:var(--mono);font-size:14px;color:var(--ink-2);font-weight:600;
letter-spacing:-.02em;margin-right:5px}
.connbox .cbgo{margin-top:auto;font-family:var(--ui);font-size:13.5px;font-weight:600;
color:var(--accent);display:inline-flex;align-items:center;gap:8px}
/* The anticipated book, in the grid with the open ones rather than under a
heading of its own. */
.cards .sooncard{border:1px dashed var(--line-2);background:transparent;box-shadow:none}
.cards .sooncard::before{display:none}
.cards .sooncard .n{color:var(--ink-4)}
.cards .sooncard h4{color:var(--ink-3)}
.cards .sooncard .asks{color:var(--ink-4)}
/* ---------- the question ---------- */
.connpage .qhead{padding:8px 0 26px}
.connpage h2{font-family:var(--ui);font-weight:700;font-size:clamp(27px,2.9vw,38px);
line-height:1.08;letter-spacing:-.03em;color:#fff;margin:0 0 22px;max-width:22ch}
.qline{font-family:var(--ui);font-size:clamp(18px,1.7vw,23px);line-height:1.9;color:var(--ink-3);
margin:0 0 20px;max-width:none}
.qsel{font-family:var(--ui);font-size:inherit;font-weight:700;color:var(--accent);
background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-2);
padding:4px 10px;margin:0 2px;cursor:pointer;max-width:100%;
transition:border-color .18s var(--ease),background .18s var(--ease)}
.qsel:hover{border-color:var(--accent-deep);background:var(--bg-4)}
.qsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qchips{display:flex;flex-wrap:wrap;gap:7px}
/* 32px MINIMUM HEIGHT, AND THE ONE PIXEL IS NOT THE POINT.
These chips were 29px tall from the day the connections page shipped and no
check had ever seen them, because `mobile_check.js` measures a named list of
control selectors and the connections page controls were not on it. Adding
the blueprint disclosure rows to that list on 3 September 2026 pulled the
chips in with them, and nine controls came back one pixel under the
platform's own 30px floor.
Worth recording rather than quietly fixing: the rule existed, the page broke
it, and the gap was that nobody had told the checker this page had controls.
A guard with a hand-written selector list only guards what somebody
remembered to add, which is the same class of fault as a map drawn from an
edge list inside one book's kit file. */
.qchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:12.5px;
font-weight:600;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);
border-radius:var(--r-full);padding:6px 13px;cursor:pointer;min-height:32px;
transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.qchip i{width:7px;height:7px;border-radius:var(--r-full);background:var(--st,var(--accent));
opacity:.7;flex:none}
.qchip:hover{color:var(--ink);border-color:var(--line-2);background:var(--bg-3)}
.qchip.on{color:var(--ink);border-color:var(--st,var(--accent));background:var(--bg-3)}
.qchip.on i{opacity:1}
/* ---------- the answer ---------- */
.ansblock{margin:0 0 10px}
.ansv{font-family:var(--ui);font-size:19px;line-height:1.5;color:var(--ink);margin:0 0 22px;
padding:16px 20px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-3);
max-width:74ch}
.ansv b{color:var(--accent);font-weight:600}
.spread{display:flex;flex-direction:column;gap:2px}
.sprow{display:grid;grid-template-columns:200px minmax(0,1fr) 190px;gap:18px;align-items:baseline;
text-align:left;width:100%;background:none;border:0;border-top:1px solid var(--line);
padding:15px 10px 15px 0;cursor:pointer;transition:background .16s var(--ease)}
.sprow:hover{background:var(--bg-2)}
.sprow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.spn{font-family:var(--ui);font-size:14.5px;font-weight:600;color:var(--ink);
border-left:2px solid var(--st,var(--accent));padding-left:11px;display:block}
.spv{display:block;font-style:normal;font-family:var(--ui);font-size:11px;font-weight:400;
letter-spacing:.08em;text-transform:uppercase;color:var(--ev-inf);margin-top:4px}
.spl{font-family:var(--ui);font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.spc{font-family:var(--ui);font-size:11.5px;color:var(--ink-4);text-align:right}
/* ---------- one way, in full ----------
Three columns on a laptop: what kind of connection it is, what it is, and how
you would prove it. The proving sits beside the connection rather than under
it, because they are one question asked twice. Under 1180px it stacks. */
.way.full{padding:18px 0 6px;border-top:1px solid var(--line);
grid-template-columns:92px minmax(0,1fr) minmax(290px,380px);gap:22px;align-items:start}
.way.full .wb p{max-width:56ch}
.way.full .wl{font-size:17px;color:var(--ink);font-weight:600;line-height:1.45}
.wh{margin:0 0 8px;font-family:var(--ui);font-size:15px;line-height:1.6;color:var(--ink-2)}
.way.full .wd{font-size:14.5px}
.badref{color:var(--open);font-family:var(--ui);font-size:12px}
/* ---------- prove it on your account ----------
Four states, and the colour is the platform's own evidence palette rather
than a new one: green where the test exists, amber where the design is
missing, grey where nobody has written it, and the neutral "unknowable" tone
where no experiment settles it at all. */
.prove{margin:0;padding:16px 18px;border-radius:var(--r-3);
border:1px solid var(--line);background:var(--bg-2);border-left-width:3px}
/* THE SIX DESIGN GRADES REUSE THE EVIDENCE PALETTE and mint no new colours, for
the same reason the register reuses the five evidence levels rather than
inventing Strong, Moderate and Emerging. A reader has already been taught
these tones by the evidence toggle on every module page.
The pairing is an argument, not a lookup. Randomised takes the "documented"
tone, because it is the strongest thing this platform can say. Knowledge that
moves takes the accent rather than an evidence tone, because it is not a
weaker kind of proof, it is a different kind of answer, and colouring it
somewhere on the evidence ladder would say the opposite. */
.prove.p-rct{border-left-color:var(--ev-doc);background:linear-gradient(112deg,var(--ev-doc-s),var(--bg-2) 60%)}
.prove.p-quasi{border-left-color:var(--ev-evi);background:linear-gradient(112deg,var(--ev-evi-s),var(--bg-2) 60%)}
.prove.p-intelligence{border-left-color:var(--accent);background:linear-gradient(112deg,var(--accent-soft),var(--bg-2) 60%)}
.prove.p-audit{border-left-color:var(--ev-con);background:linear-gradient(112deg,var(--ev-con-s),var(--bg-2) 60%)}
.prove.p-obs{border-left-color:var(--ev-inf)}
.prove.p-unsettled,.prove.p-none{border-left-color:var(--ev-unk);background:linear-gradient(112deg,var(--ev-unk-s),var(--bg-2) 60%)}
.prove .pk{margin:0 0 9px;font-family:var(--ui);font-size:10.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.prove .pt{margin:0 0 7px;font-family:var(--ui);font-size:15px;font-weight:700;color:var(--ink)}
.prove.p-rct .pt{color:var(--ev-doc)}
.prove.p-quasi .pt{color:var(--ev-evi)}
.prove.p-intelligence .pt{color:var(--accent)}
.prove.p-audit .pt{color:var(--ev-con)}
.prove.p-obs .pt{color:var(--ev-inf)}
.prove.p-none .pt{color:var(--ev-unk)}
.prove .pd{margin:0 0 10px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink-2);
max-width:70ch}
.prove .pm{margin:12px 0 0;font-family:var(--ui);font-size:12.5px;color:var(--ink-4);line-height:1.7}
.prove .pm span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:3px}
.prove .pm a{color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.prove .pm a:hover{color:var(--ink)}
.pslot{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.pslot h6{margin:0 0 5px;font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3)}
.pslot p{margin:0;font-family:var(--ui);font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:70ch}
/* ---------- the experiment blueprints ----------
COLLAPSED BY DEFAULT AND EXPANDED IN PLACE. A element, so the
keyboard behaviour, the focus behaviour and the screen reader announcement
are the browser's rather than ours, and several can be open at once without
any of them closing the others. */
.bplist{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.bpn{margin:0 0 9px;font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-4);max-width:66ch}
.bp{border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg);margin:0 0 7px;
border-left-width:3px;border-left-color:var(--ink-4)}
.bp.bp-rct{border-left-color:var(--ev-doc)}
.bp.bp-quasi{border-left-color:var(--ev-evi)}
.bp.bp-intelligence{border-left-color:var(--accent)}
.bp.bp-audit{border-left-color:var(--ev-con)}
.bp.bp-obs{border-left-color:var(--ev-inf)}
.bp.bp-none{border-left-color:var(--ev-unk)}
.bp.bad{padding:12px 14px;font-family:var(--ui);font-size:13px;color:var(--open)}
.bp>summary{list-style:none;cursor:pointer;padding:11px 13px;display:grid;
grid-template-columns:auto minmax(0,1fr) 16px;align-items:center;gap:11px}
.bp>summary::-webkit-details-marker{display:none}
.bp>summary:hover{background:var(--bg-2)}
.bp>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-2)}
.bpg{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:3px 7px;border-radius:var(--r-full);border:1px solid var(--line-2);color:var(--ink-4);
white-space:nowrap}
.bp-rct .bpg{color:var(--ev-doc);border-color:var(--ev-doc)}
.bp-quasi .bpg{color:var(--ev-evi);border-color:var(--ev-evi)}
.bp-intelligence .bpg{color:var(--accent);border-color:var(--accent)}
.bp-audit .bpg{color:var(--ev-con);border-color:var(--ev-con)}
.bp-obs .bpg{color:var(--ev-inf);border-color:var(--ev-inf)}
.bp-none .bpg{color:var(--ev-unk);border-color:var(--ev-unk)}
.bpt{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;
letter-spacing:-.005em}
.bpo{width:16px;height:16px;position:relative}
.bpo::before,.bpo::after{content:'';position:absolute;background:var(--ink-4);
transition:transform .18s ease,opacity .18s ease}
.bpo::before{left:3px;right:3px;top:7.5px;height:1.5px}
.bpo::after{top:3px;bottom:3px;left:7.5px;width:1.5px}
.bp[open] .bpo::after{transform:scaleY(0);opacity:0}
@media(prefers-reduced-motion:reduce){.bpo::before,.bpo::after{transition:none}}
.bpb{padding:2px 13px 15px;border-top:1px solid var(--line)}
.bpq{margin:12px 0 8px;font-family:var(--ui);font-size:14.5px;font-weight:600;line-height:1.5;
color:var(--ink);max-width:68ch}
.bpgd{margin:0 0 4px;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-4);
max-width:70ch}
.bps{margin:14px 0 0}
.bps h6{margin:0 0 5px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3)}
.bps p{margin:0;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:72ch}
.bps ul,.bps ol{margin:0;padding-left:19px;max-width:72ch}
.bps li{font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 5px}
.bps li::marker{color:var(--ink-4)}
/* Treated against held back, drawn side by side, because "what varies" is the
one part of a test design that a sentence explains worse than a picture. */
.bptc{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.bptc>div{padding:10px 12px;border-radius:var(--r-2);border:1px solid var(--line);background:var(--bg-2)}
.bptc b{display:block;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;margin:0 0 4px}
.bptreat{border-left:2px solid var(--ev-doc)}
.bptreat b{color:var(--ev-doc)}
.bpctrl{border-left:2px solid var(--ink-4)}
.bpctrl b{color:var(--ink-4)}
/* Available, and never visually dominant. The brief's section 15. */
.bpsrc{margin:15px 0 0;border-top:1px solid var(--line);padding-top:11px}
.bpsrc>summary{cursor:pointer;font-family:var(--ui);font-size:11px;color:var(--ink-4);
letter-spacing:.02em;list-style:none}
.bpsrc>summary::-webkit-details-marker{display:none}
.bpsrc>summary::before{content:'+ ';color:var(--ink-4)}
.bpsrc[open]>summary::before{content:'- '}
.bpsrc>summary:hover{color:var(--ink-2)}
.bpsrc>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-1)}
.bpsrc ul{margin:9px 0 0;padding-left:17px;max-width:76ch}
.bpsrc li{font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-3);margin:0 0 8px}
.bpsrc a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.bpsrc a:hover{color:var(--accent)}
.bpdate{display:block;font-size:10.5px;color:var(--ink-4);margin-top:2px}
@media(max-width:1180px){
.way.full{grid-template-columns:92px minmax(0,1fr)}
.way.full .prove{grid-column:2}
.way.full .wb p{max-width:66ch}
}
@media(max-width:900px){
.way.full{grid-template-columns:minmax(0,1fr);gap:6px}
.way.full .prove{grid-column:1}
.connpage h2{max-width:none}
.qline{line-height:2.1}
.sprow{grid-template-columns:minmax(0,1fr);gap:7px;padding:14px 0}
.spc{text-align:left}
.ansv{font-size:17px;padding:14px 16px}
}