/* ============================================================================ Deep-Dive Page chrome , shared page-level styling for /deep-dives/ pages. Companion to deep-dive-lab.css (.ddlab interactive widgets). Consumes /css/tokens.css ONLY (no new tokens). Scope: . Fonts (Source Serif 4 + Inter + JetBrains Mono) are loaded per-page . Extracted 2026-06-19 from the First Principles pages so the look cascades to other deep-dive areas with a single instead of a per-page paste. ========================================================================== */ * { box-sizing: border-box; } body.dd { margin: 0; background: var(--color-bg, #16181C); color: var(--color-text, #F2F3F5); font-family: var(--font-sans, Inter, system-ui, sans-serif); line-height: 1.7; font-size: 1.02rem; } .dd .container { max-width: 820px; margin: 0 auto; padding: 24px 20px 64px; } .dd .container--wide { max-width: 940px; padding-bottom: 48px; } /* skip + back links */ .dd .skip-link { position: absolute; left: -9999px; } .dd .skip-link:focus { left: 0; top: 0; background: var(--color-brand,#FF7A00); color:#16181C; padding:.4rem .8rem; z-index:9999; font-weight:700; border-radius:0 0 2px 0; } .dd .back-link { display:inline-flex; align-items:center; gap:.5rem; color: var(--color-brand,#FF7A00); text-decoration:none; font-family: var(--font-mono,monospace); font-size:.78rem; letter-spacing:.05em; margin-bottom:1.5rem; } .dd .back-link:hover { color: var(--color-yellow,#FFD400); } /* headings + type */ .dd .eyebrow { display:block; font-family: var(--font-mono,monospace); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--color-brand,#FF7A00); margin-bottom:.85rem; } .dd h1 { font-family: var(--font-serif,'Source Serif 4',Georgia,serif); font-weight:700; font-size: clamp(2rem, 4.6vw, 2.8rem); line-height:1.1; letter-spacing:-.01em; margin:0 0 1rem; background: linear-gradient(135deg,#FF7A00 0%, #FF9A00 45%, #FFD400 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .dd h2 { font-family: var(--font-serif,'Source Serif 4',serif); font-weight:600; font-size: clamp(1.45rem,3vw,1.9rem); line-height:1.18; color: var(--color-text-strong,#fff); margin:2.6rem 0 1rem; } .dd h2 .pnum { display:block; font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-brand,#FF7A00); } .dd h3 { font-family: var(--font-serif,'Source Serif 4',serif); font-weight:600; font-size:1.2rem; color: var(--color-brand,#FF7A00); margin:1.4rem 0 .6rem; } .dd .lede { font-size:1.2rem; line-height:1.55; color: var(--color-text,#F2F3F5); max-width:70ch; } .dd p { margin:0 0 1rem; max-width:74ch; } .dd a { color: var(--color-brand,#FF7A00); } .dd a:hover { color: var(--color-yellow,#FFD400); } .dd strong { color: var(--color-text-strong,#fff); font-weight:600; } .dd code { font-family: var(--font-mono,monospace); font-size:.82em; background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:1px 5px; word-break:break-all; } /* research question + cards */ .dd .rq { border-left:3px solid var(--color-brand,#FF7A00); background: rgba(255,122,0,.06); padding:18px 22px; border-radius:0 2px 2px 0; margin:1.4rem 0; } .dd .rq .label { font-family:var(--font-mono,monospace); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-brand,#FF7A00); margin-bottom:.5rem; } .dd .rq .q { font-family:var(--font-serif,serif); font-size:1.25rem; font-weight:600; font-style:italic; color: var(--color-text-strong,#fff); } .dd .card { background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:18px 20px; margin:1.1rem 0; } .dd .card.failure { border-left:3px solid #E5564B; } .dd .card.answer { border-left:3px solid var(--color-brand,#FF7A00); } .dd .card.tradeoff { border-left:3px solid #8a8f98; } .dd .card .label { font-family:var(--font-mono,monospace); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; display:block; } .dd .card.failure .label { color:#E5564B; } .dd .card.answer .label { color:var(--color-brand,#FF7A00); } .dd .card.tradeoff .label { color:#aeb3bb; } .dd .note { background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-left:3px solid #8a8f98; border-radius:2px; padding:18px 20px; margin:1.2rem 0; color: var(--color-text,#F2F3F5); } /* table of contents (flagship) */ .dd .toc { background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:18px 20px; margin:1.4rem 0; } .dd .toc ol { margin:.4rem 0 0; padding-left:1.3rem; columns:2; column-gap:2rem; } .dd .toc a { text-decoration:none; } .dd .toc li { margin-bottom:.3rem; } /* tables */ .dd table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem; } .dd th,.dd td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--color-border,#2D2F35); vertical-align:top; } .dd th { font-family: var(--font-mono,monospace); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-muted,#A9AEB8); font-weight:500; } /* live custom interactives (styled to match .ddlab) */ .dd .lab { background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:20px; margin:1.4rem 0; } .dd .lab__kicker { font-family:var(--font-mono,monospace); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-brand,#FF7A00); font-weight:700; margin-bottom:6px; } .dd .lab__title { font-family:var(--font-serif,serif); font-size:1.18rem; font-weight:600; margin:0 0 4px; color:var(--color-text-strong,#fff); } .dd .lab__intro { color: var(--color-muted,#A9AEB8); font-size:.92rem; margin:0 0 14px; } .dd .lab label { display:block; font-size:.82rem; color: var(--color-muted,#A9AEB8); margin-bottom:6px; font-family:var(--font-mono,monospace); } .dd .lab input[type=text], .dd .lab input[type=range] { width:100%; } .dd .lab input[type=text] { background:#101216; border:1px solid var(--color-border,#2D2F35); color:var(--color-text,#F2F3F5); border-radius:2px; padding:8px 10px; font-family:var(--font-mono,monospace); font-size:.9rem; } .dd .lab input[type=range] { accent-color: var(--color-brand,#FF7A00); } .dd .lab button { background: transparent; color: #FF7A00; border: 2px solid transparent; border-image: linear-gradient(135deg, #FF7A00 0%, #FF9A00 45%, #FFD400 100%) 1; border-radius:2px; padding:8px 16px; font-family:var(--font-mono,monospace); font-weight:600; cursor:pointer; font-size:.85rem; } .dd .lab button:disabled { opacity:.5; cursor:not-allowed; } .dd .lab__out { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; } .dd .lab__stat { background:#101216; border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:12px; text-align:center; } .dd .lab__stat .v { font-family:var(--font-mono,monospace); font-size:1.2rem; font-weight:700; color:var(--color-brand,#FF7A00); word-break:break-all; } .dd .lab__stat .k { font-size:.72rem; color: var(--color-muted,#A9AEB8); margin-top:3px; } .dd .hashline { font-family:var(--font-mono,monospace); font-size:.82rem; word-break:break-all; background:#101216; border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:10px; margin-top:10px; } .dd .hashzeros { color:#2FbF71; font-weight:700; } .dd .ok { color:#2FbF71; } .dd .bad { color:#E5564B; } /* gradient-border buttons on .ddlab interactive controls */ .dd .ddlab button, .dd .ddlab [data-shock], .dd .ddlab [data-next], .dd .ddlab [data-restart], .dd .ddlab__claim-head { background: transparent !important; color: #FF7A00 !important; border: 2px solid transparent !important; border-image: linear-gradient(135deg, #FF7A00 0%, #FF9A00 45%, #FFD400 100%) 1 !important; border-radius: 2px !important; } /* hub cards */ .dd .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:1.4rem 0; } .dd .dive { display:block; background: var(--color-surface,#1F2024); border:1px solid var(--color-border,#2D2F35); border-radius:2px; padding:20px; text-decoration:none; color: var(--color-text,#F2F3F5); transition:border-color .2s, transform .2s; } .dd .dive:hover { border-color: var(--color-brand,#FF7A00); transform:translateY(-2px); } .dd .dive .ico { font-size:1.6rem; margin-bottom:8px; } .dd .dive .ttl { font-family: var(--font-serif,serif); font-weight:600; font-size:1.12rem; color: var(--color-text-strong,#fff); margin-bottom:6px; } .dd .dive .q { font-size:.92rem; color: var(--color-muted,#A9AEB8); margin-bottom:10px; } .dd .dive .tag { font-family: var(--font-mono,monospace); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-muted,#A9AEB8); } .dd .badge { display:inline-block; font-family: var(--font-mono,monospace); font-size:.6rem; padding:2px 7px; border-radius:2px; border:1px solid #2FbF71; color:#2FbF71; margin-left:6px; } /* sources + footer + inline SVG chart */ .dd .sources { font-size:.9rem; color: var(--color-muted,#A9AEB8); } .dd .sources li { margin-bottom:.5rem; } .dd .tier { font-family:var(--font-mono,monospace); font-size:.66rem; color: var(--color-muted,#A9AEB8); } .dd .chart-svg { width:100%; height:auto; background:#101216; border:1px solid var(--color-border,#2D2F35); border-radius:2px; margin:1.1rem 0; } .dd footer { text-align:center; padding:2rem 1rem; margin-top:2rem; border-top:1px solid var(--color-border,#2D2F35); color: var(--color-muted,#A9AEB8); font-size:.85rem; } .dd footer a { color: var(--color-brand,#FF7A00); text-decoration:none; } @media (max-width:680px){ .dd .container { padding:16px 14px 48px; } .dd .toc ol { columns:1; } }