/* ============================================================================
SEMURG WEB KIT: semurg-kit.css
The single source of truth for the look of every Semurg public surface.
Extracted verbatim from one.semurg.io (canonical light/branded design) and
shared, unchanged, by one / data / intelligence / agents / ontology / cluster.
HOW TO USE (every surface page):
...page content...
Deployed to each surface root by the gated pipeline (node-2 build -> node-1
receiver, manifest-verified atomic swap). Edit this ONE file to restyle all.
============================================================================ */
:root{
--bg:#ffffff;
--panel:#f6f6f4;
--panel-2:#efefec;
--ink:#141414;
--ink-2:#5b5b58;
--ink-3:#8a8a86;
--line:#e2e2dd;
--line-2:#d2d2cc;
/* ACCENT: the single brand-accent token. The visible colour is RED and stays
red (founder decision, canonical for now). Everything downstream uses
var(--red); --red now points at --accent so a future accent swap is one
edit here, not a hunt through every rule. */
--accent:#ff453a;
--red:var(--accent);
--red-ink:var(--accent);
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--term-bg:#111110;
--term-ink:#e8e8e3;
--term-dim:#8f8f88;
/* STATUS tokens (2026-08-25): folded in from the per-page :root blocks the interior pages used to
carry privately. They are part of the ONE design system -- a tier/health colour must not differ
page to page -- so they live here with every other token and nowhere else. Values are the exact
ones the pages already shipped, so no page changes appearance. */
--ok:#3f9d5a;
--warm:#c9782a;
--cold:#3d6fb0;
--green:#2f9e57;
}
/* SLEEK-BLACK sleek palette (2026-08-23, anchored to restyle fe33c3d): deepen the
ground to #0b0b0d and the cards to a neutral #131318, with cool near-black lines.
--ink stays #ededea. The one --accent swap above (#e5372b) propagates via --red. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0b0b0d;
--panel:#16161d;
--panel-2:#21212b;
--ink:#ededea;
--ink-2:#c8c8c2;
--ink-3:#9c9c95;
--line:#232329;
--line-2:#31313a;
--red:var(--accent);
--term-bg:#000000;
--term-ink:#e8e8e3;
--term-dim:#8f8f88;
--ok:#57c07a;
--warm:#e0954a;
--cold:#6fa0d8;
--green:#57c07a;
}
}
:root[data-theme="dark"]{
--bg:#0b0b0d;--panel:#16161d;--panel-2:#21212b;--ink:#ededea;--ink-2:#c8c8c2;
--ink-3:#9c9c95;--line:#232329;--line-2:#31313a;--red:var(--accent);
--term-bg:#000000;--term-ink:#e8e8e3;--term-dim:#8f8f88;
--ok:#57c07a;--warm:#e0954a;--cold:#6fa0d8;--green:#57c07a;
}
*{box-sizing:border-box}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--sans);line-height:1.55;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* SEMURG DATA BACKGROUND THEME (2026-08-23). Full-viewport living-substrate field
behind the whole page (canvas painted by semurg-kit.js substrateBg()). It sits on
z:0, pointer-events:none, over the deep-black body ground; page content is lifted to
z:1 so text stays crisp above the ambient field. The ::after vignette keeps the
deep-black ground solid behind the hero copy (AA contrast) and fades out so the
substrate reads around and below the fold. No scroll cost (fixed). */
.substrate-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}
.substrate-bg canvas{display:block;width:100%;height:100%}
.substrate-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(150% 105% at 26% 16%,
var(--bg) 0%,
color-mix(in srgb,var(--bg) 62%,transparent) 42%,
color-mix(in srgb,var(--bg) 18%,transparent) 72%,
transparent 100%);}
/* UNIVERSAL 2026-08-25: content sits above the hexagon substrate field on EVERY surface (the old
body[data-surface="one"] gate is why only the home page carried the theme; every other page was a
flat ground). Direct body children only -- narrow on purpose, so no page's internal positioning
context changes. */
body > header,body > main,body > footer,body > nav{position:relative;z-index:1}
/* 1080 was set when laptop screens were the assumption. On a 1800px display it left ~700px of the
viewport empty, and the hero wasted more still because .hero-stack collapsed its two children into
one column. 1280 keeps comfortable side margins on a 1440 display and stops the waste on a wide one. */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
section{padding:76px 0;border-top:1px solid var(--line)}
a{color:inherit}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.label{
font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);
}
h1,h2,h3{font-weight:640;letter-spacing:-.015em;line-height:1.08;margin:0}
h1{font-size:clamp(30px,5vw,50px)}
h2{font-size:clamp(23px,3.4vw,32px)}
h3{font-size:16px;letter-spacing:-.01em}
p{margin:0}
.lead{color:var(--ink-2);font-size:clamp(15px,1.85vw,19px);max-width:76ch}
/* nav */
header.top{
position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);
backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:22px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);
font-size:13px;letter-spacing:.06em;font-weight:600}
.nav .links{margin-left:auto;display:flex;gap:20px}
.nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.03em;
color:var(--ink-2);text-decoration:none}
.nav .links a:hover{color:var(--ink)}
@media(max-width:640px){.nav .links{gap:13px}.nav .links a{font-size:11px}}
.hex{width:20px;height:22px;display:block}
.hex .stroke{fill:none;stroke:var(--red);stroke-width:6}
.hex.small{width:15px;height:17px}
/* buttons */
.btn{
display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
font-size:14px;font-weight:560;padding:11px 18px;border-radius:8px;
text-decoration:none;cursor:pointer;border:1px solid transparent;
}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-3)}
/* hero */
.hero{padding-top:64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
/* UX plan C4 (CRITICAL mobile fix): a grid item's default min-width:auto pins
its 1fr track to the widest unbreakable child. On the flagship hero the
install-terminal
(~88 unbreakable chars, white-space:pre) pinned the
track and forced ~718px of horizontal overflow at 390px. min-width:0 releases
the track so the
's own overflow-x:auto scrolls the long command INSIDE
the card, and the page no longer scrolls sideways on a phone. */
.hero-grid > div{min-width:0}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero h1{margin-bottom:18px}
.tension{margin-top:16px;font-size:clamp(15px,1.9vw,19px);font-weight:560;color:var(--ink);
max-width:34ch;line-height:1.3}
.buyers{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.01em;
color:var(--ink-3);max-width:54ch;line-height:1.75}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 20px}
/* terminal card */
.term{
background:var(--term-bg);border:1px solid var(--line-2);border-radius:11px;
overflow:hidden;font-family:var(--mono);font-size:12.5px;color:var(--term-ink);
}
.term .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;
border-bottom:1px solid rgba(255,255,255,.08);color:var(--term-dim)}
.term .dot{width:10px;height:10px;border-radius:50%;background:#3a3a37}
.term .dot.g{background:#3a3a37}
.term .bar .stat{margin-left:auto;font-size:11px;letter-spacing:.03em}
.term .stat b{color:#57c07a;font-weight:600}
.term pre{margin:0;padding:15px 15px 16px;white-space:pre;overflow-x:auto;line-height:1.7}
.term .c{color:var(--term-dim)}
.term .p{color:var(--red)}
.term .k{color:#e8e8e3}
/* copy line */
.cmd{
display:flex;align-items:stretch;gap:0;background:var(--panel);
border:1px solid var(--line-2);border-radius:9px;overflow:hidden;
}
.cmd code{
flex:1;font-family:var(--mono);font-size:13px;padding:13px 15px;overflow-x:auto;
white-space:nowrap;color:var(--ink);
}
.cmd .sel{color:var(--red);margin-right:2px}
.copy{
border:0;border-left:1px solid var(--line-2);background:transparent;
color:var(--red);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
padding:0 15px;cursor:pointer;text-transform:uppercase;white-space:nowrap;
}
.copy:hover{background:var(--panel-2)}
.copy.done{color:var(--ink-2)}
.cmd.big code{font-size:15px;padding:17px 18px}
/* diagram */
.diagram{width:100%;max-width:100%;height:auto}
.dg-box{fill:var(--panel);stroke:var(--line-2);stroke-width:1.4}
.dg-cyl{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.dg-line{stroke:var(--line-2);stroke-width:1;fill:none}
.dg-txt{fill:var(--ink-2);font-family:var(--mono);font-size:8px}
.dg-hex{fill:var(--red)}
.dg-hex-txt{fill:#fff;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em}
.dg-bar{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.2}
.dg-bar-txt{fill:var(--ink);font-family:var(--mono);font-size:9px}
.dg-tab{fill:var(--bg);stroke:var(--red);stroke-width:1}
.dg-cap{fill:var(--ink-3);font-family:var(--mono);font-size:7.5px}
.dg-arrow{stroke:var(--ink-3);stroke-width:1;fill:none;marker-end:url(#ah)}
.ah{fill:var(--ink-3)}
/* idea */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
@media(max-width:760px){.three{grid-template-columns:1fr;gap:22px}}
.three .n{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:9px}
.three h3{margin-bottom:7px}
.three p{color:var(--ink-2);font-size:14.5px}
.anti{margin-top:34px;padding:15px 17px;border-left:2px solid var(--red);
background:var(--panel);border-radius:0 8px 8px 0;font-family:var(--mono);
font-size:12.5px;color:var(--ink-2)}
/* faces */
.faces{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:30px}
@media(max-width:640px){.faces{grid-template-columns:1fr}}
.face{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.face .fn{font-family:var(--mono);font-size:12.5px;color:var(--ink);
min-width:104px;letter-spacing:.02em}
.face .fd{color:var(--ink-2);font-size:14px}
.foot-note{margin-top:24px;color:var(--ink-3);font-size:12.5px;font-family:var(--mono)}
/* sovereign */
.sov{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:760px){.sov{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.sov{grid-template-columns:1fr}}
.sov div{border:1px solid var(--line);border-radius:9px;padding:15px;
font-size:13.5px;color:var(--ink-2)}
.sov b{color:var(--ink);font-weight:580}
/* reproduce */
.rp-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.live-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
font-size:11px;letter-spacing:.05em;color:var(--ink-3)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--red);position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;
background:var(--red);animation:pl 1.8s ease-out infinite}
@keyframes pl{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@media(prefers-reduced-motion:reduce){.pulse::after{animation:none}}
.picker{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 22px}
.chip{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:20px;
border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--red);color:var(--ink)}
.chip[aria-pressed="true"] .bit{color:var(--red)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{border:1px solid var(--line);border-radius:11px;padding:17px 18px;background:var(--panel)}
.tile .tl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.tile .num{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.01em}
.tile .num .u{font-size:12px;color:var(--ink-2);font-weight:400;margin-left:5px;letter-spacing:0}
.tile .human{margin-top:10px;font-size:13px;color:var(--ink-2);line-height:1.5}
.tile .cmdline{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:11px}
.tile .tfoot{margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tile .tfoot .stamp{color:var(--ink-3)}
.tile .tfoot .sep{opacity:.5}
.tile .tfoot .slot{display:inline-block;min-width:64px;border-bottom:1px dashed var(--line-2)}
/* honest edges (homepage) */
.honest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:760px){.honest-grid{grid-template-columns:1fr}}
.honest-grid div{border:1px solid var(--line);border-radius:9px;padding:15px;
font-size:13.5px;color:var(--ink-2);line-height:1.55}
.honest-grid b{color:var(--ink);font-weight:580}
/* face tiering */
.face .ft{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--ink-3);
white-space:nowrap;align-self:flex-start;margin-top:2px}
.face .ft.shipped{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line-2))}
.face .ft.pattern{color:var(--ink-2)}
.face .ft.notyet{color:var(--ink-3);border-style:dashed}
.tierkey{margin-top:22px;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);
font-size:11px;color:var(--ink-3)}
.tierkey b{color:var(--ink-2);font-weight:500}
.steps{counter-reset:s;margin:30px 0 0;display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .si{counter-increment:s;font-family:var(--mono);font-size:12px;color:var(--red);
border:1px solid var(--line-2);border-radius:50%;width:24px;height:24px;flex:0 0 24px;
display:flex;align-items:center;justify-content:center}
.step .si::before{content:counter(s)}
.step code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.step .sd{color:var(--ink-2);font-size:13px;display:block;margin-top:2px}
.quiet{color:var(--ink-3);font-size:12.5px;margin-top:22px;font-family:var(--mono)}
/* install */
.install-what{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 6px}
@media(max-width:760px){.install-what{grid-template-columns:1fr}}
.install-what p{font-size:13.5px;color:var(--ink-2)}
.install-what b{color:var(--ink);font-weight:560}
.lic{margin-top:24px;padding:15px 17px;border:1px solid var(--line-2);border-radius:9px;
background:var(--panel);font-size:13.5px}
.lic b{color:var(--ink)}
.reqs{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--ink-2);
line-height:2;word-spacing:.05em}
.reqs .sep{color:var(--ink-3);margin:0 8px}
.nosig{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.sha{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
word-break:break-all;line-height:1.7}
.sha b{color:var(--ink-2);font-weight:500}
/* go deeper */
.deep{display:grid;gap:2px}
.deep a{display:flex;align-items:center;gap:12px;padding:15px 0;
border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.deep a .dt{font-family:var(--mono);font-size:13px}
.deep a .dd{color:var(--ink-2);font-size:13px;margin-left:auto;text-align:right}
.deep a .ar{color:var(--red);font-family:var(--mono)}
@media(max-width:560px){.deep a .dd{display:none}}
/* footer */
footer{padding:52px 0 60px;border-top:1px solid var(--line);color:var(--ink-2)}
footer .fmark{display:flex;align-items:center;gap:9px;font-family:var(--mono);
font-size:13px;letter-spacing:.06em;font-weight:600;color:var(--ink)}
footer .fmark .gloss{color:var(--ink-3);font-weight:400;letter-spacing:.02em}
footer .fline{margin-top:12px;font-size:13px;max-width:56ch}
footer .fnav{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap;
font-family:var(--mono);font-size:12px}
footer .fnav a{color:var(--ink-2);text-decoration:none}
footer .fnav a:hover{color:var(--ink)}
footer .fine{margin-top:22px;font-size:12px;color:var(--ink-3);max-width:60ch;
font-family:var(--mono);line-height:1.7}
.cluster{margin-top:6px}
/* plain-language gloss under the H1 */
.gloss-line{margin-top:14px;font-size:clamp(14px,1.7vw,16px);color:var(--ink-2);
max-width:56ch;line-height:1.5}
/* OS/arch compatibility pill row */
.compat{margin:2px 0 2px}
.compat .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
font-size:12px;letter-spacing:.02em;color:var(--ink);background:var(--panel);
border:1px solid var(--line-2);border-radius:20px;padding:6px 13px}
.compat .pill::before{content:"";width:7px;height:7px;border-radius:50%;
background:#2f9e57;flex:0 0 7px}
.compat .cl{margin-top:10px;font-size:13px;color:var(--ink-2);max-width:60ch;line-height:1.55}
.compat .cn{margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.compat .cn code{color:var(--ink-2)}
/* read-before-sudo reassurance */
.reassure{margin-top:14px;font-size:13px;color:var(--ink-2);max-width:66ch;line-height:1.6}
.reassure code{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel);
border:1px solid var(--line);border-radius:5px;padding:1px 6px}
/* copy button on the hero terminal card */
.term-copy{border:1px solid rgba(255,255,255,.16);border-radius:6px;background:transparent;
color:#e8e8e3;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
text-transform:uppercase;padding:3px 10px;cursor:pointer}
.term-copy:hover{background:rgba(255,255,255,.08)}
.term-copy.done{color:#57c07a}
/* ============================================================================
SEMURG WEB KIT: shared additions (surface chrome + honest-status pages)
Everything above this line is extracted verbatim from one.semurg.io (the
canonical light/branded design). Below: the cross-surface nav active-state
and the components the "building/gated" surfaces use. Single source of truth.
========================================================================= */
/* cross-surface nav (header injected by semurg-kit.js) */
header.top .nav .brand{text-decoration:none;color:var(--ink)}
.nav .links{align-items:center}
.nav .links .grp{display:flex;gap:20px;align-items:center}
.nav .links .sep{width:1px;height:14px;background:var(--line-2);align-self:center;flex:0 0 1px}
.nav .links a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:2px}
/* the three building surfaces render once, muted, in a single "Soon" cluster */
.nav .links .grp.soon{gap:16px;opacity:.7}
.nav .links .grp.soon a{color:var(--ink-3)}
.nav .links .grp.soon a:hover{color:var(--ink-2)}
.nav .links .grp.soon .soon-lead{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px}
@media(max-width:720px){
header.top .nav{height:auto;min-height:56px;flex-wrap:wrap;padding:9px 0;gap:12px 18px}
.nav .links{margin-left:auto;flex-wrap:wrap;gap:11px 16px}
.nav .links .grp{gap:11px 16px;flex-wrap:wrap}
}
/* honest-status surface pages (intelligence / ontology / agents / cluster) */
main.surface{max-width:800px;margin:0 auto;padding:54px 24px 12px}
.surface .eyebrow{margin-bottom:15px}
.surface h1{margin-bottom:14px}
.surface .lead{margin:16px 0}
.surface .lead a{color:var(--red);text-decoration:none}
.surface .lead a:hover{text-decoration:underline}
.status{display:inline-flex;align-items:center;gap:9px;margin:6px 0 22px;
font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-2);background:var(--panel);border:1px solid var(--line-2);
border-radius:20px;padding:6px 13px}
.status .pulse{background:var(--red);flex:0 0 8px}
.card{border:1px solid var(--line);border-radius:11px;padding:19px 21px;
background:var(--panel);margin:24px 0}
.card h3{margin-bottom:13px}
.rel{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rel li{display:flex;gap:12px;align-items:flex-start;font-size:14px;
color:var(--ink-2);line-height:1.5}
.rel .m{flex:0 0 auto;font-family:var(--mono);font-size:12px;margin-top:1px;min-width:14px}
.rel .st-done .m{color:#2f9e57}
.rel .st-wip .m{color:var(--red)}
.rel .st-queued .m{color:var(--ink-3)}
.rel b{color:var(--ink);font-weight:580}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
@media(max-width:720px){.kv{grid-template-columns:1fr}}
.kv div{border:1px solid var(--line);border-radius:9px;padding:15px 16px;
font-size:13.5px;color:var(--ink-2);line-height:1.55}
.kv b{color:var(--ink);font-weight:580;display:block;margin-bottom:5px}
.planned-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 9px}
.planned-tag::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--ink-3);flex:0 0 7px}
.gate-note{margin-top:26px;padding:15px 17px;border-left:2px solid var(--red);
background:var(--panel);border-radius:0 8px 8px 0;font-family:var(--mono);
font-size:12.5px;color:var(--ink-2);line-height:1.7}
/* ============================================================================
SEMURG WEB KIT: POLISH LAYER (2026-08-19)
A product-grade refinement pass over the canonical design: type rhythm,
depth, micro-interaction, accessible focus, crisper diagram + status. Pure
restyle, NO markup or class changes, so every surface inherits it from
this one file. Values elevate, they do not redesign; all originals stand.
========================================================================= */
/* extra design tokens: depth, motion, focus, accent tint */
:root{
--radius:10px; --radius-lg:14px;
--shadow-sm:0 1px 2px rgba(20,20,20,.045), 0 1px 3px rgba(20,20,20,.06);
--shadow-md:0 4px 16px rgba(20,20,20,.07), 0 2px 6px rgba(20,20,20,.05);
--ring:color-mix(in srgb, var(--red) 55%, transparent);
--tint:color-mix(in srgb, var(--red) 6%, transparent);
--ease:cubic-bezier(.2,.6,.2,1);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--shadow-sm:0 1px 2px rgba(0,0,0,.42);
--shadow-md:0 8px 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
--tint:color-mix(in srgb, var(--red) 13%, transparent);
}
}
:root[data-theme="dark"]{
--shadow-sm:0 1px 2px rgba(0,0,0,.42);
--shadow-md:0 8px 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
--tint:color-mix(in srgb, var(--red) 13%, transparent);
}
/* smooth anchored scroll clearing the sticky header + refined text rendering */
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-feature-settings:"kern" 1,"liga" 1}
::selection{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--ink)}
/* type: tighter hierarchy + balanced wrapping */
h1,h2{text-wrap:balance}
h1{letter-spacing:-.022em;line-height:1.04}
h2{letter-spacing:-.018em;line-height:1.12}
.lead{text-wrap:pretty;line-height:1.6}
/* accessible focus ring on every interactive element */
a:focus-visible,button:focus-visible,.btn:focus-visible,.chip:focus-visible,.copy:focus-visible{
outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
/* nav: smooth transitions */
header.top{transition:box-shadow .2s var(--ease)}
.nav .links a{transition:color .15s var(--ease)}
/* buttons: subtle depth + motion */
.btn{transition:transform .12s var(--ease),box-shadow .18s var(--ease),
background .18s var(--ease),border-color .18s var(--ease),filter .18s var(--ease)}
.btn.primary{box-shadow:0 1px 3px color-mix(in srgb,var(--red) 42%,transparent),
0 8px 28px color-mix(in srgb,var(--red) 28%,transparent)}
.btn.primary:hover{transform:translateY(-1px);
box-shadow:0 2px 4px color-mix(in srgb,var(--red) 34%,transparent),
0 10px 26px color-mix(in srgb,var(--red) 22%,transparent)}
.btn:active{transform:translateY(0)}
.btn.ghost:hover{background:var(--tint);
border-color:color-mix(in srgb,var(--red) 40%,var(--line-2))}
/* cards: soft depth + interactive lift */
.card,.tile,.pcard{box-shadow:var(--shadow-sm);
transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.card{border-radius:var(--radius-lg)}
.tile:hover,.pcard:hover{box-shadow:var(--shadow-md);border-color:var(--line-2);transform:translateY(-2px)}
.sov div,.kv div,.why div,.honest-grid div{
transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.sov div:hover,.kv div:hover,.why div:hover,.honest-grid div:hover{
border-color:var(--line-2);box-shadow:var(--shadow-sm)}
/* metric numbers: tabular figures line up */
.tile .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
table.board-tbl td.n{font-variant-numeric:tabular-nums}
/* faces list: gentle name highlight on hover (layout-safe) */
.face{transition:background .15s var(--ease)}
.face .fn{transition:color .15s var(--ease)}
.face:hover .fn{color:var(--red)}
/* terminal + command cards: a touch more depth */
.term{box-shadow:var(--shadow-md)}
.cmd{transition:border-color .18s var(--ease)}
.cmd:hover,.cmd:focus-within{border-color:var(--line-2)}
/* collapse / node diagram: crisper strokes + a lift under the hexagon */
.diagram{overflow:visible}
.dg-box{stroke-width:1.25}
.dg-hex{filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--red) 32%,transparent))}
/* honest-status: status pill depth */
.status{box-shadow:var(--shadow-sm)}
/* deep-link rows: full-bleed hover + arrow slide (within .wrap padding) */
.deep a{transition:background .15s var(--ease);border-radius:8px;
margin:0 -12px;padding-left:12px;padding-right:12px}
.deep a:hover{background:var(--panel)}
.deep a .ar{transition:transform .18s var(--ease)}
.deep a:hover .ar{transform:translateX(3px)}
/* compat pill depth */
.compat .pill{box-shadow:var(--shadow-sm)}
/* tighter section rhythm on small screens */
@media(max-width:560px){section{padding:54px 0}}
/* ============================================================================
SEMURG WEB KIT: HONESTY TAGS + NORTH-STAR + YES-LADDER (2026-08-20)
Shared components for the vision content: the honesty legend (LIVE / BUILDING
/ ROADMAP / WE CONCEDE), inline status tags on use-case cards, the north-star
band, and the yes-ladder rungs. Token-based, additive; every surface inherits.
========================================================================= */
/* inline honesty tag chip */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
padding:2px 7px;border-radius:5px;border:1px solid var(--line-2);
color:var(--ink-3);white-space:nowrap;vertical-align:middle}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:0 0 6px}
.tag.live{color:#2f9e57;border-color:color-mix(in srgb,#2f9e57 45%,var(--line-2))}
.tag.live::before{background:#2f9e57}
.tag.building{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line-2))}
.tag.building::before{background:var(--red)}
.tag.roadmap{color:var(--ink-3);border-style:dashed}
.tag.roadmap::before{background:var(--ink-3)}
.tag.concede{color:var(--ink-2);border-color:var(--line-2)}
.tag.concede::before{background:var(--ink-2);border-radius:1px}
/* honesty legend row (small, near the top of a page) */
.honesty-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;
font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:1.5}
.honesty-legend span{display:flex;align-items:center;gap:8px}
.honesty-legend b{color:var(--ink-2);font-weight:500}
/* north-star band: the headline + close framing */
.ns{border-left:2px solid var(--red);background:var(--tint);border-radius:0 10px 10px 0;
padding:20px 22px;margin-top:26px}
.ns .nsline{font-size:clamp(17px,2.2vw,22px);font-weight:600;color:var(--ink);
line-height:1.3;letter-spacing:-.01em;max-width:40ch}
.ns p{margin-top:14px;color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:70ch}
.ns .nshonest{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
line-height:1.7;max-width:74ch}
/* yes-ladder rungs: a numbered climb of recognitions */
.ladder{counter-reset:rung;margin-top:30px;display:grid;gap:14px}
.rung{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
padding:16px 18px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
box-shadow:var(--shadow-sm);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.rung:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}
.rung .rn{counter-increment:rung;font-family:var(--mono);font-size:12px;color:var(--red);
border:1px solid var(--line-2);border-radius:50%;width:26px;height:26px;flex:0 0 26px;
display:flex;align-items:center;justify-content:center}
.rung .rn::before{content:counter(rung)}
.rung .rt{font-weight:580;color:var(--ink);font-size:15px;line-height:1.35}
.rung .rb{margin-top:6px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.rung .rmeta{margin-top:9px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* use-case cards with an honesty tag in the header */
.uc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
@media(max-width:760px){.uc{grid-template-columns:1fr}}
.uc .ucard{border:1px solid var(--line);border-radius:11px;padding:16px 18px;background:var(--panel);
box-shadow:var(--shadow-sm);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.uc .ucard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.uc .uch{display:flex;align-items:center;gap:10px;justify-content:space-between}
.uc .uch b{color:var(--ink);font-weight:600;font-size:14.5px}
.uc .ucd{margin-top:8px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.uc .ucr{margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* ============================================================================
SEMURG WEB KIT: SINGLE-COLUMN RHYTHM + FEATURE DIAGRAMS (2026-08-21)
Founder layout direction: one centered scrollable column site-wide, with the
diagrams promoted to large, full-column heroes rather than sidebar art. These
classes give a diagram its own centered band and a caption. The diagrams are
concept-level only (value / what / why); they never depict internal mechanism.
========================================================================= */
/* the flagship hero is now one stacked column (no text-left / diagram-right split) */
/* Narrow + mid screens: stack, so the copy never competes with the diagram for width. */
.hero-stack{display:block}
.hero-stack > .hero-copy{max-width:64ch}
/* Wide screens: put the diagram BESIDE the copy, which is what the two children were always for.
Stacked, the diagram sat below the fold and the right half of the hero was empty. minmax(0,..)
on both tracks keeps the C4 mobile fix intact — a pre/terminal child cannot pin a track open. */
@media(min-width:1180px){
.hero-stack{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:54px;align-items:start}
.hero-stack > .hero-copy{max-width:none}
}
/* install band: full-width below the hero, two columns (one-command | verify-by-hand) so the
terminal + platform notes use the whole width instead of stacking in the narrow copy column
with the right half of the page left empty. */
.install-band{margin-top:40px;display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:1180px){
.install-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
}
.install-band .install-quick{min-width:0}
.install-band .install-verify{min-width:0}
.install-band .term{margin-top:0}
.install-band .cmd.big{margin-top:16px}
/* a diagram promoted to a centered feature, full column width, generous size */
.diagram-feature{margin:30px auto 0;max-width:760px;text-align:center}
.diagram-feature.wide{max-width:920px}
.diagram-feature .diagram{width:100%;height:auto}
.diagram-cap{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
color:var(--ink-3);line-height:1.6;max-width:60ch;margin-left:auto;margin-right:auto}
/* a diagram that anchors a whole section, on a soft panel so it reads as the hero */
.diagram-band{margin-top:26px;padding:26px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);
background:var(--panel);box-shadow:var(--shadow-sm)}
.diagram-band .diagram-cap{margin-top:16px}
/* shared diagram vocabulary for the concept diagrams (outcome-level, moat-safe) */
.dg-title{fill:var(--ink);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em}
.dg-lbl{fill:var(--ink-2);font-family:var(--mono);font-size:9px}
.dg-lbl-sm{fill:var(--ink-3);font-family:var(--mono);font-size:7.5px}
.dg-node{fill:var(--panel);stroke:var(--line-2);stroke-width:1.3}
.dg-good{stroke:#2f9e57;fill:none;stroke-width:1.6}
.dg-good-t{fill:#2f9e57;font-family:var(--mono);font-size:9px;font-weight:600}
.dg-stop{stroke:var(--line-2);fill:none;stroke-width:1.4;stroke-dasharray:4 3}
.dg-stop-t{fill:var(--ink-3);font-family:var(--mono);font-size:9px}
.dg-flow{stroke:var(--ink-3);stroke-width:1.4;fill:none}
.dg-flow.accent{stroke:var(--red)}
.dg-shield{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:6 4}
.dg-x{stroke:var(--red);stroke-width:1.8}