/* ============================================================ Field Report — competitive dossier design system Mode: READ (build understanding through clear argument) Dual-theme with contrast + hierarchy parity. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Type */ --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-prose: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale — 1.25 ratio, clamped */ --t-mono: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.125rem; --t-prose: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); --t-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --t-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); --t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem); /* Rhythm */ --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --measure: 68ch; --wrap: 1240px; --rail: 3.25rem; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); color-scheme: dark; } /* Dark (default) */ :root, :root[data-theme="dark"] { --bg: #0a0c11; --bg-raised: #11141b; --bg-sunken: #07080c; --ink: #edeff5; --ink-soft: #a7adbd; --ink-faint: #6d7488; --line: #1e222c; --line-strong: #2c313e; --aj: #ff8a4c; /* AlohaJet — warm */ --aj-dim: #b35c30; --aj-wash: rgba(255, 138, 76, 0.09); --bu: #7aa2ff; /* Browser Use — cool */ --bu-dim: #4f6bb0; --bu-wash: rgba(122, 162, 255, 0.09); --flag: #ff5f56; /* red-flag */ --flag-wash: rgba(255, 95, 86, 0.1); --ok: #4ec9a5; --ok-wash: rgba(78, 201, 165, 0.1); --warn: #e0b341; --warn-wash: rgba(224, 179, 65, 0.1); --shadow: 0 1px 0 rgba(255, 255, 255, 0.03); } /* Light */ :root[data-theme="light"] { color-scheme: light; --bg: #fbfbf9; --bg-raised: #ffffff; --bg-sunken: #f2f2ee; --ink: #12141a; --ink-soft: #4d5361; --ink-faint: #7d8494; --line: #e3e3de; --line-strong: #d0d0c9; --aj: #c2410c; --aj-dim: #ea8144; --aj-wash: rgba(194, 65, 12, 0.07); --bu: #3352c4; --bu-dim: #7b91d8; --bu-wash: rgba(51, 82, 196, 0.07); /* Deliberately crimson, not orange — must stay distinguishable from --aj (#c2410c), which sits only a few degrees away on the hue wheel. */ --flag: #9d1420; --flag-wash: rgba(157, 20, 32, 0.08); --ok: #10715a; --ok-wash: rgba(16, 113, 90, 0.08); --warn: #8a6413; --warn-wash: rgba(138, 100, 19, 0.09); --shadow: 0 1px 2px rgba(16, 18, 24, 0.05); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #fbfbf9; --bg-raised: #ffffff; --bg-sunken: #f2f2ee; --ink: #12141a; --ink-soft: #4d5361; --ink-faint: #7d8494; --line: #e3e3de; --line-strong: #d0d0c9; --aj: #c2410c; --aj-dim: #ea8144; --aj-wash: rgba(194, 65, 12, 0.07); --bu: #3352c4; --bu-dim: #7b91d8; --bu-wash: rgba(51, 82, 196, 0.07); --flag: #9d1420; --flag-wash: rgba(157, 20, 32, 0.08); --ok: #10715a; --ok-wash: rgba(16, 113, 90, 0.08); --warn: #8a6413; --warn-wash: rgba(138, 100, 19, 0.09); --shadow: 0 1px 2px rgba(16, 18, 24, 0.05); } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* NOTE: deliberately no overflow-x guard here or on . Setting overflow-x on either element forces the other axis off `visible`, which changes the scroll container and pins window.scrollY at 0 — silently breaking the reading progress bar and every programmatic scroll. Wide content (tables) is contained by its own .scroller instead. */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; } p { margin: 0; } a { color: inherit; } ::selection { background: var(--aj); color: var(--bg); } /* ---------- 3. Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 0.6rem + 2.6vw, 2.75rem); } .section { padding-block: var(--section-y); } .section + .section { border-top: 1px solid var(--line); } /* Section head: mono index in a left rail, title beside it */ .shead { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 clamp(0.75rem, 0.4rem + 1vw, 1.25rem); align-items: start; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); } .shead__idx { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; color: var(--ink-faint); letter-spacing: 0.06em; padding-top: 0.55em; font-variant-numeric: tabular-nums; } .shead__title { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.03em; } .shead__sub { grid-column: 2; margin-top: 0.9rem; max-width: var(--measure); font-family: var(--font-prose); font-size: var(--t-prose); line-height: 1.62; color: var(--ink-soft); } @media (max-width: 640px) { .shead { grid-template-columns: 1fr; } .shead__idx { padding-top: 0; margin-bottom: 0.6rem; } .shead__sub { grid-column: 1; } } /* ---------- 4. Utility atoms ---------- */ .mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .prose { font-family: var(--font-prose); font-size: var(--t-prose); line-height: 1.66; color: var(--ink-soft); max-width: var(--measure); } .prose strong { color: var(--ink); font-weight: 600; } .prose + .prose { margin-top: 1.05em; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* Tag — mono pill, no chip-soup: only ever one per element */ .tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.3em 0.6em; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-faint); white-space: nowrap; } .tag--aj { color: var(--aj); border-color: color-mix(in srgb, var(--aj) 38%, transparent); background: var(--aj-wash); } .tag--bu { color: var(--bu); border-color: color-mix(in srgb, var(--bu) 38%, transparent); background: var(--bu-wash); } .tag--flag { color: var(--flag); border-color: color-mix(in srgb, var(--flag) 38%, transparent); background: var(--flag-wash); } .tag--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: var(--ok-wash); } .tag--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-wash); } /* ---------- 5. Focus + a11y ---------- */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--aj); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--bg-raised); color: var(--ink); padding: 0.7rem 1rem; border: 1px solid var(--line-strong); border-radius: 4px; } .skip:focus { left: 1rem; top: 1rem; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 6. Reveal (subtle, non-looping) ---------- */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }