/* ============================================================================ Agent Audit — Editorial design system Aesthetic direction: legal-journal × cryptographic. Lifted from the homepage so every marketing page can speak the same voice. Loads ON TOP OF /assets/site.css — only overrides what needs the editorial treatment (hero, chapter sections, prose, pull-quote, hex-rule, reveal). ============================================================================ */ :root { --ink: #0a1521; --ink-soft: #243140; --paper: #fbfaf6; --paper-warm: #f5f1e8; --paper-cool: #f2f4f7; --rule: #d4cfc0; --rule-soft: #e8e4d6; --brand-ink: #0c3787; --crypt: #4a5568; --warn-ink: #b5651d; --serif-display: 'Fraunces', 'Source Serif Pro', 'Georgia', serif; --serif-body: 'Source Serif Pro', 'Georgia', serif; } /* --------------------------------------------------------------------------- Page-level activation Add `class="editorial-page"` to to switch the page palette to paper. --------------------------------------------------------------------------- */ .editorial-page { background: var(--paper) !important; color: var(--ink); } .editorial-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(24, 83, 197, 0.08), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(181, 101, 29, 0.04), transparent 60%); pointer-events: none; z-index: 0; } .editorial-page > * { position: relative; z-index: 1; } .editorial-page .nav { background: rgba(251, 250, 246, 0.92) !important; border-bottom-color: var(--rule) !important; } .editorial-page .nav-logo { color: var(--ink) !important; } .editorial-page .nav-links a { color: var(--ink-soft) !important; } .editorial-page .nav-links a:hover { color: var(--ink) !important; } /* Grain overlay — gives the paper material a texture (optional) */ .editorial-grain { position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.04; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } /* --------------------------------------------------------------------------- Editorial hero — replaces the .page-header block on inner pages --------------------------------------------------------------------------- */ .editorial-hero { padding: 88px 0 64px; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; } .editorial-hero-grid { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: end; } .editorial-hero-grid.single { grid-template-columns: 1fr; max-width: 980px; } @media (max-width: 900px) { .editorial-hero-grid { grid-template-columns: 1fr; gap: 32px; } } .editorial-dossier { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crypt); display: flex; gap: 18px; align-items: center; margin-bottom: 20px; } .editorial-dossier::before { content: ''; width: 32px; height: 1px; background: var(--ink); } .editorial-dossier .file { color: var(--ink); font-weight: 600; } .editorial-dossier .meta { color: var(--crypt); } .editorial-display { font-family: var(--serif-display); font-weight: 700; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 28px; max-width: 16ch; } .editorial-display em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; color: var(--brand-ink); } .editorial-display .rule { display: inline-block; width: 0.35em; height: 0.07em; vertical-align: 0.22em; background: var(--brand); margin: 0 0.12em 0 0; } .editorial-deck { font-family: var(--serif-body); font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0 0 28px; } .editorial-deck b { color: var(--ink); font-weight: 700; } .editorial-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .btn-ink, .editorial-page .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--ink) !important; color: var(--paper) !important; padding: 14px 22px; border: 1px solid var(--ink) !important; border-radius: 0 !important; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: background 0.2s, transform 0.2s; } .btn-ink:hover, .editorial-page .btn-primary:hover { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none; } .btn-quill, .editorial-page .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent !important; color: var(--ink) !important; padding: 14px 22px; border: 1px solid var(--ink) !important; border-radius: 0 !important; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: background 0.2s, color 0.2s; } .btn-quill:hover, .editorial-page .btn-ghost:hover { background: var(--ink) !important; color: var(--paper) !important; text-decoration: none; } .editorial-strap { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crypt); display: flex; gap: 32px; flex-wrap: wrap; } .editorial-strap b { color: var(--ink); font-weight: 600; } .editorial-breadcrumbs { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crypt); margin-bottom: 24px; } .editorial-breadcrumbs a { color: var(--crypt); text-decoration: none; border-bottom: 1px solid transparent; } .editorial-breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); } .editorial-breadcrumbs .sep { margin: 0 8px; opacity: 0.6; } .editorial-breadcrumbs .here { color: var(--ink); font-weight: 700; } /* --------------------------------------------------------------------------- Chapter sections — every editorial section opens with a numbered eyebrow --------------------------------------------------------------------------- */ .editorial-chapter { padding: 100px 0; position: relative; } .editorial-chapter.dark { background: var(--ink); color: var(--paper); } .editorial-chapter.cool { background: var(--paper-cool); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .editorial-chapter.warm { background: var(--paper-warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .editorial-chapter-num { font-family: var(--serif-display); font-style: italic; font-size: 14px; letter-spacing: 0.06em; color: var(--crypt); display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; } .editorial-chapter-num::before { content: ''; flex: 0 0 60px; height: 1px; background: var(--ink); align-self: center; } .editorial-chapter-num b { color: var(--ink); font-weight: 700; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .editorial-chapter.dark .editorial-chapter-num, .editorial-chapter.dark .editorial-chapter-num b { color: rgba(251,250,246,0.6); } .editorial-chapter.dark .editorial-chapter-num::before { background: var(--paper); } .editorial-chapter.dark .editorial-chapter-num b { color: var(--paper); } .editorial-h2 { font-family: var(--serif-display); font-weight: 700; font-variation-settings: "opsz" 100, "SOFT" 30; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); max-width: 20ch; margin: 0 0 40px; } .editorial-h2 em { font-style: italic; font-variation-settings: "opsz" 100, "SOFT" 80, "WONK" 1; color: var(--brand-ink); } .editorial-chapter.dark .editorial-h2 { color: var(--paper); } .editorial-chapter.dark .editorial-h2 em { color: #93c5fd; } .editorial-h3 { font-family: var(--serif-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 16px; } .editorial-chapter.dark .editorial-h3 { color: var(--paper); } .editorial-prose p { font-family: var(--serif-body); font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; max-width: 58ch; } .editorial-prose p b { color: var(--ink); font-weight: 700; } .editorial-prose.lede p:first-of-type { font-size: 21px; color: var(--ink); } .editorial-prose.drop p:first-of-type::first-letter { font-family: var(--serif-display); font-weight: 800; font-variation-settings: "opsz" 144; font-size: 4.5em; line-height: 0.85; float: left; margin: 6px 12px -4px 0; color: var(--brand-ink); } .editorial-chapter.dark .editorial-prose p { color: rgba(251,250,246,0.78); } .editorial-chapter.dark .editorial-prose p b { color: var(--paper); } /* Two-column asymmetric grid (1.05fr / 0.95fr or 1.1fr / 1fr) */ .editorial-split { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; } .editorial-split.center { align-items: center; } .editorial-split.even { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .editorial-split { grid-template-columns: 1fr; gap: 32px; } } /* --------------------------------------------------------------------------- Editorial card-row (replaces uniform card-grids on inner pages) --------------------------------------------------------------------------- */ .editorial-rows { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .editorial-row { display: grid; grid-template-columns: 60px 1fr 1.4fr; gap: 32px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--rule); } .editorial-row.head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crypt); padding-top: 12px; padding-bottom: 12px; border-top: 2px solid var(--ink); } .editorial-row .num { font-family: var(--serif-display); font-style: italic; font-size: 19px; color: var(--crypt); } .editorial-row .name { font-family: var(--serif-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .editorial-row .desc { font-family: var(--serif-body); font-size: 15px; color: var(--ink-soft); line-height: 1.5; } @media (max-width: 720px) { .editorial-row { grid-template-columns: 1fr; gap: 8px; } .editorial-row.head { display: none; } } /* --------------------------------------------------------------------------- Pull quote --------------------------------------------------------------------------- */ .editorial-pullquote { padding: 100px 0; position: relative; } .editorial-pullquote-inner { max-width: 920px; margin: 0 auto; padding: 0 32px; position: relative; } .editorial-pullquote-inner::before { content: '“'; position: absolute; top: -40px; left: 12px; font-family: var(--serif-display); font-weight: 900; font-size: 240px; line-height: 1; color: rgba(24,83,197,0.12); pointer-events: none; user-select: none; } .editorial-pullquote-text { font-family: var(--serif-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 28px; position: relative; } .editorial-pullquote-text em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; } .editorial-pullquote-attr { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--crypt); } .editorial-pullquote-attr b { color: var(--ink); font-weight: 700; } /* --------------------------------------------------------------------------- Hex rule — recurring cryptographic ornament between sections --------------------------------------------------------------------------- */ .hex-rule { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--crypt); opacity: 0.4; word-break: break-all; max-width: 100%; line-height: 1.6; user-select: none; padding: 16px 32px; max-width: 1280px; margin: 0 auto; } /* --------------------------------------------------------------------------- Stakes grid (dark band with editorial figures) --------------------------------------------------------------------------- */ .editorial-stakes { background: var(--ink); color: var(--paper); padding: 80px 0; } .editorial-stakes-grid { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(251,250,246,0.2); } @media (max-width: 700px) { .editorial-stakes-grid { grid-template-columns: repeat(2, 1fr); } } .editorial-stake { padding: 36px 24px; border-right: 1px solid rgba(251,250,246,0.15); border-bottom: 1px solid rgba(251,250,246,0.15); } .editorial-stake:nth-child(4n) { border-right: 0; } @media (max-width: 700px) { .editorial-stake { border-right: 1px solid rgba(251,250,246,0.15); } .editorial-stake:nth-child(2n) { border-right: 0; } } .editorial-stake .v { font-family: var(--serif-display); font-weight: 800; font-variation-settings: "opsz" 144; font-size: clamp(40px, 4.5vw, 64px); line-height: 0.95; letter-spacing: -0.035em; color: var(--paper); display: block; } .editorial-stake .v .unit { font-size: 0.35em; font-weight: 600; vertical-align: 0.7em; font-family: 'Inter', sans-serif; color: rgba(251,250,246,0.55); letter-spacing: -0.005em; margin-left: 2px; } .editorial-stake .l { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(251,250,246,0.6); margin-top: 12px; line-height: 1.5; } /* --------------------------------------------------------------------------- CTA close band --------------------------------------------------------------------------- */ .editorial-cta-close { padding: 120px 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); border-top: 1px solid var(--rule); position: relative; overflow: hidden; } .editorial-cta-close::before { content: ''; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(24,83,197,0.12), transparent 60%); pointer-events: none; } .editorial-cta-close-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 32px; text-align: center; } .editorial-cta-close h2 { font-family: var(--serif-display); font-weight: 800; font-variation-settings: "opsz" 144; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 24px; } .editorial-cta-close h2 em { font-style: italic; font-variation-settings: "opsz" 144, "WONK" 1; color: var(--brand-ink); } .editorial-cta-close p { font-family: var(--serif-body); font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0 auto 32px; } /* --------------------------------------------------------------------------- Scroll-triggered reveal (compatible with the homepage IntersectionObserver) --------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-group > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-group.in > * { opacity: 1; transform: translateY(0); } .reveal-group.in > *:nth-child(2) { transition-delay: 0.1s; } .reveal-group.in > *:nth-child(3) { transition-delay: 0.2s; } .reveal-group.in > *:nth-child(4) { transition-delay: 0.3s; } .reveal-group.in > *:nth-child(5) { transition-delay: 0.4s; } /* --------------------------------------------------------------------------- FAQ block (paired with FAQPage schema for AI citation) --------------------------------------------------------------------------- */ .editorial-faq { max-width: 920px; margin: 0 auto; padding: 0 32px; } .editorial-faq details { border-bottom: 1px solid var(--rule); padding: 24px 0; } .editorial-faq summary { font-family: var(--serif-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.012em; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .editorial-faq summary::-webkit-details-marker { display: none; } .editorial-faq summary::after { content: '+'; font-family: 'JetBrains Mono', monospace; color: var(--crypt); font-size: 28px; font-weight: 300; transition: transform 0.25s ease; } .editorial-faq details[open] summary::after { transform: rotate(45deg); } .editorial-faq details > div { font-family: var(--serif-body); font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-top: 14px; max-width: 70ch; } /* --------------------------------------------------------------------------- Footer overrides (paper-tinted on editorial pages) --------------------------------------------------------------------------- */ .editorial-page .site-footer { background: var(--ink) !important; border-top: 1px solid var(--rule) !important; } /* --------------------------------------------------------------------------- Reduced motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; } }