@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url(/fonts/source-serif-4-latin-wght-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url(/fonts/source-serif-4-latin-ext-wght-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url(/fonts/source-serif-4-latin-wght-italic-5.3.0.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url(/fonts/source-serif-4-latin-ext-wght-italic-5.3.0.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/inter-latin-wght-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/inter-latin-ext-wght-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-400-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/ibm-plex-mono-latin-600-normal-5.3.0.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Serif Fallback Times";
src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
size-adjust: 118.5%;
ascent-override: 87.4%;
descent-override: 28.3%;
line-gap-override: 0%;
}
@font-face {
font-family: "Serif Fallback Noto";
src: local("Noto Serif"), local("NotoSerif-Regular");
size-adjust: 99%;
ascent-override: 104.6%;
descent-override: 33.8%;
line-gap-override: 0%;
}
@font-face {
font-family: "Serif Fallback Times";
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
font-weight: 600 900;
size-adjust: 114%;
ascent-override: 90.9%;
descent-override: 29.4%;
line-gap-override: 0%;
}
@font-face {
font-family: "Serif Fallback Noto";
src: local("Noto Serif Bold"), local("NotoSerif-Bold");
font-weight: 600 900;
size-adjust: 96.9%;
ascent-override: 106.9%;
descent-override: 34.6%;
line-gap-override: 0%;
}
@font-face {
font-family: "Mono Fallback";
src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("DejaVu Sans Mono");
size-adjust: 100%;
ascent-override: 102.5%;
descent-override: 27.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
size-adjust: 107.1%;
ascent-override: 90.44%;
descent-override: 22.52%;
line-gap-override: 0%;
}
:root {
color-scheme: light;
--bg:          #f4efe6;
--surface:     #fbf8f2;
--bg-alt:      #ebe4d6;
--ink:         #15130f;
--ink-2:       #3d3a33;
--muted:       #655f55;
--link:        #1f4e79;
--link-hover:  #0f2d52;
--brand:       #0f2d52;
--signal:      #a3123a;
--signal-mark: #a3123a;
--rule:        #d9d0bf;
--rule-strong: #15130f;
--field-bg:    #fbf8f2;
--field-edge:  #6f685c;
--btn-bg:      #0f2d52;
--btn-ink:     #fbf8f2;
--btn-hover:   #1f4e79;
--meter-on:    #0f2d52;
--meter-off:   #d9d0bf;
--focus:       #1f4e79;
--strong-bg:   #0f2d52;
--strong-ink:  #fbf8f2;
--shadow:      rgb(21 19 15 / 0.22);
--g1: #0f2d52;
--g2: #0f2d52;
--g3: #0f2d52;
--g4: #a3123a;
--g5: #a3123a;
--foot-bg:     #15130f;
--foot-ink:    #f4efe6;
--foot-muted:  #b9b1a3;
--foot-rule:   #3a362f;
--serif: "Source Serif 4", "Serif Fallback Times", "Serif Fallback Noto", Georgia, "Times New Roman", serif;
--sans:  "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono:  "IBM Plex Mono", "Mono Fallback", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--shell: 76rem;
--measure: 42rem;
--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
--radius: 3px;
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg:          #0c0f14;
--surface:     #161c26;
--bg-alt:      #121821;
--ink:         #ecebe6;
--ink-2:       #c3c6cc;
--muted:       #9098a4;
--link:        #9cc2f0;
--link-hover:  #c3dbf7;
--brand:       #ecebe6;
--signal:      #ff8fa3;
--signal-mark: #ff8fa3;
--rule:        #263041;
--rule-strong: #ecebe6;
--field-bg:    #121821;
--field-edge:  #7d8591;
--btn-bg:      #9cc2f0;
--btn-ink:     #0c0f14;
--btn-hover:   #c3dbf7;
--meter-on:    #9cc2f0;
--meter-off:   #2c3646;
--focus:       #9cc2f0;
--shadow:      rgb(0 0 0 / 0.5);
--strong-bg:   #16243a;
--strong-ink:  #ecebe6;
--g1: #9cc2f0;
--g2: #9cc2f0;
--g3: #9cc2f0;
--g4: #ff8fa3;
--g5: #ff8fa3;
--foot-bg:     #080a0e;
--foot-ink:    #ecebe6;
--foot-muted:  #9aa1ad;
--foot-rule:   #222a36;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
font-size: 1.0625rem;
line-height: 1.6;
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 0.2em;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
::selection { background: color-mix(in srgb, var(--signal-mark) 28%, transparent); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
:target, h2[id], h3[id] { scroll-margin-top: 1.5rem; }
.arrow, .section-head a, .latest .all a {
display: inline-flex;
align-items: center;
gap: 0.35em;
text-decoration: none;
font-family: var(--sans);
font-weight: 600;
}
.arrow::after, .section-head a::after, .latest .all a::after {
content: "";
width: 0.9em;
height: 0.9em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 0.15s ease;
}
.arrow:hover, .section-head a:hover, .latest .all a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.arrow:hover::after, .section-head a:hover::after, .latest .all a:hover::after { transform: translateX(3px); }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 2px;
}
img, svg { max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
h1, h2, h3, h4 {
font-family: var(--serif);
color: var(--ink);
font-weight: 700;
line-height: 1.2;
margin: 0;
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
}
hr {
border: 0;
border-top: 1px solid var(--rule);
margin: 2.5rem 0;
}
ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }
blockquote {
margin: 1.5em 0;
padding: 0.2em 0 0.2em 1.2em;
border-left: 3px solid var(--brand);
color: var(--ink-2);
font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }
code, pre, kbd, samp { font-family: var(--mono); font-size: 0.88em; }
pre {
background: var(--bg-alt);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 0.9em 1em;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.wrap {
max-width: var(--shell);
margin: 0 auto;
padding: 0 var(--gutter);
}
.muted { color: var(--muted); }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
left: -9999px;
top: 0.5rem;
z-index: 50;
background: var(--btn-bg);
color: var(--btn-ink);
font-family: var(--sans);
font-weight: 600;
padding: 0.6rem 1rem;
border-radius: var(--radius);
text-decoration: none;
}
.skip:focus { left: 0.5rem; }
.brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--brand);
text-decoration: none;
}
.brand:hover { color: var(--brand); text-decoration: none; }
.brand .mark { width: 2.75rem; height: 2.75rem; flex: none; }
.brand .wordmark {
font-family: var(--serif);
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
letter-spacing: -0.012em;
white-space: nowrap;
}
.site-header {
background: var(--bg);
border-bottom: 1px solid var(--rule);
}
.site-header .bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
.site-header .tagline {
margin: 0;
padding-left: 1.5rem;
border-left: 1px solid var(--rule);
font-family: var(--sans);
font-size: 0.875rem;
line-height: 1.35;
color: var(--muted);
position: relative;
top: 1px;
}
.utility { margin-left: auto; }
.utility ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0.35rem 1.25rem;
flex-wrap: wrap;
}
.utility li { margin: 0; display: flex; align-items: center; }
.utility li[hidden] { display: none; }
.utility a {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 500;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.utility a:hover { color: var(--link); text-decoration: underline; }
.utility svg { width: 1.05rem; height: 1.05rem; }
.utility a.btn { color: var(--btn-ink); }
.theme-switch button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid var(--rule);
border-radius: 999px;
background: transparent;
color: var(--ink);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-switch button:hover { border-color: var(--link); color: var(--link); }
.theme-switch svg { width: 1.1rem; height: 1.1rem; }
.js .theme-switch[hidden] { display: flex; }
.theme-switch .sun { display: none; }
[data-theme="dark"] .theme-switch .sun { display: block; }
[data-theme="dark"] .theme-switch .moon { display: none; }
.utility a.btn:hover { color: var(--btn-ink); }
.sections {
border-top: 3px solid var(--rule-strong);
}
.sections ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0 1.75rem;
}
.sections li { margin: 0; }
.sections a {
display: block;
padding: 0.8rem 0 0.7rem;
font-family: var(--sans);
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
border-bottom: 3px solid transparent;
}
.sections a:hover { color: var(--link); border-bottom-color: var(--rule); }
.sections a[aria-current="page"] {
border-bottom-color: var(--signal);
color: var(--ink);
}
@media (max-width: 64rem) {
.site-header .tagline { display: none; }
}
@media (max-width: 48rem) {
.brand .wordmark { font-size: 1.35rem; }
.brand .mark { width: 2.1rem; height: 2.1rem; }
.utility ul { gap: 0.35rem 0.9rem; }
.utility .label-wide { display: none; }
.sections ul { gap: 0 1.1rem; }
.sections a { padding: 0.6rem 0 0.5rem; font-size: 0.875rem; }
}
@media (max-width: 30rem) {
.site-header .bar { gap: 0.6rem 0.75rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.brand { gap: 0.5rem; }
.utility .account { display: none; }
.utility .word {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.utility svg { width: 1.25rem; height: 1.25rem; }
.utility .btn.small { font-size: 0.78rem; padding: 0.45em 0.65em; }
.brand .wordmark { font-size: 1.08rem; }
.brand .mark { width: 1.8rem; height: 1.8rem; }
.utility ul { gap: 0.3rem 0.55rem; }
.theme-switch button { width: 1.9rem; height: 1.9rem; border-color: transparent; }
.sections ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 1.2rem; }
.sections ul::-webkit-scrollbar { display: none; }
.sections li { flex: none; }
.sectionnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sectionnav ul::-webkit-scrollbar { display: none; }
.sectionnav li { flex: none; }
}
.sectionnav {
background: var(--bg-alt);
border-bottom: 1px solid var(--rule);
}
.sectionnav .wrap {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.sectionnav .sectionname {
margin: 0;
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.sectionnav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.1rem;
}
.sectionnav li { margin: 0; }
.sectionnav a {
font-family: var(--sans);
font-size: 0.875rem;
color: var(--ink-2);
text-decoration: none;
}
.sectionnav a:hover { color: var(--link); text-decoration: underline; }
.sectionnav a[aria-current="page"] {
color: var(--ink);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--signal);
text-decoration-thickness: 2px;
text-underline-offset: 0.35em;
}
@media (max-width: 40rem) {
.sectionnav .sectionname { flex-basis: 100%; }
}
main.wrap {
display: block;
padding-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
padding-bottom: 2rem;
min-height: 50vh;
}
main > *, .page-body > * {
max-width: var(--measure);
margin-left: auto;
margin-right: auto;
}
main > .scroller, .page-body > .scroller,
main > .filter, .page-body > .filter,
main > .cards, .page-body > .cards,
main > .full, .page-body > .full,
main.has-toc > .page-body { max-width: none; }
.toc { display: none; }
.page-body { counter-reset: section; }
.has-toc .page-body h2[id],
.has-toc .post-body h3[id] {
border-top: 1px solid var(--rule);
padding-top: 1.1rem;
}
.has-toc .page-body h2[id]::before,
.has-toc .post-body h3[id]::before {
counter-increment: section;
content: counter(section, decimal-leading-zero);
display: block;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--signal);
margin-bottom: 0.45rem;
}
@media (min-width: 64rem) {
main.has-toc {
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
column-gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
main.has-toc > .page-body > * { margin-left: 0; }
main.has-toc > .page-body > p.lede,
main.has-toc > .page-body > h1:first-child + p { max-width: 48rem; }
.toc {
display: block;
position: sticky;
top: 1.5rem;
max-height: calc(100vh - 3rem);
overflow-y: auto;
padding: 0.2rem 0.5rem 1rem 0;
font-family: var(--sans);
}
.toc-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 0.9rem;
padding-bottom: 0.7rem;
border-bottom: 3px solid var(--rule-strong);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
display: grid;
grid-template-columns: 1.9rem minmax(0, 1fr);
padding: 0.45rem 0 0.45rem 0.6rem;
border-left: 2px solid var(--rule);
font-size: 0.875rem;
line-height: 1.35;
color: var(--ink-2);
text-decoration: none;
}
.toc a::before {
content: counter(toc, decimal-leading-zero);
font-size: 0.75rem;
font-weight: 700;
color: var(--muted);
padding-top: 0.1em;
font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--link); border-left-color: var(--link); }
.toc a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--signal); }
.toc a.is-current::before { color: var(--signal); }
.toc-meta {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-size: 0.8rem;
line-height: 1.5;
color: var(--muted);
}
.toc-meta p { margin: 0 0 0.75rem; }
.toc-meta .label {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 0.2rem;
}
.toc-meta cite { font-style: normal; color: var(--ink-2); }
}
body.wide main > * { margin-left: 0; }
body.wide main > p,
body.wide main > h1,
body.wide main > h2,
body.wide main > ul,
body.wide main > ol { max-width: var(--measure); }
main h1 {
font-size: clamp(2rem, 1.35rem + 2.4vw, 3rem);
line-height: 1.1;
letter-spacing: -0.018em;
margin-bottom: 0.45em;
}
main h2 {
font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.625rem);
letter-spacing: -0.01em;
margin-top: 2.2em;
margin-bottom: 0.6em;
}
main h3 {
font-size: 1.2rem;
margin-top: 1.8em;
margin-bottom: 0.5em;
}
main h4 {
font-size: 1.05rem;
font-style: italic;
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.4em;
}
main h1 + h2, main .lede + h2 { margin-top: 1.4em; }
main p.lede,
main > h1:first-child + p,
.page-body > h1:first-child + p {
font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
line-height: 1.45;
color: var(--ink-2);
margin: 0 auto 1.6em;
-webkit-hyphens: none;
hyphens: none;
}
body.wide main p.lede, body.wide main > h1:first-child + p { margin-left: 0; }
.eyebrow {
font-family: var(--mono);
font-size: 0.76rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 0 auto 0.9rem;
}
.eyebrow a { color: var(--signal); text-decoration: none; font-weight: 600; }
.eyebrow a:hover { text-decoration: underline; }
.kicker {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--signal);
}
a.kicker { text-decoration: none; }
a.kicker:hover { text-decoration: underline; }
.buy, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45em;
font-family: var(--sans);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
padding: 0.75em 1.25em;
background: var(--btn-bg);
color: var(--btn-ink);
border: 1px solid var(--btn-bg);
border-radius: var(--radius);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.buy:hover, .btn:hover {
color: var(--btn-ink);
background: var(--btn-hover);
border-color: var(--btn-hover);
}
.buy.secondary, .btn.secondary {
background: transparent;
color: var(--link);
border-color: var(--field-edge);
}
.buy.secondary:hover, .btn.secondary:hover { color: var(--link-hover); background: transparent; border-color: var(--link); }
.btn.small { font-size: 0.85rem; padding: 0.5em 0.9em; }
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
input[type="search"], input[type="email"], input[type="text"], input[type="url"],
input[type="date"], input[type="datetime-local"], select, textarea {
font: inherit;
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--field-bg);
border: 1px solid var(--field-edge);
border-radius: var(--radius);
padding: 0.6em 0.75em;
max-width: 100%;
line-height: 1.4;
}
textarea { width: 100%; line-height: 1.5; }
button { font: inherit; }
button.linkish {
background: none;
border: 0;
padding: 0;
font-family: var(--sans);
font-size: 0.85rem;
color: var(--link);
text-decoration: underline;
cursor: pointer;
}
.flash {
font-family: var(--sans);
font-size: 0.95rem;
border-left: 4px solid var(--brand);
padding: 0.7rem 1rem;
background: var(--bg-alt);
border-radius: 0 var(--radius) var(--radius) 0;
}
.hint {
font-family: var(--sans);
font-size: 0.875rem;
color: var(--muted);
margin: 0;
}
.panel {
background: var(--bg-alt);
border-left: 4px solid var(--brand);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.1rem 1.35rem;
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.in-brief {
margin-top: 0.5rem;
margin-bottom: 2.25rem;
padding: 1.1rem 1.35rem 1.2rem;
background: var(--bg-alt);
border-radius: var(--radius);
border-top: 3px solid var(--signal-mark);
font-family: var(--sans);
}
.in-brief-title {
font-size: 0.75rem !important;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--signal);
margin: 0 0 0.6rem !important;
}
.in-brief ul { list-style: none; margin: 0; padding: 0; }
.in-brief li {
position: relative;
margin: 0 0 0.5rem;
padding-left: 1.4rem;
font-size: 0.975rem;
line-height: 1.5;
color: var(--ink);
}
.in-brief li:last-child { margin-bottom: 0; }
.in-brief li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.55em;
width: 0.45rem;
height: 0.45rem;
border-radius: 2px;
background: var(--signal-mark);
}
.directory {
list-style: none;
padding: 0;
margin-top: 1.25rem;
margin-bottom: 1.5rem;
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.directory li {
position: relative;
margin: 0;
padding: 0.85rem 1rem 0.9rem;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.directory li:hover { border-color: color-mix(in srgb, var(--link) 45%, var(--rule)); box-shadow: 0 6px 18px -12px var(--shadow); }
.directory li > a:first-child {
display: block;
font-family: var(--sans);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
margin-bottom: 0.25rem;
}
.directory li > a:first-child::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.directory li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.directory li:focus-within a:focus-visible { outline: none; }
.directory .desc { display: block; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.directory .desc::first-letter { text-transform: uppercase; }
.directory .desc a { position: relative; z-index: 1; }
p.point {
border-left: 3px solid var(--rule);
padding-left: 1.1rem;
margin-top: 1.25rem;
}
p.point > strong:first-child {
display: block;
font-size: 1.08em;
line-height: 1.35;
color: var(--ink);
margin-bottom: 0.2rem;
}
main p, main li { text-wrap: pretty; }
main p { margin-bottom: 1.15em; }
.cards {
list-style: none;
margin: 1.75rem 0;
padding: 0;
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.cards li {
position: relative;
margin: 0;
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 1.15rem 1.25rem 1.25rem;
background: var(--bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cards li:hover {
border-color: color-mix(in srgb, var(--link) 45%, var(--rule));
box-shadow: 0 6px 18px -10px var(--shadow);
transform: translateY(-2px);
}
.cards li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cards li:focus-within a:focus-visible { outline: none; }
.cards h2, .cards h3 {
font-size: 1.2rem;
line-height: 1.25;
margin: 0 0 0.45em;
}
.cards h2 a, .cards h3 a { color: var(--ink); text-decoration: none; }
.cards h2 a::after, .cards h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.cards li:hover h2 a, .cards li:hover h3 a { color: var(--link); }
.cards .eyebrow { margin: 0 0 0.5em; }
.cards p { margin-bottom: 0.5em; color: var(--ink-2); font-size: 1rem; }
.cards p:last-child { margin-bottom: 0; }
table {
border-collapse: collapse;
width: 100%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
font-family: var(--sans);
font-size: 0.9rem;
line-height: 1.45;
}
caption {
caption-side: top;
text-align: left;
font-family: var(--sans);
font-size: 0.85rem;
font-style: normal;
color: var(--muted);
padding: 0.6rem 0.75rem;
}
th, td {
text-align: left;
vertical-align: top;
padding: 0.6em 0.75em;
border-bottom: 1px solid var(--rule);
-webkit-hyphens: none;
hyphens: none;
}
thead th {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
border-bottom: 2px solid var(--rule-strong);
white-space: nowrap;
}
.scroller {
overflow: auto;
max-height: min(78vh, 44rem);
margin: 1.75rem 0;
border: 1px solid var(--rule);
border-radius: var(--radius);
overscroll-behavior: contain;
background: var(--bg);
}
.scroller.compact { max-width: var(--measure); margin-left: auto; margin-right: auto; }
body.wide .scroller.compact { margin-left: 0; }
body:not(.wide) main > .scroller:not(.compact) { max-width: 60rem; margin-left: auto; margin-right: auto; }
.scroller table { margin: 0; }
.scroller thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg-alt);
border-bottom: 0;
box-shadow: inset 0 -2px 0 var(--rule-strong);
}
.scroller tbody tr:last-child th,
.scroller tbody tr:last-child td { border-bottom: 0; }
.scroller tbody tr:hover { background: var(--bg-alt); }
table.data { font-size: 0.875rem; }
table.data.roomy { min-width: 76rem; }
table.data.roomy td, table.data.roomy th { min-width: 6rem; }
table.data col.w-wide  { width: 18%; }
table.data col.w-mid   { width: 12%; }
table.data col.w-tight { width: 6%; }
td.grade { text-align: center; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.num   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.date  { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 34rem) {
body.home main .scroller th:first-child,
body.home main .scroller td:first-child,
body.p-standard main .scroller th:first-child,
body.p-standard main .scroller td:first-child {
width: 5rem;
white-space: nowrap;
}
}
.filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
margin: 1.75rem 0 0.5rem;
padding: 0.9rem 1rem;
background: var(--bg-alt);
border-radius: var(--radius);
font-family: var(--sans);
font-size: 0.9rem;
}
.filter label { font-weight: 600; }
.filter input[type="search"], .filter select { min-width: 12rem; font-size: 0.95rem; padding: 0.45em 0.6em; }
.count { color: var(--muted); }
dl {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
background: var(--bg-alt);
border-left: 4px solid var(--brand);
border-radius: 0 var(--radius) var(--radius) 0;
}
dt {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
margin-top: 0.8em;
}
dt:first-of-type { margin-top: 0; }
dd { margin: 0.15em 0 0; }
.terms dt { margin-top: 1.1em; }
.site-footer {
background: var(--foot-bg);
color: var(--foot-ink);
margin-top: 4rem;
font-family: var(--sans);
font-size: 0.9rem;
line-height: 1.55;
--focus: #ffffff;
}
.site-footer a { color: var(--foot-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--foot-ink); }
.site-footer p { margin: 0 0 0.6em; color: var(--foot-muted); }
.site-footer .foot-grid {
display: grid;
gap: 2rem 2.5rem;
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
padding-top: 3rem;
padding-bottom: 2.5rem;
}
@media (max-width: 56rem) {
.site-footer .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
.site-footer .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.site-footer .brand { color: var(--foot-ink); margin-bottom: 1rem; }
.site-footer .brand .wordmark { font-size: 1.4rem; }
.site-footer .foot-about p { max-width: 26rem; }
.site-footer .foot-about .standard-line { color: var(--foot-ink); font-weight: 500; }
.site-footer h2 {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--foot-muted);
margin: 0 0 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 0.55rem; }
.site-footer .foot-base {
border-top: 1px solid var(--foot-rule);
padding-top: 1.25rem;
padding-bottom: 2.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 2rem;
justify-content: space-between;
font-size: 0.85rem;
}
.site-footer .foot-base p { margin: 0; }
.site-footer .foot-base a { text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 30rem) {
.front-intro { padding: 0.75rem 0.9rem; gap: 0.5rem 1rem; }
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.8rem; font-size: 0.8rem; }
}
.lead-grid {
display: grid;
gap: 2rem 3rem;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
.lead-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.lead-grid .latest { border-left: 1px solid var(--rule); padding-left: 2rem; }
}
.lead-story .kicker { display: inline-block; margin-bottom: 0.9rem; }
.lead-story h3 {
font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 0.9rem;
}
.lead-story h3 a { color: var(--ink); text-decoration: none; }
.lead-story h3 a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; }
.lead-story .dek {
font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
line-height: 1.45;
color: var(--ink-2);
margin: 0 0 1rem;
max-width: 40rem;
}
.meta {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 0.9rem;
margin-top: 0;
margin-bottom: 0;
}
.meta .evidence { color: var(--ink-2); font-weight: 600; }
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--mono);
font-size: 0.76rem;
font-weight: 400;
line-height: 1.2;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 0.25rem 0.65rem 0.25rem 0.5rem;
max-width: 100%;
flex-wrap: wrap;
}
.latest h2 {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 0.5rem;
padding-bottom: 0.6rem;
border-bottom: 3px solid var(--rule-strong);
}
.latest ol { list-style: none; padding: 0; margin: 0; }
.latest li { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.latest li:last-child { border-bottom: 0; }
.latest time {
display: block;
font-family: var(--mono);
font-size: 0.74rem;
color: var(--muted);
margin-bottom: 0.25rem;
}
.latest time .kicker { margin-right: 0.5rem; }
.latest h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
.latest h3 a { color: var(--ink); text-decoration: none; }
.latest h3 a:hover { color: var(--link); text-decoration: underline; }
.latest .all { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; }
.front-section { margin-top: 3.5rem; }
.section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 1rem;
border-top: 2px solid var(--rule-strong);
padding-top: 0.75rem;
margin-bottom: 1.25rem;
}
.section-head h2 {
font-family: var(--serif);
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0;
}
.section-head .kicker { display: block; margin-bottom: 0.25rem; }
.section-head a { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
.story-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.75rem 2rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.story-grid li {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 1.1rem 1.2rem 1.2rem;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.story-grid li:hover {
border-color: color-mix(in srgb, var(--link) 45%, var(--rule));
box-shadow: 0 6px 18px -10px var(--shadow);
transform: translateY(-2px);
}
.story-grid li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.story-grid li:focus-within a:focus-visible { outline: none; }
.story-grid h3 { font-size: 1.25rem; line-height: 1.25; margin: 0.4rem 0 0.5rem; }
.story-grid h3 a { color: var(--ink); text-decoration: none; }
.story-grid h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.story-grid li:hover h3 a { color: var(--link); }
.story-grid p { color: var(--ink-2); font-size: 1rem; margin: 0 0 0.75rem; }
.story-grid .meta { font-size: 0.8rem; }
.band {
background: var(--bg-alt);
box-shadow: 0 0 0 100vmax var(--bg-alt);
clip-path: inset(0 -100vmax);
padding: 2.75rem 0;
margin-top: 3.5rem;
}
.band + .band { margin-top: 0; }
.band .section-head { border-top-color: var(--rule-strong); }
.band-cta {
display: grid;
gap: 1.25rem 3rem;
align-items: center;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
.band-cta { grid-template-columns: minmax(0, 1.4fr) auto; }
}
.band-cta h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin: 0 0 0.5rem; }
.band-cta p { margin: 0; color: var(--ink-2); max-width: 40rem; }
.band-cta .actions { margin: 0; }
.about-front { margin-top: 3.5rem; }
.about-front .intro {
font-size: 1.15rem;
line-height: 1.55;
color: var(--ink-2);
max-width: 48rem;
}
.about-front .intro p { margin-bottom: 0.8em; }
.about-grid {
display: grid;
gap: 0.5rem 3rem;
grid-template-columns: minmax(0, 1fr);
margin-top: 1.5rem;
}
@media (min-width: 56rem) {
.about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.about-grid section { border-top: 1px solid var(--rule); padding-top: 1rem; }
.about-grid h2 { font-size: 1.3rem; margin: 0 0 0.6rem; }
.about-grid p { font-size: 1rem; }
.today { margin-top: 0; }
.figures {
list-style: none;
margin: 0;
padding: 0 0 0.4rem;
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(78%, 20rem);
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
@media (min-width: 40rem) { .figures { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 64rem) { .figures { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.figures li { margin: 0; scroll-snap-align: start; }
.figures a {
height: 100%;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1rem 1rem 1.1rem;
background: var(--surface);
border: 1px solid var(--rule);
border-top: 4px solid var(--gc, var(--signal-mark));
border-radius: 0 0 var(--radius) var(--radius);
color: var(--ink);
text-decoration: none;
}
.figures a:hover { border-color: var(--gc, var(--link)); }
.figures a:hover .fig-l { text-decoration: underline; }
.fig-n {
font-family: var(--mono);
font-weight: 600;
font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.2rem);
line-height: 1;
letter-spacing: -0.05em;
color: var(--gc, var(--ink));
}
.fig-l { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.3; flex: 1; }
.fig-k { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal); margin-bottom: -0.2rem; }
.no-fig .fig-l { font-size: 1.3rem; line-height: 1.25; }
.fig-punct { margin-inline: -0.16em; }
.today .section-head { border-top: 0; padding-top: 0; }
.section-sub { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 0.35rem 0 0; }
.card-foot {
margin: auto 0 0;
padding-top: 0.65rem;
border-top: 1px solid var(--rule);
font-family: var(--mono);
font-size: 0.76rem;
line-height: 1.35;
color: var(--ink-2);
}
.story-grid .card-foot { margin: auto 0 0; font-size: 0.76rem; color: var(--ink-2); }
.story-grid .kicker { font-size: 0.74rem; color: var(--signal); margin-bottom: 0.1rem; }
.story-grid .card-date { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 0.4rem; }
.lead-story .short-version { max-width: 46rem; margin-top: 1.5rem; }
.lead-story .short-version dd { font-size: 1.02rem; }
.card-foot .chip { border: 0; background: none; padding: 0; }
.fig-grade { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.post-body .issue-figures { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); overflow: visible; padding: 0; margin: 0 0 1.5rem; }
.post-body .issue-figures li { margin: 0; }
.post-body .issue-figures a { text-decoration: none; }
.fig-note { font-family: var(--sans); font-size: 0.85rem; line-height: 1.4; color: var(--ink-2); }
.plans { list-style: none; padding: 0; margin-top: 1.5rem; margin-bottom: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.plans li { margin: 0; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--radius); }
.plans h2 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.plan-price { font-family: var(--mono); font-weight: 600; font-size: 1.4rem; margin: 0 0 0.5rem; }
.plan-terms { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-2); margin: 0 0 0.75rem; }
.plans p:last-child { margin-bottom: 0; }
.after-button { margin-top: 0.9rem; }
.catch-up { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; margin-top: 0; margin-bottom: 1.25rem; padding: 0.7rem 0.9rem; background: var(--bg-alt); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
.category-row ul { list-style: none; padding: 0; margin-top: 0.9rem; margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.category-row li { margin: 0; }
.category-row a { display: inline-block; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.65rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; }
.category-row a:hover { border-color: var(--link); color: var(--link); }
.categories { list-style: none; padding: 0; margin-top: 1.5rem; margin-bottom: 0; display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.categories li { margin: 0; border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.categories h2 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.categories h2 a { color: var(--ink); text-decoration: none; }
.categories h2 a:hover { color: var(--link); text-decoration: underline; }
.categories p { margin: 0 0 0.3rem; }
.email-preview { display: block; width: 100%; max-width: 44rem; height: 60rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #f5f3ef; }
.fig-grade .grade { display: block; font-family: var(--mono); font-weight: 600; color: var(--gc, var(--ink)); }
.fig-grade .what { display: block; }
.today + .lead-grid { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.front-split .story-grid { gap: 1.25rem; }
@media (min-width: 40rem) {
.front-split .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.front-split .story-grid li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.front-split .story-grid li:first-child:nth-last-child(odd) h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); }
}
.story-grid li { border-top: 3px solid var(--gc, var(--ink)); }
.front-split { display: grid; gap: 0 2rem; }
@media (min-width: 64rem) {
.front-split:has(.quiz-teaser) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.front-split .quiz-teaser { margin-top: 3.5rem; }
}
.quiz-teaser {
margin-top: 2rem;
padding: 1.25rem;
background: var(--strong-bg);
color: var(--strong-ink);
border-radius: var(--radius);
display: grid;
gap: 0.8rem;
}
.quiz-teaser .kicker { color: inherit; opacity: 0.85; margin: 0; }
.quiz-teaser h2 { font-size: 1.3rem; line-height: 1.25; color: inherit; margin: 0; }
.quiz-teaser ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.quiz-teaser li { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; padding: 0.6em 0.8em; border: 1px solid currentColor; border-radius: var(--radius); }
.quiz-teaser a { color: inherit; font-family: var(--sans); font-weight: 700; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li { margin: 0; border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.stats b { display: block; font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.35rem; }
.stats span { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.stats-note { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); margin: 1.25rem 0 0; max-width: 46rem; }
.section-top {
border-bottom: 1px solid var(--rule);
padding-bottom: 1.5rem;
margin-bottom: 0.5rem;
}
.section-top h1 { margin-bottom: 0.3em; }
.section-top .lede { margin-bottom: 0.75rem !important; }
main > .section-top, main > .postlist, main > .more { max-width: 52rem; }
.empty { padding: 2rem 0; color: var(--muted); font-family: var(--sans); }
.section-top .feeds { font-family: var(--sans); font-size: 0.875rem; margin: 0; color: var(--muted); }
.postlist {
list-style: none;
margin: 0 auto 1.5rem;
padding: 0;
}
.postlist li {
margin: 0;
padding: 1.35rem 0;
border-bottom: 1px solid var(--rule);
display: grid;
gap: 0.2rem 2rem;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) {
.postlist.dated li { grid-template-columns: 9rem minmax(0, 1fr); }
.postlist.dated li > * { grid-column: 2; }
.postlist.dated li > .when { grid-column: 1; grid-row: 1 / span 4; padding-top: 0.3rem; }
}
.postlist .when {
font-family: var(--sans);
font-size: 0.8rem;
color: var(--muted);
margin: 0;
}
.postlist .when .kicker { display: block; margin-bottom: 0.2rem; }
.postlist h2, .postlist h3 {
font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
line-height: 1.25;
margin: 0 0 0.35rem;
}
.postlist h2 a, .postlist h3 a { color: var(--ink); text-decoration: none; }
.postlist h2 a:hover, .postlist h3 a:hover { color: var(--link); text-decoration: underline; }
.postlist p { margin: 0; color: var(--ink-2); }
.postlist .meta { margin-top: 0.5rem; }
.pager {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
align-items: center;
font-family: var(--sans);
font-size: 0.9rem;
margin: 1.5rem auto;
}
main > .project-list { max-width: 52rem; }
.project-list {
list-style: none;
margin: 1.5rem auto 2rem;
padding: 0;
display: grid;
gap: 1.25rem;
}
.project-list li {
position: relative;
margin: 0;
padding: 1.4rem 1.5rem 1.3rem;
border: 1px solid var(--rule);
border-top: 3px solid var(--brand);
border-radius: 0 0 var(--radius) var(--radius);
background: var(--bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.project-list li:hover { box-shadow: 0 6px 18px -12px var(--shadow); border-color: color-mix(in srgb, var(--link) 45%, var(--rule)); border-top-color: var(--brand); }
.project-list li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.project-list li:focus-within a:focus-visible { outline: none; }
.project-list h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin: 0.35rem 0 0.6rem; }
.project-list h2 a { color: var(--ink); text-decoration: none; }
.project-list h2 a::after { content: ""; position: absolute; inset: 0; }
.project-list li:hover h2 a { color: var(--link); }
.project-list .question, .project-question {
font-family: var(--serif);
font-size: 1.12rem;
font-style: italic;
line-height: 1.45;
color: var(--ink);
border-left: 3px solid var(--signal-mark);
padding-left: 0.9rem;
margin: 0 0 0.75rem;
}
.project-question { border-left: 0; padding-left: 0; margin: 0; }
.project-list p { color: var(--ink-2); margin: 0 0 0.75rem; }
.project-list .meta { margin: 0; }
.project-reports { margin-top: 3rem; }
.sources.unnumbered li { grid-template-columns: minmax(0, 1fr); }
.evidence-count { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.project-dates { margin-bottom: 1.75rem !important; }
.post-head { margin-bottom: 1.75rem; }
.post-head h1 {
font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 0.9rem;
}
.post-head .lede { margin-bottom: 1.25rem !important; }
@media (min-width: 64rem) {
main > .post.has-aside, main > .beside-more, main > .beside-flash { max-width: calc(var(--measure) + 3.5rem + 20rem); }
.post.has-aside {
display: grid;
grid-template-columns: minmax(0, var(--measure)) 20rem;
grid-template-areas: "head head" "notes notes" "main aside";
column-gap: 3.5rem;
align-items: start;
}
.has-aside > .post-head { grid-area: head; }
.has-aside > .post-notices { grid-area: notes; margin-bottom: 1.5rem; }
.has-aside > .post-main { grid-area: main; min-width: 0; }
.has-aside > .post-aside { grid-area: aside; }
.has-aside .post-head h1 { max-width: 26ch; }
.has-aside .post-head .lede, .has-aside .post-head .catch-up { max-width: var(--measure); margin-left: 0; }
.has-aside .post-aside .story-card { margin-top: 0; margin-bottom: 0; padding: 1.1rem 1.1rem 0.9rem; }
.has-aside .post-aside .card-figure { font-size: clamp(3rem, 1.5rem + 2.6vw, 4.25rem); }
.has-aside .post-aside .card-line { font-size: 1.2rem; max-width: none; }
.has-aside .post-aside.no-fig .card-line, .has-aside .post-aside .no-fig .card-line { font-size: 1.35rem; }
.has-aside .post-aside .short-version div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.has-aside .post-aside .short-version dd { font-size: 0.98rem; }
.has-aside .post-aside .card-actions a[href="#story"] { display: none; }
}
@media (min-width: 64rem) and (min-height: 46rem) {
.has-aside > .post-aside { position: sticky; top: 1.25rem; }
}
.byline {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
font-family: var(--sans);
font-size: 0.875rem;
line-height: 1.4;
color: var(--muted);
}
.byline p { margin: 0; }
.byline .mark { width: 2.6rem; height: 2.6rem; flex: none; }
.byline .who { color: var(--ink); font-weight: 700; display: block; }
.byline .who a { color: inherit; text-decoration: none; }
.byline .who a:hover { text-decoration: underline; }
.byline .evidence-link {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
white-space: nowrap;
}
.byline .to-sources { text-decoration: none; }
.byline .to-sources:hover .chip { border-color: var(--link); color: var(--link); }
.byline .evidence-link .arrow { font-size: 0.8rem; }
@media (max-width: 34rem) {
.byline { flex-wrap: wrap; }
.byline > p:first-of-type { flex: 1 1 0; min-width: 0; }
.byline .evidence-link { margin-left: 0; flex-basis: 100%; align-items: flex-start; }
}
.post-body {
font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
line-height: 1.65;
}
.post-body > :first-child { margin-top: 0; }
.post-body h2 { margin-top: 1.8em; }
figure {
margin: 2rem 0;
padding: 0;
}
figure img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--bg-alt);
}
figcaption {
font-family: var(--sans);
font-size: 0.85rem;
line-height: 1.45;
color: var(--muted);
margin-top: 0.65rem;
padding-left: 0.75rem;
border-left: 2px solid var(--signal-mark);
}
.post-body img { border-radius: var(--radius); }
sup.cite {
font-family: var(--sans);
font-size: 0.7em;
font-weight: 600;
line-height: 0;
white-space: nowrap;
}
sup.cite a { text-decoration: none; padding: 0 0.1em; }
sup.cite a:hover { text-decoration: underline; }
.corrections {
border-left-color: var(--signal);
}
.corrections h2 {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--signal);
margin: 0 0 0.5rem;
}
.corrections ul { margin: 0; padding-left: 1.1em; font-size: 1rem; }
.notice { border-left-color: var(--signal); }
.post-sources {
margin-top: 3rem;
padding: 1.5rem 1.5rem 1.25rem;
background: var(--bg-alt);
border-radius: var(--radius);
border-top: 3px solid var(--rule-strong);
}
.post-sources h2 {
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 1rem;
}
.sources {
list-style: none;
counter-reset: none;
padding: 0;
margin: 0 0 1rem;
font-family: var(--sans);
font-size: 0.9rem;
line-height: 1.5;
}
.sources li {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0 0.5rem;
padding: 0.85rem 0;
border-top: 1px solid var(--rule);
margin: 0;
}
.sources li:first-child { border-top: 0; padding-top: 0; }
.sources .n {
font-weight: 700;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.sources .src { color: var(--ink); }
.sources .src a { font-weight: 600; }
.sources .read { color: var(--muted); }
.sources .note { display: block; color: var(--ink-2); margin-top: 0.2rem; }
.sources li:target {
outline: 2px solid var(--link);
outline-offset: 4px;
border-radius: 2px;
}
.grade {
font-family: var(--sans);
font-weight: 700;
white-space: nowrap;
}
.gradebadge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.35rem;
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 0.2rem 0.6rem 0.2rem 0.5rem;
flex-wrap: wrap;
max-width: 100%;
}
.gradebadge .what { font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.gradebadge .grade { white-space: nowrap; }
.gradebadge .grade { color: var(--gc, var(--ink)); }
.meter { display: inline-flex; gap: 2px; align-items: flex-end; }
.meter i {
display: block;
width: 4px;
border-radius: 1px;
background: var(--meter-off);
}
.meter i:nth-child(1) { height: 6px; }
.meter i:nth-child(2) { height: 8px; }
.meter i:nth-child(3) { height: 10px; }
.meter i:nth-child(4) { height: 12px; }
.meter i:nth-child(5) { height: 14px; }
.meter.s5 i, .meter.s4 i:nth-child(-n+4), .meter.s3 i:nth-child(-n+3),
.meter.s2 i:nth-child(-n+2), .meter.s1 i:nth-child(1) { background: var(--gc, var(--meter-on)); }
.g1, .meter.s5, :is(.gradebadge, .evidence, .card-grade):has(> .meter.s5) { --gc: var(--g1); }
.g2, .meter.s4, :is(.gradebadge, .evidence, .card-grade):has(> .meter.s4) { --gc: var(--g2); }
.g3, .meter.s3, :is(.gradebadge, .evidence, .card-grade):has(> .meter.s3) { --gc: var(--g3); }
.g4, .meter.s2, :is(.gradebadge, .evidence, .card-grade):has(> .meter.s2) { --gc: var(--g4); }
.g5, .meter.s1, :is(.gradebadge, .evidence, .card-grade):has(> .meter.s1) { --gc: var(--g5); }
.grade-key { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0; }
.tags {
font-family: var(--sans);
font-size: 0.875rem;
color: var(--muted);
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.tags a {
display: inline-block;
padding: 0.25rem 0.7rem;
border: 1px solid var(--rule);
border-radius: 999px;
color: var(--ink-2);
text-decoration: none;
}
.tags a:hover { border-color: var(--link); color: var(--link); }
.more {
margin-top: 3.5rem;
}
.more .postlist li { padding: 1rem 0; }
.plug {
margin-top: 2.5rem;
padding: 1.35rem 1.5rem;
border: 1px solid var(--rule);
border-top: 3px solid var(--brand);
border-radius: 0 0 var(--radius) var(--radius);
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
align-items: center;
justify-content: space-between;
}
.plug p { margin: 0; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); flex: 1 1 18rem; }
.plug strong { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-bottom: 0.2rem; }
.searchform {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: stretch;
margin: 1.5rem auto;
font-family: var(--sans);
}
.searchform label { flex-basis: 100%; font-weight: 600; font-size: 0.95rem; }
.searchform input[type="search"],
.searchform input[type="email"],
.searchform input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.searchform button { border: 0; cursor: pointer; }
.searchform .cf-turnstile, .searchform .flash, .searchform noscript { flex-basis: 100%; }
.cf-turnstile { min-height: 65px; }
.signup {
background: var(--bg-alt);
border-top: 3px solid var(--brand);
border-radius: 0 0 var(--radius) var(--radius);
padding: 1.25rem 1.5rem 1.35rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.signup .searchform { margin: 0 0 0.75rem; }
@media (max-width: 30rem) {
.signup {
margin-left: calc(-1 * var(--gutter));
margin-right: calc(-1 * var(--gutter));
padding-left: var(--gutter);
padding-right: var(--gutter);
border-radius: 0;
}
}
.comments {
margin-top: 3rem;
border-top: 3px solid var(--rule-strong);
padding-top: 0.5rem;
}
.comments > h2 {
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0.4rem 0 1rem;
}
.commentlist { list-style: none; margin: 1rem 0; padding: 0; font-family: var(--sans); font-size: 0.95rem; }
.commentlist li { border-top: 1px solid var(--rule); padding: 1rem 0; margin: 0; }
.commentlist li:first-child { border-top: 0; }
.commentlist .comment-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.4rem; }
.commentlist .comment-meta strong { color: var(--ink); }
.commentlist form { margin-top: 0.3rem; }
.commentlist li:target { outline: 2px solid var(--link); outline-offset: 3px; }
.commentform { display: grid; gap: 0.5rem; font-family: var(--sans); margin: 1.5rem 0; }
.commentform label { font-weight: 600; }
.commentform .buy { justify-self: start; }
h1.opener .opener-label, h2.setpiece .setpiece-label, h3.setpiece .setpiece-label {
display: block;
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--signal);
margin-bottom: 0.6rem;
}
h1.opener .opener-title, h2.setpiece .setpiece-title, h3.setpiece .setpiece-title { display: block; }
h2.setpiece, h3.setpiece { border-top: 1px solid var(--rule); padding-top: 1.1em; }
p.standout {
font-size: 1.25em;
line-height: 1.45;
border-left: 3px solid var(--signal);
padding-left: 1rem;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
p.standout strong { font-weight: 600; }
nav#toc ol, nav#toc ul, nav#TOC ol, nav#TOC ul { list-style: none; padding-left: 0; }
nav#toc li li, nav#TOC li li { margin-left: 1.4em; }
@media print {
.site-header .utility, .site-header .tagline, .sections, .sectionnav, .filter, .actions, .skip,
.pager, .searchform, .commentform, button.linkish, .plug, .more, .band-cta { display: none; }
.site-footer { background: none; color: #000; margin-top: 2rem; }
.site-footer a, .site-footer p { color: #000; }
.site-footer .foot-grid { display: block; padding: 0; }
.site-footer nav { display: none; }
.scroller { overflow: visible; max-height: none; border: 0; }
.scroller thead th { position: static; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}
.nl-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: var(--foot-bg);
color: var(--foot-ink);
border-top: 3px solid var(--signal-mark);
font-family: var(--sans);
transform: translateY(100%);
transition: transform 0.3s ease-out;
--focus: #ffffff;
}
.nl-bar.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .nl-bar { transition: none; } }
dialog.promo {
width: min(40rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
overflow: auto;
padding: 0;
border: 1px solid var(--rule);
border-top: 4px solid var(--signal-mark);
border-radius: var(--radius);
background: var(--surface);
color: var(--ink);
box-shadow: 0 18px 48px var(--shadow);
}
dialog.promo::backdrop { background: rgb(12 15 20 / 0.55); }
.promo-box { display: grid; gap: 1.25rem; padding: 1.5rem; }
.promo-image { width: 7.5rem; height: auto; justify-self: center; box-shadow: 0 6px 18px var(--shadow); border-radius: 2px; }
.promo-eyebrow { margin: 0; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
dialog.promo h2.promo-title { margin: 0.35rem 0 0.6rem; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.2; }
.promo-text { margin: 0 0 0.75rem; }
.promo-points { margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.95rem; }
.promo-points li { margin-bottom: 0.35rem; }
.promo-price { margin: 0 0 0.9rem; font-family: var(--sans); font-size: 0.875rem; color: var(--muted); }
.promo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.promo-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--radius); }
.promo-close:hover { background: var(--bg-alt); }
.promo-close svg { width: 1.25rem; height: 1.25rem; }
dialog.promo { position: fixed; }
@media (min-width: 36rem) {
.promo-box { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; padding: 2rem; }
.promo-image { width: 9rem; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
dialog.promo[open] { animation: promo-in 0.25s ease-out; }
@keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.nl-bar .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
.nl-bar p { flex: 1 1 20rem; margin: 0; font-size: 0.925rem; line-height: 1.45; }
.nl-bar p span { color: var(--foot-muted); }
.nl-bar .btn { background: var(--foot-ink); color: var(--foot-bg); border-color: var(--foot-ink); }
.nl-bar .btn:hover { background: var(--foot-muted); border-color: var(--foot-muted); color: var(--foot-bg); }
.nl-close {
font: inherit;
font-size: 0.85rem;
color: var(--foot-muted);
background: none;
border: 1px solid transparent;
border-radius: var(--radius);
padding: 0.5em 0.6em;
cursor: pointer;
}
.nl-close:hover { color: var(--foot-ink); text-decoration: underline; }
@media print { .nl-bar { display: none; } }
.story-card {
border: 1px solid var(--rule);
border-top: 5px solid var(--gc, var(--signal-mark));
border-radius: 0 0 var(--radius) var(--radius);
background: var(--surface);
padding: 1.25rem 1.25rem 1rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.card-kicker {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--signal);
margin: 0 0 0.75rem;
}
.card-kicker .card-count { color: var(--muted); font-weight: 600; }
.card-face { margin-bottom: 0.25rem; }
.card-figure {
font-family: var(--mono);
font-weight: 600;
font-size: clamp(3.25rem, 2.2rem + 5vw, 5.5rem);
line-height: 0.95;
letter-spacing: -0.05em;
color: var(--gc, var(--ink));
margin: 0;
overflow-wrap: anywhere;
}
.card-line {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
line-height: 1.25;
margin: 0.4rem 0 0.8rem;
max-width: 30ch;
}
.story-card.no-fig .card-line { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin-top: 0; max-width: 24ch; }
.card-line a { color: inherit; text-decoration: none; }
.card-line a:hover { text-decoration: underline; }
.card-grade {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.6rem;
font-family: var(--mono);
font-size: 0.875rem;
color: var(--ink-2);
margin: 0;
}
.card-grade strong { color: var(--gc, var(--ink)); }
.card-source { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin: 0.35rem 0 0; }
.short-version {
margin: 1rem 0 0;
padding: 0.9rem 0 0;
background: none;
border: 0;
border-top: 1px solid var(--rule);
border-radius: 0;
display: grid;
gap: 0.6rem;
}
.short-version div { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 0.2rem 1rem; }
.short-version dt {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--muted);
padding-top: 0.15em;
margin: 0;
}
.short-version dd { margin: 0; line-height: 1.45; }
@media (max-width: 34rem) { .short-version div { grid-template-columns: minmax(0, 1fr); } }
.card-actions { margin: 1rem 0 0; font-family: var(--sans); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.card-actions.depth a::after { content: " ↓"; }
.p-brief main > * { max-width: 62rem; }
.brief-head { margin-bottom: 1.5rem; }
.brief-head h1 { margin-top: 0.2rem; }
.brief-stack { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; gap: 1.25rem; }
.brief-stack > li { margin: 0; display: grid; }
.brief-stack > li.caught-up { display: flex; }
.brief-stack .story-card.brief {
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem 1.25rem 1.4rem;
}
.story-card.brief .card-face { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; }
@media (min-width: 40rem) { .story-card.brief .card-face { justify-content: flex-start; } }
.story-card.brief .card-line { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); max-width: 20ch; margin: 0.6rem 0 1rem; }
.story-card.brief.no-fig .card-line { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.5rem); max-width: 18ch; margin-top: 0; }
.story-card.brief .short-version { margin-top: 0; gap: 0.5rem; }
.story-card.brief .short-version div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.story-card.brief .short-version dd { font-size: 0.98rem; line-height: 1.4; }
.story-card.brief .card-actions { margin-top: 0; }
.card-top { display: grid; gap: 0.7rem; }
.card-progress { display: flex; gap: 4px; }
.card-progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); }
.card-progress i.on { background: var(--gc, var(--brand)); }
.story-card.brief .card-kicker { margin: 0; }
.story-card.brief .card-count { color: var(--ink); }
.story-card.brief .card-figure.len-s { font-size: clamp(5.5rem, 2rem + 24vw, 10rem); }
.story-card.brief .card-figure.len-m { font-size: clamp(4.25rem, 1.5rem + 16vw, 7.5rem); }
.story-card.brief .card-figure.len-l { font-size: clamp(3rem, 1rem + 12vw, 5rem); }
.caught-up {
text-align: center;
padding: 2.5rem 1.25rem;
border: 1px dashed var(--field-edge);
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: center;
}
.caught-mark {
font-family: var(--sans);
font-size: 2rem;
line-height: 1;
color: var(--btn-ink);
background: var(--btn-bg);
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: inline-grid;
place-items: center;
margin: 0 auto 0.75rem;
}
.caught-up h2 { margin-top: 0; }
.caught-next { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.75rem; justify-items: center; }
.caught-next li { margin: 0; }
@media (max-width: 39.99rem) {
html:has(.brief-stack) { scroll-snap-type: y proximity; scroll-padding-top: 0.75rem; }
.brief-stack > li { min-height: calc(100svh - 1.5rem); scroll-snap-align: start; }
.brief-stack > li.caught-up { min-height: 0; }
.brief-head { margin-bottom: 1rem; }
}
@media (min-width: 40rem) {
.brief-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brief-stack > li { min-height: 26rem; }
.brief-stack > li.caught-up { grid-column: 1 / -1; min-height: 0; }
.story-card.brief .card-figure.len-s { font-size: clamp(4.5rem, 2rem + 6vw, 7rem); }
.story-card.brief .card-figure.len-m { font-size: clamp(3.75rem, 1.8rem + 4.5vw, 5.5rem); }
.story-card.brief .card-figure.len-l { font-size: clamp(2.75rem, 1.4rem + 3vw, 4rem); }
}
.quiz { display: grid; gap: 1.25rem; }
.question {
border: 1px solid var(--rule);
background: var(--surface);
border-radius: var(--radius);
padding: 1rem 1.1rem;
margin: 0;
min-width: 0;
}
.question legend {
float: left; width: 100%;
display: flex; gap: 0.6rem; align-items: flex-start;
padding: 0; margin: 0 0 0.35rem;
font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.35;
}
.question legend + * { clear: both; }
.q-n {
display: inline-grid; place-items: center; flex: none;
width: 1.7rem; height: 1.7rem; margin-top: 0.05rem;
border-radius: 50%;
background: var(--btn-bg); color: var(--btn-ink);
font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
}
.option {
display: flex;
gap: 0.6rem;
align-items: flex-start;
padding: 0.55rem 0.7rem;
margin: 0.4rem 0 0;
border: 1px solid var(--field-edge);
border-radius: var(--radius);
cursor: pointer;
font-family: var(--sans);
}
.option input { margin-top: 0.25em; accent-color: var(--btn-bg); }
.option.is-answer { border-width: 2px; border-color: var(--link); }
.option.is-wrong { border-style: dashed; }
.option.is-right span::after, .option.is-answer span::after { content: " ✓"; font-weight: 700; }
.option.is-wrong span::after { content: " ✗"; }
.verdict { font-family: var(--sans); font-weight: 700; margin: 0.6rem 0 0; min-height: 1.2em; }
.answer { margin-top: 0.4rem; font-size: 0.95rem; }
.answer summary { cursor: pointer; font-family: var(--sans); font-size: 0.875rem; color: var(--link); }
.quiz-end { text-align: center; padding: 1rem 0 0; }
.score { font-family: var(--serif); font-weight: 700; font-size: 2rem; margin: 0; }
.brief-also { margin-top: 2rem; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); }
main > .fp-page { max-width: 72rem; }
.fp-page > * { max-width: none; }
.fp-page p, .fp-page li { max-width: var(--measure); }
.fp-hero { display: grid; gap: 2rem; }
.fp-hero h1 { margin-top: 0; }
.fp-offer { margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 0 0 var(--radius) var(--radius); }
.fp-offer p { margin: 0; }
.fp-offer-price { font-family: var(--sans); }
.fp-offer-cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 0.9rem 0 0.7rem !important; font-family: var(--sans); }
.fp-offer-terms { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-2); }
.fp-specimen { margin: 0; padding: 1rem 1.25rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.fp-specimen-cap { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; padding: 0; border: 0; }
.fp-page .eyebrow { margin-left: 0; margin-right: 0; }
.fp-specimen .fp-item { margin-top: 0.6rem; }
.fp-facts dl { margin: 0; display: grid; gap: 0.9rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 0 0 var(--radius) var(--radius); }
.fp-facts dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fp-facts dd { margin: 0.15rem 0 0; font-family: var(--serif); font-size: 1.05rem; }
.fp-section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.fp-section > h2, .fp-two h2 { margin-top: 0; }
.fp-parts { list-style: none; counter-reset: part; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.fp-page .fp-parts li { counter-increment: part; margin: 0; max-width: none; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 0 0 var(--radius) var(--radius); }
.fp-parts li::before { content: counter(part, decimal-leading-zero); font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--signal); }
.fp-parts strong { font-family: var(--serif); font-size: 1.05rem; }
.fp-parts span { font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.fp-two { display: grid; gap: 2rem; }
.fp-two ul { padding-left: 1.1rem; }
.fp-two li { margin-bottom: 0.45rem; }
.fp-plans { margin: 1rem 0 0; }
.fp-plans h3 { margin-top: 0; }
.fp-join { display: grid; gap: 1.5rem; }
.fp-join-side .fp-offer-cta { margin-top: 0 !important; }
.fp-issues { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.fp-page .fp-issues li { margin: 0; max-width: none; }
.fp-issues a { height: 100%; display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.fp-issues a:hover { border-color: var(--link); }
.fp-issues a:hover .fp-issue-title { text-decoration: underline; }
.fp-issue-week { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fp-issue-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.fp-issue-n { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); }
.fp-item { margin-top: 2.25rem; padding-top: 1rem; border-top: 3px solid var(--gc, var(--rule-strong)); }
.fp-kicker { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal); margin: 0 0 0.6rem; }
.fp-label { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.3rem; }
.fp-said > .fp-label:first-child, .fp-doc > .fp-label:first-child, .fp-difference .fp-label { margin-top: 0; }
main h2.fp-claim { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); line-height: 1.3; margin: 0; }
.fp-compare { display: grid; gap: 1.25rem; }
.fp-spread, .fp-where, .fp-note { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-2); margin: 0.45rem 0 0; }
.fp-quote { margin: 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--rule-strong); font-size: 1.08rem; }
.fp-quote p, .fp-finding, .fp-limits { margin: 0; }
.fp-explain p { margin: 0 0 0.6rem; font-size: 1.02rem; }
.fp-explain p:last-child { margin-bottom: 0; }
.fp-item .gradebadge { margin-top: 0.6rem; }
.fp-verdict { display: grid; gap: 1rem; margin-top: 1.25rem; }
.fp-difference { padding: 0.8rem 1rem; background: var(--bg-alt); border-left: 3px solid var(--gc, var(--brand)); border-radius: 0 var(--radius) var(--radius) 0; }
.fp-finding { font-weight: 600; font-size: 1.08rem; }
.fp-locked, .fp-join-note { font-family: var(--sans); font-size: 0.925rem; background: var(--bg-alt); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0; }
.fp-locked { color: var(--ink-2); }
.fp-join-note { border-left: 3px solid var(--brand); margin-top: 1rem; }
.fp-intro { margin-top: 1.5rem; }
.fp-issue h1 { max-width: 26ch; }
@media (min-width: 56rem) {
.fp-issue .fp-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.fp-issue .fp-verdict { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
}
@media (min-width: 64rem) {
.fp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3.5rem; align-items: start; }
.fp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
.fp-join { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
}
.band-more { margin-top: 0.6rem !important; font-size: 0.95rem; }
.local-price { margin-top: 1.25rem; }
.local-price strong { font-family: var(--mono); font-weight: 600; }