/* ───────────────────────────────────────────────────────────────────────── elenchi.css · the editorial-manifesto design system ───────────────────────────────────────────────────────────────────────── Single point of truth for Elenchi's surfaces. Public site (landing.html) and internal experiences (Transfer verification, the Pass, reactor chrome) all consume this file. Aesthetic anchor: the Elenchi explainer deck — Stripe-Press pamphlet crossed with NYT-longform, cream paper, blood-red single accent, bold editorial serif display, clean grotesque body. To use: … The .elenchi scope keeps tokens contained when embedded in apps that already have their own design system. Drop the scope (just write body{}) if you are starting a new surface from scratch. ───────────────────────────────────────────────────────────────────────── */ /* Type ─────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700;8..60,800;8..60,900&display=swap'); /* Tokens ───────────────────────────────────────────────────────────────── */ .elenchi, :root.elenchi-root { /* Color · OKLCH only, no #fff and no #000. Tinted neutrals, single accent. */ --el-paper: oklch(96% 0.014 80); /* page surface, warm cream */ --el-paper-2: oklch(93% 0.018 80); /* secondary surface */ --el-paper-3: oklch(89% 0.020 80); /* tertiary, header bars on cream */ --el-ink: oklch(18% 0.020 50); /* primary type & solid bars */ --el-ink-2: oklch(32% 0.015 55); /* body, secondary type */ --el-ink-3: oklch(48% 0.012 60); /* labels, captions */ --el-ink-4: oklch(62% 0.010 65); /* dim, placeholders */ --el-rule: oklch(80% 0.014 70); /* hairline */ --el-rule-2: oklch(86% 0.012 70); /* fainter */ --el-red: oklch(50% 0.20 27); /* the single accent — Japanese-flag red */ --el-red-2: oklch(42% 0.18 27); /* hover / pressed */ --el-red-soft: oklch(50% 0.20 27 / 0.10); --el-red-mist: oklch(50% 0.20 27 / 0.05); --el-void: oklch(14% 0.008 270); /* the reactor's surface */ /* Type */ --el-serif: 'Source Serif 4', 'Times New Roman', Georgia, serif; --el-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif; /* Type scale. Modular, ≥1.25 ratio between steps. */ --el-fs-eye: 11px; /* eyebrow caps */ --el-fs-meta: 12px; /* labels */ --el-fs-body-s: 14.5px; --el-fs-body: 17px; --el-fs-body-l: 18px; --el-fs-h6: 20px; --el-fs-h5: 24px; --el-fs-h4: 32px; --el-fs-h3-min: 28px; --el-fs-h3-max: 44px; /* clamp upper */ --el-fs-h2-min: 36px; --el-fs-h2-max: 64px; --el-fs-h1-min: 48px; --el-fs-h1-max: 116px; --el-fs-display-max: 156px; /* hero wordmark only */ /* Spacing scale. 4px base. */ --el-1: 4px; --el-2: 8px; --el-3: 12px; --el-4: 16px; --el-5: 24px; --el-6: 32px; --el-7: 48px; --el-8: 64px; --el-9: 96px; --el-10: 144px; /* Borders + radius. Hairlines, never rounded. */ --el-bw: 1px; --el-bw-2: 1.5px; --el-bw-3: 2px; /* Motion */ --el-ease: cubic-bezier(.4, 0, .2, 1); --el-ease-out: cubic-bezier(.2, 0, 0, 1); } /* Base & reset ─────────────────────────────────────────────────────────── */ .elenchi *, .elenchi *::before, .elenchi *::after { box-sizing: border-box; } .elenchi { background: var(--el-paper); color: var(--el-ink); font-family: var(--el-sans); font-size: var(--el-fs-body); line-height: 1.55; font-feature-settings: "kern" 1, "ss01" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :where(.elenchi a) { color: inherit; } /* Paper grain. Optional — add .elenchi--grain to body to enable. */ .elenchi--grain { position: relative; } .elenchi--grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.5; mix-blend-mode: multiply; } /* Layout primitives ─────────────────────────────────────────────────────── */ .el-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--el-7); position: relative; z-index: 2; } .el-wrap--narrow { max-width: 980px; margin: 0 auto; padding: 0 var(--el-7); position: relative; z-index: 2; } .el-hr { border: 0; height: 1px; background: var(--el-rule); margin: 0; } .el-hr--heavy { height: 1.5px; background: var(--el-ink); } .el-hr--red { height: 2px; background: var(--el-red); } /* Type primitives ───────────────────────────────────────────────────────── */ .elenchi .serif { font-family: var(--el-serif); } .elenchi .sans { font-family: var(--el-sans); } .el-eyebrow { font-family: var(--el-sans); font-size: var(--el-fs-meta); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--el-ink-2); display: inline-flex; align-items: center; gap: 10px; } .el-eyebrow .tick { display: inline-block; width: 18px; height: 1px; background: var(--el-red); vertical-align: middle; } .el-eyebrow--centered { width: 100%; justify-content: center; } /* Editorial display headlines. All wrap-balanced. Source Serif weight 800 runs wider per character than typical sans, so clamp ceilings are tuned to keep ~30-character lines from blowing out a 980px reading column. */ .el-display { font-family: var(--el-serif); font-weight: 800; font-size: clamp(56px, 10vw, var(--el-fs-display-max)); line-height: 0.92; letter-spacing: -0.035em; color: var(--el-ink); text-wrap: balance; } /* H1 — the pull-quote scale ("MOSTLY, IT'S A GRAVEYARD.") */ .el-h1 { font-family: var(--el-serif); font-weight: 800; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.024em; color: var(--el-ink); text-wrap: balance; } /* H2 — section headlines. Sized to fit two-line wrap inside .wrap-narrow. */ .el-h2 { font-family: var(--el-serif); font-weight: 800; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.02em; color: var(--el-ink); text-wrap: balance; } /* H3 — sub-section headlines */ .el-h3 { font-family: var(--el-serif); font-weight: 800; font-size: clamp(var(--el-fs-h3-min), 3.0vw, var(--el-fs-h3-max)); line-height: 1.12; letter-spacing: -0.016em; color: var(--el-ink); text-wrap: balance; } .el-h4 { font-family: var(--el-serif); font-weight: 800; font-size: var(--el-fs-h4); letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; } .el-h5 { font-family: var(--el-serif); font-weight: 800; font-size: var(--el-fs-h5); letter-spacing: -0.01em; line-height: 1.2; text-wrap: pretty; } .el-h6 { font-family: var(--el-serif); font-weight: 800; font-size: var(--el-fs-h6); letter-spacing: -0.005em; line-height: 1.25; text-wrap: pretty; } /* Emphasis tokens. Used inside headlines and body. */ .el-red { color: var(--el-red); } .el-em { font-style: italic; } .el-em-red { font-style: italic; color: var(--el-red); font-weight: 800; } .el-strike { position: relative; color: var(--el-ink-3); text-decoration: line-through; text-decoration-color: var(--el-ink-3); text-decoration-thickness: 3px; } /* Body */ .el-body { font-family: var(--el-sans); font-size: var(--el-fs-body); color: var(--el-ink-2); line-height: 1.6; } .el-body--lg { font-size: var(--el-fs-body-l); } .el-body--sm { font-size: var(--el-fs-body-s); } .el-body b, .el-body strong { color: var(--el-ink); font-weight: 600; } /* Pull quote — the bracketed editorial quote */ .el-pull { font-family: var(--el-serif); font-style: italic; font-weight: 600; font-size: var(--el-fs-h5); line-height: 1.35; color: var(--el-ink); border-top: 1px solid var(--el-ink); border-bottom: 1px solid var(--el-ink); padding: 18px 0; } /* The mark — Japanese-flag red dot ─────────────────────────────────────── */ .el-mark { width: 84px; height: 84px; border-radius: 50%; background: var(--el-red); position: relative; display: inline-block; } .el-mark--construct::before, .el-mark--construct::after { content: ''; position: absolute; background: var(--el-rule); } .el-mark--construct::before { top: -18px; left: 50%; width: 1px; height: 14px; transform: translateX(-50%); } .el-mark--construct::after { top: -12px; left: 50%; width: 120px; height: 1px; transform: translateX(-50%); } .el-mark--sm { width: 32px; height: 32px; } .el-mark--lg { width: 120px; height: 120px; } /* Buttons ──────────────────────────────────────────────────────────────── */ .el-btn { font-family: var(--el-sans); font-size: var(--el-fs-body-s); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 14px 22px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: var(--el-bw) solid transparent; cursor: pointer; transition: background 0.2s var(--el-ease), color 0.2s var(--el-ease), border-color 0.2s var(--el-ease); } .el-btn .arr { transition: transform 0.2s var(--el-ease); } .el-btn:hover .arr { transform: translateX(3px); } .el-btn--primary { background: var(--el-ink); color: var(--el-paper); border-color: var(--el-ink); } .el-btn--primary:hover { background: var(--el-red); border-color: var(--el-red); } .el-btn--ghost { background: transparent; color: var(--el-ink); border-color: var(--el-ink); padding: 13px 22px; } .el-btn--ghost:hover { background: var(--el-ink); color: var(--el-paper); } .el-btn--red { background: var(--el-red); color: var(--el-paper); border-color: var(--el-red); } .el-btn--red:hover { background: var(--el-red-2); border-color: var(--el-red-2); } /* Definition box — bordered, used for terms / pull-outs ─────────────────── */ .el-defn { padding: 32px 36px; border: var(--el-bw-2) solid var(--el-ink); font-family: var(--el-sans); font-size: var(--el-fs-body-l); line-height: 1.55; color: var(--el-ink); } .el-defn .term { font-family: var(--el-serif); font-weight: 800; font-size: var(--el-fs-h6); color: var(--el-ink); } .el-defn .pos { color: var(--el-ink-3); font-style: italic; font-family: var(--el-serif); } .el-defn p + p { margin-top: 12px; color: var(--el-ink-2); } /* Steps — numbered list with red numerals inside bordered box ──────────── */ .el-steps { border: var(--el-bw-2) solid var(--el-ink); padding: 34px 40px; } .el-steps ol { list-style: none; counter-reset: el-s; margin: 0; padding: 0; } .el-steps li { font-family: var(--el-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; padding: 12px 0 12px 60px; position: relative; color: var(--el-ink); counter-increment: el-s; } .el-steps li::before { content: counter(el-s) "."; position: absolute; left: 0; top: 8px; font-family: var(--el-serif); font-weight: 800; color: var(--el-red); font-size: 1.05em; line-height: 1; } /* Stamps — the rotated rubber-stamp marks ──────────────────────────────── */ .el-stamp { display: inline-block; font-family: var(--el-sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; padding: 3px 8px; border: 1.2px solid currentColor; background: transparent; } .el-stamp--held { color: var(--el-ink); background: var(--el-paper); } .el-stamp--broke { color: var(--el-red); background: var(--el-red-soft); transform: rotate(-2deg); } .el-stamp--your-call { color: var(--el-ink-2); background: var(--el-paper-3); } .el-stamp--on-list { color: var(--el-paper); background: var(--el-red); border-color: var(--el-red); transform: rotate(-2deg); } .el-stamp--adjudicated { color: var(--el-red); background: var(--el-red-soft); transform: rotate(-3deg); padding: 5px 14px; border-width: 2px; } /* Compare table — two-column "Archive vs Colosseum" pattern ────────────── */ .el-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .el-compare__col { padding: 48px 40px 56px; } .el-compare__col--lose { border-right: var(--el-bw) solid var(--el-rule); } .el-compare__col--win { background: var(--el-red-mist); } .el-compare__col h3 { font-family: var(--el-serif); font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.02em; line-height: 1; margin-bottom: 42px; } .el-compare__col--lose h3 { color: var(--el-ink); } .el-compare__col--win h3 { color: var(--el-red); } .el-compare__col ul { list-style: none; margin: 0; padding: 0; } .el-compare__col li { padding: 14px 0; border-bottom: var(--el-bw) solid var(--el-rule-2); font-family: var(--el-sans); font-size: var(--el-fs-body); display: grid; grid-template-columns: 140px 1fr; gap: 18px; } .el-compare__col li:last-child { border-bottom: 0; } .el-compare__col li .k { font-weight: 600; color: var(--el-ink-2); } .el-compare__col--win li .k { color: var(--el-red-2); } .el-compare__col li .v { color: var(--el-ink); } @media (max-width: 720px) { .el-compare { grid-template-columns: 1fr; } .el-compare__col--lose { border-right: 0; border-bottom: var(--el-bw) solid var(--el-rule); } } /* Docket — the verdict ticket pattern used by the Pass ─────────────────── */ .el-docket { border: var(--el-bw-2) solid var(--el-ink); background: var(--el-paper-2); } .el-docket__head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px; border-bottom: var(--el-bw-2) solid var(--el-ink); background: var(--el-ink); color: var(--el-paper); } .el-docket__title { font-family: var(--el-serif); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; } .el-docket__meta { font-family: var(--el-sans); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--el-paper-3); } .el-docket__row { padding: 18px 22px; border-bottom: 1px dashed var(--el-rule); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; position: relative; } .el-docket__row:last-of-type { border-bottom: 0; } .el-docket__belief { font-family: var(--el-serif); font-size: var(--el-fs-body); line-height: 1.4; color: var(--el-ink); font-weight: 500; } .el-docket__belief .vs { display: block; font-family: var(--el-sans); font-size: 11px; color: var(--el-ink-3); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; font-weight: 600; } .el-docket__actions { display: flex; gap: 6px; } .el-docket__actions button { font-family: var(--el-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; background: transparent; border: 1px solid var(--el-ink); color: var(--el-ink); padding: 6px 10px; cursor: pointer; transition: background 0.15s, color 0.15s; } .el-docket__actions button:hover { background: var(--el-ink); color: var(--el-paper); } .el-docket__actions button[aria-pressed="true"] { background: var(--el-ink); color: var(--el-paper); } .el-docket__row .el-stamp { position: absolute; top: 14px; right: 22px; } .el-docket__row--broke { opacity: 0.78; } .el-docket__row--broke .el-docket__belief, .el-docket__row--broke .el-docket__belief b { color: var(--el-ink-3); } .el-docket__foot { padding: 16px 22px; background: var(--el-ink); color: var(--el-paper); display: flex; justify-content: space-between; align-items: baseline; } .el-docket__foot .l { font-family: var(--el-sans); font-size: 13px; letter-spacing: 0.10em; } .el-docket__foot .r { font-family: var(--el-serif); font-weight: 800; font-style: italic; font-size: 18px; color: var(--el-paper); } /* Forms ────────────────────────────────────────────────────────────────── */ .el-form label { display: block; font-family: var(--el-sans); font-size: var(--el-fs-eye); letter-spacing: 0.20em; text-transform: uppercase; color: var(--el-ink-3); font-weight: 700; margin-bottom: 8px; } .el-form input[type="email"], .el-form input[type="text"], .el-form input[type="search"] { font-family: var(--el-sans); font-size: var(--el-fs-body); color: var(--el-ink); background: var(--el-paper); border: var(--el-bw-2) solid var(--el-ink); padding: 14px 16px; outline: none; width: 100%; } .el-form input::placeholder { color: var(--el-ink-4); } .el-form input:focus { border-color: var(--el-red); } /* Masthead — sticky brand bar ──────────────────────────────────────────── */ .el-mast { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--el-paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--el-bw) solid var(--el-rule); } .el-mast__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 32px; } .el-brand { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; color: var(--el-ink); } .el-brand .word { font-family: var(--el-serif); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .el-brand .dot { color: var(--el-red); font-weight: 900; font-family: var(--el-serif); font-size: 24px; line-height: 1; margin: 0 -2px 0 1px; } .el-brand .ext { font-family: var(--el-serif); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--el-ink-3); line-height: 1; } .el-mast__nav { display: flex; gap: 28px; } .el-mast__nav a { color: var(--el-ink-2); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; } .el-mast__nav a:hover { color: var(--el-red); border-bottom-color: var(--el-red); } /* Inline figure frame (for embeds) ─────────────────────────────────────── */ .el-figure { border: var(--el-bw) solid var(--el-ink); padding: 12px; background: transparent; position: relative; } .el-figure[data-label]::after { content: attr(data-label); position: absolute; left: 0; right: 0; top: -12px; text-align: center; font-family: var(--el-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--el-ink-3); background: var(--el-paper); padding: 0 14px; width: fit-content; margin: 0 auto; } .el-figure__caption { margin-top: 10px; text-align: center; font-family: var(--el-sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-ink-3); } /* Tagline bar — the closing "machine runs the argument" black bar ──────── */ .el-tagbar { display: inline-flex; background: var(--el-ink); color: var(--el-paper); padding: 18px 28px; font-family: var(--el-serif); font-weight: 600; font-style: italic; font-size: clamp(17px, 1.8vw, 22px); } /* Reduced motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .elenchi *, .elenchi *::before, .elenchi *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Print ────────────────────────────────────────────────────────────────── */ @media print { .elenchi { background: var(--el-paper); color: var(--el-ink); } .el-mast, .el-btn, .el-form { display: none !important; } .el-defn, .el-steps, .el-docket { break-inside: avoid; } }