:root {
--paper: #f4efe3;
--paper-2: #efe8d8;
--ink: #211d17;
--ink-soft: #4a4338;
--muted: #857c6b;
--faint: #b7ac96;
--rule: #c9bda3;
--stamp: #a32318;
--stamp-ink: #a32318;
--wash: #e9e1cd;
--field: #fbf8f0;
--sheet: #fbf9f1;
--rule-line: rgba(120, 110, 88, 0.2);
--serif: "Instrument Serif", "Times New Roman", Georgia, serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--script: "Caveat", "Segoe Script", cursive;
--shadow: 0 1px 0 rgba(33, 29, 23, 0.04);
/* notice typeface — switched via ; default is script */
--doc-font: var(--script);
--doc-size: 1.42rem;
--doc-line: 2rem;
/* pen & paper assets */
--hl: rgba(255, 199, 0, 0.32);
--squiggle: url("data:image/svg+xml,");
--squiggle-v: url("data:image/svg+xml,");
--scribble: url("data:image/svg+xml,");
--paper-grain: url("data:image/svg+xml,");
--paper-mottle: url("data:image/svg+xml,");
--sheet-shadow: 0 1px 2px rgba(35, 28, 16, 0.22), 0 16px 32px -18px rgba(35, 28, 16, 0.5);
}
:root[data-doc="type"] { --doc-font: var(--mono); --doc-size: 0.82rem; }
:root[data-doc="serif"] { --doc-font: var(--serif); --doc-size: 1.12rem; }
:root[data-doc="script"] { --doc-font: var(--script); --doc-size: 1.42rem; }
@media (prefers-color-scheme: dark) {
:root {
--paper: #14120d;
--paper-2: #191510;
--ink: #e7ded0;
--ink-soft: #c3b9a6;
--muted: #8a8171;
--faint: #4f4838;
--rule: #2f2a20;
--stamp: #dd5647;
--stamp-ink: #e2685a;
--wash: #221d15;
--field: #1b1710;
--sheet: #1c1811;
--rule-line: rgba(150, 140, 115, 0.16);
--shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
--hl: rgba(255, 199, 0, 0.17);
--squiggle: url("data:image/svg+xml,");
--squiggle-v: url("data:image/svg+xml,");
--scribble: url("data:image/svg+xml,");
--paper-mottle: url("data:image/svg+xml,");
--sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 32px -16px rgba(0, 0, 0, 0.85);
}
}
* { box-sizing: border-box; }
/* Native scrollbars are replaced by a custom overlay (see app.js). */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
html { background: var(--paper); }
body {
margin: 0 auto;
padding: 0 1.5rem 5rem;
max-width: 56rem;
background:
linear-gradient(var(--paper), var(--paper)),
repeating-linear-gradient(0deg, transparent 0 27px, rgba(33, 29, 23, 0.025) 27px 28px);
color: var(--ink);
font-family: var(--mono);
font-size: 0.86rem;
line-height: 1.6;
overflow-x: hidden;
}
::selection { background: var(--stamp); color: #fff; }
/* ---------- corner stamp ---------- */
.stamp {
position: fixed;
top: 1.4rem;
right: 1.4rem;
z-index: 20;
display: grid;
place-items: center;
gap: 0.05rem;
padding: 0.5rem 0.9rem;
border: 2px solid var(--stamp);
border-radius: 4px;
color: var(--stamp-ink);
text-align: center;
transform: rotate(9deg);
opacity: 0.62;
pointer-events: none;
mix-blend-mode: multiply;
}
.stamp span:first-child {
font-family: var(--serif);
font-size: 1.15rem;
line-height: 1;
letter-spacing: 0.02em;
}
.stamp span:last-child {
font-size: 0.52rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
@media (prefers-color-scheme: dark) { .stamp { mix-blend-mode: screen; opacity: 0.5; } }
@media (max-width: 40rem) { .stamp { display: none; } }
/* ---------- header ---------- */
header {
padding-top: 3.75rem;
border-bottom: 2.5px double var(--ink);
padding-bottom: 1.5rem;
}
.letterhead {
display: flex;
gap: 1.15rem;
align-items: flex-start;
}
.seal {
flex: none;
width: 3.5rem;
height: 3.5rem;
display: grid;
place-items: center;
border: 2px solid var(--stamp);
border-radius: 50%;
color: var(--stamp-ink);
font-family: var(--serif);
font-size: 1.15rem;
letter-spacing: 0.02em;
box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--stamp);
margin-top: 0.35rem;
}
.kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
h1 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.6rem, 8vw, 4rem);
line-height: 0.98;
letter-spacing: -0.005em;
}
h1 em { font-style: italic; color: var(--stamp-ink); }
.sub {
margin: 0.55rem 0 0;
max-width: 34rem;
font-family: var(--serif);
font-size: 1.1rem;
line-height: 1.35;
color: var(--ink-soft);
}
.stats {
margin: 1.1rem 0 0;
font-size: 0.72rem;
letter-spacing: 0.03em;
color: var(--muted);
}
/* ---------- search ---------- */
.searchbar {
position: relative;
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-top: 2rem;
border-bottom: 2px solid var(--ink);
}
.searchbar .prompt {
font-family: var(--serif);
font-size: 1.5rem;
font-style: italic;
color: var(--muted);
}
#q {
flex: 1;
min-width: 0;
padding: 0.5rem 2rem 0.55rem 0;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--serif);
font-size: 1.65rem;
}
#q:focus { outline: none; }
.searchbar:focus-within { border-bottom-color: var(--stamp); }
#q::placeholder { color: var(--faint); font-style: italic; }
#q::-webkit-search-cancel-button { display: none; }
.searchbar kbd {
position: absolute;
right: 0;
bottom: 0.7rem;
padding: 0.08rem 0.45rem;
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
}
/* ---------- filters ---------- */
.filters {
display: flex;
flex-wrap: wrap;
gap: 1rem 2.25rem;
align-items: flex-end;
margin-top: 1.35rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
/* custom select */
.select { position: relative; }
.select-btn {
display: inline-flex;
align-items: center;
gap: 0.9rem;
min-width: 8.5rem;
padding: 0.4rem 0.7rem;
border: 1px solid var(--ink);
border-radius: 2px;
background: var(--field);
color: var(--ink);
font-family: var(--mono);
font-size: 0.8rem;
cursor: pointer;
box-shadow: var(--shadow);
}
.select-btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
.select-value { flex: 1; text-align: left; }
.select-caret {
width: 0.5rem;
height: 0.5rem;
border-right: 1.5px solid var(--ink-soft);
border-bottom: 1.5px solid var(--ink-soft);
transform: translateY(-2px) rotate(45deg);
transition: transform 0.16s ease;
}
.select-btn[aria-expanded="true"] .select-caret {
transform: translateY(1px) rotate(-135deg);
}
.select-list {
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 15rem;
margin: 0;
padding: 0.25rem;
list-style: none;
border: 1px solid var(--ink);
border-radius: 2px;
background: var(--field);
box-shadow: 6px 7px 0 rgba(33, 29, 23, 0.12);
overflow: auto;
scrollbar-width: none;
}
.select-list::-webkit-scrollbar { width: 0; }
.select-list[hidden] { display: none; }
.select-list li {
padding: 0.32rem 0.6rem;
border-radius: 2px;
font-size: 0.8rem;
cursor: pointer;
white-space: nowrap;
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.select-list li .tally { color: var(--muted); font-size: 0.72rem; }
.select-list li[aria-selected="true"] { color: var(--stamp-ink); }
.select-list li.active,
.select-list li:hover {
background: var(--ink);
color: var(--paper);
}
.select-list li.active .tally,
.select-list li:hover .tally { color: var(--paper-2); }
/* kind toggles — stamped chips */
.kinds, .fonts, .marks, .views { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kinds button, .fonts button, .marks button, .views button {
padding: 0.35rem 0.7rem;
border: 1px solid var(--rule);
border-radius: 2px;
background: transparent;
color: var(--faint);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.kinds button[aria-pressed="true"],
.fonts button[aria-pressed="true"],
.marks button[aria-pressed="true"],
.views button[aria-pressed="true"] {
color: var(--ink);
border-color: var(--ink);
background: var(--wash);
}
.kinds button:focus-visible,
.fonts button:focus-visible,
.marks button:focus-visible,
.views button:focus-visible {
outline: 2px solid var(--stamp);
outline-offset: 1px;
}
/* ---------- ledger ---------- */
.ledger-head {
display: grid;
grid-template-columns: 7rem 1fr 8rem;
gap: 1rem;
margin-top: 2.25rem;
padding: 0 0.25rem 0.4rem;
border-bottom: 1px solid var(--ink);
font-size: 0.58rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.count {
margin: 0.55rem 0 0.15rem;
padding: 0 0.25rem;
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--muted);
}
.results { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--rule); }
@keyframes rise {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
.results.fresh .row { animation: rise 0.4s both; }
@media (prefers-reduced-motion: reduce) { .results.fresh .row { animation: none; } }
.row-head {
display: grid;
grid-template-columns: 7rem 1fr 8rem;
gap: 1rem;
align-items: baseline;
width: 100%;
padding: 0.6rem 0.25rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.row-head:hover { background: var(--wash); }
.row-head:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
.row .date {
color: var(--muted);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.row .name {
font-family: var(--serif);
font-size: 1.2rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
.row .kind {
justify-self: end;
align-self: center;
padding: 0.1rem 0.45rem;
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.row .kind.flag {
color: var(--stamp-ink);
border: 1px solid var(--stamp);
border-radius: 2px;
}
/* opened notice */
/* opened notice — a pocket-paperback page laid on the desk */
.preview {
position: relative;
isolation: isolate;
width: min(100%, 38rem);
margin: 0.7rem auto 1.7rem;
padding: 2.1rem 2.5rem 1.5rem;
transform: rotate(-0.35deg);
}
/* the paper itself: grain + age mottle + vignette, edges roughened by SVG displacement */
.preview::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
var(--paper-grain),
var(--paper-mottle),
radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.35), transparent 55%),
linear-gradient(112deg, rgba(122, 100, 58, 0.07), transparent 38%, rgba(96, 74, 40, 0.12)),
var(--sheet);
box-shadow:
var(--sheet-shadow),
inset 0 0 2.5rem rgba(96, 74, 40, 0.09);
filter: url(#roughen);
}
@media (prefers-color-scheme: dark) {
.preview::before {
background:
var(--paper-grain),
var(--paper-mottle),
radial-gradient(ellipse at 28% 18%, rgba(255, 244, 214, 0.03), transparent 55%),
linear-gradient(112deg, rgba(0, 0, 0, 0.25), transparent 38%, rgba(0, 0, 0, 0.35)),
var(--sheet);
}
}
/* chapter head */
.preview .page-head {
text-align: center;
margin-bottom: calc(var(--doc-line) * 0.8);
}
.preview .page-head .ornament {
display: block;
margin-bottom: 0.3rem;
color: var(--stamp-ink);
font-family: var(--serif);
font-size: 1.05rem;
}
.preview .page-head .page-title {
font-family: var(--doc-font);
font-size: calc(var(--doc-size) * 1.3);
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
}
.preview .doc {
font-family: var(--doc-font);
font-size: var(--doc-size);
line-height: var(--doc-line);
color: var(--ink);
overflow-wrap: anywhere;
}
/* faint notebook ruling only under the handwritten hand */
:root[data-doc="script"] .preview .doc:not(.loading) {
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent calc(var(--doc-line) - 1px),
var(--rule-line) calc(var(--doc-line) - 1px),
var(--rule-line) var(--doc-line)
);
background-position: 0 0.55rem;
}
/* typeset hands read like a set book page */
:root:not([data-doc="script"]) .preview .doc p {
text-align: justify;
hyphens: auto;
}
.preview .doc.loading {
font-family: var(--mono);
font-size: 0.8rem;
font-style: italic;
color: var(--muted);
}
/* markdown inside the sheet — kept on the ruling by using line-height multiples */
.doc p,
.doc ul,
.doc ol,
.doc blockquote,
.doc pre { margin: 0 0 var(--doc-line); }
.doc > :last-child { margin-bottom: 0; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
font-family: var(--doc-font);
font-weight: 600;
line-height: var(--doc-line);
margin: var(--doc-line) 0 0;
color: var(--ink);
}
.doc h1 { font-size: 1.5em; }
.doc h2 { font-size: 1.3em; }
.doc h3 { font-size: 1.15em; }
.doc h4, .doc h5, .doc h6 { font-size: 1em; letter-spacing: 0.02em; }
.doc a {
color: var(--stamp-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
.doc strong { font-weight: 700; }
.doc em { font-style: italic; }
.doc code {
font-family: var(--mono);
font-size: 0.82em;
background: var(--wash);
padding: 0.05em 0.3em;
border-radius: 2px;
}
.doc pre {
font-family: var(--mono);
font-size: 0.78rem;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
background: var(--wash);
padding: 0.7rem 0.9rem;
border-radius: 2px;
}
.doc pre code { background: none; padding: 0; font-size: inherit; }
.doc blockquote {
padding-left: 0.9rem;
border-left: 2px solid var(--faint);
color: var(--ink-soft);
}
.doc ul, .doc ol { padding-left: 1.7rem; }
.doc hr {
border: 0;
border-top: 1px dashed var(--muted);
margin: var(--doc-line) 0;
}
/* ---------- hand-drawn markdown (data-md="hand") ---------- */
:root[data-md="hand"] .doc h1,
:root[data-md="hand"] .doc h2,
:root[data-md="hand"] .doc h3,
:root[data-md="hand"] .doc h4,
:root[data-md="hand"] .doc h5,
:root[data-md="hand"] .doc h6 {
padding-bottom: 0.22em;
background: var(--squiggle) repeat-x left bottom;
}
:root[data-md="hand"] .doc strong {
font-weight: 600;
background: linear-gradient(transparent 50%, var(--hl) 50%, var(--hl) 92%, transparent 92%);
padding: 0 0.1em;
}
:root[data-md="hand"] .doc em {
background: var(--squiggle) repeat-x left bottom;
padding-bottom: 3px;
}
:root[data-md="hand"] .doc a {
text-decoration: none;
background: var(--squiggle) repeat-x left bottom;
padding-bottom: 2px;
}
:root[data-md="hand"] .doc blockquote {
border-left: 0;
padding-left: 1.05rem;
background: var(--squiggle-v) repeat-y left top;
}
:root[data-md="hand"] .doc hr {
border: 0;
height: 6px;
background: var(--squiggle) repeat-x center;
}
:root[data-md="hand"] .doc ul {
list-style: none;
padding-left: 1.5rem;
}
:root[data-md="hand"] .doc ul li::before {
content: "—";
display: inline-block;
width: 1.5rem;
margin-left: -1.5rem;
color: var(--stamp-ink);
}
:root[data-md="hand"] .doc code {
background: transparent;
border-bottom: 1px dashed var(--faint);
border-radius: 0;
padding: 0 0.15em 1px;
}
:root[data-md="hand"] .doc pre {
background: transparent;
border: 1px dashed var(--faint);
border-radius: 0;
}
:root[data-md="hand"] .doc pre code { border-bottom: 0; }
/* redacted spans — struck out by hand with a pen */
.redact {
position: relative;
color: transparent;
padding: 0 0.2em;
cursor: help;
transition: color 0.15s;
}
.redact::after {
content: "";
position: absolute;
inset: 0.02em -0.12em -0.02em;
background: var(--scribble);
background-size: 100% 100%;
transform: rotate(-0.8deg);
transition: opacity 0.15s;
pointer-events: none;
}
.redact:hover { color: var(--stamp-ink); }
.redact:hover::after { opacity: 0.14; }
/* folio line, like a colophon at the foot of the page */
.preview .filed {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3rem 0.85rem;
margin-top: calc(var(--doc-line) * 0.85);
font-size: 0.66rem;
letter-spacing: 0.06em;
color: var(--muted);
}
.preview .filed a { color: var(--stamp-ink); text-decoration: none; }
.preview .filed a:hover { text-decoration: underline; }
.preview .filed .sep { color: var(--faint); }
.empty {
padding: 3rem 0.25rem;
font-family: var(--serif);
font-style: italic;
font-size: 1.35rem;
color: var(--muted);
}
.more {
display: block;
margin: 1.75rem auto 0;
padding: 0.5rem 1.5rem;
border: 1px solid var(--ink);
border-radius: 2px;
background: transparent;
color: var(--ink);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.more:hover { background: var(--wash); }
.more:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
.more[hidden] { display: none; }
/* ---------- footer ---------- */
footer {
margin-top: 3.5rem;
border-top: 2.5px double var(--ink);
padding-top: 0.8rem;
font-size: 0.68rem;
letter-spacing: 0.03em;
color: var(--muted);
}
footer a { color: inherit; }
/* ---------- custom overlay scrollbar ---------- */
.scroll-track {
position: fixed;
top: 0;
right: 0;
width: 12px;
height: 100%;
z-index: 40;
background: transparent;
opacity: 0;
transition: opacity 0.25s ease;
}
body:hover .scroll-track,
body.scrolling .scroll-track { opacity: 1; }
.scroll-thumb {
position: absolute;
top: 0;
right: 2px;
width: 5px;
border-radius: 0;
background: var(--ink);
cursor: grab;
}
.scroll-thumb::before,
.scroll-thumb::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: var(--stamp);
}
.scroll-thumb::before { top: 0; }
.scroll-thumb::after { bottom: 0; }
body.scrolling .scroll-thumb { cursor: grabbing; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
@media (max-width: 34rem) {
.ledger-head { grid-template-columns: 1fr 5.5rem; }
.ledger-head span:first-child { display: none; }
.row-head { grid-template-columns: 1fr 5.5rem; }
.row .date { grid-column: 1 / -1; }
}
/* ---------- grid view — a drawer of catalogue cards ---------- */
:root[data-view="grid"] .ledger-head { display: none; }
:root[data-view="grid"] .results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
gap: 0.85rem;
margin-top: 0.6rem;
}
:root[data-view="grid"] .row {
border: 1px solid var(--rule);
background: var(--field);
box-shadow: var(--shadow);
transition: border-color 0.12s;
}
:root[data-view="grid"] .row:hover { border-color: var(--ink); }
:root[data-view="grid"] .row-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
height: 100%;
padding: 0.85rem 0.95rem 0.8rem;
}
:root[data-view="grid"] .row .name { font-size: 1.28rem; }
:root[data-view="grid"] .row .kind { margin-top: auto; }
/* an opened card takes the whole shelf so the page can breathe */
:root[data-view="grid"] .row:has(.preview) { grid-column: 1 / -1; }
:root[data-view="grid"] .row:has(.preview) .row-head {
flex-direction: row;
align-items: baseline;
height: auto;
}
:root[data-view="grid"] .row:has(.preview) .kind { margin: 0 0 0 auto; }
:root[data-view="grid"] .empty,
:root[data-view="grid"] .results .row + .empty { grid-column: 1 / -1; }