/* ========================================================================= 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); } .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; } /* 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; } .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; } }