Second-person, declarative.
───────────────────────────────────────────────────────────── */ /* ── Fonts (Google substitutes where licensed files unavailable) ── */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@300..700&display=swap"); /* Local font: Antilag (editorial serif sibling) + Berkeley Mono (structural) */ @font-face { font-family: "Antilag"; src: url("fonts/antilag-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Berkeley Mono"; src: url("fonts/berkeley-mono-variable.otf") format("opentype-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* ── Surfaces ───────────────────────────────────────────── */ --tw-bone: #f5f3ee; /* page background */ --tw-paper: #ffffff; /* card, floating surfaces */ --tw-sage-panel: #e8ebe6; /* nested panel inside card */ --tw-sage: #c5d4c0; /* pale sage accent fill */ --tw-note: #fffef0; /* sticky note fill */ --tw-note-border: #fef3c7; /* sticky note border (amber-100) */ /* ── Forest ink ─────────────────────────────────────────── */ --tw-forest: #2d4a3e; /* brand / CTA / active */ --tw-forest-mid: #4a5d52; /* device interior */ --tw-forest-deep: #2a3a32; /* device keys, deep accent */ /* ── Stone neutrals (warm gray) ─────────────────────────── */ --tw-stone-50: #fafaf9; --tw-stone-100: #f5f5f4; --tw-stone-200: #e7e5e4; /* card border */ --tw-stone-300: #d6d3d1; /* dashed slot border */ --tw-stone-400: #a8a29e; /* hint */ --tw-stone-500: #78716c; /* caption, mono label */ --tw-stone-600: #57534e; /* body on bone */ --tw-stone-700: #44403c; /* body on paper */ --tw-stone-800: #292524; --tw-stone-900: #1c1917; /* headline ink */ /* ── Status (only use for status) ───────────────────────── */ /* Warm / earthy cousins that sit in the same tonal world as forest + bone. */ --tw-ok-bg: #eef3ea; --tw-ok-ink: #3d5a3f; --tw-ok-dot: #6b8e5a; /* moss */ --tw-warn-bg: #fbf4e4; --tw-warn-ink: #8a5a1f; --tw-warn-dot: #c98b2c; /* ochre */ --tw-err-bg: #f6ebe6; --tw-err-ink: #8a3a2a; --tw-err-dot: #b8553c; /* terracotta */ --tw-info-bg: #f1efe9; --tw-info-ink: #4a443b; --tw-info-dot: #857a6a; /* stone */ --tw-amber-500: #c98b2c; /* star, highlight mark (ochre, not Tailwind amber) */ /* ── Semantic aliases ───────────────────────────────────── */ --fg: var(--tw-stone-900); --fg-body: var(--tw-stone-700); --fg-body-bone: var(--tw-stone-600); --fg-muted: var(--tw-stone-500); --fg-hint: var(--tw-stone-400); --fg-forest: var(--tw-forest); --bg: var(--tw-bone); --bg-card: var(--tw-paper); --bg-panel: var(--tw-sage-panel); --bg-accent: var(--tw-sage); --border: var(--tw-stone-200); --border-soft: var(--tw-stone-100); --ring: var(--tw-forest); /* ── Typography ─────────────────────────────────────────── */ --font-serif: "Playfair Display", "Antilag", Georgia, "Times New Roman", serif; --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Spacing scale (rem, 4px base) ──────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── Radius ─────────────────────────────────────────────── */ --radius-sm: 6px; /* small buttons, icon avatars */ --radius-md: 8px; /* inputs */ --radius-lg: 12px; /* sage panels, toolbar wrapper */ --radius-xl: 14px; --radius-2xl: 18px; /* specimen cards */ --radius-full: 9999px; /* ── Shadow ─────────────────────────────────────────────── */ --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03); --shadow-float: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); --shadow-sticky: 0 1px 2px rgba(0,0,0,0.06); --shadow-hero: 0 25px 50px -12px rgba(0,0,0,0.05); /* ── Motion (deliberately quiet) ────────────────────────── */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 150ms; /* paper-lift on buttons */ --dur-base: 200ms; /* pencil underline */ --dur-slow: 450ms; /* list layout shifts */ } /* ───────────────────────────────────────────────────────────── Base: apply .typewriter to or root container. ───────────────────────────────────────────────────────────── */ body.typewriter, .typewriter { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Serif headlines (display/editorial weight) ─────────────── */ .tw-hero { font-family: var(--font-serif); font-size: clamp(3rem, 5vw + 1rem, 5.5rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; color: var(--fg); text-wrap: balance; } .tw-h1 { font-family: var(--font-serif); font-size: clamp(2.25rem, 3vw + 1rem, 3rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; color: var(--fg); text-wrap: balance; } .tw-h2 { font-family: var(--font-serif); font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; color: var(--fg); text-wrap: balance; } .tw-h3 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.3; font-weight: 500; color: var(--fg); } /* ── Body (sans) ────────────────────────────────────────────── */ .tw-lead { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.6; color: var(--fg-body-bone); text-wrap: pretty; } .tw-body { font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.55; color: var(--fg-body); } .tw-small { font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted); } /* ── Mono (labels, eyebrows, keycaps) ───────────────────────── */ .tw-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); } .tw-eyebrow::before { content: "◆ "; color: var(--fg-muted); } .tw-eyebrow--plain::before { content: none; } .tw-field-label { font-family: var(--font-mono); font-size: 0.625rem; /* 10px */ letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); } .tw-field-label--accent { color: var(--fg-forest); } .tw-mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-body); } /* ── Inline code / keycap ───────────────────────────────────── */ .tw-code { font-family: var(--font-mono); font-size: 0.8125em; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--tw-stone-100); color: var(--tw-stone-700); border: 1px solid var(--border); } .tw-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--fg-body); background: var(--bg-card); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sticky); } /* ── Link ───────────────────────────────────────────────────── */ .tw-link { color: var(--fg); text-decoration: none; position: relative; transition: color var(--dur-base) var(--ease-out); } .tw-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .tw-link:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .tw-link::after { transition: none; transform: scaleX(1); } } /* ── Focus ring (ink, not neon) ─────────────────────────────── */ .tw-focusable:focus-visible, button.tw-focusable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Utility helpers ────────────────────────────────────────── */ .tw-serif { font-family: var(--font-serif); } .tw-sans { font-family: var(--font-sans); } .tw-mono-family { font-family: var(--font-mono); } .tw-italic-serif { font-family: var(--font-serif); font-style: italic; } /* ── Decoration: sage underline on key phrase ───────────────── */ .tw-underline-sage { position: relative; display: inline-block; } .tw-underline-sage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 0.18em; background: var(--tw-sage); border-radius: 999px; z-index: -1; }