/* Stylesheet of stichtingnoordmans.nl: the foundation's pages and the Verzamelde Werken.

   The look is "boekdruk" (October 2026, see AGENTS.md): one typeface (Literata), small caps instead of capitals,
   italics for secondary matter, one colour (rubric red) for rubrics, light grey rules.

   Order of this file:
     1. Typeface and tokens        5. Lists (volume, shelf, files)     9. Popups, share, Readwise
     2. Base: page, text, headings 6. Search and the Bible register   10. The foundation's pages
     3. The header                 7. Fields and buttons              11. Door de jaren
     4. Reading pages              8. The meta line and its cards     11b. Letters (correspondences)
                                                                         12. Print
   Each section keeps its phone rules (max-width:640px) right under it.  Odd values (1px, .27em) are optical
   corrections, measured in screenshots; the comment beside them says what they correct. */

/* ==== 1. Typeface and tokens ==== */
@font-face{font-family:"Literata";src:url(/static/fonts/literata.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/static/fonts/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
:root{
  --serif:"Literata","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg:#ffffff;--fg:#1c1c1c;--muted:#6b6863;--rule:#dedcd7;--panel:#f4f4f2;
  --accent:#a3231b;   /* rubric red: rubrics, note markers, buttons */
  --mark:#fbeec2;     /* a marked passage, a search hit */
  --rw:#f0dd9a;       /* a passage sent to Readwise */
  --control:2.75rem;  /* the height of every button and of the field beside it (44 px: a good size for a thumb) */
}
@media (prefers-color-scheme:dark){
  :root{--bg:#181818;--fg:#e7e5e0;--muted:#9b978f;--rule:#343331;--panel:#202020;--accent:#e2766b;--mark:#4a3d12;--rw:#6a5518}
}

/* ==== 2. Base ==== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:1.08rem/1.68 var(--serif);font-variant-numeric:oldstyle-nums;font-optical-sizing:auto}
main{max-width:46em;margin:0 auto;padding:1.2rem 1.2rem 6rem} /* about 795px of text: a tablet in portrait (the owner's, about 800px) is filled up to its margins */
@media (min-width:641px){main{padding-top:2.4rem}main.page{padding-top:4rem}} /* on a large screen more room under the header */
a{color:var(--accent)}
p{margin:0;hyphens:auto}
p+p{text-indent:1.5em}
h1{font-size:2.6rem;font-weight:430;letter-spacing:-.01em;line-height:1.12;margin:0 0 .6rem}
h2{font-size:1.5rem;font-weight:430;line-height:1.3;margin:4.5rem 0 1.4rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
h3{font-size:1.2rem;font-weight:430;margin:3rem 0 1rem}
h4{font-size:1rem;font-weight:400;font-style:italic;color:var(--accent);margin:2rem 0 .45rem}
h1+h2{border-top:0;margin-top:0;padding-top:0;font-style:italic}
.subtitle{font-style:italic;font-size:1.15rem;color:var(--muted);margin:0 0 1rem}
h1+p,.subtitle+p,nav+p,h1+p.item,.subtitle+p.item{margin-top:2.6rem}
h2+.subtitle,h3+.subtitle{font-size:1rem;margin:-.5rem 0 1rem}
h2+.subtitle+p,h3+.subtitle+p{margin-top:0}
/* labels: small caps of the text face, never tracked capitals */
.vol{margin:0 0 1.2rem;font:inherit;font-size:1rem;letter-spacing:.02em;font-variant-caps:all-small-caps;color:var(--muted)}
.vol a{color:inherit;text-decoration:none}
.vol a:hover{color:var(--accent)}
.lead{color:var(--muted);font-size:.95rem}
.lead.under{margin-top:1.2rem} /* right under a title (the subtitle of a volume): at the distance of the text under 'Door de jaren' */
.count,.filter,.lead,.hint,.shared,.loading{text-indent:0!important}
.loading{text-align:center;margin-top:20vh;color:var(--muted)}
/* the Verantwoording at the foot of a page (and the generic look of a <details>; every other one sets its own) */
details{margin-top:4rem;font:.95rem/1.5 var(--serif);color:var(--muted);border-top:1px solid var(--rule);padding-top:1rem}
details summary{cursor:pointer}
details li{margin:.25em 0}
@media (max-width:640px){h2{font-size:1.3rem}}
/* a word longer than the screen is wide ('traktementsregeling' in a title on a phone): hyphenate it (Dutch), and break it
   where hyphenation is not known, rather than make the page scroll sideways */
main{overflow-wrap:break-word}
@media (max-width:640px){h1,h2{hyphens:auto}}

/* ==== 3. The header ====
   header.site: the running head of every page (the foundation's name, its menu).  header.top: the four parts of the
   Verzamelde Werken under it.  On a phone (the owner's choice from the mockups, October 2026): the name and a Menu
   button on one line, sticky; the menu is a sheet over the whole screen (src/html.ts). */
.site{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;align-items:baseline;padding:1rem max(1.2rem,calc((100% - 60rem)/2 + 1.2rem)) .5rem;
  font:1rem/1.4 var(--serif);color:var(--fg);border-bottom:1px solid var(--rule)}
.site nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;align-items:baseline}
.site a{color:var(--fg);text-decoration:none}
.site a:hover,.site a[aria-current]{color:var(--accent)}
.site .name{color:var(--fg);font:inherit;font-variant-caps:all-small-caps;letter-spacing:.04em;font-size:1.12rem;margin-right:auto}
.site nav a{font-style:italic}
.top{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center;max-width:60rem;margin:0 auto;padding:.5rem 1.2rem;font:.98rem/1.4 var(--serif);color:var(--muted)}
.top a{color:var(--muted);text-decoration:none;font-style:italic}
.top a:hover,.top a[aria-current]{color:var(--accent)}
.top .home{color:var(--fg);font:inherit;font-variant-caps:all-small-caps;letter-spacing:.04em;font-size:1.05rem;margin-right:auto}
details.menu{display:none}
@media (max-width:640px){
  /* padding 1px above, 5px below: the capitals of the name in the middle of the bar, name and Menu on one baseline */
  .site{position:sticky;top:0;z-index:60;background:var(--bg);flex-wrap:nowrap;align-items:center;min-height:3.5rem;padding:1px .4rem 5px 1.2rem}
  .site > nav{display:none}
  /* on a narrow screen the name fades out at its end (.clip, set by site.js): the Menu button always stays in view */
  .site .name,.sheet-top .name{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;font-size:1rem;letter-spacing:.03em}
  .site .name.clip,.sheet-top .name.clip{-webkit-mask-image:linear-gradient(to left,transparent,#000 1.6rem);mask-image:linear-gradient(to left,transparent,#000 1.6rem)}
  details.menu{display:block;flex:none;margin:0 0 0 auto;padding:0;border:0;font:inherit;color:var(--muted)}
  details.menu > summary{list-style:none;display:flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .75rem;cursor:pointer;font-style:italic;font-size:.95rem;color:var(--muted)}
  details.menu > summary::-webkit-details-marker{display:none}
  .sheet{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow:auto;background:var(--bg);color:var(--fg)}
  .sheet-top{display:flex;align-items:center;justify-content:space-between;min-height:3.5rem;padding:1px .4rem 5px 1.2rem;border-bottom:1px solid var(--rule)}
  .sheet-top .name{color:var(--fg)}
  .sheet .close{all:unset;flex:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .75rem;font-style:italic;font-size:.95rem;color:var(--muted)}
  .sheet nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:1rem 1.2rem 2rem}
  .sheet nav > a,.sheet .group > a:first-child{display:block;font-style:normal;font-size:1.55rem;line-height:1.3;padding:.55rem 0;color:var(--fg)}
  .sheet nav > a,.sheet .group{border-bottom:1px solid var(--rule)}
  .sheet .group{padding-bottom:.7rem}
  .sheet a.sub{display:block;font-style:italic;font-size:1.1rem;padding:.4rem 0 .4rem 1rem;color:var(--muted)}
  .sheet nav a[aria-current],.sheet .group > a[aria-current]:first-child{color:var(--accent)}
  body.menu-open{overflow:hidden}
  .top{flex-wrap:nowrap;gap:1.4rem;align-items:stretch;padding:0 1.2rem;border-bottom:1px solid var(--rule);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .top .home{display:none}
  .top a{padding:.75rem 0 .7rem}
  .top a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
}
details.menu > summary svg,.sheet .close svg{position:relative;top:1px} /* optically centred on the lowercase of "Menu", not on its box */

/* ==== 4. Reading pages (src/read.ts; the paragraphs come from the database as HTML, pipeline/render_html.py) ==== */
/* headings inside a text */
h2.part{text-align:center;font-size:1.7rem;letter-spacing:.06em;border-top:3px double var(--rule);margin-top:6rem;padding-top:2.2rem}
h2.part+h2.book{border-top:0;margin-top:1.2rem;padding-top:0}
h2.book{text-align:center;font-size:1.4rem;font-style:italic}
h3.chap{font-size:1.35rem;margin:4rem 0 1.2rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
h2.book+h3.chap{border-top:0;margin-top:2rem;padding-top:0}
h3.num{text-align:center;letter-spacing:0;font-size:1.1rem;color:var(--muted)}
.kicker{text-align:center;font-variant:small-caps;letter-spacing:.06em;color:var(--muted);margin:0 0 .3rem;text-indent:0!important} /* the headings above a meditation */
.kicker+h1,.kicker+.kicker{margin-top:0}
/* a heading with a link back up (to the piece's own table of contents, or to the top): the link at the right, on the baseline */
h2:has(> a.up),h3:has(> a.up){display:flex;align-items:baseline;gap:1rem}
h2 > .ht,h3 > .ht{flex:1;min-width:0}
a.up{flex:none;font:400 .95rem/1 var(--serif);font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--muted);text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap}
a.up::before{content:"naar boven\2009\2191"}
a.up:hover,a.up:focus-visible{color:var(--accent)}
/* on a phone only the arrow, in a touch area of 44 by 44 px that does not push the heading about */
@media (max-width:640px){a.up::before{content:"\2191"}a.up{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-14px -12px -14px 0;font-size:1.2rem}}
/* paragraphs */
p.gap{margin-top:1.1em;text-indent:0}
p.verse{margin:1em 0 1em 2em;text-indent:0}
p.verse+p,blockquote+p,.qa+p,p.ref+p{text-indent:0}
blockquote{margin:1.1em 0 1.1em 1.6em;font-style:italic}
blockquote em{font-style:italic}
blockquote p+p{text-indent:0;margin-top:.5em}
p.ref{text-align:right;text-indent:0;font-size:.92rem;color:var(--muted);margin:-.4em 0 1.2em}
p.item,p+p.item{text-indent:-1.5em;padding-left:1.5em;margin:.3em 0}
p.item+p:not(.item){margin-top:.3em}
.qa{margin:1.2em 0;padding:.1em 0 .1em 1.1em;border-left:2px solid var(--rule)}
.qa p{text-indent:0;margin:.45em 0}
.qa .q{font-style:italic}
/* a line of dots in the book (lines lost or left out): a quiet mark between the lines */
.lacuna{display:block;text-align:center;margin:.35em 0;color:var(--muted);text-indent:0;line-height:1.2}
.lacuna::before{content:"[ \2009·\2009\2009·\2009\2009·\2009 ]";letter-spacing:.15em}
.lacuna sup{color:var(--accent)}
.lacuna+br,span:has(>.lacuna)+br{display:none}
/* two lines of dots one after the other (the OCR made two paragraphs of them) are one gap */
p:has(>span:only-child>.lacuna:only-child):has(+p>span:first-child>.lacuna:first-child){display:none}
p>span:first-child>.lacuna:first-child{margin-left:-1.5em}
/* note markers, page numbers, corrections */
sup{font-size:.68em;line-height:0;font-style:normal;margin-left:.08em}
sup a{color:var(--accent);text-decoration:none;padding:0 .08em}
sup a:hover{text-decoration:underline}
sup+sup::before{content:"\202f"}
sup.lost{color:var(--muted)}
a.pg{text-decoration:none}
.pg::before{content:attr(data-p);font:.66rem/1 system-ui,sans-serif;font-variant-numeric:lining-nums;color:var(--muted);border:1px solid var(--rule);
  border-radius:2px;padding:.08em .35em;margin:0 .3em;vertical-align:.18em;font-style:normal;letter-spacing:0}
body:not(.pages) .pg,h1 .pg,.kicker .pg{display:none}
mark.corr{background:none;color:inherit}
abbr.flag,abbr.del{text-decoration:none}
.flag,.del{display:none;font-style:normal}
body.review .flag,body.review .del{display:inline;color:#b00020;cursor:help;margin:0 .15em}
body.review .corr{background:var(--mark);cursor:help;border-radius:2px}
/* a marked passage (?c=) */
span.hl{background:var(--mark);box-decoration-break:clone;-webkit-box-decoration-break:clone}
p.hl,blockquote p.hl,h2.hl,h3.hl,h4.hl{background:var(--mark)}
article .hl{cursor:pointer} /* a click takes the marking away (site.js) */
.shared{font:.82rem/1.4 var(--serif);color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:.5rem .8rem;margin:0 0 2rem;display:flex;gap:1rem;justify-content:space-between}
/* back from a note: around the marker a ring that widens twice, like radar (not for readers who asked for less motion) */
@keyframes noteping{0%{transform:translate(-50%,-50%) scale(.4);opacity:.85}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
article sup a.ping{position:relative}
article sup a.ping::after{content:"";position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;opacity:0;animation:noteping .9s ease-out 2 both} /* both: invisible before and after, never a stray little circle */
@media (prefers-reduced-motion:reduce){article sup a.ping::after{content:none}}
/* the table of contents of a piece: titles, a dotted line, the page (also where there is no page: the line runs on) */
nav.toc{margin:2rem 0 0;font-size:.95rem}
nav.toc#inhoud{scroll-margin-top:1.5rem}
nav.toc ol{list-style:none;margin:0;padding:0}
nav.toc li{display:flex;gap:.6em;align-items:baseline;padding:.12em 0}
nav.toc li::before{content:"";order:2;flex:1;border-bottom:1px dotted var(--rule)}
nav.toc li::after{content:attr(data-p);order:3;color:var(--muted);font:.95rem var(--serif)}
nav.toc li[data-p=""]::after{display:none}
nav.toc li a{color:inherit;text-decoration:none;order:1}
nav.toc li a:hover{color:var(--accent)}
nav.toc li.l0{margin-top:.9em;font-variant:small-caps;letter-spacing:.06em}
nav.toc li.l1 a{font-style:normal}
nav.toc.deep li.l1{font-style:italic;margin-top:.35em}
nav.toc li.l2{padding-left:1.4em}
nav.toc li.grp{margin-top:1em;font-variant:small-caps;letter-spacing:.06em;color:var(--muted)}
nav.toc li.grp::before,nav.toc li.grp::after{display:none}
/* the notes at the foot */
.notes{font-size:.92rem;line-height:1.5}
.notes ol{list-style:none;margin:0;padding:0}
.notes li{display:grid;grid-template-columns:2.4em 1fr;margin:0 0 .7em}
.notes li:target{background:var(--mark)}
.notes .lab{color:var(--accent)}
.notes .lab a{color:inherit;text-decoration:none}
.notes p+p{text-indent:1.2em}
.notes .note-h{font-size:1.1em;margin:1em 0 .5em;text-indent:0}
.notes .note-h+p{text-indent:0}
.back{font-size:.8em;text-decoration:none;color:var(--muted);margin-left:.4em}
/* previous / next at the foot of a page */
.bar{display:flex;gap:1rem;align-items:baseline;font:.78rem/1.4 var(--serif);color:var(--muted);border-top:1px solid var(--rule);padding:.9rem 0 0}
.bar a{color:var(--muted);text-decoration:none}
.bar a:hover{color:var(--accent)}
.bar .mid{flex:1;text-align:center}
.bar .side{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .side.r{text-align:right}
details+.bar{margin-top:1.5rem}
/* under a meditation (deel 8): the invitation to get it by mail, a frame like the meditation on the start page */
aside.cta{position:relative;border:1px solid var(--rule);border-radius:2px;padding:1.9rem 2.2rem 1.3rem;margin:3.4rem 0 2.6rem}
aside.cta .label{position:absolute;top:-.8em;left:1.7rem;margin:0;padding:0 .55rem;background:var(--bg);font-size:1.08rem;line-height:1.5;color:var(--accent);font-variant-caps:all-small-caps;letter-spacing:.02em}
aside.cta p{text-indent:0;margin:0 0 .4rem}
aside.cta form.subscribe{margin:.8rem 0 0}
@media (max-width:640px){aside.cta{padding:1.7rem 1.2rem 1.1rem}aside.cta .label{left:.9rem}}

/* the size of the text of a reading page (Weergave, Tekstgrootte): the text and its notes, not the titles and the menu */
html[data-size="s"] article{font-size:1rem;line-height:1.6}
html[data-size="s"] .notes{font-size:.86rem;line-height:1.45}
html[data-size="l"] article{font-size:1.24rem;line-height:1.75}
html[data-size="l"] .notes{font-size:1.05rem;line-height:1.55}

/* ==== 5. Lists ==== */
/* the shelf (/verzamelde-werken): every volume on one line, its name in the middle of its two lines (subtitle, contents) */
.shelf{list-style:none;margin:2rem 0 0;padding:0}
.shelf li{border-top:1px solid var(--rule)}
.shelf li:last-child{border-bottom:1px solid var(--rule)}
.shelf a{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.1rem 1rem;padding:.95rem .2rem;color:inherit;text-decoration:none;align-items:baseline}
.shelf a:hover .d{color:var(--accent)}
.shelf .d{grid-row:1 / span 2;align-self:center;font-size:1.45rem;line-height:1.2;white-space:nowrap}
.shelf .s{font-size:1.06rem;line-height:1.35} /* the subtitle of the volume, as on the book */
.shelf .m{grid-column:2;font:italic .95rem var(--serif);color:var(--muted)}
p.shelf-note{text-indent:0;margin:2rem 0 0;font-size:.95rem;color:var(--muted)}
p.shelf-note a{color:var(--accent)}
@media (max-width:520px){.shelf a{grid-template-columns:1fr}.shelf .m{grid-column:1}.shelf .d{grid-row:auto;align-self:auto}}
/* the list of a volume (src/index.ts): number, title, [year], [count], [pages], (i) (its room kept also where a row has none,
   so the years line up).  The columns have no gap of their
   own: an empty column (count, pages, year) must not push the (i) away, so the items that are there carry a margin */
.index{list-style:none;margin:2rem 0 0;padding:0}
.index li{position:relative;display:grid;grid-template-columns:calc(2.2em + .6rem) minmax(0,1fr) auto auto auto calc(15px + .9rem);gap:.15rem 0;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--rule)}
.index li.div{display:block;border-top:0;padding:2.4rem 0 .5rem;font:inherit;font-size:1.05rem;letter-spacing:.02em;font-variant-caps:all-small-caps;color:var(--accent)}
.index li.div.sub{padding:1.2rem 0 .4rem;font-weight:400;letter-spacing:.02em;font-size:.86rem}
.index li.div.end{padding:1.2rem 0 0}
.index a{grid-column:2;grid-row:1;color:var(--fg);text-decoration:none;font-size:1.06rem;line-height:1.4}
.index a::after{content:"";position:absolute;inset:0} /* the whole row is the link (number, year, pages too) */
.index li:hover a{color:var(--accent)}
.index .n{grid-column:1;grid-row:1}
.index .n,.index .pp,.index .cnt{font:italic .95rem var(--serif);color:var(--muted);white-space:nowrap}
.index .yr{grid-column:3;justify-self:end;align-self:center;margin-left:1.8rem;line-height:1;position:relative;top:-.1em;opacity:.85;font-size:.85rem;font-style:italic;color:var(--muted);white-space:nowrap} /* two pieces of one name: the year tells them apart */
.index .cnt{grid-column:4;margin-left:.6rem}
.index .pp{display:none;grid-column:5;margin-left:.6rem}
body.pages .index .pp,.index .pp.keep{display:inline}
.index button.more{position:relative;z-index:1;grid-column:6;justify-self:end;align-self:center;border:0;background:none;padding:.15rem;margin:0 0 0 .6rem;color:var(--muted);cursor:pointer;line-height:0;opacity:.55}
.index button.more svg{width:15px;height:15px}
.index li:hover button.more,.index button.more[aria-expanded="true"]{opacity:1}
.index button.more:hover,.index button.more[aria-expanded="true"]{color:var(--accent)}
.index .src{position:relative;z-index:1;grid-column:2/-1;margin:.2rem 0 .3rem;font-size:.86rem;color:var(--muted);line-height:1.45;text-indent:0}
/* with the switch 'Jaartallen' (body.years) the year lies over the end of the title, on a gradient of the page's own
   colour: nothing in the list moves */
.index .yl{display:none;grid-column:2;grid-row:1;justify-self:end;align-self:stretch;align-items:center;padding-left:2.6rem;background:linear-gradient(to right,transparent,var(--bg) 2.2rem);font-size:.85rem;font-style:italic;color:var(--muted);white-space:nowrap;pointer-events:none}
body.years .index .yl{display:flex}
/* the newsletters (start page): the whole row is the link */
.files li{border-top:1px solid var(--rule)}
.files li:last-child{border-bottom:1px solid var(--rule)}
.files a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;color:var(--fg);text-decoration:none}
.files a:hover,.files a:hover span{color:var(--accent)}
.files span{font:italic .95rem var(--serif);color:var(--muted)}
/* not found: what may have been meant */
ul.maybe li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.45rem 0;border-top:1px solid var(--rule)}
ul.maybe li:last-child{border-bottom:1px solid var(--rule)}
ul.maybe span{font:.8rem var(--serif);color:var(--muted);text-align:right;flex:none;max-width:50%}

/* ==== 6. Search (src/search.ts) and the Bible register (src/bible.ts) ==== */
form.search{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;margin:1.6rem 0 2rem;font:.85rem/1.4 var(--serif);color:var(--muted)} /* minmax: the field may be narrower than it would like, no sideways scrolling on a small phone */
.filters{margin:0;padding:0;border:0;font:inherit;color:inherit}
.filters summary{list-style:none;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;padding:.15rem 0}
.filters summary::-webkit-details-marker{display:none}
.filters summary::before{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(.04em) rotate(-45deg);transition:transform .12s}
.filters[open] summary::before{transform:translateY(-.1em) rotate(45deg)}
.filters summary:hover{color:var(--accent)}
.filters .n{font-size:.72rem;line-height:1.5;min-width:1.5em;text-align:center;color:var(--bg);background:var(--accent);border-radius:999px}
.filters .fields{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin-top:.7rem;padding:1rem;border:1px solid var(--rule);border-radius:2px}
.filters .wide{grid-column:1/-1}
.filters .f{display:grid;gap:.3rem;min-width:0}
.filters .f>span{font-size:.78rem}
.filters small{font-size:inherit;opacity:.8}
.filters .f small::before{content:"· "}
.filters .pair{display:grid;grid-template-columns:1fr 7.5rem;gap:.5rem}
.filters select,.filters input[type=number]{font:.9rem/1.3 var(--serif);color:var(--fg);background:var(--bg);border:1px solid var(--rule);border-radius:0;
  padding:.45rem .6rem;width:100%;min-width:0;height:2.35rem}
.filters select:focus,.filters input[type=number]:focus{outline:none;border-color:var(--accent)}
.filters .check{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;color:var(--fg);font-size:.9rem}
.filters .check input{margin:.15rem 0 0;width:1rem;height:1rem;accent-color:var(--accent);flex:none}
.filters .check small{display:block;color:var(--muted);font-size:.78rem;opacity:1}
.filters .clear{margin:0;text-indent:0;font-size:.8rem}
.filters .clear a{color:var(--muted)}
.filters .clear a:hover{color:var(--accent)}
@media (max-width:520px){.filters .fields{grid-template-columns:1fr}}
.found{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 .5rem}
.count{font:.85rem var(--serif);color:var(--muted);margin:0 0 .5rem}
.found .count{margin:0}
.order{font:.85rem var(--serif);color:var(--muted);margin:0;text-indent:0!important;display:flex;gap:1rem}
.order a{color:var(--muted);text-decoration:none}
.order a:hover{color:var(--accent)}
.order b{font-weight:500;color:var(--fg)}
.hint{font:.8rem/1.5 var(--serif);color:var(--muted)}
.hint code{font:inherit;color:var(--fg);background:var(--mark);border-radius:2px;padding:0 .25em}
ol.hits{list-style:none;margin:0;padding:0;overflow-wrap:anywhere} /* a long word in a snippet (genade/zonde/nood) may break, not push the page wider */
ol.hits li{padding:.9rem 0;border-top:1px solid var(--rule)}
ol.hits .where{font:.8rem/1.4 var(--serif);color:var(--muted);margin:0 0 .25rem;text-indent:0}
ol.hits .where a{color:var(--fg);text-decoration:none;font-weight:600}
ol.hits .where a:hover{color:var(--accent)}
ol.hits .snip{font-size:1rem;line-height:1.5;margin:0;text-indent:0;hyphens:manual}
ol.hits mark,.ctx mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 .1em}
.tag{font:.7rem var(--serif);color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:.05em .4em;margin-left:.4em;white-space:nowrap}
.pager{display:flex;justify-content:space-between;font:.85rem var(--serif);margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rule)}
.pager a{text-decoration:none}
/* the register: the books in two columns, the chapters as a grid */
.books{columns:2;column-gap:2.5rem;list-style:none;margin:0 0 2rem;padding:0;font-size:1rem}
.books li{display:flex;gap:.6em;align-items:baseline;padding:.1em 0;break-inside:avoid}
.books li::before{content:"";order:2;flex:1;border-bottom:1px dotted var(--rule)}
.books li a,.books li span.b{order:1;text-decoration:none;color:var(--fg)}
.books li a:hover{color:var(--accent)}
.books li span.b{color:var(--muted)}
.books li .n{order:3;font:.78rem var(--serif);color:var(--muted)}
@media (max-width:640px){.books{columns:1}}
h2.plain{border-top:0;padding-top:0;margin:2.5rem 0 .8rem;font-size:1.2rem}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.3rem,1fr));gap:.4rem;margin:1rem 0 2rem;font:.9rem var(--serif)}
.chapters a,.chapters span{display:block;text-align:center;padding:.35rem 0 .25rem;border:1px solid var(--rule);border-radius:2px;text-decoration:none;color:var(--fg)}
.chapters a:hover,.chapters a[aria-current]{border-color:var(--accent);color:var(--accent)}
.chapters span{color:var(--rule)}
.chapters small{display:block;font-size:.68rem;color:var(--muted)}
.filter{font:.85rem var(--serif);color:var(--muted);margin:0 0 1rem}
.filter a{text-decoration:none;margin-right:.9em}
.filter a[aria-current]{color:var(--fg);font-weight:600}

