/* Generated by internal/themes: faces, base.css, then sprinkles.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;
}

nav[data-preview-bar] {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin: 0;
  padding: 0.5rem var(--gap);
}
nav[data-preview-bar] [data-preview-group] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
nav[data-preview-bar] a { border: 1px solid transparent; border-radius: 999px; color: var(--paper); padding: 0.1rem 0.6rem; text-decoration: none; }
nav[data-preview-bar] a:hover { border-color: var(--paper); }
nav[data-preview-bar] a[aria-current] { background: var(--paper); color: var(--ink); }
/* A device frame: the page at a phone's or a tablet's width. */
body[data-preview-framed] { margin: 0; }
[data-preview-device] { display: flex; justify-content: center; padding: 1.5rem var(--gap); }
[data-preview-device] iframe { block-size: calc(100vh - 7rem); border: 1px solid var(--muted); border-radius: 18px; max-inline-size: 100%; }
/* Read as staff, a preview shows where protected sections are. */
body[data-preview-as="staff"] section[data-px-protected] {
  outline: 2px dashed var(--accent);
  outline-offset: 0.5rem;
  margin-block: 1.75rem;
  position: relative;
}
body[data-preview-as="staff"] section[data-px-protected]::before {
  background: var(--accent);
  border-radius: 4px;
  color: #fff;
  content: "Protected: " attr(data-px-protected);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  inset-block-start: -1.6rem;
  padding: 0.05rem 0.45rem;
  position: absolute;
}
body[data-preview-as="staff"] section[data-px-protected][data-px-quiet]::before { content: "Protected: " attr(data-px-protected) " (no notice)"; }

/* 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; }
ul[data-subscribe] { display: flex; flex-wrap: wrap; font-family: var(--font-ui); font-size: 0.85rem; gap: 0.5rem 1rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
ul[data-feeds] { display: grid; gap: calc(var(--gap) * 1.5); list-style: none; margin: 0; padding: 0; }
ul[data-feeds] h2 { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.35rem; }
ul[data-feeds] p { 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; }
div[data-prose] .px-embed iframe { border: 0; display: block; inline-size: 100%; }
div[data-prose] .px-embed-video iframe { aspect-ratio: 16 / 9; block-size: auto; }
div[data-prose] .px-embed video { block-size: auto; display: block; inline-size: 100%; }
div[data-prose] .px-embed audio { display: block; inline-size: 100%; }
div[data-prose] .px-recent { padding-inline-start: 1.4em; }

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; }

/* The account line (layout.html "account"): Log out is a form, drawn as
   a link beside the reader's name. */
[data-account] { font-family: var(--font-ui); font-size: 0.85rem; margin: 0; }
form[data-signout] { display: inline; margin: 0; }
form[data-signout] button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
p[data-comment-gate], p[data-comment-as] { font-family: var(--font-ui); }
footer[data-site] [data-account] { margin-block-start: 0.5rem; }
/* Who is signed in, under the title and tagline. */
p[data-reader] { color: var(--muted); font-family: var(--font-ui); font-size: 0.85rem; margin: 0.25rem 0 0; }
[data-reader-name] { color: var(--ink); font-weight: 600; }

/* A protected section the reader may not see (blocks "locked"). */
aside.px-locked {
  border: 1px dashed var(--muted);
  border-radius: 6px;
  font-family: var(--font-ui);
  margin-block: 1.5rem;
  padding: 0.9rem 1.1rem;
}
aside.px-locked p { margin: 0; }

/* sprinkles.css */
/* Sprinkles: a birthday party. Confetti on lilac, chunky candy cards with
   offset shadows, every tag a different sweet, and one moment: the title
   pops in when the page arrives, unless reduced motion is asked for.
   Whimsy: maximum. */

:root {
  --accent: #e8357f;
  --candy-1: #ff5fa2;
  --candy-2: #ffc93c;
  --candy-3: #3ccfa0;
  --candy-4: #4aa8ff;
  --font-body: "Timeless Sans", "DM Sans", system-ui, sans-serif;
  --font-heading: "Timeless Sans", "DM Sans", system-ui, sans-serif;
  --ink: #2b1b4a;
  --leading: 1.65;
  --measure: 36rem;
  --muted: #5f4f80;
  --paper: #f3e9ff;
  --rule: #2b1b4a;
  --wide: 56rem;
}

