/* ============================================================================ rz-article-dark.css — editorial register for article pages (v1.43.9) Part of RZ Dark System v1 (design.md §16 · DARK_MODE_STANDARD.md). Activates ONLY when BOTH: AND So it never touches light mode or non-opted pages. Restyles the existing .article-* chrome (display type, kickers, meta, callouts) — body copy stays IBM Plex Sans for readability. Each article's series accent is preserved via --rz-art-accent (default warm amber; override per page with style="--rz-art-accent:#ef4444"). Requires the page to load: Fraunces + IBM Plex Sans + IBM Plex Mono. ============================================================================ */ html[data-rz-register="editorial"][data-theme="dark"]{ --rz-art-accent:#E8B563; /* default editorial amber; override per series */ --rz-art-accent2:#6FBF9A; --rz-art-bg:#0E0F12; --rz-art-panel:#16181D; --rz-art-text:#CFD3DA; --rz-art-strong:#F6F7F9; --rz-art-muted:#7E8590; --rz-art-line:rgba(160,168,180,.14); --rz-art-serif:'Fraunces',Georgia,'Times New Roman',serif; --rz-art-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --rz-art-mono:'IBM Plex Mono',ui-monospace,monospace; } /* ---- page canvas ---- */ html[data-rz-register="editorial"][data-theme="dark"] body{ background:var(--rz-art-bg); color:var(--rz-art-text); } /* ---- HERO ---- */ html[data-rz-register="editorial"][data-theme="dark"] .article-hero{ position:relative; background:var(--rz-art-bg) !important; border-bottom:1px solid var(--rz-art-line); overflow:hidden; } html[data-rz-register="editorial"][data-theme="dark"] .article-hero::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(620px 280px at 86% -18%, color-mix(in srgb,var(--rz-art-accent) 12%,transparent), transparent 64%), radial-gradient(460px 240px at 4% 118%, rgba(111,191,154,.06), transparent 66%); } html[data-rz-register="editorial"][data-theme="dark"] .article-hero > *{position:relative;z-index:1;} html[data-rz-register="editorial"][data-theme="dark"] .article-title{ font-family:var(--rz-art-serif) !important; font-weight:500 !important; letter-spacing:-.015em; line-height:1.06 !important; color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-title .highlight{ color:var(--rz-art-accent) !important; font-style:italic; } /* thin accent rule under the hero */ html[data-rz-register="editorial"][data-theme="dark"] .article-hero::after{ content:'';position:absolute;left:50%;bottom:18px;transform:translateX(-50%); width:48px;height:2px;border-radius:2px;background:var(--rz-art-accent);opacity:.9;z-index:1; } /* ---- META (mono, instrument-grade) ---- */ html[data-rz-register="editorial"][data-theme="dark"] .article-meta{ font-family:var(--rz-art-mono) !important; letter-spacing:.03em; border-bottom-color:var(--rz-art-line) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-meta-item, html[data-rz-register="editorial"][data-theme="dark"] .article-meta *{ color:var(--rz-art-muted) !important; } /* ---- BODY: headings to serif, copy stays sans ---- */ html[data-rz-register="editorial"][data-theme="dark"] .article-body h2{ font-family:var(--rz-art-serif) !important; font-weight:600 !important; /* heavier than h3 (500) to restore section/subsection contrast */ letter-spacing:-.01em; color:var(--rz-art-strong) !important; border-left:0 !important; /* drop the generic red bar */ padding-left:0 !important; } /* re-introduce a restrained accent tick before h2 */ html[data-rz-register="editorial"][data-theme="dark"] .article-body h2::before{ content:'';display:inline-block;width:18px;height:2px;border-radius:2px; background:var(--rz-art-accent);vertical-align:middle;margin-right:.6rem; transform:translateY(-4px); } html[data-rz-register="editorial"][data-theme="dark"] .article-body h3{ font-family:var(--rz-art-serif) !important; font-weight:500 !important; color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-body p{ font-family:var(--rz-art-sans) !important; color:var(--rz-art-text) !important; line-height:1.75 !important; } /* drop-cap on the first paragraph of the body */ html[data-rz-register="editorial"][data-theme="dark"] .article-body > p:first-of-type::first-letter{ font-family:var(--rz-art-serif); font-size:3.1rem;font-weight:600;float:left;line-height:.82; padding:6px 10px 0 0;color:var(--rz-art-accent); } /* ---- CALLOUTS / QUOTES → editorial accent rail ---- */ html[data-rz-register="editorial"][data-theme="dark"] .quote-callout{ background:color-mix(in srgb,var(--rz-art-accent) 7%,transparent) !important; border:1px solid color-mix(in srgb,var(--rz-art-accent) 26%,transparent) !important; border-left:1px solid color-mix(in srgb,var(--rz-art-accent) 26%,transparent) !important; /* even hairline; accent now carried by the hanging quote glyph */ } html[data-rz-register="editorial"][data-theme="dark"] .quote-callout blockquote{ font-family:var(--rz-art-serif) !important;font-style:italic; color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .quote-callout cite{ font-family:var(--rz-art-mono) !important; color:var(--rz-art-muted) !important;font-style:normal;letter-spacing:.04em; } /* ============================================================================ INDEX / JOURNAL GRID (articles.html) — editorial register, additive. Scoped to [data-rz-register=editorial][data-theme=dark] so it only applies when the index opts in; never affects the existing light/dark base rules beyond serif display + accent chrome. ============================================================================ */ html[data-rz-register="editorial"][data-theme="dark"] .articles-hero h1{ font-family:var(--rz-art-serif) !important;font-weight:500 !important; letter-spacing:-.015em;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .articles-hero p{ font-family:var(--rz-art-sans) !important;color:var(--rz-art-muted) !important; } /* article cards → serif title + amber category rail, hairline border */ html[data-rz-register="editorial"][data-theme="dark"] .article-card-title{ font-family:var(--rz-art-serif) !important;font-weight:500 !important; letter-spacing:-.01em;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-card-excerpt{ font-family:var(--rz-art-sans) !important;color:var(--rz-art-muted) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-card-number{ font-family:var(--rz-art-mono) !important;color:var(--rz-art-accent) !important; } html[data-rz-register="editorial"][data-theme="dark"] .article-card-category{ font-family:var(--rz-art-mono) !important;letter-spacing:.04em; } /* ============================================================================ SERIES LANDING HEROES (insights / geopolitics / future-forward) — additive. Only the hero H1 + dek + section titles get the editorial serif treatment; bespoke card grids are left to their own (mature) dark rules. Scoped. ============================================================================ */ html[data-rz-register="editorial"][data-theme="dark"] .insights-hero h1, html[data-rz-register="editorial"][data-theme="dark"] .geopolitics-hero h1, html[data-rz-register="editorial"][data-theme="dark"] .futureforward-hero h1, html[data-rz-register="editorial"][data-theme="dark"] .hub-hero h1{ font-family:var(--rz-art-serif) !important;font-weight:500 !important; letter-spacing:-.015em;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"][data-theme="dark"] .insights-hero p, html[data-rz-register="editorial"][data-theme="dark"] .geopolitics-hero p, html[data-rz-register="editorial"][data-theme="dark"] .futureforward-hero p, html[data-rz-register="editorial"][data-theme="dark"] .hub-hero p{ font-family:var(--rz-art-sans) !important;color:var(--rz-art-muted) !important; } /* shared section titles → serif */ html[data-rz-register="editorial"][data-theme="dark"] .section-title h2, html[data-rz-register="editorial"][data-theme="dark"] .section-title{ font-family:var(--rz-art-serif) !important; } /* ---- read-progress bar (injected by rz-article-editorial.js) ---- */ .rz-read-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999; background:linear-gradient(90deg,var(--rz-art-accent,#E8B563),var(--rz-art-accent2,#6FBF9A)); transition:width .12s linear;} /* ---- staggered entrance ---- */ html[data-rz-register="editorial"][data-theme="dark"] [data-rz-enter]{opacity:0;transform:translateY(12px);} html[data-rz-register="editorial"][data-theme="dark"] [data-rz-enter].rz-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);} @media (prefers-reduced-motion:reduce){ html[data-rz-register="editorial"][data-theme="dark"] [data-rz-enter]{opacity:1 !important;transform:none !important;} .rz-read-prog{transition:none;} } /* ============================================================================ DAY / LIGHT editorial variant (v1.44.x) — mirrors the dark register on a warm-light, readable-gold palette so the §08 editorial skin reads as the SAME design in BOTH themes. Scoped to :not([data-theme="dark"]) so it applies in light/default and never collides with the dark rules above. Type + gold-accent chrome only — the article's own light surfaces (hero/body backgrounds) are intentionally kept, so bespoke light layouts don't break. ============================================================================ */ html[data-rz-register="editorial"]:not([data-theme="dark"]){ /* !important beats the inline style="--rz-art-accent:#E8B563" each article sets on : #E8B563 is the DARK accent (≈1.7:1 on white, fails) — day needs the readable gold #b45309. */ --rz-art-accent:#b45309 !important; /* amber-700 — readable gold on white */ --rz-art-accent2:#6FBF9A; --rz-art-strong:#1a1d23; --rz-art-muted:#6b7280; --rz-art-line:rgba(40,44,52,.12); --rz-art-serif:'Fraunces',Georgia,'Times New Roman',serif; --rz-art-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --rz-art-mono:'IBM Plex Mono',ui-monospace,monospace; } /* ---- HERO ---- (keep article bg; add soft warm wash + accent rule) */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-hero{position:relative;overflow:hidden;} /* Day hero wash removed: stacking an amber radial over articles that already carry a saturated bespoke hero (e.g. article-26's orange) muddied the gradient and washed out the dek/meta. Day heroes keep their own background; the editorial type carries the register. */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-hero::before{ content:none; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-hero > *{position:relative;z-index:1;} html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-title{ font-family:var(--rz-art-serif) !important;font-weight:600 !important; letter-spacing:-.015em;line-height:1.06 !important;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-title .highlight{ color:var(--rz-art-accent) !important;font-style:italic; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-hero::after{ content:'';position:absolute;left:50%;bottom:18px;transform:translateX(-50%); width:48px;height:2px;border-radius:2px;background:var(--rz-art-accent);opacity:.9;z-index:1; } /* ---- META ---- */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-meta{ font-family:var(--rz-art-mono) !important;letter-spacing:.03em; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-meta-item, html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-meta *{ color:var(--rz-art-muted) !important; } /* ---- BODY ---- */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body h2{ font-family:var(--rz-art-serif) !important;font-weight:600 !important; letter-spacing:-.01em;color:var(--rz-art-strong) !important; border-left:0 !important;padding-left:0 !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body h2::before{ content:'';display:inline-block;width:18px;height:2px;border-radius:2px; background:var(--rz-art-accent);vertical-align:middle;margin-right:.6rem;transform:translateY(-4px); } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body h3{ font-family:var(--rz-art-serif) !important;font-weight:500 !important;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body > p:first-of-type::first-letter{ font-family:var(--rz-art-serif);font-size:3.1rem;font-weight:600;float:left;line-height:.82; padding:6px 10px 0 0;color:var(--rz-art-accent); } /* ---- CALLOUTS / QUOTES ---- */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .quote-callout{ background:rgba(232,181,99,.08) !important; border:1px solid rgba(180,83,9,.26) !important; border-left:1px solid color-mix(in srgb,var(--rz-art-accent) 26%,transparent) !important; /* even hairline; accent now carried by the hanging quote glyph */ } html[data-rz-register="editorial"]:not([data-theme="dark"]) .quote-callout blockquote{ font-family:var(--rz-art-serif) !important;font-style:italic;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .quote-callout cite{ font-family:var(--rz-art-mono) !important;color:var(--rz-art-muted) !important;font-style:normal;letter-spacing:.04em; } /* ---- INDEX GRID + SERIES HEROES + SECTION TITLES (mirror) ---- */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .articles-hero h1, html[data-rz-register="editorial"]:not([data-theme="dark"]) .insights-hero h1, html[data-rz-register="editorial"]:not([data-theme="dark"]) .geopolitics-hero h1, html[data-rz-register="editorial"]:not([data-theme="dark"]) .futureforward-hero h1, html[data-rz-register="editorial"]:not([data-theme="dark"]) .hub-hero h1{ font-family:var(--rz-art-serif) !important;font-weight:600 !important; letter-spacing:-.015em;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .articles-hero p, html[data-rz-register="editorial"]:not([data-theme="dark"]) .insights-hero p, html[data-rz-register="editorial"]:not([data-theme="dark"]) .geopolitics-hero p, html[data-rz-register="editorial"]:not([data-theme="dark"]) .futureforward-hero p, html[data-rz-register="editorial"]:not([data-theme="dark"]) .hub-hero p{ font-family:var(--rz-art-sans) !important;color:var(--rz-art-muted) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-card-title{ font-family:var(--rz-art-serif) !important;font-weight:600 !important;letter-spacing:-.01em;color:var(--rz-art-strong) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-card-number{ font-family:var(--rz-art-mono) !important;color:var(--rz-art-accent) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-card-category{ font-family:var(--rz-art-mono) !important;letter-spacing:.04em; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .section-title h2, html[data-rz-register="editorial"]:not([data-theme="dark"]) .section-title{ font-family:var(--rz-art-serif) !important; } /* ---- staggered entrance (day) ---- */ html[data-rz-register="editorial"]:not([data-theme="dark"]) [data-rz-enter]{opacity:0;transform:translateY(12px);} html[data-rz-register="editorial"]:not([data-theme="dark"]) [data-rz-enter].rz-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);} @media (prefers-reduced-motion:reduce){ html[data-rz-register="editorial"]:not([data-theme="dark"]) [data-rz-enter]{opacity:1 !important;transform:none !important;} } /* ============================================================================ EDITORIAL ENHANCEMENTS (v1.46.x) — theme-agnostic refinements that read the per-theme --rz-art-accent / --rz-art-muted vars, so each applies correctly in BOTH dark and day. Self-contained to editorial elements (no global coupling). ============================================================================ */ /* --- inline body links: amber, always-underlined (accessible), brighten on hover. No !important, so per-link inline colours (e.g. the purple disclaimer link) win. --- */ html[data-rz-register="editorial"] .article-body p a, html[data-rz-register="editorial"] .article-body li a{ color:var(--rz-art-accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--rz-art-accent) 45%,transparent); transition:text-decoration-color .25s ease; } html[data-rz-register="editorial"] .article-body p a:hover, html[data-rz-register="editorial"] .article-body li a:hover{ text-decoration-color:var(--rz-art-accent); } /* --- pull-quote: replace the 2px accent side-stripe with an even hairline border + a hanging Fraunces quotation glyph (editorial, and clears the side-stripe ban). --- */ html[data-rz-register="editorial"] .quote-callout{ position:relative; border-left-width:1px !important; border-left-color:color-mix(in srgb,var(--rz-art-accent) 26%,transparent) !important; padding-left:2.6rem; } html[data-rz-register="editorial"] .quote-callout::before{ content:'\201C'; position:absolute;left:.6rem;top:.02rem; font-family:'Fraunces',Georgia,serif;font-size:2.8rem;line-height:1; color:var(--rz-art-accent);opacity:.55; } /* --- editorial selection: a warm amber wash instead of the browser default --- */ html[data-rz-register="editorial"] ::selection{ background:color-mix(in srgb,var(--rz-art-accent) 26%,transparent); } /* --- figure captions → mono, muted (matches the instrument-grade meta). !important + font-style:normal beat the inline italic/#64748b articles hardcode. --- */ html[data-rz-register="editorial"] figcaption{ font-family:'IBM Plex Mono',ui-monospace,monospace !important; font-size:.78rem !important;letter-spacing:.02em;font-style:normal !important; color:var(--rz-art-muted) !important; } /* ============================================================================ READING MEASURE + HIERARCHY (v1.46.x, uiux-review) — theme-independent properties (size, weight contrast, rhythm, measure) applied once for both themes. Colour/font-family per-theme is set in the register blocks above. ============================================================================ */ /* ============================================================================ READING COLUMN (v1.49.10) — ONE left-aligned, justified measure. Root-cause of the old "nggak lurus": 68ch is font-size-dependent, so the 1.14rem lead ¶ and 1rem body ¶ computed different widths and, centered, landed on different left edges. Fix: a FIXED rem measure (font-size independent), LEFT-aligned (one shared left edge), justified. Prose + hero + tables share the same column so section dividers align with the hero. Wide widgets (.ws-* / grids) are NOT capped — they fill the content column. The right rail (rz-article-editorial.js) adds a 2nd grid column on wide screens. */ :root{ --rz-measure: 46rem; } /* ~736px — consistent for every prose block */ html[data-rz-register="editorial"] .article-body > p, html[data-rz-register="editorial"] .article-body > ul, html[data-rz-register="editorial"] .article-body > ol, html[data-rz-register="editorial"] .article-body > dl, html[data-rz-register="editorial"] .article-body > h2, html[data-rz-register="editorial"] .article-body > h3, html[data-rz-register="editorial"] .article-body > h4, html[data-rz-register="editorial"] .article-body > blockquote, html[data-rz-register="editorial"] .article-body > figure, html[data-rz-register="editorial"] .article-body > pre, html[data-rz-register="editorial"] .article-body > .table-wrap, html[data-rz-register="editorial"] .article-body > table{ max-width: var(--rz-measure); margin-left: 0; margin-right: 0; /* LEFT-aligned — one shared edge, not centered */ } /* justified body copy (rata kanan-kiri) like the editorial references */ html[data-rz-register="editorial"] .article-body > p, html[data-rz-register="editorial"] .article-body li{ text-align: justify; text-justify: inter-word; hyphens: auto; } /* the article-body itself owns no width/centering on editorial pages — the .container grid below owns the layout (override the v1.49.8 generic caps) */ html[data-rz-register="editorial"] .article-body{ max-width: none; margin: 0; padding-inline: 0; } /* ---- LAYOUT: centered content block; 2-col (content + related rail) when the rail is present (rz-article-editorial.js adds .rz-has-rail). ---- */ html[data-rz-register="editorial"] .article-content > .container{ max-width: 820px; margin: 0 auto; /* default: single centered column */ } html[data-rz-register="editorial"] .article-content.rz-has-rail > .container{ display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: clamp(32px, 4vw, 56px); align-items: start; max-width: 1160px; } /* wide widgets fill the content column (not capped to the prose measure) */ html[data-rz-register="editorial"] .article-body > .ws-calculator, html[data-rz-register="editorial"] .article-body > .ws-strategy-grid, html[data-rz-register="editorial"] .article-body > .article-bleed{ max-width: none; margin-left: 0; margin-right: 0; } /* collapse to a single centered column on tablet/phone; rail drops to the bottom "Continue Reading" fallback */ @media (max-width: 1023px){ html[data-rz-register="editorial"] .article-content.rz-has-rail > .container{ display: block; max-width: 820px; } html[data-rz-register="editorial"] .article-rail{ display: none; } } /* ---- SECTION DIVIDERS — a tier-3 hairline above each h2, spanning the prose column so it lines up with the hero image edge (W-C). ---- */ html[data-rz-register="editorial"] .article-body > h2{ border-top: 1px solid var(--rz-art-line, rgba(160,168,180,.14)); padding-top: 2.1rem; } html[data-rz-register="editorial"] .article-body > h2:first-child{ border-top: 0; padding-top: 0; } /* ============================================================================ LIVING DIAGRAM (v1.50.25) — animated schematic widget for the reading flow. Rendered by js/rz-article-diagram.js. The flow language mirrors the cockpit pattern (cdu-mini-bms): dashed SVG strokes whose dashoffset animates = coolant/power moving through pipes/busbars. Honours prefers-reduced-motion. ============================================================================ */ html[data-rz-register="editorial"] .rz-diagram{ margin:2.4rem 0; } html[data-rz-register="editorial"] .rz-diagram svg{ display:block; width:100%; height:auto; border:1px solid var(--rz-art-line, rgba(160,168,180,.14)); border-radius:8px; background:var(--rz-art-panel, #16181D); } html[data-rz-register="editorial"]:not([data-theme="dark"]) .rz-diagram svg{ background:#f8fafc; } /* SVG internals inherit tokens via CSS vars */ .rz-diagram svg{ --dg-line:#43506033; --dg-strong:#0f172a; --dg-muted:#64748b; --dg-pipe:#0e7490; --dg-pipe2:#b45309; --dg-ok:#0a8a5a; --dg-warn:#d97706; --dg-alarm:#dc2626; --dg-box:#ffffff; } html[data-theme="dark"] .rz-diagram svg{ --dg-line:#a0a8b426; --dg-strong:#F6F7F9; --dg-muted:#9aa8bb; --dg-pipe:#00DDFF; --dg-pipe2:#FFAA00; --dg-ok:#00FF88; --dg-warn:#FFAA00; --dg-alarm:#FF3030; --dg-box:#1b1e24; } .rz-diagram .dg-box{ fill:var(--dg-box); stroke:var(--dg-line); stroke-width:1; } .rz-diagram .dg-label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; fill:var(--dg-muted); letter-spacing:.04em; } .rz-diagram .dg-name{ font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:11px; font-weight:600; fill:var(--dg-strong); } .rz-diagram .dg-pv{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:600; fill:var(--dg-strong); font-variant-numeric:tabular-nums; } /* pipes / busbars: solid faint base + dashed animated overlay */ .rz-diagram .dg-pipe-base{ fill:none; stroke:var(--dg-line); stroke-width:4; stroke-linecap:round; } .rz-diagram .dg-pipe{ fill:none; stroke:var(--dg-pipe); stroke-width:2; stroke-linecap:round; stroke-dasharray:7 9; } .rz-diagram .dg-pipe.alt{ stroke:var(--dg-pipe2); } .rz-diagram [data-flow].flow .dg-pipe{ animation:rzDgDash 1s linear infinite; } .rz-diagram [data-flow].slow .dg-pipe{ animation:rzDgDash 2.6s linear infinite; opacity:.75; } .rz-diagram [data-flow].off .dg-pipe{ animation:none; opacity:.14; } @keyframes rzDgDash{ to{ stroke-dashoffset:-32; } } @media (prefers-reduced-motion: reduce){ .rz-diagram [data-flow] .dg-pipe{ animation:none !important; } } /* instrument warn/alarm states */ .rz-diagram [data-inst] .dg-inst-ring{ fill:none; stroke:var(--dg-ok); stroke-width:1.2; } .rz-diagram [data-inst].warn .dg-inst-ring{ stroke:var(--dg-warn); stroke-width:1.6; } .rz-diagram [data-inst].alarm .dg-inst-ring{ stroke:var(--dg-alarm); stroke-width:1.8; } .rz-diagram [data-inst].warn .dg-pv{ fill:var(--dg-warn); } .rz-diagram [data-inst].alarm .dg-pv{ fill:var(--dg-alarm); } /* scenario buttons — instrument controls (solid state, no gradients) */ html[data-rz-register="editorial"] .rz-diagram-bar{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .7rem; } html[data-rz-register="editorial"] .rz-diagram-btn{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.05em; padding:.34rem .7rem; border-radius:6px; cursor:pointer; border:1px solid var(--rz-art-line, rgba(160,168,180,.25)); background:transparent; color:var(--rz-art-muted, #7E8590); transition:border-color .15s, color .15s, background .15s; min-height:30px; } html[data-rz-register="editorial"] .rz-diagram-btn:hover{ border-color:var(--rz-art-accent,#b45309); color:var(--rz-art-strong,#0f172a); } html[data-rz-register="editorial"] .rz-diagram-btn.active{ background:color-mix(in srgb, var(--rz-art-accent,#b45309) 14%, transparent); border-color:var(--rz-art-accent,#b45309); color:var(--rz-art-strong,#0f172a); } html[data-rz-register="editorial"] .rz-diagram-msg{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.7rem; line-height:1.5; color:var(--rz-art-muted,#7E8590); margin-top:.55rem; min-height:1em; } /* ============================================================================ SCROLLYTELLING (v1.50.26) — pinned canvas + step cards, driven by js/rz-scrolly.js (data-step on the container reveals canvas layers). The canvas carries class "rz-diagram" to reuse the living-diagram SVG tokens (dg-box/dg-pipe/dg-label + dash-flow). Degrades gracefully: reduced-motion gets instant counter states; no-IO browsers see the final state. ============================================================================ */ html[data-rz-register="editorial"] .rz-scrolly{ margin:2.6rem 0; } html[data-rz-register="editorial"] .rz-scrolly-canvas{ position:sticky; top:76px; z-index:1; background:var(--rz-art-bg, #0E0F12); padding:.4rem 0 .8rem; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .rz-scrolly-canvas{ background:#ffffff; } html[data-rz-register="editorial"] .rz-scrolly-canvas .rz-chart-title{ margin-bottom:.55rem; } html[data-rz-register="editorial"] .rz-scrolly-steps{ position:relative; z-index:0; } html[data-rz-register="editorial"] .rz-scrolly-step{ min-height:66vh; display:flex; align-items:center; justify-content:flex-start; } html[data-rz-register="editorial"] .rz-scrolly-step-inner{ max-width:34rem; padding:1.05rem 1.3rem; border-radius:8px; border:1px solid var(--rz-art-line, rgba(160,168,180,.14)); border-left:2px solid var(--rz-art-accent, #b45309); background:color-mix(in srgb, var(--rz-art-panel, #16181D) 92%, transparent); opacity:.45; transition:opacity .35s; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .rz-scrolly-step-inner{ background:color-mix(in srgb, #ffffff 94%, transparent); } html[data-rz-register="editorial"] .rz-scrolly-step.active .rz-scrolly-step-inner{ opacity:1; } html[data-rz-register="editorial"] .rz-scrolly-step-kicker{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rz-art-accent, #b45309); margin-bottom:.35rem; } html[data-rz-register="editorial"] .rz-scrolly-step-inner p{ margin:0; font-size:.95rem; line-height:1.65; text-align:left; color:var(--rz-art-text, #334155); } /* canvas layers: hidden until their step (forwards AND backwards) */ .rz-scrolly .st-layer{ opacity:0; transition:opacity .6s; } .rz-scrolly[data-step="1"] .st-l1, .rz-scrolly[data-step="2"] .st-l1, .rz-scrolly[data-step="2"] .st-l2, .rz-scrolly[data-step="3"] .st-l1, .rz-scrolly[data-step="3"] .st-l2, .rz-scrolly[data-step="3"] .st-l3{ opacity:1; } /* counters strip */ .rz-scrolly .dg-counter{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:15px; font-weight:600; fill:var(--dg-strong); font-variant-numeric:tabular-nums; } .rz-scrolly .dg-counter-label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:8.5px; fill:var(--dg-muted); letter-spacing:.08em; } @media (prefers-reduced-motion: reduce){ .rz-scrolly .st-layer{ transition:none; } html[data-rz-register="editorial"] .rz-scrolly-step-inner{ transition:none; } } /* ---- READING POLISH (v1.50.24) ---- */ /* exactly ONE read-progress bar: the editorial runtime injects .rz-read-prog, so the older per-page inline bar is retired wherever the register is active */ html[data-rz-register="editorial"] .scroll-progress-container{ display:none !important; } /* heading anchor affordance — hover a section title to copy its deep link */ html[data-rz-register="editorial"] .article-body h2 .rz-anchor{ opacity:0; margin-left:.45rem; font-size:.68em; font-weight:400; text-decoration:none; color:var(--rz-art-muted, #7E8590); transition:opacity .15s; vertical-align:middle; } html[data-rz-register="editorial"] .article-body h2:hover .rz-anchor, html[data-rz-register="editorial"] .article-body h2 .rz-anchor:focus{ opacity:1; } html[data-rz-register="editorial"] .rz-anchor.rz-copied{ color:#0a8a5a !important; opacity:1 !important; } /* live "≈N min left" chip in the related-rail head */ html[data-rz-register="editorial"] .rz-minleft{ float:right; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.62rem; letter-spacing:.08em; color:var(--rz-art-muted, #7E8590); text-transform:none; } /* ---- RELATED RAIL (W-D) — compact, sticky, hairline. Built by rz-article-editorial.js from the bottom "Continue Reading" cards. ---- */ html[data-rz-register="editorial"] .article-rail{ position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: .55rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; } html[data-rz-register="editorial"] .article-rail-head{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rz-art-muted, #7E8590); padding-bottom: .5rem; margin-bottom: .15rem; border-bottom: 1px solid var(--rz-art-line, rgba(160,168,180,.14)); } html[data-rz-register="editorial"] .rz-rail-card{ display: flex; gap: .6rem; align-items: flex-start; text-decoration: none; padding: .5rem; border-radius: 8px; border: 1px solid transparent; transition: border-color .2s, background .2s; } html[data-rz-register="editorial"] .rz-rail-card:hover{ border-color: var(--rz-art-line, rgba(160,168,180,.18)); background: color-mix(in srgb, var(--rz-art-accent) 5%, transparent); } html[data-rz-register="editorial"] .rz-rail-thumb{ width: 64px; height: 44px; flex: 0 0 64px; object-fit: cover; border-radius: 5px; border: 1px solid var(--rz-art-line, rgba(160,168,180,.14)); } html[data-rz-register="editorial"] .rz-rail-title{ font-size: .82rem; line-height: 1.3; color: var(--rz-art-text, #334155); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-rz-register="editorial"] .rz-rail-card:hover .rz-rail-title{ color: var(--rz-art-strong, #0f172a); } /* on wide screens the rail replaces the bottom grid; on narrow the grid returns */ html[data-rz-register="editorial"] .article-content.rz-has-rail .related-articles{ display: none; } @media (max-width: 1023px){ html[data-rz-register="editorial"] .article-content.rz-has-rail .related-articles{ display: block; } } /* ============================================================================ CALLOUT DE-SLOP (W-E, v1.49.10) — every callout adopts the editorial .quote-callout language: a flat surface (NO saturated gradient), one hairline border + a thin semantic accent rail (tier-2, 2px — never the old 3–4px slabs), one restrained shadow, capped radius. A local --cl var carries the semantic accent so warning/critical/success keep meaning without rainbow fills. Scoped to the editorial register so it lands on all 27 articles at once. ============================================================================ */ html[data-rz-register="editorial"] .info-box, html[data-rz-register="editorial"] .key-insight, html[data-rz-register="editorial"] .ws-insight-box, html[data-rz-register="editorial"] .ws-engineer-note, html[data-rz-register="editorial"] .pfas-insight-box, html[data-rz-register="editorial"] .pfas-warning-box, html[data-rz-register="editorial"] .pfas-danger-box, html[data-rz-register="editorial"] .pfas-engineer-note{ --cl: var(--rz-art-accent, #b45309); background: color-mix(in srgb, var(--cl) 6%, transparent) !important; background-image: none !important; /* kill the gradient fill */ border: 1px solid color-mix(in srgb, var(--cl) 24%, transparent) !important; border-left: 2px solid var(--cl) !important; /* thin accent rail (was 3–4px) */ border-radius: 8px !important; box-shadow: none !important; padding: 1.15rem 1.35rem !important; } html[data-rz-register="editorial"] .info-box.warning, html[data-rz-register="editorial"] .pfas-warning-box{ --cl:#d97706; } html[data-rz-register="editorial"] .info-box.critical, html[data-rz-register="editorial"] .pfas-danger-box{ --cl:#dc2626; } html[data-rz-register="editorial"] .info-box.success{ --cl:#0a8a5a; } /* callout headings + body sit at the callout's own left edge (fixes the old centered/indented inner text); body copy stays Plex, left-aligned. */ html[data-rz-register="editorial"] .info-box > *, html[data-rz-register="editorial"] .key-insight > *, html[data-rz-register="editorial"] .ws-insight-box > *, html[data-rz-register="editorial"] .ws-engineer-note > *, html[data-rz-register="editorial"] .pfas-insight-box > *, html[data-rz-register="editorial"] .pfas-warning-box > *, html[data-rz-register="editorial"] .pfas-danger-box > *, html[data-rz-register="editorial"] .pfas-engineer-note > *{ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } html[data-rz-register="editorial"] .info-box h4, html[data-rz-register="editorial"] .ws-insight-box h4, html[data-rz-register="editorial"] .ws-engineer-note h4, html[data-rz-register="editorial"] .pfas-insight-box h4, html[data-rz-register="editorial"] .pfas-warning-box h4, html[data-rz-register="editorial"] .pfas-danger-box h4, html[data-rz-register="editorial"] .pfas-engineer-note h4, html[data-rz-register="editorial"] .key-insight .key-insight-title{ color: var(--cl) !important; } /* trim residual 4px accent rails on bespoke cards to the 2px standard (MEDIUM) */ html[data-rz-register="editorial"] .ws-strat-card, html[data-rz-register="editorial"] .pfas-chem-block{ border-left-width: 2px !important; } /* evidence band: flatten the saturated brown gradient to a calm flat surface */ html[data-rz-register="editorial"] .ws-evidence-block{ background: color-mix(in srgb, var(--rz-art-accent, #b45309) 9%, var(--rz-art-panel, #16181D)) !important; background-image: none !important; border: 1px solid var(--rz-art-line, rgba(160,168,180,.18)) !important; box-shadow: none !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .ws-evidence-block{ background: color-mix(in srgb, var(--rz-art-accent, #b45309) 7%, #ffffff) !important; } /* hero figure: design.md allows ONE restrained shadow — drop the heavy 0 4px 20px */ html[data-rz-register="editorial"] .article-body > figure img{ box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; } /* ============================================================================ CALLOUT DE-SLOP — SYSTEMIC SWEEP (v1.50.19). Articles use dozens of bespoke callout namespaces (formula-box, conclusion-box, warning-box, insight-box, plus per-article prefixes: aif-*, pjm-*, col-*, dcj-*, a21-*, …) that all carried saturated gradient fills + 3–4px borders. Attribute selectors catch the whole -box / -note callout family at once and apply the editorial language (flat color-mix tint + hairline + 2px semantic accent rail, no gradient, one restrained shadow). A local --cl carries the semantic accent via the class-name hint so warning/danger/success keep meaning. Cards / panels / grids (-card, -panel, -grid) are intentionally NOT swept — they are structural, not text callouts. ============================================================================ */ html[data-rz-register="editorial"] .article-body [class*="-box"], html[data-rz-register="editorial"] .article-body [class*="-note"]{ --cl: var(--rz-art-accent, #b45309); background: color-mix(in srgb, var(--cl) 6%, transparent) !important; background-image: none !important; border: 1px solid color-mix(in srgb, var(--cl) 22%, transparent) !important; border-left: 2px solid var(--cl) !important; border-radius: 8px !important; box-shadow: none !important; } /* semantic accent via class-name hint (these come AFTER the base so --cl wins) */ html[data-rz-register="editorial"] .article-body [class*="warning"], html[data-rz-register="editorial"] .article-body [class*="caution"], html[data-rz-register="editorial"] .article-body [class*="alert-box"]{ --cl:#d97706; } html[data-rz-register="editorial"] .article-body [class*="danger"], html[data-rz-register="editorial"] .article-body [class*="critical"], html[data-rz-register="editorial"] .article-body [class*="bear-box"]{ --cl:#dc2626; } html[data-rz-register="editorial"] .article-body [class*="safe-box"], html[data-rz-register="editorial"] .article-body [class*="positive"], html[data-rz-register="editorial"] .article-body [class*="opportunity"], html[data-rz-register="editorial"] .article-body [class*="success"]{ --cl:#0a8a5a; } /* callout inner blocks sit at the box's own left edge (no centering / no measure cap) */ html[data-rz-register="editorial"] .article-body [class*="-box"] > *, html[data-rz-register="editorial"] .article-body [class*="-note"] > *{ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* ============================================================================ ARTICLE DATA CHART (W-G, v1.49.10) — interactive, finding-titled, sourced. The figure is a direct child of .article-body so it inherits the reading measure (lines up with prose). Rendered by js/rz-article-chart.js. ============================================================================ */ html[data-rz-register="editorial"] .rz-chart{ margin: 2.4rem 0; } html[data-rz-register="editorial"] .rz-chart-title{ font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--rz-art-strong, #0f172a); margin: 0 0 .8rem; text-align: left; } html[data-rz-register="editorial"] .rz-chart-canvas{ position: relative; height: 300px; } html[data-rz-register="editorial"] .rz-chart-src{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .7rem; color: var(--rz-art-muted, #7E8590); margin-top: .7rem; line-height: 1.5; text-align: left; } html[data-rz-register="editorial"] .rz-chart-chip{ display: inline-block; font-size: .6rem; letter-spacing: .05em; font-weight: 600; padding: .12rem .42rem; border-radius: 4px; margin-right: .45rem; vertical-align: middle; } html[data-rz-register="editorial"] .rz-chart-chip.derived{ background: rgba(10,138,90,.14); color: #0a8a5a; } html[data-rz-register="editorial"] .rz-chart-chip.warn{ background: rgba(217,119,6,.16); color: #92400e; } html[data-rz-register="editorial"][data-theme="dark"] .rz-chart-chip.derived{ background: rgba(0,255,136,.14); color: #00FF88; } html[data-rz-register="editorial"][data-theme="dark"] .rz-chart-chip.warn{ background: rgba(252,211,77,.16); color: #fcd34d; } /* day body copy was inheriting Inter (day block had no p font rule) — force Plex + the editorial line-height in BOTH themes. */ html[data-rz-register="editorial"] .article-body p{ font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; line-height:1.75; } /* editorial heading scale + rhythm (size/margins are theme-independent; weight set per block) */ html[data-rz-register="editorial"] .article-body h2{ font-size:clamp(1.75rem,3vw,2.25rem) !important; line-height:1.18 !important; margin:2.4em 0 .55em !important; } html[data-rz-register="editorial"] .article-body h3{ font-size:clamp(1.2rem,2vw,1.45rem) !important; line-height:1.25 !important; margin:1.7em 0 .4em !important; } /* title — normalise the drift (51–56px across articles) to one editorial floor */ html[data-rz-register="editorial"] .article-title{ font-size:clamp(2.6rem,5vw,3.5rem) !important; } /* ---- SECTION NUMBER KICKERS — magazine-style mono "01 / 02 / 03" on each h2, replacing the bare amber tick with the number + an amber underline (number + tick in one mark). !important overrides the register blocks' tick ::before. ---- */ html[data-rz-register="editorial"] .article-body{ counter-reset:rz-h2; } html[data-rz-register="editorial"] .article-body h2{ counter-increment:rz-h2; } html[data-rz-register="editorial"] .article-body h2::before{ content:counter(rz-h2,decimal-leading-zero) !important; display:inline-block !important; font-family:'IBM Plex Mono',ui-monospace,monospace !important; font-size:.5em !important;font-weight:600 !important;line-height:1 !important; color:var(--rz-art-accent) !important; background:none !important;width:auto !important;height:auto !important;border-radius:0 !important; vertical-align:middle !important;transform:translateY(-.4em) !important; margin-right:.7rem !important;letter-spacing:.06em !important; padding-bottom:3px !important;border-bottom:2px solid var(--rz-art-accent) !important; } /* ---- LEAD PARAGRAPH — a touch larger, to open the article (works with the drop-cap) ---- */ html[data-rz-register="editorial"] .article-body > p:first-of-type{ font-size:1.14rem !important;line-height:1.7 !important; } /* ---- FIGURE framing — generous rhythm, soft corners (caption already mono/muted above) ---- */ html[data-rz-register="editorial"] figure{ margin:2.2rem 0; } html[data-rz-register="editorial"] figure img{ border-radius:8px; display:block; max-width:100%; height:auto; } /* ---- KPI HERO STRIP — instrument-grade values (kills the generic "SaaS hero-metric" read). Values across every article (kpi-val / kpi-value / -kpi-value / card-stat / stat-*) become mono + tabular-nums; labels become mono uppercase. Per-article accent COLOUR + the hero band identity are kept — only the numerals/labels are made instrument-grade. ---- */ html[data-rz-register="editorial"] [class*="kpi-val"], html[data-rz-register="editorial"] [class*="card-stat"], html[data-rz-register="editorial"] [class*="stat-value"], html[data-rz-register="editorial"] [class*="stat-num"], html[data-rz-register="editorial"] [class*="hero-stat"]{ font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important; } html[data-rz-register="editorial"] [class*="kpi-label"], html[data-rz-register="editorial"] [class*="kpi-lbl"], html[data-rz-register="editorial"] [class*="kpi-sub"], html[data-rz-register="editorial"] [class*="stat-label"]{ font-family:'IBM Plex Mono',ui-monospace,monospace !important; text-transform:uppercase;letter-spacing:.055em; } /* ============================================================================ SLOP SWEEP 2 (v1.51.8) — owner 2026-07-05: articles are still full of semi-transparent tinted boxes and text highlights. The v1.50.19 sweep only caught [class*="-box"]/[class*="-note"]; the bespoke per-article families (-card/-panel/-block), gradient fills, and inline highlight spans survived. Per plan-article-experience §03 + design.md §2/§3: flat surfaces, 1px hairlines, 2px rails, NO gradients, NO prose highlight washes. Scoped to the editorial register reading column only. ============================================================================ */ /* 1 — no gradient fills anywhere in the reading column */ html[data-rz-register="editorial"] .article-body [class*="-box"], html[data-rz-register="editorial"] .article-body [class*="-note"], html[data-rz-register="editorial"] .article-body [class*="badge"], html[data-rz-register="editorial"] .article-body [class*="chip"], html[data-rz-register="editorial"] .article-body tr, html[data-rz-register="editorial"] .article-body td, html[data-rz-register="editorial"] .article-body thead, html[data-rz-register="editorial"] .article-body th{ background-image:none !important; } /* 2 — structural surfaces with TRANSLUCENT washes = flat panel + hairline. The editorial runtime tags them (data-rz-flat) by measuring computed background alpha — opaque instrument embeds (dark calculators/diagram panels) are untouched, translucent slop washes are flattened. */ html[data-rz-register="editorial"] .article-body [data-rz-flat]{ background-color:var(--rz-art-panel,#16181D) !important; background-image:none !important; border:1px solid var(--rz-art-line,rgba(160,168,180,.14)) !important; border-radius:8px !important; box-shadow:none !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body [data-rz-flat]{ background-color:#ffffff !important; border:1px solid rgba(40,44,52,.12) !important; } /* 3 — (removed) the -box/-note wash stays the v1.50.19 color-mix-with-transparent: it composites against the LOCAL container (diagram panels are dark in both themes), so an opaque page-surface mix would break nested chips (.flow-box). */ /* keep the tier-2 semantic rails the flatten border would otherwise erase */ html[data-rz-register="editorial"] .article-body .ws-strat-card, html[data-rz-register="editorial"] .article-body .pfas-chem-block{ border-left:2px solid var(--cl, var(--rz-art-accent,#b45309)) !important; } /* 4 — prose text highlights are killed outright (emphasis = weight/color) */ html[data-rz-register="editorial"] .article-body p span[style*="background"], html[data-rz-register="editorial"] .article-body li span[style*="background"], html[data-rz-register="editorial"] .article-body h2 span[style*="background"], html[data-rz-register="editorial"] .article-body h3 span[style*="background"], html[data-rz-register="editorial"] .article-body h4 span[style*="background"], html[data-rz-register="editorial"] .article-body mark{ background:transparent !important; color:inherit !important; padding:0 !important; box-shadow:none !important; } /* 5 — many bespoke cards were authored dark-only (h5{color:#fff}, p{#94a3b8}); on the flattened white light-mode surface that ink is invisible. Normalise reading ink inside flattened surfaces — accents stay on chips/badges/rails. */ html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body [data-rz-flat] :is(h1,h2,h3,h4,h5,h6){ color:var(--rz-art-strong,#1a1d23) !important; } html[data-rz-register="editorial"]:not([data-theme="dark"]) .article-body [data-rz-flat] :is(p,li,blockquote){ color:var(--rz-art-muted,#6b7280) !important; }