/* Scriptorium for williamliaw.com: normal mode (Fancy off), light.
   Source of truth: the Scriptorium download (assets/downloads/Scriptorium.zip): the manuscript snippet with Fancy
   mode off, on the Typewriter theme in light mode, 22 px text. Colours and proportions were checked against a
   light-mode screenshot of the sample note. Loaded after Tale's main.css (_includes/head.html), so it only
   overrides. Light only, by request. */

/* The exact fonts the Scriptorium installer installs (google/fonts @5bb2873), Latin subset, every OpenType
   feature kept. Google's hosted EB Garamond drops small caps (smcp) and old-style figures (onum), which made the
   browser fake the small caps. Licences: fonts/OFL-*.txt. */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Scriptorium.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic-Scriptorium.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Scriptorium.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f2e7;        /* manuscript: warm paper */
  --ink: #2a2420;          /* manuscript: soft ink */
  --muted: #595959;        /* Typewriter --text-muted: subtitle, fleuron */
  --faint: #9e9e9e;        /* Typewriter --text-faint: rule under the title */
  --border: #e6e6e6;       /* Typewriter --background-modifier-border */
  --accent: #8b2323;       /* manuscript: oxblood drop caps */
  --link: #7d2219;         /* links: rubric ink, a shade off the drop caps */
  --link-hover: #5e1610;
  --quote-bar: #e5e5e5;    /* manuscript: quotation bar */
  --quote-ink: #979797;    /* manuscript: quotation text */
  --code-bg: #fcf5e4;      /* Typewriter --background-primary-alt */
  --code-ink: #6c99bb;     /* Typewriter --code-normal */
  --text: "EB Garamond", "Literata", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", Menlo, Monaco, monospace;
  color-scheme: light;
}

/* ---------- Type, paper and measure: 22 px text, 1.45 leading, 36 em column ---------- */
html { font-family: var(--text); font-size: 18px; }
@media (min-width: 600px) { html { font-size: 20px; } }
@media (min-width: 1000px) { html { font-size: 22px; } }
html, body { background: var(--paper); color: var(--ink); }
* { line-height: 1.45; }
body {
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
}
main, footer, .nav-container { max-width: 36rem; }
::selection { background: rgba(204, 230, 255, 0.99); }
strong, b { font-weight: 620; }

