/* ============================================================================ SageAgenda - site styles PALETTE PROVENANCE. These are not "retro-inspired" colors. They were sampled from a real screenshot of Lotus Agenda 2.0 running under DOSEMU2 (Tavis Ormandy, lock.cmpxchg8b.com/img/agenda-view.png) on 2026-09-06. Pixel counts over the 950x535 screen area: #C0C0C0 silver 79.5% the field #000080 navy 14.2% header bars, item text, the F-key strip #000000 black 0.8% #800000 maroon 0.6% the selection highlight #FFFFFF white 0.4% text on navy and on maroon These are the Windows-console values for the 16 text-mode colors, NOT the VGA DAC values (#AAAAAA/#0000AA/#AA0000) a 1990 monitor was actually fed. That is because the sampled screenshot came from DOSEMU2 in terminal mode, which renders text as terminal escapes, so the colors are the terminal's palette, not the video card's. Measured 2026-09-11 against DOSBox Staging, whose VGA emulation gives the DAC values: the screens under /screens/ use those, and they are the period-accurate ones. The site chrome keeps the console values as its brand palette - a design choice, not a measurement error - so the two sets deliberately differ. Re-sample before changing any of the four brand hexes. TYPOGRAPHY. Geist, Vercel's typeface, with a real system fallback stack. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); :root { /* --- Agenda, measured --- */ /* The four that are WIRED. #000000 was 0.8% of the sample and is deliberately not declared - the recreation puts navy where the original had black, so a token for it would be documentation with no referent. */ --agenda-navy: #000080; --agenda-silver: #c0c0c0; --agenda-maroon: #800000; --agenda-white: #ffffff; /* --- light surface --- */ --bg: #ffffff; --bg-subtle: #fafafa; --panel: #ffffff; --ink: #0a0a0a; --ink-2: #4b4b4b; --ink-3: #8f8f8f; --line: #ebebeb; --line-2: #d4d4d4; --accent: #000080; --accent-2: #1a1ab8; --hi: #800000; --ok-fg: #04643a; --ok-bg: #e9f7f0; --wm-fg: #7a5c00; --wm-bg: #fdf6e3; --nu-fg: #5c5c5c; --nu-bg: #f2f2f2; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --r: 8px; --maxw: 1100px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0a; --bg-subtle: #111111; --panel: #141414; --ink: #ededed; --ink-2: #a1a1a1; --ink-3: #707070; --line: #232323; --line-2: #343434; --accent: #7c7cff; --accent-2: #a0a0ff; --hi: #ff6b6b; --ok-fg: #4ade80; --ok-bg: #0c2718; --wm-fg: #fbbf24; --wm-bg: #2a2008; --nu-fg: #a1a1a1; --nu-bg: #1c1c1c; } } :root[data-theme="dark"] { --bg: #0a0a0a; --bg-subtle: #111111; --panel: #141414; --ink: #ededed; --ink-2: #a1a1a1; --ink-3: #707070; --line: #232323; --line-2: #343434; --accent: #7c7cff; --accent-2: #a0a0ff; --hi: #ff6b6b; --ok-fg: #4ade80; --ok-bg: #0c2718; --wm-fg: #fbbf24; --wm-bg: #2a2008; --nu-fg: #a1a1a1; --nu-bg: #1c1c1c; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; } a { color: inherit; text-decoration: none; } p a, li a, td a { color: var(--accent); } p a:hover, li a:hover, td a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- nav: clean sans, no letterspaced mono ---------- */ header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 30px; } .brand { font-weight: 600; font-size: 15.5px; letter-spacing: -.017em; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .brand .mk { width: 17px; height: 17px; border-radius: 3.5px; background: var(--agenda-navy); position: relative; flex: none; } .brand .mk::after { content: ""; position: absolute; inset: 4px 3.5px auto 3.5px; height: 2px; background: var(--agenda-white); box-shadow: 0 4px 0 var(--agenda-white), 0 8px 0 var(--agenda-silver); } .nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; } .nav-links a { font-size: 14px; font-weight: 400; color: var(--ink-2); padding: 6px 11px; border-radius: 6px; transition: color .12s, background .12s; /* Never break a label mid-phrase. Without this the bar appears to fit at widths where it is really folding "The idea" and "Join the waitlist" onto two lines each, which reads as broken and also hides the real overflow from any measurement of it. */ white-space: nowrap; } .nav-links a:hover { color: var(--ink); background: var(--bg-subtle); } .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; } .nav-links .cta { background: var(--ink); color: var(--bg); font-weight: 500; margin-left: 8px; } .nav-links .cta:hover { background: var(--ink); color: var(--bg); opacity: .85; } /* On /waitlist/ the CTA is also the current page, and `.nav-links a[aria-current="page"]` above scores (0,2,1) against `.nav-links .cta`'s (0,2,0) - so it wins on `color` and repaints the label to var(--ink) while the button's own `background: var(--ink)` stands. Label and background then resolve to the same token and the button reads as a solid block, in BOTH themes. Confirmed by rendering, not only by tracing the cascade. */ .nav-links .cta[aria-current="page"] { color: var(--bg); } /* The nav OVERFLOWED at phone widths, and had before this breakpoint existed. Measured at a 400px viewport: 698px of content, so Downloads, About, Progress and the CTA sat off the right edge with no way to reach them — `.nav-links` had neither `flex-wrap` nor `overflow-x`, so it was clipped rather than scrollable. It WRAPS rather than scrolling: nothing ends up hidden, it needs no JS, and it does not depend on a reader discovering that a bar scrolls sideways. `height` becomes `min-height` because a fixed 60px clips the second row instead of growing for it — wrapping alone would have looked like a fix and still hidden the links. Scoped to a media query so the desktop header is byte-identical: above this width the row never wraps, so none of it applies. 920, and the number is measured rather than guessed. The bar's true single-row width is 885px — brand 118 + 30 gap + 689 of labels + 48 padding — once `white-space: nowrap` stops the labels folding onto two lines each. The first attempt used 860, which LOOKED right because at 861 nothing was clipped; what was really happening is that "The idea" and "Join the waitlist" were each wrapping inside themselves, so the bar folded rather than fitted and left a 25px band that still overflowed. 920 clears 885 with room for one more nav item. */ @media (max-width: 920px) { .nav-in { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 4px; padding-top: 9px; padding-bottom: 9px; } .nav-links { flex-wrap: wrap; row-gap: 4px; } } /* ---------- type ---------- */ h1, h2, h3 { letter-spacing: -.032em; font-weight: 600; margin: 0; } h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; letter-spacing: -.042em; } h2 { font-size: clamp(25px, 3.2vw, 33px); line-height: 1.18; margin-bottom: 12px; } h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.02em; margin-bottom: 7px; } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); margin: 0 0 16px; letter-spacing: 0; } .lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ink-2); margin: 18px 0 0; } p { margin: 0 0 16px; } .muted { color: var(--ink-2); } .small { font-size: 13.5px; } code, kbd { font-family: var(--mono); font-size: .89em; } p code, li code, td code { background: var(--bg-subtle); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; } section { padding: 68px 0; border-top: 1px solid var(--line); } section:first-of-type { border-top: 0; } .sec-head { margin-bottom: 30px; } .sec-head p { color: var(--ink-2); max-width: 66ch; margin: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: opacity .12s, background .12s; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { opacity: .86; } .btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--panel); } .btn-ghost:hover { background: var(--bg-subtle); } .btn-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; } /* ---------- cards ---------- */ .grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; transition: border-color .12s; display: flex; flex-direction: column; } a.card:hover { border-color: var(--line-2); } .card h3 { margin-bottom: 6px; } .card p { color: var(--ink-2); font-size: 14px; margin: 0; } .card .go { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--accent); font-weight: 500; } /* ---------- the hero's jump-nav (any page with `subnav` in its front matter) ---------- This lived in the sources page's own