/* ---- theme ---------------------------------------------------------- */
:root {
/* colour */
--bg: #F3EADF; /* flat beige */
--ink: #141414; /* black */
--gray: #6B6660; /* the one gray */
--white: #FFFFFF;
--accent: #FF8F00; /* highlight */
--lime: #BFFF00; /* second accent: neon lime. Low contrast on beige: fine for
brief flashes and highlights, not for text people read */
--line: #D8CFC4; /* light gray: scrollbar, dividers */
--on-accent: #141414; /* text on orange/lime: stays dark in both modes */
--rule-w: 1px;
--rule: var(--rule-w) solid var(--line);
--glass: color-mix(in srgb, var(--bg) 85%, transparent); /* see-through beige: header, menu */
/* type */
--sans: "helvetica-lt-pro", Helvetica, Arial, sans-serif;
--display: "argent-pixel-cf", Georgia, serif;
--mono: "source-code-pro", ui-monospace, Menlo, monospace;
--fs-title: clamp(2rem, 3.3vw, 3.25rem); /* site title */
--fs-h: clamp(2.25rem, 3.4vw, 3rem); /* page + section heads */
--fs-lede: clamp(1.75rem, 2.5vw, 2.25rem); /* big Argent text */
--fs-body: 1.2rem; /* 20px */
--fs-nav: 1.125rem; /* 18px */
--fs-small: 1rem;
/* header */
--gutter: clamp(1.25rem, 3vw, 2.5rem);
--header-pad: 1.25rem; /* top */
--header-pad-b: 0.5rem; /* bottom */
--header-h: calc(var(--fs-title) * 1.2 + var(--header-pad) + var(--header-pad-b) + var(--rule-w));
--sprite-cycle: 0.99s; /* full 4-frame crow loop */
/* info layout */
--side-w: 40%; /* left panel width */
--body-pad: clamp(2rem, 5vw, 5rem); /* text inset from divider */
--measure: 46rem; /* max text line length */
/* left-panel artwork: big pixel crow + HOME's staggered title.
Everything is measured in panel units (u): 1u = 1% of the panel's width,
so the crow and title scale together and keep the same composition at
every screen size. Plain numbers, no units. */
--crow-size: 150; /* crow width */
--crow-top: 21; /* crow's distance from panel top */
--crow-left: 32; /* crow's distance from panel left */
--title-size: 20; /* HOME title font size */
--title-top: 0; /* HOME title's distance from top */
--title-em: 6.6; /* width of the longest title line ("Community"),
in em — keeps the title inside the panel */
}
/* ---- night mode: set by js/theme.js, switched by the header toggle.
Only the colours change; everything built on them follows. ---------- */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0E0E0E; /* near-black */
--ink: #E6E2DC; /* very light warm gray */
--gray: #9A948C; /* lighter, to stay readable on black */
--line: #3D3934; /* dark gray dividers and scrollbar */
}
/* black pixel art would vanish on black: flip it to light gray (0.85
rather than a full invert, so black becomes light gray, not white; the
hue-rotate brings orange back toward orange). The big crow's canvas is
recoloured by crow.js instead; this only covers its fallback image. */
[data-theme="dark"] :is(.pixel-crow img, .sprite img, .logos a[href*="princeton"] img) {
filter: invert(0.85) hue-rotate(180deg);
}
/* ---- base ----------------------------------------------------------- */
* { box-sizing: border-box; }
html {
scrollbar-color: var(--line) transparent;
scrollbar-gutter: stable; /* keep the scrollbar's space even on short pages, so layouts line up across pages */
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--lime); }
img { max-width: 100%; }
/* ---- text ----------------------------------------------------------- */
h1, h2 {
margin: 1.5em 0 0.5em;
color: var(--accent);
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-h);
line-height: 1.1;
}
h1:first-child { margin-top: 0; }
h3 {
margin: 1.5em 0 0.5em;
font-family: var(--display);
font-weight: 400;
font-size: var(--fs-lede);
line-height: 1.2;
}
p, ul, ol { margin: 0 0 1em; }
/* bullets are a small orange pixel square, flush with the text edge above;
the item text hangs indented after it */
ul { padding-left: 0; list-style: none; }
ul li { position: relative; padding-left: 1em; }
ul li::before {
content: "";
position: absolute;
left: 0;
top: calc(0.5lh - 0.175em); /* centred on the first line */
width: 0.35em;
height: 0.35em;
background: var(--accent);
}
.lede {
font-family: var(--display);
font-size: var(--fs-lede);
line-height: 1.3;
}
/* small 3x3-pixel plus sign, used as a bullet */
.pixel-plus {
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-right: 0.5em;
background: var(--accent);
clip-path: polygon(33.3% 0, 66.7% 0, 66.7% 33.3%, 100% 33.3%, 100% 66.7%, 66.7% 66.7%,
66.7% 100%, 33.3% 100%, 33.3% 66.7%, 0 66.7%, 0 33.3%, 33.3% 33.3%);
}
/* ---- links ---------------------------------------------------------- */
a {
color: inherit;
font-family: var(--mono);
font-weight: 600;
font-size: 0.8em; /* mono runs large next to Helvetica */
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
a:hover,
a:focus-visible {
background: var(--accent);
color: var(--lime); /* 6.75:1 — white on orange fails */
text-decoration-color: transparent;
}
/* links that sit inside running text: keeps the
surrounding font, so it just flows with the sentence */
.inline {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
text-transform: none;
letter-spacing: normal;
}
/* small pixel icon links after a name (website, Mastodon, Bluesky, …) */
.icon-links {
display: inline-flex;
gap: 0.3em;
margin-left: 0.4em;
vertical-align: -0.1em;
}
.icon-links a {
display: inline-flex;
padding: 0.15em;
text-decoration: none;
}
.icon-links svg {
width: 0.9em;
height: 0.9em;
fill: currentColor;
shape-rendering: crispEdges;
}
/* letters light up one at a time; site.js wraps each letter in span.letter */
.letter { transition: color 0.1s ease-out; }
.letter:hover { color: var(--accent); }
.letter.hover-lime:hover { color: var(--lime); } /* site.js picks orange or lime at random on each hover */
/* orange page headers light up lime instead */
:is(h1, h2):not(.stagger) .letter:hover { color: var(--lime); }
/* letters in [data-flicker] titles now and then flash an accent (site.js) */
.letter.flash { color: var(--accent); transition: none; }
.letter.flash-lime { color: var(--lime); transition: none; }
/* ---- buttons -------------------------------------------------------- */
/* orange block with stepped pixel corners; works on and