/* Links: rubric ink with a hand-drawn pen underline (an uneven stroke), darker on hover, as if inked twice */
.post a {
  color: var(--link);
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0 3.3 C9 2.6 17 3.9 28 3.4 S44 2.5 55 3.1 S72 4.0 84 3.3 S101 2.6 111 3.5 S117 3.4 120 3.3' fill='none' stroke='%238b2323' stroke-opacity='0.5' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 6px;
  background-position: 0 100%;
  padding-bottom: 0.06em;
}
.post a:hover, .post a:focus-visible {
  color: var(--link-hover);
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0 3.3 C9 2.6 17 3.9 28 3.4 S44 2.5 55 3.1 S72 4.0 84 3.3 S101 2.6 111 3.5 S117 3.4 120 3.3' fill='none' stroke='%238b2323' stroke-opacity='1' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
.nav { box-shadow: none; border-bottom: 1px solid var(--border); }
.nav-title {
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.4rem;
}
.nav li { color: var(--ink); }
.nav a { color: var(--ink); font-family: var(--text); }
.nav li a { font-variant-caps: small-caps; letter-spacing: 0.06em; }
.nav li { padding-right: 1.4rem; }
.nav li:last-child { padding-right: 0; }

/* Phones: a fuller page width than Tale's 80% column, and the menu on one line */
@media (max-width: 599px) {
  main, footer, .nav-container { width: auto; margin-left: 20px; margin-right: 20px; }
  .nav li { padding-right: 0.7rem; }
  .nav li a { font-size: 0.95rem; letter-spacing: 0.04em; }
}

/* ---------- Headings: EB Garamond 550, centred small caps ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--text); font-weight: 550; line-height: 1.25; }
.post h1:not(.post-title), .post h2, .post h3, .post h4, .post h5 {
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 1.95em 0 0.9em;
}
.post h1:not(.post-title), .post h2 { margin: 1.1em 0 1.2em; }
.post h1:not(.post-title) { font-size: 1.65rem; }
.post h2 { font-size: 1.45rem; }
.post h3 { font-size: 1.25rem; }
.post h4 { font-size: 1.1rem; }
.post h5 { font-size: 1rem; }
.post h6 { font-style: italic; font-weight: 400; color: var(--muted); text-align: center; font-size: 1.2rem; }

/* Page title: the note-title look (bold, upright, centred), then the italic subtitle and a short rule */
.post-title, .tags-header-title {
  color: var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 1.2em 0 0.15em;
  text-align: center;
}
@media (max-width: 599px) { .post-title, .tags-header-title { font-size: 1.5rem; } }
.post-line, .tags-header-line, .notfound-line {
  border-top: 2px solid var(--faint);
  width: 3rem;
  margin: 1.1em auto 2.9em;
}
/* The byline is the subtitle (it sits under the title, see _layouts/post.html) */
.post-info {
  color: var(--muted);
  font-family: var(--text);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.post-info span { font-style: italic; }
.post-info br { display: none; }

/* ---------- Book paragraphs: no gaps, every paragraph after the first indented ---------- */
.post p {
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.post p + p { text-indent: 1.5em; }
.post p[style*="center"],
.post p:has(> img),
.post p:has(> a > img),
.post blockquote p,
.post li p { text-indent: 0; }
.post ul, .post ol, .post figure, .post pre, .post .highlight, .post img { margin-block: 1em; }
.post li + li { margin-top: 0.2em; }

/* ---------- Chapter openings: oxblood drop cap, small-capped first line, not justified ---------- */
.post .post-line + p::first-letter,
.post .post-line + blockquote + p::first-letter,
.post :is(h1, h2):not(.post-title) + p::first-letter,
.post :is(h1, h2):not(.post-title) + blockquote + p::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.4em;
  line-height: 0.85;
  padding: 0.06em 0.08em 0 0;
  color: var(--accent);
}
.post .post-line + p::first-line,
.post .post-line + blockquote + p::first-line,
.post :is(h1, h2):not(.post-title) + p::first-line,
.post :is(h1, h2):not(.post-title) + blockquote + p::first-line,
.post hr + p::first-line,
.post p[style*="center"] + p::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}
.post .post-line + p,
.post .post-line + blockquote + p,
.post :is(h1, h2):not(.post-title) + p,
.post :is(h1, h2):not(.post-title) + blockquote + p,
.post hr + p,
.post p[style*="center"] + p { text-align: left; text-indent: 0; }

/* ---------- Scene breaks: --- becomes a fleuron; the posts' centred ⁂ lines match it ---------- */
.post hr { border: none; height: auto; margin: 1.6em 0; overflow: visible; text-align: center; }
.post hr::after { content: "❦"; font-family: var(--display); font-size: 1.4em; color: var(--muted); }
.post p[style*="center"] { margin: 1.6em 0; color: var(--muted); }

/* ---------- Quotations: bordered, grey, upright (only emphasis is italic) ---------- */
blockquote {
  border-left: 0.25rem solid var(--quote-bar);
  color: var(--quote-ink);
  font-style: normal;
  margin: 0.8rem 0;
}
@media (min-width: 600px) { blockquote { padding: 0 5rem 0 1.25rem; } }
.post blockquote p { margin: 0 0 1rem; text-align: justify; }
.post blockquote p:last-child { margin-bottom: 0; }
.post blockquote :is(em, i) { font-style: italic; }

/* ---------- Figures, code, tables ---------- */
.post figcaption, .post img + em { color: var(--muted); font-family: var(--text); font-style: italic; font-size: 0.9rem; text-align: center; }
pre, code { font-family: var(--mono); }
code { background-color: var(--code-bg); color: var(--code-ink); font-size: 0.85em; }
.highlight { background-color: var(--code-bg); }
.post table { width: 100%; border-collapse: collapse; margin-block: 1em; }
.post th { padding: calc(1em / 3) calc(2em / 3); border-bottom: 1px solid var(--border); }
.post td { padding: calc(1em / 6) calc(2em / 3); border-bottom: 1px solid var(--border); }

/* ---------- Post list (home page): each entry as a note title ---------- */
.catalogue-item { color: var(--ink); border-bottom-color: var(--border); }
.catalogue-time, .catalogue-pinned { color: var(--muted); font-family: var(--text); font-style: italic; letter-spacing: 0.01em; }
.catalogue-title { color: var(--ink); font-family: var(--text); font-weight: 600; font-size: 1.65rem; line-height: 1.2; }
.catalogue-line { border-top: 2px solid var(--faint); }
.catalogue-item p { text-align: left; }

/* ---------- Tags page ---------- */
.tags-clouds { font-family: var(--text); }
.tags-clouds a { background: var(--code-bg); color: var(--ink); font-variant-caps: small-caps; letter-spacing: 0.05em; }
.tags-clouds a:hover, .tags-clouds a:active { background: var(--border); }
.tags-item-icon { color: var(--muted); }
.tags-item-label { color: var(--ink); font-family: var(--text); font-variant-caps: small-caps; letter-spacing: 0.08em; }
.tags-post { gap: 1em; }
.tags-post > div { min-width: 0; }
.tags-post-title { color: var(--ink); display: block; }
.tags-post-line { border-top-color: var(--faint); }
.tags-post-meta { color: var(--muted); font-style: italic; }
.tags-post:hover .tags-post-meta, .tags-post:active .tags-post-meta { color: var(--ink); }

/* ---------- Pagination, 404, footer ---------- */
.pagination { border-top: 1px solid var(--border); font-family: var(--text); }
.pagination span { color: var(--ink); }
.pagination .top, .pagination .arrow { color: var(--ink); font-family: var(--text); font-variant-caps: small-caps; letter-spacing: 0.06em; }
.notfound-error { font-family: var(--text); font-weight: 600; }
footer { font-family: var(--text); }
footer span { color: var(--muted); font-size: 0.8rem; font-style: italic; }
footer a { color: var(--muted); text-decoration: underline; }