/* Mode-specific overrides applied via [data-mode] on */ /* ===== THEMES — palette swap within Editorial mode ===== */ /* Default theme = Cream (matches existing :root). Selectors below kick in only when [data-mode="editorial"] AND a non-default [data-theme] is set. */ /* SLATE — cool slate background, indigo ink, terracotta accent retained */ html[data-mode="editorial"][data-theme="slate"] { --bg: #e8ecef; --bgAlt: #dce2e7; --ink: #1d2a36; --inkSoft: #38495a; --muted: #6b7785; --rule: #c2cbd3; --surface: #f3f5f7; --accent: #d97757; --accentInk: #ffffff; } /* PAPER — neutral warm off-white, deep ink, terracotta accent */ html[data-mode="editorial"][data-theme="paper"] { --bg: #f5f2eb; --bgAlt: #ece8df; --ink: #221f1a; --inkSoft: #3a3530; --muted: #76706a; --rule: #d4cdbf; --surface: #ffffff; --accent: #d97757; --accentInk: #ffffff; } /* ===== EDITORIAL (default — already in legal.css) ===== */ html[data-mode="editorial"] { --bg: #fff8ec; --bgAlt: #fbf1de; --ink: #1a3a2e; --inkSoft: #3a5a4e; --muted: #6e7a6e; --rule: #dccfb1; --surface: #ffffff; --accent: #c9622e; --accentInk: #fff8ec; --display-font: 'IBM Plex Sans', sans-serif; --body-font: 'IBM Plex Sans', sans-serif; --mono-font: 'IBM Plex Mono', monospace; --italic-font: 'IBM Plex Serif', serif; } /* ===== BUREAUCRATIC — stamp paper, formal document feel ===== */ html[data-mode="bureaucratic"] { --bg: #f4ecd8; /* manila */ --bgAlt: #ebe1c6; --ink: #14110b; /* near-black ink */ --inkSoft: #2a2520; --muted: #6b5f47; --rule: #b8a378; --surface: #faf3df; --accent: #6b1a1a; /* official seal red */ --accentInk: #f4ecd8; --display-font: 'Fraunces', 'IBM Plex Serif', serif; --body-font: 'IBM Plex Serif', Georgia, serif; --mono-font: 'IBM Plex Mono', monospace; --italic-font: 'Fraunces', serif; } html[data-mode="bureaucratic"] .legal-header h1 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; } html[data-mode="bureaucratic"] .legal-header h1 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -.01em; } html[data-mode="bureaucratic"] body { font-family: 'IBM Plex Serif', Georgia, serif; background-image: repeating-linear-gradient(0deg, transparent 0 30px, rgba(107,26,26,.025) 30px 31px); } html[data-mode="bureaucratic"] .nav { background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom: 2px double var(--rule); } html[data-mode="bureaucratic"] .content h2 { font-family: 'Fraunces', serif; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 22px; } html[data-mode="bureaucratic"] .content h2 .num { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-weight: 600; } html[data-mode="bureaucratic"] .content section { border-top: 1px dashed var(--rule); } html[data-mode="bureaucratic"] .content p { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 15.5px; line-height: 1.7; color: var(--inkSoft); text-indent: 0; } html[data-mode="bureaucratic"] .legal-header::after { content: ""; display: block; margin-top: 28px; width: 64px; height: 64px; border: 2px solid var(--accent); border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 28px, var(--accent) 28px, var(--accent) 30px, transparent 30px), repeating-conic-gradient(from 0deg at 50% 50%, var(--accent) 0deg 4deg, transparent 4deg 12deg); mask: radial-gradient(circle at 50% 50%, black 22px, transparent 22px, black 24px, black 32px, transparent 32px); opacity: .7; transform: rotate(-8deg); } html[data-mode="bureaucratic"] .toc { border-left: 2px solid var(--ink); } html[data-mode="bureaucratic"] .content .callout { background: var(--surface); border-left: 4px double var(--accent); border-radius: 0; } html[data-mode="bureaucratic"] .mailto-block { background: var(--accent); color: var(--accentInk); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } html[data-mode="bureaucratic"] .identity-card { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); box-shadow: 4px 4px 0 var(--rule); } html[data-mode="bureaucratic"] .identity-card .row { border-bottom: 1px solid var(--rule); } html[data-mode="bureaucratic"] footer.site-footer { border-top: 2px double var(--rule); } /* ===== CONSOLE — terminal/dev-doc feel ===== */ html[data-mode="console"] { --bg: #0e1413; --bgAlt: #131a18; --ink: #e8e4d6; --inkSoft: #b8bfb6; --muted: #6f7a73; --rule: #1f2826; --surface: #161e1c; --accent: #6fcf97; /* terminal green */ --accentInk: #0e1413; --display-font: 'JetBrains Mono', 'IBM Plex Mono', monospace; --body-font: 'JetBrains Mono', 'IBM Plex Mono', monospace; --mono-font: 'JetBrains Mono', 'IBM Plex Mono', monospace; --italic-font: 'JetBrains Mono', monospace; } html[data-mode="console"] body { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; background-image: radial-gradient(ellipse at 50% 0%, rgba(111,207,151,.05), transparent 60%); } html[data-mode="console"] .legal-header h1 { font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: -.03em; font-size: clamp(36px, 5vw, 56px); } html[data-mode="console"] .legal-header h1 em { font-family: 'JetBrains Mono', monospace; font-style: normal; color: var(--accent); font-weight: 600; } html[data-mode="console"] .legal-header h1::before { content: "$ cat "; color: var(--muted); font-weight: 400; } html[data-mode="console"] .legal-header h1::after { content: "_"; color: var(--accent); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } html[data-mode="console"] .legal-header .meta span::before { color: var(--accent); } html[data-mode="console"] .content h2 { font-family: 'JetBrains Mono', monospace; font-weight: 600; } html[data-mode="console"] .content h2::before { content: "## "; color: var(--accent); font-weight: 400; } html[data-mode="console"] .content h2 .num { display: none; } html[data-mode="console"] .content p { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.7; } html[data-mode="console"] .content ul li { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; } html[data-mode="console"] .content ul li::before { content: ">"; background: transparent; color: var(--accent); width: auto; height: auto; top: 0; font-family: 'JetBrains Mono', monospace; font-weight: 600; } html[data-mode="console"] .content section { border-top: 1px dashed var(--rule); } html[data-mode="console"] .toc { border-left: 2px solid var(--accent); } html[data-mode="console"] .toc a::before { content: "·"; color: var(--accent); margin-right: 6px; } html[data-mode="console"] .content .callout { background: var(--surface); border-left: 3px solid var(--accent); } html[data-mode="console"] .content .callout .label::before { content: "// "; } html[data-mode="console"] .mailto-block { background: transparent !important; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-size: 13px; } html[data-mode="console"] .mailto-block::before { content: "→ "; } html[data-mode="console"] .identity-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none; } html[data-mode="console"] .identity-card .row .v.placeholder { color: var(--accent); font-style: normal; font-family: 'JetBrains Mono', monospace; } html[data-mode="console"] .nav { background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom: 1px solid var(--rule); } html[data-mode="console"] .brand-name::after { content: " ~/"; color: var(--muted); } html[data-mode="console"] .eyebrow { color: var(--accent); } html[data-mode="console"] .eyebrow::before { content: "// "; } html[data-mode="console"] .content a { color: var(--accent); border-bottom-color: var(--accent); } html[data-mode="console"] .mono { color: var(--accent); } /* ===== DENSITY — reshapes spacing + type rhythm together ===== */ html[data-density="roomy"] { --section-gap: 64px; --para-gap: 22px; --line-h: 1.78; --type-scale: 1.08; --rule-weight: 1px; } html[data-density="comfortable"] { --section-gap: 36px; --para-gap: 14px; --line-h: 1.62; --type-scale: 1; --rule-weight: 1px; } html[data-density="compact"] { --section-gap: 18px; --para-gap: 8px; --line-h: 1.45; --type-scale: .94; --rule-weight: .5px; } html[data-density] .content section { padding: var(--section-gap) 0 calc(var(--section-gap) + 4px); } html[data-density] .content p { margin-bottom: var(--para-gap); line-height: var(--line-h); font-size: calc(15.5px * var(--type-scale)); } html[data-density] .content h2 { font-size: calc(26px * var(--type-scale)); margin-bottom: calc(18px * var(--type-scale)); } html[data-density] .content section { border-top-width: var(--rule-weight); } html[data-density="compact"] .legal-header h1 { font-size: clamp(32px, 4.4vw, 48px); } html[data-density="compact"] .content ul { gap: 4px; } html[data-density="roomy"] .content ul { gap: 14px; } html[data-density="roomy"] .legal-header { margin-bottom: 72px; } html[data-density="compact"] .legal-header { margin-bottom: 28px; } /* Mode-aware h1 italic */ html[data-mode="editorial"] .legal-header h1 em { font-family: 'IBM Plex Serif', serif; font-style: italic; }