/* ============================================================ WORLD PULSE — Weekly Briefing Reusable template stylesheet. Theme is driven by [data-theme] on ; everything else reads from CSS custom properties so an agent can refill the content without touching the design. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ============================================================ THEME TOKENS ============================================================ */ :root { /* density + scale (overridden by tweaks) */ --fs-base: 18px; --leading: 1.62; --sp-section: clamp(56px, 8vw, 104px); --maxw: 760px; /* shared confidence palette (legible on light + dark) */ --c-low: #c98a2b; --c-med: #3f80c4; --c-high: #3f9c74; /* fonts (per-theme overrides below) */ --font-display: "Spectral", Georgia, serif; --font-body: "Spectral", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --ease: cubic-bezier(.22,.61,.36,1); } /* ----- DOSSIER (default): dark navy intelligence file ----- */ :root, :root[data-theme="dossier"] { --bg: #0c1622; --bg-2: #112135; --bg-3: #16293f; --ink: #e7eef6; --ink-soft: #9fb4c8; --ink-faint: #61788f; --rule: rgba(255,255,255,.11); --rule-strong: rgba(255,255,255,.2); --accent: #7fb2e6; --accent-2: #d6a35c; --cover-bg: radial-gradient(120% 130% at 18% 0%, #16344f 0%, #0c1622 58%, #070d15 100%); --cover-ink: #eef5fc; --tag-bg: rgba(127,178,230,.10); --shadow: 0 18px 50px -24px rgba(0,0,0,.7); --font-display: "Spectral", Georgia, serif; --font-body: "Spectral", Georgia, serif; } /* ----- ARCHIVAL: warm paper, editorial restraint ----- */ :root[data-theme="archival"] { --bg: #f4f1e9; --bg-2: #ece7da; --bg-3: #e3ddcc; --ink: #211d17; --ink-soft: #6c6457; --ink-faint: #9b9285; --rule: rgba(33,29,23,.14); --rule-strong: rgba(33,29,23,.32); --accent: #9c3b2e; --accent-2: #1f4663; --cover-bg: radial-gradient(120% 130% at 20% 0%, #2a2620 0%, #17140f 70%); --cover-ink: #f4efe4; --tag-bg: rgba(156,59,46,.07); --shadow: 0 18px 44px -26px rgba(40,30,20,.4); --font-display: "Spectral", Georgia, serif; --font-body: "Spectral", Georgia, serif; } /* ----- TERMINAL: near-black, monospace, data-forward ----- */ :root[data-theme="terminal"] { --bg: #0a0c0a; --bg-2: #11150f; --bg-3: #182013; --ink: #d6e3cf; --ink-soft: #87977e; --ink-faint: #57634e; --rule: rgba(120,220,150,.14); --rule-strong: rgba(120,220,150,.28); --accent: #56e08b; --accent-2: #d9c15a; --cover-bg: radial-gradient(120% 130% at 15% 0%, #13200f 0%, #0a0c0a 65%); --cover-ink: #e4f3dd; --tag-bg: rgba(86,224,139,.08); --shadow: 0 18px 50px -24px rgba(0,0,0,.8); --c-low: #d3a13b; --c-med: #4bb0d8; --c-high: #56e08b; --font-display: "IBM Plex Mono", ui-monospace, monospace; --font-body: "IBM Plex Mono", ui-monospace, monospace; --leading: 1.66; } /* ----- REPORT: clean, light, structured ----- */ :root[data-theme="report"] { --bg: #ffffff; --bg-2: #f4f7fa; --bg-3: #eaf0f5; --ink: #15212d; --ink-soft: #56697b; --ink-faint: #93a4b4; --rule: #e4eaf0; --rule-strong: #c8d4df; --accent: #1f567f; --accent-2: #2b8a8f; --cover-bg: radial-gradient(120% 130% at 80% 0%, #1f567f 0%, #102a40 70%); --cover-ink: #f1f6fb; --tag-bg: rgba(31,86,127,.06); --shadow: 0 18px 40px -28px rgba(20,40,60,.35); --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; } /* density variants (tweak) */ :root[data-density="compact"] { --fs-base: 16px; --leading: 1.52; --sp-section: clamp(40px,6vw,72px); } :root[data-density="comfy"] { --fs-base: 19px; --leading: 1.74; --sp-section: clamp(68px,9vw,128px); } /* ============================================================ BASE ============================================================ */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--leading); font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .4s var(--ease), color .4s var(--ease); } ::selection { background: var(--accent); color: var(--bg); } /* reading-progress bar */ #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 60; transition: width .12s linear; } /* ============================================================ COVER ============================================================ */ .cover { position: relative; min-height: 100svh; background: var(--cover-bg); color: var(--cover-ink); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(28px, 5vw, 64px); overflow: hidden; } .cover::after { /* faint grid texture */ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%); opacity: .5; } .cover > * { position: relative; z-index: 1; } .cover__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .brandmark { display: flex; align-items: center; gap: 14px; } .brandmark .pulse-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.6s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .brandmark .brand-name { font-family: var(--font-mono); font-size: 14px; letter-spacing: .42em; text-transform: uppercase; font-weight: 600; } .cover__edition { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--cover-ink) 66%, transparent); text-align: right; line-height: 1.7; } .cover__center { align-self: center; max-width: 16ch; padding: clamp(16px,4vw,40px) 0; } .cover__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; } .cover__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 9vw, 116px); line-height: .96; letter-spacing: -.02em; text-wrap: balance; } .cover__title em { font-style: italic; color: var(--accent); font-weight: 500; } .cover__sub { margin-top: 26px; max-width: 30ch; font-size: clamp(17px, 2vw, 22px); line-height: 1.5; color: color-mix(in srgb, var(--cover-ink) 80%, transparent); } .cover__foot { display: grid; gap: 28px; } .epigraph { max-width: 60ch; border-left: 2px solid var(--accent); padding-left: 22px; } .epigraph blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 2.1vw, 23px); line-height: 1.46; color: var(--cover-ink); text-wrap: pretty; } .epigraph figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--cover-ink) 60%, transparent); } .cover__meta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); padding-top: 22px; } .cover__meta .cell { flex: 1 1 180px; padding-right: 24px; border-right: 1px solid var(--rule); } .cover__meta .cell:last-child { border-right: none; } .cover__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--cover-ink) 55%, transparent); margin-bottom: 7px; } .cover__meta dd { font-size: 15px; line-height: 1.4; color: var(--cover-ink); } .scroll-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--cover-ink) 50%, transparent); display: flex; align-items: center; gap: 8px; animation: bob 2.4s var(--ease) infinite; } @keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,5px);} } /* ============================================================ SHELL / LAYOUT ============================================================ */ .shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0; max-width: 1320px; margin: 0 auto; } /* ---- Sidebar / TOC ---- */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; padding: 40px 26px 40px 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; } .sidebar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .sidebar__brand .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .sidebar__edition { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); text-transform: uppercase; line-height: 1.6; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .toc { display: flex; flex-direction: column; gap: 1px; } .toc__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .toc a { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 6px; padding: 7px 10px; border-radius: 7px; color: var(--ink-soft); font-size: 14px; line-height: 1.3; transition: background .18s var(--ease), color .18s var(--ease); } .toc a .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } .toc a:hover { background: var(--bg-2); color: var(--ink); } .toc a.is-active { background: var(--bg-2); color: var(--ink); } .toc a.is-active .num { color: var(--accent); } .toc a.is-active { box-shadow: inset 2px 0 0 var(--accent); } .sidebar__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); line-height: 1.7; } /* ---- Mobile top bar ---- */ .topbar { display: none; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .topbar__brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; } .topbar__brand .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .menu-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); padding: 8px 14px; border-radius: 8px; cursor: pointer; } .drawer-backdrop { display: none; } /* ---- Content column ---- */ .content { min-width: 0; padding: 0 clamp(20px, 4vw, 56px); } .article { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px,7vw,88px) 0 120px; } /* ============================================================ DASHBOARD STRIP (key figures) ============================================================ */ .dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-bottom: var(--sp-section); } .dash__cell { background: var(--bg); padding: 20px 18px; } .dash__val { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; letter-spacing: -.01em; color: var(--ink); } .dash__val .u { font-size: .5em; color: var(--ink-soft); font-weight: 500; margin-left: 3px; } .dash__label { margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.5; } .dash__cell .flag { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-low); border: 1px solid color-mix(in srgb, var(--c-low) 45%, transparent); padding: 1px 6px; border-radius: 20px; } /* ============================================================ SECTIONS ============================================================ */ .section { padding-top: var(--sp-section); scroll-margin-top: 24px; } .section:first-of-type { padding-top: 0; } .section__head { margin-bottom: 34px; } .section__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; } .section__num::after { content: ""; width: 46px; height: 1px; background: var(--rule-strong); } .section__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -.018em; margin-top: 16px; text-wrap: balance; } .section__standfirst { margin-top: 16px; color: var(--ink-soft); font-size: 1.06em; max-width: 60ch; } /* prose */ .prose p { margin-top: 1.1em; color: var(--ink); text-wrap: pretty; } .prose p:first-child { margin-top: 0; } .prose strong { font-weight: 600; } .lead { font-size: 1.16em; line-height: 1.5; color: var(--ink); } .lead::first-letter { font-family: var(--font-display); font-weight: 600; float: left; font-size: 3.1em; line-height: .82; padding: 6px 12px 0 0; color: var(--accent); } /* ============================================================ BADGES + TAGS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge--low { color: var(--c-low); background: color-mix(in srgb, var(--c-low) 12%, transparent); border-color: color-mix(in srgb, var(--c-low) 32%, transparent); } .badge--med { color: var(--c-med); background: color-mix(in srgb, var(--c-med) 12%, transparent); border-color: color-mix(in srgb, var(--c-med) 32%, transparent); } .badge--high { color: var(--c-high); background: color-mix(in srgb, var(--c-high) 13%, transparent); border-color: color-mix(in srgb, var(--c-high) 34%, transparent); } .badge--new { color: var(--accent); background: var(--tag-bg); border-color: color-mix(in srgb, var(--accent) 38%, transparent); } .badge--neutral { color: var(--ink-soft); border-color: var(--rule-strong); } .tags { display: flex; flex-wrap: wrap; gap: 7px; } .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); background: var(--tag-bg); border: 1px solid var(--rule); padding: 3px 10px; border-radius: 6px; white-space: nowrap; } .tag--geo::before { content: "◦ "; color: var(--accent); } /* ============================================================ SIGNAL CARDS (weak signals) ============================================================ */ .signals { display: grid; gap: 20px; } .signal { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(20px, 3vw, 30px); position: relative; box-shadow: var(--shadow); } .signal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .signal__id { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); text-transform: uppercase; } .signal__lede { font-size: 1.02em; color: var(--ink); margin-bottom: 18px; } .signal__lede b { color: var(--accent); font-weight: 600; } .fields { display: grid; gap: 13px; } .field { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; } .field__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; } .field__v { color: var(--ink-soft); font-size: .96em; } .field__v b { color: var(--ink); font-weight: 600; } .signal__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; } /* horizon mini-timeline */ .horizon { display: grid; gap: 10px; } .horizon__row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; } .horizon__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .horizon__k small { display: block; color: var(--ink-faint); letter-spacing: .04em; } .horizon__v { color: var(--ink-soft); font-size: .95em; } /* ============================================================ CROSS-DOMAIN CONNECTIONS ============================================================ */ .connections { display: grid; gap: 18px; counter-reset: conn; } .connection { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--bg-2); } .connection__head { display: flex; align-items: center; gap: 14px; padding: 18px clamp(18px,3vw,26px); border-bottom: 1px solid var(--rule); } .connection__no { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--bg); background: var(--accent); } .connection__chain { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink); line-height: 1.5; } .connection__chain .arrow { color: var(--accent); margin: 0 5px; } .connection__body { padding: 18px clamp(18px,3vw,26px); color: var(--ink-soft); } .connection__body p { margin-top: 0; } /* ============================================================ SCENARIOS + probability bars ============================================================ */ .scenarios { display: grid; gap: 18px; } .scenario { border: 1px solid var(--rule); border-radius: 14px; padding: clamp(20px,3vw,28px); background: var(--bg-2); } .scenario__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .scenario__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .scenario__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3em; line-height: 1.18; max-width: 30ch; } .prob { min-width: 190px; } .prob__label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; } .prob__label b { color: var(--ink); } .prob__track { height: 7px; border-radius: 20px; background: var(--bg-3); overflow: hidden; } .prob__fill { height: 100%; border-radius: 20px; background: var(--accent); width: 0; transition: width 1s var(--ease); } .scenario p { margin-top: 16px; color: var(--ink-soft); } .note-box { margin-top: 20px; border-left: 2px solid var(--accent-2); padding: 4px 0 4px 18px; color: var(--ink-soft); font-size: .96em; } .note-box b { color: var(--ink); font-weight: 600; } /* ============================================================ CONFIDENCE DISTRIBUTION (dataviz) ============================================================ */ .distrib { border: 1px solid var(--rule); border-radius: 14px; padding: clamp(20px,3vw,28px); background: var(--bg-2); margin-bottom: 30px; } .distrib__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; } .distrib__bar { display: flex; height: 36px; border-radius: 8px; overflow: hidden; gap: 2px; } .distrib__seg { display: grid; place-items: center; min-width: 28px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--bg); transition: flex-grow .8s var(--ease); } .distrib__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; } .distrib__legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); } .distrib__legend .sw { width: 10px; height: 10px; border-radius: 3px; } /* ============================================================ DOMAIN PROSE (12 domains) ============================================================ */ .domains { display: grid; gap: 6px; } .domain { padding: 26px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 200px 1fr; gap: 28px; } .domain:last-child { border-bottom: 1px solid var(--rule); } .domain__name { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); align-self: start; position: sticky; top: 18px; } .domain__name .idx { display: block; color: var(--accent); font-size: 11px; margin-bottom: 6px; } .domain__body { color: var(--ink-soft); } .domain__body p { margin-top: 0; } .domain__body b { color: var(--ink); font-weight: 600; } /* ============================================================ TRACKER / MONITOR lists ============================================================ */ .callout { border: 1px solid var(--rule); border-left: 3px solid var(--accent-2); border-radius: 10px; background: var(--bg-2); padding: 18px 22px; margin: 22px 0; color: var(--ink-soft); } .callout b { color: var(--ink); font-weight: 600; } .flag-list { display: grid; gap: 12px; margin-top: 8px; } .flag-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; color: var(--ink-soft); } .flag-list li::before { content: ""; width: 7px; height: 7px; margin-top: .55em; border-radius: 2px; background: var(--accent); transform: rotate(45deg); } .flag-list li b { color: var(--ink); font-weight: 600; } .region-table { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-top: 20px; } .region-table .row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; background: var(--bg); padding: 15px 18px; } .region-table .row .rk { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .region-table .row .rv { color: var(--ink-soft); font-size: .96em; } /* ============================================================ WATCHLIST ============================================================ */ .watch { display: grid; gap: 14px; counter-reset: watch; } .watch__item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; background: var(--bg-2); } .watch__no { counter-increment: watch; font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--accent); } .watch__no::before { content: counter(watch, decimal-leading-zero); } .watch__title { font-weight: 600; color: var(--ink); margin-bottom: 6px; } .watch__thresh { color: var(--ink-soft); font-size: .95em; margin-bottom: 12px; } .watch__thresh b { color: var(--ink); font-weight: 600; } /* ============================================================ GLOSSARY ============================================================ */ .glossary { display: grid; gap: 0; border-top: 1px solid var(--rule); } .gloss { display: grid; grid-template-columns: 230px 1fr auto; gap: 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); } .gloss__term { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.04em; } .gloss__term .ab { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); font-weight: 400; margin-top: 4px; } .gloss__def { color: var(--ink-soft); font-size: .96em; } .gloss__status { justify-self: end; } /* ============================================================ METHODOLOGY (disclaimer) — set apart ============================================================ */ .method { border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-2); padding: clamp(24px,4vw,40px); } .method h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 26px 0 10px; } .method h3:first-child { margin-top: 0; } .method p { margin-top: .9em; color: var(--ink-soft); font-size: .97em; } .method p:first-of-type { margin-top: 0; } .rule-thumb { border-left: 2px solid var(--accent); padding-left: 16px; color: var(--ink); } /* ============================================================ END CARD ============================================================ */ .endcard { margin-top: var(--sp-section); padding: clamp(28px,5vw,48px); border: 1px solid var(--rule); border-radius: 16px; text-align: center; background: var(--cover-bg); color: var(--cover-ink); } .endcard .mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .endcard h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px,3.5vw,36px); } .endcard p { margin: 16px auto 0; max-width: 62ch; color: color-mix(in srgb, var(--cover-ink) 78%, transparent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .shell { grid-template-columns: 1fr; } .topbar { display: flex; } .sidebar { position: fixed; top: 0; left: 0; z-index: 55; width: min(86vw, 320px); height: 100svh; transform: translateX(-105%); transition: transform .32s var(--ease); background: var(--bg); box-shadow: var(--shadow); } .sidebar.open { transform: none; } .drawer-backdrop.show { display: block; position: fixed; inset: 0; z-index: 52; background: rgba(0,0,0,.5); } .domain { grid-template-columns: 1fr; gap: 12px; } .domain__name { position: static; } .dash { grid-template-columns: repeat(2,1fr); } .gloss { grid-template-columns: 1fr auto; } .gloss__def { grid-column: 1 / -1; } } @media (max-width: 560px) { .field { grid-template-columns: 1fr; gap: 4px; } .horizon__row, .region-table .row { grid-template-columns: 1fr; gap: 5px; } .dash { grid-template-columns: 1fr 1fr; } .scenario__top { flex-direction: column; } .prob { width: 100%; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ PRINT ============================================================ */ @media print { :root { --fs-base: 10.5pt; --leading: 1.4; } body { background: #fff; color: #111; } #progress, .topbar, .sidebar, .drawer-backdrop, .scroll-hint, #tweaks-root { display: none !important; } .shell { display: block; max-width: none; } .content { padding: 0; } .article { max-width: none; padding: 0; } .cover { min-height: auto; color: #111; background: #fff; page-break-after: always; padding: 0 0 24pt; } .cover::after { display: none; } .cover__title { color: #111; font-size: 40pt; } .cover__title em, .cover__kicker, .cover__meta dt { color: #444; } .epigraph blockquote, .cover__sub, .cover__meta dd { color: #111; } .section { page-break-inside: avoid; padding-top: 26pt; } .signal, .scenario, .connection, .domain, .watch__item, .method, .distrib { page-break-inside: avoid; box-shadow: none; } .endcard { background: #fff; color: #111; border: 1px solid #ccc; } .endcard .mark, .section__num, .scenario__tag { color: #555; } a { color: inherit; } }