/* Shared chrome for the series hub (index.html) and reader (read.html).
Palette and type follow the A4 sheets themselves: ink #23201C, parchment #FCF2D6,
gold #A8791A, teal #2F7F96, Georgia serif + Consolas mono kickers. */
:root {
--ink: #23201C;
--ink-soft: #6E6A63;
--paper: #FFFFFF;
--parch: #FCF2D6;
--desk: #EFE7D9;
--gold: #A8791A;
--gold-2: #B8862B;
--teal: #2F7F96;
--rule: rgba(35, 32, 28, .22);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--desk);
color: var(--ink);
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
-webkit-font-smoothing: antialiased;
}
.mono { font-family: "Consolas", "Courier New", monospace; }
.kicker {
font-family: "Consolas", "Courier New", monospace;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
}
a { color: var(--ink); }
/* ---------- masthead ---------- */
.mast { position: relative; background: var(--paper); border-bottom: 1pt solid var(--ink); }
.mast .ruler {
height: 10px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
border-bottom: .5pt solid var(--rule);
}
.mast-in { max-width: 1180px; margin: 0 auto; padding: 26px 24px 20px; position: relative; }
.mast h1 { font-size: 34px; margin: 8px 0 6px; letter-spacing: .01em; line-height: 1.15; }
.mast .sub { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 62ch; line-height: 1.55; }
.mast .trio { margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.mast .trio b { color: var(--ink); font-weight: normal; border-bottom: 1px solid var(--gold); }
.wave {
height: 8px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-position: center;
}
/* ---------- language tabs ---------- */
.tabbar {
position: sticky; top: 0; z-index: 20;
background: var(--parch);
border-bottom: 1pt solid var(--ink);
box-shadow: 0 2px 0 rgba(35, 32, 28, .06);
}
.tabbar-in { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabs { display: flex; gap: 0; border: 1pt solid var(--ink); background: var(--paper); }
.tabs button {
appearance: none; background: transparent; border: 0; border-right: 1pt solid var(--rule);
font-family: Georgia, serif; font-size: 14px; color: var(--ink);
padding: 8px 20px; cursor: pointer; position: relative; letter-spacing: .02em;
}
.tabs button:last-child { border-right: 0; }
.tabs button .n { display: block; font-family: Consolas, monospace; font-size: 9px; letter-spacing: .16em; color: var(--ink-soft); text-transform: uppercase; }
.tabs button:hover { background: rgba(168, 121, 26, .10); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--parch); }
.tabs button[aria-selected="true"] .n { color: rgba(252, 242, 214, .72); }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search input {
font-family: Georgia, serif; font-size: 13px; color: var(--ink);
background: var(--paper); border: 1pt solid var(--ink); border-right: 0;
padding: 8px 12px; width: 230px; outline: none;
}
.search input::placeholder { color: #A9A49B; }
.search .go { border: 1pt solid var(--ink); background: var(--parch); padding: 8px 12px; font-family: Consolas, monospace; font-size: 11px; letter-spacing: .12em; }
.count { font-size: 10px; letter-spacing: .16em; color: var(--ink-soft); text-transform: uppercase; }
/* ---------- card grid ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 26px 24px 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.card {
position: relative; background: var(--paper); border: 1pt solid var(--ink);
display: flex; flex-direction: column; min-height: 100%;
transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(35, 32, 28, .13); }
.card .corner { position: absolute; width: 9px; height: 9px; border-color: var(--gold); border-style: solid; border-width: 0; }
.card .corner.tl { left: 4px; top: 4px; border-left-width: 1pt; border-top-width: 1pt; }
.card .corner.tr { right: 4px; top: 4px; border-right-width: 1pt; border-top-width: 1pt; }
.card .corner.bl { left: 4px; bottom: 4px; border-left-width: 1pt; border-bottom-width: 1pt; }
.card .corner.br { right: 4px; bottom: 4px; border-right-width: 1pt; border-bottom-width: 1pt; }
.thumb { display: block; margin: 12px 12px 0; border: 1pt solid var(--ink); background: var(--paper); padding: 5px; }
.thumb img { display: block; width: 100%; height: 150px; object-fit: cover; }
.cbody { padding: 12px 14px 0; flex: 1; }
.cbody h2 { font-size: 19px; margin: 6px 0 6px; line-height: 1.25; }
.cbody .blurb { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.cbody .blurb .lbl { font-family: Consolas, monospace; font-size: 9px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.cfoot { border-top: .5pt dashed var(--rule); margin-top: 12px; padding: 10px 14px 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.read {
text-decoration: none; background: var(--ink); color: var(--parch);
font-family: Consolas, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
padding: 6px 9px;
}
.read:hover { background: var(--gold); }
.pdf {
text-decoration: none; border: 1pt solid var(--ink); color: var(--ink);
font-family: Consolas, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
padding: 5px 8px;
}
.pdf:hover { background: var(--parch); }
.alts { margin-left: auto; display: flex; gap: 7px; font-size: 11.5px; white-space: nowrap; }
.alts a { color: var(--teal); text-decoration: none; border-bottom: 1px dotted var(--teal); }
.alts a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.empty { padding: 60px 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
/* ---------- footer ---------- */
.foot { border-top: 1pt solid var(--ink); background: var(--paper); }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 16px 24px 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.foot .stamp {
display: inline-block; border: 1pt solid var(--ink); color: var(--ink);
font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: .2em; padding: 5px 10px;
}
.foot p { margin: 0; font-size: 12px; color: var(--ink-soft); }
/* ---------- reader ---------- */
body.reader { background: #4A453D; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.bar { background: var(--parch); border-bottom: 1pt solid var(--ink); flex: none; }
.bar-in { max-width: 1400px; margin: 0 auto; padding: 9px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.back { text-decoration: none; font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; border: 1pt solid var(--ink); padding: 6px 10px; }
.back:hover { background: var(--ink); color: var(--parch); }
.rtitle { min-width: 0; }
.rtitle .kicker { display: block; }
.rtitle h1 { font-size: 17px; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.langs { display: flex; border: 1pt solid var(--ink); margin-left: auto; background: var(--paper); }
/* **THE PLAY BUTTON IS PART OF THE TAB ITSELF**: a tab is a wrapper holding the language link and, only where
that language has a recording, a headphone button at its right-hand end -- so the control for a language
cannot be mistaken for the control of another one. */
.langtab { display: flex; align-items: stretch; border-right: 1pt solid var(--rule); }
.langtab:last-child { border-right: 0; }
.langtab a { flex: 1; text-decoration: none; font-size: 13px; padding: 6px 12px; color: var(--ink); }
.langtab a .n { display: block; font-family: Consolas, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.langtab.on { background: var(--ink); }
.langtab.on a { color: var(--parch); }
.langtab.on a .n { color: rgba(252, 242, 214, .72); }
.langtab:not(.on) a:hover { background: rgba(168, 121, 26, .12); }
.tabplay { border: 0; background: transparent; color: var(--ink-soft);
width: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.langtab.on .tabplay { color: rgba(252, 242, 214, .78); }
.tabplay:hover { background: var(--gold); color: var(--paper); }
.tabplay.playing { background: var(--gold); color: var(--paper); }
.tools { display: flex; gap: 8px; align-items: center; }
.tools a, .tools button {
text-decoration: none; border: 1pt solid var(--ink); background: var(--paper); color: var(--ink);
font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
padding: 6px 10px; cursor: pointer;
}
.tools a:hover, .tools button:hover { background: var(--ink); color: var(--parch); }
.stage { flex: 1; overflow: auto; padding: 22px 0 40px; }
.frame { margin: 0 auto; position: relative; }
.frame iframe {
display: block; border: 0; background: var(--paper);
width: 794px; height: 1123px;
box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
transform-origin: top left;
}
.pager { flex: none; background: var(--ink); color: var(--parch); }
.pager-in { max-width: 1400px; margin: 0 auto; padding: 8px 18px; display: flex; align-items: center; gap: 14px; }
.pager a { color: var(--parch); text-decoration: none; font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.pager a:hover { color: var(--gold-2); }
.pager .mid { margin: 0 auto; font-size: 11px; color: rgba(252, 242, 214, .7); text-align: center; }
.pager .hint { font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: .12em; color: rgba(252, 242, 214, .55); }
@media (max-width: 720px) {
.mast h1 { font-size: 25px; }
.search { margin-left: 0; }
.search input { width: 160px; }
.rtitle h1 { max-width: 60vw; }
}
/* ---- the spoken telling: one recording per language, made by _S1143_tts.py ---------------------------- */
/* **THE PLAY CONTROL SITS IN THE TOP BAR**, in the empty gap between the title and the language tabs:
one place to look, and the sheet does not jump down when a recording starts. */
.barplay { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barplay[hidden] { display: none; }
.audiobar .alabel { font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-soft); }
.aplay { display: flex; gap: 8px; flex-wrap: wrap; }
.aplaybtn { display: inline-flex; align-items: baseline; gap: 7px; border: 1pt solid var(--ink);
background: var(--paper); color: var(--ink); font-size: 13px; padding: 5px 12px; cursor: pointer; }
.aplaybtn .n { font-family: Consolas, monospace; font-size: 9px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-soft); }
.aplaybtn.cur { box-shadow: inset 0 0 0 1pt var(--rule); }
.aplaybtn:hover { background: rgba(168, 121, 26, .12); }
.aplaybtn.on { background: var(--ink); color: var(--parch); }
.aplaybtn.on .n { color: rgba(252, 242, 214, .72); }
.astate { font-family: Consolas, monospace; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft);
min-width: 86px; }
#astop { border: 1pt solid var(--ink); background: var(--paper); color: var(--ink);
font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
padding: 5px 10px; cursor: pointer; }
#astop:hover { background: var(--ink); color: var(--parch); }
.aprog { width: 132px; height: 3px; background: var(--rule); flex: none; }
.aprog span { display: block; height: 3px; width: 0; background: var(--gold-2); }
/* ---- the audio mark on a hub card: a headphone icon, no words, so the foot row stays on one line ---------- */
.audbtn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border: .5pt solid var(--rule); color: var(--ink-soft);
background: var(--paper); flex: none; }
.audbtn svg { display: block; }
.audbtn:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
/* a card is a link target now, so it must land below the sticky tab bar, not under it */
.card { scroll-margin-top: 132px; }
/* Index collection header */
.collection-mast{background:#faf7ef;border-top:5px solid var(--teal);border-bottom:1px solid var(--rule)}
.collection-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:0 64px;padding-top:48px;padding-bottom:0}
.collection-mast h1{font-size:21px;font-weight:normal;margin:20px 0;letter-spacing:-.02em}
.collection-mast h1 span{display:block;font-size:clamp(38px,4.8vw,62px);line-height:1.06;margin-top:14px;letter-spacing:-.045em}
.collection-mast .sub{font-size:15px;line-height:1.75;max-width:49ch}
.hero-link{display:inline-block;margin-top:24px;padding-bottom:8px;text-decoration:none;border-bottom:1px solid var(--gold);font:12px Consolas,monospace}
.hero-link:hover{color:var(--teal)}.hero-link:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
.collection-note{align-self:center;border:1px solid #d7c9ad;padding:28px;background:#f2ecdd;box-shadow:7px 7px 0 #e9e0cd}
.collection-note .kicker{line-height:1.7}
.hero-total{margin:18px 0 22px}.hero-total strong{display:block;font-size:clamp(60px,7vw,88px);line-height:1;font-weight:normal;letter-spacing:-.06em;color:#285e60}.hero-total>span{display:block;font-size:18px;margin-top:6px}
.collection-stats{display:flex;flex-wrap:wrap;gap:12px 22px;border-top:1px solid #d7c9ad;padding-top:17px;font:11px/1.6 Consolas,monospace;color:var(--ink-soft)}.collection-stats b{color:var(--ink)}
.collection-note p{margin:18px 0 0;color:var(--ink-soft);font-size:13px;font-style:italic}
.collection-mast .trio{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 28px;border-top:1px solid var(--rule);padding:18px 0;margin-top:38px;font-size:12px;line-height:1.5}.collection-mast .trio>span:first-child{margin-right:auto;font-style:italic}.collection-mast .trio b{border:0;margin-left:7px;font-family:Consolas,monospace}
@media(max-width:720px){.collection-hero{grid-template-columns:1fr;gap:28px;padding-top:30px}.collection-mast h1{margin-top:14px}.collection-note{padding:22px}.hero-total{display:flex;align-items:baseline;gap:15px;margin:15px 0}.hero-total strong{font-size:60px}.hero-total>span{font-size:16px}.collection-mast .trio{margin-top:0;gap:10px 22px}.collection-mast .trio>span:first-child{flex-basis:100%}}