/* kc.css — the shared look for every public page (Sep 2026 redesign). * * Bold black-and-white type (Inter Tight), Instrument Serif italics for the * odd accent word, DM Mono for small labels, one red accent. ONE colour * scheme: white. There is no dark mode (Kevin, 25 Sep 2026: "no more dark * mode already. just 1 colour scheme") — pages carry data-theme="light" on * only because a couple of widgets still read it. * * The fixed chrome (name top-left, theme button, bottom pill menu, footer) is * NOT here — site.js injects it, with its own styles, so it can never be * missing on a page. This file is everything a page's own content uses. * * Fonts: every page loads * https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; } :root { --bg: #ffffff; /* pure white, like the jp.works reference Kevin picked */ --ink: #0b0b0b; --ink-2: #3b3a36; --dim: #8c8a83; --line: #e6e5e1; --face: #f6f6f4; /* cards sit a shade off the page so they still read as cards */ --face-2: #eeeeeb; --red: #ff3b1f; --red-ink:#d42a10; /* red for small text on light — the bright red is too thin there */ --mint: #1fbf8f; --lilac: #b9a3e3; --shadow: 0 40px 80px -30px rgba(0,0,0,0.35); --radius: 18px; } body { background: var(--bg); color: var(--ink); font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { display: block; max-width: 100%; } ::selection { background: var(--red); color: #fff; } .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; } .mono { font-family: 'DM Mono', ui-monospace, monospace; } .red { color: var(--red); } .dim { color: var(--dim); } /* ── layout ───────────────────────────────────────────────── */ .wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } .block { max-width: 1400px; margin: 0 auto; padding: 120px 24px; } .block.tight { padding-top: 64px; padding-bottom: 64px; } /* ── type ─────────────────────────────────────────────────── */ .label { font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 28px; display: flex; gap: 14px; align-items: center; } .label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; } .h-xl, .h-l, .h-m { font-weight: 900; text-transform: uppercase; letter-spacing: -0.055em; line-height: 0.88; color: var(--ink); } .h-xl { font-size: clamp(52px, 10vw, 168px); } .h-l { font-size: clamp(46px, 7.4vw, 120px); } .h-m { font-size: clamp(34px, 4.6vw, 68px); letter-spacing: -0.045em; line-height: 0.92; } .h-xl .serif, .h-l .serif, .h-m .serif { text-transform: none; color: var(--red); letter-spacing: -0.015em; } .h-s { font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.035em; line-height: 1.08; } .lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 52ch; line-height: 1.55; } .prose p { color: var(--ink-2); } .prose p + p { margin-top: 14px; } .prose strong, .prose b { color: var(--ink); } /* Page head for every page that isn't the homepage. */ .page-head { max-width: 1400px; margin: 0 auto; padding: 150px 24px 72px; } .page-head .h-xl, .page-head .h-l { margin-bottom: 28px; } .page-head .meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .block-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; } .block-head p { color: var(--ink-2); max-width: 46ch; font-size: 18px; } /* ── buttons & links ──────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font: 800 16px/1 'Inter Tight', sans-serif; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; background: none; color: inherit; transition: transform .2s, background .2s, color .2s; } .btn:hover { transform: translateY(-2px) rotate(-1deg); } .btn.red { background: var(--red); color: #fff; } .btn.ink { background: var(--ink); color: var(--bg); } .btn.ghost { border-color: currentColor; } .btn[disabled] { opacity: .5; cursor: default; transform: none; } .btns { display: flex; gap: 10px; flex-wrap: wrap; } .go { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; font-size: 16px; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 3px; transition: color .2s, border-color .2s; } .go:hover { color: var(--red); border-color: var(--red); } /* ── ledger rows (numbered list with big titles) ──────────── */ .ledger { border-top: 1px solid var(--ink); } .row { display: grid; grid-template-columns: 70px 1.1fr 1.4fr; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding .35s cubic-bezier(.2,.7,.2,1); text-decoration: none; } a.row:hover, .row:hover { padding-left: 14px; } .row .n { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--dim); } .row h3 { font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.035em; line-height: 1.05; } .row p { color: var(--ink-2); font-size: 16px; } .row p b { color: var(--ink); } .hl { background: var(--red); color: #fff; padding: 1px 7px; border-radius: 4px; font: 500 12px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; margin-left: 6px; } /* ── cards ────────────────────────────────────────────────── */ .card { background: var(--face); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .card.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } a.card { text-decoration: none; transition: transform .25s, border-color .25s; display: block; } a.card:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--ink); } /* ── chips ────────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-weight: 700; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ── forms ────────────────────────────────────────────────── */ .field { display: block; margin-bottom: 16px; } .field span { display: block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; } .input, .field input, .field select, .field textarea { width: 100%; font: 500 17px 'Inter Tight', sans-serif; color: var(--ink); background: var(--face); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; outline: none; transition: border-color .2s; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); } /* ── faq ──────────────────────────────────────────────────── */ .faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 26px 0; font-weight: 800; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-weight: 400; font-size: 32px; line-height: 1; transition: transform .3s; flex: none; } .faq details[open] summary::after { transform: rotate(45deg); color: var(--red); } .faq details > div, .faq details > p { padding: 0 0 28px; color: var(--ink-2); max-width: 70ch; } /* ── marquee band ─────────────────────────────────────────── */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; white-space: nowrap; } .marquee-track { display: inline-flex; animation: kc-slide 36s linear infinite; } .marquee span { font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(32px, 5vw, 64px); padding-right: 0.5em; } .marquee span i { font-family: 'Instrument Serif', serif; font-weight: 400; text-transform: none; color: var(--red); letter-spacing: 0; } @keyframes kc-slide { to { transform: translateX(-50%); } } /* ── reveal on scroll ───────────────────────────────────────── site.js marks what is already on screen as shown, then adds .kc-rv to and animates the rest as it scrolls in. With no script, everything is simply visible. */ .kc-rv .rv:not(.in) { opacity: 0; transform: translateY(40px); } .kc-rv .rv { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } /* ── responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { .block-head { grid-template-columns: 1fr; gap: 20px; } .row { grid-template-columns: 44px 1fr; } .row p { grid-column: 2; } } @media (max-width: 640px) { body { font-size: 16px; } .wrap, .narrow { padding: 0 16px; } .block { padding: 88px 16px; } .page-head { padding: 118px 16px 48px; } .card { padding: 22px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } .kc-rv .rv:not(.in) { opacity: 1; transform: none; } .btn:hover, a.card:hover { transform: none; } }