/* ============================================================ KANZA CAPITAL PARTNERS — The Ghost Visual Identity v3 · shared stylesheet (kcp.css) Georgia + system-ui (V4-aligned) · true modular scale · one label spec · brass = action only · 12px radius · 8pt grid. One system for every public page. ============================================================ */ @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/source-serif-4/SourceSerif4-subset.woff2") format("woff2")} :root{ /* ink + paper */ --ink:#0F1B2D; --ink-2:#2A2C34; --ink-3:#3D4A5C; --paper:#F7F6F2; /* V4 ground */ --canvas:#F1EFE9; /* V4-adjacent deeper ground */ --card:#FFFFFF; /* V4 panel */ /* ghost slate */ --ghost:#586480; --ghost-deep:#3A4258; --ghost-soft:#ECEEF3; /* brass + champagne — brass is reserved for primary action only */ --gold:#B08A2E; --gold-deep:#7C5F1E; --champagne:#EADFC6; /* utility */ --ledger:#0B7A52; /* V4 up */ --alert:#B23B31; /* V4 down */ --muted:#61697A; /* V5 mut */ --line:#E7E4DC; /* V5 hairline */ --line-2:#DDD9CF; --v5-inverse:#0F1B2D; --v5-on-inverse:#F5F2EB; /* type */ --serif:"Source Serif 4",Georgia,"Times New Roman",serif; /* V4: Georgia display */ --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* V4: system-ui */ --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace; /* V4 mono */ /* true modular scale — Perfect Fourth (1.333) */ --t-hero:clamp(40px,6vw,56px); --t-title:31px; --t-lead:21px; --t-body:17px; --t-small:13px; --t-label:12px; /* spacing — 8pt grid */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --sh-1:0 1px 2px rgba(20,22,27,.05),0 8px 24px rgba(20,22,27,.05); /* V4 card shadow */ --sh-2:0 16px 44px -18px rgba(20,20,25,.24); /* one radius */ --r:12px; --r-lg:12px; /* data visualization — charts are a first-class brand surface */ --viz-subject:#B08A2E; /* The Ghost's own series — the one brass line */ --viz-benchmark:#586480; /* market / index / comparison series */ --viz-gain:#0B7A52; /* semantic positive — never decorative */ --viz-loss:#B23B31; /* semantic negative — never decorative */ --viz-gain-soft:#7FCF9C; /* positive on dark surfaces (ink cards) */ --viz-loss-soft:#E79B9B; /* negative on dark surfaces (ink cards) */ --viz-grid:#E7E4DC; /* hairline gridlines */ --viz-baseline:#C9C2B2; /* zero / axis baseline (slightly darker) */ --viz-axis:#61697A; /* axis tick labels */ --viz-area:rgba(176,138,60,.12); /* area fill under the subject line */ /* categorical — allocations & sectors (slate / brass / green family) */ --viz-1:#586480; --viz-2:#B08A2E; --viz-3:#0B7A52; --viz-4:#8A93A8; --viz-5:#C9A86A; --viz-6:#3A4258; /* sequential ramp — weight / intensity (champagne → brass → deep) */ --viz-seq-1:#EADFC6; --viz-seq-2:#D8BD86; --viz-seq-3:#B08A2E; --viz-seq-4:#7C5F1E; } :root[data-theme="dark"]{ --ink:#E8E4DA;--ink-2:#C3CBD6;--ink-3:#9AA3AF; --paper:#0D1117;--canvas:#141B25;--card:#10161F; --ghost:#8FA0BC;--ghost-deep:#C3CBD6;--ghost-soft:#18202C; --gold:#D4A94E;--gold-deep:#E3BE72;--champagne:#2A2113; --ledger:#3FBF8F;--alert:#E8695C;--muted:#9AA3AF; --line:#1C2430;--line-2:#253143; --viz-subject:#D4A94E;--viz-benchmark:#8FA0BC; --viz-gain:#3FBF8F;--viz-loss:#E8695C; --viz-gain-soft:#7FCF9C;--viz-loss-soft:#E79B9B; --viz-grid:#1C2430;--viz-baseline:#526271;--viz-axis:#9AA3AF; --viz-1:#8FA0BC;--viz-2:#D4A94E;--viz-3:#3FBF8F; --viz-4:#A8B3C6;--viz-5:#E3BE72;--viz-6:#C3CBD6; --viz-seq-1:#2A2113;--viz-seq-2:#7C5F1E;--viz-seq-3:#D4A94E;--viz-seq-4:#E3BE72; } /* base */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* containers */ .wide{max-width:1080px;margin:0 auto;padding:0 28px} .col{max-width:760px;margin:0 auto;padding:0 28px} /* labels — ONE spec for every eyebrow / kicker / tag */ .eyebrow,.lbl{font-family:var(--sans);font-size:var(--t-label);letter-spacing:1.5px;text-transform:uppercase;color:var(--ghost);font-weight:600} .serif{font-family:var(--serif)} .h2{font-family:var(--serif);font-weight:600;font-size:var(--t-title);letter-spacing:-.5px;margin:10px 0 0} .sub{color:var(--muted);font-size:15.5px;margin-top:9px;max-width:60ch} .shead{display:flex;align-items:baseline;gap:14px;margin-bottom:var(--s4)} .shead .no{font-family:var(--sans);font-size:var(--t-label);letter-spacing:1.5px;color:var(--ghost);font-weight:600} .shead h2{font-family:var(--serif);font-weight:600;font-size:var(--t-title);letter-spacing:-.4px} .shead .d{font-size:14px;color:var(--muted);margin-left:auto;max-width:36ch;text-align:right} @media(max-width:680px){.shead{flex-wrap:wrap}.shead .d{text-align:left;margin-left:0}} section{padding:64px 0} .bg-canvas{background:var(--canvas);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* nav */ /* Stacked sticky chrome (2026-07-04): the KCP masthead (.kcpbar) pins at top:0; the Ghost sub-nav pins directly BELOW it instead of at top:0 — otherwise both stuck to 0 and the higher-z masthead painted over the sub-nav, leaving only the parent links. --kcpbar-h = measured masthead height (47px desktop / 53px mobile), tucked 1px so the sub-nav underlaps the opaque bar with no paper sliver. */ :root{--kcpbar-h:46px} @media(max-width:760px){:root{--kcpbar-h:52px}} nav{position:sticky;top:var(--kcpbar-h);z-index:50;background:rgba(245,242,235,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} nav .wide{display:flex;align-items:center;justify-content:space-between;height:66px} .lockup{display:flex;align-items:center;gap:11px} .lockup .wm b{font-family:var(--serif);font-weight:600;font-size:16px;display:block;line-height:1} .lockup .wm span{font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)} .navlinks{display:flex;gap:26px;font-size:13.5px;color:var(--ink-3)} .navlinks a:hover{color:var(--ink)} .navtag{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .navcta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;font-weight:600;color:var(--v5-inverse);background:var(--gold);padding:0 15px;border-radius:var(--r)} .navcta:hover{background:#9a751f} @media(max-width:820px){.navlinks{display:none}} /* hero */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--canvas))} .hero .wide,.hero .col{padding:72px 28px 60px;position:relative;z-index:2} .hero h1{font-family:var(--serif);font-weight:600;font-size:var(--t-hero);line-height:1.04;letter-spacing:-.8px;margin:18px 0 0} .hero h1 em{font-style:italic;color:var(--ghost)} .hero .lede{font-size:19px;color:var(--ink-3);max-width:54ch;margin-top:20px} .hero .lede b{color:var(--ink);font-weight:600} .orbit{position:absolute;right:-130px;top:-60px;width:580px;height:580px;z-index:1;pointer-events:none} @media(max-width:820px){.orbit{display:none}} /* buttons */ .cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;font-size:15px;font-weight:600;padding:0 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:.15s} .btn-gold{background:var(--gold);color:var(--v5-inverse)}.btn-gold:hover{background:#9a751f} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-ghost:hover{background:var(--v5-inverse);color:var(--v5-on-inverse)} .btn-line{background:transparent;color:var(--ghost-deep);border-color:var(--line-2)}.btn-line:hover{border-color:var(--ghost)} .btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* pills + tags */ .pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:20px} .pill.edu{background:var(--ghost-soft);color:var(--ghost-deep)} .pill.up{background:var(--ghost-soft);color:var(--ledger)} .pill.brass{background:var(--champagne);color:var(--ghost-deep)} /* fields */ .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:7px} .field input{width:100%;font-size:16px;padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font-family:var(--sans);transition:.15s} .field input:focus{outline:none;border-color:var(--ghost);box-shadow:0 0 0 3px var(--ghost-soft)} /* generic card */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1)} /* "now" strip */ .now{background:var(--v5-inverse);color:var(--v5-on-inverse)} .now .wide{display:flex;flex-wrap:wrap;padding:0} .now .cell{flex:1;min-width:155px;padding:22px 24px;border-right:1px solid rgba(255,255,255,.1)} .now .cell:last-child{border:none} .now .k{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#8a92a6} .now .v{font-family:var(--serif);font-size:24px;margin-top:5px} .now .v small{font-size:13px;color:var(--viz-gain-soft);font-family:var(--sans)} .now .tag{display:inline-block;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.12);color:#cdd3e0;padding:2px 7px;border-radius:4px;margin-top:7px} /* latest move card (home) */ .move{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--sh-1)} .move .mlabel{font-size:var(--t-label);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ghost)} .move h3{font-family:var(--serif);font-weight:600;font-size:28px;margin:11px 0 9px;line-height:1.18} .move p{color:var(--ink-2);font-size:16px;max-width:62ch} .move .meta{font-size:13px;color:var(--muted);margin-top:15px} .move .arrow{font-size:32px;color:var(--ghost)} @media(max-width:680px){.move{grid-template-columns:1fr}.move .arrow{display:none}} /* six-beat cycle */ .cycle{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:30px} @media(max-width:900px){.cycle{grid-template-columns:1fr 1fr 1fr}} @media(max-width:520px){.cycle{grid-template-columns:1fr 1fr}} .beat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px} .beat .num{width:28px;height:28px;border-radius:50%;background:var(--ghost-soft);color:var(--ghost-deep);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center} .beat h4{font-family:var(--serif);font-size:19px;font-weight:400;margin:12px 0 5px}/* 2026-07-14: match .ter .tn / .rel .rt — one card-headline treatment per page */ .beat p{font-size:12px;color:var(--muted)} /* terrain grid */ .terrain{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px} @media(max-width:900px){.terrain{grid-template-columns:1fr 1fr 1fr}} @media(max-width:520px){.terrain{grid-template-columns:1fr 1fr}} .ter{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 17px;transition:.15s} .ter:hover{border-color:var(--ghost);transform:translateY(-2px)} .ter .tn{font-family:var(--serif);font-size:19px} .ter .td{font-size:12px;color:var(--muted);margin-top:4px} .ter .go{font-size:12px;color:var(--ghost);font-weight:600;margin-top:13px} /* follow band */ .band{background:var(--v5-inverse);color:var(--v5-on-inverse);border-radius:var(--r);padding:50px;text-align:center;box-shadow:var(--sh-2)} .band h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,34px);letter-spacing:-.4px} .band p{color:#e4e8f0;font-size:16.5px;margin:13px auto 26px;max-width:50ch} /* three-up "get" grid */ .get{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} @media(max-width:760px){.get{grid-template-columns:1fr}} .g{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1)} .g .gi{font-size:var(--t-label);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ghost)} .g h4{font-family:var(--serif);font-weight:600;font-size:20px;margin:9px 0 6px} .g p{font-size:13.5px;color:var(--ink-3)} /* public/private tiers */ .tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px} @media(max-width:760px){.tiers{grid-template-columns:1fr}} .tier{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--card)} .tier.priv{background:var(--ghost-deep);color:var(--paper);border-color:var(--ghost-deep)} .tier .tt{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--ghost)} .tier.priv .tt{color:#aab3c8} .tier h3{font-family:var(--serif);font-weight:600;font-size:24px;margin:8px 0 10px} .tier ul{list-style:none;font-size:14.5px} .tier li{padding:7px 0 7px 22px;position:relative;color:var(--ink-3)} .tier.priv li{color:#d3d8e4} .tier li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--ghost)} .tier .note{font-size:12px;color:var(--muted);margin-top:15px} .tier.priv .note{color:#9aa3b8} /* trust grid */ .trust .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px} @media(max-width:760px){.trust .grid{grid-template-columns:1fr}} .trust h4{font-family:var(--serif);font-weight:600;font-size:18px;margin-bottom:6px} .trust p{font-size:13.5px;color:var(--ink-3)} /* article (moves) */ .ahead{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--canvas))} .crumb{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)} .standfirst{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink-3);margin-top:18px;line-height:1.5} .byline{display:flex;gap:18px;align-items:center;margin-top:24px;font-size:13px;color:var(--muted);flex-wrap:wrap} .byline .who{display:flex;align-items:center;gap:9px} .byline .dot{width:7px;height:7px;border-radius:50%;background:var(--ghost)} .poscard{background:var(--v5-inverse);color:var(--v5-on-inverse);border-radius:var(--r);padding:8px;margin:34px 0;box-shadow:var(--sh-2)} .poscard .inr{display:flex;flex-wrap:wrap} .poscard .c{flex:1;min-width:120px;padding:16px 18px;border-right:1px solid rgba(255,255,255,.1)} .poscard .c:last-child{border:none} .poscard .k{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#8a92a6} .poscard .v{font-family:var(--serif);font-size:21px;margin-top:4px} .poscard .v.up{color:var(--viz-gain-soft)}.poscard .v.dn{color:var(--viz-loss-soft)} .poscard .tag{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#aeb6c8;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:5px;margin:0 0 8px 18px;display:inline-block} .prose .sect{margin-bottom:36px} .prose h2{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:-.3px;margin:8px 0 14px} .prose p{font-size:17px;color:var(--ink-2);margin-bottom:16px} .prose p .lead-in{font-family:var(--serif);font-weight:600} .pull{font-family:var(--serif);font-style:italic;font-size:25px;line-height:1.35;color:var(--ghost-deep);border-left:2px solid var(--ghost);padding:6px 0 6px 22px;margin:30px 0} .watch{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px} .watch ul{list-style:none;margin-top:6px} .watch li{font-size:15.5px;color:var(--ink-2);padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--line)} .watch li:last-child{border:none} .watch li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:2px;background:var(--ghost)} /* end-of-move hook */ .hook{background:var(--v5-inverse);color:var(--v5-on-inverse);border-radius:var(--r);padding:40px;text-align:center} .hook .star{font-size:22px;color:var(--champagne)} .hook h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,29px);margin:8px 0 8px;letter-spacing:-.3px} .hook p{color:#e4e8f0;font-size:16px;max-width:46ch;margin:0 auto 22px} .hform{display:flex;gap:10px;max-width:430px;margin:0 auto;flex-wrap:wrap} .hform input{flex:1;min-width:200px;font-size:16px;padding:13px 15px;border:1px solid transparent;border-radius:var(--r);font-family:var(--sans)} .hform input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.25)} .hform button{font-size:15px;font-weight:600;color:var(--v5-inverse);background:var(--gold);border:none;border-radius:var(--r);padding:13px 20px;cursor:pointer} .hform button:hover{background:#9a751f} .hreassure{font-size:12px;color:#c5cbdb;margin-top:13px} .hdone{display:none;font-family:var(--serif);font-size:20px;color:#fff;padding:8px 0} /* related grid */ .relgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:18px} @media(max-width:680px){.relgrid{grid-template-columns:1fr}} .rel{display:block;border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card);transition:.15s} .rel:hover{border-color:var(--ghost);transform:translateY(-2px)} .relgrid .rel{border-top:2px solid var(--gold)} .relgrid .rel:hover{border-top-color:var(--gold)} .rel .rt{font-family:var(--serif);font-size:18px} .rel .rd{font-size:12.5px;color:var(--muted);margin-top:3px} .rel .go{font-size:12px;color:var(--ghost);font-weight:600;margin-top:11px} /* about: mandate / steps / sources / bigdisc */ .mandate{background:var(--v5-inverse);color:var(--v5-on-inverse)} .mandate .wide{display:flex;flex-wrap:wrap} .mandate .c{flex:1;min-width:160px;padding:26px 24px;border-right:1px solid rgba(255,255,255,.1)} .mandate .c:last-child{border:none} .mandate .k{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#8a92a6} .mandate .v{font-family:var(--serif);font-size:27px;margin-top:6px} .mandate .v small{font-size:13px;color:#aeb6c8} .steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px} @media(max-width:760px){.steps{grid-template-columns:1fr}} .step{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px;box-shadow:var(--sh-1)} .step .n{width:30px;height:30px;border-radius:50%;background:var(--ghost-soft);color:var(--ghost-deep);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px} .step h4{font-family:var(--serif);font-size:19px;margin:12px 0 6px} .step p{font-size:13.5px;color:var(--ink-3);margin:0} .sources{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} @media(max-width:680px){.sources{grid-template-columns:1fr}} .src{display:flex;gap:14px;border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)} .src .badge{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--v5-on-inverse);background:var(--v5-inverse);border-radius:var(--r);min-width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex:none} .src h4{font-size:15px;margin-bottom:3px} .src p{font-size:13px;color:var(--ink-3);margin:0} .bigdisc{background:var(--champagne);border:1px solid #DFCFA6;border-radius:var(--r);padding:30px 32px} .bigdisc h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:8px 0 12px} .bigdisc p{font-size:14.5px;color:#5c4d28;line-height:1.7} /* ============================================================ DATA VISUALIZATION — editorial charts (Economist-grade) A chart is a small piece of journalism: a flag, a headline, one explanatory line, the data, and a source. Nothing else. ============================================================ */ .tnum{font-variant-numeric:tabular-nums;letter-spacing:-.1px} /* all figures align */ /* the chart as an editorial unit — no box, a top hairline + brass flag */ .chart{position:relative;background:transparent;padding:20px 2px 4px;border-top:2px solid var(--ink)} .chart:before{content:"";position:absolute;top:-2px;left:0;width:42px;height:2px;background:var(--gold)} /* the brass flag */ .chart-kicker{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ghost);margin-bottom:6px} .chart-title{font-family:var(--serif);font-weight:600;font-size:var(--t-lead);letter-spacing:-.2px;line-height:1.2;color:var(--ink)} .chart-sub{font-size:var(--t-small);color:var(--ink-3);margin-top:3px;max-width:60ch} .chart-figure{margin:16px 0 0} .chart svg{display:block;width:100%;height:auto;overflow:visible} .chart .axis{font-family:var(--sans);font-size:11px;fill:var(--viz-axis);font-variant-numeric:tabular-nums} .chart .gridline{stroke:var(--viz-grid);stroke-width:1} /* horizontal only */ .chart .baseline{stroke:var(--viz-baseline);stroke-width:1.25} .chart .series-subject{fill:none;stroke:var(--viz-subject);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .chart .series-benchmark{fill:none;stroke:var(--viz-benchmark);stroke-width:1.5;stroke-dasharray:4 3} .chart .area-subject{fill:var(--viz-area);stroke:none} /* direct on-chart labels — preferred over a legend */ .chart .series-label{font-family:var(--sans);font-size:12px;font-weight:600} .chart .series-label.subject{fill:var(--gold-deep)} .chart .series-label.benchmark{fill:var(--ghost)} /* the Ghost-insight annotation: a quiet marker + a note tying data to reasoning */ .chart .anno-line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3} .chart .anno-dot{fill:var(--viz-subject);stroke:var(--paper);stroke-width:2} .chart .anno-note{font-family:var(--sans);font-size:11.5px;fill:var(--ink-2)} .chart .anno-note tspan.t{font-weight:600;fill:var(--ink)} /* source / disclaimer line — on every chart */ .chart-source{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .chart-source em{font-style:italic} /* fallback legend (when direct labels won't fit) */ .legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:var(--t-small);color:var(--ink-3)} .legend span{display:inline-flex;align-items:center;gap:8px} .legend i{display:inline-block;width:14px;height:3px;border-radius:2px} .legend i.dot{width:9px;height:9px;border-radius:50%} .legend i.dash{background:repeating-linear-gradient(90deg,var(--viz-benchmark) 0 4px,transparent 4px 7px);height:2px} /* horizontal allocation bars */ .bars{display:grid;gap:11px;margin-top:4px} .bar-row{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px;font-size:var(--t-small)} .bar-row .bn{color:var(--ink-3)} .bar-track{height:10px;background:var(--ghost-soft);border-radius:6px;overflow:hidden} .bar-fill{height:100%;border-radius:6px} .bar-row .bv{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums} @media(max-width:520px){.bar-row{grid-template-columns:96px 1fr 48px}} /* stat figure — large tabular number for "now" reads */ .stat{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.4px} .stat .delta{font-family:var(--sans);font-size:.55em;font-weight:600;font-variant-numeric:tabular-nums;margin-left:6px} .stat .delta.up{color:var(--viz-gain)} .stat .delta.dn{color:var(--viz-loss)} .on-dark .stat .delta.up,.delta.up.soft{color:var(--viz-gain-soft)} .on-dark .stat .delta.dn,.delta.dn.soft{color:var(--viz-loss-soft)} /* footer */ footer{background:var(--v5-inverse);color:#9aa0b3;padding:48px 0 32px;font-size:13.5px} footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap} footer h5{color:#fff;font-size:12.5px;letter-spacing:.5px;margin-bottom:11px} footer a{color:#9aa0b3;display:block;padding:3px 0} footer a:hover{color:#fff} footer .lead5{max-width:300px} footer .lead5 .fl{display:flex;align-items:center;gap:10px;margin-bottom:10px} footer .lead5 .fl b{font-family:var(--serif);font-size:15px;color:#fff} .disc{max-width:80ch;line-height:1.7;font-size:12px;color:#7c8294} footer .disc.tline{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:18px} /* ============================================================ V4 unification chrome — canonical site masthead bar + standard compliance footer line (Rubric D1/D2 · trust_check gates). Injected into every built /ghost page by build-ghost-section.sh. ============================================================ */ .kcpbar{position:sticky;top:0;z-index:120;background:var(--card);border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13px} .kcpbar .in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline} .kcpbar .kb-brand{font-family:var(--serif);font-weight:700;font-size:17px;color:#0F1B2D;text-decoration:none} .kcpbar .kb-brand b{color:var(--gold)} .kcpbar nav{display:flex;flex-wrap:wrap;gap:13px} .kcpbar nav[aria-label="Primary"]{margin-left:auto} /* KCP. left, links right-aligned */ .kcpbar nav a{color:var(--muted);text-decoration:none;display:inline;padding:0} .kcpbar nav a:hover{color:var(--ink)} .kcpbar nav a.on{color:var(--ink);font-weight:600} /* Mobile hamburger (2026-07-04) — the ghost bar now matches the site's V4 chrome: the desktop nav collapses to a ☰ button that toggles a full-width drop panel. Scroll/overflow safe, so it can't expand the viewport or break the breakpoint. */ .kcpbar .kb-burger{display:none;align-items:center;justify-content:center;margin-left:auto;align-self:center;font:inherit;font-size:18px;line-height:1;width:44px;height:44px;cursor:pointer;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px} .kcpbar nav.kb-mobnav{display:none;flex-basis:100%;width:100%;margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)} .kcpbar nav.kb-mobnav.open{display:block} .kcpbar nav.kb-mobnav a{display:block;padding:9px 2px;border-bottom:1px solid var(--line)} @media(max-width:760px){ .kcpbar nav[aria-label="Primary"]{display:none} .kcpbar .kb-burger{display:inline-flex} } footer .kcp-compliance{border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:14px;font-size:12px;line-height:1.65;color:#9aa0b3} footer .kcp-compliance a{display:inline;padding:0;color:var(--champagne)} /* ============================================================ V4 STRUCTURAL PASS — wave 1 (ghost-home) · per KCP_Ghost_V4_Spec.md Decisions locked 2 Jul 2026: orbit contained-right · slate accents only · band under hero (ink, tiled) · single gold CTA per page. ============================================================ */ /* masthead row 2 (section bar) — V4-aligned */ nav{background:rgba(247,246,242,.92)} .navcta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--gold)} .navcta:hover{background:var(--gold-deep)} .navlinks a:hover{color:var(--ink)} /* hero — contained orbit grid (home carries .v4h) */ .hero.v4h .wide{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center;padding:44px 28px 36px} .hero.v4h .orbit{position:static;width:100%;max-width:380px;height:auto;margin:0 auto;display:block} .hero.v4h .cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px} .xgo{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--gold-deep);text-decoration:none} .xgo:hover{text-decoration:underline} .notadv{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 10px} /* V4 buttons: 44px touch target, pill; one gold per page */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:13.5px;line-height:1} .btn-gold:hover{background:var(--gold-deep)} .btn-light{background:var(--card);color:var(--ink);border-color:var(--line)} .btn-light:hover{background:var(--canvas);border-color:var(--canvas)} /* stat band — V4 tile interior on ink */ .now .cell{border-right:1px solid rgba(255,255,255,.09)} .now .k{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9aa0b3} .now .v{font-size:16.5px} .now .v [data-ghost],.now .v small{font-variant-numeric:tabular-nums} .now .v [data-ghost="nav"]{font-family:var(--mono);font-weight:600} .now .tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:2px 8px;font-size:10.5px;letter-spacing:.06em} /* cards: gold hover discipline (matches .v4-aud) */ .move:hover,.beat:hover,.ter:hover{border-color:var(--gold)} .move,.beat,.ter{box-shadow:var(--sh-1);transition:border-color .12s} /* conversion band: ink (dark reserved for the Ghost), champagne accents — slate retired here */ .band{background:var(--v5-inverse)} .band p{color:#c9ccd2} /* wave-1 responsive (.v4h-mobile-marker) */ @media(max-width:880px){ .hero.v4h .wide{grid-template-columns:1fr} .hero.v4h .orbit{max-width:260px} .now .wide{display:grid;grid-template-columns:repeat(2,1fr)} .now .cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.09)} } /* wave-1 review round (Arthur, 2 Jul): unify the two masthead rows — same container width as .wide (1080), same solid panel white, aligned left edges. */ .kcpbar{background:var(--card)} .kcpbar .in{max-width:1080px;padding:9px 28px} nav{background:var(--card);backdrop-filter:none} /* the living hero — orbit as ambient motion behind a live "state of the book" card */ .hero-live{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center} .hero-live .orbit{position:absolute;inset:0;margin:auto;width:130%;max-width:540px;height:auto;opacity:.95;animation:orbitspin 150s linear infinite;transform-origin:center;pointer-events:none} @keyframes orbitspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.hero-live .orbit{animation:none}} .live-card{position:relative;z-index:2;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:20px 22px;min-width:280px;max-width:330px} .live-card .lc-k{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px} .live-card .lc-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ledger);box-shadow:0 0 0 3px rgba(11,122,82,.15)} .live-card .lc-ch{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25;margin:.35em 0 .55em} .live-card .lc-nav{font-family:var(--mono);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums} .live-card .lc-since{font-family:var(--sans);font-size:12px;color:var(--ledger);font-weight:600} .live-card .lc-move{font-size:12.5px;color:var(--muted);margin:9px 0 4px;padding-top:9px;border-top:1px solid var(--line)} .live-card .lc-tag{display:inline-block;margin:7px 0 10px;background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .live-card .xgo{display:inline-block} @media(max-width:880px){.hero-live{min-height:300px;margin-top:6px}.hero-live .orbit{max-width:400px}} /* ============================================================ ONE GRID — wave-1 review round 2 (Arthur, 2 Jul evening). Diagnosis: content floated — a centred 760px column adrift in the viewport, sections at differing widths, charts unframed on bare paper. Fix: every container shares the V4 wrap (1180/20) and a single LEFT EDGE; heroes compress so the data leads; charts sit in V4 cards. The information is the reason for being. ============================================================ */ /* one wrap, one left edge */ .wide{max-width:1180px;padding:0 20px} .kcpbar .in{max-width:1180px;padding:9px 20px} .col{max-width:840px;margin-left:max(0px,calc((100% - 1180px)/2));margin-right:auto;padding:0 20px} .now .wide{padding:0 20px} /* compact heroes — kicker + headline + one breath, then the data */ .hero .wide,.hero .col{padding:40px 20px 30px} .hero.v4h .wide{padding:40px 20px 32px} .standfirst{font-size:18px;margin-top:12px;max-width:62ch} section{padding:44px 0} /* charts live in V4 cards — framed, sourced, never floating */ .chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:18px 18px 14px;border-top:2px solid var(--ink)} .chart:before{left:18px} .chartrow{gap:20px} /* band finish (wave-1 round 3): the strip stays — dark is the Ghost's sanctioned signature and the band holds the D3-verified figures — but its interior meets the V4 tile spec: ALL values in SF Mono, tabular, with the V4 label hierarchy. */ .now .v{font-family:var(--mono);font-weight:600;font-size:17.5px;font-variant-numeric:tabular-nums;letter-spacing:0} .now .v small{font-family:var(--sans);font-weight:400;font-size:11.5px;color:#9aa0b3} .now .cell{padding:18px 20px} /* ============================================================ V4 STRUCTURAL PASS — waves 2-4 (tape/book · terrain/moves/journey · reflections/about/access) per KCP_Ghost_V4_Spec.md. ============================================================ */ /* numerals: SF Mono + tabular in every financial context (V4 rule) */ .poscard .v{font-family:var(--mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums} .mandate .v{font-family:var(--mono);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums} .kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600} /* slate → accents only (locked decision): dark surfaces are ink, not slate; slate text retired from body copy */ .tier.priv{background:var(--v5-inverse);border-color:var(--v5-inverse)} .pull{color:var(--ink-2)} /* card discipline: hover gold + V4 shadow across the remaining families */ .mv,.chap,.refl,.src,.step,.tier,.formcard{box-shadow:var(--sh-1);transition:border-color .12s} .mv:hover,.chap:hover,.refl:hover,.src:hover{border-color:var(--gold)} /* provenance row for the move notes (Rubric D2+, ghost skin) */ .gprov{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--sans);font-size:11.5px;color:var(--muted);margin:28px 0 6px;padding-top:12px;border-top:1px solid var(--line)} .gprov .src2{background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:11px} .gprov .st{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ledger)} .gprov .cf{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;background:var(--ghost-soft);color:var(--ledger)} .gprov .cf::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .gprov .why{flex-basis:100%;font-size:11.5px;line-height:1.5} /* balance (Arthur, 2 Jul): paired chart cards fill evenly — key pinned to the card base with the source line, figure takes the remaining height. */ .chart{display:flex;flex-direction:column} .chart-figure{flex:1;display:flex;flex-direction:column;justify-content:flex-end} .chart .key{margin-top:auto;padding-top:12px} /* nav-element leak fix (2 Jul): the microsite's element selector `nav{}` (sticky, panel bg, hairline) was styling the