/* Handwritten caption face for the polaroids. */
@font-face {
font-family: "I Eat Crayons";
src: url("/fonts/ieatcrayons.ttf") format("truetype");
font-display: swap;
}
:root {
/* ink */
--bg: #0C0C0C;
--rule: #1F1F1F;
--border-soft: #2E2E2E;
/* type */
--ink-hi: #FFFFFF;
--ink-lead: #F2F2F2;
--ink-body: #A3A3A3;
--ink-muted: #6E6E6E;
--ink-faint: #5F5F5F;
/* accent: one signature colour, see the accent discipline check */
--accent: #4EE06B;
--accent-ink: #0C0C0C;
/* radii */
--r-tile: 6px;
--r-pill: 999px;
/* aliases kept for older rules and the accounts, comments and newsletter styles */
--fg: var(--ink-hi);
--muted: var(--ink-muted);
--flat: #181818;
--measure: 80ch;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--bg);
}
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--fg);
font-family: Archivo, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* The layout was drawn for a 1920-wide screen and caps at 1200px. On wider
screens scale the whole page instead of leaving it small in a sea of black.
Breakpoints sit below the common widths so 125% OS scaling still qualifies. */
@media (min-width: 2000px) {
body {
zoom: 1.3;
}
}
@media (min-width: 3000px) {
body {
zoom: 1.9;
}
}
a {
color: inherit;
}
a:not([class]) {
color: var(--accent);
}
:focus-visible {
outline: 2px solid var(--fg);
outline-offset: 2px;
}
/* Header and footer */
.masthead {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
height: 62px;
padding: 0 34px;
background: rgba(12, 12, 12, 0.72);
border-bottom: 1px solid var(--rule);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
}
.masthead-left {
display: flex;
align-items: baseline;
gap: 34px;
}
.masthead-right {
display: flex;
align-items: center;
gap: 14px;
}
.wordmark {
color: var(--ink-hi);
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: 20px;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
}
.nav {
display: flex;
align-items: baseline;
gap: 22px;
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nav a {
color: var(--ink-muted);
text-decoration: none;
transition: color 120ms;
}
.nav a:hover {
color: var(--ink-hi);
}
.nav a[aria-current="page"] {
color: var(--accent);
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 7px;
}
/* Buttons. .utility is the secondary outlined pill; .utility--primary is
the accent-filled pill. */
/* The hidden attribute must win over any display rule below, or the
account UI shows its signed-out and signed-in states at once. */
[hidden] {
display: none !important;
}
.utility {
display: inline-block;
padding: 11px 22px;
border: 1px solid var(--border-soft);
border-radius: var(--r-pill);
color: var(--ink-muted);
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 120ms, color 120ms, border-color 120ms, transform 120ms;
}
.utility:hover {
color: var(--ink-hi);
border-color: var(--ink-hi);
}
.utility--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.utility--primary:hover {
background: #5be878;
border-color: #5be878;
color: var(--accent-ink);
transform: translateY(-1px);
}
/* Editor-only controls. The gate stamps for a valid
Access session; without it these never render. */
.utility--editor {
display: none;
}
html[data-editor] .utility--editor {
display: inline-block;
}
.article-meta {
display: flex;
align-items: center;
gap: 1rem;
}
/* Phones: two rows. Wordmark and account on top, Blog / TGIF as a
full-width tab strip underneath. */
@media (max-width: 599px) {
.masthead {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"wordmark right"
"nav nav";
height: auto;
padding: 0;
}
.masthead-left {
display: contents;
}
.wordmark {
grid-area: wordmark;
align-self: center;
padding: 16px 18px;
white-space: nowrap;
}
.masthead-right {
grid-area: right;
padding: 0 18px;
}
.nav {
grid-area: nav;
gap: 0;
border-top: 1px solid var(--rule);
}
.nav a {
flex: 1;
padding: 12px 0 10px;
border-bottom: 2px solid transparent;
text-align: center;
}
.nav a[aria-current="page"] {
text-decoration: none;
border-bottom-color: var(--accent);
}
/* Avatar only; the name has no room. */
.auth-name {
display: none;
}
}
/* One faint line at the foot of every page: copyright, contact, privacy. */
.colophon {
margin-top: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 22px;
padding: 40px 18px 28px;
color: var(--ink-faint);
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.colophon a {
color: inherit;
text-decoration: none;
}
.colophon a:hover {
color: var(--ink-hi);
}
/* Post grid */
.posts {
max-width: 1200px;
margin: 0 auto;
padding: 34px 34px 40px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* The scans carry their own margins, so the grid gap stays tight. */
gap: 14px 10px;
padding: 0;
align-items: start;
}
/* Polaroid: the frame is one of six scans (public/images/polaroid-N.webp,
three originals and their mirrors,
alpha window). Photo and caption sit at each scan's own window and band,
measured in percent of the frame. Each one hangs a degree or two off
true and straightens on hover. */
.tile {
position: relative;
display: block;
width: var(--fill, 100%);
justify-self: center;
aspect-ratio: var(--frame-aspect);
/* Captions size against the frame's own width (cqw, corrected by --cap
for the canvas margin), so they fit the band at any grid width. */
container-type: inline-size;
background: var(--frame) center / 100% 100% no-repeat;
color: #161616;
text-decoration: none;
--tilt: 0deg;
transform: rotate(var(--tilt));
/* backwards, not both: a held end state would pin transform and kill the hover lift. */
animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
animation-delay: calc(var(--i, 0) * 40ms);
transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* While a polaroid is morphing between the wall and a post, drop the grain
overlay (a blend mode is costly to composite mid-animation) and ease the
morph. The grain returns the moment the transition ends. */
html:active-view-transition .tile--gradient .tile-media::before {
display: none;
}
::view-transition-group(*) {
animation-duration: 340ms;
animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Shadow as a box under the frame's own extents. A box-shadow is cached;
a drop-shadow filter re-renders every frame and made transitions lag. */
.tile::before {
content: "";
position: absolute;
inset: var(--fr-t) var(--fr-r) var(--fr-b) var(--fr-l);
border-radius: 3px;
box-shadow: 0 14px 22px rgba(0, 0, 0, 0.6);
transition: box-shadow 220ms ease;
pointer-events: none;
}
.tile:hover::before,
.tile:focus-visible::before {
box-shadow: 0 34px 40px rgba(0, 0, 0, 0.7);
}
.tile--f1 {
--frame: url("/images/polaroid-1.webp");
/* Each scan fills a different share of its canvas. --fill scales the
canvas so the frames come out the same width; --frame-aspect stretches
it a few percent so they come out the same height (1 : 1.22).
The box carries big transparent margins: the visible paper is ~74% of
the box width, so compare frames by paper, not by box. */
--frame-aspect: 1 / 0.94;
--fill: 100%;
--cap: 1;
--fr-l: 13.2%; --fr-r: 13.2%; --fr-t: 1.4%; --fr-b: 3.2%;
--win-l: 16.9%; --win-t: 11.5%; --win-r: 16.8%; --win-b: 21.3%;
--band-t: 79%; --band-b: 4.5%;
}
.tile--f2 {
--frame: url("/images/polaroid-2.webp");
--frame-aspect: 1 / 1.23;
--fill: 78.5%;
--cap: 1.274;
--fr-l: 3%; --fr-r: 3.2%; --fr-t: 3.6%; --fr-b: 3.4%;
--win-l: 8.1%; --win-t: 8.1%; --win-r: 8.3%; --win-b: 22.4%;
--band-t: 78%; --band-b: 4.5%;
}
.tile--f3 {
--frame: url("/images/polaroid-3.webp");
--frame-aspect: 1 / 1.2;
--fill: 82%;
--cap: 1.22;
--fr-l: 5.5%; --fr-r: 4.7%; --fr-t: 4.4%; --fr-b: 4.3%;
--win-l: 11.4%; --win-t: 10.05%; --win-r: 10.8%; --win-b: 25.45%;
--band-t: 75.5%; --band-b: 5.5%;
/* This scan's frame sits a degree anticlockwise on its canvas. */
--skew: -1deg;
}
/* Frames 7 to 9 are fresh scans: 7 bare (no fixing), 8 two-corner tape,
9 a general variation. Flood-fill measured and straightened where the
source had its own tilt (9 needed 2.4deg). They are trimmed tight, so
the box IS the paper: fill and aspect are set so the paper comes out the
same size as the originals' visible paper (about 74% of a full track,
1 : 1.22), which stretches 7 and 8 by a few percent, like 2 and 3. */
.tile--f7 {
--frame: url("/images/polaroid-7.webp");
--frame-aspect: 1 / 1.22;
--fill: 75.8%;
--cap: 1.319;
--fr-l: 1.5%; --fr-r: 1.5%; --fr-t: 1.5%; --fr-b: 1.5%;
--win-l: 6.1%; --win-t: 5.0%; --win-r: 7.3%; --win-b: 23.2%;
--band-t: 78.5%; --band-b: 4.5%;
}
.tile--f8 {
--frame: url("/images/polaroid-8.webp");
/* The tape overhangs the paper on this scan, so the box is scaled up
until the paper inside (88% of the box wide) matches the other frames. */
--frame-aspect: 1 / 1.148;
--fill: 86.3%;
--cap: 1.319;
--fr-l: 6.5%; --fr-r: 5.7%; --fr-t: 5.9%; --fr-b: 0.8%;
--win-l: 11.8%; --win-t: 10.8%; --win-r: 11.6%; --win-b: 21.2%;
--band-t: 80.5%; --band-b: 4.5%;
}
/* The tape's corners dip into the photo's rectangular top edge; a strip
of the frame's own top (tape + surrounding paper), painted after the
photo, tucks the photo back under the tape instead of covering it. */
.tile--f8::after {
content: "";
position: absolute;
inset: 0;
background: url("/images/polaroid-8-tape.png") top center / 100% 100% no-repeat;
pointer-events: none;
}
.tile--f9 {
--frame: url("/images/polaroid-9.webp");
--frame-aspect: 1 / 1.22;
--fill: 75.8%;
--cap: 1.319;
--fr-l: 1.5%; --fr-r: 1.5%; --fr-t: 1.5%; --fr-b: 1.5%;
--win-l: 7.6%; --win-t: 6.1%; --win-r: 7.4%; --win-b: 23.0%;
--band-t: 78.7%; --band-b: 4.5%;
}
/* Frames 4 to 6 are 1 to 3 mirrored, for variety: left and right swap
and the skew flips. */
.tile--f4 {
--frame: url("/images/polaroid-4.webp");
--frame-aspect: 1 / 0.94;
--fill: 100%;
--cap: 1;
--fr-l: 13.2%; --fr-r: 13.2%; --fr-t: 1.4%; --fr-b: 3.2%;
--win-l: 16.8%; --win-t: 11.5%; --win-r: 16.9%; --win-b: 21.3%;
--band-t: 79%; --band-b: 4.5%;
}
.tile--f5 {
--frame: url("/images/polaroid-5.webp");
--frame-aspect: 1 / 1.23;
--fill: 78.5%;
--cap: 1.274;
--fr-l: 3.2%; --fr-r: 3%; --fr-t: 3.6%; --fr-b: 3.4%;
--win-l: 8.3%; --win-t: 8.1%; --win-r: 8.1%; --win-b: 22.4%;
--band-t: 78%; --band-b: 4.5%;
}
.tile--f6 {
--frame: url("/images/polaroid-6.webp");
--frame-aspect: 1 / 1.2;
--fill: 82%;
--cap: 1.22;
--fr-l: 4.7%; --fr-r: 5.5%; --fr-t: 4.4%; --fr-b: 4.3%;
--win-l: 10.8%; --win-t: 10.05%; --win-r: 11.4%; --win-b: 25.45%;
--band-t: 75.5%; --band-b: 5.5%;
--skew: 1deg;
}
.tile-media,
.tile-body {
transform: rotate(var(--skew, 0deg));
}
.grid .tile:nth-child(3n + 1) { --tilt: -1.6deg; }
.grid .tile:nth-child(3n + 2) { --tilt: 1.1deg; }
.grid .tile:nth-child(3n) { --tilt: -0.7deg; }
.tile:hover,
.tile:focus-visible {
/* Pick-up: lift and lean toward the cursor (--rx/--ry set by the grid
script). One transform, so frame, photo and caption stay locked. */
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt)) translateY(-14px);
outline: none;
z-index: 1;
}
/* The polaroid at the top of a post: same frame, no link, no tilt. */
.tile--hero {
max-width: 520px;
margin: 1.5rem auto 0;
--tilt: -1.2deg;
animation: none;
}
.tile--hero:hover {
transform: rotate(var(--tilt));
}
.tile--hero:hover::before {
box-shadow: 0 14px 22px rgba(0, 0, 0, 0.6);
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
.tile-media {
position: absolute;
left: var(--win-l);
top: var(--win-t);
right: var(--win-r);
bottom: var(--win-b);
overflow: hidden;
background: #101010;
}
/* Glossy print, real photos only: deeper blacks and richer colour than a
matte photo, plus a physical grain (irregular clumps, not digital
static). Grain composites first, gloss's filter applies to the whole
box last so it also lands on the grain, not just the photo underneath. */
.tile:not(.tile--gradient) .tile-media {
filter: contrast(1.1) saturate(1.15) brightness(0.98);
}
.tile:not(.tile--gradient) .tile-media::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.tile--gradient .tile-media,
.hero--gradient {
background: var(--tile-gradient, linear-gradient(160deg, #333, #111));
}
/* Grain: an SVG noise tile blended over the gradient, scaled up for a
chunky, low-resolution feel. Costs nothing per tile. */
.tile--gradient .tile-media::before,
.hero--gradient::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 110px 110px;
mix-blend-mode: overlay;
opacity: 0.9;
pointer-events: none;
}
.hero--gradient {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--r-tile);
margin: 1.75rem 0 0;
}
.tile-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tile-body {
position: absolute;
left: calc(var(--win-l) + 2%);
right: calc(var(--win-r) + 2%);
top: var(--band-t);
bottom: var(--band-b);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 5px;
}
/* Safari ignores paint-order on HTML text and draws the stroke over the
fill, so every overlapping contour in this handwriting face shows as an
extra line (letters look doubled, digits mostly escape). No stroke there;
the faux bold alone carries the weight. The class is set by a script in
Base.astro because no CSS feature test singles Safari out reliably. */
html.is-webkit .tile-title,
html.is-webkit .tile-eyebrow {
-webkit-text-stroke: 0;
}
/* Titles long enough to wrap step down so two lines weigh the same as one. */
.tile-title.tile-title--long {
font-size: clamp(11.4px, calc(3.7cqw * var(--cap, 1)), 21.4px);
}
.tile-eyebrow {
color: #5C584F;
opacity: 0.8;
font-family: "I Eat Crayons", "Comic Sans MS", cursive;
font-size: clamp(9.9px, calc(3cqw * var(--cap, 1)), 15.7px);
font-weight: 700;
-webkit-text-stroke: 0.9px currentColor;
paint-order: stroke fill;
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: none;
}
.tile-title {
margin: 0;
color: #3A3835;
opacity: 0.85;
font-family: "I Eat Crayons", "Comic Sans MS", cursive;
font-size: clamp(12.8px, calc(4.47cqw * var(--cap, 1)), 24.2px);
/* The face has no bold; thicken the strokes to read as a firmer pen. */
font-weight: 700;
-webkit-text-stroke: 0.9px currentColor;
paint-order: stroke fill;
line-height: 1;
letter-spacing: 0.01em;
text-transform: none;
/* No text-wrap: balance here: WebKit paints balanced text twice when it
is also line-clamped, which showed as doubled captions on iOS. */
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.pill {
display: inline-block;
color: var(--ink-muted);
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.cell,
.row,
.tile {
animation: none;
transition: none;
}
.tile:hover,
.tile:focus-visible {
transform: rotate(var(--tilt));
}
}
@media (max-width: 899px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 24px;
}
}
@media (max-width: 599px) {
.posts {
padding: 18px 18px 32px;
}
.grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
padding: 10px 12px;
}
.grid .tile:nth-child(odd) { --tilt: -1.2deg; }
.grid .tile:nth-child(even) { --tilt: 1deg; }
}
/* Tiles below the fold rise as they scroll into view. Backwards fill so the
animation releases after entry and the hover lift still works. */
@supports (animation-timeline: view()) {
/* Rise in as they enter, and drift on the page scroll: the middle column
lags the outer ones so the wall has a little depth. `translate` is
animated rather than transform so the tilt and hover stay untouched. */
.grid .tile {
--dy: 40px;
animation: rise linear backwards, drift linear both;
animation-delay: 0s, 0s;
animation-timeline: view(), scroll(root);
animation-range: entry 0% entry 45%, 0 100%;
}
.grid .tile:nth-child(3n + 2) {
--dy: -50px;
}
/* The lag has to follow real columns: on two columns the right one lags,
and on a single column nothing lags, or neighbours drift into each
other. */
@media (max-width: 899px) {
.grid .tile:nth-child(odd) { --dy: 40px; }
.grid .tile:nth-child(even) { --dy: -50px; }
}
@media (max-width: 599px) {
.grid .tile:nth-child(n) { --dy: 0px; }
}
@keyframes drift {
to { translate: 0 var(--dy); }
}
}
/* Post page */
.article {
max-width: var(--measure);
margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
}
.back {
display: inline-block;
margin-bottom: 1.75rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
}
.back:hover {
color: var(--fg);
}
.article h1 {
margin: 0.85rem 0 0;
font-size: clamp(1.9rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.015em;
text-transform: uppercase;
}
.hero {
width: 100%;
margin: 1.75rem 0 0;
}
.prose {
margin-top: 2rem;
}
.prose > :first-child {
margin-top: 0;
}
.prose p,
.prose ul,
.prose ol {
margin: 0 0 1.15em;
}
.prose h2,
.prose h3 {
margin: 2em 0 0.6em;
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.prose h2 {
font-size: 1.35rem;
}
.prose h3 {
font-size: 1.1rem;
}
.prose a {
text-decoration: underline;
text-underline-offset: 3px;
}
.prose blockquote {
margin: 1.75em 0;
padding-left: 1rem;
border-left: 2px solid var(--rule);
color: var(--muted);
}
.prose img {
margin: 1.75rem 0;
}
.prose code {
padding: 0.15em 0.4em;
border-radius: 4px;
background: var(--flat);
font-size: 0.9em;
}
.prose pre {
padding: 1rem;
border-radius: 6px;
background: var(--flat);
overflow-x: auto;
}
.prose pre code {
padding: 0;
background: none;
}
.prose hr {
margin: 2.5em 0;
border: 0;
border-top: 1px solid var(--rule);
}
/* Post pager */
.pager--grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem 3rem;
}
.pager {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 4rem;
border-top: 1px solid var(--rule);
}
.pager a {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem 0;
text-decoration: none;
}
.pager-newer {
grid-column: 2;
align-items: flex-end;
text-align: right;
}
.pager-older {
grid-column: 1;
}
.pager-dir {
color: var(--muted);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.pager-title {
font-size: 0.95rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.pager a:hover .pager-title {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Not found */
.notfound {
max-width: var(--measure);
margin: 0 auto;
padding: 6rem 1.25rem 8rem;
text-align: center;
}
.notfound h1 {
margin: 1rem 0 0.5rem;
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.015em;
text-transform: uppercase;
}
.notfound p {
margin: 0 0 2rem;
color: var(--muted);
}
/* Launch countdown */
.countdown {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vh, 3rem);
padding: 1.5rem;
background: var(--bg);
}
html.prelaunch {
overflow: hidden;
}
.countdown-wordmark {
color: var(--muted);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
}
.countdown-units {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.5rem, 3vw, 2.5rem);
width: min(100%, 1400px);
}
@media (max-width: 640px) {
.countdown-units {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 1rem;
}
}
.countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.countdown-value {
font-size: clamp(4rem, 16vw, 15rem);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.countdown-label {
color: var(--muted);
font-size: clamp(0.62rem, 1.2vw, 0.85rem);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.countdown-note {
margin: 0;
color: var(--muted);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.countdown-login {
margin-top: 0.5rem;
}
/* Home */
.home-hero {
display: grid;
grid-template-columns: 1fr 470px;
gap: 40px;
align-items: center;
/* Fill the first screen and sit in the middle of it. */
align-content: center;
min-height: calc(100svh - 240px);
max-width: 1200px;
margin: 0 auto;
padding: 66px 34px 0;
overflow: hidden;
}
.hero-copy {
padding-bottom: 40px;
}
.hero-title {
margin: 0;
color: var(--ink-hi);
font-family: "Archivo Black", Archivo, Helvetica, Arial, sans-serif;
font-size: clamp(40px, 5vw, 72px);
line-height: 0.94;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.hero-line {
display: block;
}
@media (min-width: 600px) {
.hero-line {
white-space: nowrap;
}
}
/* Three tiers: lead, body, sponsor. The markdown gives three paragraphs;
the sponsor line is the italic one. */
.hero-prose p {
margin: 20px 0 0;
max-width: 520px;
color: var(--ink-body);
font-size: 16px;
line-height: 1.6;
}
.hero-prose p:first-child {
margin-top: 34px;
color: var(--ink-lead);
font-size: 23px;
line-height: 1.38;
}
.hero-prose p:has(> em:only-child) {
margin-top: 22px;
max-width: 460px;
color: var(--ink-faint);
font-size: 13px;
line-height: 1.5;
}
.hero-prose p:has(> em:only-child) em {
font-style: italic;
}
.hero-portrait {
margin: 0;
align-self: center;
}
/* The poster carries its own ground, matched to --bg, so it is a plain
picture: no circle, no mask, sized by its column. */
.hero-portrait-img {
display: block;
width: 100%;
height: auto;
/* No drag-to-save on desktop, no press-and-hold menu on phones. */
pointer-events: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
}
@media (max-width: 1199px) {
.home-hero {
grid-template-columns: 1fr 380px;
}
}
@media (max-width: 899px) {
.home-hero {
grid-template-columns: 1fr;
gap: 24px;
padding-top: 24px;
min-height: 0;
}
.hero-portrait {
justify-self: center;
width: 100%;
max-width: 420px;
}
/* Flatten the copy so the sponsor line can sit below the portrait:
title, prose, portrait, sponsor. */
.hero-copy,
.hero-prose {
display: contents;
}
.hero-portrait {
order: 1;
}
.hero-prose p:has(> em:only-child) {
order: 2;
margin: 0 auto 24px;
text-align: center;
}
}
@media (max-width: 599px) {
.home-hero,
.hero-title {
font-size: 48px;
}
}
/* Accounts */
.masthead-right {
display: flex;
align-items: center;
gap: 0.6rem;
}
.auth {
display: flex;
align-items: center;
}
.auth-menu {
position: relative;
}
.auth-summary {
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.auth-summary::-webkit-details-marker {
display: none;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: var(--flat);
display: inline-grid;
place-items: center;
font-size: 0.75rem;
font-weight: 600;
}
.avatar--big {
width: 96px;
height: 96px;
margin: 0.5rem 0;
}
.auth-dropdown {
position: absolute;
right: 0;
top: calc(100% + 0.5rem);
min-width: 10rem;
display: grid;
background: var(--bg);
border: 1px solid var(--rule);
padding: 0.25rem 0;
}
.auth-dropdown button,
.auth-dropdown a {
all: unset;
cursor: pointer;
padding: 0.6rem 0.9rem;
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fg);
}
.auth-dropdown button:hover,
.auth-dropdown a:hover {
background: var(--flat);
}
.utility--solid {
background: var(--fg);
color: var(--bg);
border-color: var(--fg);
cursor: pointer;
}
button.utility {
background: transparent;
color: var(--fg);
cursor: pointer;
}
.dialog {
background: var(--bg);
color: var(--fg);
border: 1px solid var(--rule);
padding: 1.5rem;
width: min(92vw, 22rem);
}
.dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
.dialog-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.dialog-close button {
all: unset;
cursor: pointer;
padding: 0.25rem 0.5rem;
color: var(--muted);
font-size: 1.2rem;
}
.dialog-title {
margin: 0 0 1rem;
font-size: 0.9rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.dialog form {
display: grid;
gap: 0.75rem;
}
.dialog label {
display: grid;
gap: 0.3rem;
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
}
.dialog input {
background: var(--flat);
color: var(--fg);
border: 1px solid var(--rule);
padding: 0.6rem 0.7rem;
font: inherit;
}
.tabs {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--rule);
}
.tabs [role="tab"] {
all: unset;
cursor: pointer;
padding: 0.5rem 0;
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 2px solid transparent;
}
.tabs [role="tab"][aria-selected="true"] {
color: var(--fg);
border-bottom-color: var(--fg);
}
.dialog [data-google] {
width: 100%;
}
.or {
text-align: center;
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
margin: 1rem 0;
}
.link {
all: unset;
cursor: pointer;
font-size: 0.8rem;
color: var(--muted);
text-decoration: underline;
}
.link--danger {
display: block;
margin-top: 1.5rem;
}
.form-error {
color: #ff7a7a;
font-size: 0.85rem;
margin: 0;
}
.form-note {
color: var(--muted);
font-size: 0.85rem;
margin: 0.75rem 0 0;
}
/* Likes and comments */
.social {
max-width: var(--measure);
margin: 3rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
}
.social-bar {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.like {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.like[aria-pressed="true"] {
background: var(--fg);
color: var(--bg);
border-color: var(--fg);
}
.like:disabled {
opacity: 0.4;
cursor: default;
}
.social-count {
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.social-title {
font-size: 0.9rem;
letter-spacing: 0.09em;
text-transform: uppercase;
margin: 0 0 1rem;
}
.compose {
display: grid;
gap: 0.6rem;
margin-bottom: 2rem;
}
.compose textarea {
background: var(--flat);
color: var(--fg);
border: 1px solid var(--rule);
padding: 0.7rem;
font: inherit;
resize: vertical;
}
.compose-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.compose-replying {
color: var(--muted);
font-size: 0.8rem;
}
.thread,
.replies {
list-style: none;
margin: 0;
padding: 0;
}
.replies {
margin: 1rem 0 0 2.25rem;
border-left: 1px solid var(--rule);
padding-left: 1rem;
}
.comment {
padding: 1rem 0;
border-top: 1px solid var(--rule);
}
.replies .comment:first-child {
border-top: 0;
padding-top: 0;
}
.comment-head {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.8rem;
}
.comment-name {
font-weight: 600;
}
.comment-when {
color: var(--muted);
}
.comment-body {
margin: 0.6rem 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.comment-actions {
display: flex;
gap: 1rem;
}
/* Email updates */
.subscribe {
max-width: var(--measure);
margin: 3rem auto 4rem;
padding: 2rem 1.25rem 0;
border-top: 1px solid var(--rule);
}
.subscribe-title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.subscribe-copy {
margin: 0 0 1rem;
color: var(--muted);
}
.subscribe-form {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.subscribe-form input {
flex: 1 1 14rem;
background: var(--flat);
color: var(--fg);
border: 1px solid var(--rule);
padding: 0.6rem 0.8rem;
font: inherit;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Login */
.login {
max-width: var(--measure);
margin: 6rem auto;
padding: 0 1.25rem;
text-align: center;
}
.login-title {
font-size: 1.25rem;
letter-spacing: 0.09em;
text-transform: uppercase;
margin: 0 0 0.75rem;
}
.login-copy {
color: var(--muted);
margin: 0 0 1.5rem;
}