/* =================================================================== GRANT INVESTS — shared brand stylesheet ("Graphite Terminal") Single source of truth for the design system across all pages. Change the brand by editing the tokens in :root below. -------------------------------------------------------------------- ACCENT color -> --accent / --accent-2 (cyan / electric blue) BRAND name -> the .brand markup in each page's nav CONTACT email -> footer mailto in each page SOCIAL links -> footer + follow section in index.html -------------------------------------------------------------------- FONTS are loaded via in each page's (faster than @import — no render-blocking round-trip here). =================================================================== */ :root { /* canvas */ --bg: #0a0c10; --bg-grid: rgba(255,255,255,0.022); --surface: #11151c; --surface-2: #151b24; --line: rgba(255,255,255,0.085); --line-2: rgba(255,255,255,0.14); /* ink */ --ink: #eef2f7; --ink-soft: #c6d0dc; --ink-faint: #737f91; /* AA-contrast muted text (disclaimers, captions) */ --ink-dim: #7b8696; /* ≥4.5:1 on --bg for small labels/counts */ /* accent — cyan / electric blue */ --accent: #22d3ee; --accent-2: #38bdf8; --accent-ink: #04212a; /* text that sits ON the accent fill */ --accent-soft: rgba(34,211,238,0.10); --accent-wash: rgba(34,211,238,0.12); /* slightly stronger accent tint (gatebox, follow card, bento glow) */ --accent-line: rgba(34,211,238,0.35); --glow: rgba(34,211,238,0.18); --scrim: rgba(10,12,16,0.66); /* translucent page-bg for chips sitting over imagery */ /* semantic — warning amber (callouts, speculative notes) */ --warn: #f5b342; --warn-soft: rgba(245,179,66,0.10); --warn-line: rgba(245,179,66,0.32); /* type */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* layout */ --maxw: 1080px; --radius: 14px; --radius-sm: 9px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* faint data-grid + accent glow, fixed behind everything */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 100%); pointer-events: none; } body::after { content: ""; position: fixed; top: -380px; left: 50%; transform: translateX(-50%); width: 1100px; height: 760px; z-index: -2; background: radial-gradient(ellipse at center, var(--glow), transparent 65%); opacity: 0.5; pointer-events: none; } a { color: var(--accent); text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* skip-to-content link (injected by brand.js); off-screen until keyboard focus */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; } .skip-link:focus { left: 8px; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--accent-line); } /* ---- container ---- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } @media (max-width: 640px) { .wrap { padding: 0 18px; } } /* homepage section anchors clear the 62px sticky nav when jumped to */ #about, #resources, #follow { scroll-margin-top: 80px; } /* ---- eyebrow / labels ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11.5px; font-weight: 500; color: var(--accent); margin: 0 0 18px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-line); } /* ===================== NAV ===================== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(10,12,16,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; height: 62px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 640px) { .nav-inner { padding: 0 18px; height: 56px; } } .brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); } .brand .mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; box-shadow: 0 0 18px var(--glow); } .brand .mark img { width: 100%; height: 100%; display: block; border-radius: 6px; } .brand-logo { height: 22px; width: auto; display: block; } .brand-icon { display: none; height: 26px; width: auto; } @media (max-width: 560px) { .nav .brand-logo { display: none; } .nav .brand-icon { display: block; } } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink); padding: 8px 12px; border-radius: 8px; transition: color .18s, background .18s; touch-action: manipulation; } .nav-links a:hover { color: var(--ink); background: var(--surface-2); } .nav-links a.active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .nav-links a.cta { color: var(--accent); border: 1px solid var(--accent-line); margin-left: 4px; } .nav-links a.cta:hover { background: var(--accent-soft); color: var(--accent); } @media (max-width: 560px) { .nav-links a { padding: 11px 11px; font-size: 13px; } /* taller tap target */ .nav .brand .wordmark { display: none; } /* mobile: just the GI mark */ } /* reading progress bar (long-form pages, element injected by brand.js) */ .read-progress { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--glow); pointer-events: none; } /* ===================== BUTTONS ===================== */ .btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--font-body); font-size: 15.5px; font-weight: 600; padding: 13px 22px; border-radius: 10px; border: 1px solid transparent; transition: transform .16s cubic-bezier(.2,.8,.25,1), background .2s ease, border-color .2s ease, box-shadow .25s ease; white-space: nowrap; will-change: transform; touch-action: manipulation; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); transition-duration: .05s; } .btn svg { transition: transform .16s ease; } .btn:hover svg { transform: translateX(2px); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 30px -12px var(--glow); } .btn-primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 18px 44px -10px var(--glow), 0 0 22px -4px var(--glow); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent); } .btn svg { width: 17px; height: 17px; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active, .btn:hover svg { transform: none; } } /* CTA buttons inside article bodies must not inherit the inline-link color/underline */ .article .body a.btn { text-decoration: none; } .article .body a.btn-primary { color: var(--accent-ink); } .article .body a.btn-ghost { color: var(--ink); } .art-cover .cover-art { object-fit: cover; } /* Article table of contents (auto-built in brand.js) */ .art-toc { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 20px; } .art-toc-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--ink-faint); margin: 0 0 11px; } .art-toc ol { margin: 0; padding: 0; list-style: none; } .art-toc li + li { margin-top: 6px; } .art-toc a { display: block; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; line-height: 1.4; border-left: 2px solid transparent; padding-left: 12px; transition: color .15s ease, border-color .15s ease; } .art-toc a:hover { color: var(--ink); } .art-toc a.active { color: var(--accent); border-left-color: var(--accent); } @media (min-width: 1240px) { .art-toc { position: fixed; top: 100px; left: calc(50% - 580px); width: 198px; max-height: calc(100vh - 150px); overflow-y: auto; margin: 0; transition: opacity .2s ease, visibility .2s ease; } .art-toc.tuck { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .art-toc a { transition: none; } } /* ===================== FOOTER ===================== */ .footer { border-top: 1px solid var(--line); margin-top: 96px; padding: 48px 0 56px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.012)); } .footer-top { display: flex; justify-content: flex-start; align-items: flex-start; gap: clamp(48px, 12vw, 160px); flex-wrap: wrap; margin-bottom: 30px; } .footer .brand { font-size: 17px; margin-bottom: 12px; } .footer-tag { color: var(--ink-faint); font-size: 14px; max-width: 320px; margin: 0; } .footer-cols { display: flex; gap: clamp(32px, 8vw, 56px); flex-wrap: wrap; } .footer-col h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 500; color: var(--ink-dim); margin: 0 0 12px; } .footer-col a, .footer-col span { display: block; color: var(--ink-soft); font-size: 14.5px; padding: 7px 0; margin-bottom: 1px; transition: color .16s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-dim); font-size: 12.5px; } .footer-bottom .disclaimer { max-width: 620px; color: var(--ink-faint); } .footer-bottom a { color: var(--ink-faint); } .footer-bottom a:hover { color: var(--accent); } /* social icon buttons */ .socials { display: flex; gap: 10px; margin-top: 4px; } .socials a { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--ink-soft); transition: color .18s, border-color .18s, background .18s; } .socials a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .socials svg { width: 18px; height: 18px; } /* ===================== SCROLL REVEAL ===================== Gated on html.js (set synchronously in ) so that with JS disabled — or for crawlers that don't run JS — content stays visible. */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ===================== SHARED SECTION BITS ===================== */ .section-head { margin-bottom: 30px; } .section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; } .section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; max-width: 640px; } /* ===================== BENTO CURSOR SPOTLIGHT ===================== Soft cyan radial glow that tracks the pointer across each .cell (homepage Resources bento). brand.js sets --mx / --my (in %) on the hovered card; the gradient reads them — no JS-animated positions, so no layout thrash. Defaults to centered + invisible (opacity 0) so the card looks identical at rest and with JS off. Content is lifted above the glow via a relative-stacking rule below. */ .cell { --mx: 50%; --my: 50%; } .cell::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient( 320px circle at var(--mx) var(--my), var(--accent-wash), transparent 60% ); } .cell:hover::before { opacity: 1; } /* keep all real card content above the glow layer. the arrow is already position:absolute (don't clobber that) — it just needs a z-index. */ .cell > *:not(.arrow) { position: relative; z-index: 1; } .cell > .arrow { z-index: 1; } @media (prefers-reduced-motion: reduce) { .cell::before { display: none; } } /* ===================== BACK TO TOP ===================== */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; background: rgba(17,21,28,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-2); color: var(--ink-soft); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { color: var(--accent); border-color: var(--accent-line); } .to-top svg { width: 20px; height: 20px; } @media (max-width: 560px) { .to-top { right: 14px; bottom: 14px; } } @media print { .to-top { display: none !important; } } /* email gate, shared email input + unlocked downloads */ .gate-input { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 14px; touch-action: manipulation; } .gate-input::placeholder { color: var(--ink-dim); } .gate-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); } .gate-dl { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .gate-dl .btn { justify-content: center; } /* ===================== INLINE ACCESS GATE ===================== */ .gatebox { background: radial-gradient(135% 115% at 50% -12%, rgba(34,211,238,0.20), transparent 62%), linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 36px 30px; margin: 30px 0 16px; text-align: center; box-shadow: 0 0 50px rgba(34,211,238,0.08); } .gatebox-ic { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); } .gatebox-ic.done { color: #34d399; border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); } .gatebox-ic svg { width: 26px; height: 26px; } .gatebox h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,3vw,30px); letter-spacing: -0.02em; margin: 0 0 10px; } .gate-locked > p, .gate-unlocked > p { color: var(--ink-soft); font-size: 15.5px; max-width: 500px; margin: 0 auto 18px; } .gatebox-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; } .gatebox-form .gate-input { flex: 1; } .gatebox-form .btn { white-space: nowrap; } .gate-err { color: #ff9b9b; font-size: 13.5px; margin: 12px 0 0; } .gatebox-fine { color: var(--ink-dim); font-size: 12px; margin: 22px auto 0; } /* gated content: blurred until unlocked */ .gated { transition: filter .3s ease; } body:not(.unlocked) .gated { filter: blur(7px); pointer-events: none; user-select: none; -webkit-user-select: none; } /* materials list (resource hub + unlocked downloads) — add a .material to extend */ .materials { display: grid; gap: 12px; max-width: 580px; margin: 4px auto 0; text-align: left; } .material { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; flex-wrap: wrap; } .material .m-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); flex-shrink: 0; } .material .m-ic svg { width: 20px; height: 20px; } .material .m-meta { flex: 1; min-width: 150px; } .material .m-meta .m-t { font-weight: 600; font-size: 15.5px; } .material .m-meta .m-d { color: var(--ink-faint); font-size: 13px; margin-top: 1px; } .material .m-acts { display: flex; gap: 8px; flex-wrap: wrap; } .material .m-acts .btn { padding: 9px 14px; font-size: 13.5px; } .material.soon { opacity: 0.6; } .material.soon .m-ic { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-faint); } @media (max-width: 540px) { .gatebox-form { flex-direction: column; } .material .m-acts { width: 100%; } } /* ===================== ARTICLE SHELL (shared by articles/*.html) ===================== */ /* ---- article shell: narrow reading column like the guide ---- */ .article { max-width: 720px; padding-top: 40px; padding-bottom: 88px; } .crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); margin: 0 0 22px; } .crumbs a { color: var(--ink-soft); } .crumbs a:hover { color: var(--accent); } .crumbs span { color: var(--ink-faint); margin: 0 8px; } .art-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 34px; } .art-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(31px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.025em; margin: 10px 0 16px; color: var(--ink); } .art-head .dek { font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); margin: 0; line-height: 1.5; max-width: 620px; } /* ---- article typography ---- */ .article .body { font-size: 17.5px; line-height: 1.68; color: var(--ink-soft); } .article .body > p { margin: 0 0 18px; } .article .body p strong, .article .body li strong { color: var(--ink); font-weight: 600; } .article .body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; } .article .body a:hover { text-decoration-color: var(--accent); } .article .body h2 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: clamp(23px, 3vw, 28px); line-height: 1.18; letter-spacing: -0.02em; margin: 50px 0 14px; scroll-margin-top: 90px; } .article .body h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 18.5px; letter-spacing: -0.005em; margin: 30px 0 8px; } .article .body ul { padding-left: 20px; margin: 0 0 18px; } .article .body li { margin-bottom: 9px; } .article .body li::marker { color: var(--accent); } /* lead paragraph gets a touch more presence */ .article .body > p.lead { font-size: 19px; color: var(--ink); line-height: 1.62; } /* callouts (lifted from the guide style) */ .callout { background: var(--accent-soft); border: 1px solid var(--accent-line); border-left-width: 3px; padding: 16px 20px; border-radius: var(--radius-sm); margin: 24px 0; color: var(--ink); } .callout p { margin: 0; } .callout p + p { margin-top: 10px; } .callout .label { display: block; text-transform: uppercase; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; font-weight: 700; color: var(--accent); margin-bottom: 6px; } .callout.warn { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); } .callout.warn .label { color: var(--warn); } /* asset-class / numbers split tiles */ .splits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; } .split { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; } .split .amt { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; } .split .what { font-size: 15px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; } .split .note { font-size: 13.5px; color: var(--ink-faint); margin: 0; line-height: 1.5; } @media (max-width: 560px) { .splits { grid-template-columns: 1fr; } } /* the ways-to-invest quick table */ .paths { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin: 24px 0; } .path-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); } .path-row:last-child { border-bottom: none; } .path-row .p-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15.5px; } .path-row .p-name span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-dim); margin-top: 3px; } .path-row .p-desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } @media (max-width: 560px) { .path-row { grid-template-columns: 1fr; gap: 4px; } } hr.rule { border: none; border-top: 1px solid var(--line); margin: 44px 0; } /* end-of-article CTA */ .art-cta { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } .art-cta h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.01em; } .art-cta p { margin: 0; color: var(--ink-soft); font-size: 14.5px; max-width: 440px; line-height: 1.5; } .art-cta .btn { flex: none; } .art-disclaimer { font-size: 13.5px; color: var(--ink-faint); font-style: italic; margin: 30px 0 0; line-height: 1.55; } /* ---- article cover: topic graphic + author chip ---- */ .art-cover { position: relative; margin: 0 0 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; aspect-ratio: 1024 / 572; } .art-cover .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .art-cover .cover-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,0) 38%, rgba(10,12,16,0.86) 100%); } .cover-author { position: absolute; left: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 12px; padding: 7px 18px 7px 7px; border-radius: 999px; background: rgba(12,15,20,0.58); border: 1px solid var(--line-2); backdrop-filter: blur(9px) saturate(120%); -webkit-backdrop-filter: blur(9px) saturate(120%); } .cover-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 13%; border: 2px solid var(--accent-line); background: var(--surface-2); flex: none; } .cover-author .ca-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.15; } .cover-author .ca-tag { font-size: 13px; color: var(--accent); margin-top: 1px; } .cover-author .ca-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; } @media (max-width: 560px) { .art-cover { aspect-ratio: 1024 / 572; } .cover-author img { width: 46px; height: 46px; } } /* ===================== PRINT / PDF ===================== Full-bleed dark document: zero page margin, dark background edge-to-edge, generous internal padding on .wrap so text never touches the page edge. Pair with playwright pdf({ margin:0, printBackground:true }). */ @media print { @page { margin: 0; } html, body { background: #0b1524 !important; --surface: #16263f; --surface-2: #1c2e4a; --line: rgba(150,180,225,0.16); --ink-faint: #9fb0c8; --ink-dim: #9fb0c8; /* lift muted tokens to AA on the navy PDF bg */ color: var(--ink); font-size: 10.5pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body::before, body::after { display: none !important; } .nav, .footer, .no-print, .btn, .socials, .to-top, .gatebox { display: none !important; } .print-only { display: block !important; } /* scroll-reveal never fires without scrolling — force everything visible in print */ .reveal { opacity: 1 !important; transform: none !important; } /* gated content always prints in full */ .gated { filter: none !important; pointer-events: auto !important; user-select: auto !important; } a { color: var(--accent); text-decoration: none; } /* the dark fill carries the page; .wrap holds the breathing room */ .wrap { max-width: 100%; padding: 15mm 15mm 16mm; background: #0b1524 !important; } /* Keep small, atomic blocks whole; let big containers (sections, tiers, long lists) flow across pages so they never leave a half-empty page behind. */ .callout, .note, .tile, .inst, .tk, .spec, .ratio-row, .theme { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; } p, li, blockquote { orphans: 2; widows: 2; } /* ---- masthead / cover band ---- */ .print-head { margin: 0 0 10mm; padding: 0 0 6mm; border-bottom: 1px solid var(--accent-line); page-break-after: avoid; break-after: avoid; } .print-head .b { font-family: var(--font-display); font-weight: 700; font-size: 16pt; letter-spacing: -0.01em; color: var(--ink) !important; } .print-head .u { font-family: var(--font-mono); font-size: 9pt; letter-spacing: 0.04em; color: var(--accent) !important; margin-top: 3px; } .print-head .print-disclaimer { font-family: var(--font-body); font-weight: 400; font-style: normal; font-size: 8pt; color: var(--ink-faint); margin: 8px 0 0; line-height: 1.45; max-width: 165mm; } /* guide: numbered sections read as clean "chapters" in the PDF */ section:has(> h2 .section-num) { border-top: 1px solid var(--accent-line); padding-top: 8mm; margin-top: 8mm; } section:has(> h2 .section-num) > h2 { margin-top: 0 !important; } h2 .section-num { font-weight: 700; color: var(--accent) !important; } } .print-only { display: none; }