/* jirinadvornik.com — reference-page design: white paper, Source Serif 4, one centred column,
   red section signs, footnotes in the margin beside their paragraph on wide screens. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --paper: #ffffff; --ink: #000000; --ink-soft: #333333; --muted: #666666;
  --rule: #d9d9d9; --rule-strong: #9a9a9a; --ul: #8f8f8f; --accent: #8a2d2a; --field: #ffffff;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --size: 18px; --lh: 1.55; --measure: 36em; --margin: 12em;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--size); line-height: var(--lh);
       font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (max-width: 480px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .16em; text-decoration-color: var(--ul); }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #f3dcd9; }

/* ---- column ---- */
.site-nav, .page, .site-footer { max-width: var(--measure); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1000px) { .site-nav, .page, .site-footer { margin-left: calc(50% - (var(--measure) + var(--margin)) / 2); } }
.site-nav { display: flex; flex-wrap: wrap; gap: .3em 1.2em; align-items: baseline; border-bottom: 1px solid var(--ink); padding-top: 1.4em; padding-bottom: .4em; }
.site-nav a { font-size: .9em; }
.site-nav .brand { font-weight: 600; text-decoration: none; margin-right: auto; }
.site-nav a:not(.brand) { text-decoration: none; }
.site-nav a:not(.brand):hover { text-decoration: underline; }
.page { padding-block: 2.2em 3em; }
.site-footer { padding-block: 1.2em 3em; border-top: 1px solid var(--rule); color: var(--muted); text-align: center; }
.site-footer .footer-text { font-size: .82em; }
.site-footer a { color: var(--muted); }

