/* ========================================================================= ANANNYE - Editorial type & layout system A futuristic financial broadsheet. Restraint over decoration. ========================================================================= */ /* Playfair Display and Cormorant Garamond draw the hyphen as a slanted, calligraphic stroke. Borrow a straight horizontal hyphen from a plain serif for just that codepoint (and the unicode hyphen / en dash) so headlines read level. Listed first in the display/head stacks so it wins for these glyphs. */ @font-face { font-family: "StraightDash"; src: local("Georgia"), local("Times New Roman"), local("Times"); unicode-range: U+002D, U+2010, U+2013; } :root { /* Paper & ink */ --paper: #f4f0e6; --paper-soft: #ece6d8; --paper-deep: #e2dac8; --paper-press: #f8f5ee; --ink: #14161c; --ink-soft: #2a2d36; --muted: #67625a; --muted-deep: #4d4942; /* Signal accents - used sparingly */ --navy: #0a1422; --navy-soft: #122236; --navy-line: #1d3148; --cyan: #17c6dc; --cyan-deep: #0f8fa1; --gold: #c69a3f; --gold-deep: #a67d2a; /* Rules */ --line: rgba(20, 22, 28, 0.16); --line-soft: rgba(20, 22, 28, 0.09); --line-strong: rgba(20, 22, 28, 0.40); --line-paper: rgba(244, 240, 230, 0.18); --shadow: rgba(20, 22, 28, 0.10); /* Type */ --font-display: "StraightDash", "Playfair Display", "Cormorant Garamond", Georgia, serif; --font-head: "StraightDash", "Cormorant Garamond", Georgia, serif; --font-body: "Source Serif 4", "Libre Baskerville", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; /* Rhythm */ --measure: 40rem; --gutter: clamp(1.15rem, 3.2vw, 2rem); --shell: 1220px; /* Interaction */ --hover-duration: 560ms; --hover-motion-duration: 480ms; --hover-ease: cubic-bezier(0.45, 0, 0.55, 1); color-scheme: light; } /* ========================================================================= DARK THEME The whole system is variable-driven, so dark mode is mostly a palette swap: paper → deep slate, ink → warm ivory, rules/shadows inverted. A few spots reuse --navy/--paper as "ink on a dark panel" (skip-link, code) or --navy as emphasis text (kicker, drop-cap, blockquote); those are corrected explicitly below. The active theme is applied before paint by a tiny inline boot script in each page , so there is no flash. ========================================================================= */ html[data-theme="dark"] { color-scheme: dark; --paper: #111319; --paper-soft: #181b22; --paper-deep: #21252e; --paper-press: #1b1f27; --ink: #ece7d9; --ink-soft: #d4cfc2; --muted: #948e84; --muted-deep: #b6b0a4; /* Dark feature panels (code) - kept distinct from the page */ --navy: #0c1828; --navy-soft: #16263b; --navy-line: #24405c; --line: rgba(236, 231, 217, 0.14); --line-soft: rgba(236, 231, 217, 0.07); --line-strong: rgba(236, 231, 217, 0.34); --line-paper: rgba(236, 231, 217, 0.18); --shadow: rgba(0, 0, 0, 0.55); } /* Emphasis text that was coloured with --navy on light paper → ivory on dark */ html[data-theme="dark"] .kicker, html[data-theme="dark"] .pillar-list dt, html[data-theme="dark"] .article-content blockquote { color: var(--ink); } html[data-theme="dark"] .article-content .lede::first-letter { color: var(--gold); } /* Text that sits on the always-dark navy panels → keep it ivory in both modes */ html[data-theme="dark"] .skip-link { color: var(--ink); } /* Default ring cursor + diagram hairlines flip to light on the dark page */ html[data-theme="dark"] .cursor { --ring-color: rgba(236, 231, 217, 0.6); --dot-color: var(--gold); } html[data-theme="dark"] .fig .s-line { stroke: rgba(236, 231, 217, 0.3); } html[data-theme="dark"] .fig .f-grid { stroke: rgba(236, 231, 217, 0.16); } html[data-theme="dark"] .fig .f-grid--faint { stroke: rgba(236, 231, 217, 0.09); } html[data-theme="dark"] .fig .f-tint-ink { fill: rgba(236, 231, 217, 0.06); } html[data-theme="dark"] .fig .f-tint-gold { fill: rgba(198, 154, 63, 0.18); } html[data-theme="dark"] .fig .f-tint-cyan { fill: rgba(23, 198, 220, 0.16); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; background-color: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.7; font-feature-settings: "kern" 1, "liga" 1, "onum" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Subtle paper grain - fixed, behind everything, CSS only */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; background-image: radial-gradient(circle at 18% 16%, rgba(198, 154, 63, 0.06), transparent 38%), radial-gradient(circle at 86% 88%, rgba(23, 198, 220, 0.045), transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: auto, auto, 160px 160px; } img, svg { max-width: 100%; } img { display: block; } a { --hover-underline-thickness: 1px; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-strong); background-image: linear-gradient(90deg, var(--cyan), var(--cyan)); background-repeat: no-repeat; background-position: left calc(100% - 0.02em); background-size: 0 var(--hover-underline-thickness); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--hover-duration) var(--hover-ease), background-size var(--hover-motion-duration) var(--hover-ease); } a:hover { color: var(--cyan-deep); background-size: 100% var(--hover-underline-thickness); } :focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 3px; border-radius: 1px; } ::selection { background: rgba(23, 198, 220, 0.22); } .skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 50; min-height: 44px; transform: translateY(-160%); background: var(--navy); color: var(--paper); padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-decoration: none; box-shadow: 0 8px 24px var(--shadow); } .skip-link:focus { transform: translateY(0); } /* Shared shell width */ .site-header, main, .site-footer { width: min(calc(100% - var(--gutter) * 2), var(--shell)); margin-inline: auto; } /* Shared mono metadata treatment */ .utility-strip, .issue-line, .nameplate-meta, .kicker, .article-meta, .byline, .section-label, .mono-label, .eyebrow { font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; } /* ========================================================================= 1 · UTILITY STRIP + NAMEPLATE (MASTHEAD) ========================================================================= */ .site-header { padding-top: 1.1rem; } .utility-strip { min-height: 2.4rem; display: grid; grid-template-columns: auto auto 1fr auto; gap: 1rem; align-items: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); font-size: 0.7rem; line-height: 1.2; color: var(--muted); } /* Theme toggle - injected by script.js into the utility strip, far right. The icon and text describe the theme available on activation. */ .theme-toggle { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 1.9rem; height: 1.9rem; padding: 0 0.5rem; /* Pull the pill back by its own padding so the icon sits one nav-gap from the last link, matching the spacing between the other labels. */ margin-left: -0.5rem; border: 0; border-radius: 999px; background-color: transparent; background-image: linear-gradient(90deg, var(--paper-soft), var(--paper-soft)); background-repeat: no-repeat; background-position: left center; background-size: 0 100%; color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--hover-duration) var(--hover-ease), background-size var(--hover-motion-duration) var(--hover-ease); } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--cyan-deep); background-size: 100% 100%; } .theme-toggle svg { width: 14px; height: 14px; display: block; flex: 0 0 auto; } .theme-toggle__label { display: block; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } .domain { color: var(--ink); font-weight: 600; text-decoration: none; } .domain:hover { color: var(--cyan-deep); } .topic-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.2rem 1rem; } .topic-nav a { position: relative; padding-bottom: 1px; text-decoration: none; background-image: none; } .topic-nav a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--cyan); transition: width var(--hover-motion-duration) var(--hover-ease); } .topic-nav a:hover::after, .topic-nav a:focus-visible::after { width: 100%; } /* --- The nameplate: a true newspaper masthead --- */ .nameplate { position: relative; margin-top: 1.6rem; text-align: center; } /* Thin top metadata line with registration ticks */ .nameplate-rule-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(0.75rem, 3vw, 1.6rem); margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nameplate-rule-top::before, .nameplate-rule-top::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); } .nameplate-rule-top::after { background: linear-gradient(90deg, var(--line-strong), transparent); } .nameplate-rule-top span { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .nameplate-rule-top__center { color: var(--muted-deep); } /* registration tick */ .tick { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; position: relative; } .tick::after { content: ""; position: absolute; inset: 2px; background: var(--cyan); border-radius: 50%; opacity: 0.7; } .wordmark { display: block; text-decoration: none; background-image: none; color: var(--ink); /* The anchor is a full-width block, but only the painted letters below should be hoverable/clickable - otherwise the ring cursor would flip to "button" across the whole empty masthead row. Pointer events on the glyphs only; keyboard focus/activation is unaffected (pointer-events ignores the keyboard). */ pointer-events: none; } /* The wordmark is set as SVG text so it scales to fit the column at every width - the nameplate can never overflow, and optical tracking is baked in. */ .wordmark .word { display: block; width: min(100%, 60rem); height: auto; margin: 0 auto; overflow: visible; pointer-events: none; /* the empty SVG canvas is not interactive */ } .wordmark .word text { font-family: var(--font-display); font-weight: 800; font-size: 120px; /* user units within the 0 0 1000 150 viewBox */ letter-spacing: 14px; /* optical tracking, baked into the scalable glyph run */ fill: var(--ink); pointer-events: auto; /* only the painted glyph outlines react */ } .wordmark:hover .word text { fill: var(--ink); } /* Very fine double rule beneath the wordmark, with a centred spectrum filament */ .nameplate-rule-double { position: relative; height: 5px; margin: 1rem auto 0; width: min(100%, 58rem); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); } .nameplate-rule-double::before { content: ""; position: absolute; left: 50%; top: -2px; width: 32%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--cyan) 72%, transparent); } .nameplate-subtitle { margin: 1rem auto 0; max-width: 40rem; font-family: var(--font-head); font-style: italic; font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.3; letter-spacing: 0.005em; color: var(--muted-deep); text-wrap: balance; } /* Structured masthead meta row: label-over-value pairs, like a real issue line */ .nameplate-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem 2.4rem; margin: 1.15rem auto 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.64rem; color: var(--muted); } .nameplate-meta div { display: inline-flex; align-items: baseline; gap: 0.5rem; } .nameplate-meta dt { margin: 0; color: var(--muted); opacity: 0.75; } .nameplate-meta dt::after { content: ""; } .nameplate-meta dd { margin: 0; color: var(--ink-soft); font-weight: 600; white-space: nowrap; } .nameplate-meta dd.accent { color: var(--gold-deep); } /* Compact nameplate (article header) */ .nameplate--compact { margin-top: 1.1rem; } .nameplate--compact .wordmark .word { width: min(100%, 30rem); } .nameplate--compact .nameplate-rule-double { margin-top: 0.6rem; width: min(100%, 40rem); } /* ========================================================================= 2 · FRONT PAGE ========================================================================= */ .front-page { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(17rem, 0.78fr); grid-template-areas: "lead visual" "lead brief"; gap: 0 2.2rem; margin-top: 1.8rem; padding-bottom: 1.6rem; border-bottom: 3px double var(--line-strong); } .front-page > *, .editorial-grid > *, .article-layout > *, .article-card, .archive-card, .article-nav > * { min-width: 0; } .lead-story { grid-area: lead; padding-right: 2.2rem; border-right: 1px solid var(--line); } .kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--navy-soft); font-size: 0.66rem; font-weight: 600; } .kicker::before { content: ""; width: 1.4rem; height: 2px; background: linear-gradient(90deg, var(--gold), var(--cyan)); } .lead-story h1 { margin: 0.7rem 0 0.7rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 0.96; letter-spacing: -0.01em; overflow-wrap: break-word; text-wrap: balance; } .lead-story h1 a, .article-card h3 a, .notes-box h3 a, .archive-card, .brief-list a, .footer-mark, .related-card { text-decoration: none; } .deck { max-width: 44rem; margin: 0; color: var(--muted-deep); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.5; overflow-wrap: break-word; } .deck::first-letter { /* keep natural */ } .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 1.3rem; color: var(--muted); font-size: 0.66rem; } .byline span:first-child { color: var(--ink); font-weight: 600; } .byline > * { position: relative; } .byline > * + *::before { content: ""; position: absolute; left: -0.55rem; top: 50%; width: 3px; height: 3px; background: var(--gold); transform: translateY(-50%) rotate(45deg); } /* Publication record. The first-of-month dates in this journal are editorial issue dates, not the moment a file was first written, and several issues were revised after their issue month. The two are shown separately so the archive never implies that later evidence was available earlier than it was. */ .issue-dates { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin: 0.85rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.03em; } .issue-dates > div { display: flex; gap: 0.4rem; align-items: baseline; } .issue-dates dt { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; } .issue-dates dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .issue-visual { grid-area: visual; align-self: start; margin: 0; border: 1px solid var(--line-strong); background: var(--paper-soft); box-shadow: 0 1px 0 var(--paper-press) inset; } .issue-visual img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; filter: saturate(0.94) contrast(1.02); } .issue-visual figcaption, .article-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; } .issue-visual figcaption span:first-child { color: var(--ink); font-weight: 600; } .issue-brief { grid-area: brief; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .section-label, .mono-label { margin: 0; display: flex; align-items: center; color: var(--muted); font-size: 0.64rem; font-weight: 600; } .section-label::after { content: ""; flex: 1; height: 1px; margin-left: 0.7rem; background: linear-gradient(90deg, var(--gold), var(--cyan) 60%, transparent); } .brief-list { display: grid; gap: 0.95rem; margin: 0.95rem 0 0; padding: 0; list-style: none; counter-reset: brief; } .brief-list li { counter-increment: brief; display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.7rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--line-soft); } .brief-list li:last-child { border-bottom: 0; padding-bottom: 0; } .brief-list li::before { content: counter(brief, decimal-leading-zero); color: var(--gold-deep); font-family: var(--font-mono); font-size: 0.72rem; padding-top: 0.18rem; } .brief-list a { font-family: var(--font-head); font-size: 1.22rem; font-weight: 600; line-height: 1.14; overflow-wrap: break-word; } .brief-list a:hover { color: var(--cyan-deep); } .brief-list span { grid-column: 2; margin-top: 0.3rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Edition band - a thin instrument panel, not cards */ .edition-band { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.6rem 0 2.4rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); } .edition-band > div { padding: 0.95rem 1.3rem 1rem 0; } .edition-band > div + div { padding-left: 1.3rem; border-left: 1px solid var(--line); } .edition-band strong { display: block; margin-top: 0.45rem; font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; line-height: 1.12; } /* Editorial grid: articles + side column */ .editorial-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 2.4rem; align-items: start; } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; margin-bottom: 0; border-bottom: 3px double var(--line-strong); } .section-heading .section-label { flex: 0 0 auto; } .section-heading .section-label::after { display: none; } .section-heading h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 0.92; letter-spacing: -0.01em; } /* Article list grid */ .article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .article-card { position: relative; display: flex; flex-direction: column; min-height: 14rem; padding: 1.3rem 1.2rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: transparent; background-image: linear-gradient(90deg, var(--paper-press), var(--paper-press)), linear-gradient(180deg, rgba(248, 245, 238, 0.4), transparent); background-repeat: no-repeat; background-position: left top, left top; background-size: 0 100%, 100% 100%; transition: background-size var(--hover-motion-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease); } .article-card:nth-child(2n) { border-right: 0; } .article-card::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--cyan)); transition: width var(--hover-motion-duration) var(--hover-ease); } .article-card:hover, .article-card:focus-within { background-size: 100% 100%, 100% 100%; } .article-card:hover::before { width: 100%; } .feature-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.6fr); gap: 0 1.6rem; min-height: 13rem; } .feature-card .kicker { grid-column: 1 / -1; } .feature-card h3 { grid-column: 1; align-self: start; } .feature-card p { grid-column: 2; grid-row: 2; align-self: start; padding-left: 1.6rem; border-left: 1px solid var(--line); } .feature-card .article-meta { grid-column: 1 / -1; } .article-card h3, .notes-box h3 { margin: 0.55rem 0 0.6rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.55rem, 3vw, 2.6rem); line-height: 1; overflow-wrap: break-word; } .article-card:not(.feature-card) h3, .notes-box h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); } .article-card h3 a:hover, .notes-box h3 a:hover { color: var(--cyan-deep); } .article-card p, .notes-box p { margin: 0; color: var(--muted-deep); font-size: 0.96rem; line-height: 1.55; } .article-card p { flex: 1; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 1.1rem; color: var(--muted); font-size: 0.62rem; } /* Side column */ .side-column { display: grid; gap: 1.4rem; position: sticky; top: 1rem; } .signal-box, .notes-box { border-top: 3px solid var(--ink); padding: 0.9rem 0 0; } .pillar-list { display: grid; margin: 0.9rem 0 0; } .pillar-list div { padding: 0.75rem 0 0.85rem; border-top: 1px solid var(--line-soft); } .pillar-list dt { color: var(--navy-soft); font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; line-height: 1.15; } .pillar-list dd { margin: 0.28rem 0 0; color: var(--muted-deep); font-size: 0.82rem; line-height: 1.45; } .notes-box article { padding: 0.85rem 0; border-top: 1px solid var(--line-soft); } .notes-box article:first-of-type { border-top: 0; } /* Archive */ .archive-section { padding: 3.2rem 0 1.5rem; } .archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem; border: 1px solid var(--line); } .archive-card { position: relative; min-height: 10rem; display: grid; align-content: space-between; gap: 0.6rem; padding: 1.1rem 1.2rem; background-color: var(--paper-soft); background-image: linear-gradient(90deg, var(--paper-press), var(--paper-press)); background-repeat: no-repeat; background-position: left top; background-size: 0 100%; transition: background-size var(--hover-motion-duration) var(--hover-ease); } .archive-card + .archive-card { border-left: 1px solid var(--line); } /* top accent rule, consistent with .article-card interaction language */ .archive-card::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--cyan)); transition: width var(--hover-motion-duration) var(--hover-ease); } .archive-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background: linear-gradient(90deg, rgba(23, 198, 220, 0.07), transparent); transition: width var(--hover-motion-duration) var(--hover-ease); } .archive-card:hover, .archive-card:focus-visible { background-size: 100% 100%; } .archive-card:hover::before, .archive-card:focus-visible::before { width: 100%; } .archive-card:hover::after, .archive-card:focus-visible::after { width: 100%; } .archive-card span, .archive-card small { color: var(--muted); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; } .archive-card strong { --hover-underline-thickness: 2px; width: fit-content; max-width: 100%; justify-self: start; font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 0.98; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--hover-underline-thickness); text-underline-offset: 0.16em; transition: color var(--hover-duration) var(--hover-ease), text-decoration-color var(--hover-motion-duration) var(--hover-ease); } .archive-card:hover strong, .archive-card:focus-visible strong { color: var(--cyan-deep); text-decoration-color: var(--cyan); } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { display: grid; gap: 1rem; margin-top: 3rem; padding: 1.6rem 0 2.6rem; border-top: 3px solid var(--ink); color: var(--muted); } .footer-mark { display: inline-block; margin-bottom: 0.4rem; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.12em; } .site-footer p { margin: 0; font-size: 0.92rem; } .site-footer .footer-journal { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .site-footer small { padding-top: 0.6rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================= 6 · ARTICLE PAGE ========================================================================= */ .article-shell { padding-top: 2rem; } .article-layout { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: 2.4rem; align-items: start; } .article-hero { grid-column: 2 / 4; max-width: 52rem; padding-bottom: 1.3rem; margin-bottom: 2rem; border-bottom: 3px double var(--line-strong); } .article-hero h1 { margin: 0.7rem 0 0.8rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; } .article-hero .deck { font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: var(--muted-deep); } /* TOC rail */ .toc { grid-column: 1; position: sticky; top: 1.5rem; padding-top: 0.2rem; } .toc ol { display: grid; gap: 0; margin: 0.9rem 0 0; padding: 0; list-style: none; counter-reset: toc; } .toc li { counter-increment: toc; } .toc a { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: color var(--hover-duration) var(--hover-ease); } .toc li:first-child a { border-top: 0; } .toc a::before { content: counter(toc, decimal-leading-zero); color: var(--gold-deep); } .toc a:hover { color: var(--ink); } .article-content { grid-column: 2; max-width: var(--measure); } .article-figure { margin: 0 0 2rem; border: 1px solid var(--line-strong); background: var(--paper-soft); } .article-content p { margin: 0 0 1.3rem; } .article-content .lede { font-size: 1.22rem; line-height: 1.62; color: var(--ink-soft); } .article-content .lede::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 4.4rem; line-height: 0.7; padding: 0.3rem 0.7rem 0 0; color: var(--navy); } .article-content h2, .footnotes { scroll-margin-top: 1.5rem; } .article-content h2 { margin: 2.6rem 0 0.9rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.02; letter-spacing: -0.005em; } .article-content h2:target .h-index { color: var(--cyan-deep); } .article-content h2 .h-index { display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .article-content h3 { margin: 1.8rem 0 0.7rem; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; } .article-content blockquote { margin: 2rem 0; padding: 0.3rem 0 0.3rem 1.3rem; border-left: 3px solid var(--gold); color: var(--navy); font-family: var(--font-head); font-style: italic; font-size: 1.6rem; line-height: 1.18; } .article-content blockquote p { margin: 0; } .article-content blockquote cite { display: block; margin-top: 0.6rem; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Pull quote - full-bleed within measure */ .pull-quote { margin: 2.4rem 0; padding: 1.4rem 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; text-align: center; color: var(--ink); } .pull-quote span { color: var(--cyan-deep); } /* Technical note / dossier box */ .technical-note, .dossier { margin: 2.2rem 0; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--line-strong); background: linear-gradient(140deg, rgba(23, 198, 220, 0.06), transparent 50%), var(--paper-soft); } .technical-note .section-label, .dossier .section-label { margin-bottom: 0.7rem; } .technical-note p:last-child, .dossier p:last-child { margin-bottom: 0; } .technical-note p, .dossier p { font-size: 0.98rem; } pre { overflow-x: auto; margin: 1rem 0; padding: 1.1rem 1.2rem; background: var(--navy); color: #d7e6ea; border-left: 3px solid var(--cyan); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; } pre code { color: inherit; } code { font-family: var(--font-mono); font-size: 0.88em; } :not(pre) > code { padding: 0.1em 0.4em; background: var(--paper-deep); border-radius: 2px; font-size: 0.85em; } /* Footnotes / references */ .footnotes { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 3px double var(--line-strong); color: var(--muted-deep); font-size: 0.92rem; } .footnotes h2 { margin: 0 0 0.9rem; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; } .footnotes ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; } .footnotes li { line-height: 1.5; } /* Prev / next */ .article-nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 3rem; border: 1px solid var(--line); } .article-nav a { position: relative; min-height: 7.5rem; display: grid; align-content: center; gap: 0.45rem; padding: 1.2rem 1.3rem; background-color: var(--paper-soft); background-image: linear-gradient(90deg, var(--paper-press), var(--paper-press)); background-repeat: no-repeat; background-position: left top; background-size: 0 100%; text-decoration: none; transition: background-size var(--hover-motion-duration) var(--hover-ease); } .article-nav a + a { border-left: 1px solid var(--line); } .article-nav a:last-child { text-align: right; } .article-nav a:hover, .article-nav a:focus-visible { background-size: 100% 100%; } .article-nav span { color: var(--muted); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; } .article-nav strong { --hover-underline-thickness: 2px; width: fit-content; max-width: 100%; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.05; background-image: linear-gradient(90deg, var(--cyan), var(--cyan)); background-repeat: no-repeat; background-position: left bottom; background-size: 0 var(--hover-underline-thickness); transition: color var(--hover-duration) var(--hover-ease), background-size var(--hover-motion-duration) var(--hover-ease); } .article-nav a:last-child strong { justify-self: end; } .article-nav a:hover strong, .article-nav a:focus-visible strong { color: var(--cyan-deep); background-size: 100% var(--hover-underline-thickness); } /* Related articles */ .related { grid-column: 1 / -1; margin-top: 3rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.3rem; border-top: 1px solid var(--line); } .related-card { position: relative; padding: 1.2rem 1.3rem 1.3rem 0; border-bottom: 2px solid transparent; } .related-card::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--cyan); pointer-events: none; transition: width var(--hover-motion-duration) var(--hover-ease); } .related-card + .related-card { padding-left: 1.3rem; border-left: 1px solid var(--line); } .related-card:hover::before, .related-card:focus-within::before { width: 100%; } .related-card .kicker { margin-bottom: 0.5rem; } .related-card h3 { margin: 0 0 0.4rem; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; line-height: 1.05; } .related-card h3 a { text-decoration: none; } .related-card h3 a:hover { color: var(--cyan-deep); } .related-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .back-to-front { grid-column: 1 / -1; margin-top: 2.4rem; text-align: center; } .back-to-front a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--muted); } .back-to-front a::before { content: "←"; transition: transform var(--hover-motion-duration) var(--hover-ease); } .back-to-front a:hover { color: var(--ink); } .back-to-front a:hover::before { transform: translateX(-3px); } /* ========================================================================= CLICKABLE CARDS & TEASERS · full-box hit area + heading underline on hover The front-page article cards, the "Further reading" cards, and the Field Notes each carry a single heading link but used to be clickable on that text alone, even though the ring cursor already treats the whole card as a button (see script.js · SEL_INTERACTIVE). These rules stretch that one link across the entire card so a click anywhere navigates, and underline the heading whenever the pointer is over the card (or the link is focused), so the target is obvious. Cards that are already a single (issue archive, prev/next) get the same underline cue on their heading for a consistent language. The front-page lead story (left) and the "In This Issue" list (right) use the same pattern, added at the end of this section, so both columns are clickable. ========================================================================= */ /* Containing block for the stretched link. (.article-card is already position: relative for its top accent rule, so it is not repeated here.) */ .related-card, .notes-box article { position: relative; } /* One transparent overlay per card, owned by the heading's link, covering the whole card. There is exactly one link per card, so the overlays never collide; the larger hit area is worth the lost text selection on a teaser. */ .article-card h3 a::after, .related-card h3 a::after, .notes-box article h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Sweep an underline from left to right whenever the pointer is anywhere over a card or its link has keyboard focus. */ .article-card h3 a, .related-card h3 a, .notes-box article h3 a, .brief-list li a { --hover-underline-thickness: 2px; text-decoration: none; background-position: left bottom; } /* Underline every wrapped line on hover. The gradient sweep used by the other heading links only draws a single underline at a block's bottom edge, so these links use a real text-decoration underline (which follows each line) and fade its colour in instead. */ .brief-list li a { justify-self: start; background-image: none; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--hover-underline-thickness); text-underline-offset: 0.18em; transition: color var(--hover-duration) var(--hover-ease), text-decoration-color var(--hover-motion-duration) var(--hover-ease); } .article-card:hover h3 a, .article-card:focus-within h3 a, .related-card:hover h3 a, .related-card:focus-within h3 a, .notes-box article:hover h3 a, .notes-box article:focus-within h3 a { color: var(--cyan-deep); background-size: 100% var(--hover-underline-thickness); } /* Front-page lead story (left column): one headline link, no others, so stretch it over the kicker, deck, and byline and the whole left side navigates. A real underline follows each wrapped line without crossing into the next line. */ .lead-story { position: relative; } .lead-story h1 a { --hover-underline-thickness: 2px; background-image: none; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: var(--hover-underline-thickness); text-underline-offset: 0.1em; text-decoration-skip-ink: auto; transition: color var(--hover-duration) var(--hover-ease), text-decoration-color var(--hover-motion-duration) var(--hover-ease); } .lead-story h1 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .lead-story:hover h1 a, .lead-story:focus-within h1 a { color: var(--cyan-deep); text-decoration-color: var(--cyan); } /* "In This Issue" list (right column): stretch each item's link across its whole row (number, text, and label) and underline the text on row hover or focus. */ .brief-list li { position: relative; } .brief-list li a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .brief-list li:hover a, .brief-list li:focus-within a { color: var(--cyan-deep); text-decoration-color: var(--cyan); } /* ========================================================================= 7 · CUSTOM CURSOR · THEMED SCROLLBAR · READING PROGRESS Progressive enhancement mounted by script.js. only gains .has-custom-cursor on fine-pointer + hover + motion-safe devices, so touch and reduced-motion users keep the native cursor untouched. ========================================================================= */ /* Hide the native cursor in-document once the custom one is active. The native scrollbar is replaced by a DOM overlay (see below) so the ring cursor is kept even there; scrolling itself stays fully native. */ html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor body * { cursor: none !important; } /* Escape hatches - keep the real cursor/caret where it is genuinely better: any [data-native-cursor] opt-out and every code block (precise character selection for copying). The typing caret in inputs relies on caret-color, which cursor:none never affects, so it is preserved everywhere. */ html.has-custom-cursor [data-native-cursor], html.has-custom-cursor [data-native-cursor] *, html.has-custom-cursor pre, html.has-custom-cursor pre * { cursor: auto !important; } .cursor { position: fixed; left: 0; top: 0; z-index: 2147483600; pointer-events: none; opacity: 0; transition: opacity var(--hover-motion-duration) var(--hover-ease); will-change: transform; --ring: 26px; --ring-w: 1px; --ring-color: rgba(20, 22, 28, 0.55); --dot: 4px; --dot-color: var(--gold-deep); --glow: 0 0 0 0 rgba(23, 198, 220, 0); --scale: 1; } .cursor.is-visible { opacity: 1; } .cursor__ring, .cursor__dot { position: absolute; left: 0; top: 0; border-radius: 999px; transform: translate(-50%, -50%) scale(var(--scale)); transition: width var(--hover-motion-duration) var(--hover-ease), height var(--hover-motion-duration) var(--hover-ease), border-color var(--hover-duration) var(--hover-ease), background-color var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), transform 110ms var(--hover-ease), opacity var(--hover-motion-duration) var(--hover-ease); } .cursor__ring { width: var(--ring); height: var(--ring); border: var(--ring-w) solid var(--ring-color); box-shadow: var(--glow); } .cursor__dot { width: var(--dot); height: var(--dot); background: var(--dot-color); } /* button / link / card hover - larger, sharper, restrained cyan glow */ .cursor[data-mode="button"] { --ring: 42px; --ring-color: var(--cyan-deep); --dot: 3px; --dot-color: var(--gold-deep); --glow: 0 0 0 1px rgba(23, 198, 220, 0.10), 0 0 14px rgba(23, 198, 220, 0.18); } /* row hover - a wider, elongated pill */ .cursor[data-mode="row"] .cursor__ring { width: 60px; border-color: var(--gold-deep); box-shadow: 0 0 12px rgba(198, 154, 63, 0.16); } /* input / text - ring fades, dot becomes a thin caret bar */ .cursor[data-mode="input"] .cursor__ring { opacity: 0; } .cursor[data-mode="input"] .cursor__dot { width: 2px; height: 24px; border-radius: 1px; background: var(--ink); } /* hidden + native - custom cursor disappears (native takes over for native) */ .cursor[data-mode="hidden"], .cursor[data-mode="native"] { opacity: 0; } /* pressed - a small, crisp contraction */ .cursor.is-pressed { --scale: 0.82; } .cursor.is-pressed[data-mode="button"] { --scale: 0.9; } /* themed for dark surfaces (ivory ink) */ .cursor[data-theme="light"] { --ring-color: rgba(244, 240, 230, 0.7); --dot-color: var(--cyan); } .cursor[data-theme="light"][data-mode="button"] { --ring-color: var(--cyan); --dot-color: var(--gold); } .cursor[data-theme="light"][data-mode="input"] .cursor__dot { background: var(--paper); } /* themed for light surfaces (explicit) */ .cursor[data-theme="dark"] { --ring-color: rgba(20, 22, 28, 0.7); --dot-color: var(--ink); } /* compact zones */ .cursor[data-zone="small"] { --scale: 0.7; } /* Themed scrollbar - native styling, used whenever the custom cursor is NOT active (touch / reduced-motion / no-hover). The native scrollbar is an OS widget and ignores `cursor: none`, so it is only shown to those users. */ html { scrollbar-width: thin; scrollbar-color: var(--gold-deep) var(--paper-soft); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--paper-soft); border-left: 1px solid var(--line-soft); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), var(--cyan-deep)); border: 3px solid var(--paper-soft); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-deep), var(--cyan)); } ::-webkit-scrollbar-corner { background: var(--paper-soft); } /* When the custom cursor is active we mount a DOM overlay scrollbar instead and hide the native one entirely. A native scrollbar always draws the OS cursor; a DOM element honours `cursor: none`, so the ring cursor now stays visible the whole time - including while hovering or dragging the thumb. */ html.has-custom-scrollbar { scrollbar-width: none; } html.has-custom-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } .scrollbar { position: fixed; top: 0; right: 0; width: 12px; height: 100%; z-index: 2147483500; background: var(--paper-soft); border-left: 1px solid var(--line-soft); opacity: 0; pointer-events: none; transition: opacity var(--hover-motion-duration) var(--hover-ease); } .scrollbar.is-active { opacity: 1; pointer-events: auto; } .scrollbar__thumb { position: absolute; left: 0; right: 0; top: 0; min-height: 36px; border: 3px solid var(--paper-soft); border-radius: 999px; background: linear-gradient(180deg, var(--gold), var(--cyan-deep)); background-clip: padding-box; filter: saturate(1) brightness(1); transition: filter var(--hover-duration) var(--hover-ease); will-change: transform, height; } .scrollbar__thumb:hover, .scrollbar.is-dragging .scrollbar__thumb { filter: saturate(1.12) brightness(0.94); } /* ------------------------------------------------------------------------- SCROLL REVEAL Structural blocks fade + rise gently as they enter view. Body copy is deliberately excluded so reading never waits on an animation. Active only when html.has-reveal is set - added pre-paint by the head boot script, and only when motion is allowed + IntersectionObserver exists. script.js then adds .is-in (which simply stops matching the hidden rule) to play it. ------------------------------------------------------------------------- */ html.has-reveal :is( .lead-story, .issue-visual, .issue-brief, .edition-band > div, .section-heading, .feature-card, .article-card, .archive-card, .related-card, .notes-box article, .pillar-list, .fig, .pull-quote, .toc, .article-nav, .article-content > * ) { transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } /* Preserve component hover easing alongside the one-time reveal animation. */ html.has-reveal body .article-card { transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), background-size var(--hover-motion-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease); } html.has-reveal body .archive-card { transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), background-size var(--hover-motion-duration) var(--hover-ease); } html.has-reveal body .related-card { transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } html.has-reveal :is( .lead-story, .issue-visual, .issue-brief, .edition-band > div, .section-heading, .feature-card, .article-card, .archive-card, .related-card, .notes-box article, .pillar-list, .fig, .pull-quote, .toc, .article-nav, .article-content > * ):not(.is-in) { opacity: 0; transform: translateY(34px); } /* Reading progress - article pages only; position-driven, motion-safe */ .read-progress { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), var(--cyan)); pointer-events: none; } /* ========================================================================= 8 · FIGURES - original inline-SVG research diagrams Ivory ground, charcoal ink, gold/cyan accents, fine rules, captioned. ========================================================================= */ .fig { position: relative; margin: 0 0 2.4rem; border: 1px solid var(--line-strong); background: linear-gradient(158deg, rgba(23, 198, 220, 0.05), transparent 42%), radial-gradient(120% 80% at 50% -10%, rgba(198, 154, 63, 0.05), transparent 60%), var(--paper-press); box-shadow: 0 1px 0 rgba(20, 22, 28, 0.03), 0 16px 34px -26px var(--shadow); } /* Plate header rule: the gold→cyan signature that ties figures to the masthead. */ .fig::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--cyan) 66%, transparent); z-index: 1; } /* The artwork is inset from the frame so each figure reads as a mounted plate; the caption bar below stays full-width against the border. */ .fig-scroll { overflow: hidden; padding: 0.7rem 0.85rem 0.4rem; } .fig svg { display: block; width: 100%; min-width: 0; height: auto; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; } .fig figcaption { display: grid; justify-items: center; gap: 0.4rem; padding: 0.7rem 0.95rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.5; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; } .fig figcaption > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .fig figcaption b { color: var(--ink); font-weight: 600; } .fig figcaption .fig-note { max-width: 58rem; text-transform: none; letter-spacing: 0; font-size: 0.74rem; color: var(--muted-deep); } /* Shared SVG ink language for the diagrams */ .fig .f-ink { fill: var(--ink); } .fig .f-mut { fill: var(--muted-deep); } .fig .f-paper { fill: var(--paper-press); } .fig .f-soft { fill: var(--paper-soft); } .fig .s-ink { stroke: var(--ink); fill: none; } .fig .s-line { stroke: rgba(20, 22, 28, 0.30); fill: none; } .fig .s-gold { stroke: var(--gold-deep); fill: none; } .fig .s-cyan { stroke: var(--cyan-deep); fill: none; } .fig .fill-gold { fill: var(--gold-deep); } .fig .fill-cyan { fill: var(--cyan-deep); } .fig .f-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; fill: var(--ink-soft); } .fig .f-label--mut { fill: var(--muted); } .fig .f-num { font-family: var(--font-mono); font-size: 10px; fill: var(--gold-deep); } .fig .f-axis { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--muted); } /* Extended plate language (used by the redesigned research figures) --------- */ /* Eyebrow: a gold mono overline that titles a region inside the artwork. */ .fig .f-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--gold-deep); } /* Node title and supporting line, tuned a touch larger than f-label for plates. */ .fig .f-node { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; fill: var(--ink); } .fig .f-node--sm{ font-size: 11px; } .fig .f-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.01em; fill: var(--muted-deep); } .fig .f-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; fill: var(--muted-deep); } .fig .f-strong { font-weight: 600; } .fig .f-data { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; fill: var(--ink-soft); } /* Stage counters: small gold numerals that index a sequence. */ .fig .f-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--gold-deep); } /* Caption-grade note set inside the plate. */ .fig .f-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.01em; fill: var(--muted); } .fig--policy-transmission .f-node { font-size: 11.5px; } .fig--policy-transmission .f-sub { font-size: 10px; } .fig--policy-transmission .f-key { font-size: 10.5px; } .fig--policy-transmission .f-drawdown { font-size: 9.5px; letter-spacing: 0.03em; } .fig--execution-waterfall .f-axis { font-size: 9.5px; letter-spacing: 0.06em; } .fig--execution-waterfall .f-step { font-size: 10.5px; font-weight: 500; } .fig--basis-trade .f-node { font-size: 11.5px; } .fig--basis-trade .f-sub { font-size: 9.5px; } .fig--concentration-shock .f-node { font-size: 11px; } .fig--concentration-shock .f-sub { font-size: 9.5px; } /* Fills, tints and hairlines for richer composition. */ .fig .f-tint-gold { fill: rgba(198, 154, 63, 0.13); } .fig .f-tint-cyan { fill: rgba(23, 198, 220, 0.12); } .fig .f-tint-ink { fill: rgba(20, 22, 28, 0.045); } .fig .f-grid { stroke: rgba(20, 22, 28, 0.10); fill: none; } .fig .f-grid--faint { stroke: rgba(20, 22, 28, 0.055); fill: none; } .fig .s-gold-soft { stroke: rgba(166, 125, 42, 0.55); fill: none; } .fig .s-cyan-soft { stroke: rgba(15, 143, 161, 0.55); fill: none; } .fig .fill-gold-12 { fill: var(--gold-deep); opacity: 0.12; } .fig .fill-cyan-12 { fill: var(--cyan-deep); opacity: 0.12; } /* ------------------------------------------------------------------------- 8b · EMPIRICAL PLATES Charts generated by the scripts in research/ and emitted as inline SVG in this same class language, so measured figures and conceptual diagrams read as members of one publication family. No gradients, no shadows, no 3D. ------------------------------------------------------------------------- */ /* Empirical plates drop the decorative wash the conceptual plates carry, so a chart sits on flat paper the way a research figure should. */ .fig--plot { background: var(--paper-press); } /* Desktop and mobile renderings of the same figure. A dense chart is redrawn for a narrow column rather than scaled down into illegibility. */ .fig-mobile { display: none; } .fig-desktop { display: block; } /* Series accents. Ink first, then gold, cyan, red, muted: a restrained ramp that stays distinguishable in both themes and in greyscale print. */ .fig .s-ser-1, .fig .s-ink-2 { stroke: var(--ink); fill: none; } .fig .s-ser-2 { stroke: var(--gold-deep); fill: none; } .fig .s-ser-3 { stroke: var(--cyan-deep); fill: none; } .fig .s-ser-4 { stroke: #a2402f; fill: none; } .fig .s-ser-5 { stroke: var(--muted); fill: none; } .fig .f-ser-1 { fill: var(--ink); } .fig .f-ser-2 { fill: var(--gold-deep); } .fig .f-ser-3 { fill: var(--cyan-deep); } .fig .f-ser-4 { fill: #a2402f; } .fig .f-ser-5 { fill: var(--muted); } .fig .fill-red-14 { fill: #a2402f; opacity: 0.14; } .fig .fill-ink-08 { fill: var(--ink); opacity: 0.08; } .fig .s-zero { stroke: rgba(20, 22, 28, 0.45); fill: none; } /* Tick labels: quieter and slightly tighter than body figure labels. */ .fig .f-tick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.01em; fill: var(--muted-deep); font-variant-numeric: tabular-nums; } /* The source / notes / data-through line under an empirical caption. */ .fig figcaption .fig-src { max-width: 58rem; text-transform: none; letter-spacing: 0; font-size: 0.68rem; line-height: 1.55; color: var(--muted); } .fig figcaption .fig-src b { color: var(--muted-deep); font-weight: 600; } html[data-theme="dark"] .fig .s-ser-4 { stroke: #e0806c; } html[data-theme="dark"] .fig .f-ser-4 { fill: #e0806c; } html[data-theme="dark"] .fig .fill-red-14 { fill: #e0806c; opacity: 0.18; } html[data-theme="dark"] .fig .fill-ink-08 { fill: var(--ink); opacity: 0.10; } html[data-theme="dark"] .fig .s-zero { stroke: rgba(236, 231, 217, 0.45); } html[data-theme="dark"] .fig .fill-gold-12 { fill: var(--gold); opacity: 0.16; } html[data-theme="dark"] .fig .fill-cyan-12 { fill: var(--cyan); opacity: 0.16; } html[data-theme="dark"] .fig .s-gold-soft { stroke: rgba(198, 154, 63, 0.75); } html[data-theme="dark"] .fig .s-cyan-soft { stroke: rgba(23, 198, 220, 0.7); } /* Method / caveats blocks reuse the technical-note language */ .caveats { margin: 2.2rem 0; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--paper-soft); } .caveats .section-label { margin-bottom: 0.7rem; } .caveats ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.5rem; } .caveats li { font-size: 0.96rem; line-height: 1.5; color: var(--muted-deep); } .caveats p:last-child { margin-bottom: 0; } .disclaimer { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6; letter-spacing: 0.03em; } /* ========================================================================= 9 · ISSUE ARCHIVE (6-up) & ABOUT THE PUBLICATION ========================================================================= */ /* The base .archive-grid assumes a single row; the issue archive carries two. Use a 1px grid gap over the line colour so the internal seams render correctly at any column count (3 / 2 / 1) without per-cell border math. */ .archive-grid--issues { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); } /* Doubled class bumps specificity so the base adjacency borders never re-appear. */ .archive-grid--issues.archive-grid .archive-card { border: 0; } @media (max-width: 900px) { .archive-grid--issues { grid-template-columns: repeat(2, 1fr); } } /* Founding archive: a labelled sub-band above each volume's issue grid. */ .archive-volume-label { margin: 2.1rem 0 0.9rem; } .archive-volume-label:first-of-type { margin-top: 1.3rem; } /* Template banner - marks article.html as a non-published specimen */ .template-banner { width: min(calc(100% - var(--gutter) * 2), var(--shell)); margin: 1.1rem auto 0; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; align-items: baseline; border: 1px dashed var(--gold-deep); background: linear-gradient(150deg, rgba(198, 154, 63, 0.12), transparent 60%), var(--paper-soft); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--muted-deep); } .template-banner strong { color: var(--ink); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; } .template-banner code { background: var(--paper-deep); padding: 0.1em 0.4em; border-radius: 2px; } .about-section { padding: 3rem 0 1rem; } .about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4rem; margin-top: 1.4rem; } .about-grid > * { min-width: 0; } .about-lede p { margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.5; color: var(--ink-soft); } .about-lede p:last-child { margin-bottom: 0; color: var(--muted-deep); } .about-meta { margin: 0; align-self: start; border-top: 3px solid var(--ink); } .about-meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.4rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line-soft); } .about-meta div:first-child { border-top: 0; } .about-meta dt { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; } .about-meta dd { min-width: 0; margin: 0; color: var(--ink-soft); font-size: 0.95rem; overflow-wrap: anywhere; } .about-meta a { text-decoration: none; } .about-meta a:hover { color: var(--cyan-deep); } @media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; gap: 1.6rem; } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1000px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-hero, .article-content, .toc { grid-column: 1; max-width: none; } .toc { position: static; margin-bottom: 2rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); } .toc ol { grid-template-columns: repeat(2, 1fr); column-gap: 1.4rem; } } @media (max-width: 920px) { .utility-strip { grid-template-columns: auto 1fr auto; gap: 0.4rem 1rem; padding: 0.55rem 0; } .topic-nav { grid-column: 1 / -1; justify-content: flex-start; } /* domain · time · toggle on row one; the nav wraps to its own row below */ .theme-toggle { grid-row: 1; grid-column: 3; justify-self: end; margin-left: 0; } .front-page { grid-template-columns: 1fr; grid-template-areas: "lead" "visual" "brief"; gap: 0; } .lead-story { padding-right: 0; padding-bottom: 1.6rem; border-right: 0; border-bottom: 1px solid var(--line); } .issue-visual { margin-top: 1.6rem; } .issue-brief { margin-top: 1.4rem; } .editorial-grid { grid-template-columns: 1fr; gap: 2.4rem; } .side-column { position: static; grid-template-columns: 1fr; align-items: start; } } @media (max-width: 600px) { :root { --gutter: clamp(0.85rem, 4vw, 1.1rem); } body { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.05rem); line-height: 1.68; } .site-header { padding-top: 0.65rem; } .utility-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 0; align-items: stretch; padding: 0; font-size: 0.64rem; } .domain { grid-column: 1; grid-row: 1; display: flex; min-width: 0; min-height: 44px; align-items: center; padding-right: 0.6rem; overflow-wrap: anywhere; } .utility-strip > time { grid-column: 1 / -1; grid-row: 2; display: flex; min-width: 0; min-height: 36px; align-items: center; padding: 0.35rem 0 0.45rem; border-top: 1px solid var(--line-soft); line-height: 1.35; overflow-wrap: anywhere; } .theme-toggle { grid-column: 2; grid-row: 1; min-width: 44px; height: 44px; margin-left: 0; padding-inline: 0.65rem; justify-self: end; font-size: 0.64rem; } .topic-nav { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding-top: 1px; background: var(--line-soft); } .topic-nav a { display: flex; min-width: 0; min-height: 44px; align-items: center; padding: 0.55rem 0.45rem; background-color: var(--paper); line-height: 1.3; overflow-wrap: anywhere; } .nameplate { margin-top: 1rem; } /* SVG wordmark already fits the column; cap slightly and relax tracking so it never kisses the gutter edges at small sizes */ .wordmark .word { width: min(94%, 30rem); } .wordmark .word text { letter-spacing: 8px; } .wordmark { min-height: 44px; pointer-events: auto; } .wordmark .word { min-height: 44px; pointer-events: auto; } .wordmark .word text { pointer-events: none; } .nameplate--compact .wordmark .word { width: min(84%, 20rem); } .nameplate-rule-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; font-size: 0.54rem; } .nameplate-rule-top::before, .nameplate-rule-top::after { display: none; } .nameplate-rule-top span:not(:first-child):not(:last-child) { display: none; } .nameplate-rule-top span { min-width: 0; white-space: normal; } .nameplate-rule-top span:first-child { justify-self: start; } .nameplate-rule-top span:last-child { justify-self: end; text-align: right; } .nameplate-subtitle { max-width: 20rem; font-size: clamp(1rem, 4.6vw, 1.15rem); text-wrap: balance; } .nameplate-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; font-size: 0.58rem; text-align: left; } .nameplate-meta div { min-width: 0; display: grid; gap: 0.08rem; align-content: start; } .nameplate-meta dd { min-width: 0; white-space: normal; overflow-wrap: anywhere; } .front-page { margin-top: 1.45rem; } .kicker { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; } .kicker::before { flex: 0 0 1.25rem; } .lead-story h1 { font-size: clamp(1.72rem, 7vw, 2rem); line-height: 0.98; text-wrap: balance; } .deck { font-size: clamp(1.02rem, 4.4vw, 1.15rem); line-height: 1.48; text-wrap: pretty; } .byline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.8rem; line-height: 1.45; } .byline > * { min-width: 0; overflow-wrap: anywhere; } .byline > * + *::before { display: none; } .issue-visual figcaption, .article-figure figcaption { flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.58rem; } .brief-list { gap: 0.8rem; } .brief-list li { grid-template-columns: 1.55rem minmax(0, 1fr); gap: 0.55rem; } .brief-list a { font-size: clamp(1.08rem, 4.8vw, 1.2rem); line-height: 1.18; text-wrap: pretty; } .feature-card { grid-template-columns: 1fr; } .feature-card h3, .feature-card p, .feature-card .article-meta { grid-column: 1; } .feature-card p { grid-row: auto; padding-left: 0; border-left: 0; } .edition-band { grid-template-columns: 1fr; margin: 1.4rem 0 2rem; } .edition-band > div { padding: 0.85rem 0; border-top: 1px solid var(--line); } .edition-band > div:first-child { border-top: 0; } .edition-band > div + div { padding-left: 0; border-left: 0; } .edition-band strong { font-size: 1.18rem; line-height: 1.18; text-wrap: pretty; } .section-heading { gap: 0.65rem; padding-bottom: 0.55rem; } .section-heading h2 { min-width: 0; font-size: clamp(1.65rem, 8vw, 2.15rem); line-height: 0.96; text-align: right; text-wrap: pretty; overflow-wrap: anywhere; } .article-list { grid-template-columns: 1fr; } .article-card, .article-card:nth-child(2n) { min-height: 0; padding: 1.15rem 0.9rem 1.25rem; border-right: 0; } .article-card h3, .article-card:not(.feature-card) h3, .notes-box h3 { font-size: clamp(1.4rem, 6.2vw, 1.7rem); line-height: 1.03; text-wrap: balance; } .article-card p, .notes-box p, .about-lede p, .article-content > p { hyphens: auto; } .article-meta { line-height: 1.45; } .side-column { grid-template-columns: 1fr; } .archive-grid { grid-template-columns: 1fr; } .archive-card + .archive-card { border-left: 0; border-top: 1px solid var(--line); } .archive-section { padding-top: 2.6rem; } .archive-card { min-height: 8.25rem; gap: 0.7rem; padding: 1rem; } .archive-card strong { font-size: clamp(1.5rem, 7vw, 1.78rem); line-height: 1.02; text-wrap: pretty; overflow-wrap: anywhere; } .archive-card span, .archive-card small { line-height: 1.45; overflow-wrap: anywhere; } .article-shell { padding-top: 1.4rem; } .article-hero { padding-bottom: 1.15rem; margin-bottom: 1.4rem; } .article-hero h1 { font-size: clamp(1.78rem, 7.2vw, 2.05rem); line-height: 0.99; text-wrap: balance; } .article-hero .deck { font-size: clamp(1.04rem, 4.6vw, 1.18rem); line-height: 1.5; } .toc { margin-bottom: 1.5rem; padding-bottom: 1rem; } .toc a { min-height: 44px; align-items: center; padding-block: 0.6rem; line-height: 1.35; overflow-wrap: anywhere; } .article-content h2 { margin-top: 2.25rem; font-size: clamp(1.65rem, 7vw, 1.95rem); line-height: 1.04; text-wrap: balance; } .article-content h3 { font-size: 1.35rem; line-height: 1.1; } .article-content blockquote { margin-block: 1.7rem; padding-left: 1rem; font-size: clamp(1.3rem, 6vw, 1.55rem); line-height: 1.2; } .pull-quote { margin-block: 2rem; padding-block: 1.15rem; font-size: clamp(1.4rem, 6.4vw, 1.75rem); text-wrap: pretty; } .technical-note, .dossier, .caveats { margin-block: 1.8rem; padding: 1rem; } pre { max-width: 100%; overflow-x: hidden; padding: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; font-size: clamp(0.7rem, 3.2vw, 0.78rem); line-height: 1.55; tab-size: 2; } pre code { display: block; min-width: 0; max-width: 100%; white-space: inherit; overflow-wrap: anywhere; word-break: break-word; } /* Mobile plates show the complete composition inside the article measure. */ .fig { width: 100%; max-width: 100%; margin-left: 0; margin-bottom: 2rem; } .fig-scroll { overflow: hidden; padding: 0.45rem 0.35rem 0.3rem; } .fig-scroll svg { width: 100%; min-width: 0 !important; max-width: 100%; height: auto; } .fig figcaption { gap: 0.4rem; padding: 0.7rem var(--gutter) 0.8rem; font-size: 0.58rem; line-height: 1.5; } .fig figcaption > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .fig figcaption .fig-note { font-size: 0.72rem; line-height: 1.5; } .fig figcaption .fig-src { font-size: 0.66rem; line-height: 1.55; } /* Below the article measure, empirical plates switch to the taller narrow-column rendering drawn for this width, not a scaled desktop one. */ .fig-desktop { display: none; } .fig-mobile { display: block; } .article-nav { grid-template-columns: 1fr; } .article-nav a + a { border-left: 0; border-top: 1px solid var(--line); } .article-nav a { min-height: 7rem; padding: 1rem; } .article-nav a:last-child { text-align: left; } .article-nav a:last-child strong { justify-self: start; } .article-nav strong { font-size: clamp(1.3rem, 6vw, 1.55rem); line-height: 1.08; text-wrap: pretty; overflow-wrap: anywhere; } .related-grid { grid-template-columns: 1fr; } .related-card, .related-card + .related-card { padding: 1.1rem 0; border-left: 0; border-top: 1px solid var(--line); } .related-grid .related-card:first-child { border-top: 0; } .related-card h3 { font-size: clamp(1.2rem, 5.2vw, 1.35rem); line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; } .toc ol { grid-template-columns: 1fr; } .article-content .lede::first-letter { font-size: 3.4rem; } .about-section { padding-top: 2.6rem; } .about-grid { gap: 1.4rem; } .about-lede p { font-size: clamp(1.05rem, 4.7vw, 1.2rem); line-height: 1.5; } .about-meta div { grid-template-columns: minmax(5.4rem, 0.75fr) minmax(0, 1.35fr); gap: 0.45rem 0.75rem; } .about-meta dt, .about-meta dd { min-width: 0; overflow-wrap: anywhere; } .back-to-front a { min-height: 44px; padding: 0.6rem 0.35rem; } .site-footer { margin-top: 2.4rem; padding-bottom: 2rem; } } @media (max-width: 360px) { .lead-story h1 { font-size: clamp(1.48rem, 6.8vw, 1.55rem); } .article-hero h1 { font-size: clamp(1.54rem, 7vw, 1.62rem); } .article-content h2 { font-size: clamp(1.5rem, 6.8vw, 1.62rem); } .section-heading h2 { font-size: clamp(1.55rem, 8.5vw, 1.85rem); } .nameplate-rule-top { letter-spacing: 0.12em; } } @media (max-width: 330px) { .article-hero h1 { font-size: 1.48rem; } } @media (pointer: coarse), (hover: none) { html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor body * { cursor: auto !important; } .cursor, .scrollbar { display: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media print { body::before, .cursor, .read-progress, .skip-link, .utility-strip, .topic-nav, .article-nav, .related, .signal-box, .back-to-front, .nameplate-rule-double::before { display: none !important; } html, body { background: #fff; color: #000; } body { font-size: 11pt; line-height: 1.5; } .site-header, main, .site-footer { width: auto; max-width: none; margin: 0; } a { color: #000; text-decoration: none; } /* Expose destination URLs for external links on paper */ .article-content a[href^="http"]::after, .site-footer a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } .wordmark .word text { fill: #000; } .lead-story h1, .article-hero h1 { font-size: 26pt; } .article-layout { display: block; } .toc { break-inside: avoid; } .article-content { max-width: none; } pre, blockquote, .technical-note, .dossier, .article-figure, .pull-quote { break-inside: avoid; } pre { background: #f4f4f4; color: #000; border-left: 2px solid #000; } h1, h2, h3 { break-after: avoid; } .article-figure img, .issue-visual img { filter: none; } }