/* ==========================================================================
The Literarium - a dusty library / cosy reading room
Sections: 1 fonts · 2 tokens · 3 base · 4 layout · 5 header/footer · 6 components
7 home · 8 library · 9 work · 10 reader · 11 authors · 12 language
13 games · 14 account · 15 utilities · 16 motion/print
========================================================================== */
/* 1 ─ Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/caveat-500.ttf") format("truetype"); }
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: url("../fonts/eb-garamond-latin-ext-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: url("../fonts/eb-garamond-latin-ext-400-italic.woff2") format("woff2"); }
/* 2 ─ Tokens ──────────────────────────────────────────────────────────── */
:root {
--paper: #f1e6cb; /* page */
--paper-2: #e8dbba; /* recessed panels */
--paper-3: #f9f1dc; /* raised cards */
--ink: #2b1d13;
--ink-soft: #574232;
--ink-faint: #7d6650;
--rule: #b8a077;
--rule-soft: #d3c092;
--wood-0: #170d07;
--wood-1: #26160c;
--wood-2: #3a2313;
--wood-3: #55341d;
--leather: #5b2a1e;
--oxblood: #74201d;
--oxblood-2: #8e2a25;
--green: #22382b;
--green-2: #2f4a3a;
--navy: #23304a;
--brass: #b48b3c;
--brass-2: #d6b566;
--gilt: #dcbb6a;
--cream: #f6ecd2;
--link: #7a1f1b;
--link-hover: #4d100e;
--focus: #b8741a;
--shadow-1: 0 1px 2px rgba(43, 29, 19, .18), 0 2px 8px rgba(43, 29, 19, .12);
--shadow-2: 0 2px 4px rgba(43, 29, 19, .22), 0 10px 28px rgba(43, 29, 19, .22);
--font-display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
--font-body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--measure: 36rem;
--wrap: 72rem;
--reader-size: 1.3rem;
/* The furniture: the wooden header and footer, their menus, and the home page's banner. A season
(css/seasons.css) restyles these through the tokens below rather than by rewriting the rules. */
--chrome-ink: #ecdcb6; /* menu text on the wood */
--chrome-ink-hover: #fff3d0;
--chrome-ink-soft: #c9b389; /* the motto under the name, small print on the wood */
--chrome-hover: rgba(255, 220, 150, .1);
--chrome-line: rgba(214, 181, 102, .35);
--footer-ink: #d9c8a0;
--footer-faint: #b6a480;
--footer-link-hover: #fff1c9;
--hero-top: #2c4636;
--hero-bottom: #1b2d23;
--hero-glow: rgba(255, 200, 100, .32);
--hero-ink: #e6d6ae;
--mote: rgba(255, 226, 160, .8); /* the dust drifting up through the banner */
--mote-glow: rgba(255, 210, 120, .9);
--on-accent: #fbf0d6; /* text on oxblood buttons and chips */
--accent-edge: #4a1210;
--selection-ink: #21150b;
--glow: rgba(255, 236, 190, .55); /* lamplight at the top of every page */
--vignette: rgba(90, 55, 20, .16);
--noise: url("data:image/svg+xml;utf8,");
color-scheme: light;
}
/* Candlelit evening */
:root[data-theme="dark"] {
--paper: #1c130d;
--paper-2: #241911;
--paper-3: #2b1f15;
--ink: #eadcbc;
--ink-soft: #cbb994;
--ink-faint: #a08c6b;
--rule: #5a4530;
--rule-soft: #43331f;
--link: #e0b56a;
--link-hover: #f5d590;
--oxblood: #8a2a25;
--oxblood-2: #a13830;
--shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
--shadow-2: 0 2px 4px rgba(0, 0, 0, .55), 0 10px 28px rgba(0, 0, 0, .5);
--glow: rgba(255, 170, 70, .13);
--vignette: rgba(0, 0, 0, .35);
color-scheme: dark;
}
/* 3 ─ Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.1875rem;
line-height: 1.6;
color: var(--ink);
background-color: var(--paper);
background-image:
radial-gradient(120% 70% at 50% -10%, var(--glow), transparent 62%),
radial-gradient(90% 90% at 50% 50%, transparent 55%, var(--vignette) 100%),
var(--noise);
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
text-rendering: optimizeLegibility;
font-kerning: normal;
font-variant-ligatures: common-ligatures;
}
:root[data-theme="dark"] body {
background-image:
radial-gradient(90% 60% at 50% -10%, var(--glow), transparent 60%),
radial-gradient(90% 90% at 50% 50%, transparent 50%, var(--vignette) 100%),
var(--noise);
}
main { flex: 1 0 auto; outline: none; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.15;
margin: 0 0 .5em;
text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--brass-2); color: var(--selection-ink); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); margin: 2rem 0; }
.skip {
position: absolute; left: .5rem; top: -4rem; z-index: 100;
background: var(--cream); color: var(--wood-1); padding: .6rem 1rem; border-radius: 4px;
}
.skip:focus { top: .5rem; }
/* 4 ─ Layout ──────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2rem, 46rem); margin-inline: auto; }
.section { padding-block: clamp(2rem, 5vw, 3.75rem); }
.stack > * + * { margin-top: var(--gap, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.two-col { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.page-head { text-align: center; padding-block: clamp(2rem, 5vw, 3.5rem) 1rem; }
.page-head p { color: var(--ink-soft); max-width: 40rem; margin-inline: auto; font-style: italic; font-size: 1.2rem; }
/* 5 ─ Header & footer ─────────────────────────────────────────────────── */
.site-header {
position: relative; z-index: 45; /* above the reader's sticky tool bar (30), so the drop-down menus open in front of it */
color: var(--cream);
background-color: var(--wood-1);
background-image:
var(--noise),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, .10) 2px 6px, rgba(255, 255, 255, .02) 6px 7px, rgba(0, 0, 0, .06) 7px 13px),
linear-gradient(180deg, var(--wood-3), var(--wood-1) 70%);
border-bottom: 3px solid var(--brass);
box-shadow: 0 6px 18px rgba(20, 10, 4, .45), inset 0 -1px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 220, 160, .18);
}
.site-header::after { /* thin brass inlay under the moulding */
content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--brass); opacity: .5;
}
.header-inner { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--gilt); }
.brand:hover { color: var(--brass-2); }
.brand-mark { width: 2.6rem; height: 2.6rem; flex: none; }
.brand-name { font-family: var(--font-sc); font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: .06em; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 14px rgba(214, 181, 102, .25); }
.brand-tag { display: block; font-family: var(--font-display); font-style: italic; font-size: .82rem; letter-spacing: .04em; color: var(--chrome-ink-soft); margin-top: .25rem; }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; align-items: center; }
.nav a, .tool-btn {
display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
color: var(--chrome-ink); text-decoration: none; font-family: var(--font-sc); font-size: 1.02rem; letter-spacing: .07em;
border-radius: 3px; background: none; border: 0; cursor: pointer; line-height: 1.1;
}
.nav a:hover, .tool-btn:hover { color: var(--chrome-ink-hover); background: var(--chrome-hover); }
.nav a[aria-current="page"] { color: var(--gilt); box-shadow: inset 0 -2px 0 var(--brass); }
.nav .tool-btn svg, .tool-btn svg { width: 1.25rem; height: 1.25rem; }
/* Drop-down menus */
.nav .has-menu { position: relative; display: flex; align-items: center; }
.nav .has-menu > a { padding-right: .35rem; }
.nav .caret { background: none; border: 0; color: var(--chrome-ink); cursor: pointer; padding: .5rem .45rem .5rem 0; margin-left: -.15rem; font-size: .8rem; line-height: 1; }
.nav .caret:hover { color: var(--chrome-ink-hover); }
.nav .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 15rem; flex-direction: column; gap: 0; padding: .35rem;
background: var(--wood-1); background-image: var(--noise); border: 1px solid var(--brass); border-top: 3px solid var(--brass); box-shadow: var(--shadow-2); border-radius: 0 0 3px 3px; }
.nav .submenu li { width: 100%; }
.nav .submenu a, .nav .submenu .tool-btn { width: 100%; white-space: nowrap; font-size: .98rem; padding: .55rem .8rem; justify-content: flex-start; }
.nav .submenu a[aria-current="page"] { box-shadow: none; background: rgba(255, 220, 150, .12); }
.nav .has-menu:hover > .submenu, .nav .has-menu:focus-within > .submenu, .nav .has-menu.open > .submenu { display: flex; }
.nav-tools .submenu { left: auto; right: 0; }
/* A dividing line, and a page still to be written (faded, not a link, 'coming soon'). */
.nav .submenu .menu-sep { height: 0; margin: .3rem .6rem; border-top: 1px solid var(--chrome-line); }
.nav .menu-soon { display: block; padding: .55rem .8rem; font-family: var(--font-sc); font-size: .98rem; letter-spacing: .07em; line-height: 1.1;
color: var(--chrome-ink); opacity: .5; cursor: default; white-space: nowrap; }
.nav .menu-soon small { font-family: var(--font-display); font-style: italic; letter-spacing: 0; font-size: .82rem; }
/* Explore: a wide menu of headed columns, centred under its name. */
.nav .submenu.mega { left: 50%; transform: translateX(-50%); width: 46rem; padding: .9rem .6rem .6rem; }
.nav .has-mega:hover > .submenu.mega, .nav .has-mega:focus-within > .submenu.mega, .nav .has-mega.open > .submenu.mega { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 .4rem; align-items: start; }
.nav .mega-col { min-width: 0; }
.nav .mega-col > ul { list-style: none; margin: 0; padding: 0; display: block; }
.nav .mega-title { margin: 0 .8rem .35rem; padding-bottom: .3rem; font-family: var(--font-sc); font-size: .85rem; letter-spacing: .14em; color: var(--gilt); border-bottom: 1px solid var(--chrome-line); }
.nav .mega .menu-soon { white-space: normal; }
.nav-tools { display: flex; align-items: center; gap: .2rem; margin-left: .5rem; padding-left: .7rem; border-left: 1px solid var(--chrome-line); }
.menu-toggle { display: none; margin-left: auto; }
/* Above that, the menu is spaced a little tighter so it stays on one line beside the name: the header is never wider
than the page (72rem), and with a member signed in it needs nearly all of it. */
@media (min-width: 75.01rem) {
.nav a, .nav .tool-btn { padding-inline: .5rem; }
.nav .has-menu > a { padding-right: .2rem; }
.nav-tools { margin-left: .2rem; padding-left: .4rem; }
}
@media (max-width: 75rem) { /* below this the menu folds into the ☰ button (it needs about 1150px with a member signed in) */
.menu-toggle { display: inline-flex; }
.nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; display: none;
background: var(--wood-1); border-bottom: 3px solid var(--brass); padding: .5rem 1rem 1rem; box-shadow: var(--shadow-2); }
.nav[data-open="true"] { display: block; }
.nav ul { flex-direction: column; align-items: stretch; }
.nav a, .nav .tool-btn { width: 100%; padding: .8rem .6rem; font-size: 1.15rem; }
.nav .caret { display: none; }
.nav .has-menu { display: block; }
.nav .submenu { display: flex; position: static; min-width: 0; margin: 0 0 .4rem .8rem; padding: 0 0 0 .6rem; background: none; border: 0; border-left: 1px solid var(--chrome-line); box-shadow: none; border-radius: 0; }
.nav .submenu a, .nav .submenu .tool-btn { padding: .55rem .6rem; }
/* In the folded-away menu the wide menu is just its columns, one after another. */
.nav .submenu.mega, .nav .has-mega:hover > .submenu.mega, .nav .has-mega.open > .submenu.mega { display: block; transform: none; width: auto; padding: 0 0 0 .6rem; }
.nav .mega-title { margin: .6rem .6rem .2rem; }
.nav .menu-soon { padding: .55rem .6rem; }
.nav .menu-label span { display: none; }
.nav-tools { margin: .4rem 0 0; padding: .6rem 0 0; border: 0; border-top: 1px solid rgba(214, 181, 102, .3); flex-direction: column; align-items: stretch; }
.brand-tag { display: none; }
}
.site-footer {
margin-top: 4rem; color: var(--footer-ink); text-align: center;
background-color: var(--wood-0);
background-image: var(--noise), linear-gradient(180deg, var(--wood-1), var(--wood-0));
border-top: 3px solid var(--brass);
box-shadow: inset 0 1px 0 rgba(255, 220, 160, .15), 0 -8px 20px rgba(20, 10, 4, .3);
padding: 2.5rem 0 2rem;
}
.site-footer a { color: var(--gilt); }
.site-footer a:hover { color: var(--footer-link-hover); }
.bookplate {
display: inline-block; padding: 1rem 2rem; margin-bottom: 1.5rem; border: 1px solid var(--brass); outline: 1px solid rgba(214, 181, 102, .4); outline-offset: 4px;
font-family: var(--font-display); color: var(--gilt);
}
.bookplate .ex { font-family: var(--font-sc); letter-spacing: .3em; font-size: .85rem; display: block; color: var(--chrome-ink-soft); }
.bookplate .motto { font-style: italic; font-size: 1.15rem; display: block; margin-top: .2rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; list-style: none; padding: 0; margin: 0 0 1rem; font-family: var(--font-sc); letter-spacing: .05em; }
.fineprint { font-size: .92rem; color: var(--footer-faint); max-width: 44rem; margin-inline: auto; }
/* 6 ─ Components ──────────────────────────────────────────────────────── */
.eyebrow { font-family: var(--font-sc); letter-spacing: .14em; color: var(--oxblood); font-size: .95rem; margin: 0 0 .3rem; text-transform: none; }
:root[data-theme="dark"] .eyebrow { color: var(--brass-2); }
.orn { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--brass); margin: 1.4rem auto; max-width: 20rem; font-size: 1.35rem; line-height: 1; }
.orn::before, .orn::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--brass)); }
.orn::after { transform: scaleX(-1); }
.section-title { text-align: center; margin-bottom: 2rem; }
.section-title h2 { margin-bottom: .2rem; }
.section-title p { color: var(--ink-soft); font-style: italic; margin: 0; }
/* Buttons */
.btn {
--bg: var(--oxblood); --fg: var(--on-accent); --bd: var(--accent-edge);
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-sc); font-size: 1.08rem; letter-spacing: .07em; line-height: 1.1;
padding: .7rem 1.3rem; color: var(--fg); background: linear-gradient(180deg, var(--oxblood-2), var(--bg));
border: 1px solid var(--bd); border-radius: 3px; text-decoration: none; cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 0 rgba(0, 0, 0, .25), var(--shadow-1);
transition: transform .12s ease, filter .12s ease;
}
.btn:hover { color: var(--fg); filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.btn--brass { --bg: #8d6a24; --fg: #1f1409; --bd: #5c4313; background: linear-gradient(180deg, var(--brass-2), var(--brass)); }
.btn--green { --bg: var(--green); --fg: #f2e8c6; --bd: #12201a; background: linear-gradient(180deg, var(--green-2), var(--green)); }
.btn--ghost { background: transparent; color: var(--link); border-color: var(--rule); box-shadow: none; }
.btn--ghost:hover { background: var(--paper-2); color: var(--link-hover); }
.btn--small { padding: .4rem .8rem; font-size: .95rem; }
.btn--block { width: 100%; }
.btn--danger { --bg: #9c1d1d; --fg: #fff2ea; --bd: #5c0f0f; background: linear-gradient(180deg, #b8241f, var(--bg)); }
/* Forms */
label { font-family: var(--font-sc); letter-spacing: .05em; font-size: 1rem; color: var(--ink-soft); display: block; margin-bottom: .25rem; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], select, textarea {
width: 100%; font: inherit; color: var(--ink); background: var(--paper-3);
border: 1px solid var(--rule); border-radius: 3px; padding: .6rem .75rem;
box-shadow: inset 0 1px 3px rgba(60, 35, 10, .18);
}
input::placeholder { color: var(--ink-faint); font-style: italic; }
select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat; }
.field { margin-bottom: 1rem; }
.field .hint { font-size: .92rem; color: var(--ink-faint); margin: .25rem 0 0; }
.field .error, .form-error { color: #9c1d1d; font-size: .98rem; margin: .3rem 0 0; }
:root[data-theme="dark"] .field .error, :root[data-theme="dark"] .form-error { color: #ff9d8a; }
.form-error { padding: .6rem .8rem; background: rgba(156, 29, 29, .09); border-left: 3px solid #9c1d1d; }
.form-ok { padding: .6rem .8rem; background: rgba(35, 90, 50, .1); border-left: 3px solid #2e6b3f; }
.check { display: flex; gap: .55rem; align-items: center; font-family: var(--font-body); letter-spacing: 0; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--oxblood); }
.searchbar { display: flex; gap: .5rem; }
.searchbar input { flex: 1; }
/* Chips, badges, tags */
.chip {
display: inline-block; padding: .18rem .7rem; font-family: var(--font-sc); font-size: .95rem; letter-spacing: .04em;
color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 99px; text-decoration: none;
}
a.chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.chip[aria-pressed="true"], .chip.is-on, .dict-tabs .chip[aria-current="page"] { background: var(--oxblood); color: var(--on-accent); border-color: var(--accent-edge); }
.badge { display: inline-block; font-family: var(--font-sc); font-size: .82rem; letter-spacing: .08em; padding: .1rem .55rem; color: #1f1409; background: linear-gradient(180deg, var(--brass-2), var(--brass)); border-radius: 2px; }
.meta { color: var(--ink-faint); font-size: .98rem; }
.meta > * + *::before { content: "·"; margin: 0 .5em; }
/* Cards, plaques */
.card { background: var(--paper-3); border: 1px solid var(--rule-soft); border-radius: 3px; box-shadow: var(--shadow-1); padding: 1.25rem 1.4rem; }
/* Library catalogue card: ruled lines, red margin rule and a punched hole */
.index-card {
position: relative; padding: 2.2rem 2rem 3.2rem 3.4rem; color: #2b1d13;
background:
linear-gradient(90deg, transparent 2.6rem, rgba(180, 45, 40, .55) 2.6rem 2.66rem, transparent 2.66rem),
repeating-linear-gradient(180deg, transparent 0 1.9rem, rgba(70, 105, 160, .28) 1.9rem 1.96rem),
linear-gradient(180deg, #fbf3dc, #f3e7c6);
border: 1px solid #cdb98a; box-shadow: var(--shadow-2), inset 0 0 40px rgba(150, 110, 40, .12);
border-radius: 3px; transform: rotate(-.4deg);
}
.index-card::after { content: ""; position: absolute; left: 50%; bottom: .8rem; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.index-card .eyebrow { color: #a3322c; }
.index-card blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.5; font-style: italic; }
.index-card cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--font-sc); letter-spacing: .06em; color: #4b3625; }
.index-card cite a { color: #7a1f1b; }
:root[data-theme="dark"] .index-card { color: #2b1d13; }
:root[data-theme="dark"] .index-card .eyebrow { color: #a3322c; }
:root[data-theme="dark"] .index-card a { color: #7a1f1b; }
/* Covers (real image, or a leather binding drawn in CSS) */
.cover {
--c: #5b2a1e; position: relative; display: block; aspect-ratio: 2 / 3; width: 100%; overflow: hidden;
border-radius: 2px 4px 4px 2px; background: transparent; color: var(--gilt); text-decoration: none;
}
.cover--blank::after { /* spine crease + edge highlight on placeholder bindings only */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(255, 255, 255, .12) 3%, rgba(0, 0, 0, .12) 6%, transparent 12%, transparent 92%, rgba(0, 0, 0, .18));
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.28) contrast(.96) saturate(.95); }
/* Let image shadows extend beyond the frame and follow transparent cover edges. */
.cover:not(.cover--blank) { overflow: visible; }
.cover:not(.cover--blank) img {
border-radius: inherit;
filter: sepia(.28) contrast(.96) saturate(.95)
drop-shadow(2px 3px 0 rgba(0, 0, 0, .18))
drop-shadow(5px 8px 8px rgba(30, 15, 5, .35));
}
.cover--blank { display: grid; place-items: center; text-align: center; padding: 12% 14% 12% 18%;
box-shadow: 2px 3px 0 rgba(0, 0, 0, .18), 5px 8px 16px rgba(30, 15, 5, .35);
background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 40%, rgba(0, 0, 0, .25)), var(--noise), var(--c); }
.cover--blank .frame { position: absolute; inset: 7% 7% 7% 12%; border: 1px solid var(--gilt); outline: 1px solid rgba(220, 187, 106, .5); outline-offset: 3px; pointer-events: none; }
.cover--blank .t { font-family: var(--font-sc); font-size: clamp(.95rem, 2.2vw, 1.25rem); line-height: 1.2; letter-spacing: .05em; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); text-wrap: balance; position: relative; }
.cover--blank .a { display: block; margin-top: .7rem; font-family: var(--font-display); font-style: italic; font-size: .8em; opacity: .85; letter-spacing: .02em; }
/* A removable paper wrapper identifies pieces borrowing their collection's cover. */
.collection-band {
--band-paper: #f4ead4;
position: absolute; z-index: 1; left: -2%; right: -2%; bottom: 12%;
padding: .65rem .55rem; text-align: center; color: #382719;
background: linear-gradient(90deg, #00000018, transparent 7%, #ffffff22 48%, transparent 93%, #00000018), var(--band-paper);
border-block: 1px solid #92754e80;
box-shadow: 0 3px 5px #0006, inset 0 2px #ffffff55, inset 0 -2px #ffffff33;
pointer-events: none;
}
.collection-band--poem { --band-paper: #e8d6ae; }
.collection-band--essay { --band-paper: #dce1cc; }
.collection-band__kind { display: block; font: .62rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .13em; margin-bottom: .25rem; }
.collection-band__title { display: block; font: 500 1.3rem/1.05 "Caveat", "EB Garamond", Georgia, serif; text-wrap: balance; overflow-wrap: anywhere; }
/* Pager, states */
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.5rem; font-family: var(--font-sc); letter-spacing: .05em; }
.state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); font-style: italic; }
.state strong { display: block; font-family: var(--font-display); font-size: 1.4rem; font-style: normal; color: var(--ink); margin-bottom: .3rem; }
.spinner { display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--oxblood); animation: spin 1s linear infinite; vertical-align: -.35em; margin-right: .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 7 ─ Home ────────────────────────────────────────────────────────────── */
.hero {
position: relative; overflow: hidden; isolation: isolate; color: var(--cream); text-align: center;
padding: clamp(3rem, 8vw, 6rem) 1rem clamp(2.5rem, 6vw, 4.5rem);
background-color: var(--green);
background-image:
radial-gradient(60% 90% at 85% 0%, var(--hero-glow), transparent 60%),
radial-gradient(120% 100% at 50% 110%, rgba(0, 0, 0, .55), transparent 60%),
var(--noise),
linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
border-bottom: 3px solid var(--brass);
box-shadow: inset 0 0 90px rgba(0, 0, 0, .55);
}
.hero::before { /* gilt double frame, like a book cover */
content: ""; position: absolute; inset: .9rem; border: 1px solid var(--brass); outline: 1px solid rgba(214, 181, 102, .45); outline-offset: 5px; pointer-events: none; z-index: -1;
}
.hero h1 { font-family: var(--font-sc); letter-spacing: .08em; color: var(--gilt); text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 30px rgba(214, 181, 102, .3); margin-bottom: .4rem; }
.hero .lede { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--hero-ink); max-width: 38rem; margin: 0 auto 1.8rem; }
.hero .searchbar { max-width: 34rem; margin-inline: auto; }
.hero .searchbar input { background: #fbf3dc; color: #2b1d13; border-color: #8d6a24; font-size: 1.15rem; }
.hero .searchbar input::placeholder { color: #7d6650; }
.hero .quick { display: flex; flex-wrap: wrap; gap: .5rem .8rem; justify-content: center; margin-top: 1.4rem; font-family: var(--font-sc); letter-spacing: .05em; }
.hero .quick a { color: var(--gilt); }
@media (max-width: 40rem) { .hero .quick .dot { display: none; } .hero .quick { flex-direction: column; align-items: center; } }
.motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--mote); box-shadow: 0 0 6px var(--mote-glow); opacity: 0; animation: drift var(--d, 16s) linear var(--s, 0s) infinite; left: var(--x, 50%); }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .5; } 100% { transform: translate(var(--dx, 30px), -34rem); opacity: 0; } }
.shelf-scroll { overflow-x: auto; padding: 1.5rem 1rem 0; scrollbar-color: var(--brass) transparent; }
.shelf { position: relative; display: flex; align-items: flex-end; gap: 0; width: max-content; min-width: 100%; margin-inline: auto; justify-content: center; padding: 0 1.5rem; }
.shelf-plank { height: 22px; margin-inline: 0; background: linear-gradient(180deg, var(--wood-3), var(--wood-1)); border-top: 2px solid var(--brass); box-shadow: 0 10px 18px rgba(20, 10, 4, .4), inset 0 1px 0 rgba(255, 220, 160, .25); }
.spine {
--c: #5b2a1e; --w: 44px; --h: 180px;
position: relative; display: flex; align-items: center; justify-content: center; width: var(--w); height: var(--h); flex: none;
color: var(--gilt); text-decoration: none; border-radius: 2px 2px 0 0;
background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 18%, transparent 70%, rgba(0, 0, 0, .3)), var(--noise), var(--c);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 1px 0 2px rgba(0, 0, 0, .4);
transition: transform .2s ease;
}
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--gilt); opacity: .8; }
.spine::before { top: 12px; box-shadow: 0 5px 0 rgba(220, 187, 106, .6); }
.spine::after { bottom: 12px; box-shadow: 0 -5px 0 rgba(220, 187, 106, .6); }
.spine span { display: inline-block; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--h) - 48px); transform: rotate(-90deg); font-family: var(--font-sc); letter-spacing: .05em; font-size: .92rem; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.spine--image { background: none; box-shadow: 1px 0 3px rgba(0, 0, 0, .4); }
.spine--image::before, .spine--image::after { content: none; }
.spine--image span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.spine-art { width: 100%; height: 100%; display: block; border-radius: inherit; }
.spine-art[hidden] { display: none; }
.spine:hover, .spine:focus-visible { transform: translateY(-12px); color: #fff0c4; z-index: 2; }
/* On a narrow screen a shelf scrolls sideways rather than squeezing its books: every spine keeps its own width,
so a spine image is never squashed. */
@media (max-width: 40rem) {
.shelf-scroll { padding-inline: .5rem; }
.shelf { padding-inline: .25rem; }
}
.feature-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .feature-grid { grid-template-columns: 1.35fr 1fr; } }
.botw { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 1.4rem; align-items: center; }
.botw .ribbon { position: absolute; top: -6px; right: 1.2rem; width: 1.6rem; height: 3.2rem; background: var(--oxblood); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.botw-card { position: relative; }
.botw h3 { margin-bottom: .2rem; }
.doors { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.door {
display: block; text-decoration: none; text-align: center; padding: 1.6rem 1.2rem 1.4rem; color: var(--ink);
background: var(--paper-3); border: 1px solid var(--rule); border-radius: 60px 60px 3px 3px / 40px 40px 3px 3px;
box-shadow: var(--shadow-1), inset 0 0 0 5px var(--paper-3), inset 0 0 0 6px var(--rule-soft); transition: transform .15s ease, box-shadow .15s ease;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), inset 0 0 0 5px var(--paper-3), inset 0 0 0 6px var(--brass); color: var(--ink); }
.door .glyph { display: block; font-size: 2rem; color: var(--oxblood); margin-bottom: .3rem; }
:root[data-theme="dark"] .door .glyph { color: var(--brass-2); }
.door h3 { margin-bottom: .3rem; }
.door p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; text-align: center; }
.ledger div { padding: 1rem .5rem; border-top: 2px solid var(--brass); border-bottom: 1px solid var(--rule); }
.ledger b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; color: var(--oxblood); line-height: 1.1; }
:root[data-theme="dark"] .ledger b { color: var(--brass-2); }
.ledger span { font-family: var(--font-sc); letter-spacing: .06em; color: var(--ink-soft); font-size: .98rem; }
.post-list { display: grid; gap: 1.2rem; }
.post { display: block; text-decoration: none; color: inherit; padding: 1.1rem 1.3rem; background: var(--paper-3); border: 1px solid var(--rule-soft); border-left: 4px solid var(--brass); border-radius: 2px; box-shadow: var(--shadow-1); }
.post:hover { border-left-color: var(--oxblood); color: inherit; }
.post h3 { margin-bottom: .2rem; color: var(--link); }
.post p { margin: .4rem 0 0; color: var(--ink-soft); font-size: 1.05rem; }
/* 8 ─ Library catalogue ───────────────────────────────────────────────── */
.catalogue { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) { .catalogue { grid-template-columns: 17rem minmax(0, 1fr); } }
.drawer { background: var(--paper-3); border: 1px solid var(--rule); border-top: 6px solid var(--wood-3); border-radius: 3px; padding: 1rem 1.2rem 1.3rem; box-shadow: var(--shadow-1); }
.drawer summary { font-family: var(--font-sc); letter-spacing: .08em; font-size: 1.2rem; cursor: pointer; }
@media (min-width: 62rem) { .drawer { position: sticky; top: 1rem; } .drawer summary { pointer-events: none; list-style: none; } .drawer summary::-webkit-details-marker { display: none; } }
.drawer h4 { font-family: var(--font-sc); letter-spacing: .08em; color: var(--oxblood); margin: 1.2rem 0 .5rem; font-size: 1rem; }
:root[data-theme="dark"] .drawer h4 { color: var(--brass-2); }
.drawer .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.book-grid { display: grid; gap: 2rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.book { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit; position: relative; }
.book .cover { transition: transform .18s ease; }
.book:hover .cover, .book:focus-visible .cover { transform: translateY(-4px) rotate(-.6deg); }
.book h3 { font-size: 1.08rem; line-height: 1.25; margin: 0; color: var(--ink); }
.book:hover h3 { color: var(--link); }
.book .by { font-style: italic; color: var(--ink-soft); font-size: .98rem; margin: 0; }
.book .meta { font-size: .9rem; }
.book .from { font-size: .92rem; color: var(--ink-faint); margin: 0; }
.book .from em { font-style: italic; }
/* The Reading Room (js/pages/readingroom.js) */
.rr-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0 auto 1.4rem; max-width: 60rem; }
.rr-nav .chip { text-decoration: none; }
.rr-nav .chip small { color: var(--ink-faint); font-size: .8em; }
.rr-nav .chip[aria-current="page"] { background: var(--oxblood); color: var(--on-accent); border-color: var(--accent-edge); }
.rr-nav .chip[aria-current="page"] small { color: inherit; opacity: .8; }
.rr-section { padding-block: 1rem 2.5rem; border-top: 1px solid var(--rule-soft); }
.rr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 1.4rem; }
.rr-head h2 { margin: 0; }
.rr-head h2 a { color: inherit; text-decoration: none; }
.rr-head h2 a:hover { color: var(--link); }
.rr-count { font-family: var(--font-sc); letter-spacing: .06em; color: var(--ink-faint); white-space: nowrap; }
.rr-more { text-align: center; margin: 1.6rem 0 0; }
/* The search and era, under the sections */
.rr-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .8rem 1.2rem; margin: 0 auto 1.6rem; max-width: 62rem; }
.rr-filter { display: grid; gap: .25rem; flex: 1 1 14rem; }
.rr-filter label { font-family: var(--font-sc); letter-spacing: .06em; color: var(--ink-soft); font-size: .95rem; }
.rr-filter input, .rr-filter select { width: 100%; }
.rr-status { text-align: center; color: var(--ink-soft); font-style: italic; min-height: 1.6em; margin: 0 0 .6rem; }
.rr-loading { opacity: .55; transition: opacity .2s; }
.cover > .badge { position: absolute; top: .5rem; left: -.35rem; z-index: 2; box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.cover > .badge--prize { left: auto; right: -.35rem; background: linear-gradient(180deg, #b3452e, var(--oxblood)); color: var(--on-accent); }
.cover > .badge--prize.tier-gold { background: linear-gradient(180deg, #f4dd8c, #c9a227); color: #3a2b06; }
.cover > .badge--prize.tier-silver { background: linear-gradient(180deg, #e9eaee, #a9adb5); color: #23262b; }
/* 9 ─ A work's page ───────────────────────────────────────────────────── */
.frontispiece { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-block: 2.5rem 1rem; }
@media (min-width: 46rem) { .frontispiece { grid-template-columns: minmax(12rem, 17rem) 1fr; gap: 3rem; } }
.frontispiece .cover { max-width: 17rem; margin-inline: auto; }
.credit { font-size: .8rem; color: var(--ink-faint); margin: .6rem 0 0; text-align: center; max-width: 17rem; margin-inline: auto; }
.byline { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.contributors { margin: -.4rem 0 .8rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.4rem 0; }
.opening { position: relative; margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 3px solid var(--brass); background: var(--paper-2); font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; }
.opening small { display: block; font-family: var(--font-sc); font-style: normal; letter-spacing: .1em; font-size: .85rem; color: var(--ink-faint); margin-bottom: .3rem; }
.contents { columns: 16rem; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.contents li { break-inside: avoid; border-bottom: 1px dotted var(--rule); }
.contents a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .2rem; text-decoration: none; color: var(--ink); }
.contents a:hover { background: var(--paper-2); color: var(--link); }
.contents a.is-current { font-weight: 600; color: var(--oxblood); }
.contents .t { font-family: var(--font-body); }
.contents .m { color: var(--ink-faint); font-size: .9rem; white-space: nowrap; }
.contents .unread { opacity: .6; }
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.notice-small { font-size: .88rem; color: var(--ink-faint); margin-top: .8rem; }.shelf-control { display: inline-flex; align-items: center; gap: .5rem; }
.shelf-control select { width: auto; padding-block: .55rem; }
/* 10 ─ Reader ─────────────────────────────────────────────────────────── */
.progress { position: fixed; z-index: 50; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brass), var(--brass-2)); box-shadow: 0 0 6px rgba(214, 181, 102, .7); }
.reader-bar {
position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
padding: .55rem 1rem; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
}
.reader-bar .where { font-family: var(--font-sc); letter-spacing: .05em; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 12rem; }
.reader-bar .tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; align-items: center; }
.reader-bar select { width: auto; max-width: 14rem; padding-block: .35rem; font-size: 1rem; }
.icon-btn { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem; color: var(--ink); background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; font-family: var(--font-display); }
.icon-btn:hover { border-color: var(--oxblood); color: var(--oxblood); }
.icon-btn[aria-pressed="true"] { background: var(--oxblood); border-color: var(--accent-edge); color: var(--on-accent); }
.icon-btn--small { min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; font-size: 1.05rem; }
.icon-btn:disabled { opacity: .4; cursor: default; border-color: var(--rule); color: var(--ink); }
.focus-settings:not([hidden]) { display: inline-flex; gap: .7rem; align-items: center; padding: .15rem .55rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2); }
.focus-step { display: inline-flex; gap: .25rem; align-items: center; }
.focus-label { font-family: var(--font-sc); letter-spacing: .05em; font-size: .9rem; color: var(--ink-soft); margin-right: .1rem; }
.focus-value { min-width: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
@media print { .reader { -webkit-mask-image: none !important; mask-image: none !important; } }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.reader { width: min(100% - 2rem, var(--measure)); margin: 0 auto; padding: 3rem 0 2rem; font-size: var(--reader-size); line-height: 1.75; }
.reader .chapter-head { text-align: center; margin-bottom: 2.2rem; }
.reader .chapter-head .book { font-family: var(--font-sc); letter-spacing: .1em; color: var(--ink-faint); font-size: 1rem; }
.reader .chapter-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .3rem 0 .2rem; }
.reader .body p { margin: 0; text-indent: 1.6em; hyphens: auto; -webkit-hyphens: auto; text-align: justify; white-space: pre-line; overflow-wrap: break-word; }
.reader .body p:first-child { text-indent: 0; }
.reader .body p:first-child::first-letter { font-family: var(--font-display); float: left; font-size: 3.5em; line-height: .82; padding: .05em .08em 0 0; color: var(--oxblood); }
:root[data-theme="dark"] .reader .body p:first-child::first-letter { color: var(--brass-2); }
.reader .body.verse p { text-indent: 0; text-align: left; white-space: pre-wrap; margin: 0 0 1.4em; hyphens: none; padding-left: 1.4em; }
.reader .body.verse p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; }
/* Plays: no first-line indents and no large first letter; a gap between speeches, stage directions in italics. */
.reader .body.play p { text-indent: 0; text-align: left; hyphens: none; -webkit-hyphens: none; margin: 0 0 .9em; }
.reader .body.play p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; }
.reader .body.play p.stage { font-style: italic; }
.reader .body.play p.scene { font-family: var(--font-sc); letter-spacing: .06em; text-align: center; color: var(--ink-soft); margin: 2.2em 0 1.1em; }
.reader .body.play p.scene:first-child { margin-top: 0; }
/* Dictionaries: no drop cap, no first-line paragraph indents - each entry starts flush. */
.reader .body.dictionary p { text-indent: 0; }
.reader .body.dictionary p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; line-height: inherit; }
.reader .body.dictionary p.dd-jump { outline: 2px solid var(--oxblood); outline-offset: .4rem; border-radius: 2px; }
.reader .body em { font-style: italic; }
/* Authorial marginalia: ordinary document order on phones, three columns when there is room.
Grid rows grow to the tallest note, so long notes never overlap the following passage. */
.reader .marginal-passage { margin-block: 1em; min-width: 0; }
.reader .body .passage-text p { text-align: left; }
.reader .margin-notes { min-width: 0; margin-top: .65em; }
.reader .margin-note {
background: var(--paper-2); color: var(--ink); border-left: 3px solid var(--rule);
padding: .65em .85em; font-size: .85em; line-height: 1.45; margin-bottom: .65em;
overflow-wrap: anywhere;
}
.margin-note-label { font-family: var(--font-sc); font-size: .8em; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .35em; }
.reader .body .margin-note p { text-indent: 0; text-align: left; white-space: pre-wrap; hyphens: none; overflow-wrap: anywhere; }
.reader .body .margin-note p + p { margin-top: .75em; }
.reader .body.has-marginalia p:first-child::first-letter,
:root[data-theme="dark"] .reader .body.has-marginalia p:first-child::first-letter {
float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; font-family: inherit;
}
@media screen and (min-width: 70rem) {
.reader--marginalia { width: min(100% - 3rem, 70rem); }
.reader--marginalia .chapter-head,
.reader--marginalia .body > :not(.marginal-passage),
.reader--marginalia .notes-section { max-width: var(--measure); margin-inline: auto; }
.reader .marginal-passage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.reader .passage-text { grid-column: 2; grid-row: 1; min-width: 0; }
.reader .margin-notes { grid-row: 1; margin-top: 0; }
.reader .margin-notes--left { grid-column: 1; }
.reader .margin-notes--right { grid-column: 3; }
}
.notes-section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.notes-section h2 { font-family: var(--font-sc); letter-spacing: .06em; font-size: 1.2rem; text-align: left; margin-bottom: 1rem; }
.note-list { list-style: decimal; padding-left: 1.4em; margin: 0; display: grid; gap: 1.2rem; }
.note-item { font-size: .95rem; line-height: 1.6; }
.note-head { margin: 0 0 .25em; }
.note-label { font-family: var(--font-sc); color: var(--ink-faint); margin-right: .5em; }
.note-text { text-indent: 0; text-align: left; white-space: normal; margin: 0 0 .4em; }
.note-text em { font-style: italic; }
.note-source { margin: 0; color: var(--ink-soft); font-size: .85rem; font-style: italic; }
.note-back { text-decoration: none; margin-left: .3em; }
.note-item:target { outline: 2px solid var(--oxblood); outline-offset: .4rem; border-radius: 2px; }
.fn-mark { all: unset; font: inherit; color: inherit; text-indent: 0; cursor: pointer; border-bottom: 1px dotted var(--oxblood); } /* a button is laid out as its own little box, so it would otherwise inherit the paragraph's first-line indent */
.fn-mark:hover, .fn-mark[aria-expanded="true"] { background: var(--paper-2); }
.fn-mark:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.fn-mark sup { color: var(--oxblood); font-size: .7em; margin-left: .05em; }
/* The pop-up itself: the same card as a dictionary look-up (see .lookup), but on the recessed-panel tone
rather than the raised-card one, so the two kinds of pop-up are never mistaken for each other. */
.footnote-card { position: absolute; z-index: 60; width: min(24rem, calc(100vw - 16px)); padding: .8rem 1rem .7rem; background: var(--paper-2); color: var(--ink);
border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 28px rgba(23, 13, 7, .28); font-size: 1rem; line-height: 1.45; }
.footnote-card p { margin: 0 0 .35rem; }
.footnote-card .note-text { font-size: 1rem; }
.reader-end { width: min(100% - 2rem, var(--measure)); margin: 1rem auto 0; }
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.chapter-nav a { display: block; padding: .9rem 1.1rem; text-decoration: none; background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-1); color: var(--ink); }
.chapter-nav a:hover { border-color: var(--oxblood); }
.chapter-nav small { display: block; font-family: var(--font-sc); letter-spacing: .1em; color: var(--ink-faint); }
.chapter-nav .next { text-align: right; grid-column: 2; }
.chapter-nav .prev { grid-column: 1; }
/* 11 ─ Authors ────────────────────────────────────────────────────────── */
.az { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: 0 0 2rem; }
.az a, .az span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; font-family: var(--font-sc); border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; background: var(--paper-3); }
.az span { opacity: .35; }
.az a:hover, .az a[aria-current="true"] { background: var(--oxblood); color: var(--on-accent); border-color: var(--accent-edge); }
.author-grid { display: grid; gap: 1.6rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.author { text-align: center; text-decoration: none; color: inherit; display: block; }
.portrait {
--size: 8.5rem; position: relative; width: var(--size); height: calc(var(--size) * 1.22); margin: 0 auto .7rem; overflow: hidden;
border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%; background: var(--paper-2);
border: 5px solid transparent; background-clip: padding-box;
box-shadow: 0 0 0 2px var(--brass), 0 0 0 5px var(--wood-2), 0 0 0 6px var(--brass-2), var(--shadow-2), inset 0 0 12px rgba(0, 0, 0, .35);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: sepia(.65) contrast(.92) brightness(.98); }
/* Top Trumps card art used when there is no public-domain or Creative Commons portrait: shown as drawn, not aged to sepia */
.portrait img[src^="img/cards/"] { filter: none; object-position: 50% 45%; }
.portrait .initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; color: var(--brass); background: linear-gradient(160deg, var(--wood-3), var(--wood-1)); }
.portrait--lg { --size: 13rem; }
.author h3 { font-size: 1.15rem; margin: .5rem 0 .1rem; }
.author:hover h3 { color: var(--link); }
.author-head { display: grid; gap: 2rem; grid-template-columns: 1fr; text-align: center; padding-block: 2.5rem 1rem; justify-items: center; }
@media (min-width: 46rem) { .author-head { grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: 3rem; align-items: center; } }
.author-bio { max-width: 42rem; line-height: 1.6; white-space: pre-line; }
/* The page's text as the server sends it (page.php), for search engines and readers without JavaScript. The JavaScript
replaces it with the full page as soon as it runs. */
.prerender { padding-block: 2.5rem; }
.prerender h1 { margin-top: 0; }
.prerender ol, .prerender ul { line-height: 1.7; }
/* Timeline of a writer's life (timeline.html) */
.tl-head { display: grid; justify-items: center; }
.tl-head .portrait { --size: 7rem; margin-bottom: .8rem; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 6.6rem; width: 2px; background: linear-gradient(180deg, transparent, var(--brass) 3%, var(--brass) 97%, transparent); }
.tl-item { display: grid; grid-template-columns: 5.6rem 2rem 1fr; gap: 0 .5rem; align-items: start; padding: .55rem 0 1.1rem; }
.tl-when { text-align: right; line-height: 1.2; padding-top: .15rem; }
.tl-year { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--oxblood); }
.tl-date { display: block; font-size: .85rem; color: var(--ink-soft); }
.tl-dot { position: relative; z-index: 1; justify-self: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
background: var(--paper-3); border: 1px solid var(--brass); color: var(--brass); font-size: .95rem; box-shadow: 0 0 0 4px var(--paper); }
.tl-body h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.tl-kind { margin: 0 0 .15rem; font-family: var(--font-sc); font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); }
.tl-detail { margin: .25rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.tl-prize .tl-dot { background: var(--brass); color: var(--paper-3); }
.tl-with-cover { display: flex; align-items: flex-start; gap: .75rem; }
.tl-with-cover .tl-text { flex: 1 1 auto; min-width: 0; }
.tl-cover { flex: none; display: block; line-height: 0; }
/* --cover-h is set by timeline.js to the height of the event's text beside it. */
.tl-cover img { display: block; height: var(--cover-h, 3.6rem); width: auto; max-width: 5rem; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-1); }
.tl-place { font-style: italic; }
.tl-place::before { content: "⚲ "; font-style: normal; color: var(--brass); }
.tl-range .tl-dot { border-radius: 40%; }
.tl-range .tl-body { border-left: 3px solid color-mix(in srgb, var(--brass) 45%, transparent); padding-left: .6rem; margin-left: -.2rem; }
.tl-birth .tl-dot, .tl-death .tl-dot { background: var(--wood-3); border-color: var(--wood-1); color: #f3e6c4; }
@media (max-width: 30rem) {
.timeline::before { left: 4.9rem; }
.tl-item { grid-template-columns: 3.9rem 2rem 1fr; }
.tl-year { font-size: 1.15rem; }
}
/* 12 ─ Language / opening lines ───────────────────────────────────────── */
.quote-list { display: grid; gap: 1.2rem; }
.quote { padding: 1.2rem 1.5rem; background: var(--paper-3); border: 1px solid var(--rule-soft); border-radius: 3px; box-shadow: var(--shadow-1); position: relative; }
.quote::before { content: "“"; position: absolute; left: .5rem; top: -.5rem; font-family: var(--font-display); font-size: 4rem; color: var(--brass); opacity: .5; line-height: 1; }
.quote blockquote { margin: 0 0 .6rem; font-family: var(--font-display); font-style: italic; font-size: 1.28rem; line-height: 1.5; padding-left: 1.2rem; }
.quote cite { font-style: normal; font-family: var(--font-sc); letter-spacing: .05em; padding-left: 1.2rem; display: block; color: var(--ink-soft); }
.article-body { font-size: 1.22rem; line-height: 1.7; }
.article-body p { text-align: left; }
/* Pieces an editor may use in the text of news, articles and stories (see js/richtext.js) */
.article-body > * + * { margin-top: 1rem; }
.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { margin: 1.8rem 0 .5rem; line-height: 1.2; }
.article-body h2 { font-size: 1.7rem; }
.article-body h3 { font-size: 1.4rem; }
.article-body h4, .article-body h5, .article-body h6 { font-size: 1.15rem; font-family: var(--font-sc); letter-spacing: .05em; }
.article-body ul, .article-body ol { padding-left: 1.6rem; }
.article-body li { margin-block: .3rem; }
.article-body li > ul, .article-body li > ol { margin-top: .3rem; }
.article-body blockquote { margin-inline: 0; padding: .4rem 1.2rem; border-left: 3px solid var(--brass); background: var(--paper-2); font-style: italic; }
.article-body blockquote > * + * { margin-top: .6rem; }
.article-body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); margin-block: 1.8rem; }
.article-body img { max-width: 100%; height: auto; display: block; margin-inline: auto; border: 1px solid var(--rule); padding: .3rem; background: var(--paper-3); }
.article-body figure { margin-inline: 0; text-align: center; }
.article-body figcaption { font-size: .95rem; color: var(--ink-soft); font-style: italic; margin-top: .3rem; }
.article-body pre { overflow-x: auto; padding: .8rem 1rem; background: var(--paper-2); border: 1px solid var(--rule-soft); font-size: .95rem; line-height: 1.4; }
.article-body code, .article-body kbd { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .88em; background: var(--paper-2); padding: 0 .25em; border-radius: 2px; }
.article-body pre code { background: none; padding: 0; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 1.05rem; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--rule); padding: .35rem .6rem; text-align: left; vertical-align: top; }
.article-body th { background: var(--paper-2); font-family: var(--font-sc); letter-spacing: .04em; }
.article-body caption { caption-side: bottom; font-style: italic; color: var(--ink-soft); padding-top: .3rem; }
.article-body mark { background: rgba(214, 181, 102, .55); color: inherit; }
.article-body sub, .article-body sup { line-height: 0; }
.tool-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-block: 2rem; }
/* 13 ─ Games ──────────────────────────────────────────────────────────── */
.xw { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .xw { grid-template-columns: auto 1fr; } }
.xw-board { --cell: clamp(1.9rem, min(11vw, calc((100vw - 3.5rem) / var(--cols, 5))), 3.6rem); display: grid; gap: 0; padding: .6rem; width: max-content; max-width: 100%; margin-inline: auto; background: var(--wood-2); border: 2px solid var(--brass); box-shadow: var(--shadow-2), inset 0 0 12px rgba(0, 0, 0, .5); border-radius: 3px; }
.xw-cell { position: relative; width: var(--cell); height: var(--cell); background: #fbf3dc; border: 1px solid #6b5230; margin: 0 -1px -1px 0; }
.xw-cell.is-block { background: var(--wood-0); background-image: var(--noise); }
.xw-cell .num { position: absolute; left: 3px; top: 1px; font-size: .68rem; font-family: var(--font-body); color: #5b4636; line-height: 1; pointer-events: none; }
.xw-cell input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font-family: var(--font-display); font-size: calc(var(--cell) * .58); color: #2b1d13; text-transform: uppercase; caret-color: transparent; box-shadow: none; border-radius: 0; }
.xw-cell.in-word { background: #efd9a0; }
.xw-cell.is-active { background: #e2b85c; }
.xw-cell.is-wrong input { color: #b3261e; text-decoration: line-through; }
.xw-cell.is-hint input { color: #1d5a3a; }
.xw-cell input:focus-visible { outline: none; }
.xw-clues { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.xw-clues h3 { font-family: var(--font-sc); letter-spacing: .1em; color: var(--oxblood); border-bottom: 1px solid var(--rule); padding-bottom: .3rem; font-size: 1.15rem; }
:root[data-theme="dark"] .xw-clues h3 { color: var(--brass-2); }
.xw-clues ol { list-style: none; margin: 0; padding: 0; }
.xw-clues li { display: flex; gap: .6rem; padding: .3rem .4rem; cursor: pointer; border-radius: 2px; font-size: 1.08rem; }
.xw-clues li:hover { background: var(--paper-2); }
.xw-clues li.is-current { background: #efd9a0; color: #2b1d13; }
.xw-clues li b { min-width: 1.6rem; font-family: var(--font-display); font-weight: 400; color: var(--oxblood); }
:root[data-theme="dark"] .xw-clues li b { color: var(--brass-2); }
.xw-clues li.is-current b { color: #74201d; }
.xw-clues li i { color: var(--ink-faint); font-size: .85em; white-space: nowrap; margin-left: auto; }
.xw-current { min-height: 3.2rem; padding: .7rem 1rem; margin-bottom: 1rem; background: var(--paper-3); border-left: 4px solid var(--brass); font-size: 1.15rem; }
.xw-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; justify-content: center; }
.xw-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.xw-tabs .chip small { font-family: var(--font-body); opacity: .7; }
.win { padding: 1rem 1.2rem; margin-bottom: 1rem; text-align: center; font-family: var(--font-display); font-size: 1.4rem; background: linear-gradient(180deg, var(--brass-2), var(--brass)); color: #21150b; border-radius: 3px; box-shadow: var(--shadow-2); }
.win--nearly { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; background: var(--paper-3); color: var(--ink); border: 1px solid var(--rule); border-top: 4px solid var(--oxblood); font-size: 1.2rem; }
.win--nearly[hidden] { display: none; }
.quiz { max-width: 42rem; margin-inline: auto; }
.quiz .index-card { margin-bottom: 1.6rem; }
.options { display: grid; gap: .7rem; }
.option { display: block; width: 100%; text-align: left; padding: .8rem 1.1rem; font: inherit; color: var(--ink); background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; box-shadow: var(--shadow-1); }
.option small { display: block; color: var(--ink-faint); font-style: italic; }
.option:hover:not([disabled]) { border-color: var(--oxblood); background: var(--paper-2); }
.option.is-right { background: #cfe3c7; border-color: #2e6b3f; color: #16321f; }
.option.is-wrong { background: #efc9c2; border-color: #9c1d1d; color: #4a1010; }
.option.is-right small, .option.is-wrong small { color: inherit; opacity: .8; }
.score { display: flex; justify-content: center; gap: 2rem; font-family: var(--font-sc); letter-spacing: .06em; margin-bottom: 1.4rem; color: var(--ink-soft); }
.score b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--oxblood); margin-left: .3rem; }
:root[data-theme="dark"] .score b { color: var(--brass-2); }
.verdict { padding: .9rem 1.1rem; margin-top: 1.2rem; border-left: 4px solid var(--brass); background: var(--paper-3); }
/* 14 ─ Membership ─────────────────────────────────────────────────────── */
.ticket {
position: relative; max-width: 30rem; margin: 2.5rem auto; padding: 2rem 2rem 1.6rem; color: #2b1d13;
background: var(--noise), linear-gradient(180deg, #f8efd3, #efe0b8); border: 1px solid #b79c5d; border-radius: 4px;
box-shadow: var(--shadow-2), inset 0 0 0 6px #f8efd3, inset 0 0 0 7px #b79c5d;
}
.ticket h1 { font-size: 2rem; text-align: center; margin-bottom: .2rem; }
.ticket .sub { text-align: center; font-family: var(--font-sc); letter-spacing: .15em; color: #7a1f1b; margin: 0 0 1.4rem; }
.ticket label { color: #574232; }
.ticket a { color: #7a1f1b; }
.ticket input { background: #fffaf0; color: #2b1d13; }
.ticket .switch { text-align: center; margin: 1.2rem 0 0; font-size: 1rem; }
.shelf-tabs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.shelf-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--rule-soft); }
.shelf-row h3 { margin: 0; font-size: 1.25rem; }
.shelf-row .cover { width: 5.5rem; }
/* Write for the Literarium: a member's pieces, their status, and the editor's note */
.write-form { margin-block: 1.5rem 2rem; }
.write-form h2 { margin: 0; }
.preview-pane { padding: 1rem 1.2rem; background: var(--paper); border: 1px dashed var(--rule); border-radius: 3px; min-height: 4rem; }
.sub-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.sub-row { padding: .9rem 1.1rem; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 4px; }
.sub-row .meta { margin: .2rem 0 .4rem; }
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.sub-head h3 { margin: 0; font-size: 1.25rem; }
.sub-status { font-size: .82rem; }
.sub-status--pending { background: var(--brass-2); color: #21150b; border-color: var(--brass); }
.sub-status--accepted { background: #4d7a4a; color: #fff; border-color: #2c4f2a; }
.sub-status--rejected { background: var(--paper-3); color: var(--oxblood); border-color: var(--oxblood); }
.sub-note { margin: .6rem 0; padding: .5rem .9rem; border-left: 3px solid var(--wood-3); background: var(--paper-3); font-style: italic; white-space: pre-line; }
.sub-note-label { font-style: normal; font-family: var(--font-sc); letter-spacing: .04em; color: var(--ink-soft); }
/* A Compendium of Bookshops: list rows, and the Leaflet map */
.bookshop-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .9rem; }
.bookshop-row { padding: .8rem 1rem; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 4px; }
.bookshop-name { margin: 0 0 .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.05rem; }
.bookshop-type { font-size: .78rem; padding: .1rem .55rem; }
.bookshop-meta { margin: .3rem 0 0; color: var(--ink-soft); }
.bookshop-map { height: 34rem; max-height: 70vh; border-radius: 4px; border: 1px solid var(--rule); overflow: hidden; }
.bookshop-popup { font-family: var(--font-body); font-size: .95rem; line-height: 1.5; }
.bookshop-popup a { color: var(--link); }
.bookshop-caveat { padding: .7rem 1rem; margin: 1.2rem 0; background: var(--paper-2); border-left: 3px solid var(--wood-3); font-size: .92rem; color: var(--ink-soft); }
/* 15 ─ Utilities ──────────────────────────────────────────────────────── */
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .92rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
/* A season's own words (js/season.js seasonText): shows only
while that season is on, and the usual words beside it, , only while it is not. */
.season-text { display: none; }
:root[data-season="halloween"] .season-text[data-season="halloween"],
:root[data-season="christmas"] .season-text[data-season="christmas"] { display: inline; }
:root[data-season="halloween"] [data-unless~="halloween"],
:root[data-season="christmas"] [data-unless~="christmas"] { display: none; }
/* 16 ─ Motion & print ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.motes { display: none; }
}
@media print {
body { background: #fff; color: #000; font-size: 12pt; }
.site-header, .site-footer, .reader-bar, .progress, .chapter-nav, .actions, .skip { display: none !important; }
.reader { width: 100%; font-size: 12pt; }
}
/* 17 ─ Additions: tables, word games, editor ──────────────────────────── */
.two-even { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .two-even { grid-template-columns: 1fr 1fr; } }
/* Ledger tables (series, opening-sentence archive) */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-1); background: var(--paper-3); }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.ledger-table th, .ledger-table td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.ledger-table thead th { font-family: var(--font-sc); letter-spacing: .08em; font-weight: 400; color: #f3e6c4; background: linear-gradient(180deg, var(--wood-3), var(--wood-1)); border-bottom: 2px solid var(--brass); white-space: nowrap; }
.ledger-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.ledger-table tbody tr:hover { background: color-mix(in srgb, var(--brass-2) 22%, transparent); }
.ledger-table th[scope="row"] { font-weight: 400; font-family: var(--font-display); }
.ledger-table .num { font-family: var(--font-display); font-size: 1.3rem; color: var(--oxblood); width: 3.5rem; }
:root[data-theme="dark"] .ledger-table .num { color: var(--brass-2); }
.ledger-table .thumb { width: 4.5rem; padding-block: .5rem; }
.ledger-table .date { white-space: nowrap; color: var(--ink-soft); }
.ledger-table .quote-cell { font-family: var(--font-display); font-style: italic; min-width: 16rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0 0 1.2rem; }
.facts dt { font-family: var(--font-sc); letter-spacing: .05em; color: var(--ink-soft); }
.facts dd { margin: 0; }
/* Hangman */
.hm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } /* minmax(0, …): the keyboard must not stretch the column wider than the phone */
@media (min-width: 52rem) { .hm { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); } }
.hm-board { text-align: center; padding: 1rem; background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-1); background-image: var(--noise); }
.gallows { width: min(100%, 16rem); height: auto; }
@media (max-width: 51.99rem) { .gallows { width: min(100%, 10.5rem); } .hm-board { padding: .6rem; } .hm { gap: 1.2rem; } } /* phones: leave room for the word and the keys */
.hm-part { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }
.hm-part.on { opacity: 1; }
.gallows.lost .hm-part.on { stroke: var(--oxblood); }
/* Aced (no wrong guesses): the gallows is only pencilled in, never built, and the man runs off. */
.hm-escape { display: none; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hm-escape .hm-whoosh { stroke-width: 3; opacity: .55; }
.gallows.aced .hm-escape { display: inline; }
.gallows.aced .hm-part:is([data-stage="1"], [data-stage="2"], [data-stage="3"], [data-stage="4"]) { opacity: .2; stroke-dasharray: 6 10; }
.hm-runner { transform: translateX(170px); }
@media (prefers-reduced-motion: no-preference) {
.gallows.aced .hm-runner { animation: hm-run 1.6s cubic-bezier(.3, .6, .4, 1) both; }
}
@keyframes hm-run {
0% { transform: translate(120px, 0); }
25% { transform: translate(132px, -5px); }
50% { transform: translate(145px, 0); }
75% { transform: translate(158px, -4px); }
100% { transform: translate(170px, 0); }
}
.hm-score { flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.2rem 0 0; }
.hm-word { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .5rem 0 1rem; }
/* Keep the word on one line: the squares shrink to share the row (--n = letters, set by hangman.js), never above full size. */
@supports (width: 1cqi) {
.hm-word { container-type: inline-size; flex-wrap: nowrap; --g: clamp(.15rem, calc(3.6rem / var(--n, 9)), .4rem); gap: var(--g); }
.hm-word .hm-tile { --t: min(3rem, calc((100cqi - (var(--n, 9) - 1) * var(--g)) / var(--n, 9)));
flex: none; width: var(--t); height: calc(var(--t) * 1.2); font-size: calc(var(--t) * .7); }
}
.hm-tile { display: grid; place-items: center; width: clamp(2rem, 8vw, 3rem); height: clamp(2.6rem, 10vw, 3.6rem); font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 2.1rem); text-transform: uppercase;
background: var(--paper-3); border: 1px solid var(--rule); border-bottom: 3px solid var(--brass); border-radius: 2px; box-shadow: var(--shadow-1); }
.hm-tile.hit { background: #efd9a0; color: #2b1d13; }
.hm-tile.reveal { color: #9c1d1d; }
.hm-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.6rem, 1fr)); gap: .4rem; max-width: 34rem; margin-inline: auto; }
.hm-key, .lt-key { font-family: var(--font-sc); font-size: 1.15rem; color: var(--ink); background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; padding: .55rem 0; cursor: pointer; box-shadow: var(--shadow-1); }
.hm-key:hover:not([disabled]), .lt-key:hover { border-color: var(--oxblood); }
.hm-key[disabled] { cursor: default; opacity: .55; }
.hm-key.vowel { text-decoration: underline; text-decoration-color: var(--oxblood); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-rules { margin-top: 2.5rem; }
.hm-key.hit, .lt-key.correct { background: #4d7a4a; border-color: #2c4f2a; color: #fff; }
.hm-key.miss, .lt-key.absent { background: var(--wood-3); border-color: var(--wood-1); color: #d8c8a2; text-decoration: line-through; }
/* Five Letters */
.lt { max-width: 30rem; margin-inline: auto; }
.lt-grid { display: grid; gap: .4rem; justify-content: center; margin-bottom: .8rem; }
.lt-row { display: grid; grid-template-columns: repeat(5, clamp(2.8rem, 14vw, 3.6rem)); gap: .4rem; }
.lt-tile { display: grid; place-items: center; aspect-ratio: 1; font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 2rem); text-transform: uppercase;
background: var(--paper-3); border: 2px solid var(--rule); border-radius: 2px; color: var(--ink); }
.lt-tile.typed { border-color: var(--ink-soft); }
.lt-tile.correct { background: #4d7a4a; border-color: #4d7a4a; color: #fff; }
.lt-tile.present { background: var(--brass); border-color: var(--brass); color: #1f1409; }
.lt-tile.absent { background: var(--wood-3); border-color: var(--wood-3); color: #e6d8b4; }
.lt-keys { display: grid; gap: .4rem; margin-top: 1rem; }
.lt-keyrow { display: flex; justify-content: center; gap: .3rem; }
.lt-key { flex: 1 1 0; max-width: 2.8rem; min-width: 0; padding-inline: 0; text-decoration: none !important; }
.lt-key.wide { max-width: 4.4rem; flex: 1.6 1 0; font-size: .95rem; }
.lt-key.present { background: var(--brass); border-color: #8d6a24; color: #1f1409; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* Author Top Trumps */
.trump-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; padding: .5rem 0 1rem; }
.trump-hand > .state { width: 100%; }
.trump {
width: min(100%, 16.5rem); display: flex; flex-direction: column; color: var(--ink);
background: var(--paper-3); background-image: var(--noise); border: 2px solid var(--wood-2); border-radius: 10px;
box-shadow: var(--shadow-2), inset 0 0 0 4px var(--paper-3), inset 0 0 0 5px var(--brass);
animation: deal .55s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * .12s);
transition: transform .2s ease, box-shadow .2s ease;
}
.trump:hover { transform: translateY(-4px) rotate(-.4deg); }
@keyframes deal { from { opacity: 0; transform: translate(-40px, -24px) rotate(-7deg); } to { opacity: 1; transform: none; } }
.trump-head { margin: 10px 10px 0; padding: .55rem .5rem .5rem; text-align: center; background: linear-gradient(180deg, var(--wood-3), var(--wood-1)); border-radius: 4px 4px 0 0; border-bottom: 2px solid var(--brass); }
.trump-head h2 { margin: 0; font-size: 1.28rem; line-height: 1.15; color: var(--gilt); }
.trump-head h2 a { color: inherit; text-decoration: none; }
.trump-head h2 a:hover { text-decoration: underline; }
.trump-head p { margin: .1rem 0 0; font-family: var(--font-sc); letter-spacing: .08em; font-size: .9rem; color: var(--chrome-ink-soft); }
.trump .card-body { padding: .8rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.trump-art {
position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: .3rem; border-radius: 3px; background: var(--paper-2);
box-shadow: 0 0 0 1px var(--brass), 0 0 0 4px var(--paper-3), 0 0 0 5px var(--wood-2), inset 0 0 14px rgba(0, 0, 0, .3);
}
.trump-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trump-art .initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; color: var(--brass-2); background: linear-gradient(160deg, var(--wood-3), var(--wood-1)); }
.stat { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: baseline; font-size: 1rem; line-height: 1.2; }
.stat-name { font-family: var(--font-sc); letter-spacing: .04em; }
.stat-name abbr { text-decoration: none; color: var(--ink-faint); font-size: .8rem; letter-spacing: .08em; cursor: help; }
.stat-value { font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--oxblood); }
:root[data-theme="dark"] .stat-value { color: var(--gilt); }
.stat-bar { grid-column: 1 / -1; height: 5px; margin-top: .2rem; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule-soft); overflow: hidden; }
.stat-bar::after { content: ""; display: block; height: 100%; width: var(--v, 0); background: linear-gradient(90deg, var(--brass), var(--brass-2)); transform-origin: left; animation: fill .8s ease-out both; animation-delay: calc(var(--i, 0) * .12s + .3s); }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trump .description { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--rule); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink-soft); text-align: center; }
.trump-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; margin-top: .5rem; }
.trump-note { margin: 0; color: var(--ink-soft); font-style: italic; }
.trump-key { font-size: 1.02rem; color: var(--ink-soft); }
.trump-key strong { font-family: var(--font-sc); letter-spacing: .06em; color: var(--oxblood); }
:root[data-theme="dark"] .trump-key strong { color: var(--brass-2); }
@media print { .trump { break-inside: avoid; } }
/* The editor */
.admin-pane { padding: 1.5rem; }
.admin-form textarea { min-height: 6rem; font-family: var(--font-body); line-height: 1.5; }
/* The formatting rail: a dark wooden bar with brass keys, fixed to the top of the text box */
.editor-tools {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .55rem; margin-top: .25rem;
background: linear-gradient(180deg, var(--wood-2), var(--wood-1)); background-image: var(--noise), linear-gradient(180deg, var(--wood-2), var(--wood-1));
border: 1px solid var(--brass); border-bottom: 2px solid var(--brass); border-radius: 3px 3px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.editor-tools .tool {
--bg: #8d6a24; --fg: #1f1409; --bd: #5c4313;
font-family: var(--font-sc); font-size: 1rem; letter-spacing: .06em; line-height: 1; min-width: 2.5rem; padding: .45rem .8rem; cursor: pointer;
color: var(--fg); background: linear-gradient(180deg, var(--brass-2), var(--brass)); border: 1px solid var(--bd); border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(0, 0, 0, .5);
transition: transform .12s ease, filter .12s ease;
}
.editor-tools .tool:hover { filter: brightness(1.1); transform: translateY(-1px); }
.editor-tools .tool:active { transform: translateY(1px); filter: brightness(.95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.editor-tools .tool:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.editor-tools .tool--b { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.editor-tools .tool--i { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.tool-sep { align-self: stretch; width: 1px; margin: .15rem .2rem; background: linear-gradient(180deg, transparent, var(--brass), transparent); opacity: .7; }
.editor-tools + textarea { border-radius: 0 0 3px 3px; border-top: 0; margin-top: 0; }
/* Call My Bluff */
.bluff-word { margin: .1rem 0 .2rem; font-family: var(--font-display); font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.1; color: var(--oxblood); overflow-wrap: anywhere; }
:root[data-theme="dark"] .bluff-word { color: var(--brass-2); }
.bluff .option { display: flex; gap: .9rem; align-items: baseline; }
.bluff .option .letter { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--brass); border-radius: 50%; font-family: var(--font-display); color: var(--oxblood); background: var(--paper-2); }
.bluff .option .body { flex: 1; line-height: 1.4; }
.bluff .option .tag { display: block; margin-top: .3rem; font-family: var(--font-sc); font-style: normal; letter-spacing: .05em; font-size: .92rem; opacity: .85; }
.bluff .option.is-right .letter { background: #2e6b3f; border-color: #2e6b3f; color: #fff; }
.bluff .option.is-wrong .letter { background: #9c1d1d; border-color: #9c1d1d; color: #fff; }
.ishmael .bluff-word.ishmael-title { font-size: clamp(1.7rem, 6vw, 2.6rem); }
.ishmael .option .body { font-style: italic; }
.ishmael .option .body .tag { font-style: normal; }
.ishmael .option .tag a { color: inherit; text-decoration: underline; }
.bluff-note { margin: .8rem 0 0; font-style: italic; color: var(--ink-soft); }
.bluff-suggest { margin-top: 1.6rem; padding: 1.2rem 1.4rem; background: var(--paper-2); border: 1px dashed var(--brass); border-radius: 4px; }
.bluff-suggest h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.bluff-suggest textarea { margin-block: .3rem .5rem; }
.approval-list { display: grid; gap: 1.2rem; }
.approval { padding: 1.1rem 1.3rem 1.2rem; background: var(--paper-3); border: 1px solid var(--rule); border-left: 4px solid var(--brass); border-radius: 3px; box-shadow: var(--shadow-1); }
.approval h3 { margin: 0; font-size: 1.5rem; }
.approval h3 small { font-family: var(--font-body); font-size: 1rem; font-style: italic; color: var(--ink-faint); }
.approval .meta { margin: .1rem 0 .6rem; }
.approval-real { margin: 0 0 .6rem; color: var(--ink-soft); }
.approval textarea { margin-block: .25rem .6rem; }
/* The "Add a picture" dialog */
.dlg { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(34rem, calc(100vw - 1.5rem)); max-width: none; }
.dlg::backdrop { background: rgba(23, 13, 7, .75); }
.dlg-body {
max-height: calc(100vh - 2rem); overflow: auto; padding: 1.5rem 1.7rem 1.4rem;
background: var(--paper-3); background-image: var(--noise); border: 2px solid var(--wood-2); border-radius: 6px;
box-shadow: var(--shadow-2), inset 0 0 0 4px var(--paper-3), inset 0 0 0 5px var(--brass);
}
.dlg h2 { margin: 0 0 1rem; text-align: center; font-size: 1.6rem; }
.dlg .form-error { margin-bottom: 1rem; }
.drop {
position: relative; display: grid; justify-items: center; gap: .25rem; text-align: center; margin: 0; padding: 1.8rem 1rem;
font-family: var(--font-body); letter-spacing: 0; font-size: 1.05rem; color: var(--ink-soft);
background: var(--paper-2); border: 2px dashed var(--brass); border-radius: 4px; cursor: pointer; transition: background .15s ease;
}
.drop strong { font-family: var(--font-sc); letter-spacing: .06em; font-size: 1.2rem; color: var(--ink); font-weight: 400; }
.drop-glyph { font-size: 1.8rem; color: var(--brass); line-height: 1; }
.drop:hover, .drop.is-over { background: var(--paper); border-style: solid; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.dlg-shown { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.dlg-preview { display: block; max-width: 100%; max-height: 15rem; object-fit: contain; padding: .35rem; background: var(--paper-3); border: 1px solid var(--rule); box-shadow: var(--shadow-1); }
.dlg-facts { margin: 0; justify-content: center; overflow-wrap: anywhere; }
.dlg-details { margin-top: 1rem; }
.dlg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1rem; }
.dlg-tabs .chip { cursor: pointer; font-size: 1rem; padding: .3rem .9rem; }
.dlg-tabs .chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.dlg-tabs .chip[aria-selected="true"] { background: var(--oxblood); color: var(--on-accent); border-color: var(--accent-edge); }
.dlg-two { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 30rem) { .dlg-two { grid-template-columns: 1fr; } }
select.pick { height: auto; padding: .3rem; background-image: none; overflow-y: auto; }
select.pick option { padding: .35rem .5rem; border-radius: 2px; white-space: normal; font-family: var(--font-body); font-style: normal; letter-spacing: 0; color: var(--ink); }
select.pick optgroup { font-family: var(--font-sc); letter-spacing: .05em; font-style: normal; color: var(--oxblood); }
:root[data-theme="dark"] select.pick optgroup { color: var(--brass-2); }
.dlg-goes { margin: .6rem 0 0; min-height: 1.4em; overflow-wrap: anywhere; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
/* The site-wide OK/Cancel and message dialog (js/confirm.js), in place of the browser's own confirm()/alert(). */
.dlg--small { width: min(26rem, calc(100vw - 1.5rem)); }
.dlg-message { margin: 0; white-space: pre-line; line-height: 1.5; }
.dlg--small .dlg-actions { margin-top: 1.4rem; }
.field-label { font-family: var(--font-sc); letter-spacing: .05em; font-size: 1rem; color: var(--ink-soft); margin: 0 0 .25rem; }
.preview-pane { max-height: 32rem; overflow: auto; padding: 1rem 1.3rem; background: var(--paper-3); border: 1px dashed var(--rule); border-radius: 3px; }
.preview-pane .article-body { font-size: 1.1rem; }
.preview-pane:empty::before { content: "Nothing to show yet."; color: var(--ink-faint); font-style: italic; }
.admin-form .three { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.admin-form .check { margin-bottom: 1rem; }
.ev-panel { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.ev-panel h2 { margin-top: 0; }
.ev-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.ev-list li { padding: .5rem .7rem; background: var(--paper-2); border-radius: 3px; line-height: 1.5; }
.ev-date { font-family: var(--font-sc); letter-spacing: .04em; color: var(--oxblood); }
.link-list { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.link-row { padding: .7rem .8rem; background: var(--paper-2); border-radius: 3px; }
.link-fields { display: grid; gap: .5rem; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 2fr); }
.link-actions { margin-top: .5rem; gap: .4rem .6rem; }
.error-text { color: var(--oxblood); }
@media (max-width: 40rem) { .link-fields { grid-template-columns: 1fr; } }
.chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .1rem; }
.ledger-table td .meta { display: inline; margin-left: .6rem; }
/* ---- Editor: Visitors tab (the site's own counts) ---------------------------------------------------------------------- */
.visitors { margin-top: 1.5rem; }
.visit-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.visit-figure { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 6px; }
.visit-n { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--oxblood); }
.visit-label { font-family: var(--font-sc); letter-spacing: .06em; color: var(--ink-soft); }
.visit-chart { margin: 0 0 2rem; }
.visit-bars { position: relative; display: flex; align-items: stretch; gap: 1px; height: 11rem; padding-top: 1.2rem; border-bottom: 2px solid var(--rule); }
.visit-max { position: absolute; top: 0; left: 0; font-size: .8rem; color: var(--ink-faint); }
.visit-col { position: relative; flex: 1 1 0; min-width: 0; }
.visit-col:hover .visit-views { background: var(--brass); }
.visit-views, .visit-visits { position: absolute; bottom: 0; left: 0; right: 0; height: var(--h); border-radius: 2px 2px 0 0; }
.visit-views { background: var(--brass-2); }
.visit-visits { background: var(--oxblood); opacity: .85; }
.visit-axis { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-faint); margin-top: .35rem; }
.visit-key { display: inline-flex; align-items: center; gap: .35rem; }
.key-views, .key-visits { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--brass-2); }
.key-visits { background: var(--oxblood); margin-left: .5rem; }
.visit-chart details { margin-top: .8rem; }
.visit-chart summary { cursor: pointer; color: var(--link); }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2rem; }
.visit-section h3 { margin: 0 0 .4rem; }
.visit-list { list-style: none; margin: 0; padding: 0; }
.visit-list li { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; padding: .35rem 0; border-bottom: 1px dotted var(--rule-soft); }
.visit-name { min-width: 0; overflow-wrap: anywhere; }
.visit-count { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.visit-meter { grid-column: 1 / -1; display: block; height: 3px; width: var(--w); margin-top: .25rem; background: var(--brass); border-radius: 2px; }
:root[data-theme="dark"] .visit-n { color: var(--brass-2); }
:root[data-theme="dark"] .visit-visits, :root[data-theme="dark"] .key-visits { background: #c0564a; }
/* ---- Dictionary and thesaurus ------------------------------------------------------------------------------------------ */
.dict-search { display: flex; gap: .6rem; margin: 0 0 1rem; }
.dict-search input { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; }
.dict-search .btn { white-space: nowrap; }
.dict-tabs { justify-content: flex-start; margin-bottom: 1.5rem; }
.dict-head { margin-bottom: 1.2rem; }
.dict-word { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; line-height: 1.15; }
.dict-pron { margin: .2rem 0 0; color: var(--ink-soft); }
.ipa { font-family: "Segoe UI", "Lucida Grande", "DejaVu Sans", sans-serif; font-size: .9em; }
.dict-from { margin: .3rem 0 0; font-style: italic; color: var(--ink-soft); }
.dict-group { margin: 0 0 1.4rem; }
.dict-pos { font-family: var(--font-sc); font-weight: 400; letter-spacing: .08em; font-size: 1.1rem; color: var(--oxblood); margin: 0 0 .4rem; border-bottom: 1px solid var(--rule-soft); padding-bottom: .2rem; }
:root[data-theme="dark"] .dict-pos { color: var(--brass-2); }
.dict-senses { margin: 0; padding-left: 1.6rem; }
.dict-sense { margin: 0 0 .9rem; padding-left: .2rem; }
.dict-sense::marker { color: var(--ink-faint); }
.dict-def, .thes-def { margin: 0; }
.thes-def { color: var(--ink-soft); font-style: italic; }
.thes-words { margin: .2rem 0 0; font-size: 1.1rem; }
.dict-examples { list-style: none; margin: .2rem 0 0; padding: 0; color: var(--ink-soft); font-style: italic; }
.dict-rel { margin: .2rem 0 0; font-size: .95rem; }
.dict-rel-label { font-family: var(--font-sc); letter-spacing: .05em; color: var(--ink-faint); }
.dict-note { font-size: .75rem; padding: .05rem .5rem; margin-bottom: .2rem; }
.dict-switch { margin-top: 1.5rem; }
.dict-try { align-items: center; }
.dict-credit { margin-top: 1rem; }
/* ---- Look a word up while reading (js/lookup.js) ---- */
.lookup-hint { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-faint); font-style: italic; }
@media (hover: none) { .lookup-hint::after { content: " (Press and hold it.)"; } }
.lookup { position: absolute; z-index: 60; width: min(24rem, calc(100vw - 16px)); padding: .8rem 1rem .7rem; background: var(--paper-3); color: var(--ink);
border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 28px rgba(23, 13, 7, .28); font-size: 1rem; line-height: 1.45; }
.lookup p { margin: 0 0 .35rem; }
.lookup-word { font-size: 1.25rem; padding-right: 1.6rem; }
.lookup-from { font-style: italic; color: var(--ink-soft); font-size: .92rem; }
.lookup-senses { margin: .2rem 0 .4rem; padding-left: 1.3rem; }
.lookup-senses li { margin-bottom: .3rem; }
.lookup-pos { color: var(--ink-faint); }
.lookup-syn { color: var(--ink-soft); }
.lookup-more { font-size: .92rem; }
.lookup-busy { font-style: italic; color: var(--ink-soft); }
.lookup-x { position: absolute; top: .3rem; right: .4rem; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .1rem .35rem; }
.lookup-x:hover { color: var(--ink); }
/* An internal author link's preview (js/authorpreview.js): a small card like the look-up above, with a portrait and life dates. */
.author-preview { position: absolute; z-index: 60; width: min(19rem, calc(100vw - 16px)); padding: .8rem .9rem; background: var(--paper-3); color: var(--ink);
border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 28px rgba(23, 13, 7, .28); font-size: 1rem; line-height: 1.4;
display: flex; gap: .8rem; align-items: center; }
.author-preview .portrait { --size: 3.4rem; margin: 0; flex: none; }
.author-preview-text { min-width: 0; }
.author-preview-name { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.author-preview-name a { color: inherit; text-decoration: none; }
.author-preview-name a:hover { text-decoration: underline; }
.author-preview-life { margin: .15rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.author-preview .lookup-busy { margin: 0; }
/* The Editor's Dictionary tab */
.dict-edit { border-top: 1px dashed var(--rule-soft); padding-top: 1rem; margin-top: 1rem; }
.ev-panel h3 + .dict-edit { border-top: 0; margin-top: 0; padding-top: 0; }
.dict-edit.is-hidden { opacity: .6; }
/* Webster's 1913 on the dictionary page */
.webster { margin: 1.6rem 0 0; padding: 1rem 1.2rem; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 4px; }
.webster > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.25rem; }
.webster[open] > summary { margin-bottom: 1rem; }
.webster-title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 0 0 1rem; }
.webster-entry { margin: 0 0 1.2rem; }
.webster-entry .dict-pos { text-transform: none; }
.webster-pos { font-family: var(--font-body); font-style: italic; letter-spacing: 0; color: var(--ink-soft); font-size: 1rem; }
.webster-etym { margin: 0 0 .4rem; font-size: .95rem; color: var(--ink-soft); }
.webster-note { margin: .3rem 0 0; }
.webster-syn { list-style: none; padding-left: 0; }
.lookup-older { font-size: .92rem; color: var(--ink-soft); }
/* News, articles and stories in the reader (pages/content.js): the reader's type and paragraphs, with room for the
headings, lists, quotations and pictures the editor allows. */
.reader .body.rich { font-size: inherit; line-height: inherit; }
.reader .body.rich p { white-space: normal; }
.reader .body.rich > * + * { margin-top: 0; }
.reader .body.rich > :not(p) { margin-block: 1.3rem; }
.reader .body.rich > :not(p) + p { text-indent: 0; } /* as in a book: no indent after a heading, list or picture */
.reader .body.rich h2, .reader .body.rich h3, .reader .body.rich h4 { text-align: left; }
.reader .body.rich li, .reader .body.rich blockquote p { text-indent: 0; text-align: left; }
/* ...and only the story's own first paragraph gets the large first letter, not the first one inside a quotation or list. */
.reader .body.rich > * p { text-indent: 0; }
.reader .body.rich > * p:first-child::first-letter,
:root[data-theme="dark"] .reader .body.rich > * p:first-child::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; line-height: inherit; }
/* Illustrations resolved from the central API. */
.reader .body { display: flow-root; }
.reader .work-illustration {
margin: 1.5em 0; padding: clamp(.55rem, 2vw, 1rem); break-inside: avoid;
background: var(--paper-3); border: 1px solid var(--rule); border-radius: 4px;
box-shadow: var(--shadow-2);
}
.reader .work-illustration img {
display: block; max-width: 100%; height: auto; margin: auto;
background: #fff; border: 1px solid var(--rule-soft);
}
.reader .work-illustration figcaption {
font-size: .8em; text-align: center; line-height: 1.5; color: var(--ink-soft);
margin-top: .75em; padding-top: .65em; border-top: 1px solid var(--rule-soft);
}
.reader .work-illustration--fullwidth { clear: both; width: 100%; }
.reader .work-illustration--left { float: left; width: 42%; margin: .5em 1.5em 1em 0; }
.reader .work-illustration--right { float: right; width: 42%; margin: .5em 0 1em 1.5em; }
@media (max-width: 600px) {
.reader .work-illustration--left, .reader .work-illustration--right { float: none; width: 100%; margin: 1.5em 0; }
}
/* Comics (js/comic-reader.js) ─ the pages sit on a dark ground, whatever the theme, as in a lit viewer. The paged
layouts fill the screen with the controls laid over them; the scroll layout runs down the page as usual. */
.comic-head { width: min(100% - 2rem, var(--wrap)); margin: 0 auto; padding: 1.6rem 0 1rem; text-align: center; }
.comic-head .book { font-family: var(--font-sc); letter-spacing: .1em; color: var(--ink-faint); font-size: 1rem; }
.comic-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: .2rem 0; }
.comic-head .meta { color: var(--ink-faint); margin: 0; }
.cr { overflow-anchor: none; --cr-ground: #141110; --cr-chrome: rgba(23, 13, 7, .88); --cr-fg: #f1e6cb; position: relative; background: var(--cr-ground); color: var(--cr-fg); outline: none; user-select: none; -webkit-user-select: none; }
.cr [hidden] { display: none !important; }
.cr:not([data-mode="scroll"]) { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.cr:fullscreen { height: 100%; width: 100%; }
.cr-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: default; }
.cr[data-mode="single"] { background: #000; }
.cr[data-mode="single"] .cr-stage { margin: var(--cr-band-top, 0) 0 var(--cr-band-bottom, 0); background: var(--cr-ground); } /* bands the height of the tool bars */
.cr.is-zoomed .cr-stage { cursor: grab; }
.cr.is-zoomed .cr-stage:active { cursor: grabbing; }
.cr-canvas { position: absolute; left: 50%; top: 50%; width: max-content; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform; } /* centred, so a page taller than the screen runs off both ends evenly */
.cr-canvas .cr-img { display: block; max-width: none; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, .5); -webkit-user-drag: none; }
.cr-canvas .cr-img + .cr-img { box-shadow: 0 0 24px rgba(0, 0, 0, .5), inset 12px 0 18px -14px rgba(0, 0, 0, .45); } /* the fold */
.cr-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.6rem; height: 5rem; border: 0; border-radius: 3px; background: var(--cr-chrome); color: var(--cr-fg); font-size: 2rem; line-height: 1; cursor: pointer; opacity: .75; transition: opacity .3s; }
.cr-side:hover { opacity: 1; }
.cr-side--l { left: .5rem; }
.cr-side--r { right: .5rem; }
@media (hover: none) { .cr-side { display: none; } } /* on a touch screen, the sides of the page are the buttons */
.cr-top, .cr-controls { z-index: 5; background: var(--cr-chrome); backdrop-filter: blur(6px); transition: opacity .35s, transform .35s; }
.cr-top { display: flex; gap: .8rem; align-items: center; padding: .45rem 1rem; }
.cr-back { color: var(--brass-2); font-family: var(--font-sc); letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cr-back:hover { color: var(--gilt); }
.cr-title { flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-select { width: auto; max-width: 13rem; padding: .25rem .4rem; font-size: .95rem; }
.cr-controls { padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom)); }
.cr:not([data-mode="scroll"]) .cr-top { position: absolute; top: 0; left: 0; right: 0; }
.cr:not([data-mode="scroll"]) .cr-controls { position: absolute; bottom: 0; left: 0; right: 0; }
.cr[data-mode="scroll"] .cr-top { position: sticky; top: 0; }
.cr[data-mode="scroll"] .cr-controls { position: sticky; bottom: 0; }
.cr.controls-hidden .cr-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.cr.controls-hidden .cr-controls { opacity: 0; transform: translateY(100%); pointer-events: none; }
.cr.controls-hidden .cr-side { opacity: 0; }
.cr.controls-hidden .cr-side:hover, .cr.controls-hidden .cr-side:focus { opacity: .75; }
.cr.controls-hidden:not([data-mode="scroll"]) .cr-stage { cursor: none; }
.cr-bar { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; justify-content: center; }
.cr-group { display: inline-flex; gap: .3rem; align-items: center; }
.cr-btn, .cr-chip { min-width: 2.3rem; height: 2.3rem; padding: 0 .55rem; border: 1px solid rgba(214, 181, 102, .45); border-radius: 3px; background: transparent; color: var(--cr-fg); font: inherit; font-size: 1.05rem; cursor: pointer; }
.cr-btn:hover, .cr-chip:hover { border-color: var(--brass-2); color: var(--gilt); }
.cr-btn:disabled { opacity: .4; cursor: default; }
.cr-btn--word { font-family: var(--font-sc); letter-spacing: .04em; font-size: .95rem; }
.cr-chip { font-family: var(--font-sc); letter-spacing: .04em; font-size: .95rem; }
.cr-chip[aria-pressed="true"] { background: var(--brass); color: #1f1409; border-color: var(--brass); }
.cr-count { min-width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.cr :focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; }
.cr-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem .2rem .6rem; scroll-snap-type: x proximity; }
.cr-thumb { flex: 0 0 auto; display: grid; gap: .2rem; justify-items: center; padding: .25rem; border: 2px solid transparent; border-radius: 3px; background: none; color: var(--cr-fg); cursor: pointer; scroll-snap-align: center; font-size: .85rem; }
.cr-thumb img { width: 80px; height: auto; max-height: 124px; object-fit: cover; object-position: top; background: #fff; }
.cr-thumb[aria-current="page"] { border-color: var(--brass-2); }
.cr-thumb:hover { border-color: rgba(214, 181, 102, .6); }
.cr-scroll { display: grid; gap: .6rem; justify-items: center; padding: .6rem 0 1.2rem; }
.cr-strip { margin: 0; width: min(100%, 960px); }
.cr-strip .cr-img { display: block; width: 100%; height: auto; background: #fff; }
.cr-end { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; background: rgba(20, 17, 16, .92); }
.cr[data-mode="scroll"] .cr-end { position: relative; inset: auto; background: none; }
.cr-end-title { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.cr-end .btn--ghost { color: var(--cr-fg); border-color: rgba(214, 181, 102, .6); }
.cr.no-motion .cr-top, .cr.no-motion .cr-controls { transition: none; }
@media (max-width: 600px) {
.cr-bar { gap: .3rem .4rem; }
.cr-btn, .cr-chip { min-width: 2rem; height: 2rem; padding: 0 .4rem; font-size: .85rem; }
.cr-select { max-width: 9rem; }
.cr-count { min-width: 3.6rem; font-size: .95rem; }
.cr-top { gap: .5rem; padding: .35rem .7rem; }
.cr-top .cr-title:has(+ .cr-select) { display: none; } /* the chapter menu already names it */
}
.comic-pages { color: var(--ink-faint); }
/* The Editor's comic pages */
.cm-chapter { border: 1px solid var(--rule); border-radius: 4px; padding: .7rem 1rem; background: var(--paper-3); }
.cm-chapter summary { cursor: pointer; }
.cm-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.cm-page { display: grid; gap: .35rem; align-content: start; padding: .5rem; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--paper); cursor: grab; }
.cm-page img { display: block; width: 100%; height: auto; max-height: 14rem; object-fit: contain; background: #fff; }
.cm-page-head { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.cm-page-tools { display: inline-flex; gap: .15rem; }
.cm-page select { font-size: .9rem; padding-block: .25rem; }
.cm-page textarea { font-size: .9rem; min-height: 3.2rem; }
.cm-page textarea.is-saved { border-color: var(--green-2); }
.cm-page.is-dragging { opacity: .45; }
.cm-page.is-over { outline: 2px dashed var(--oxblood); outline-offset: 2px; }
/* The Collection in Numbers (numbers.html) - a small line chart per figure, each on its own scale. The line takes the
accent that passes the chart palette checks against each surface (oxblood by day, brass by lamplight). */
:root { --chart-line: var(--oxblood-2); }
:root[data-theme="dark"] { --chart-line: var(--brass); }
.nb-hint { color: var(--ink-soft); font-style: italic; margin: -.4rem 0 1.2rem; }
.nb-table .nb-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-table thead th.nb-n { text-align: right; }
.nb-delta { display: block; font-size: .85rem; }
.nb-note { display: block; font-size: .88rem; font-style: italic; color: var(--ink-faint); font-weight: 400; }
.nb-up { color: var(--ink); font-weight: 600; }
.nb-down { color: var(--ink-soft); }
.nb-grid-cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
.nb-card { margin: 0; padding: 1rem 1.1rem .6rem; }
.nb-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .4rem; }
.nb-label { font-family: var(--font-sc); letter-spacing: .06em; color: var(--ink-soft); }
.nb-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-plot { position: relative; }
.nb-chart { display: block; width: 100%; height: auto; overflow: visible; }
.nb-chart:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.nb-grid { stroke: var(--rule-soft); stroke-width: 1; }
.nb-tick { fill: var(--ink-faint); font-family: var(--font-body); font-size: 11px; }
.nb-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nb-dot { fill: var(--chart-line); stroke: var(--paper-3); stroke-width: 2; }
.nb-cross { stroke: var(--ink-faint); stroke-width: 1; }
.nb-hit { fill: transparent; cursor: crosshair; }
.nb-tip { position: absolute; z-index: 2; transform: translate(12px, -50%); pointer-events: none; display: grid; gap: .1rem; padding: .4rem .6rem; white-space: nowrap;
background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-1); font-size: .9rem; color: var(--ink-soft); }
.nb-tip strong { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-tip--left { transform: translate(calc(-100% - 12px), -50%); }
.nb-tip[hidden] { display: none; }
/* A prize's "All winners" (js/pages/prizes.js): the shelf, then a condensed page for each winner. */
.prize-views { justify-content: center; margin: 0 0 1.2rem; }
.won-summary { margin: 0 0 .4rem; font-style: italic; }
.won .bookshelf { margin: 0 0 1rem; }
.won-order { justify-content: center; margin: .2rem 0 1.4rem; }
.won-list { display: grid; gap: 1.4rem; max-width: 52rem; margin: 1.5rem auto 0; }
.won-entry { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.4rem; align-items: start; padding: 1.2rem 1.3rem; background: var(--paper-3);
border: 1px solid var(--rule-soft); border-left: 4px solid var(--brass); border-radius: 2px; box-shadow: var(--shadow-1); scroll-margin-top: 6rem; outline: none; }
.won-entry--series { grid-template-columns: 1fr; }
.won-entry--person .portrait { --size: 8rem; }
.won-entry h3 { margin: 0 0 .2rem; font-size: 1.45rem; }
.won-entry h3 a { color: inherit; text-decoration: none; }
.won-entry h3 a:hover { color: var(--link); }
.won-entry .eyebrow { margin-bottom: .2rem; }
.won-entry .byline { margin: 0 0 .3rem; }
.won-entry .meta { margin: 0 0 .6rem; }
.won-entry .opening { margin: .6rem 0; font-size: 1.05rem; }
.won-bio { margin: .4rem 0 .6rem; color: var(--ink-soft); }
.won-books { margin: .4rem 0 .8rem; padding-left: 1.4rem; columns: 2 16rem; column-gap: 2rem; }
.won-books li { break-inside: avoid; margin-bottom: .2rem; }
@keyframes won-flash { 0% { box-shadow: 0 0 0 4px var(--brass-2), var(--shadow-1); } 100% { box-shadow: var(--shadow-1); } }
.won-entry.won-flash { animation: won-flash 2.2s ease-out; }
@media (max-width: 40rem) {
.won-entry { grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem; }
.won-entry--person .portrait { --size: 5.5rem; }
.won-entry--series { grid-template-columns: 1fr; }
.won-entry h3 { font-size: 1.2rem; }
}
/* Optional, accessible content notes on catalogue and reader pages. */
.content-notes { margin: 1.2rem 0; padding: .8rem 1rem; border: 1px solid currentColor; border-radius: .4rem; font-size: 1rem; text-align: left; }
.content-notes summary { cursor: pointer; font-weight: 600; }
.content-notes li { margin: .4rem 0; }
/* Full-size work covers show every award in a wrapping stack. */
.cover > .cover-prizes { position: absolute; top: .5rem; right: -.35rem; left: .5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; max-height: calc(100% - 1rem); overflow-y: auto; }
.cover-prizes > .badge { white-space: normal; max-width: 100%; text-align: right; box-shadow: 0 2px 3px rgba(0,0,0,.3); background: linear-gradient(180deg, #b3452e, var(--oxblood)); color: var(--on-accent); }
.cover-prizes > .tier-gold { background: linear-gradient(180deg, #f4dd8c, #c9a227); color: #3a2b06; }
.cover-prizes > .tier-silver { background: linear-gradient(180deg, #e9eaee, #a9adb5); color: #23262b; }
/* Original-language text preserves the English reading position. */
.original-text-controls { margin: 1.5rem 0; text-align: center; }
/* Reviewed passage comparisons: grouped English first, Russian second on phones. */
.reader:has(.has-paragraph-originals) { width: min(100% - 2rem, 82rem); }
.aligned-passage { max-width: var(--measure); margin: 0 auto 1.2rem; }
.aligned-english, .aligned-original { min-width: 0; }
.aligned-passage.is-open { padding: .8rem; background: var(--paper-2); border: 1px solid var(--ink-faint); }
.aligned-original { padding: 1rem; background: var(--paper-3); border-inline-start: 2px solid var(--ink-faint); }
.has-original-toggle { display: flow-root; }
.paragraph-original-button { float: right; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.5rem; margin: .2rem 0 0 .6rem; padding: .2rem; border: 1px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; }
.paragraph-original-button:hover, .paragraph-original-button[aria-expanded="true"] { background: var(--paper-3); border-color: var(--ink-faint); }
.paragraph-original-button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.russian-flag { display: block; width: 1.15rem; height: .75rem; border: 1px solid var(--ink-faint); background: linear-gradient(to bottom, var(--paper-2) 0 33.333%, var(--rule) 33.333% 66.666%, var(--ink-faint) 66.666% 100%); }
.reader .body .aligned-original p { text-indent: 0; text-align: left; margin-bottom: 1rem; }
.reader .body .alignment-label { font-size: .85rem; color: var(--ink-soft); }
.reader .body .aligned-passage p:first-child::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
@media (min-width: 960px) {
.aligned-passage.is-open { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; }
}