body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg opacity='.55'%3E%3Crect x='14' y='20' width='14' height='5' rx='2.5' fill='%23ff5fa2' transform='rotate(25 21 22)'/%3E%3Crect x='120' y='34' width='14' height='5' rx='2.5' fill='%234aa8ff' transform='rotate(-40 127 36)'/%3E%3Ccircle cx='70' cy='90' r='4' fill='%23ffc93c'/%3E%3Crect x='150' y='120' width='14' height='5' rx='2.5' fill='%233ccfa0' transform='rotate(60 157 122)'/%3E%3Ccircle cx='30' cy='150' r='3.5' fill='%234aa8ff'/%3E%3Crect x='90' y='160' width='14' height='5' rx='2.5' fill='%23ffc93c' transform='rotate(-15 97 162)'/%3E%3Ccircle cx='160' cy='70' r='3' fill='%23ff5fa2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 180px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg opacity='.45'%3E%3Crect x='40' y='60' width='12' height='4' rx='2' fill='%233ccfa0' transform='rotate(-55 46 62)'/%3E%3Ccircle cx='200' cy='30' r='3' fill='%23ff5fa2'/%3E%3Crect x='170' y='190' width='12' height='4' rx='2' fill='%23ff5fa2' transform='rotate(10 176 192)'/%3E%3Ccircle cx='100' cy='220' r='4' fill='%234aa8ff'/%3E%3Crect x='230' y='120' width='12' height='4' rx='2' fill='%23ffc93c' transform='rotate(80 236 122)'/%3E%3C/g%3E%3C/svg%3E") 70px 40px / 260px 260px,
    var(--paper);
}

a[data-site-title], h1[data-entry-title], h2[data-entry-title], section[data-archive] h1, div[data-prose] h2 { font-variation-settings: "STYL" 0; }
header[data-site] { justify-content: center; text-align: center; }
a[data-site-title] { display: inline-block; font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 900; letter-spacing: -0.03em; text-shadow: 3px 3px 0 var(--candy-2), 6px 6px 0 var(--candy-1); }
@media (prefers-reduced-motion: no-preference) {
  a[data-site-title] { animation: pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  @keyframes pop {
    from { opacity: 0; scale: 0.6; rotate: -6deg; }
    to { opacity: 1; scale: 1; rotate: 0deg; }
  }
}
p[data-site-tagline] { flex-basis: 100%; font-size: 1rem; }
nav[data-site-nav] ul { justify-content: center; }
nav[data-site-nav] a { background: #fff; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 700; padding: 0.2rem 0.9rem; text-decoration: none; }
nav[data-site-nav] a:hover, nav[data-site-nav] a[aria-current] { background: var(--candy-2); }

ol[data-entries] > li, body:is([data-kind="post"], [data-kind="page"]) article[data-entry], section[data-comments], section[data-archive], section[data-empty], section[data-notfound] {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 1.75rem;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 1.5rem 1.75rem;
}
ol[data-entries] > li:nth-child(4n+1) { box-shadow: 7px 7px 0 var(--candy-1); }
ol[data-entries] > li:nth-child(4n+2) { box-shadow: 7px 7px 0 var(--candy-4); }
ol[data-entries] > li:nth-child(4n+3) { box-shadow: 7px 7px 0 var(--candy-3); }
ol[data-entries] > li:nth-child(4n) { box-shadow: 7px 7px 0 var(--candy-2); }
ol[data-entries] h2[data-entry-title] { font-size: 1.75rem; font-weight: 900; }
h1[data-entry-title] { font-weight: 900; letter-spacing: -0.03em; }
section[data-comments] { margin-block-start: 2.5rem; max-inline-size: calc(var(--measure) + 5rem); }
body:is([data-kind="post"], [data-kind="page"]) article[data-entry] { max-inline-size: calc(var(--measure) + 5rem); }
figure[data-featured] img { border: 3px solid var(--ink); border-radius: 1.25rem; }

a { text-decoration-color: var(--candy-1); text-decoration-thickness: 0.18em; }
div[data-prose] ul { list-style: none; padding-inline-start: 1.5em; }
div[data-prose] ul li { position: relative; }
div[data-prose] ul li::before { background: var(--candy-1); border-radius: 50%; content: ""; block-size: 0.6em; inline-size: 0.6em; inset-block-start: 0.5em; inset-inline-start: -1.1em; position: absolute; }
div[data-prose] ul li:nth-child(4n+2)::before { background: var(--candy-4); }
div[data-prose] ul li:nth-child(4n+3)::before { background: var(--candy-3); }
div[data-prose] ul li:nth-child(4n)::before { background: var(--candy-2); }
div[data-prose] hr { border: 0; block-size: 10px; background: radial-gradient(circle, var(--candy-1) 4px, transparent 4.5px) 0 0 / 30px 10px, radial-gradient(circle, var(--candy-4) 4px, transparent 4.5px) 15px 0 / 30px 10px; background-repeat: repeat-x; }
ul[data-tags] a { border: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
ul[data-tags] li:nth-child(4n+1) a { background: var(--candy-1); }
ul[data-tags] li:nth-child(4n+2) a { background: var(--candy-2); }
ul[data-tags] li:nth-child(4n+3) a { background: var(--candy-3); }
ul[data-tags] li:nth-child(4n) a { background: var(--candy-4); }
form[data-comment-form] button { background: var(--candy-1); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
form[data-comment-form] input, form[data-comment-form] textarea { border: 2px solid var(--ink); border-radius: 0.9rem; }
footer[data-site] { border: 0; text-align: center; }