:root { --ink: #0b0c0f; --ink-soft: #343842; --paper: #ffffff; --paper-alt: #f4f6f8; --line: #d9dde3; --line-strong: #aab1bc; --signal: #1847ff; --signal-dark: #1035c7; /* Solid brand fill and the text that sits on it: identical in both themes. */ --signal-fill: #1847ff; --on-signal: #ffffff; --on-signal-soft: rgb(255 255 255 / 85%); --on-signal-muted: rgb(255 255 255 / 72%); --signal-halo: rgb(24 71 255 / 10%); color-scheme: light; --max-width: 1260px; --gutter: clamp(1rem, 4vw, 3.5rem); --serif: Georgia, "Times New Roman", Times, serif; --sans: Inter, "Helvetica Neue", Arial, sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } /* Dark theme is opt-in: light is the default for everyone, and the header toggle sets data-theme="dark" on for readers who choose it. */ :root[data-theme="dark"] { --ink: #eceef2; --ink-soft: #a9afbb; --paper: #0d0f13; --paper-alt: #171a20; --line: #2a2e37; --line-strong: #6b7280; --signal: #8aa2ff; --signal-dark: #a9bbff; --signal-halo: rgb(138 162 255 / 18%); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--paper); color: var(--ink); font-size: 16px; scroll-behavior: smooth; } body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--gh-font-body, var(--sans)); font-size: 1rem; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--gh-font-heading, var(--serif)); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--signal); } button, input { font: inherit; } button { color: inherit; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; } .skip-link { position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem; padding: 0.7rem 1rem; transform: translateY(-180%); background: var(--ink); color: var(--paper); } .skip-link:focus { transform: translateY(0); } .site-frame { min-height: 100vh; overflow: hidden; } .shell { width: min(var(--max-width), calc(100% - (2 * var(--gutter)))); margin-inline: auto; } .site-header { display: flex; min-height: 5.3rem; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--ink); } .wordmark { display: inline-flex; align-items: center; gap: 0.72rem; color: var(--ink); font-size: 0.9rem; font-weight: 750; letter-spacing: -0.02em; text-decoration: none; } .wordmark:hover { color: var(--ink); } .wordmark img { width: auto; height: 2.25rem; } /* The mark is drawn as vector artwork (not live text) so it is identical on every device and matches the publication icon. */ .wordmark__block { display: block; width: 2.2rem; height: 2.2rem; flex: none; } .wordmark__tile { fill: var(--ink); } .wordmark__braces { fill: var(--paper); } .wordmark__name { max-width: 12rem; line-height: 1.05; } .site-nav, .site-nav .nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.6rem); } .site-nav .nav { margin: 0; padding: 0; list-style: none; } .site-nav a, .nav-action { border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.82rem; font-weight: 650; line-height: 1.2; text-decoration: none; } .site-nav .nav li { display: flex; align-items: center; } .nav-action { margin: 0; padding: 0; } .site-nav a:hover, .nav-action:hover { color: var(--signal); } .theme-toggle { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; align-items: center; justify-content: center; } .theme-toggle svg { width: 1.05rem; height: 1.05rem; } .theme-toggle[hidden] { display: none; } .site-nav .nav-subscribe { padding: 0.55rem 0.8rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); } .site-nav .nav-subscribe:hover { border-color: var(--signal-fill); background: var(--signal-fill); color: var(--on-signal); } .masthead { padding-block: clamp(2.5rem, 6vw, 5.5rem) 2rem; } .masthead__label, .eyebrow { margin: 0 0 1rem; color: var(--ink-soft); font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .masthead__label a { color: var(--signal); text-decoration: underline; text-underline-offset: 0.2em; } .status-mark { display: inline-block; width: 0.56rem; height: 0.56rem; margin-right: 0.45rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-halo); } .masthead h1 { max-width: 980px; margin: 0; font-family: var(--serif); font-size: clamp(2.35rem, 5.6vw, 5.3rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.99; } .masthead__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: clamp(2rem, 5vw, 4.5rem); padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.84rem; } .masthead__foot p { margin: 0; } .masthead__foot a { font-weight: 700; } .masthead__credit a { font-weight: 500; text-decoration: underline; } .topic-index { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.15rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .topic-index__label { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .topic-index__list { display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; color: var(--ink-soft); font-size: 0.84rem; } .topic-index__list a { text-decoration: none; } .topic-index__list sup { color: var(--line-strong); font-family: var(--mono); font-size: 0.62rem; } .feed { padding-block: clamp(2.5rem, 6vw, 5rem); } .section-rule { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--ink); } .section-rule h2 { margin: 0; font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; } .section-rule span { color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; } .feed-list { counter-reset: links; } .link-card { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(2rem, 4.5vw, 3.65rem); border-bottom: 1px solid var(--ink); } .link-card__number { padding-top: 0.18rem; color: var(--line-strong); font-family: var(--mono); font-size: 0.72rem; } .link-card__number::before { content: "0"; } .link-card__body { max-width: 940px; } .card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.8rem; color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; } .card-meta a { color: var(--signal); text-decoration: none; } .link-card__title { max-width: 900px; margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 3.1vw, 2.8rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; } .link-card__title a { text-decoration: none; } .link-card__title span { color: var(--signal); font-family: var(--sans); font-size: 0.72em; } /* Drawn as SVG: the \2197 character turns into a colour emoji on iOS. */ .arrow-out { display: inline-block; width: 0.78em; height: 0.78em; vertical-align: -0.02em; } .link-card__summary { max-width: 760px; margin: 1.1rem 0 0; color: var(--ink-soft); font-size: clamp(1rem, 1.7vw, 1.13rem); line-height: 1.6; } .link-card__analysis { max-width: 820px; margin-top: 1.3rem; } .mr-analysis { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.3rem; margin: 0; padding: 1rem 1.1rem; border-left: 3px solid var(--signal); background: var(--paper-alt); } .mr-analysis p { margin: 0; } .mr-analysis__label { color: var(--signal); font-family: var(--mono); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; } .mr-analysis p:not(.mr-analysis__label) { color: var(--ink); font-size: 0.91rem; line-height: 1.55; } .link-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; } .tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag-list a { padding: 0.28rem 0.5rem; border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.72rem; font-weight: 650; text-decoration: none; } .tag-list a:hover { border-color: var(--signal); color: var(--signal); } /* Company tags use accent_color #1847ff; separation is labelled, not colour-only. */ .tag-groups { display: grid; min-width: 0; gap: 0.65rem; } .tag-group { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); align-items: baseline; gap: 0.65rem; } /* On cards and notes the two groups share one line and wrap when they need to. */ .tag-groups:not(.tag-groups--browse) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.75rem; } .tag-groups:not(.tag-groups--browse) .tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; } .tag-groups .tag-group:not(:has(.tag-list a)) { display: none; } .tag-group__label { color: var(--ink-soft); font-family: var(--mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tag-groups .tag-list { min-width: 0; } .tag-groups .tag-list a { overflow-wrap: anywhere; } .topic-index > .tag-groups { grid-column: 1 / -1; gap: 1rem; } .tag-groups--browse .tag-group { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; } .tag-groups--browse .tag-group__label { font-size: 0.72rem; letter-spacing: 0.08em; } .tag-groups--browse .tag-list { gap: 0.55rem 1.25rem; } .tag-groups--browse .tag-list a { padding: 0; border: 0; font-size: 0.84rem; font-weight: 400; } .tag-groups--browse sup { color: var(--ink-soft); font-family: var(--mono); font-size: 0.62rem; } @media (max-width: 850px) { .tag-groups--browse .tag-group { grid-template-columns: 1fr; gap: 0.5rem; } } @media (max-width: 620px) { .tag-group { grid-template-columns: 1fr; gap: 0.4rem; } } .archive-link, .text-link { flex: none; font-size: 0.8rem; font-weight: 700; } .newsletter { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 7vw, 7rem); margin-bottom: clamp(3.5rem, 8vw, 7rem); padding: clamp(2rem, 5vw, 4rem); background: var(--signal-fill); color: var(--on-signal); } .newsletter .eyebrow { color: var(--on-signal-muted); } .newsletter h2 { max-width: 620px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.3rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; } .newsletter > div:last-child { align-self: end; } .newsletter p { max-width: 36rem; margin: 0 0 1.35rem; color: var(--on-signal-soft); } .button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.7rem 1rem; border: 1px solid currentColor; font-size: 0.83rem; font-weight: 750; text-decoration: none; } .button--light { background: var(--on-signal); color: var(--signal-fill); } .button--light:hover { background: var(--ink); color: var(--paper); } .button--ink { background: var(--ink); color: var(--paper); } .button--ink:hover { border-color: var(--signal-fill); background: var(--signal-fill); color: var(--on-signal); } .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; } .pagination .newer-posts { justify-self: start; } .pagination .older-posts { justify-self: end; } .pagination a { font-weight: 700; } .empty-state { padding: clamp(3rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--ink); color: var(--ink-soft); } .empty-state p { max-width: 38rem; margin: 0.4rem 0; } .empty-state__label { color: var(--ink); font-family: var(--serif); font-size: 1.8rem; } .archive-header { max-width: 900px; padding-block: clamp(3rem, 8vw, 7rem); } .archive-header h1, .longform__header h1, .link-note__header h1, .error-page h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 6.8rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.98; } .archive-header > p:last-child, .longform__header > p:last-child { max-width: 720px; margin: 1.5rem 0 0; color: var(--ink-soft); font-size: clamp(1.05rem, 2vw, 1.3rem); } .briefing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); } .briefing-card { min-height: 23rem; padding: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--ink); } .briefing-card:nth-child(odd) { border-right: 1px solid var(--ink); } .briefing-card h2 { margin: 2rem 0 1rem; font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; } .briefing-card h2 a { text-decoration: none; } .briefing-card > p:not(.card-meta) { max-width: 34rem; color: var(--ink-soft); } .link-note, .longform { max-width: 940px; margin-inline: auto; padding-block: clamp(3rem, 8vw, 7.5rem); } .link-note__header { padding-bottom: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--ink); } .link-note__header h1 { font-size: clamp(2.5rem, 6.3vw, 6rem); } .link-note__header h1 a { text-decoration: none; } .link-note__header h1 span { color: var(--signal); font-family: var(--sans); font-size: 0.68em; } .link-note__summary { max-width: 760px; margin: 1.8rem 0 0; color: var(--ink-soft); font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.6; } .link-note__analysis { padding-block: clamp(2rem, 5vw, 4rem); } .link-note__analysis .mr-analysis { grid-template-columns: 10rem minmax(0, 1fr); padding: clamp(1.2rem, 3vw, 2rem); } .link-note__analysis .mr-analysis p:not(.mr-analysis__label) { font-size: 1.05rem; } .link-note__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: end; padding-top: 1.5rem; border-top: 1px solid var(--line); } .link-note__actions { display: flex; align-items: center; gap: 1rem; } .longform__header { margin-bottom: clamp(2.5rem, 6vw, 5rem); } .longform__header h1 { max-width: 880px; } .longform__content { max-width: 740px; } .page-feature { margin: 2.5rem 0 0; } .page-feature img { width: 100%; } .page-feature figcaption { margin-top: 0.65rem; color: var(--ink-soft); font-size: 0.75rem; } .gh-content { font-family: var(--serif); font-size: 1.08rem; line-height: 1.72; } .gh-content > *:first-child { margin-top: 0; } .gh-content h2, .gh-content h3 { margin: 2.5rem 0 0.8rem; font-family: var(--sans); letter-spacing: -0.03em; line-height: 1.2; } .gh-content h2 { font-size: 1.8rem; } .gh-content h3 { font-size: 1.35rem; } .gh-content blockquote { margin: 2rem 0; padding-left: 1.2rem; border-left: 3px solid var(--signal); color: var(--ink-soft); font-size: 1.25rem; } .gh-content .kg-width-wide { width: min(1080px, calc(100vw - (2 * var(--gutter)))); max-width: none; margin-inline: max(calc((740px - 1080px) / 2), calc((740px - 100vw + (2 * var(--gutter))) / 2)); } .gh-content .kg-width-full { position: relative; left: 50%; width: 100vw; max-width: none; margin-left: -50vw; } .gh-content a { color: var(--signal-dark); } .site-footer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; padding-block: 1.75rem; border-top: 1px solid var(--ink); } .wordmark--footer { margin-bottom: 1rem; } .site-footer p { max-width: 34rem; margin: 0; color: var(--ink-soft); font-size: 0.82rem; } .site-footer nav { display: flex; flex-wrap: wrap; align-content: start; justify-content: flex-end; gap: 0.7rem 1.2rem; } .site-footer nav a, .site-footer nav button { border: 0; background: none; cursor: pointer; font-size: 0.8rem; font-weight: 700; } .site-footer__fineprint { grid-column: 1 / -1; font-family: var(--mono); font-size: 0.7rem !important; } .error-page { min-height: 62vh; padding-block: clamp(4rem, 10vw, 9rem); } .error-page p:not(.eyebrow) { margin: 1.5rem 0; color: var(--ink-soft); } @media (max-width: 850px) { .site-header { align-items: center; padding-block: 1.2rem; } .site-nav { flex-wrap: wrap; justify-content: flex-end; } .site-nav .nav .nav-home { display: none; } .topic-index { grid-template-columns: 1fr; gap: 0.8rem; } .newsletter, .site-footer, .link-note__footer { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; } .briefing-list { grid-template-columns: 1fr; } .briefing-card:nth-child(odd) { border-right: 0; } } @media (max-width: 620px) { :root { --gutter: 1rem; } .site-header { min-height: 4.5rem; } .wordmark__name { display: none; } .site-header { gap: 0.75rem; } .site-nav, .site-nav .nav { flex-wrap: nowrap; gap: 0.7rem; } .site-nav a, .nav-action { padding: 0; font-size: 0.78rem; } .site-nav .nav-subscribe { padding: 0.45rem 0.6rem; } .masthead h1 { font-size: clamp(2.2rem, 12vw, 3.5rem); } .masthead__foot { grid-template-columns: 1fr; gap: 0.8rem; } .link-card { grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem; } .link-card__number::before { content: ""; } .link-card__title { font-size: 1.75rem; } .mr-analysis, .link-note__analysis .mr-analysis { grid-template-columns: 1fr; gap: 0.55rem; } .link-card__footer, .link-note__actions { align-items: flex-start; flex-direction: column; } .newsletter { margin-inline: 0; width: 100%; } .pagination { grid-template-columns: 1fr 1fr; } .pagination .page-number { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .site-footer, .newsletter, .topic-index, .pagination { display: none; } .shell { width: 100%; } a { color: inherit; } }