/* =============================================================================
Publication theme — the --pub-* token contract
=============================================================================
Light values are injected inline on at build time (see build.mjs) so
there is no flash of unthemed content. Dark values live here, keyed off
[data-theme="dark"], and must override the inline style — hence the extra
:root specificity on the dark block.
The source publication this was modelled on hardcoded data-theme="light" and
shipped no dark --pub-* values, so its dark mode left --pub-bg white. All 13
tokens flip here.
========================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
}
/* -----------------------------------------------------------------------------
Font fallback metrics
-----------------------------------------------------------------------------
size-adjust / ascent-override values match the webfont's metrics to Arial so
the fallback occupies identical space — zero layout shift on font swap.
Fonts themselves load once, via the Google in each template. The
source publication loaded them twice (render-blocking AND self-hosted
files); only one delivery path is used here.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107.1194%;
ascent-override: 90.4365%;
descent-override: 22.518%;
line-gap-override: 0%;
}
@font-face {
font-family: "Playfair Display Fallback";
src: local("Arial");
size-adjust: 101.3906%;
ascent-override: 106.716%;
descent-override: 24.7558%;
line-gap-override: 0%;
}
@font-face {
font-family: "JetBrains Mono Fallback";
src: local("Arial");
size-adjust: 134.5893%;
ascent-override: 75.7861%;
descent-override: 22.29%;
line-gap-override: 0%;
}
:root {
--font-body: Inter, "Inter Fallback", system-ui, sans-serif;
--font-display: "Playfair Display", "Playfair Display Fallback", Georgia, serif;
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
--measure: 68ch;
--shell: 1180px;
--gutter: clamp(1rem, 4vw, 2.5rem);
--radius: 6px;
--hairline: color-mix(in srgb, var(--pub-text) 14%, transparent);
}
/* -----------------------------------------------------------------------------
Reset + base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--pub-bg);
color: var(--pub-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
/* Wide content (ticker, tables) scrolls in its own container; the page never does */
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--pub-link);
text-decoration: underline;
text-decoration-color: var(--pub-link-underline);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
a:hover {
text-decoration-color: currentColor;
}
:focus-visible {
outline: 3px solid var(--pub-link);
outline-offset: 2px;
}
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: var(--gutter);
top: 0.5rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--pub-button-bg);
color: var(--pub-button-text);
border-radius: var(--radius);
}
/* -----------------------------------------------------------------------------
Topbar
-------------------------------------------------------------------------- */
.topbar {
background: var(--pub-topbar-bg);
color: var(--pub-topbar-text);
border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
padding-block: 1rem;
}
.masthead {
display: flex;
align-items: center;
gap: 0.75rem;
margin-right: auto;
text-decoration: none;
color: inherit;
}
.masthead__logo {
height: 40px;
width: auto;
}
.masthead__title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0;
}
.masthead__locality {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.7;
margin: 0.15rem 0 0;
}
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.25rem;
}
.nav a {
color: inherit;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
padding: 0.35rem 0;
border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
border-bottom-color: var(--pub-link-underline);
}
.nav a[data-external]::after {
content: "↗";
font-size: 0.75em;
margin-left: 0.25em;
opacity: 0.6;
}
/* -----------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
background: var(--pub-button-bg);
color: var(--pub-button-text);
font-weight: 700;
font-size: 0.9rem;
padding: 0.6rem 1.15rem;
border: 0;
border-radius: var(--radius);
text-decoration: none;
cursor: pointer;
font-family: inherit;
}
.btn:hover {
filter: brightness(1.08);
}
.btn--ghost {
background: transparent;
color: inherit;
border: 1px solid var(--hairline);
}
.theme-toggle {
background: transparent;
color: inherit;
border: 1px solid var(--hairline);
border-radius: var(--radius);
width: 2.25rem;
height: 2.25rem;
font-size: 1rem;
cursor: pointer;
line-height: 1;
}
/* -----------------------------------------------------------------------------
Ticker
-----------------------------------------------------------------------------
Two identical tracks scroll as one continuous loop. Motion is opt-out via
prefers-reduced-motion, where the strip becomes a static scrollable row.
-------------------------------------------------------------------------- */
.ticker {
background: var(--pub-ticker-bg);
color: var(--pub-ticker-text);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}
.ticker__label {
flex: none;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 0.6rem var(--gutter);
background: color-mix(in srgb, var(--pub-ticker-bg) 78%, #000);
z-index: 1;
}
.ticker__viewport {
overflow: hidden;
flex: 1 1 auto;
/* Load-bearing. A flex item defaults to min-width:auto, so this refuses to
shrink below the intrinsic width of the max-content track inside it —
which drags the whole page wider than the viewport on narrow screens. */
min-width: 0;
}
.ticker__track {
display: flex;
width: max-content;
animation: ticker-scroll 42s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
animation-play-state: paused;
}
.ticker__item {
flex: none;
padding: 0.6rem 1.5rem;
font-size: 0.85rem;
white-space: nowrap;
color: inherit;
text-decoration: none;
}
.ticker__item:hover {
color: var(--pub-ticker-hover);
}
.ticker__item::before {
content: "●";
font-size: 0.5em;
vertical-align: middle;
margin-right: 0.75rem;
opacity: 0.55;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ticker__track {
animation: none;
width: auto;
}
.ticker__viewport {
overflow-x: auto;
}
/* The duplicate set exists only to make the loop seamless; with no loop it is
just the same headlines twice. */
.ticker__item[data-clone] {
display: none;
}
}
/* -----------------------------------------------------------------------------
Layout regions
-------------------------------------------------------------------------- */
main {
padding-block: clamp(2rem, 6vw, 3.5rem);
min-height: 50vh;
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 1rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--pub-text);
}
/* Without this the trailing link breaks mid-phrase on narrow screens */
.section-head > a {
white-space: nowrap;
}
.section-head h2 {
font-family: var(--font-display);
font-size: clamp(1.35rem, 3vw, 1.75rem);
font-weight: 700;
margin: 0;
}
.kicker {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
opacity: 0.75;
margin: 0 0 0.5rem;
}
/* Lead story */
.lead {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding-bottom: clamp(2rem, 5vw, 3rem);
margin-bottom: clamp(2rem, 5vw, 3rem);
border-bottom: 1px solid var(--hairline);
}
/* Episodes frequently have no artwork; without this the second column stays
allocated and the headline is squeezed into half the width for nothing.
The cap is in rem, not ch — ch resolves against this container's 1rem
font-size, not the ~52px display type inside it, which would collapse the
headline to roughly a third of the intended measure. */
.lead--no-media {
grid-template-columns: 1fr;
max-width: 52rem;
}
.lead__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 5.5vw, 3.25rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 1rem;
}
.lead__title a {
color: inherit;
text-decoration: none;
}
.lead__title a:hover {
text-decoration: underline;
text-decoration-color: var(--pub-link-underline);
}
.lead__standfirst {
font-size: 1.1rem;
max-width: var(--measure);
margin: 0 0 1.5rem;
opacity: 0.88;
}
.lead__media img {
width: 100%;
border-radius: var(--radius);
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* Story grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 30vw, 300px), 1fr));
gap: clamp(1.5rem, 3vw, 2.25rem);
list-style: none;
margin: 0;
padding: 0;
}
.card {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.card__media img {
width: 100%;
border-radius: var(--radius);
aspect-ratio: 16 / 10;
object-fit: cover;
}
.card__title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.25;
margin: 0;
}
.card__title a {
color: inherit;
text-decoration: none;
}
.card__title a:hover {
text-decoration: underline;
text-decoration-color: var(--pub-link-underline);
}
.card__excerpt {
margin: 0;
font-size: 0.925rem;
opacity: 0.85;
}
.card__meta {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.65;
}
/* Subscribe CTA */
.cta {
margin-top: clamp(2.5rem, 6vw, 4rem);
padding: clamp(1.75rem, 4vw, 2.75rem);
border: 1px solid var(--hairline);
border-radius: var(--radius);
text-align: center;
}
.cta h2 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.5vw, 2rem);
margin: 0 0 0.5rem;
}
.cta p {
margin: 0 auto 1.5rem;
max-width: 46ch;
opacity: 0.85;
}
/* -----------------------------------------------------------------------------
Podcast page
-------------------------------------------------------------------------- */
.episode-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.episode {
display: grid;
grid-template-columns: 96px 1fr;
gap: 1.25rem;
padding-block: 1.5rem;
border-bottom: 1px solid var(--hairline);
}
.episode__art {
width: 96px;
height: 96px;
border-radius: var(--radius);
object-fit: cover;
background: var(--hairline);
}
.episode__title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 0.35rem;
}
.episode__desc {
margin: 0.5rem 0 0.85rem;
font-size: 0.925rem;
opacity: 0.85;
}
.episode audio {
width: 100%;
max-width: 460px;
}
.player {
padding: clamp(1.5rem, 4vw, 2.25rem);
border: 1px solid var(--hairline);
border-radius: var(--radius);
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.player__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 900;
line-height: 1.15;
margin: 0 0 0.75rem;
}
.subscribe-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.25rem;
}
/* Async states */
.state {
padding: 2.5rem 0;
text-align: center;
opacity: 0.7;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.state--error {
color: var(--pub-text);
opacity: 1;
}
[hidden] {
display: none !important;
}
/* -----------------------------------------------------------------------------
Subscribe landing page
-------------------------------------------------------------------------- */
.topbar--slim .topbar__inner {
justify-content: space-between;
}
.hero {
padding-block: clamp(2.5rem, 8vw, 5rem);
text-align: center;
}
.hero--repeat {
border-top: 1px solid var(--hairline);
}
.hero__inner {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__title {
font-family: var(--font-display);
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0.5rem 0 1rem;
max-width: 20ch;
}
.hero__title--small {
font-size: clamp(1.6rem, 4.5vw, 2.5rem);
}
.hero__subtitle {
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
line-height: 1.55;
opacity: 0.85;
margin: 0 0 2rem;
max-width: 52ch;
}
.btn--lg {
font-size: 1rem;
padding: 0.85rem 2rem;
}
/* Signup embed
------------
beehiiv's v3 loader injects the form asynchronously into .signup. Its height
is not known ahead of time, so min-height reserves a plausible amount rather
than locking a wrong one — the form settles into the space instead of shoving
the benefit cards down when it lands. */
.signup {
width: 100%;
max-width: 30rem;
margin-inline: auto;
/* Matches the height beehiiv's v3 form actually reports (350px + its wrapper).
Undersizing this is what makes the benefit cards jump downward when the
form lands, so it is worth keeping in step if the form design changes. */
min-height: 363px;
}
.signup iframe,
.signup > div {
max-width: 100%;
}
/* The embed paints its own light card and cannot read our tokens. On a dark
page that would be a bare white rectangle, so it gets a deliberate light
surface with padding to read as an intentional inset panel. */
:root[data-theme="dark"] .signup {
background: #ffffff;
padding: 0.5rem;
border-radius: var(--radius);
}
.signup__fallback {
margin: 1rem 0 0;
font-size: 0.85rem;
opacity: 0.75;
}
/* Benefit grid */
.benefits {
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
list-style: none;
margin: 0;
padding: 0;
}
.benefit__title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 0.4rem;
padding-top: 0.75rem;
border-top: 2px solid var(--pub-button-bg);
}
.benefit__body {
margin: 0;
font-size: 0.94rem;
opacity: 0.85;
}
/* -----------------------------------------------------------------------------
Bottombar
-------------------------------------------------------------------------- */
.bottombar {
background: var(--pub-bottombar-bg);
color: var(--pub-bottombar-text);
border-top: 1px solid var(--hairline);
margin-top: clamp(3rem, 8vw, 5rem);
padding-block: clamp(2rem, 5vw, 3rem);
font-size: 0.875rem;
}
.bottombar__inner {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 3rem;
justify-content: space-between;
}
.bottombar h3 {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 0.6rem;
opacity: 0.75;
}
.bottombar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.bottombar a {
color: inherit;
}
.bottombar__legal {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
opacity: 0.7;
font-size: 0.8rem;
}
.bottombar--slim {
margin-top: 0;
text-align: center;
}
/* -----------------------------------------------------------------------------
Narrow viewports
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
.lead {
grid-template-columns: 1fr;
}
.lead__media {
order: -1;
}
.topbar__inner {
padding-block: 0.75rem;
}
.ticker__label {
padding-inline: 0.75rem;
}
.episode {
grid-template-columns: 64px 1fr;
gap: 1rem;
}
.episode__art {
width: 64px;
height: 64px;
}
}