/* ==== 7. Fields and buttons ====
   One look everywhere: solid (red, white small caps; dark on hover) or .quiet / .outline (a red line, filled red on
   hover).  A button beside a field (search, subscribe, Readwise) has the height of the field, var(--control). */
form.search .q,form.subscribe .q{display:flex;gap:.5rem}
form.search input[type=search],form.subscribe input[type=email],.rwform input{flex:1;min-width:0;height:var(--control);color:var(--fg);border:1px solid var(--rule);border-radius:2px}
form.search input[type=search]{font:1.1rem/1.3 var(--serif);background:transparent;padding:0 .8rem .27em} /* .27em below: the letters at the optical middle, as in the buttons */
form.subscribe input[type=email]{font:1.05rem/1.3 var(--serif);background:var(--bg);padding:0 .7rem .27em}
.rwform input{font:1rem var(--serif);background:transparent;padding:0 .7rem .27em}
form.search input[type=search]:focus,.rwform input:focus{outline:none;border-color:var(--accent)}
form.subscribe input[type=email]:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.btn,form.search button,form.subscribe button,.rwform button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);vertical-align:middle;
  margin:0;padding:0 1rem .3em;border:0;border-radius:2px;background:var(--accent);color:#fff; /* .3em below: small caps sit low in their line */
  font:400 1.08rem/1.3 var(--serif);font-variant-caps:all-small-caps;letter-spacing:.04em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.btn:hover,form.search button:hover,form.subscribe button:hover,.rwform button:hover{background:var(--fg);color:var(--bg)}
