/* PREPRINT — the reading surface.
*
* Pages that are READ. Loaded after core.css, never together with app.css:
*
*
*
*
*
* The boundary: this sheet styles what a RENDERER EMITS — the row grid, the
* article, sidenotes, figures, tables, code, callouts, the marker layer. The
* shell around it (the page grid, the contents rail, the top bar, the reading
* progress) belongs to the surface, because those are built by a template and
* carry the surface's own page geometry.
*
* That boundary is not academic. A console previewing this renderer's output
* loads exactly this file and gets exactly the reader's geometry, with none of
* the site furniture that would be a lie inside an editor pane.
*
* This sheet owns `.note` for a reading page (a sidenote, numbered, on a blue
* rule). app.css owns `.note` for an app (a faint hint). Same name, different
* object, never co-loaded.
*
* Nothing here reads a colour, a face or a control height that is not a token.
*/
:root {
/* The gutter between the measure and its margin column. A surface may
restate it; the reading grid never reads a variable it does not own. */
--pp-column-gap: clamp(1rem, 3vw, 2.25rem);
}
/* ── the row ────────────────────────────────────────────────────────────────
66ch of text and 20ch of margin. Every section set on this grid reads as one
document rather than as a site with a homepage. */
.row {
display: grid;
grid-template-columns: minmax(0, var(--pp-measure)) minmax(0, var(--pp-margin-column));
gap: var(--pp-column-gap);
}
.row > * { grid-column: 1; min-width: 0; }
.row__margin { grid-column: 2; }
.row--full > * { grid-column: 1 / -1; }
.article { display: grid; gap: 1.1rem; }
.article .row { align-items: start; }
.art__head > div { display: grid; gap: 1rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; }
.eyebrow .sq { width: .4rem; height: .4rem; }
.art__title {
font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900;
letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance;
}
/* The page's one licensed departure from the type scale, spent here.
Qualified by .art__head so it outranks the .article p catch-all below,
which would otherwise drag the standfirst back to 17px/1.68. */
.art__head .art__dek {
font-family: var(--pp-font-display); font-weight: 300; font-size: 1.12rem;
line-height: 1.5; letter-spacing: -0.015em; color: var(--pp-muted);
text-wrap: pretty;
}
/* The dotted underrule is the register again, quietly, at the foot of the
masthead. Dotted because it is provisional: a piece keeps being edited. */
.art__by {
display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .6rem 0;
border-top: var(--pp-rule-line) solid var(--pp-hair);
border-bottom: var(--pp-rule-line) dotted var(--pp-line);
}
.article[data-register='science'] .art__by { border-bottom-color: var(--pp-plate-1); }
.article[data-register='notebook'] .art__by { border-bottom-color: var(--pp-plate-3); }
.article[data-register='opinion'] .art__by { border-bottom-color: var(--pp-plate-2); }
.art__by code { font-size: .7rem; color: var(--pp-faint); }
.article p { font-size: var(--pp-size-body); line-height: var(--pp-leading-body); text-wrap: pretty; }
.article .h2 {
font-size: var(--pp-size-head); font-weight: 700;
letter-spacing: var(--pp-track-head); margin-top: 1.4rem; padding-top: .5rem;
border-top: var(--pp-rule-structure) solid var(--pp-edge);
scroll-margin-top: 5rem;
}
.article h3 { font-size: var(--pp-size-subhead); margin-top: .9rem; scroll-margin-top: 5rem; }
.article .list { padding-left: 1.15rem; display: grid; gap: .3rem; }
.article .list li { font-size: var(--pp-size-body); line-height: 1.55; }
.article strong { font-weight: var(--pp-weight-strong); }
/* The drop cap carries the register. One glance and a reader knows what kind
of piece this is. */
.dropcap {
float: left; font-family: var(--pp-font-display); font-weight: 900;
font-size: var(--pp-dropcap-size); line-height: var(--pp-dropcap-leading);
letter-spacing: -0.04em; padding-right: .07em; margin-top: .05em;
}
.dropcap[data-register='science'] { color: var(--pp-plate-1); }
.dropcap[data-register='notebook'] { color: var(--pp-plate-3); }
.dropcap[data-register='opinion'] { color: var(--pp-plate-2); }
/* ── sidenotes ──────────────────────────────────────────────────────────── */
.row__margin { display: grid; gap: .8rem; align-content: start; }
.note-mark { font-size: .8em; }
.note-mark a { color: var(--pp-plate-3-text); }
/* A note, not a footnote: it keeps its number and its blue rule wherever the
layout puts it. */
.note {
display: grid; gap: .2rem; padding-left: .65rem;
border-left: var(--pp-rule-structure) solid var(--pp-plate-3);
}
.note-num { font-family: var(--pp-font-mono); font-size: .64rem; }
.note-num a { color: var(--pp-plate-3-text); }
.note-body { font-size: .8125rem; line-height: 1.5; color: var(--pp-muted); }
/* Wayfinding, not annotation, which is why the pairing tint is faint. */
.note.is-paired, .note-mark.is-paired { background: var(--pp-tint); }
/* ── a term whose definition would interrupt the sentence ────────────────── */
.term { border-bottom: 1px dotted var(--pp-plate-3); cursor: help; }
.tip {
position: absolute; z-index: 50; transform: translate(-50%, -100%);
max-width: 260px; padding: .5rem .65rem;
background: var(--pp-edge); color: var(--pp-paper);
font-size: .8rem; line-height: 1.45;
/* or it fights the cursor near a sidenote */
pointer-events: none;
}
/* ── citations, and the generated reference list ─────────────────────────── */
.cite { font-family: var(--pp-font-mono); font-size: .72rem; color: var(--pp-plate-3-text); }
.cite--unknown { color: var(--pp-plate-2-text); }
.refs { display: grid; gap: .9rem; margin-top: .4rem; }
.refs__list { list-style: none; display: grid; gap: .5rem; }
.refs__list li {
display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem;
font-size: .88rem; line-height: 1.55; color: var(--pp-muted);
scroll-margin-top: 5rem;
}
.ref-n { color: var(--pp-plate-3-text); font-size: .8rem; }
.refs__list a { color: var(--pp-plate-3-text); border-bottom: 1px solid currentColor; }
/* ── figures: the one licensed breach of the column ──────────────────────── */
.figure { display: grid; gap: .55rem; margin: .4rem 0; }
.figure--framed {
gap: .7rem; margin: .5rem 0; padding: 1rem;
border: var(--pp-rule-line) solid var(--pp-line); background: var(--pp-surface);
}
.figure img { max-width: 100%; height: auto; display: block; }
/* A slot says what belongs in it, in mono. Never lorem, never a grey box. */
.figure__slot {
min-height: clamp(8rem, 20vw, 13rem); display: grid; place-items: center;
border: var(--pp-rule-line) dashed var(--pp-line); background: var(--pp-sunk);
background-image: repeating-linear-gradient(45deg, var(--pp-hair) 0 1px, transparent 1px 9px);
}
.figure__slot code {
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--pp-faint); background: var(--pp-paper); padding: .35rem .65rem;
}
.figure__live { display: grid; gap: .7rem; }
.fig__frame {
background: var(--pp-paper); border: var(--pp-rule-line) solid var(--pp-hair);
padding: .5rem; min-height: 10rem;
}
.fig__frame svg { width: 100%; height: auto; display: block; }
/* Controls sit below the frame so a thumb never covers what it changes. */
.fig__ctl { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.fig__slider {
display: flex; align-items: center; gap: .7rem; flex: 1;
min-width: min(100%, 230px);
}
.fig__slider code:first-child {
font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--pp-faint); white-space: nowrap;
}
.fig__slider input { flex: 1; }
.fig__slider code:last-child {
font-size: .78rem; font-weight: 700; width: 3rem; text-align: right;
}
.fig__btns { display: flex; align-items: center; gap: .4rem; }
/* Radius rises with control size, so this small button takes the smallest
step on the cut scale. */
.fig__b {
height: 34px; padding: 0 .75rem;
border: var(--pp-rule-line) solid var(--pp-line);
border-radius: var(--pp-radius-sm); font-size: .8rem; font-weight: 600;
}
.fig__b:hover { border-color: var(--pp-edge); }
.fig__b--go {
background: var(--pp-edge); color: var(--pp-paper); border-color: var(--pp-edge);
}
.fig__status { font-size: .7rem; color: var(--pp-faint); }
.figure figcaption { font-size: .85rem; line-height: 1.55; color: var(--pp-muted); }
.figure figcaption strong { color: var(--pp-ink); font-weight: var(--pp-weight-strong); }
/* ── tables keep real column widths and scroll sideways ──────────────────── */
.table {
overflow-x: auto; border: var(--pp-rule-line) solid var(--pp-line);
background: var(--pp-surface);
}
.table table { border-collapse: collapse; min-width: 100%; }
.table th, .table td {
text-align: left; padding: .5rem .8rem; line-height: 1.45; white-space: nowrap;
border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
}
.table th {
font-family: var(--pp-font-mono); font-size: .64rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--pp-faint);
border-bottom: var(--pp-rule-structure) solid var(--pp-edge);
}
.table td { font-size: .85rem; color: var(--pp-muted); }
.table td:first-child { color: var(--pp-ink); }
/* ── mathematics: Source Serif 4, and only here ──────────────────────────── */
.math { font-family: var(--pp-font-math); font-style: italic; }
.equation {
display: grid; gap: .4rem; padding: 1rem;
border-left: var(--pp-rule-structure) solid var(--pp-edge);
background: var(--pp-sunk); font-family: var(--pp-font-math);
font-size: 1.2rem; text-align: center; white-space: pre-wrap;
}
/* ── the editorial note, and a boundary the reader may cross ─────────────── */
.note-block {
padding: .85rem 1rem; background: var(--pp-sunk);
border-left: var(--pp-rule-structure) solid var(--pp-edge);
font-size: var(--pp-size-body); line-height: 1.6;
}
.rule--boundary {
height: 0; border: 0; border-top: var(--pp-rule-line) dashed var(--pp-plate-2);
}
/* ── callouts ────────────────────────────────────────────────────────────── */
.callout {
display: grid; gap: .35rem; padding: .85rem .95rem;
border: var(--pp-rule-line) solid var(--pp-plate-1);
background: var(--pp-surface);
}
.callout__k {
font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--pp-plate-1-text);
}
.callout p { font-size: .94rem; line-height: 1.6; }
/* ── code ────────────────────────────────────────────────────────────────── */
.code { border: var(--pp-rule-line) solid var(--pp-line); background: var(--pp-code); }
.code__bar {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .45rem .7rem; border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
}
.code__bar code {
font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--pp-faint);
}
.code__dots { display: flex; gap: .3rem; }
.code__dots i { width: .45rem; height: .45rem; display: block; }
.code__dots i:nth-child(1) { background: var(--pp-plate-1); }
.code__dots i:nth-child(2) { background: var(--pp-plate-2); }
.code__dots i:nth-child(3) { background: var(--pp-plate-3); }
.code pre { overflow-x: auto; padding: .85rem .7rem; }
.code pre code { font-size: .82rem; line-height: 1.85; }
.c-note { color: var(--pp-faint); }
.c-str { color: var(--pp-plate-1-text); }
/* ══ THE MARKER LAYER ══════════════════════════════════════════════════════
A marker is always a field behind type and never type itself. Citron as
text on eggshell is 1.6:1; as a field behind ink, 14:1. Same colour,
opposite outcome — which is why the ink above one never changes. */
.mk, [data-pp-mark] { color: inherit; padding: .04em 0; }
.mk--citron, [data-pp-mark='citron'] { background: var(--pp-marker-citron); }
.mk--pink, [data-pp-mark='pink'] { background: var(--pp-marker-pink); }
.mk--cyan, [data-pp-mark='cyan'] { background: var(--pp-marker-cyan); }
/* The menu is temporarily on top of the work rather than part of it, which is
the one thing here that casts. Licence 2: it opens, it does not arrive. */
.mkmenu {
position: absolute; z-index: 55; min-width: 200px;
background: var(--pp-surface);
border: var(--pp-rule-structure) solid var(--pp-edge);
box-shadow: 5px 5px 0 var(--pp-shadow);
opacity: 0; transform: translateY(3px);
transition: opacity var(--pp-dur-state) var(--pp-ease-out),
transform var(--pp-dur-state) var(--pp-ease-out);
}
.mkmenu.is-open { opacity: 1; transform: none; }
.mkmenu__head {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: .4rem .6rem; border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
}
.mkmenu__title {
font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--pp-faint);
}
.mkmenu__sws { display: flex; gap: .25rem; }
/* The swatch shows the pen at full strength. What lands on the page is the
translucent field, which is the only form a marker takes. */
.mkmenu__sw {
width: 20px; height: 20px;
border: var(--pp-rule-line) solid var(--pp-line);
}
.mkmenu__sw:hover { border-color: var(--pp-edge); }
.mkmenu__sw[data-c='citron'] { background: #deee2e; }
.mkmenu__sw[data-c='pink'] { background: #ff4fa3; }
.mkmenu__sw[data-c='cyan'] { background: #40ccff; }
.mkmenu__b {
width: 100%; display: flex; align-items: center; gap: .6rem;
padding: .5rem .6rem; border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
font-size: .85rem; font-weight: 500; text-align: left;
}
.mkmenu__b:last-child { border-bottom: 0; }
.mkmenu__b:hover { background: var(--pp-sunk); }
.mkmenu__b svg { flex: none; }
.mkmenu__b--danger { color: var(--pp-plate-2-text); }
/* A passage arrived at by a shared link, restored by this site rather than by
the browser's own text fragment. */
[data-pp-shared] { background: var(--pp-marker-citron); }
/* Below 820px the column simply becomes the screen. Type stays 17px, the
measure does not shrink, and a sidenote folds into the flow directly after
the paragraph that cites it — nothing behind a tap. */
@media (max-width: 820px) {
.row { grid-template-columns: minmax(0, 1fr); }
.row > *, .row__margin { grid-column: 1; }
.row__margin { margin-top: .2rem; }
}