/* =========================================================================== Archive theme tokens: bright / dark / legacy --------------------------------------------------------------------------- One ground per mode. Every reading surface in the archive resolves to that single value; nested structure is carried by ink washes over it, by the hairline, and by alignment, which is what the archive's own record plane already does with rgba(245,245,241,.045) cells. Chroma (era, source, chapter, accent) keeps its identity and ships as a field/ink pair so small type never sits in a field hue. THREE MODES :root bright ground #ffffff (explicit auto on light OS) [data-theme="dark"] dark ground #000000 [data-theme="legacy"] the archive exactly as it stood at tag pre-theme-1.1, restored by role. This is the runtime fallback: ?theme=legacy, or flip the default in theme.js. Nothing to revert. Modes are set on by assets/theme.js, which runs blocking in so no page paints in the wrong ground first. =========================================================================== */ /* Chapter continuation: a native link before the first scroll gesture. */ [data-chapter-hero] .chapter-hero-continue { position:absolute;z-index:2;left:50%;bottom:max(22px,env(safe-area-inset-bottom)); display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0; transform:translateX(-50%);color:var(--mhc-on-paper);text-decoration:none; border:0;background:transparent; } [data-chapter-hero="summary"] .chapter-hero-continue{color:var(--mhc-chapter-summary-ink)} [data-chapter-hero="about"] .chapter-hero-continue{color:var(--mhc-chapter-about-ink)} [data-hero-continue]{transition:opacity .18s ease-out,visibility .18s;} [data-hero-continue] svg { display:block;width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round; transition:transform .25s cubic-bezier(.16,1,.3,1); } [data-hero-continue]:hover svg{transform:translateY(3px)} [data-hero-continue]:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px} [data-hero-continue].is-hero-cue-dismissed{opacity:0!important;visibility:hidden!important;pointer-events:none!important} @media(prefers-reduced-motion:reduce){[data-hero-continue],[data-hero-continue] svg{transition:none}[data-hero-continue]:hover svg{transform:none}} @media print{[data-hero-continue]{display:none!important}} :root { color-scheme: light; /* -- the one ground ---------------------------------------------------- */ --mhc-ground: #ffffff; --mhc-ground-rgb: 255, 255, 255; --mhc-ink-rgb: 16, 17, 15; --mhc-shadow-rgb: 16, 17, 15; /* -- surfaces: all resolve to the ground; depth is an ink wash ---------- */ --mhc-surface-room: var(--mhc-ground); --mhc-surface-plate: var(--mhc-ground); --mhc-surface-hero: var(--mhc-ground); /* The surface that used to be the inverse of the page: a dark section on paper, or the paper drawer over a dark room. It is the ground now; only legacy still draws it as the opposite of what surrounds it. */ --mhc-surface-inverted: var(--mhc-ground); --mhc-surface-inverted-rgb: var(--mhc-ground-rgb); --mhc-ink-inverted: var(--mhc-ink); --mhc-surface-panel: rgba(var(--mhc-ink-rgb), .028); --mhc-surface-cell: rgba(var(--mhc-ink-rgb), .055); --mhc-surface-cell-hi: rgba(var(--mhc-ink-rgb), .085); --mhc-surface-row: rgba(var(--mhc-ink-rgb), .018); --mhc-surface-lift: rgba(var(--mhc-ink-rgb), .042); /* A wash written to darken the plate (.48 ink, say) barely moved a black surface but would be a grey box on the ground. Mid-weight washes are scaled so their relation to each other survives while none of them becomes a second background. Legacy scales by one and gets them exactly. */ --mhc-wash-scale: .18; --mhc-surface-scrim: rgba(var(--mhc-ground-rgb), .94); --mhc-surface-veil: rgba(var(--mhc-ground-rgb), .82); /* The blur every veiled surface is filtered through. The search panel takes it with --mhc-surface-veil above, and takes both in two places rather than one: Timeline carries its own copy of the panel's card, which had drifted to a more opaque ground with the blur switched off, and the shared sheet serves every other chapter. Naming the pair here is what keeps one treatment across both without either having to quote a number. */ --mhc-veil-blur: blur(28px) saturate(112%); /* Reading glass keeps the same ground coverage in bright and dark modes. Use this on prose over moving fields; thin decorative washes do not provide the same legibility on luminous dark-background filaments. */ --mhc-glass-reading: rgba(var(--mhc-float-rgb), .82); --mhc-surface-control: rgba(var(--mhc-ink-rgb), .055); /* Shared action hover: Vial Cap is the archive's cross-chapter action hue. Keep selected/pressed controls on the ink pole so hover and state remain distinguishable, and always pair this field with its chroma-safe ink. */ --mhc-action-hover: var(--mhc-accent); --mhc-action-hover-ink: var(--mhc-on-accent); --mhc-action-hover-border: var(--mhc-accent); --mhc-surface-control-hover: var(--mhc-action-hover); --mhc-backdrop: rgba(var(--mhc-ink-rgb), .38); /* -- ink ramp: ink..ink-4 are body-legal, ink-5/6 are marks and rules -- */ --mhc-ink: rgb(var(--mhc-ink-rgb)); --mhc-ink-2: rgba(var(--mhc-ink-rgb), .80); --mhc-ink-3: rgba(var(--mhc-ink-rgb), .72); --mhc-ink-4: rgba(var(--mhc-ink-rgb), .60); --mhc-ink-5: rgba(var(--mhc-ink-rgb), .48); --mhc-ink-6: rgba(var(--mhc-ink-rgb), .36); --mhc-ink-on-ground: var(--mhc-ground); /* -- type ------------------------------------------------------------------ One ramp. Before this the archive carried 65 distinct absolute sizes and 297 distinct clamp() expressions, invented per component; half-pixel steps (8.5, 9.5, 10.5, 11.5) carried no hierarchic meaning and rasterised inconsistently. These are the steps everything new should reach for. --type-2xs is the label floor. Nothing readable goes below it: the archive previously ran to 7px, under its own documented 8-10px Label tier, and the label tier is fixed px that does not grow on a phone. Faces resolve through the four real weights declared in assets/mhc-style-rework3/archive-typography.css. Geist Mono carries its own variable axis and needs no band. */ --mhc-font-sans: Helvetica, 'Helvetica Neue', Arial, sans-serif; --mhc-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mhc-weight-light: 300; /* Cover, Numeral, Headline */ --mhc-weight-regular: 400; /* Body, Display */ --mhc-weight-medium: 500; /* Label, notation */ --mhc-weight-bold: 600; /* Emphasis */ --mhc-type-2xs: 10px; --mhc-type-xs: 11px; --mhc-type-sm: 12px; --mhc-type-md: 13px; --mhc-type-lg: 15px; --mhc-type-xl: 17px; --mhc-type-2xl: 21px; --mhc-type-3xl: 27px; --mhc-type-4xl: 34px; --mhc-type-5xl: 44px; --mhc-type-6xl: 58px; --mhc-type-7xl: 76px; --mhc-type-8xl: 100px; /* Type on a mark filled with the ink pole: a solid button, an active tab. Both modes want the ground; legacy wants the light pole, because there the mark is genuinely dark. Distinct from --mhc-ink-on-ground, which is type on a mark filled with the PAPER pole and wants the dark pole in legacy. */ --mhc-on-ink-fill: var(--mhc-ground); /* Quiet type inside an inverted mark. The ink ramp cannot serve here: it is measured against the ground, and inside a mark filled with ink it lands on its own colour. */ --mhc-ink-on-ground-2: #b6b7b0; /* -- rules ------------------------------------------------------------- */ --mhc-hairline: rgba(var(--mhc-ink-rgb), .22); --mhc-hairline-soft: rgba(var(--mhc-ink-rgb), .12); --mhc-hairline-strong: rgba(var(--mhc-ink-rgb), .42); --mhc-seam: rgba(var(--mhc-ink-rgb), .14); /* -- chroma: field value is the identity, ink value is type-safe ------- */ /* Type sitting on a chroma field. The muted data and chapter field hues are light enough to take dark type in either mode. Reversal Navy carries a separate light foreground; the Vial Cap brand field carries its own dark one. */ --mhc-on-chroma: #10110f; --mhc-on-chroma-dark: #f6f6f3; --mhc-on-chroma-rgb: 16, 17, 15; --mhc-on-chroma-dark-rgb: 246, 246, 243; /* Vial Cap is the shared brand/action accent: the orange of a prescription vial's cap, the archive's own object. It is independent of the salmon retained by Frames, causal roles and measurement categories, and of the media red it sits nearest. Unlike the Carmine it replaces, the field is light enough that it takes DARK lettering, not white; page text uses a mode-specific ink, which on a bright ground is a much deeper rust than the field itself. */ --mhc-accent: #f26419; --mhc-accent-rgb: 242, 100, 25; --mhc-accent-ink: #c03400; --mhc-on-accent: #10110f; --mhc-on-accent-rgb: 16, 17, 15; --mhc-salmon-rgb: 217, 127, 115; --mhc-salmon: #d97f73; --mhc-frames-rgb: 140, 150, 189; --mhc-frames: #8c96bd; --mhc-sand: #d6bd96; --mhc-sage: #abb6a5; --mhc-steel: #a9bbc8; --mhc-money: #c7ac70; --mhc-citron: #d7d07b; /* Verdigris is 05 Summary's own colour, and it is in the palette for a reason the rest of these tokens were not: the hue wheel this archive draws on had exactly one stretch left empty, between Measurement's sage at 134 degrees and Claims-makers' steel at 239, and the Summary is seated at 196 in the middle of it because every other seat puts it beside a chapter it would be confused with. Citron sat at 104, eighteen degrees from Money's gold, which is a distance two tokens can hold on paper and two diffusion fields cannot: in dark theme both rooms composited to the same brown-gold. The chroma is deliberately the quieter half of the set, nearer Frames' periwinkle than Money's gold, because a saturated blue-green in a palette of sage, steel and mauve would read as a different archive rather than as one more room in this one. */ --mhc-verdigris: #8dc3c3; --mhc-about: #707a43; --mhc-on-about: #ffffff; --mhc-media: #ff5f53; --mhc-state: #62c8ff; --mhc-org: #54e69a; --mhc-acad: #ffd05a; --mhc-event-link: #b7a4ff; --mhc-crisis-plate: var(--mhc-accent-ink); --mhc-operative: #b8c9be; --mhc-sage-deep: #657260; --mhc-paper-deep: rgba(var(--mhc-ink-rgb), .028); --mhc-federal-blue: #526d83; --mhc-organization-green: #4d6857; --mhc-scholarly-ochre: #74582a; /* Era fields form a muted chronological palette. Source-function signals and chapter identities are independent. Keep fills fixed across themes; only the ink used on the page ground changes. See ERA-HEADER-REVIEW.md. */ --mhc-sources: #c8b7cb; --mhc-era-archive: #d9d7cf; --mhc-era-hygiene: #b79ab1; --mhc-era-institutional: #8294a3; --mhc-era-community: #afc7be; --mhc-era-rights: #b5acd8; --mhc-era-contested: #b19670; --mhc-era-political: #adc6e5; --mhc-era-diagnostic: #cf9d8c; --mhc-era-universal: #d7cfa0; --mhc-era-reversal: #303c4e; --mhc-era-reversal-accent: #a3b4cb; --mhc-salmon-ink: #aa3d2e; --mhc-frames-ink: #4b5680; --mhc-sand-ink: #785c2f; --mhc-sage-ink: #576451; --mhc-steel-ink: #4c6577; --mhc-money-ink: #72531d; --mhc-citron-ink: #68621f; --mhc-verdigris-ink: #2f6b6c; --mhc-about-ink: #596332; --mhc-media-ink: #b2332a; --mhc-state-ink: #21678c; --mhc-org-ink: #1a6d42; --mhc-acad-ink: #785e1c; --mhc-event-link-ink: #6345d3; --mhc-crisis-plate-ink: var(--mhc-accent-ink); --mhc-operative-ink: #4e6757; --mhc-sage-deep-ink: #657260; --mhc-federal-blue-ink: #526d83; --mhc-organization-green-ink: #4d6857; --mhc-scholarly-ochre-ink: #74582a; --mhc-sources-ink: #745779; --mhc-era-archive-ink: #696354; --mhc-era-hygiene-ink: #755970; --mhc-era-institutional-ink: #4e6576; --mhc-era-community-ink: #506e62; --mhc-era-rights-ink: #66588b; --mhc-era-contested-ink: #746035; --mhc-era-political-ink: #4d698b; --mhc-era-diagnostic-ink: #8a5543; --mhc-era-universal-ink: #6e632e; --mhc-era-reversal-ink: #303c4e; --mhc-era-reversal-accent-ink: var(--mhc-era-reversal); /* -- canonical chapter identity ----------------------------------------- Route color is declared once here, then consumed by the landing, drawer, transitions, local navigation and pagers. Sand remains an era and role encoding; Frames owns its cooler Iris pair so it cannot collapse into the Money chapter's ochre. */ --mhc-chapter-timeline-field: var(--mhc-accent); --mhc-chapter-timeline-ink: var(--mhc-accent-ink); --mhc-chapter-frames-field: var(--mhc-frames); --mhc-chapter-frames-ink: var(--mhc-frames-ink); --mhc-chapter-measurement-field: var(--mhc-sage); --mhc-chapter-measurement-ink: var(--mhc-sage-ink); --mhc-chapter-claims-field: var(--mhc-steel); --mhc-chapter-claims-ink: var(--mhc-steel-ink); --mhc-chapter-money-field: var(--mhc-money); --mhc-chapter-money-ink: var(--mhc-money-ink); --mhc-chapter-summary-field: var(--mhc-verdigris); --mhc-chapter-summary-ink: var(--mhc-verdigris-ink); /* Methodology is a method companion rather than a chapter of the argument, and it now holds citron alone. The two shared it while the Summary was a citron chapter, on the argument that a companion never appears beside the chapter it companions; that argument was sound and is simply spent, since the Summary has moved to verdigris and nothing is being shared any more. */ --mhc-chapter-method-field: var(--mhc-citron); --mhc-chapter-method-ink: var(--mhc-citron-ink); --mhc-chapter-sources-field: var(--mhc-sources); --mhc-chapter-sources-ink: var(--mhc-sources-ink); --mhc-chapter-about-field: var(--mhc-about); --mhc-chapter-about-ink: var(--mhc-about-ink); /* -- polarity ----------------------------------------------------------- Two families of neutral existed before the collapse: light washes and ink drawn on the dark plate, and dark ones drawn on paper. Both are the same role against a single ground, so bright and dark resolve them to the same value. They separate again only in legacy, where the plate and the paper are both still on screen and a wash drawn in the wrong polarity would be invisible. Keeping the distinction is what makes the fallback usable. */ --mhc-on-plate-rgb: var(--mhc-ink-rgb); --mhc-on-paper-rgb: var(--mhc-ink-rgb); --mhc-on-plate: var(--mhc-ink); --mhc-on-plate-2: var(--mhc-ink-2); --mhc-on-plate-3: var(--mhc-ink-3); --mhc-on-plate-4: var(--mhc-ink-4); --mhc-on-plate-5: var(--mhc-ink-5); --mhc-on-plate-6: var(--mhc-ink-6); --mhc-on-paper: var(--mhc-ink); --mhc-on-paper-2: var(--mhc-ink-2); --mhc-on-paper-3: var(--mhc-ink-3); --mhc-on-paper-4: var(--mhc-ink-4); --mhc-on-paper-5: var(--mhc-ink-5); --mhc-on-paper-6: var(--mhc-ink-6); --mhc-hairline-plate: var(--mhc-hairline); --mhc-hairline-paper: var(--mhc-hairline); --mhc-hairline-plate-soft: var(--mhc-hairline-soft); --mhc-hairline-paper-soft: var(--mhc-hairline-soft); --mhc-hairline-plate-strong: var(--mhc-hairline-strong); --mhc-hairline-paper-strong: var(--mhc-hairline-strong); /* A floating control or panel. Unified with the ground in both modes; legacy keeps the translucent dark capsule it actually shipped. */ --mhc-float-rgb: var(--mhc-ground-rgb); /* -- canvas: read by the WebGL cover field and the Ambient braid -------- */ --mhc-canvas-ground: 1, 1, 1; --mhc-canvas-ink: .063, .067, .059; } /* --- dark ------------------------------------------------------------------ Both the explicit choice and the OS default resolve here. The media block is guarded so an explicit light or legacy choice always wins over the OS. */ :root[data-theme="dark"] { --mhc-accent-ink: #f16f33; color-scheme: dark; --mhc-ground: #000000; --mhc-ground-rgb: 0, 0, 0; --mhc-ink-rgb: 245, 245, 241; --mhc-shadow-rgb: 0, 0, 0; --mhc-backdrop: rgba(0, 0, 0, .62); --mhc-ink: rgb(var(--mhc-ink-rgb)); --mhc-ink-2: rgba(var(--mhc-ink-rgb), .80); --mhc-ink-3: rgba(var(--mhc-ink-rgb), .72); --mhc-ink-4: rgba(var(--mhc-ink-rgb), .60); --mhc-ink-5: rgba(var(--mhc-ink-rgb), .48); --mhc-ink-6: rgba(var(--mhc-ink-rgb), .36); --mhc-ink-on-ground-2: #555650; --mhc-hairline: rgba(var(--mhc-ink-rgb), .24); --mhc-hairline-soft: rgba(var(--mhc-ink-rgb), .13); --mhc-hairline-strong: rgba(var(--mhc-ink-rgb), .46); --mhc-seam: rgba(var(--mhc-ink-rgb), .16); --mhc-salmon-ink: #d97f73; --mhc-frames-ink: #8c96bd; --mhc-sand-ink: #d6bd96; --mhc-sage-ink: #abb6a5; --mhc-steel-ink: #a9bbc8; --mhc-money-ink: #c7ac70; --mhc-citron-ink: #d7d07b; --mhc-verdigris-ink: #8dc3c3; --mhc-about-ink: #bdc793; --mhc-media-ink: #ff5f53; --mhc-state-ink: #62c8ff; --mhc-org-ink: #54e69a; --mhc-acad-ink: #ffd05a; --mhc-event-link-ink: #b7a4ff; --mhc-crisis-plate-ink: var(--mhc-accent-ink); --mhc-operative-ink: #b8c9be; --mhc-sage-deep-ink: #8fa085; --mhc-federal-blue-ink: #5a7890; --mhc-organization-green-ink: #68907a; --mhc-scholarly-ochre-ink: #937035; --mhc-sources-ink: var(--mhc-sources); --mhc-era-archive-ink: var(--mhc-era-archive); --mhc-era-hygiene-ink: var(--mhc-era-hygiene); --mhc-era-institutional-ink: var(--mhc-era-institutional); --mhc-era-community-ink: var(--mhc-era-community); --mhc-era-rights-ink: var(--mhc-era-rights); --mhc-era-contested-ink: var(--mhc-era-contested); --mhc-era-political-ink: var(--mhc-era-political); --mhc-era-diagnostic-ink: var(--mhc-era-diagnostic); --mhc-era-universal-ink: var(--mhc-era-universal); --mhc-era-reversal-ink: var(--mhc-era-reversal-accent); --mhc-era-reversal-accent-ink: var(--mhc-era-reversal-accent); --mhc-canvas-ground: 0, 0, 0; --mhc-canvas-ink: .961, .961, .945; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) { --mhc-accent-ink: #f16f33; color-scheme: dark; --mhc-ground: #000000; --mhc-ground-rgb: 0, 0, 0; --mhc-ink-rgb: 245, 245, 241; --mhc-shadow-rgb: 0, 0, 0; --mhc-backdrop: rgba(0, 0, 0, .62); --mhc-ink: rgb(var(--mhc-ink-rgb)); --mhc-ink-2: rgba(var(--mhc-ink-rgb), .80); --mhc-ink-3: rgba(var(--mhc-ink-rgb), .72); --mhc-ink-4: rgba(var(--mhc-ink-rgb), .60); --mhc-ink-5: rgba(var(--mhc-ink-rgb), .48); --mhc-ink-6: rgba(var(--mhc-ink-rgb), .36); --mhc-ink-on-ground-2: #555650; --mhc-hairline: rgba(var(--mhc-ink-rgb), .24); --mhc-hairline-soft: rgba(var(--mhc-ink-rgb), .13); --mhc-hairline-strong: rgba(var(--mhc-ink-rgb), .46); --mhc-seam: rgba(var(--mhc-ink-rgb), .16); --mhc-salmon-ink: #d97f73; --mhc-frames-ink: #8c96bd; --mhc-sand-ink: #d6bd96; --mhc-sage-ink: #abb6a5; --mhc-steel-ink: #a9bbc8; --mhc-money-ink: #c7ac70; --mhc-citron-ink: #d7d07b; --mhc-verdigris-ink: #8dc3c3; --mhc-about-ink: #bdc793; --mhc-media-ink: #ff5f53; --mhc-state-ink: #62c8ff; --mhc-org-ink: #54e69a; --mhc-acad-ink: #ffd05a; --mhc-event-link-ink: #b7a4ff; --mhc-crisis-plate-ink: var(--mhc-accent-ink); --mhc-operative-ink: #b8c9be; --mhc-sage-deep-ink: #8fa085; --mhc-federal-blue-ink: #5a7890; --mhc-organization-green-ink: #68907a; --mhc-scholarly-ochre-ink: #937035; --mhc-sources-ink: var(--mhc-sources); --mhc-era-archive-ink: var(--mhc-era-archive); --mhc-era-hygiene-ink: var(--mhc-era-hygiene); --mhc-era-institutional-ink: var(--mhc-era-institutional); --mhc-era-community-ink: var(--mhc-era-community); --mhc-era-rights-ink: var(--mhc-era-rights); --mhc-era-contested-ink: var(--mhc-era-contested); --mhc-era-political-ink: var(--mhc-era-political); --mhc-era-diagnostic-ink: var(--mhc-era-diagnostic); --mhc-era-universal-ink: var(--mhc-era-universal); --mhc-era-reversal-ink: var(--mhc-era-reversal-accent); --mhc-era-reversal-accent-ink: var(--mhc-era-reversal-accent); --mhc-canvas-ground: 0, 0, 0; --mhc-canvas-ink: .961, .961, .945; } } /* --- legacy: the archive as it stood at tag pre-theme-1.1 ----------------- The roles survive the collapse, so restoring them restores the artifact. Off-white variants that differed by one or two points (#f6f6f3, #f7f7f4) resolve to the canonical Cool Paper; that difference is below threshold. */ :root[data-theme="legacy"] { --mhc-accent: #d97f73; --mhc-accent-rgb: 217, 127, 115; --mhc-accent-ink: #d97f73; --mhc-on-accent: #10110f; --mhc-on-accent-rgb: 16, 17, 15; --mhc-crisis-plate: #f0bab3; color-scheme: dark; --mhc-ground: #f5f5f1; --mhc-ground-rgb: 245, 245, 241; --mhc-ink-rgb: 16, 17, 15; --mhc-shadow-rgb: 0, 0, 0; --mhc-surface-room: #f5f5f1; --mhc-surface-plate: #111210; --mhc-surface-hero: var(--mhc-chapter-color, #111210); --mhc-surface-panel: #20211e; --mhc-surface-cell: #292a26; --mhc-surface-cell-hi: #343530; --mhc-surface-row: #191a17; --mhc-surface-lift: rgba(245, 245, 241, .045); --mhc-wash-scale: 1; --mhc-surface-inverted: #111210; --mhc-surface-inverted-rgb: 17, 18, 16; --mhc-ink-inverted: #f6f6f3; --mhc-surface-scrim: rgba(16, 17, 15, .96); --mhc-surface-veil: rgba(16, 17, 15, .82); --mhc-surface-control: rgba(16, 17, 15, .76); --mhc-surface-control-hover: var(--mhc-action-hover); --mhc-backdrop: rgba(0, 0, 0, .48); --mhc-ink: rgb(var(--mhc-ink-rgb)); --mhc-ink-2: rgba(var(--mhc-ink-rgb), .80); --mhc-ink-3: rgba(var(--mhc-ink-rgb), .72); --mhc-ink-4: rgba(var(--mhc-ink-rgb), .60); --mhc-ink-5: rgba(var(--mhc-ink-rgb), .48); --mhc-ink-6: rgba(var(--mhc-ink-rgb), .36); --mhc-ink-on-ground: #10110f; --mhc-on-ink-fill: #f6f6f3; --mhc-ink-on-ground-2: #c9cac4; --mhc-hairline: rgba(245, 245, 241, .24); --mhc-hairline-soft: rgba(245, 245, 241, .12); --mhc-hairline-strong: rgba(245, 245, 241, .42); --mhc-seam: rgba(245, 245, 241, .14); --mhc-salmon-ink: #d97f73; --mhc-frames: var(--mhc-sand); --mhc-frames-ink: var(--mhc-sand-ink); --mhc-sand-ink: #d6bd96; --mhc-sage-ink: #abb6a5; --mhc-steel-ink: #a9bbc8; --mhc-money-ink: #c7ac70; --mhc-citron-ink: #d7d07b; --mhc-verdigris-ink: #8dc3c3; --mhc-about: var(--mhc-paper-deep); --mhc-on-about: var(--mhc-on-chroma); --mhc-about-ink: var(--mhc-on-paper-3); --mhc-media-ink: #ff5f53; --mhc-state-ink: #62c8ff; --mhc-org-ink: #54e69a; --mhc-acad-ink: #ffd05a; --mhc-event-link-ink: #b7a4ff; --mhc-crisis-plate-ink: #f0bab3; --mhc-operative-ink: #b8c9be; --mhc-sage-deep-ink: #657260; --mhc-paper-deep: #e1e2e3; --mhc-federal-blue-ink: #526d83; --mhc-organization-green-ink: #4d6857; --mhc-scholarly-ochre-ink: #74582a; --mhc-sources-ink: var(--mhc-sources); --mhc-era-archive-ink: var(--mhc-era-archive); --mhc-era-hygiene-ink: var(--mhc-era-hygiene); --mhc-era-institutional-ink: var(--mhc-era-institutional); --mhc-era-community-ink: var(--mhc-era-community); --mhc-era-rights-ink: var(--mhc-era-rights); --mhc-era-contested-ink: var(--mhc-era-contested); --mhc-era-political-ink: var(--mhc-era-political); --mhc-era-diagnostic-ink: var(--mhc-era-diagnostic); --mhc-era-universal-ink: var(--mhc-era-universal); --mhc-era-reversal-ink: var(--mhc-era-reversal-accent); --mhc-era-reversal-accent-ink: var(--mhc-era-reversal-accent); --mhc-on-plate-rgb: 245, 245, 241; --mhc-on-paper-rgb: 16, 17, 15; --mhc-on-plate: rgb(var(--mhc-on-plate-rgb)); --mhc-on-plate-2: rgba(var(--mhc-on-plate-rgb), .80); --mhc-on-plate-3: rgba(var(--mhc-on-plate-rgb), .72); --mhc-on-plate-4: rgba(var(--mhc-on-plate-rgb), .60); --mhc-on-plate-5: rgba(var(--mhc-on-plate-rgb), .48); --mhc-on-plate-6: rgba(var(--mhc-on-plate-rgb), .36); --mhc-on-paper: rgb(var(--mhc-on-paper-rgb)); --mhc-on-paper-2: rgba(var(--mhc-on-paper-rgb), .80); --mhc-on-paper-3: rgba(var(--mhc-on-paper-rgb), .72); --mhc-on-paper-4: rgba(var(--mhc-on-paper-rgb), .60); --mhc-on-paper-5: rgba(var(--mhc-on-paper-rgb), .48); --mhc-on-paper-6: rgba(var(--mhc-on-paper-rgb), .36); --mhc-hairline-plate: rgba(245, 245, 241, .24); --mhc-hairline-paper: rgba(16, 17, 15, .22); --mhc-hairline-plate-soft: rgba(245, 245, 241, .12); --mhc-hairline-paper-soft: rgba(16, 17, 15, .10); --mhc-hairline-plate-strong: rgba(245, 245, 241, .42); --mhc-hairline-paper-strong: rgba(16, 17, 15, .38); --mhc-float-rgb: 17, 18, 16; --mhc-canvas-ground: .063, .067, .059; --mhc-canvas-ink: .93, .945, .91; } /* --- the one ground, asserted --------------------------------------------- The viewer's own ground shows through a transparent body, so paint it. */ html, body { background: var(--mhc-ground); } /* --- no ring under the pointer --------------------------------------------- theme.js records on the root how the reader last moved, and a reader who pressed something with the pointer is shown no focus ring for it in any engine. A scripted focus already arrives without :focus-visible there, so this rule is the net beneath that one: it covers an engine that ignores the focusVisible option, the text fields every engine rings however they were entered, and the plain :focus rules a click still matches. The outline is taken from the focused element, its two generated boxes and everything inside it, because some of the archive's rings are drawn on a child, as the landing draws one on a chapter's name. The attribute is named twice so that the rule outranks the most specific important ring in the archive, which scores (0,3,1), and keyboard focus is left as it was. A touch screen's tap highlight is the same box drawn by the browser, and it goes with the rest. */ :root[data-mhc-input="pointer"][data-mhc-input] :focus, :root[data-mhc-input="pointer"][data-mhc-input] :focus::before, :root[data-mhc-input="pointer"][data-mhc-input] :focus::after, :root[data-mhc-input="pointer"][data-mhc-input] :focus * { outline: none !important; } html { -webkit-tap-highlight-color: transparent; } /* --- archive cursor: the lens --------------------------------------------- An instrument in three layers, all of them drawn by theme.js. The pupil and its bezel share one small SVG that the runtime carries to the pointer with the archive's original inertia; the trail is a full-window canvas under it; and the loupe is a glass plate that springs after the pointer on a curve of its own and dilates out of the pupil's corner. The pupil is the dot the archive has always drawn, the fixed accent field rather than the mode-specific ink, so that it keeps one identity in both modes, at 3.18:1 on white and 5.96:1 on black. Until this lens it had no separation from a large accent-filled surface, the Timeline curtain and the About vessel above all, where it was orange on orange. It now carries a rim that answers the ground the runtime reads under it, which is the fix the September record anticipated in place of a return to the difference blend, since a blend cannot render a named hue. On the accent field itself the core goes dark and the rim goes light; on a photograph the core goes to paper. Over anything pressable the pupil's light falls inside the control, which is Lumen, drawn in a layer of its own beside the pupil and described with its rules below, and the Timeline's load, its bulk work and a chapter departure are drawn in the same light. :has() preserves the native cursor wherever the enhancement is unavailable or disabled. The class names are retained because two tests and the Timeline scrubber's suppression rule select on them. */ html:has(.mhc-inverse-cursor[data-active="true"]), html:has(.mhc-inverse-cursor[data-active="true"]) body, html:has(.mhc-inverse-cursor[data-active="true"]) body * { cursor: none !important; } /* link-affordance.js raises a small window naming the chapter an in-text link opens. While the lens is running the loupe carries that destination and more, so the window stands down; on a touch screen, where the lens never runs, it is unchanged. */ html:has(.mhc-inverse-cursor[data-active="true"]) .mhc-link-destination { display: none !important; } .mhc-inverse-cursor { --mhc-lens-core: var(--mhc-accent); --mhc-lens-rim: rgba(245, 245, 241, .52); --mhc-lens-dest: var(--mhc-accent-ink); --mhc-lens-press: 1; --mhc-lens-glow: 1; position: fixed; z-index: 2147483647; top: 0; left: 0; display: block; width: 43.2px; height: 43.2px; opacity: 0; overflow: visible; pointer-events: none; transform: translate3d(-64px, -64px, 0) translate3d(-50%, -50%, 0); transform-origin: center; transition: opacity 140ms ease; contain: strict; will-change: transform; } .mhc-inverse-cursor.is-visible { opacity: 1; } /* A keyboard reader has no pointer to mark, so the instrument withdraws to the loupe beside the focused control until the mouse moves again. */ .mhc-inverse-cursor.is-visible.is-anchored { opacity: 0; } .mhc-inverse-cursor[data-ground="light"] { --mhc-lens-rim: rgba(16, 17, 15, .5); } .mhc-inverse-cursor[data-ground="dark"] { --mhc-lens-rim: rgba(245, 245, 241, .52); } .mhc-inverse-cursor[data-ground="accent"] { --mhc-lens-core: var(--mhc-on-accent); --mhc-lens-rim: rgba(255, 255, 255, .8); } .mhc-inverse-cursor[data-ground="chroma"] { --mhc-lens-rim: rgba(255, 255, 255, .86); } .mhc-inverse-cursor[data-ground="photo"] { --mhc-lens-core: #f5f5f1; --mhc-lens-rim: rgba(16, 17, 15, .64); } /* The pupil is a core laid over a slightly larger rim disc rather than one stroked circle, so that when a stage dims the core it brightens over its own rim instead of opening onto the page. The 48-unit SVG renders at 90%, giving the core an 11.25px silhouette with 1.35px of rim showing round it. The press and the little the pupil lends the light it casts both arrive through --mhc-lens-press, and a stage's charge through --mhc-lens-glow. */ .mhc-lens-rim, .mhc-lens-pupil { transform-box: fill-box; transform-origin: center; transform: scale(var(--mhc-lens-press)); } .mhc-lens-rim { fill: var(--mhc-lens-rim); transition: fill 220ms ease; } .mhc-lens-pupil { fill: var(--mhc-lens-core); fill-opacity: var(--mhc-lens-glow); transition: fill 220ms ease; } /* A departing pupil takes the arriving chapter's ink until the next chapter is in place. */ .mhc-inverse-cursor.is-departing .mhc-lens-pupil { fill: var(--mhc-lens-dest); } /* ---- lumen ------------------------------------------------------------------ Over anything a reader can press, the pupil's light falls inside the control. Each lit line is two fixed elements laid over the control, a pool and an edge, each shaped to the control's radius; theme.js writes where the light stands, how far it reaches and how strong it is, and this stylesheet owns everything the light is made of. The layer that holds them has no position, opacity or transform of its own, so it is not a stacking context, and each part stands in the root's stacking order beside the pupil, where a pool that blends with the page blends with the page rather than with an empty group. The pool is the accent in both themes, the pupil's own ink, and it is blended because a lit surface is the page changed rather than something laid over it. On black the accent is screened in, which never darkens light type. On paper and on the accent the same ink is multiplied in, so that the glass fills with the warm color it takes on black while black type stays black, and on a color field it is overlaid, since a multiplied accent turns a field such as Money's ochre toward umber. The edge is drawn plainly, because it has to light the dark hairline of a control on paper, which no blend can do, and it is cut to the sides of the border the control draws. */ .mhc-lumen { --mhc-lumen-ink-rgb: var(--mhc-accent-rgb, 242, 100, 25); --mhc-lumen-sheen-rgb: var(--mhc-accent-rgb, 242, 100, 25); display: block; width: 0; height: 0; pointer-events: none; } .mhc-lumen:is([data-ground="accent"], [data-ground="chroma"]) { --mhc-lumen-ink-rgb: 255, 255, 255; } .mhc-lumen[data-ground="photo"] { --mhc-lumen-ink-rgb: 245, 245, 241; --mhc-lumen-sheen-rgb: 255, 255, 255; } /* A row that keeps its own highlight under the light, by declaring --mhc-lumen-hover: keep, may name that highlight's color with --mhc-lumen-tint, and then the pool is mixed from that color in place of the accent, as the edge is wherever it would otherwise be the accent, while a photograph keeps the white that reads on a picture. Both opt-ins are registered as not inherited, so that a control inside such a row is lit in its own right. */ @property --mhc-lumen-hover { syntax: "*"; inherits: false; } @property --mhc-lumen-tint { syntax: ""; inherits: false; initial-value: transparent; } .mhc-lumen:not([data-ground="photo"]) .mhc-lumen-pool.is-tinted { --mhc-lumen-sheen-rgb: var(--mhc-lumen-tint-rgb); } .mhc-lumen:not([data-ground="accent"]):not([data-ground="chroma"]):not([data-ground="photo"]) .mhc-lumen-edge.is-tinted { --mhc-lumen-ink-rgb: var(--mhc-lumen-tint-rgb); } .mhc-lumen > * { position: fixed; top: 0; left: 0; pointer-events: none; transition: opacity 140ms ease; } /* The light belongs to the pupil and goes wherever the pupil goes: away with the pointer, aside while a keyboard reader holds the loupe, and aside while the Timeline scrubber carries its own readout. */ .mhc-inverse-cursor:not(.is-visible) ~ .mhc-lumen > *, .mhc-inverse-cursor.is-anchored ~ .mhc-lumen > *, html:has(#rail-mark.is-scrubbing) .mhc-lumen > * { opacity: 0 !important; } .mhc-lumen-pool, .mhc-lumen-edge { --mhc-lumen-x: 50%; --mhc-lumen-y: 50%; --mhc-lumen-r: 80px; --mhc-lumen-a: 0; box-sizing: border-box; transform: translate3d(-400px, -400px, 0); will-change: transform; } /* On black the pool and the edge stand a fifth below full strength, which is bright enough to show the glass and no brighter. */ .mhc-lumen-pool { --mhc-lumen-gain: .72; z-index: 2147483640; overflow: hidden; mix-blend-mode: screen; } .mhc-lumen:is([data-ground="light"], [data-ground="accent"]) .mhc-lumen-pool { --mhc-lumen-gain: 1.05; mix-blend-mode: multiply; } /* Paper needs less ink at the center of the multiplied pool. */ .mhc-lumen[data-ground="light"] .mhc-lumen-pool { --mhc-lumen-gain: .84; } .mhc-lumen[data-ground="chroma"] .mhc-lumen-pool { --mhc-lumen-gain: 1.5; mix-blend-mode: overlay; } .mhc-lumen[data-ground="photo"] .mhc-lumen-pool { --mhc-lumen-gain: 1.1; mix-blend-mode: soft-light; } .mhc-lumen-light { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle var(--mhc-lumen-r) at var(--mhc-lumen-x) var(--mhc-lumen-y), rgba(var(--mhc-lumen-sheen-rgb), calc(.5 * var(--mhc-lumen-a) * var(--mhc-lumen-gain))) 0, rgba(var(--mhc-lumen-sheen-rgb), calc(.25 * var(--mhc-lumen-a) * var(--mhc-lumen-gain))) 32%, rgba(var(--mhc-lumen-sheen-rgb), calc(.07 * var(--mhc-lumen-a) * var(--mhc-lumen-gain))) 70%, rgba(var(--mhc-lumen-sheen-rgb), 0) 100%); } /* Beneath linked words the pool is an ellipse standing on the underline under the pointer, so that the light rises from where the link is marked. */ .mhc-lumen-pool.is-inline .mhc-lumen-light { background: radial-gradient(ellipse calc(var(--mhc-lumen-r) * .9) 115% at var(--mhc-lumen-x) var(--mhc-lumen-mark, 100%), rgba(var(--mhc-lumen-sheen-rgb), calc(.46 * var(--mhc-lumen-a) * var(--mhc-lumen-gain))) 0, rgba(var(--mhc-lumen-sheen-rgb), calc(.16 * var(--mhc-lumen-a) * var(--mhc-lumen-gain))) 45%, rgba(var(--mhc-lumen-sheen-rgb), 0) 100%); } /* The edge is cut from a wider bloom by a mask that keeps only the border box's border, at the widths theme.js copies from the control, so that a pill lights all the way round, a row ruled only above and below lights only those rules, and a control with no border has no edge to light. */ .mhc-lumen-edge { --mhc-lumen-edge-gain: .8; z-index: 2147483641; border: 0 solid transparent; background: radial-gradient(circle calc(var(--mhc-lumen-r) * 1.1) at var(--mhc-lumen-x) var(--mhc-lumen-y), rgba(var(--mhc-lumen-ink-rgb), calc(.92 * var(--mhc-lumen-a) * var(--mhc-lumen-edge-gain))) 0, rgba(var(--mhc-lumen-ink-rgb), calc(.36 * var(--mhc-lumen-a) * var(--mhc-lumen-edge-gain))) 45%, rgba(var(--mhc-lumen-ink-rgb), 0) 100%) border-box; background-origin: border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); } .mhc-lumen:is([data-ground="light"], [data-ground="chroma"], [data-ground="accent"], [data-ground="photo"]) .mhc-lumen-edge { --mhc-lumen-edge-gain: 1; } /* Words in a sentence have no edge to catch the light, so their underline catches it instead, brightest under the pointer and falling away along the line. */ .mhc-lumen-edge.is-inline { border-width: 0 !important; background: none; -webkit-mask: none; mask: none; } .mhc-lumen-edge.is-inline::after { content: ''; position: absolute; left: 0; right: 0; top: var(--mhc-lumen-mark, calc(100% - 1px)); height: 1px; background: radial-gradient(ellipse var(--mhc-lumen-r) 100% at var(--mhc-lumen-x) 50%, rgba(var(--mhc-lumen-ink-rgb), calc(.95 * var(--mhc-lumen-a) * var(--mhc-lumen-edge-gain))) 0, rgba(var(--mhc-lumen-ink-rgb), 0) 100%); } /* A release spreads one disc of the same light through the control. */ .mhc-lumen-wave { position: absolute; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(var(--mhc-lumen-sheen-rgb), calc(.34 * var(--mhc-lumen-gain))) 0, rgba(var(--mhc-lumen-sheen-rgb), calc(.14 * var(--mhc-lumen-gain))) 55%, rgba(var(--mhc-lumen-sheen-rgb), 0) 100%); pointer-events: none; } /* ---- the stages, in the same light The arc and the halo are one element centered on the pupil and blended as the pool is. While the Timeline loads, the arc gathers from twelve o'clock to the loader's own percentage, dim where it began and brightest at a round head, and the halo swells with it. While the Timeline is busy, and while a chapter departs, a short comet of the same light circles the pupil, in the arriving chapter's ink for a departure. The arc runs in a soft band well clear of the pupil, and because the band itself is never drawn, nothing is left standing at rest as a ring. */ .mhc-lumen-stage { --mhc-lumen-p: 0; --mhc-lumen-stage: var(--mhc-accent); z-index: 2147483645; width: 64px; height: 64px; opacity: 0; mix-blend-mode: screen; transform: translate3d(-200px, -200px, 0); transition: none; will-change: transform, opacity; } .mhc-lumen:is([data-ground="light"], [data-ground="chroma"], [data-ground="accent"]) :is(.mhc-lumen-stage, .mhc-lumen-burst) { mix-blend-mode: multiply; } .mhc-lumen-halo, .mhc-lumen-arc { position: absolute; inset: 0; border-radius: 50%; } .mhc-lumen-halo { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--mhc-lumen-stage) 30%, transparent) 0, color-mix(in srgb, var(--mhc-lumen-stage) 11%, transparent) 50%, transparent 100%); transform: scale(calc(.45 + var(--mhc-lumen-p) * .55)); } .mhc-lumen-arc { background: conic-gradient(from 0deg, color-mix(in srgb, var(--mhc-lumen-stage) 16%, transparent) 0deg, color-mix(in srgb, var(--mhc-lumen-stage) 88%, transparent) calc(var(--mhc-lumen-p) * 360deg), transparent calc(var(--mhc-lumen-p) * 360deg + 3deg)); -webkit-mask: radial-gradient(circle closest-side, transparent 54%, #000 62%, #000 69%, transparent 78%); mask: radial-gradient(circle closest-side, transparent 54%, #000 62%, #000 69%, transparent 78%); } /* The head of the arc is a round point of the same light, so that the arc ends the way light ends rather than in a cut. It rides the band's center line at the arc's own angle, which is the loader's share while the Timeline loads and the comet's leading edge while it circles. */ .mhc-lumen-head { --mhc-lumen-head: calc(var(--mhc-lumen-p) * 360deg); position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle closest-side, var(--mhc-lumen-stage) 0, color-mix(in srgb, var(--mhc-lumen-stage) 55%, transparent) 45%, transparent 100%); opacity: min(1, calc(var(--mhc-lumen-p) * 24)); transform: rotate(var(--mhc-lumen-head)) translateY(-21px); } .mhc-lumen-stage:is([data-stage="busy"], [data-stage="departing"]) .mhc-lumen-head { --mhc-lumen-head: 112deg; opacity: 1; } .mhc-lumen-stage:is([data-stage="busy"], [data-stage="departing"]) .mhc-lumen-arc { background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--mhc-lumen-stage) 12%, transparent) 24deg, color-mix(in srgb, var(--mhc-lumen-stage) 88%, transparent) 112deg, transparent 113deg); animation: mhc-lumen-orbit 1100ms linear infinite; } .mhc-lumen-stage:is([data-stage="busy"], [data-stage="departing"]) .mhc-lumen-halo { transform: scale(.72); animation: mhc-lumen-breathe 1600ms ease-in-out infinite; } /* The light a stage lets go when a load completes or a chapter departs. */ .mhc-lumen-burst { --mhc-lumen-stage: var(--mhc-accent); z-index: 2147483645; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--mhc-lumen-stage) 58%, transparent) 0, color-mix(in srgb, var(--mhc-lumen-stage) 24%, transparent) 45%, transparent 100%); mix-blend-mode: screen; } @keyframes mhc-lumen-orbit { to { transform: rotate(360deg); } } @keyframes mhc-lumen-breathe { 50% { opacity: .55; } } .mhc-inverse-cursor-trail { position: fixed; z-index: 2147483645; inset: 0; width: 100vw; height: 100vh; opacity: 0; pointer-events: none; transition: opacity 120ms ease; contain: strict; } .mhc-inverse-cursor-trail.is-visible { opacity: 1; } /* ---- the loupe ------------------------------------------------------------ The plate is the archive's floating glass, the same surface, edge and shadow the rail and the return capsule are made of, with its hairline tinted by the destination's ink. Closed, it is a bead a sixth of its size at the pupil's corner, rounded to half its own short side; open, it has the sixteen pixel card radius of a link that runs to several lines. The runtime owns its position and its size, both on springs, and the stylesheet owns only the dilation and the fade, so the two never fight over one property. */ .mhc-lens-loupe { --mhc-lens-dest: var(--mhc-accent-ink); position: fixed; z-index: 2147483646; top: 0; left: 0; width: 0; height: 0; pointer-events: none; transform: translate3d(-400px, -400px, 0); will-change: transform; } .mhc-lens-sheet { position: absolute; top: 0; left: 0; box-sizing: border-box; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mhc-lens-dest) 30%, var(--elastic-glass-edge, color-mix(in srgb, var(--mhc-ink) 22%, transparent))); border-radius: var(--mhc-lens-bead, 999px); background: var(--elastic-glass-surface, linear-gradient(135deg, rgba(var(--mhc-float-rgb), .9), rgba(var(--mhc-float-rgb), .66))); box-shadow: var(--elastic-glass-shadow, 0 18px 44px rgba(var(--mhc-shadow-rgb), .18), 0 3px 10px rgba(var(--mhc-shadow-rgb), .08)); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); color: var(--mhc-on-plate); opacity: 0; visibility: hidden; transform: scale(.16); transform-origin: 0% 100%; transition: transform 220ms cubic-bezier(.4, 0, .9, .6), opacity 170ms ease 50ms, border-radius 220ms ease, border-color 240ms ease, visibility 0s linear 240ms; } .mhc-lens-loupe.is-open .mhc-lens-sheet { border-radius: 16px; opacity: 1; visibility: visible; transform: none; transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 150ms ease, border-radius 520ms cubic-bezier(.16, 1, .3, 1), border-color 240ms ease, visibility 0s; } /* Two pages, so that one reading can cross over the next while the plate springs between their sizes. Each keeps its own width and its own wrapping, so no line reflows while the plate is still moving. */ .mhc-lens-page { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 300px; padding: 13px 16px 14px; opacity: 0; transform: translate3d(0, 5px, 0); transition: opacity 110ms ease, transform 200ms cubic-bezier(.4, 0, 1, 1); } .mhc-lens-page[data-register="gloss"] { width: max-content; max-width: 272px; padding: 10px 13px 11px; } .mhc-lens-page.is-current { opacity: 1; transform: none; transition: opacity 220ms ease 80ms, transform 420ms cubic-bezier(.16, 1, .3, 1) 60ms; } .mhc-lens-page p, .mhc-lens-page ul { margin: 0; } .mhc-lens-kicker { display: flex; align-items: center; gap: 8px; font: 500 var(--mhc-type-2xs)/1.35 var(--mhc-font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mhc-on-plate-2); } .mhc-lens-kicker i, .mhc-lens-list i, .mhc-lens-meta i { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; } .mhc-lens-year { margin-top: 10px !important; font: 300 var(--mhc-type-4xl)/.86 var(--mhc-font-sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .mhc-lens-title { margin-top: 9px !important; font: 400 var(--mhc-type-lg)/1.28 var(--mhc-font-sans); letter-spacing: -.012em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mhc-lens-kicker + .mhc-lens-title { margin-top: 7px !important; } .mhc-lens-gloss { font: 400 var(--mhc-type-md)/1.42 var(--mhc-font-sans); letter-spacing: -.004em; text-wrap: pretty; } .mhc-lens-kicker + .mhc-lens-gloss { margin-top: 6px !important; } .mhc-lens-sub { margin-top: 5px !important; font: 400 var(--mhc-type-sm)/1.4 var(--mhc-font-sans); color: var(--mhc-on-plate-2); text-wrap: pretty; } /* Balanced, because a loupe is narrow enough that an unbalanced break leaves a year or a single word stranded on a line of its own. */ .mhc-lens-body { margin-top: 9px !important; font: 400 var(--mhc-type-md)/1.46 var(--mhc-font-sans); color: var(--mhc-on-plate-2); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .mhc-lens-page[data-register="gloss"] .mhc-lens-body { margin-top: 5px !important; -webkit-line-clamp: 5; } .mhc-lens-list { display: grid; gap: 6px; margin-top: 8px !important; padding: 0; list-style: none; font: 400 var(--mhc-type-sm)/1.38 var(--mhc-font-sans); color: var(--mhc-on-plate-2); } .mhc-lens-list li { display: flex; align-items: baseline; gap: 8px; } .mhc-lens-list li i { transform: translateY(-1px); } .mhc-lens-list b { font-weight: 500; color: var(--mhc-on-plate); } .mhc-lens-keys { display: flex; gap: 4px; margin-top: 8px !important; } .mhc-lens-keys kbd { padding: 1px 6px; border: 1px solid rgba(var(--mhc-on-plate-rgb), .3); border-radius: 3px; font: 500 var(--mhc-type-2xs)/1.5 var(--mhc-font-mono); letter-spacing: .04em; } .mhc-lens-note { margin-top: 8px !important; font: 400 var(--mhc-type-sm)/1.38 var(--mhc-font-sans); color: var(--mhc-on-plate-3); } .mhc-lens-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 11px !important; padding-top: 9px; border-top: 1px solid rgba(var(--mhc-on-plate-rgb), .12); font: 500 var(--mhc-type-2xs)/1.45 var(--mhc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mhc-on-plate-3); } .mhc-lens-meta span { display: inline-flex; align-items: center; gap: 6px; } .mhc-lens-meta i { width: 6px; height: 6px; } @media (prefers-reduced-motion: reduce) { .mhc-inverse-cursor-trail { display: none !important; } .mhc-inverse-cursor, .mhc-inverse-cursor * { transition-duration: .01ms !important; animation: none !important; } .mhc-lens-sheet, .mhc-lens-loupe.is-open .mhc-lens-sheet, .mhc-lens-page, .mhc-lens-page.is-current { transform: none; } .mhc-lens-sheet { transition: opacity 120ms ease, visibility 0s linear 120ms; } .mhc-lens-loupe.is-open .mhc-lens-sheet { transition: opacity 120ms ease, visibility 0s; } /* Every state of the light still appears, and only the circling stops. */ .mhc-lumen-arc, .mhc-lumen-halo { animation: none !important; } } /* The Timeline's own motion switch asks for the same thing on that page. */ html.timeline-reduce-motion .mhc-inverse-cursor-trail { display: none !important; } html.timeline-reduce-motion .mhc-inverse-cursor, html.timeline-reduce-motion .mhc-inverse-cursor * { transition-duration: .01ms !important; animation: none !important; } html.timeline-reduce-motion .mhc-lens-sheet, html.timeline-reduce-motion .mhc-lens-page { transform: none !important; } html.timeline-reduce-motion :is(.mhc-lumen-arc, .mhc-lumen-halo) { animation: none !important; } @media (forced-colors: active) { .mhc-lens-loupe, .mhc-lumen { display: none !important; } } @media print { .mhc-inverse-cursor, .mhc-inverse-cursor-trail, .mhc-lens-loupe, .mhc-lumen { display: none !important; } } /* --- authored mode transition: the crossing ------------------------------- The page itself transforms: only surfaces intersecting the current viewport interpolate their real palette properties. The thousands of off-screen archive nodes remain outside the motion budget. THE CURVE. A white ground travelling to black underneath an ink travelling the other way has to pass through a frame in which the two are the same value, and no easing removes that; what easing decides is where in the interval it happens and whether the rest of the interval is doing anything. The expo-out this rule used to carry spends four fifths of its travel in the first third of its time, which is the fault docs/DESIGN.md already records for the chapter motif masks. Measured on the Measurement route it put the ground at ninety five per cent by 208ms of an authored 480 and held a finished page for the remaining 272, and it put the crossing 24ms after the press, over before the reader had finished the gesture. The sigmoid below answers that, and its entry is the part to be careful with. A curve that is very slow out of the departing palette narrows the crossing, which is what the contrast reading wants, but it also means the page does nothing at all for the first sixth of the interval, and a press that is answered by nothing reads as the archive having failed to hear it rather than as restraint. The first shape tried here reached two per cent of its travel only at 16.2% of the interval, which at the pace this ships was 181ms of stillness after the press. This one reaches the same point at 5.6%, so the page is visibly moving well inside the first tenth of a second, and pays for it by widening the crossing from 9.7% of the interval to 15.3%. That is the right way round: motion is feedback, and a reader who can see the change happening is not waiting. THE ORDER, BANDED BY PROPERTY RATHER THAN BY NODE. A mode change already touches these properties on every visible surface, so the sequence can be written into the transition list itself and costs nothing at all: ground and ink 0ms they cross together, because separating them only lengthens the moment they are alike marks 120ms fill and stroke follow the surfaces they sit on rules 200ms the page takes its new ground before its structure is drawn back over it encoding 300ms see the chroma band below THE PACE, AND WHY IT IS NOT 2. Every number here is authored at a pace of 1 and multiplied by --mhc-mode-pace, so the whole event is retimed from one place. It shipped briefly at 2, and both of the things that went wrong there are worth recording, because neither is fixable by easing. To begin with, every millisecond of the interval is one in which the archive repaints every glyph on screen, since interpolating colour on text means re-rasterising it, so doubling the length doubles the number of frames available to drop. In addition, and less obviously, a ground travelling the whole distance from white to black passes through 255 eight-bit steps however long it takes, so a slower fade puts fewer of those steps in each frame and the flat ground begins to show them as stepping rather than as a fade. Both faults are relieved by shortening rather than by any curve, which is why this sits at 1.25: slower and more deliberate than the 480ms the archive used to carry, and short enough that neither the repainting nor the stepping is visible. assets/theme.js reads these back rather than repeating them, so the two files cannot drift, and it republishes the first band through mhcTheme.modeTiming() so that a canvas painting its share of the ground moves on this schedule instead of on a second one that happens to be near it. --mhc-mode-crossing is the ground and ink band's duration and --mhc-mode-settle is the last band's delay plus its duration, both in plain milliseconds at a pace of 1. */ :root { --mhc-mode-pace: 1.25; --mhc-mode-crossing: 560; --mhc-mode-settle: 720; --mhc-mode-cross: cubic-bezier(.34, .06, .2, 1); --mhc-mode-follow: cubic-bezier(.33, .8, .32, 1); } html.theme-transitioning.theme-transition-surface, html.theme-transitioning.theme-transition-surface::before, html.theme-transitioning.theme-transition-surface::after, html.theme-transitioning .theme-transition-surface:not(.theme-toggle-icon), html.theme-transitioning .theme-transition-surface:not(.theme-toggle-icon)::before, html.theme-transitioning .theme-transition-surface:not(.theme-toggle-icon)::after { transition-property: background-color, color, fill, stroke, border-color, outline-color, text-decoration-color !important; transition-duration: calc(560ms * var(--mhc-mode-pace)), calc(560ms * var(--mhc-mode-pace)), calc(440ms * var(--mhc-mode-pace)), calc(440ms * var(--mhc-mode-pace)), calc(400ms * var(--mhc-mode-pace)), calc(400ms * var(--mhc-mode-pace)), calc(400ms * var(--mhc-mode-pace)) !important; transition-timing-function: var(--mhc-mode-cross), var(--mhc-mode-cross), var(--mhc-mode-follow), var(--mhc-mode-follow), var(--mhc-mode-follow), var(--mhc-mode-follow), var(--mhc-mode-follow) !important; transition-delay: 0ms, 0ms, calc(120ms * var(--mhc-mode-pace)), calc(120ms * var(--mhc-mode-pace)), calc(200ms * var(--mhc-mode-pace)), calc(200ms * var(--mhc-mode-pace)), calc(200ms * var(--mhc-mode-pace)) !important; } /* The encoding resolves last, and on its own interval. Era, source, role, frame and chapter hues are the archive's data rather than its decoration, and their whole claim is that they survive a change of mode rather than participating in it: the field values do not move between the modes at all, and only the ink drawn on the ground is allowed to. Sweeping those inks along with the neutrals in one blanket rule says the opposite. The mark is written by assets/theme.js, which measures the channel spread of each visible surface's departing colour, because the archive reaches these hues through roughly two hundred component selectors across the shared stylesheets and every page's inline style, and no selector list would stay true. This rule follows the one above so that its two declarations win on source order at equal specificity. */ html.theme-transitioning .theme-transition-chroma:not(.theme-toggle-icon), html.theme-transitioning .theme-transition-chroma:not(.theme-toggle-icon)::before, html.theme-transitioning .theme-transition-chroma:not(.theme-toggle-icon)::after { transition-duration: calc(420ms * var(--mhc-mode-pace)) !important; transition-timing-function: var(--mhc-mode-follow) !important; transition-delay: calc(300ms * var(--mhc-mode-pace)) !important; } @media (prefers-reduced-motion: reduce) { html.theme-transitioning .theme-transition-surface, html.theme-transitioning .theme-transition-surface::before, html.theme-transitioning .theme-transition-surface::after, html.theme-transitioning .theme-transition-chroma, html.theme-transitioning .theme-transition-chroma::before, html.theme-transitioning .theme-transition-chroma::after { transition: none !important; } } /* --- the standalone mode control ------------------------------------------ Method companions without a chapter drawer retain a floating control. The canonical chapter route uses the drawer-scoped circular control below. */ .theme-toggle { position: fixed; z-index: 1100; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 1px solid rgba(var(--mhc-on-plate-rgb), .28); border-radius: 999px; background: rgba(var(--mhc-float-rgb), .76); color: var(--mhc-on-plate); box-shadow: 0 12px 30px rgba(var(--mhc-shadow-rgb), .15); cursor: pointer; backdrop-filter: blur(22px) saturate(128%); -webkit-backdrop-filter: blur(22px) saturate(128%); transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .28s ease, transform .38s cubic-bezier(.16, 1, .3, 1); } .theme-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--mhc-surface-control-hover); color: var(--mhc-action-hover-ink); transform: translateY(-50%) scale(1.06); } .theme-toggle:active { transform: translateY(-50%) scale(.91); } .theme-toggle:focus-visible { outline: 2px solid var(--mhc-ink); outline-offset: 3px; } @media (max-width: 900px) { .theme-toggle { right: 7px; width: 48px; height: 48px; } } /* Icon swap for the drawer and standalone controls. The page-corner control has its own resting dot and reveals the destination glyph on interaction. */ .theme-toggle > .theme-toggle-icon { position: absolute; z-index: 1; transition: opacity .18s ease, transform .32s cubic-bezier(.16, 1, .3, 1), filter .22s ease; } .theme-toggle > .theme-toggle-icon--dark { opacity: 0; transform: rotate(-12deg) scale(.78); filter: blur(3px); } .theme-toggle > .theme-toggle-icon--light { opacity: 1; transform: none; filter: blur(0); } :root[data-theme="dark"] .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--light, :root[data-theme="legacy"] .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--light { opacity: 0; transform: rotate(12deg) scale(.78); filter: blur(3px); } :root[data-theme="dark"] .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--dark, :root[data-theme="legacy"] .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--dark { opacity: 1; transform: none; filter: blur(0); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--light { opacity: 0; transform: rotate(12deg) scale(.78); filter: blur(3px); } :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) .theme-toggle:not(.archive-corner-toggle) > .theme-toggle-icon--dark { opacity: 1; transform: none; filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle > .theme-toggle-icon { transition: opacity .01ms; } } /* --- chapter-drawer mode control ----------------------------------------- The numbered route keeps a reserved left gutter for the menu button. The appearance control sits at the lower end of that same axis: one low-frequency circular utility, visible only while the drawer is open. A transformed drawer establishes its fixed-position containing block, so the control stays in the gutter while a short or zoomed menu scrolls behind it. */ .chapter-drawer > .drawer-theme-toggle, .mhc-chapter-drawer > .drawer-theme-toggle { position: fixed; z-index: 2; left: 12px; right: auto; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); width: 56px; height: 56px; transform: none; } /* The persistent rail is stacked above the drawer so its menu/close button stays available. Its transparent shell must not intercept the lower gutter; only the menu button itself remains interactive while the drawer is open. */ body.drawer-open .archive-rail, body.mhc-nav-open .mhc-archive-rail { pointer-events: none !important; } body.drawer-open #menu-toggle, body.mhc-nav-open #mhc-menu-toggle { pointer-events: auto; } .chapter-drawer > .drawer-theme-toggle:hover, .chapter-drawer > .drawer-theme-toggle:focus-visible, .mhc-chapter-drawer > .drawer-theme-toggle:hover, .mhc-chapter-drawer > .drawer-theme-toggle:focus-visible { transform: scale(1.06); } .chapter-drawer > .drawer-theme-toggle:active, .mhc-chapter-drawer > .drawer-theme-toggle:active { transform: scale(.91); } @media (max-width: 1040px) { .chapter-drawer > .drawer-theme-toggle, .mhc-chapter-drawer > .drawer-theme-toggle { width: 52px; height: 52px; } } @media (max-width: 700px) { .chapter-drawer > .drawer-theme-toggle, .mhc-chapter-drawer > .drawer-theme-toggle { width: 48px; height: 48px; } } /* --- page-corner appearance control -------------------------------------- Every route shares the landing's small resting dot. Its 44px hit area stays in the corner; hover and keyboard focus reveal the destination glyph. */ .archive-corner-toggle { position: fixed; z-index: 1200; top: 0; right: 0; bottom: auto; left: auto; display: block; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; color: var(--mhc-on-paper); box-shadow: none; opacity: 1; cursor: pointer; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transform-origin: top right; transition: opacity 140ms ease, color 160ms ease; } .archive-corner-toggle::before { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ''; transform: scale(1); transform-origin: center; transition: opacity 160ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1); } .archive-corner-toggle > .theme-toggle-icon { top: 6px; right: 6px; display: block; width: 20px; height: 20px; opacity: 0; transform: scale(.35) rotate(-25deg); filter: none; transition: opacity 180ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .archive-corner-toggle[aria-pressed="false"]:is(:hover, :focus-visible, :active) > .theme-toggle-icon--dark, .archive-corner-toggle[aria-pressed="true"]:is(:hover, :focus-visible, :active) > .theme-toggle-icon--light { opacity: 1; transform: scale(1) rotate(0); } .archive-corner-toggle:hover, .archive-corner-toggle:focus-visible, .archive-corner-toggle:active { background: transparent; color: var(--mhc-on-paper); box-shadow: none; opacity: 1; transform: none; } .archive-corner-toggle:hover::before, .archive-corner-toggle:focus-visible::before, .archive-corner-toggle:active::before { opacity: 0; transform: scale(.3); } .archive-corner-toggle:focus-visible { outline: 2px solid var(--mhc-on-paper); outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .archive-corner-toggle, .archive-corner-toggle::before { transition-duration: .01ms; } } @media (forced-colors: active) { .archive-corner-toggle::before { background: Highlight; forced-color-adjust: auto; } .archive-corner-toggle:hover, .archive-corner-toggle:focus-visible, .archive-corner-toggle:active { color: ButtonText; forced-color-adjust: auto; } .archive-corner-toggle:focus-visible { outline-color: ButtonText; } } /* The viewport scrollbar follows the chapter and the selected appearance. Root-owned tokens also reset when the chapter shell replaces a document. */ :root { --mhc-scrollbar-accent: var(--mhc-accent); --mhc-scrollbar-track: var(--mhc-surface-room); } :root[data-scrollbar-chapter="measurement"], :root:has(body[data-chapter="measurement"]) { --mhc-scrollbar-accent: var(--mhc-chapter-measurement-field); } :root[data-scrollbar-chapter="claims-makers"], :root:has(body[data-chapter="claims-makers"]) { --mhc-scrollbar-accent: var(--mhc-chapter-claims-field); } :root[data-scrollbar-chapter="money"], :root:has(body[data-chapter="money"]) { --mhc-scrollbar-accent: var(--mhc-chapter-money-field); } :root[data-scrollbar-chapter="sources"], :root:has(body[data-chapter="sources"]) { --mhc-scrollbar-accent: var(--mhc-chapter-sources-field); } :root:has(body[data-chapter="frames"]) { --mhc-scrollbar-accent: var(--mhc-chapter-frames-field); } :root:has(body[data-chapter="summary"]) { --mhc-scrollbar-accent: var(--mhc-chapter-summary-field); } :root:has(body[data-chapter="about"]) { --mhc-scrollbar-accent: var(--mhc-chapter-about-field); } html:root { scrollbar-width: thin; scrollbar-color: var(--mhc-scrollbar-accent) var(--mhc-scrollbar-track); } html:root::-webkit-scrollbar { width: 10px; height: 10px; } html:root::-webkit-scrollbar-track, html:root::-webkit-scrollbar-corner { background: var(--mhc-scrollbar-track); } html:root::-webkit-scrollbar-thumb { background: var(--mhc-scrollbar-accent); border: 2px solid var(--mhc-scrollbar-track); border-radius: 999px; } html:root::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--mhc-scrollbar-accent) 75%, var(--mhc-on-paper)); } @media (forced-colors: active) { html:root { scrollbar-color: auto; scrollbar-width: auto; } html:root::-webkit-scrollbar-track, html:root::-webkit-scrollbar-corner { background: Canvas; } html:root::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; } html:root::-webkit-scrollbar-thumb:hover { background: Highlight; } } /* Text selection is a shared interaction, independent of chapter/data hues. */ :root:not([data-theme="legacy"])::selection, :root:not([data-theme="legacy"]) *::selection { background: var(--mhc-accent); color: var(--mhc-on-accent); text-shadow: none; } /* Printed paper needs the light-page accent ink even after a dark-mode visit. */ @media print { :root:not([data-theme="legacy"]) { --mhc-accent-ink: #c03400 !important; } } @media (forced-colors: active) { :root:not([data-theme="legacy"])::selection, :root:not([data-theme="legacy"]) *::selection { background: Highlight; color: HighlightText; } } /* Disclosure marks share one centered drawing. Separate one-pixel bars can round to different centers in even-sized wells, especially after rotation. */ :root{--mhc-disclosure-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8 3v10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")} :is(.frame-config-plus,.card-toggle,.profile-toggle,.institution-toggle,.source-toggle){transform-origin:50% 50%} :is(.frame-config-plus,.card-toggle,.profile-toggle,.institution-toggle,.source-toggle)::before{ content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px; background:currentColor;mask:var(--mhc-disclosure-plus) center/contain no-repeat; -webkit-mask:var(--mhc-disclosure-plus) center/contain no-repeat; }