@font-face { font-family: 'Besley'; src: url('/assets/fonts/besley-700.a8912ec40d.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('/assets/fonts/besley-500-italic.5e304fe998.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson Next'; src: url('/assets/fonts/atkinson-next-400.5cb240a4d9.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Next'; src: url('/assets/fonts/atkinson-next-400-italic.59bc0e9656.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson Next'; src: url('/assets/fonts/atkinson-next-700.0dbe07ed76.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Mono'; src: url('/assets/fonts/atkinson-mono-500.00eeea882a.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Besley Fallback'; src: local('Georgia'); size-adjust: 104%; ascent-override: 88%; descent-override: 24%; }
@font-face { font-family: 'Atkinson Fallback'; src: local('Verdana'), local('Arial'); size-adjust: 93%; ascent-override: 98%; descent-override: 24%; }
:root {
--paper: #f2ece1;
--paper-deep: #e8dfcf;
--card: #fbf8f2;
--chart-paper: #fdfbf7;
--ink: #1c2530;
--ink-2: #4a535c;
--ink-3: #5d6166;
--accent: #a4442a;
--accent-strong: #86351f;
--accent-wash: #f0d9cb;
--margin-rule: #c2563a;
--rule: rgb(28 37 48 / .13);
--rule-strong: rgb(28 37 48 / .3);
--blue-rule: rgb(84 120 156 / .22);
--tape: rgb(222 205 170 / .72);
--band: #1c2530;
--band-ink: #f2ece1;
--band-ink-2: #c9c2b4;
--band-accent: #e8916c;
--shadow-card: 0 1px 0 rgb(28 37 48 / .05), 0 14px 28px -22px rgb(28 37 48 / .45);
--shadow-lift: 0 2px 0 rgb(28 37 48 / .05), 0 26px 40px -24px rgb(28 37 48 / .5);
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .14 0 0 0 0 .19 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3.5c2 0 2-2.5 4-2.5s2 2.5 4 2.5 2-2.5 4-2.5 2 2.5 4 2.5' fill='none' stroke='%23a4442a' stroke-width='1.6'/%3E%3C/svg%3E");
--font-display: 'Besley', 'Besley Fallback', Georgia, serif;
--font-body: 'Atkinson Next', 'Atkinson Fallback', Verdana, sans-serif;
--font-mono: 'Atkinson Mono', ui-monospace, Consolas, monospace;
--step--2: .75rem;
--step--1: .9rem;
--step-0: 1.125rem;
--step-1: 1.406rem;
--step-2: 1.758rem;
--step-3: 2.197rem;
--step-4: clamp(2.2rem, 1.6rem + 2.6vw, 2.747rem);
--step-5: clamp(2.4rem, 1.5rem + 3.6vw, 3.6rem);
--step-6: clamp(2.7rem, 1.4rem + 5.4vw, 5.4rem);
--leading: 1.7;
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem;
--gutter: clamp(1rem, 4vw, 2.5rem);
--measure: 42rem;
--radius: 3px;
--dur-1: 160ms; --dur-2: 320ms; --dur-3: 900ms;
--ease-out: cubic-bezier(.2, .7, .2, 1);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #15130f; --paper-deep: #1c1914; --card: #211d18; --chart-paper: #1f1b16;
--ink: #ede5d6; --ink-2: #bfb5a4; --ink-3: #a89e8d;
--accent: #e8916c; --accent-strong: #f4ac8c; --accent-wash: #3a2219; --margin-rule: #b4583d;
--rule: rgb(237 229 214 / .12); --rule-strong: rgb(237 229 214 / .26); --blue-rule: rgb(130 165 200 / .14);
--tape: rgb(120 105 80 / .55);
--band: #0c0b09; --band-ink: #ede5d6; --band-ink-2: #bfb5a4; --band-accent: #e8916c;
--shadow-card: 0 1px 0 rgb(0 0 0 / .4), 0 16px 30px -22px rgb(0 0 0 / .9);
--shadow-lift: 0 2px 0 rgb(0 0 0 / .4), 0 28px 40px -22px rgb(0 0 0 / .95);
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3.5c2 0 2-2.5 4-2.5s2 2.5 4 2.5 2-2.5 4-2.5 2 2.5 4 2.5' fill='none' stroke='%23e8916c' stroke-width='1.6'/%3E%3C/svg%3E");
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--paper: #15130f; --paper-deep: #1c1914; --card: #211d18; --chart-paper: #1f1b16;
--ink: #ede5d6; --ink-2: #bfb5a4; --ink-3: #a89e8d;
--accent: #e8916c; --accent-strong: #f4ac8c; --accent-wash: #3a2219; --margin-rule: #b4583d;
--rule: rgb(237 229 214 / .12); --rule-strong: rgb(237 229 214 / .26); --blue-rule: rgb(130 165 200 / .14);
--tape: rgb(120 105 80 / .55);
--band: #0c0b09; --band-ink: #ede5d6; --band-ink-2: #bfb5a4; --band-accent: #e8916c;
--shadow-card: 0 1px 0 rgb(0 0 0 / .4), 0 16px 30px -22px rgb(0 0 0 / .9);
--shadow-lift: 0 2px 0 rgb(0 0 0 / .4), 0 28px 40px -22px rgb(0 0 0 / .95);
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3.5c2 0 2-2.5 4-2.5s2 2.5 4 2.5 2-2.5 4-2.5 2 2.5 4 2.5' fill='none' stroke='%23e8916c' stroke-width='1.6'/%3E%3C/svg%3E");
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--sp-5); }
body {
margin: 0;
background: var(--grain), var(--paper);
color: var(--ink);
font: 400 var(--step-0)/var(--leading) var(--font-body);
font-kerning: normal;
overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--accent-wash); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; }
.label, .kicker {
font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 0;
}
.kicker { font-size: .8rem; }
.skip { position: absolute; left: var(--sp-4); top: -4rem; z-index: 10; background: var(--ink); color: var(--paper); padding: var(--sp-2) var(--sp-4); }
.skip:focus { top: var(--sp-4); }
.section-label { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); margin-bottom: var(--sp-5); }
.btn {
display: inline-flex; align-items: center; gap: .6rem;
font: 700 var(--step--1)/1 var(--font-body); text-decoration: none;
color: var(--paper); background: var(--ink); padding: .95rem 1.25rem; border-radius: var(--radius);
transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-out);
}
.btn .i-arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover { background: var(--accent-strong); color: #fff; }
.btn:hover .i-arrow { transform: translateX(4px); }
.more {
display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--step--1);
text-decoration: none; color: var(--ink); padding-bottom: 4px;
background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1.5px no-repeat;
}
.more:hover { background: var(--squiggle) 0 100% / 16px 6px repeat-x; }
.more .i-arrow { transition: transform var(--dur-2) var(--ease-out); }
.more:hover .i-arrow { transform: translateX(4px); }
.masthead { border-bottom: 1px solid var(--rule-strong); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; padding-block: var(--sp-2); }
.brand .mark { width: 40px; height: 20px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.mark__dot { fill: var(--accent); transition: transform var(--dur-2) var(--ease-out); transform-origin: 39.6px 9.4px; }
.brand:hover .mark { transform: rotate(-6deg); }
.brand:hover .mark__dot { transform: scale(1.35); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; }
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem); font-size: var(--step--1); }
.nav a {
color: var(--ink); text-decoration: none; padding-block: .6rem;
background: var(--squiggle) 0 88% / 0% 6px repeat-x;
transition: background-size var(--dur-2) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 16px 6px; }
.nav a[aria-current="page"] { font-weight: 700; }
.theme-toggle {
display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: -.2rem;
border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1);
}
.theme-toggle:hover { transform: rotate(-18deg); border-color: var(--accent); }
.theme-toggle[hidden] { display: none; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .i-sun { display: block; }
:root:not([data-theme="light"]) .i-moon { display: none; }
}
@media (max-width: 639px) { .nav__wide { display: none; } }
.hero {
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7);
padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); align-items: center;
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: clamp(3rem, 6vw, 6rem); } }
.hero__text { display: grid; gap: var(--sp-5); }
.hero__title { font-size: var(--step-6); line-height: .98; letter-spacing: -.03em; max-width: 13ch; }
.hero__lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 34rem; }
.hero__pub { font-size: var(--step--1); color: var(--ink-2); max-width: 34rem; padding-left: var(--sp-4); border-left: 2px solid var(--margin-rule); }
.hero__pub a { color: var(--ink); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.hero__pub a:hover { text-decoration-style: wavy; }
.tally { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); margin: var(--sp-2) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--rule-strong); max-width: 34rem; }
.tally div { display: grid; gap: .15rem; }
.tally dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.tally dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1; }
.chart { justify-self: center; width: min(100%, 25rem); }
.chart__card {
position: relative; background: var(--chart-paper); border: 1px solid var(--rule-strong);
padding: 2.4rem 1.1rem 1.4rem; transform: rotate(1.4deg); box-shadow: var(--shadow-lift);
--chart-max: clamp(4.6rem, 8vw, 8.2rem);
}
.chart__card::before {
content: ""; position: absolute; top: -13px; left: 50%; width: 6.5rem; height: 1.7rem;
transform: translateX(-50%) rotate(-3deg); background: var(--tape);
box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
.chart__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.chart__row { display: grid; grid-template-columns: 1.4rem 1fr 2.9rem; align-items: center; column-gap: .4rem; }
.chart__l {
font-family: var(--font-display); font-weight: 700; color: var(--ink); text-align: center; white-space: nowrap;
font-size: max(.58rem, calc(var(--size) * var(--chart-max))); line-height: 1.02;
letter-spacing: .3em; padding-left: .3em;
}
.chart__n, .chart__a { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); }
.chart__a { text-align: right; }
.chart__row--fine { margin-top: .5rem; padding-top: .7rem; border-top: 1.5px solid var(--margin-rule); }
.chart__row--fine .chart__l { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; padding-left: 0; text-transform: uppercase; font-size: .6rem; }
.chart__cap { margin-top: var(--sp-5); text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--ink-2); font-size: var(--step--1); }
@media (prefers-reduced-motion: no-preference) {
.chart__l { animation: focus-in var(--dur-3) var(--ease-out) backwards; animation-delay: calc(180ms + var(--i) * 120ms); }
@keyframes focus-in { from { filter: blur(calc(2px + var(--i) * 1.1px)); opacity: .55; } }
@media (hover: hover) {
.chart .chart__l { transition: filter var(--dur-2) var(--ease-out); }
.chart:hover .chart__l { filter: blur(2.2px); }
.chart .chart__row:hover .chart__l { filter: none; }
}
}
.chart--blur .chart__row:nth-child(3) .chart__l { filter: blur(1.6px); }
.chart--blur .chart__row:nth-child(4) .chart__l { filter: blur(2.6px); }
.chart--blur .chart__row:nth-child(5) .chart__l { filter: blur(3px); }
.chart--blur .chart__row:nth-child(6) .chart__l { filter: blur(3.4px); }
.chart--blur .chart__row:nth-child(7) .chart__l { filter: blur(1.4px); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule-strong); }
.section-head h2 { font-size: var(--step-3); }
.section-head__note { color: var(--ink-2); font-size: var(--step--1); }
.latest { padding-block: var(--sp-7) var(--sp-8); }
.latest__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 980px) { .latest__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } }
.latest__list { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) and (max-width: 979px) { .latest__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) {
.latest__list { gap: var(--sp-3); }
.latest__list .card { padding: var(--sp-3) var(--sp-5); gap: .3rem; }
.latest__list .card__dek, .latest__list .card__foot { display: none; }
.latest__list .card__meta { justify-content: flex-start; gap: var(--sp-4); }
}
.lead {
position: relative; background: var(--card); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-card);
padding: var(--sp-5) clamp(1.25rem, 3vw, 2.25rem) var(--sp-5);
background-image: linear-gradient(var(--blue-rule) 1px, transparent 1px);
background-size: 100% 2rem; background-position: 0 calc(100% - 1rem);
display: grid; gap: var(--sp-4);
}
.lead::before { content: ""; position: absolute; left: 0; right: 0; top: 4.4rem; height: 1.5px; background: var(--margin-rule); }
.lead .card__meta { min-height: 2.6rem; align-items: center; }
.lead__title { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.02em; margin-top: var(--sp-3); }
.lead__title a { text-decoration: none; background: var(--squiggle) 0 100% / 0% 6px repeat-x; transition: background-size .5s var(--ease-out); padding-bottom: 4px; }
.lead__title a::after { content: ""; position: absolute; inset: 0; }
.lead:hover .lead__title a { background-size: 16px 6px; }
.lead__answer { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--paper); border-left: 3px solid var(--accent); }
.lead__answer p:last-child { font-size: var(--step-0); line-height: 1.6; }
.lead__foot { color: var(--ink-3); font-size: var(--step--2); }
.card {
position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-card);
padding: var(--sp-4) var(--sp-5) var(--sp-4);
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; color: var(--ink-3); margin: 0; }
.card__cat { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; }
.card__title { font-size: var(--step-1); line-height: 1.18; }
.card__title a { text-decoration: none; background: var(--squiggle) 0 100% / 0% 6px repeat-x; padding-bottom: 3px; transition: background-size .45s var(--ease-out); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__dek { font-size: var(--step--1); line-height: 1.55; color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); color: var(--ink-3); font-size: var(--step--2); }
.card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
.card:nth-child(even):hover { transform: translateY(-4px) rotate(.5deg); }
.card:hover .card__title a { background-size: 16px 6px; }
.card:focus-within { border-color: var(--accent); }
.card-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.drawers { background: var(--paper-deep); border-block: 1px solid var(--rule-strong); padding-block: var(--sp-8) var(--sp-8); }
.drawers__grid { list-style: none; margin: 0; padding: var(--sp-6) 0 0; display: grid; gap: var(--sp-7) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.drawer a {
position: relative; display: grid; gap: var(--sp-2); min-height: 8.5rem; text-decoration: none; color: inherit;
background: var(--card); border: 1px solid var(--rule-strong); border-radius: 0 var(--radius) var(--radius) var(--radius);
padding: var(--sp-5) var(--sp-5) var(--sp-4); box-shadow: var(--shadow-card);
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.drawer__tab {
position: absolute; bottom: 100%; left: calc(-1px + var(--tab) * 18%);
background: var(--card); border: 1px solid var(--rule-strong); border-bottom: 0; border-radius: 7px 7px 0 0;
padding: .45rem .9rem .3rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); line-height: 1.2;
max-width: calc(100% + 2px - var(--tab) * 18%);
transition: color var(--dur-1);
}
.drawer__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--card); }
.drawer__count { color: var(--accent); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; }
.drawer__blurb { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.drawer a:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }
.drawer a:hover .drawer__tab { color: var(--accent); }
.spotlight { background: var(--band); color: var(--band-ink); padding-block: var(--sp-8); }
.spotlight__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .spotlight__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--sp-8); } .spotlight__list { grid-column: 1 / -1; } }
.spotlight .kicker { color: var(--band-accent); }
.spotlight h2 { font-size: var(--step-5); line-height: 1; letter-spacing: -.025em; margin: var(--sp-3) 0 var(--sp-4); max-width: 14ch; }
.spotlight__text > p:not(.kicker) { color: var(--band-ink-2); font-size: var(--step-0); max-width: 34rem; margin-bottom: var(--sp-5); }
.spotlight .btn { background: var(--band-ink); color: var(--band); }
.spotlight .btn:hover { background: var(--band-accent); color: var(--band); }
.spotlight__art { color: var(--band-ink); justify-self: center; width: min(100%, 28rem); }
.spotlight__art svg { width: 100%; height: auto; display: block; }
.spotlight__art .led { fill: var(--band-accent); }
.spotlight__art .waves { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
.spotlight__art .led { animation: led 2.8s ease-in-out infinite; }
@keyframes led { 50% { opacity: .25; } }
.spotlight__art .waves path { animation: wave 2.8s ease-in-out infinite; }
.spotlight__art .waves path:last-child { animation-delay: .35s; }
@keyframes wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
}
.spotlight__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; border-top: 1px solid rgb(242 236 225 / .22); }
@media (min-width: 760px) { .spotlight__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
.spotlight__list a { display: grid; gap: .3rem; padding: var(--sp-4) 0; border-bottom: 1px solid rgb(242 236 225 / .22); text-decoration: none; color: var(--band-ink); }
.spotlight__t { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.spotlight__list .mono { color: var(--band-ink-2); font-size: var(--step--2); }
.spotlight__list a:hover .spotlight__t { color: var(--band-accent); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .55rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-3); }
.crumbs li { display: inline-flex; gap: .55rem; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post { padding-bottom: var(--sp-7); }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-6); }
.post-head, .post-body { width: 100%; max-width: var(--measure); margin-inline: auto; }
.post-head { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.post-head__cat a { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); text-decoration: none; }
.post-head__cat a:hover { text-decoration: underline; }
.post-head__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -.025em; max-width: 22ch; }
.post-head__dek { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--step-1); line-height: 1.4; color: var(--ink-2); max-width: 38rem; }
.byline { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .03em; color: var(--ink-3); padding-top: var(--sp-4); border-top: 1px solid var(--rule-strong); }
.byline > span + span::before { content: "·"; margin-right: 1.1rem; color: var(--accent); }
.byline__who { color: var(--ink); }
@media (max-width: 759px) { .byline__who { flex-basis: 100%; } .byline__who + span::before { content: none; } }
.byline__who a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .2em; }
@media (min-width: 760px) {
.post-body { border-left: 1px solid var(--margin-rule); padding-left: clamp(1.5rem, 3vw, 2.75rem); max-width: calc(var(--measure) + 2.75rem); }
.post-head { max-width: calc(var(--measure) + 2.75rem); padding-left: clamp(1.5rem, 3vw, 2.75rem); }
}
@media (min-width: 1240px) {
.post-grid { grid-template-columns: 12.5rem minmax(0, calc(var(--measure) + 2.75rem)) 15rem; column-gap: 2.75rem; justify-content: center; }
.post-head { grid-column: 2 / 4; max-width: none; margin: 0; }
.toc { grid-column: 1; grid-row: 2; position: sticky; top: var(--sp-5); align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; padding-top: .3rem; }
.post-body { grid-column: 2; grid-row: 2; margin: 0; }
.toc-m { display: none; }
}
@media (max-width: 1239px) { .toc { display: none; } }
.toc .label { color: var(--ink-3); margin-bottom: var(--sp-3); }
.toc ol, .toc-m ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: .15rem; }
.toc li, .toc-m li { counter-increment: toc; }
.toc a, .toc-m a { display: grid; grid-template-columns: 1.9rem 1fr; padding: .3rem 0; font-size: .86rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color var(--dur-1); }
.toc a::before, .toc-m a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; padding-top: .1rem; color: var(--ink-3); }
.toc a:hover, .toc-m a:hover { color: var(--accent); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.toc a[aria-current="true"]::before { color: var(--accent); }
.toc-m { margin: var(--sp-5) 0 0; border: 1px solid var(--rule-strong); background: var(--card); }
.toc-m summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; font-size: var(--step--1); display: flex; justify-content: space-between; gap: var(--sp-3); list-style-position: inside; }
.toc-m summary .mono { color: var(--ink-3); font-size: var(--step--2); font-weight: 400; }
.toc-m ol { padding: 0 1rem .8rem; }
.short-answer {
position: relative; background: var(--card); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-card);
padding: 1.6rem clamp(1.1rem, 3vw, 1.75rem) 1.4rem;
}
.short-answer::before {
content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 9px;
background: radial-gradient(circle at 7px 0, var(--paper) 4.5px, transparent 5px) 0 0 / 14px 9px repeat-x;
}
.short-answer__top { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--rule-strong); }
.short-answer__top .rx { color: var(--accent); flex: none; }
.short-answer__top h2 { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.short-answer__text { font-size: var(--step-1); line-height: 1.5; }
.short-answer__text a { text-decoration-color: var(--accent); text-underline-offset: .2em; }
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin: var(--sp-5) 0 0; border: 1px solid var(--rule-strong); background: var(--card); }
.readout { display: flex; flex-direction: column-reverse; gap: .3rem; padding: var(--sp-4); border-right: 1px solid var(--rule); }
.readout:last-child { border-right: 0; }
.readout { min-width: 0; }
.readout dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.4vw, var(--step-3)); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.prose { counter-reset: sec; margin-top: var(--sp-6); }
.prose > * + * { margin-top: 1.15em; }
.prose p, .prose li { font-size: var(--step-0); line-height: var(--leading); }
.prose h2 { position: relative; counter-increment: sec; font-size: var(--step-3); line-height: 1.12; margin-top: 2.4em; scroll-margin-top: var(--sp-5); }
.prose h2::before {
content: counter(sec, decimal-leading-zero); display: block; margin-bottom: .55rem;
font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .1em; color: var(--accent);
}
@media (min-width: 760px) {
.post-body .prose h2::before { position: absolute; right: calc(100% + clamp(1.5rem, 3vw, 2.75rem) + .7rem); top: .55em; margin: 0; }
}
.prose h3 { font-size: var(--step-1); line-height: 1.2; margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: .75em; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a, .faq a, .fineprint a {
color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent);
text-decoration-thickness: .085em; text-underline-offset: .22em;
transition: color var(--dur-1), text-decoration-color var(--dur-1);
}
.prose a:hover, .faq a:hover { color: var(--accent-strong); text-decoration-style: wavy; text-decoration-thickness: .075em; }
.prose ul, .prose ol { padding-left: 1.6rem; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.3rem; top: .82em; width: .7rem; height: 2px; background: var(--accent); }
.prose ol { list-style: none; counter-reset: li; }
.prose ol > li { position: relative; counter-increment: li; }
.prose ol > li::before { content: counter(li) "."; position: absolute; left: -1.75rem; width: 1.4rem; text-align: right; font-family: var(--font-mono); font-size: .88em; font-weight: 500; color: var(--accent); top: .12em; }
.prose li + li { margin-top: .55em; }
.prose hr { border: 0; border-top: 1px solid var(--rule-strong); margin-block: var(--sp-6); }
.prose blockquote { margin-inline: 0; padding-left: var(--sp-5); border-left: 3px solid var(--rule-strong); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink-2); }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--rule-strong); margin-block: 1.8em !important; }
.table-wrap:focus-visible { outline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.prose th { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); text-align: left; vertical-align: bottom; padding: .8rem .9rem .6rem; border-bottom: 2px solid var(--ink); background: var(--paper); }
.prose td { padding: .72rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; min-width: 7rem; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { font-weight: 700; }
@media (hover: hover) { .prose tbody tr:hover td { background: var(--paper); } }
.note { position: relative; padding: .95rem 1.1rem; background: var(--card); border-left: 3px solid var(--accent); }
.note p, .prose .note p { font-size: var(--step--1); line-height: 1.6; }
.note p + p { margin-top: .6em; }
.note > p:first-child > strong:first-child { display: block; margin-bottom: .2rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.note--alert { border: 1.5px solid var(--accent); border-left-width: 5px; background: var(--accent-wash); }
.note--alert > p:first-child > strong:first-child { color: var(--accent-strong); }
@media (min-width: 1240px) {
.prose .note:not(.note--alert) {
float: right; clear: right; width: 15rem; margin: .35rem -17.75rem 1rem 1.5rem;
padding: .2rem 0 0 0; background: none; border-left: 0; border-top: 2px solid var(--accent);
}
.prose .note:not(.note--alert)::before {
content: ""; position: absolute; left: -2.1rem; top: -.55rem; width: 1.6rem; height: 1rem;
background: var(--squiggle) 0 50% / 16px 6px repeat-x; opacity: .9;
}
.prose .note:not(.note--alert) p { color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.prose .note:not(.note--alert) > p:first-child > strong:first-child { margin-top: .55rem; }
}
.verdict { background: var(--card); border: 1px solid var(--ink); outline: 1px solid var(--rule-strong); outline-offset: -6px; padding: 1.4rem 1.5rem; }
.verdict__label { display: block; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: .4rem; }
.verdict p { font-size: var(--step--1); }
.verdict p + p { margin-top: .6em; }
.faq, .sources { margin-top: var(--sp-8); }
.faq > h2, .sources > h2 { font-size: var(--step-3); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--ink); scroll-margin-top: var(--sp-5); }
.faq__item { display: grid; gap: .5rem; padding: var(--sp-5) 0; border-bottom: 1px solid var(--rule-strong); }
.faq__item h3 { font-size: var(--step-1); line-height: 1.25; display: grid; grid-template-columns: 1.9rem 1fr; }
.faq__item h3::before { content: "Q."; font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; color: var(--accent); padding-top: .25rem; }
.faq__a { padding-left: 1.9rem; color: var(--ink-2); }
.faq__a p { font-size: var(--step-0); line-height: 1.65; }
.faq__a p + p { margin-top: .7em; }
.sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources li { counter-increment: src; border-bottom: 1px solid var(--rule); }
.sources a { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .2rem; padding: .8rem 0; text-decoration: none; color: var(--ink); }
.sources a::before { content: "[" counter(src) "]"; grid-row: span 2; font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); padding-top: .25rem; }
.sources__pub { font-weight: 700; font-size: var(--step--1); }
.sources__t { grid-column: 2; font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.sources a:hover .sources__pub { text-decoration: underline wavy var(--accent); text-underline-offset: .2em; }
.fineprint { margin-top: var(--sp-6); font-size: .84rem; line-height: 1.6; color: var(--ink-3); font-style: italic; }
.bench-card {
margin-top: var(--sp-6); padding: 1.5rem 1.6rem; background: var(--card);
border: 1px solid var(--ink); outline: 1px solid var(--rule-strong); outline-offset: -7px;
display: grid; gap: .5rem;
}
.bench-card p:last-child { font-size: var(--step-0); line-height: 1.6; }
.bench-card a { font-weight: 700; color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .22em; }
.bench-card a:hover { text-decoration-style: wavy; color: var(--accent-strong); }
.related { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--rule-strong); }
.related h2 { font-size: var(--step-3); margin-bottom: var(--sp-5); }
.topic-head { display: grid; gap: var(--sp-4); padding-block: var(--sp-6) var(--sp-7); }
.topic-head__title { font-size: var(--step-6); line-height: .98; letter-spacing: -.03em; }
.topic-head__intro { display: grid; gap: var(--sp-4); max-width: 40rem; padding-left: var(--sp-5); border-left: 2px solid var(--margin-rule); }
.topic-head__intro p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.topic-head__intro a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em; }
.topic-list { padding-bottom: var(--sp-7); }
.other-topics { padding-block: var(--sp-6) var(--sp-8); border-top: 1px solid var(--rule-strong); }
.other-topics ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.other-topics a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--rule-strong); border-radius: 7px 7px 0 0; border-bottom-color: transparent; background: var(--card); font-family: var(--font-display); font-weight: 700; text-decoration: none; color: var(--ink); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.other-topics a:hover { transform: translateY(-4px); color: var(--accent); }
.topics-index { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); padding-bottom: var(--sp-8); }
.topics-index__drawer { display: grid; gap: var(--sp-3); align-content: start; background: var(--card); border: 1px solid var(--rule-strong); padding: var(--sp-5); box-shadow: var(--shadow-card); }
.topics-index__drawer h2 { font-size: var(--step-2); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.topics-index__drawer h2 a { text-decoration: none; }
.topics-index__drawer h2 a:hover { color: var(--accent); }
.topics-index__drawer h2 .mono { color: var(--accent); font-weight: 400; }
.topics-index__drawer > p { color: var(--ink-2); font-size: var(--step--1); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: var(--sp-4); row-gap: .15rem; padding: .7rem 0; border-bottom: 1px dashed var(--rule-strong); align-items: baseline; }
.ledger__row time { color: var(--ink-3); font-size: var(--step--2); }
.ledger__row a { font-weight: 700; font-size: var(--step--1); line-height: 1.4; text-decoration: none; color: var(--ink); }
.ledger__row a:hover { color: var(--accent-strong); text-decoration: underline wavy var(--accent); text-underline-offset: .22em; }
.ledger__cat { display: none; }
.ledger--plain .ledger__row { grid-template-columns: 1fr; }
.index-cols { display: grid; gap: var(--sp-7) var(--sp-7); grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); padding-bottom: var(--sp-8); }
.index-cols h2 { font-size: var(--step-2); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--ink); }
.index-cols h2 a { text-decoration: none; }
.index-cols h2 a:hover { color: var(--accent); }
.about { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-8); }
@media (min-width: 1000px) { .about { grid-template-columns: minmax(0, var(--measure)) 19rem; justify-content: space-between; align-items: start; } }
.about__body { margin-top: 0; }
.about__body > h2:first-child { margin-top: 0; }
.about__card { position: sticky; top: var(--sp-5); background: var(--card); border: 1px solid var(--ink); outline: 1px solid var(--rule-strong); outline-offset: -7px; padding: var(--sp-5); }
.about__card dl { margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.about__card dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.about__card dd { margin: .1rem 0 0; font-weight: 700; font-size: var(--step--1); }
.about__card a { color: var(--ink); text-decoration-color: var(--accent); }
.lost { display: grid; gap: var(--sp-7); padding-block: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .lost { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.lost__text { display: grid; gap: var(--sp-5); }
.lost__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.colophon { margin-top: var(--sp-7); border-top: 3px double var(--rule-strong); background: var(--paper-deep); padding-top: var(--sp-7); }
.is-home .colophon, .is-topic .colophon, .is-topics .colophon, .is-index .colophon, .is-about .colophon { margin-top: 0; }
.colophon__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .colophon__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.colophon__line { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; max-width: 26rem; margin-top: var(--sp-3); }
.colophon__nav .label { color: var(--ink-3); margin-bottom: var(--sp-3); }
.colophon__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.colophon__nav a { display: inline-block; padding: .3rem 0; font-size: var(--step--1); text-decoration: none; color: var(--ink); }
.colophon__nav a:hover { color: var(--accent-strong); text-decoration: underline wavy var(--accent); text-underline-offset: .22em; }
.colophon__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-7); padding-block: var(--sp-5); border-top: 1px solid var(--rule-strong); font-size: .82rem; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.card:hover, .drawer a:hover, .other-topics a:hover { transform: none; }
}
@media print {
body { background: #fff; color: #000; }
.masthead nav, .toc, .toc-m, .related, .bench-card, .colophon, .skip { display: none !important; }
.post-body { border: 0; padding: 0; }
.prose a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}