/* Generated by internal/themes: faces, base.css, then almanac.css. */
@font-face { font-display: swap; font-family: "Timeless Serif"; font-style: normal; font-weight: 100 900; src: url("/theme/fonts/timeless/1.094/TimelessSerifVF.8d63fb19982087ff.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Timeless Serif"; font-style: italic; font-weight: 100 900; src: url("/theme/fonts/timeless/1.094/TimelessSerifItalicVF.82fff1584c338894.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Timeless Sans"; font-style: normal; font-weight: 100 900; src: url("/theme/fonts/timeless/1.094/TimelessSansVF.353b3fbb75b8e9b9.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; src: url("/theme/fonts/dm-sans/4.004/DMSans-VF.aa530716b0d35186.woff2") format("woff2"); }

/* base.css */
/* base.css: what every theme shares. Structure and sensible defaults,
   all of it driven by the custom properties below, so a theme is mostly
   a new set of values plus whatever it does differently. Properties are
   alphabetised within a rule. */

:root {
  --accent: #2353b8;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-ui: var(--font-body);
  --gap: clamp(1rem, 3vw, 2rem);
  --ink: #17212b;
  --leading: 1.6;
  --measure: 38rem;
  --muted: #55606c;
  --paper: #ffffff;
  --rule: #e6ebf0;
  --size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --wide: 60rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--leading);
  margin: 0;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img { block-size: auto; display: block; max-inline-size: 100%; }

/* The site's chrome. */

header[data-site], main, footer[data-site] {
  margin-inline: auto;
  max-inline-size: var(--wide);
  padding-inline: var(--gap);
}

header[data-site] {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-block: calc(var(--gap) * 1.25) var(--gap);
}

a[data-site-title] {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 0.45em;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
}

img[data-site-mark] { block-size: 1.1em; border-radius: 22%; flex: none; inline-size: 1.1em; }

p[data-site-tagline] { color: var(--muted); font-family: var(--font-ui); font-size: 0.9rem; margin: 0; }

nav[data-site-nav] { flex-basis: 100%; font-family: var(--font-ui); font-size: 0.95rem; }
nav[data-site-nav] ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
nav[data-site-nav] a { color: var(--muted); text-decoration: none; }
nav[data-site-nav] a:hover, nav[data-site-nav] a[aria-current] { color: var(--ink); text-decoration: underline; }

main { padding-block: var(--gap) calc(var(--gap) * 3); }

footer[data-site] {
  border-block-start: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding-block: var(--gap) calc(var(--gap) * 2);
}
footer[data-site] a { color: inherit; }

p[data-notice] {
  background: color-mix(in oklch, var(--accent) 10%, var(--paper));
  border-inline-start: 3px solid var(--accent);
  font-family: var(--font-ui);
  margin-block: 0 var(--gap);
  padding: 0.75rem 1rem;
}

p[data-preview-bar] {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin: 0;
  padding: 0.5rem var(--gap);
  text-align: center;
}

/* Lists of posts. */

ol[data-entries] { display: grid; gap: calc(var(--gap) * 1.5); list-style: none; margin: 0; padding: 0; }
ol[data-entries] h2[data-entry-title] { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.35rem; }
ol[data-entries] h2[data-entry-title] a { color: var(--ink); text-decoration: none; }
ol[data-entries] h2[data-entry-title] a:hover { text-decoration: underline; }
p[data-entry-excerpt] { margin: 0.5rem 0 0; max-inline-size: var(--measure); }

p[data-entry-meta] { color: var(--muted); font-family: var(--font-ui); font-size: 0.875rem; margin: 0; }
p[data-entry-meta] a { color: inherit; }

section[data-archive] { margin-block-end: calc(var(--gap) * 1.5); }
section[data-archive] h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0; }
p[data-archive-kind] { color: var(--muted); font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.08em; margin: 0 0 0.25rem; text-transform: uppercase; }

nav[data-pager] {
  align-items: baseline;
  display: flex;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  gap: 1.5rem;
  justify-content: space-between;
  margin-block-start: calc(var(--gap) * 2);
}
nav[data-pager] span { color: var(--muted); }

section[data-empty], section[data-notfound] { max-inline-size: var(--measure); }

/* One post or page. */

article[data-entry] > header { margin-block-end: var(--gap); max-inline-size: var(--measure); }
h1[data-entry-title] {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  line-height: 1.08;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

figure[data-featured] { margin: 0 0 var(--gap); }
figure[data-featured] img { inline-size: 100%; }

div[data-prose] { max-inline-size: var(--measure); }
div[data-prose] > * { margin-block: 0 1em; }
div[data-prose] h2, div[data-prose] h3 { font-family: var(--font-heading); line-height: 1.2; margin-block: 1.75em 0.5em; text-wrap: balance; }
div[data-prose] h2 { font-size: 1.55em; }
div[data-prose] h3 { font-size: 1.2em; }
div[data-prose] ul, div[data-prose] ol { padding-inline-start: 1.4em; }
div[data-prose] li + li { margin-block-start: 0.35em; }
div[data-prose] figure { margin-inline: 0; }
div[data-prose] img[data-zoomable] { cursor: zoom-in; }
div[data-prose] img[data-zoomable]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
div[data-prose] figcaption { color: var(--muted); font-family: var(--font-ui); font-size: 0.85rem; margin-block-start: 0.5rem; }
div[data-prose] hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: 2.5em; }
div[data-prose] blockquote { border-inline-start: 3px solid var(--accent); margin-inline: 0; padding-inline-start: 1.1em; }
div[data-prose] blockquote p { margin-block: 0 0.6em; }
div[data-prose] blockquote p:last-child { margin-block-end: 0; }
div[data-prose] table { border-collapse: collapse; font-size: 0.92em; font-variant-numeric: tabular-nums; inline-size: 100%; }
div[data-prose] caption { caption-side: bottom; color: var(--muted); font-family: var(--font-ui); font-size: 0.85rem; margin-block-start: 0.5rem; text-align: start; }
div[data-prose] th, div[data-prose] td { border-block-end: 1px solid var(--rule); overflow-wrap: anywhere; padding: 0.45em 0.75em 0.45em 0; text-align: start; vertical-align: top; }
div[data-prose] th { border-block-end-color: var(--ink); font-family: var(--font-ui); font-weight: 600; }

ul[data-tags] { display: flex; flex-wrap: wrap; font-family: var(--font-ui); font-size: 0.85rem; gap: 0.5rem; list-style: none; margin: var(--gap) 0 0; max-inline-size: var(--measure); padding: 0; }
ul[data-tags] a { border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); display: inline-block; padding: 0.15rem 0.7rem; text-decoration: none; }
ul[data-tags] a:hover { border-color: var(--accent); color: var(--accent); }

/* Comments. */

section[data-comments] {
  border-block-start: 1px solid var(--rule);
  margin-block-start: calc(var(--gap) * 2);
  max-inline-size: var(--measure);
  padding-block-start: var(--gap);
}
section[data-comments] h2 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 var(--gap); }
section[data-comments] ol { display: grid; gap: var(--gap); list-style: none; margin: 0 0 calc(var(--gap) * 1.5); padding: 0; }
section[data-comments] li p { margin: 0 0 0.5em; }
p[data-comment-meta] { color: var(--muted); font-family: var(--font-ui); font-size: 0.875rem; }
p[data-comment-meta] b { color: var(--ink); }
li[data-staff] p[data-comment-meta] b::after { color: var(--accent); content: " · author"; font-weight: 400; }

form[data-comment-form] { font-family: var(--font-ui); }
form[data-comment-form] h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 0.75rem; }
form[data-comment-form] label { display: block; font-size: 0.9rem; font-weight: 600; margin-block-end: 0.25rem; }
form[data-comment-form] label span { color: var(--muted); font-weight: 400; }
form[data-comment-form] input, form[data-comment-form] textarea {
  background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--ink) 25%, var(--paper));
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  inline-size: 100%;
  padding: 0.55rem 0.7rem;
}
form[data-comment-form] [aria-invalid] { border-color: #b3261e; }
form[data-comment-form] [data-error] { color: #b3261e; display: block; font-size: 0.85rem; margin-block-start: 0.25rem; }
form[data-comment-form] button {
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
}
form[data-comment-form] button:disabled { cursor: progress; opacity: 0.6; }
form[data-comment-form] [data-pow-status], p[data-comment-note] { color: var(--muted); font-size: 0.85rem; }

/* The lightbox (assets/lightbox.js): a body image shown full screen. */
dialog[data-lightbox] { background: rgb(0 0 0 / 0.92); block-size: 100dvh; border: 0; cursor: zoom-out; inline-size: 100vw; inset: 0; margin: 0; max-block-size: none; max-inline-size: none; padding: 0; }
dialog[data-lightbox]::backdrop { background: rgb(0 0 0 / 0.92); }
dialog[data-lightbox][open] { align-items: center; display: flex; justify-content: center; }
dialog[data-lightbox] img { block-size: auto; inline-size: auto; max-block-size: calc(100dvh - 2rem); max-inline-size: calc(100vw - 2rem); object-fit: contain; }
dialog[data-lightbox] button { background: rgb(0 0 0 / 0.5); border: 1px solid rgb(255 255 255 / 0.4); border-radius: 999px; color: #fff; cursor: pointer; font: 1.6rem/1 system-ui, sans-serif; block-size: 2.5rem; inline-size: 2.5rem; inset-block-start: 1rem; inset-inline-end: 1rem; position: absolute; }
dialog[data-lightbox] button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-lightbox-open] { overflow: hidden; }

/* almanac.css */
/* Almanac: a reading theme. Timeless Serif for the words, Timeless Sans
   for the furniture, on warm paper with one deep red. Without the fetched
   fonts it falls back to Georgia and DM Sans. */

:root {
  --accent: #9b2c1f;
  --font-body: "Timeless Serif", Georgia, serif;
  --font-heading: "Timeless Serif", Georgia, serif;
  --font-ui: "Timeless Sans", "DM Sans", system-ui, sans-serif;
  --ink: #1f1b16;
  --leading: 1.65;
  --measure: 36rem;
  --muted: #6b6153;
  --paper: #f7f2e8;
  --rule: #e2d8c6;
  --size: clamp(1.125rem, 0.45vw + 1.02rem, 1.3125rem);
  --wide: 52rem;
}

header[data-site] {
  border-block-end: 1px solid var(--rule);
  flex-direction: column;
  align-items: flex-start;
  margin-block-end: var(--gap);
}
a[data-site-title] { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.01em; }
p[data-site-tagline] { font-family: var(--font-body); font-size: 1rem; font-style: italic; }
nav[data-site-nav] a { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

h1[data-entry-title], section[data-archive] h1 { font-weight: 500; letter-spacing: -0.015em; }
ol[data-entries] h2[data-entry-title] { font-size: 1.85rem; font-weight: 500; letter-spacing: -0.01em; }
ol[data-entries] > li + li { border-block-start: 1px solid var(--rule); padding-block-start: calc(var(--gap) * 1.5); }
p[data-entry-meta] { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }

div[data-prose] > p:first-child::first-letter {
  color: var(--accent);
  float: inline-start;
  font-size: 3.4em;
  font-weight: 500;
  line-height: 0.85;
  margin: 0.06em 0.08em 0 0;
}
div[data-prose] h2, div[data-prose] h3 { font-weight: 600; }
div[data-prose] hr { border: 0; color: var(--accent); text-align: center; }
div[data-prose] hr::after { content: "❧"; font-size: 1.2em; }

article[data-entry][data-kind="post"] > header, section[data-comments], div[data-prose], ul[data-tags] { margin-inline: auto; }
article[data-entry] > header { text-align: center; }
figure[data-featured] { margin-inline: calc(var(--gap) * -1); }
