/* ShiftLefter — Direction C "Argument". Editorial: Charter body, grotesque headings, ink + burnt orange, hairline rules, numbered notes. */ :root { --paper:#f4f0e6; --ink:#211e17; --soft:#6e6857; --accent:#c25317; --logo-up:#d9a326; --logo-left:#3d5a3c; --rule-h:#211e17; --rule:#d9d3c3; --code-bg:#ebe6d7; --code-ink:#37331f; --card:#f9f5ea; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; } /* Three-state theme (sl-cvow): the system preference is the default; the * nav toggle stores an override as data-theme on (applied before * first paint by the head snippet in _layouts/default.html). The dark * token block appears twice on purpose — once behind the media query, * guarded so an explicit light override wins, and once for the explicit * dark override — so the toggle beats the system in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#191712; --ink:#e9e3d3; --soft:#a29a85; --accent:#e07d40; --logo-up:#e3b23c; --logo-left:#5c7d58; --rule-h:#e9e3d3; --rule:#37332a; --code-bg:#23201a; --code-ink:#d5cdb8; --card:#1f1c16; } } :root[data-theme="dark"] { --paper:#191712; --ink:#e9e3d3; --soft:#a29a85; --accent:#e07d40; --logo-up:#e3b23c; --logo-left:#5c7d58; --rule-h:#e9e3d3; --rule:#37332a; --code-bg:#23201a; --code-ink:#d5cdb8; --card:#1f1c16; } :root[data-theme="light"] { color-scheme:light; } :root[data-theme="dark"] { color-scheme:dark; } /* CONTRACT (sl-5dhn, carried through sl-8yfe): the --sl-* custom property * NAMES below are load-bearing — the map one-pager SVG (sl-zwjz) inherits * them by NAME so it themes itself inline. They alias the Argument-theme * tokens above (var() resolves at use time, so dark mode flows through). * Rename nothing without checking sl-zwjz. */ :root { --sl-bg:var(--paper); --sl-fg:var(--ink); --sl-muted:var(--soft); --sl-accent:var(--accent); --sl-rule:var(--rule); } * { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.42 Charter,"Bitstream Charter",Georgia,serif; text-wrap:pretty; } a { color:var(--accent); } a:hover { color:var(--ink); } .site-nav { max-width:72rem; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; gap:1.4rem; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--rule-h); } .site-nav a { color:var(--ink); text-decoration:none; } .site-nav a:hover { color:var(--accent); } .brand { display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.14em; } .mark { width:2.1rem; height:.97rem; } .mark polygon, .hero-mark polygon { stroke:var(--ink); stroke-width:3; } .m-up { fill:var(--logo-up); } .m-left { fill:var(--logo-left); } .site-nav > a:not(.brand) { margin-left:auto; } .nav-links { margin-left:auto; display:flex; gap:1.4rem; flex-wrap:wrap; } /* Theme toggle (sl-cvow): top-right, nav-adjacent icon button — the * pattern readers already know from GitHub, MDN, and every docs site. */ .theme-toggle { appearance:none; background:none; border:1px solid var(--rule); border-radius:999px; color:var(--ink); width:2rem; height:2rem; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; } .theme-toggle:hover { border-color:var(--accent); color:var(--accent); } .theme-toggle .sun, .theme-toggle .moon { display:none; } .theme-toggle .moon { display:inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .moon { display:none; } :root:not([data-theme="light"]) .theme-toggle .sun { display:inline; } } :root[data-theme="dark"] .theme-toggle .moon { display:none; } :root[data-theme="dark"] .theme-toggle .sun { display:inline; } .kicker { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem; } h1 { font-family:var(--sans); font-size:2.6rem; line-height:1.06; font-weight:800; letter-spacing:-.02em; margin:0 0 .8rem; } h2 { font-family:var(--sans); font-size:1.2rem; font-weight:800; letter-spacing:-.01em; margin:2.4rem 0 .9rem; display:flex; align-items:center; gap:.55rem; } h2::before { content:""; width:0; height:0; border-block:.3em solid transparent; border-right:.55em solid var(--accent); } .essay { max-width:45rem; margin:0 auto; padding:2.6rem 1.5rem 4rem; counter-reset:note; } .essay p { margin:0 0 .95rem; } .essay ul { margin:0 0 .95rem; padding-left:1.3rem; } .essay li { margin:0 0 .4rem; } .byline { font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin:0 0 1.5rem; } .standfirst { font-style:italic; font-size:1.16rem; line-height:1.4; border-top:2px solid var(--rule-h); padding-top:1.1rem; margin:0 0 2rem; } .note { display:block; margin:1.1rem 0; padding:.55rem 0; font-size:.84rem; line-height:1.4; color:var(--soft); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .note::before { counter-increment:note; content:counter(note); font-family:var(--sans); font-weight:800; font-size:.72rem; color:var(--accent); margin-right:.45em; } @media (min-width:76rem) { .essay { max-width:66rem; padding-right:21.5rem; } .note { float:right; clear:right; width:17rem; margin:.2rem -21.5rem .8rem 0; padding:.35rem 0 0; font-size:.8rem; border-bottom:none; border-top:1px solid var(--rule-h); } } .essay-footer { margin-top:3rem; padding-top:1.1rem; border-top:2px solid var(--rule-h); display:flex; gap:1.6rem; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } /* Docs section (sl-xzom): synced markdown — tables, deeper headings, and * mermaid diagrams baked as light/dark SVG pairs at sync time (no client * mermaid.js). The pair is switched by the same three-state theme rule the * toggle uses: system preference unless data-theme overrides it. */ .doc h3 { font-family:var(--sans); font-size:1rem; font-weight:800; margin:1.8rem 0 .6rem; } .doc h4 { font-family:var(--sans); font-size:.9rem; font-weight:700; margin:1.4rem 0 .5rem; } .doc ol { margin:0 0 .95rem; padding-left:1.4rem; } .doc blockquote { margin:0 0 .95rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--accent); color:var(--soft); } .doc hr { border:0; border-top:1px solid var(--rule); margin:2rem 0; } .doc table { border-collapse:collapse; width:100%; font-size:.86rem; margin:0 0 1.2rem; display:block; overflow-x:auto; } .doc th, .doc td { border-bottom:1px solid var(--rule); padding:.4rem .6rem; text-align:left; vertical-align:top; } .doc th { font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:2px solid var(--rule-h); } .doc .byline a { color:inherit; } .doc .kicker a { color:inherit; text-decoration:none; } .docs-index ul { list-style:none; padding:0; margin:0 0 1.5rem; } .docs-index li { margin:0 0 .9rem; } .docs-index li > a { font-family:var(--sans); font-weight:700; } .docs-index li span { display:block; color:var(--soft); font-size:.92rem; } @media (min-width:76rem) { .essay.doc { max-width:58rem; padding-right:1.5rem; } } .diagram { margin:1.4rem 0; } .diagram img { max-width:100%; height:auto; margin:0 auto; } .diagram img.diagram-light { display:block; } .diagram img.diagram-dark { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .diagram img.diagram-light { display:none; } :root:not([data-theme="light"]) .diagram img.diagram-dark { display:block; } } :root[data-theme="dark"] .diagram img.diagram-light { display:none; } :root[data-theme="dark"] .diagram img.diagram-dark { display:block; } pre { background:var(--code-bg); color:var(--code-ink); border-top:2px solid var(--rule-h); border-bottom:1px solid var(--rule); padding:.9rem 1.1rem; overflow-x:auto; font-size:.79rem; line-height:1.5; font-family:var(--mono); } code { font-family:var(--mono); font-size:.84em; background:var(--code-bg); padding:.08em .3em; } pre code { background:none; padding:0; font-size:1em; } .c-err { color:var(--accent); font-weight:700; } .c-hint { color:var(--soft); font-style:italic; } .c-com { color:var(--soft); } .writing { max-width:45rem; margin:0 auto; padding:2.6rem 1.5rem 4rem; } .writing-sub { font-style:italic; color:var(--soft); margin:0; } .essay-list { list-style:none; margin:2.2rem 0 0; padding:0; } .essay-item { border-top:2px solid var(--rule-h); padding:1.4rem 0 1.7rem; } .essay-item time { font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .essay-item h2 { margin:.45rem 0 .5rem; font-size:1.6rem; display:block; } .essay-item h2::before { content:none; } .essay-item h2 a { color:var(--ink); text-decoration:none; } .essay-item h2 a:hover { color:var(--accent); } .dek { font-style:italic; color:var(--soft); line-height:1.4; margin:0; } .writing-footer { border-top:2px solid var(--rule-h); margin-top:1rem; padding-top:1rem; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .home { max-width:72rem; margin:0 auto; padding:1rem 1.5rem 4rem; } .hero { max-width:64rem; margin:3.5rem auto; display:grid; grid-template-columns:15rem minmax(0,1fr); column-gap:3.5rem; } .hero > * { grid-column:2; } .hero-mark { grid-column:1; grid-row:1 / span 6; align-self:center; justify-self:start; width:100%; height:auto; } @media (max-width:56rem) { .hero { display:block; } .hero-mark { width:8rem; } } .hero h1 { font-size:3.4rem; margin:.7rem 0 .4rem; } .tagline { font-size:1.4rem; font-style:italic; margin:0 0 1.3rem; } .hero p { margin:0 0 1rem; } .credo { font-weight:700; } .release-line { font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); } .twin-cards { max-width:46rem; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; margin:0 auto 3rem; } .card { background:var(--card); border-top:2px solid var(--rule-h); border-bottom:1px solid var(--rule); padding:1.3rem 1.4rem; } .card h3 { margin:0 0 .7rem; font-family:var(--sans); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .card p { margin:0 0 .9rem; } .card img { width:100%; display:block; border:1px solid var(--rule); } .plain-terms { max-width:46rem; margin:0 auto 3rem; font-size:1.1rem; border-top:2px solid var(--rule-h); border-bottom:1px solid var(--rule); padding:1.1rem 0; } .does, .agents { max-width:46rem; margin:0 auto; } .does p, .agents p { margin:0 0 1rem; } .features { list-style:none; margin:0; padding:0; } .features > li { border-top:1px solid var(--rule); padding:1.1rem 0 .4rem; } .honestly { max-width:72rem; margin:0 auto; } .honestly h2 { max-width:46rem; margin-left:auto; margin-right:auto; } .cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; } @media (max-width:56rem) { .cols { grid-template-columns:1fr; } } .cols h3 { font-family:var(--sans); font-size:.85rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .8rem; } .cols ul { margin:0; padding-left:1.2rem; } .cols li { margin:0 0 .55rem; } .baton { max-width:46rem; margin:2rem auto 0; font-style:italic; color:var(--soft); border-top:1px solid var(--rule); padding-top:1rem; } .agents { margin-top:1rem; } .site-footer { max-width:46rem; margin:3rem auto 0; border-top:2px solid var(--rule-h); padding-top:1.4rem; } .footer-hello { margin:0 0 .8rem; font-style:italic; } .footer-links { display:flex; gap:1.6rem; flex-wrap:wrap; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0; } .colophon { color:var(--soft); font-size:.8rem; margin:2rem 0 0; }