/* ---- document ---- */
.doc { position: relative; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; line-height: 1.2; }
h1 { text-align: center; font-size: 1.7em; font-weight: 600; }
.meta { text-align: center; font-size: .78em; color: var(--muted); margin: .7em 0 1.8em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; justify-content: center; gap: .2em .9em; }
.meta b { font-weight: 400; color: var(--ink-soft); }
.meta a { color: inherit; }
.crumb { font-size: .82em; color: var(--muted); margin: 0 0 .6em; text-align: center; }
.intro { color: var(--ink-soft); font-style: italic; }
h2 { font-size: 1.15em; font-weight: 600; margin: 1.9em 0 .55em; clear: both; }
h2 .mark { color: var(--accent); font-weight: 400; margin-right: .45em; }
h2 a { text-decoration: none; } h2 a:hover { text-decoration: underline; }
h3 { font-size: 1.05em; font-weight: 400; font-style: italic; margin: 1.5em 0 .4em; }
h4 { font-size: 1em; font-weight: 600; margin: 1.3em 0 .3em; }
p { margin: 0 0 1em; hyphens: auto; -webkit-hyphens: auto; }
.lead > p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .85; padding: .08em .08em 0 0; font-weight: 600; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .3em; }
li > p { margin-bottom: .4em; }
blockquote { margin: 1.2em 0 1.2em 1.2em; padding-left: 1em; border-left: 1px solid var(--rule-strong); color: var(--ink-soft); font-style: italic; }
blockquote em { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
code { font-family: var(--mono); font-size: .86em; background: #f4f4f2; padding: .08em .3em; border-radius: 2px; }
pre { background: #f4f4f2; padding: .8em 1em; overflow-x: auto; font-size: .86em; line-height: 1.45; margin: 0 0 1.2em; }
pre code { background: none; padding: 0; font-size: 1em; }
table { border-collapse: collapse; margin: 0 0 1.2em; font-size: .94em; max-width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .35em .7em .35em 0; border-top: 1px solid var(--rule); }
th { font-weight: 600; }
tr:last-child th, tr:last-child td { border-bottom: 1px solid var(--rule); }
.table-wrap { overflow-x: auto; }
sup { font-size: .68em; line-height: 0; vertical-align: .55em; }
sup.fn a { color: var(--accent); text-decoration: none; padding: 0 .08em; }
sup.fn a:hover { text-decoration: underline; }
abbr { text-decoration: none; }
.sc { font-variant-caps: small-caps; letter-spacing: .04em; }
figure { margin: 1.4em 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { font-size: .82em; color: var(--muted); text-align: center; margin-top: .45em; }
.body img:not(figure img) { display: block; margin: 1em auto; }
.video { aspect-ratio: 16 / 9; margin: 1.4em 0; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.more { font-size: .9em; color: var(--muted); }
.more a { color: var(--ink-soft); }

/* ---- footnotes in the margin ---- */
.body p, .body li { position: relative; }
.margin-note { display: block; font-size: .8em; line-height: 1.45; color: var(--ink-soft); margin: .5em 0 1em 1.4em; padding-left: .8em; border-left: 2px solid var(--rule); hyphens: manual; }
.margin-note .num { color: var(--accent); font-weight: 600; margin-right: .35em; }
@media (min-width: 1000px) {
  .margin-note { position: absolute; left: calc(100% + 2em); top: .15em; width: calc(var(--margin) - 1em); margin: 0; padding: 0; border: 0; }
}
.footnotes { margin-top: 2em; padding-top: .8em; border-top: 1px solid var(--rule); font-size: .85em; color: var(--ink-soft); }
.footnotes ol { padding-left: 1.4em; }
.footnotes .num { color: var(--accent); font-weight: 600; margin-right: .35em; }

/* ---- contents box ---- */
.toc { float: left; width: 12em; max-width: 46%; margin: .2em 1.6em 1em 0; padding: .6em .9em .5em; border: 1px solid var(--rule-strong); font-size: .82em; background: var(--paper); }
.toc-title { font-weight: 600; margin-bottom: .3em; }
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { margin: 0 0 .15em; }
.toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; }
@media (max-width: 520px) { .toc { float: none; width: auto; max-width: none; margin: 0 0 1.4em; } }

/* ---- front page ---- */
.portrait { float: left; width: 8.5em; margin: .25em 1.4em .6em 0; }
.portrait img { display: block; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--rule-strong); }
.portrait figcaption { font-size: .72em; margin-top: .35em; }
@media (max-width: 520px) { .portrait { width: 7em; } }
table.links { width: 100%; margin: 1.4em 0 0; clear: both; }
table.links th { width: 6.5em; padding-right: .8em; }
table.links a { margin-right: .8em; white-space: nowrap; }

/* ---- lists of notes ---- */
.notes-list { list-style: none; padding: 0; margin: 0 0 1em; }
.notes-list li { display: grid; grid-template-columns: 6.4em 1fr; gap: 1em; margin: 0 0 .4em; align-items: baseline; }
.notes-list time { color: var(--muted); font-size: .88em; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .notes-list li { grid-template-columns: 1fr; gap: 0; margin-bottom: .7em; } }

/* ---- note page ---- */
.prevnext { display: flex; justify-content: space-between; gap: 1.5em; margin: 2.6em 0 0; padding-top: .9em; border-top: 1px solid var(--rule); font-size: .9em; }
.prevnext a { text-decoration: none; color: var(--ink-soft); max-width: 48%; }
.prevnext a:hover { text-decoration: underline; }
.prevnext .newer::before { content: "← "; color: var(--muted); }
.prevnext .older { margin-left: auto; text-align: right; }
.prevnext .older::after { content: " →"; color: var(--muted); }

/* ---- comments ---- */
.comments { margin-top: 2.4em; }
.comment { margin: 0 0 1.3em; }
.comment-body { white-space: pre-line; }
.comment-who { font-size: .82em; color: var(--muted); margin-top: .15em; }
.no-comments { color: var(--muted); font-size: .92em; }
.comment-form { display: grid; gap: .7em; max-width: 30em; margin-top: 1.2em; }
.comment-form label, .subscribe-form label { display: grid; gap: .25em; font-size: .84em; color: var(--muted); }
.comment-form input, .comment-form textarea, .subscribe-form input { font: inherit; font-size: .95em; color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: 2px; padding: .4em .55em; width: 100%; box-sizing: border-box; min-width: 0; }
.comment-form textarea { resize: vertical; }
.comment-form button, .subscribe-form button { font: inherit; font-size: .9em; color: var(--paper); background: var(--ink); border: 0; border-radius: 2px; padding: .45em 1em; justify-self: start; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-left: 3px solid var(--accent); padding: .5em .9em; margin: 0 0 1.2em; background: #faf5f4; font-size: .92em; }

/* ---- subscribe ---- */
.subscribe { margin-top: 2.4em; padding: 1em 1.1em; border: 1px solid var(--rule); }
.subscribe p { margin-bottom: .6em; }
.subscribe-form { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.subscribe-form input { flex: 1 1 12em; width: auto; }
.subscribe-alt { font-size: .85em; color: var(--muted); }

/* ---- curiosities ---- */
.item { margin-top: 1em; }
.item + .item { border-top: 1px solid var(--rule); padding-top: .4em; }
.item .meta { text-align: left; justify-content: flex-start; margin: .2em 0 1em; }

@media print { .site-nav, .site-footer, .subscribe, .comment-form, .prevnext { display: none; } .margin-note { position: static; } }