.btn.quiet,.btn.outline{background:none;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.btn.quiet:hover,.btn.outline:hover{background:var(--accent);color:#fff}
form.search button,form.subscribe button,.rwform button{flex:none}
.btn:disabled,form.subscribe button:disabled,.rwform button:disabled{opacity:.55;cursor:default}
.btn:disabled:hover,form.subscribe button:disabled:hover,.rwform button:disabled:hover{background:var(--accent);color:#fff}
.btn.outline:disabled:hover,.btn.quiet:disabled:hover{background:none;color:var(--accent)}
@media (prefers-color-scheme:dark){
  .btn,form.search button,form.subscribe button,.rwform button,.btn.quiet:hover,.btn.outline:hover,.btn:disabled:hover{color:#181818}
  .btn.quiet,.btn.outline{color:var(--accent)}
}
/* a row of a button and links (start page, the meditation pages) */
.go{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-top:1.6rem!important;font:inherit;font-size:1rem}
.go a:not(.btn){font-style:italic;color:var(--fg)}
/* subscribe to the meditation of the week (src/subscribe.ts; also under every text of deel 8) */
form.subscribe{margin:1.2rem 0 1.4rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
form.subscribe label{font-size:.95rem;color:var(--muted);font-style:italic}
form.subscribe .hp{position:absolute;left:-9999px;height:1px;overflow:hidden} /* a field for robots only */
form.subscribe .privacy{margin:.1rem 0 0;font-size:.88rem;line-height:1.45;color:var(--muted);font-style:italic}

/* ==== 8. The meta line of a page and its cards ====
   Where the page stands (.vol) and at its right "Weergave" (a <details> with a card of switches, src/html.ts) */
.meta{position:relative;display:flex;gap:1rem;align-items:baseline;justify-content:space-between;margin:1rem 0 1.2rem}
.meta .vol{margin:0}
.view{position:relative;flex:none;margin:0;padding:0;border:0;font:italic .95rem/1.4 var(--serif);line-height:inherit;color:var(--muted)}
.view summary{list-style:none;display:flex;align-items:baseline;gap:.4rem;padding:0 0 0 .5rem;margin:0}
.view summary::-webkit-details-marker{display:none}
.view summary svg{align-self:center}
.view summary:hover,.view[open] summary{color:var(--accent)}
/* the card hangs from the button, not from the line beside it: a breadcrumb over two lines does not push it down */
.view .card{position:absolute;z-index:20;right:0;top:100%;margin-top:.5rem;width:min(19rem,calc(100vw - 2.4rem));background:var(--bg);color:var(--fg);
  border:1px solid var(--rule);border-radius:2px;box-shadow:0 2px 12px rgba(0,0,0,.12);padding:.35rem 0}
.view label{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .9rem;cursor:pointer}
.view label+label{border-top:1px solid var(--rule)}
.view input{margin:.2rem 0 0;width:1rem;height:1rem;accent-color:var(--accent);flex:none}
.view b{display:block;font-weight:500;font-size:.86rem}
.view small{display:block;color:var(--muted);font-size:.76rem}
.view .size{display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.45rem .9rem .55rem;border-top:1px solid var(--rule)}
.view .seg{display:flex;border:1px solid var(--rule);border-radius:2px}
.view .seg button{all:unset;cursor:pointer;min-width:2.4rem;min-height:2rem;display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--muted);line-height:1}
.view .seg button+button{border-left:1px solid var(--rule)}
.view .seg button[data-size="s"]{font-size:.8rem}.view .seg button[data-size="m"]{font-size:1rem}.view .seg button[data-size="l"]{font-size:1.25rem}
.view .seg button:hover{color:var(--accent)}
.view .seg button[aria-pressed="true"]{color:var(--fg);background:var(--panel)}
.view .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.view .rwlink{display:block;padding:.5rem .9rem;border-top:1px solid var(--rule);font-size:.76rem;color:var(--muted);text-decoration:none}
.view .rwlink:hover{color:var(--accent)}
/* a title with a card beside it (Door de jaren): the title where the other titles are, the card where Weergave is elsewhere */
.titlebar{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 0 1.2rem}
.titlebar h1{margin:0}
.titlebar > .view{margin-top:1.06rem}

/* ==== 9. Popups: a note, a Bible passage, Readwise; the share bar ==== */
.pop{position:absolute;z-index:20;width:min(30rem,calc(100vw - 1.6rem));max-height:60vh;overflow:auto;background:var(--bg);color:var(--fg);
  border:1px solid var(--rule);border-radius:2px;box-shadow:0 2px 12px rgba(0,0,0,.12);padding:.8rem 1rem .9rem;font-size:.95rem;line-height:1.5}
.pop .ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem;font:inherit;font-size:1rem;letter-spacing:.02em;font-variant-caps:all-small-caps;color:var(--muted)}
.pop .ph button{font:1.1rem/1 var(--serif);color:var(--muted);background:none;border:0;cursor:pointer;padding:0 0 0 1rem}
.pop p{text-indent:0!important;margin:0 0 .5em}
.pop .note+.note{border-top:1px solid var(--rule);margin-top:.7rem;padding-top:.7rem}
.pop .back{display:none}
@media (max-width:640px){.pop{position:fixed;left:.8rem!important;right:.8rem;top:auto!important;bottom:.8rem;width:auto;max-height:55vh}}
.share{position:absolute;z-index:21;display:flex;gap:.2rem;background:var(--fg);border-radius:7px;padding:.25rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.share button{font:.8rem var(--serif);color:var(--bg);background:none;border:0;border-radius:0;padding:.35rem .7rem;cursor:pointer;white-space:nowrap}
.share button:hover{background:rgba(128,128,128,.35)}
.toast{position:fixed;left:50%;bottom:3.2rem;transform:translateX(-50%);z-index:30;font:.85rem var(--serif);color:var(--bg);background:var(--fg);
  border-radius:2px;padding:.5rem .9rem;max-width:calc(100vw - 2rem)}
/* Bible references: a quiet link in the text, the passage in a popup */
a.bib,a.xref{color:inherit;text-decoration:underline dotted var(--muted);text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
a.bib:hover,a.xref:hover{color:var(--accent);text-decoration-color:var(--accent)}
.pop.bib{z-index:22}
.pop.bib .bt p{margin:0 0 .45em}
.pop.bib .bt b{font:600 .66em var(--serif);color:var(--muted);margin-right:.5em;vertical-align:.3em}
.pop.bib .ch{font:.72rem var(--serif);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:.9em 0 .35em}
.pop.bib .wait{color:var(--muted);font-style:italic}
.pop.bib .bf{font:.72rem/1.4 var(--serif);color:var(--muted);margin:.75rem 0 0;padding-top:.55rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:.3rem 1rem;flex-wrap:wrap}
.pop.bib .bf a{color:var(--muted)}
.pop.bib .bf a:hover{color:var(--accent)}
/* Readwise (assets/static/readwise.js, src/readwise.ts): what was sent before, the card, the page /readwise */
span.rw{background:linear-gradient(transparent 68%,var(--rw) 68%);cursor:pointer}
.pop.rwc{z-index:23;width:min(26rem,calc(100vw - 1.6rem))}
.pop.rwc blockquote{margin:0 0 .6rem;padding:0 0 0 .7rem;border-left:2px solid var(--rw);font-size:.92rem;color:var(--fg);white-space:pre-line;max-height:9.5em;overflow:auto}
.pop.rwc textarea{width:100%;font:.85rem/1.4 var(--serif);color:var(--fg);background:transparent;border:1px solid var(--rule);border-radius:2px;padding:.4rem .55rem;resize:vertical}
.pop.rwc textarea:focus{outline:none;border-color:var(--accent)}
.acts{display:flex;gap:.9rem;align-items:center;margin:.6rem 0 0!important;font:.82rem var(--serif)}
.acts button{font:.82rem var(--serif);color:var(--bg);background:var(--accent);border:0;border-radius:2px;padding:.4rem .8rem;cursor:pointer}
.acts button:disabled{opacity:.6;cursor:default}
button.quiet{font:.82rem var(--serif);color:var(--muted)!important;background:none!important;border:0;padding:0!important;text-decoration:underline;cursor:pointer}
button.quiet:hover{color:var(--accent)!important}
.rwform{display:flex;gap:.5rem;margin:0 0 .6rem}
ol.rwlist li{padding:1rem 0;border-top:1px solid var(--rule)}
ol.rwlist blockquote{margin:0 0 .4rem;padding-left:.8rem;border-left:2px solid var(--rw)}
ol.rwlist blockquote a{color:inherit;text-decoration:none}
ol.rwlist blockquote a:hover{color:var(--accent)}
ol.rwlist .note{font-style:italic;color:var(--muted);margin-bottom:.3rem!important}
ol.rwlist .where{display:flex;justify-content:space-between;gap:1rem;font:.8rem var(--serif);color:var(--muted)}

/* ==== 10. The foundation's pages (main.page: src/pages.ts, src/subscribe.ts, src/readwise.ts, the not-found page) ==== */
main.page p,main.page p+p{text-indent:0;margin:0 0 1em}
main.page h1{margin-bottom:1.6rem}
main.page h2{font-size:1.3rem;margin:2.8rem 0 .8rem;padding-top:1.2rem}
main.page ul{padding-left:1.2em;margin:0 0 1em}
main.page ul.plain,main.page ul.files,main.page ul.maybe,main.page ol.rwlist{list-style:none;padding:0}
main.page ul.maybe,main.page ol.rwlist{margin:0}
main.page ul.maybe{margin-bottom:1em}
main.page ol.rwlist p{margin:0}
main.page .by{color:var(--muted);font-style:italic}
main.page dl{margin:0}
main.page dt{font-style:italic;margin-top:.7em}
main.page dd{margin:0}
main.page .small{font-size:.9rem;color:var(--muted);font-style:italic;margin-top:2rem}
.iban{white-space:nowrap;font-variant-numeric:lining-nums}
/* the start page: the portrait beside the text; on a phone the portrait as the cover of a book, full width, with the
   name and the years on it */
.hero{display:grid;grid-template-columns:1fr 11rem;gap:2rem;align-items:start}
.hero figure{margin:0}
.hero img{display:block;width:100%;height:auto;border-radius:0;filter:grayscale(1) contrast(1.05)}
.hero figcaption{display:none}
.hero .intro{font-size:1.15rem;line-height:1.55}
@media (max-width:640px){
  main.page:has(.hero){padding-top:0}
  .hero{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero figure{order:-1;position:relative;margin:0 -1.2rem 1.6rem;background:#1c1c1c;height:min(56svh,30rem);overflow:hidden}
  .hero img{height:100%;object-fit:cover;object-position:50% 18%;opacity:.92}
  .hero figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(38,35,31,0) 45%,rgba(38,35,31,.92) 88%)}
  .hero figcaption{display:block;position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;z-index:1;color:#efeae0}
  .hero figcaption .name{display:block;font-size:2.3rem;line-height:1.1}
  .hero figcaption .dates{display:block;font:.85rem/1.4 var(--serif);letter-spacing:.08em;color:#cfc7b8;margin-top:.35rem}
  .hero > div > h1{display:none}
  .hero .intro{font-size:1.08rem}
}
@media (max-width:640px) and (prefers-color-scheme:dark){.hero figure::after{background:linear-gradient(to bottom,rgba(15,14,13,0) 45%,rgba(15,14,13,.94) 88%)}}
/* the meditation of the week (src/meditation.ts): a thin frame with its label in the top edge, like a box in a
   church paper; a rubric and a red initial, as in an old book of devotions */
.med{position:relative;margin:4rem 0 0;padding:2.1rem 2.2rem 1.7rem;border:1px solid var(--rule);border-radius:2px}
.med .label{position:absolute;top:-.8em;left:1.7rem;display:block;margin:0;padding:0 .55rem;background:var(--bg);
  font:inherit;font-size:1.08rem;line-height:1.5;letter-spacing:.02em;font-variant-caps:all-small-caps;color:var(--accent)}
.med .cal{position:absolute;top:-.8em;right:1.7rem;padding:0 .55rem;background:var(--bg);font-size:.95rem;line-height:1.5;font-style:italic;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.med .cal:hover{color:var(--accent)}
.med .season{display:block;font-style:italic;color:var(--muted);margin:0 0 .3rem}
main.page .med h2{font-size:2rem;font-weight:430;margin:0 0 1rem;padding:0;border:0}
.med h2 a{color:var(--fg);text-decoration:none}
.med h2 a:hover{color:var(--accent)}
main.page .med .motto{margin:0 0 1.4rem;font-size:1rem;color:var(--fg)}
.med .motto i{display:block}
.med .motto .ref{display:block;margin-top:.2rem;font:inherit;font-size:.95rem;font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.03em;color:var(--muted);text-align:right}
main.page .med .opening{margin:0 0 1rem;line-height:1.6;text-indent:0}
main.page .med .opening::first-letter{float:left;font-size:3.35em;line-height:.85;padding:.06em .08em 0 0;color:var(--accent);font-weight:400}
main.page .med .more{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.6rem 1.4rem;margin:0;padding-top:.4rem;font:inherit;font-size:1rem}
.med .more > a{color:var(--accent);font-weight:400;font-size:1.08rem;font-variant-caps:all-small-caps;letter-spacing:.04em;text-decoration:none}
.med .more span{color:var(--muted);font-style:italic}
.med .more span a{color:var(--muted)}
@media (max-width:640px){
  .med{margin:3rem 0 0;padding:1.9rem 1.2rem 1.4rem}
  .med .label{left:.9rem}
  .med .cal{right:.9rem;padding:0 .45rem;top:-.55em}
  .med .cal span{display:none}
  .med .cal svg{width:16px;height:16px}
}
/* the accounts on the page Stichting */
table.money{border-collapse:collapse;width:100%;font-size:.95rem}
.money th{text-align:left;font:600 .76rem var(--serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:1rem 0 .3rem}
.money td{padding:.3rem 0;border-top:1px solid var(--rule)}
.money td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:1rem}
.money .sum td{border-top:2px solid var(--fg);font-weight:600}

/* ==== 11. Door de jaren (src/years.ts): a bar per year, then the periods of his life ==== */
.spectrum{position:relative;left:50%;translate:-50%;width:min(56rem,calc(100vw - 2.4rem));margin:1.8rem 0 0}
.sp-in{--gap:3px}
.spectrum .bars,.spectrum .ticks,.spectrum .bands{display:grid;grid-template-columns:repeat(var(--years),minmax(0,1fr));column-gap:var(--gap)}
.spectrum .bars{align-items:end;height:9.5rem;border-bottom:1px solid var(--fg)}
/* a bar: as high as its pieces against the busiest year (--h, 0…1); its top part (--e of it) is the share of sermons and
   meditations spread over the years of their bundle, an estimate: lighter */
.spectrum .yb{display:flex;flex-direction:column;height:calc(var(--h) * 9rem + 3px);background:color-mix(in srgb,var(--muted) 45%,var(--bg));border-radius:1px 1px 0 0;transition:background-color .15s,opacity .25s}
.spectrum .yb .est{display:block;flex:none;height:calc(var(--e) * 100%);background:color-mix(in srgb,var(--muted) 18%,var(--bg));border-radius:1px 1px 0 0}
.spectrum a.yb:hover .est,.spectrum a.yb:focus-visible .est,.spectrum .yb.on .est{background:color-mix(in srgb,var(--accent) 35%,var(--bg))}
.spectrum .yb.none{height:3px;background:var(--rule)}
.spectrum .yb.none .est{display:none}
.spectrum a.yb.none{pointer-events:none}
.spectrum .yb.out{opacity:.35} /* the years of a period that is not open */
.spectrum a.yb:hover,.spectrum a.yb:focus-visible,.spectrum a.yb.on{background:var(--accent);opacity:1}
.spectrum .ticks{margin-top:.3rem;font-size:.8rem;color:var(--muted)}
.spectrum .ticks span{white-space:nowrap;overflow:visible}
.spectrum .bands{margin-top:.6rem}
.spectrum .bands a{grid-column:span var(--n);display:block;min-height:2rem;padding:.35rem .25rem 0;border-top:2px solid var(--rule);font-size:.9rem;font-style:italic;color:var(--muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spectrum .bands a:hover,.spectrum .bands a.on{color:var(--accent);border-top-color:var(--accent)}
.spectrum .bands .short{display:none}
p.swipe{display:none;margin:.4rem 0 0;font-size:.85rem;font-style:italic;color:var(--muted);text-indent:0}
@media (max-width:640px){
  .spectrum{left:auto;translate:none;width:auto;margin:1.4rem -1.2rem 0;padding:0 1.2rem .4rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp-in{min-width:calc(var(--years) * 14px)}
  .spectrum .bands .long{display:none}.spectrum .bands .short{display:inline}
  p.swipe{display:block}
}
.periods{margin-top:2.6rem;border-bottom:1px solid var(--fg)}
details.period{margin:0;border-top:1px solid var(--fg);padding:1.1rem 0 1rem;font:inherit;font-size:1rem;color:var(--fg)}
details.period li{margin:0}
details.period > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;min-height:44px}
details.period > summary::-webkit-details-marker{display:none}
details.period > summary::after{content:"+";grid-column:2;grid-row:2;align-self:baseline;font-size:1.4rem;line-height:1;color:var(--muted)}
details.period[open] > summary::after{content:"−"}
details.period .when{grid-column:1/-1;font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:1.05rem;color:var(--accent)}
details.period .name{grid-column:1;color:var(--fg);font-size:1.65rem;line-height:1.2}
details.period .what{grid-column:1/-1;font-style:italic;color:var(--muted);font-size:.95rem;margin-top:.15rem}
details.period > summary:hover .name{color:var(--accent)}
/* a period without pieces (under the Filter): quiet, and it does not open (site.js) */
details.period.empty > summary{cursor:default}
details.period.empty > summary::after{content:none}
details.period.empty .name,details.period.empty .when,details.period.empty > summary:hover .name{color:var(--muted)}
.period .through{margin:1rem 0 .6rem;padding:.7rem .9rem;background:var(--panel);border-radius:2px}
.period .through .lab{margin:0 0 .3rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-indent:0}
.period ul,.period ol{list-style:none;margin:0;padding:0}
.period li li,.period .through li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;line-height:1.45;padding:.12rem 0}
.period li li a,.period .through li a{color:var(--fg);text-decoration:none}
.period li li a:hover,.period .through li a:hover{color:var(--accent)}
.period .m{flex:none;font-size:.85rem;font-style:italic;color:var(--muted);white-space:nowrap}
.period .years{margin-top:.6rem}
.period .year{display:grid;grid-template-columns:4.2rem minmax(0,1fr);column-gap:1rem;padding:.6rem 0;border-top:1px solid var(--rule);scroll-margin-top:1.5rem;transition:background-color .4s}
.period .year:first-child{border-top:0}
.period .year .y{font-size:1.25rem;line-height:1.3}
.period .year.on{background:var(--mark);border-radius:2px;padding-inline:.6rem;margin-inline:-.6rem}
.period .year.on .y{color:var(--accent)}
.period li[hidden],.period .year[hidden],.period .through[hidden]{display:none}
p.years-note{margin-top:1rem;font-size:.85rem;font-style:italic;color:var(--muted);text-indent:0}
/* on a phone the volume and years go under the title, small: the title gets the whole width */
@media (max-width:640px){
  .period .year{grid-template-columns:3rem minmax(0,1fr);column-gap:.6rem}
  .period li li,.period .through li{display:block;padding:.25rem 0}
  .period .m{display:block;margin-top:.05rem;font-size:.8rem;line-height:1.3}
  .period .through{padding:.6rem .7rem;margin-inline:-.2rem}
}
/* the filter beside the title: which volumes (two columns of switches, and all / none) */
.view .card.vols{width:min(21rem,calc(100vw - 2.4rem));padding:.6rem 0 .3rem}
.view .vols .grid{display:grid;grid-template-columns:1fr 1fr}
.view .vols .grid label{padding:.45rem .9rem;border:0}
.view .vols .all{display:flex;gap:1rem;margin:.3rem .9rem 0;padding-top:.5rem;border-top:1px solid var(--rule);text-indent:0}
.view .vols .all button{all:unset;cursor:pointer;font-size:.8rem;font-style:italic;color:var(--muted);min-height:32px}
.view .vols .all button:hover{color:var(--accent)}

/* ==== 11b. Letters (src/letters.ts): the correspondents, one correspondence, and its frame on a letter ==== */
.corr-head,.correspondents a{display:grid;grid-template-columns:minmax(0,1fr) 4rem 13rem;gap:0 1.1rem;align-items:center}
.corr-head{margin:2rem 0 0;padding-bottom:.35rem;border-bottom:1px solid var(--fg);font-size:.85rem;font-style:italic;color:var(--muted)}
.corr-head .n,.correspondents .n{text-align:right}
.corr-head .years{display:flex;justify-content:space-between}
.correspondents{list-style:none;margin:0;padding:0}
.correspondents li{border-bottom:1px solid var(--rule)}
.correspondents a{padding:.55rem 0;color:var(--fg);text-decoration:none}
.correspondents .who{min-width:0}
.correspondents .name{display:block;font-size:1.06rem;line-height:1.35}
.correspondents a:hover .name{color:var(--accent)}
.correspondents .m{display:block;font-size:.85rem;font-style:italic;color:var(--muted)}
.correspondents .n{font-size:1.06rem}
svg.spark,svg.bars{display:block;width:100%;fill:color-mix(in srgb,var(--muted) 70%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--muted) 45%,var(--bg))}
svg.spark{height:1.6rem}
@media (max-width:640px){
  .corr-head{display:none}
  .correspondents a{grid-template-columns:minmax(0,1fr) auto;row-gap:.35rem}
  .correspondents svg.spark{grid-column:1/-1}
}
/* one correspondence: the other party at the left, Noordmans at the right, a year between them */
.corr-years{margin:1.6rem 0 0}
svg.bars{height:2.9rem;border-bottom-color:var(--fg)}
.corr-years p{display:flex;justify-content:space-between;margin:.2rem 0 0;font-size:.8rem;color:var(--muted);text-indent:0}
.conversation{list-style:none;margin:1.6rem 0 0;padding:0}
.conversation li.yr{margin:1.6rem 0 .6rem;font-size:1.05rem;letter-spacing:.04em;font-variant-caps:all-small-caps;color:var(--accent)}
.conversation li.o,.conversation li.n{display:flex;margin:0 0 .75rem;scroll-margin-top:5rem}
.conversation li.n{justify-content:flex-end}
.conversation li a{display:block;width:78%;padding:.7rem 1rem .75rem;border:1px solid var(--rule);border-radius:2px;color:var(--fg);text-decoration:none}
.conversation li.o a{background:var(--panel)}
.conversation li a:hover{border-color:var(--accent)}
.conversation li:target a{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.conversation .h{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--muted)}
.conversation .h b{font-weight:500;color:var(--fg)}
.conversation .d{font-style:italic;text-align:right}
.conversation .t{display:block;margin-top:.35rem;font-size:1rem;line-height:1.5}
.conversation .re{display:block;margin-top:.35rem;font-size:.85rem;font-style:italic;color:var(--accent)}
@media (max-width:640px){
  .conversation li a{width:90%;padding:.6rem .8rem .65rem}
  .conversation .h{flex-direction:column;gap:0}
  .conversation .d{text-align:left}
}
/* on the page of a letter, between its date line and its text */
aside.exchange{margin:1.4rem 0 2rem;padding:.9rem 1rem .5rem;border:1px solid var(--rule);border-radius:2px;font-size:.95rem;line-height:1.45}
aside.exchange p{text-indent:0;margin:0}
aside.exchange .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 1rem}
aside.exchange .label{color:var(--accent);font-size:1.08rem;letter-spacing:.02em;font-variant-caps:all-small-caps}
aside.exchange .of,aside.exchange .re{font-style:italic;color:var(--muted)}
aside.exchange .of{flex:none;font-size:.88rem}
aside.exchange .re{margin-top:.15rem}
aside.exchange .steps{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.7rem}
aside.exchange .steps a{display:block;padding:.5rem 0;border-top:1px solid var(--rule);color:var(--fg);text-decoration:none}
aside.exchange .steps a.next{text-align:right}
aside.exchange .steps a:hover .w{color:var(--accent)}
aside.exchange .l,aside.exchange .d{display:block;font-size:.85rem;color:var(--muted)}
aside.exchange .d{font-style:italic}
aside.exchange .w{display:block}
aside.exchange a.all{display:inline-block;padding:.6rem 0;font-style:italic}
@media print{aside.exchange{display:none}}

/* ==== 12. Print: the text only ==== */
@media print{
  body{background:#fff;color:#000}
  nav,details,.bar,.site,.top,.pop,.share,.toast,.shared,a.up,aside.cta{display:none}
  a.bib,a.xref{text-decoration:none}
  span.rw{background:none}
}