/* Every prose page on the site — About and the blog — loads this one file. It shares CoinSpectrum's tokens exactly — same ground, same acid, same scale — so arriving here from the app feels like the same publication rather than a marketing annexe. What changes is the measure: the app is a table you scan, this is prose you read, so the text is larger, the line longer, and the column narrower than the app's 1040px. It lives at the SITE ROOT, not inside about/, because the blog needs it too and neither section should own the other's stylesheet. Every page that loads it sits exactly one directory down and asks for `../prose.css` — see the depth note in sia-sync.sh for why a page's depth is a fixed thing here rather than whatever the URL happens to look like. */ /* One header, one import. Every page that loads style.css picks up the shared appbar styles too — a page's HTML never has to name header.css. header.js does the same for the DOM shell. Site-absolute URL so the depth of the requesting page doesn't matter. */ @import url("/header.css"); :root{ --bg:#0a0d14; --surface:#121724; --surface2:#0f1420; --line:rgba(255,255,255,.08); --ink:#e7eaf1; --mut:#8b93a7; --dim:#768096; --acid:#d6ff3d; --pow:#d8a657; --pos:#4fd1a5; --bft:#5b9df0; --dag:#b39ddb; --pospace:#9ccc65; --hybrid:#ff8a65; --federated:#e47fb0; --other:#9aa0ad; color-scheme:dark; } /* Light theme — three skins the reader picks in profile settings on the ranking (cs.skin). A = ivory & warm grey (default), B = beige & sepia, C = papyrus. Prose pages inherit the choice via the same boot script (see per-template in pages.mjs). */ :root[data-theme="light"]{ --bg:#EFE7D5; --surface:#FBF3D9; --surface2:#E4D9B5; --line:rgba(60,45,30,.24); --ink:#1A1614; --mut:#4A3F35; --dim:#7A6E60; --acid:#0AC18E; --pow:#a15a10; --pos:#1a8564; --bft:#1e5aa0; --dag:#6b4bb0; --pospace:#4c8b1e; --hybrid:#c8451f; --federated:#b0306a; --other:#5d6270; --card-shadow:0 1px 3px rgba(60,45,30,.08), 0 8px 24px rgba(60,45,30,.07); color-scheme:light; } :root[data-theme="light"][data-skin="b"]{ --bg:#EAE0C4; --surface:#F9EEC8; --surface2:#E1D5A9; --line:rgba(50,40,25,.26); --ink:#22201C; --mut:#4E4536; --dim:#7A7062; --card-shadow:0 1px 3px rgba(50,40,25,.10), 0 8px 24px rgba(50,40,25,.08); } :root[data-theme="light"][data-skin="c"]{ --bg:#E5DAB5; --surface:#F8ECC0; --surface2:#DDCE97; --line:rgba(60,45,20,.28); --ink:#23201A; --mut:#4C4432; --dim:#7A6E52; --card-shadow:0 1px 3px rgba(60,45,20,.11), 0 8px 24px rgba(60,45,20,.08); } /* Ubuntu — the BCH-brand typeface (bitcoincash.org/graphics/). Self-hosted from /brand/fonts/ so no third-party host is contacted at runtime. Latin subset only; unicode-range keeps the woff2 declarations honest for other subsets. */ @font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap; src:url(/brand/fonts/Ubuntu-Regular.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap; src:url(/brand/fonts/Ubuntu-Bold.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Ubuntu';font-style:italic;font-weight:400;font-display:swap; src:url(/brand/fonts/Ubuntu-Italic.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Ubuntu';font-style:italic;font-weight:700;font-display:swap; src:url(/brand/fonts/Ubuntu-BoldItalic.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} *{box-sizing:border-box} /* The shared header's ::before pseudo-element renders a full-viewport tinted stripe using width:100vw + a translate that centres on the appbar. On sidebar pages the appbar is shifted right by the 220px sidebar, so the stripe's right edge lands past the viewport edge and triggers a horizontal scrollbar. `overflow-x:clip` prevents the scrollbar without breaking sticky positioning (as `overflow:hidden` would). */ html,body{overflow-x:clip} body{ margin:0;background:var(--bg);color:var(--ink); font:15px/1.65 'Ubuntu',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:720px;margin:0 auto;padding:28px 22px 72px} a{color:var(--acid);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible,button:focus-visible{outline:2px solid var(--acid);outline-offset:2px;border-radius:4px} /* header: the wordmark is the way back to the app, which is where most readers came from */ /* Legacy per-page header — pages.mjs still emits a "
" with a * duplicate brand wordmark and a "back" link. On sidebar pages the sidebar already * carries the brand and the top-nav carries the navigation, so the old block is * pure visual duplication. Hide it when the sidebar is present; keep it visible * on pages that opted out of the sidebar (if any survive). */ body:has(.cs-sidebar) .head{display:none} .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:14px;border-bottom:1px solid var(--line)} .brand{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .brand:hover{text-decoration:none} .brand .dot{color:var(--acid)} .back{font-size:13px;color:var(--mut)} .back:hover{color:var(--acid);text-decoration:none} nav.pages{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 30px} nav.pages a{font-size:13px;color:var(--mut);border:1px solid var(--line);background:var(--surface2); padding:7px 13px;border-radius:10px} nav.pages a:hover{color:var(--ink);text-decoration:none} nav.pages a.on{color:var(--bg);background:var(--acid);border-color:var(--acid);font-weight:600} h1{font-size:26px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance} .lede{color:var(--mut);font-size:16px;margin:0 0 28px} h2{font-size:17px;font-weight:600;margin:34px 0 10px;letter-spacing:-.01em} h3{font-size:15px;font-weight:600;margin:22px 0 6px;color:var(--ink)} p{margin:0 0 14px} /* Prose stops at a readable measure. The column is 720px because the TABLES need it, but a paragraph running that full width reads at ~96 characters a line — past the point where the eye starts losing its place on the return sweep. Tables and nav keep the full width. */ p,ul,.lede,.pull,.note{max-width:62ch} ul{margin:0 0 14px;padding-left:20px} li{margin:0 0 6px} strong{color:var(--ink);font-weight:600} .dim{color:var(--dim)} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--mut); background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:1px 5px} /* a claim worth stopping on */ .pull{border-left:2px solid var(--acid);padding:2px 0 2px 16px;margin:22px 0;color:var(--ink);font-size:16px} /* tables carry the source lists; they scroll inside themselves, never the page */ .tw{overflow-x:auto;margin:0 0 18px} table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim); font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)} td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} td:first-child{color:var(--ink);white-space:nowrap} /* Every table on the site uses class="r" to mark a numeric column that * right-aligns its data. Without the matching th.r rule, wide columns * show a big horizontal gap between the header label and the values * below it — the drift the reader sees as "the headers don't line up". */ th.r,td.r{text-align:right} /* Refresh-cadence column on the market-data source table: "every 6 h" is a * compound unit that must not wrap across lines. Scoped to .tw so tables in * other contexts (asset detail, tokens list) keep their own wrapping. */ .tw td:last-child:not(:first-child){white-space:nowrap} tbody tr:hover td{background:var(--surface2)} .note{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:22px 0} /* Q&A blocks — same shape on every page that carries one. Native
* so the browser handles state, no JS to break; the acid + / – marker mirrors * the site's other lightweight accents. */ .faq{margin:8px 0 24px} .faq details{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:8px 0;background:var(--surface)} .faq summary{font-weight:600;color:var(--ink);cursor:pointer;list-style:none;font-size:15px} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";display:inline-block;margin-right:10px;color:var(--acid);font-weight:400;width:0.7em} .faq details[open] summary::before{content:"–"} .faq p{margin:10px 0 0;color:var(--ink);opacity:.86;font-size:15px;line-height:1.6} /* Section navigation on the FAQ page, visible for the whole read. Narrow screens: one row of * chips that sticks under the header and scrolls sideways. From 1180px: a rail beside a * narrower answer column, sticky under the header. --cs-hdr is the header's height (header.js). * The link of the section in view is marked .on by the page's scroll-spy. */ .faq-toc{position:sticky;top:var(--cs-hdr,64px);z-index:4;margin:6px -22px 24px;padding:8px 22px; background:var(--bg);border-bottom:1px solid var(--line)} .faq-toc-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .faq-toc-links::-webkit-scrollbar{display:none} .faq-toc.can-r .faq-toc-links{ -webkit-mask-image:linear-gradient(to left,transparent 0,#000 36px); mask-image:linear-gradient(to left,transparent 0,#000 36px)} .faq-toc.can-l .faq-toc-links{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px); mask-image:linear-gradient(to right,transparent 0,#000 36px)} .faq-toc.can-l.can-r .faq-toc-links{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%)} .faq-toc-label{display:none} .faq-toc a{flex:none;font-size:13px;padding:5px 11px;border:1px solid var(--line);border-radius:999px; text-decoration:none;color:var(--ink);background:var(--surface);white-space:nowrap} .faq-toc a:hover{border-color:var(--acid);color:var(--acid);text-decoration:none} .faq-toc a.on{border-color:var(--acid);color:var(--acid);font-weight:600} .faq-main h2[id],.faq details[id]{scroll-margin-top:calc(var(--cs-hdr,64px) + 64px)} @media (max-width:620px){.faq-toc{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}} @media (min-width:1180px){ .faq-layout{display:grid;grid-template-columns:minmax(0,700px) 210px;gap:0 56px} .faq-main{grid-column:1;grid-row:1;min-width:0} .faq-toc{grid-column:2;grid-row:1;align-self:start;top:calc(var(--cs-hdr,64px) + 24px); margin:6px 0 0;padding:0 0 0 16px;background:none;border-bottom:0;border-left:1px solid var(--line)} .faq-toc-links{flex-direction:column;gap:2px;overflow:visible; -webkit-mask-image:none !important;mask-image:none !important} .faq-toc-label{display:block;font:600 10px/1 ui-monospace,monospace;letter-spacing:.08em; text-transform:uppercase;color:var(--dim);margin:2px 0 10px} .faq-toc a{border:0;background:none;border-radius:6px;padding:6px 10px;margin-left:-10px; color:var(--mut);white-space:normal} .faq-toc a:hover{background:var(--surface);color:var(--ink)} .faq-toc a.on{color:var(--acid);background:none} .faq details{padding:11px 16px} .faq p{max-width:66ch} .faq-main h2[id],.faq details[id]{scroll-margin-top:calc(var(--cs-hdr,64px) + 20px)} } .note p:last-child{margin:0} .note .h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:6px} /* .project — a project-authored (or editor-authored) statement on an asset page. Framed and left-lined so the reader can tell instantly it is not part of the site's own analysis. */ .project{border-left:2px solid var(--acid);background:var(--surface2);border-radius:0 12px 12px 0; padding:14px 18px;margin:28px 0} .project .ph{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:8px} .project p:last-child{margin:0} /* .discuss — a small band pointing readers to the specific X/Reddit thread where a post is being discussed. Kept quiet and above the footer so it reads as "join the conversation" not "give us traffic". No comments system on the site itself; discussion happens where crypto discussion happens. Renders nothing unless the block has at least one live link. */ .discuss{margin:32px 0 10px;padding:12px 0;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:baseline;gap:14px} .discuss .h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)} .discuss a{font-size:13px} footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px; display:flex;gap:18px;flex-wrap:wrap} footer a{color:var(--mut)} /* ---- blog ---------------------------------------------------------------- The index is a list of arguments, not a grid of cards: each entry is a claim you can read in full without clicking, so the list itself is worth reading. */ .postlist{list-style:none;margin:0;padding:0;max-width:none} .postlist li{margin:0;padding:22px 0 20px;border-bottom:1px solid var(--line);position:relative} .postlist li:first-child{padding-top:6px} /* Acid green vertical bar accent on hover — a small reveal so the row feels active */ .postlist li::before{ content:'';position:absolute;left:-14px;top:22px;bottom:20px;width:3px; background:var(--acid);border-radius:2px;opacity:0;transition:opacity .18s ease; } .postlist li:hover::before{opacity:1} .postlist h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em;line-height:1.3} .postlist h3 a{ color:var(--ink);text-decoration:none; background-image:linear-gradient(var(--acid),var(--acid)); background-position:0 100%;background-repeat:no-repeat; background-size:0% 2px;transition:background-size .2s ease,color .18s ease; padding-bottom:2px; } .postlist h3 a:hover{color:var(--acid);text-decoration:none;background-size:100% 2px} .postlist p{margin:6px 0 0;color:var(--mut);max-width:62ch;line-height:1.6} .postlist .pmeta{color:var(--dim);font:600 11px/1 ui-monospace,monospace; letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;gap:14px} .postlist .pmeta time{color:var(--mut)} .postlist .pmeta span{color:var(--dim)} /* Date and read-time sit above the title, small and dim — a reader scanning for the argument should hit the argument first. */ .pmeta{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim); margin:0 0 6px;display:flex;gap:10px;flex-wrap:wrap} .pmeta time{font-variant-numeric:tabular-nums} /* A post's own header block: same metadata, sitting under the h1's lede. */ .posthead{margin:0 0 26px} .posthead .pmeta{margin:0 0 10px} /* Figures are stamped with the build they came from, because they drift with every 6-hourly rebuild and an unstamped number quietly becomes a false one. */ .asof{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px; margin:26px 0 0;max-width:62ch} /* The number that IS the argument, set big enough to be read on its own. */ .fig{display:flex;gap:26px;flex-wrap:wrap;margin:20px 0;padding:14px 16px; background:var(--surface);border:1px solid var(--line);border-radius:14px} .fig div{min-width:0} .fig .n{font-size:21px;font-weight:600;color:var(--acid);letter-spacing:-.02em; font-variant-numeric:tabular-nums;line-height:1.2} .fig .l{font-size:12px;color:var(--mut);margin-top:2px} /* Where a post ends and the next one is offered. */ .nextup{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--line)} .nextup .h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim); margin-bottom:6px} @media (max-width:620px){ .fig{gap:18px;padding:12px 14px} .fig .n{font-size:19px} .postlist h3{font-size:16px} } @media (max-width:620px){ .wrap{padding:22px 16px 56px} h1{font-size:22px} body{font-size:14.5px} } /* ── Standalone-page shell: left sidebar (desktop) + drawer (mobile) ────────────────────── Applies to blog posts, journal posts, /consensus/, /purpose/, /ledger/, /assets/, /tokens/, /about/, /manifesto/, /wallets/, /faucet/ — every page that carries