/* 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; }
/* A site's own logo (Branding) keeps its shape: as tall as the title's
   line, as wide as that makes it. */
picture[data-site-mark-frame] { display: contents; }
img[data-site-mark][data-site-logo] { block-size: 1.6em; border-radius: 0; inline-size: auto; }
ul[data-social] { display: flex; flex-wrap: wrap; gap: 0.4em 1em; list-style: none; margin: 0.5em 0 0; padding: 0; }

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-test-mode] {
  border: 2px dashed var(--accent);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-block: 0 var(--gap);
  padding: 0.5rem 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); }
/* The admin bar, for staff (public/adminbar.go): Patrix's own colours,
   not the theme's, so it reads the same over every theme. */
nav[data-admin-bar] {
  align-items: center;
  background: #1d2327;
  color: #f0f0f1;
  display: flex;
  flex-wrap: wrap;
  font: 500 0.8125rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  gap: 0.25rem 0.75rem;
  letter-spacing: normal;
  margin: 0;
  padding: 0.35rem var(--gap);
  position: relative;
  text-transform: none;
  z-index: 1000;
}
nav[data-admin-bar] a {
  border-radius: 4px;
  color: inherit;
  padding: 0.2rem 0.5rem;
  text-decoration: none;
}
nav[data-admin-bar] a:hover { background: #2c3338; color: #72aee6; }
nav[data-admin-bar] :focus-visible { outline: 2px solid #72aee6; outline-offset: 1px; }
nav[data-admin-bar] [data-admin-site] { align-items: center; display: inline-flex; font-weight: 600; gap: 0.4rem; }
nav[data-admin-bar] [data-admin-site] img { block-size: 20px; border-radius: 3px; inline-size: 20px; object-fit: contain; }
nav[data-admin-bar] [data-admin-count] {
  background: #d63638;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1rem;
  margin-inline-start: 0.2rem;
  min-inline-size: 1.1rem;
  padding: 0 0.35rem;
  text-align: center;
}
nav[data-admin-bar] [data-admin-devices] { display: inline-flex; gap: 0.15rem; margin-inline-start: auto; }
nav[data-admin-bar] [data-admin-devices] a { border: 1px solid transparent; border-radius: 999px; }
nav[data-admin-bar] [data-admin-devices] a[aria-current] { background: #f0f0f1; color: #1d2327; }
nav[data-admin-bar] [data-admin-me] { color: #c3c4c7; }
/* On a phone the bar is the ways into admin: the page is already at a
   phone's width. */
@media (max-width: 40rem) {
  nav[data-admin-bar] [data-admin-devices], nav[data-admin-bar] [data-admin-me] { display: none; }
}
/* 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)"; }
/* Read as staff, a page drawn from a template's layout wraps what each
   slot drew with a link to that field in admin's Editor view
   (templating.PreviewBody), shown on hover or focus; preview.js makes a
   click anywhere in the slot follow it. */
[data-px-field] { border-radius: 4px; outline: 1px dashed transparent; outline-offset: 0.35rem; position: relative; }
[data-px-field]:hover, [data-px-field]:focus-within { outline-color: var(--accent); }
body[data-px-click-edit] [data-px-field] { cursor: pointer; }
[data-px-field-edit] {
  background: var(--accent);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  inset-block-start: -1.1rem;
  inset-inline-end: 0;
  opacity: 0;
  padding: 0.05rem 0.45rem;
  position: absolute;
  text-decoration: none;
  z-index: 1;
}
[data-px-field]:hover > [data-px-field-edit], [data-px-field-edit]:focus { opacity: 1; }

/* 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], section[data-account-page] { max-inline-size: var(--measure); }

/* /signin: Patrix's sign-in card (rastrillo's signin partial) in the
   theme's own type, colours and buttons. The site header above it
   already carries the logo and name, so the card's own brand side goes. */
section[data-signin-page] { font-family: var(--font-ui); margin-block: calc(var(--gap) * 1.5) calc(var(--gap) * 2); margin-inline: auto; max-inline-size: 26rem; }
section[rst-signin] { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: clamp(1.25rem, 5vw, 2.25rem); }
section[rst-signin] [rst-signin-brand] { display: none; }
[rst-signin-door] { display: grid; gap: 1rem; }
[rst-signin-door] > * { margin: 0; }
[rst-signin-door] h1 { font-family: var(--font-heading); font-size: clamp(1.35rem, 2.5vw, 1.62rem); line-height: 1.25; }
[rst-signin-door] p { color: var(--ink); line-height: var(--leading); }
[rst-signin-door] bdi { font-weight: 600; }
form[rst-signin-form] { display: grid; gap: 0.9rem; margin: 0; }
[rst-field] { display: grid; gap: 0.35rem; }
[rst-field-label] { font-size: 0.9rem; font-weight: 600; }
[rst-field-hint], [rst-field-help] { color: var(--muted); font-size: 0.85rem; }
[rst-field-error] { color: #b3261e; font-size: 0.85rem; }
input[rst-input] {
  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.6rem 0.75rem;
}
input[rst-input]:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in oklch, var(--accent) 35%, transparent); outline-offset: 1px; }
input[rst-input][aria-invalid="true"] { border-color: #b3261e; }
[rst-signin] [rst-btn] {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 600;
  inline-size: 100%;
  justify-content: center;
  padding: 0.65rem 1.2rem;
  text-decoration: none;
}
[rst-signin] [rst-btn~="primary"] { background: var(--accent); color: #fff; }
[rst-signin] [rst-btn~="primary"]:hover { filter: brightness(0.9); }
[rst-signin] [rst-btn~="ghost"] { color: var(--muted); font-size: 0.9rem; font-weight: 500; padding-block: 0.35rem; }
[rst-signin] [rst-btn~="ghost"]:hover { color: var(--ink); text-decoration: underline; }
[rst-signin] [rst-btn]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[rst-signin] [rst-btn]:disabled { cursor: progress; opacity: 0.6; }
[rst-signin] [rst-btn][hidden] { display: none; }
[rst-signin] [data-pow-status], p[rst-signin-remembered], p[rst-signin-passkey-msg] { color: var(--muted); font-size: 0.85rem; }
p[rst-signin-passkey-msg]:empty { display: none; }
p[rst-signin-or] { color: var(--muted); font-size: 0.85rem; text-align: center; }
[rst-signin-passkey]:has(> [rst-btn][hidden]) + p[rst-signin-or], p[rst-signin-or]:has(+ [rst-signin-passkey] > [rst-btn][hidden]) { display: none; }
section[data-signin-page] [rst-callout] { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); border-radius: 6px; display: flex; gap: 0.6rem; margin-block-end: 1rem; padding: 0.75rem 0.9rem; }
section[data-signin-page] [rst-callout][rst-tone="warning"] { border-inline-start-color: #b26b00; }
section[data-signin-page] [rst-callout][rst-tone="negative"] { border-inline-start-color: #b3261e; }
section[data-signin-page] [rst-callout][rst-tone="positive"] { border-inline-start-color: #2e7d32; }
[rst-callout-ic] svg { block-size: 1.1em; inline-size: 1.1em; }
[rst-callout-body] p { margin: 0; }
[rst-callout-body] strong { display: block; margin-block-end: 0.15rem; }
dl[data-feeds] dt { font-weight: 600; margin-block-start: 1rem; }
dl[data-feeds] dt span { font-weight: 400; opacity: 0.7; }
dl[data-feeds] dd { margin: 0.25rem 0 0; }
input[data-feed-address] { inline-size: 100%; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
p[data-podcast-apps] { font-size: 0.85rem; margin-block: 0.4rem 0; }
.px-podcast { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-start; margin-block: 1.5rem; padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 0.5rem; }
.px-podcast-cover { inline-size: 7.5rem; block-size: 7.5rem; object-fit: cover; border-radius: 0.375rem; flex: none; }
.px-podcast-body { flex: 1 1 16rem; min-inline-size: 0; }
.px-podcast-title { margin-block: 0 0.25rem; }
.px-podcast-author { margin-block: 0 0.5rem; opacity: 0.75; }
.px-podcast-apps, .px-podcast-signin { font-size: 0.9rem; margin-block: 0.5rem 0; }
.px-feeds dd { margin: 0.25rem 0 0.75rem; overflow-wrap: anywhere; font-size: 0.9rem; }
.px-feeds dt { font-weight: 600; }

/* 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; }
/* An image's own width and place (doc: Width, Align): the width is a
   most, never more than the column, and its caption keeps the column's
   width; left and right let the words flow round it on a wide screen
   and stack on a phone. */
div[data-prose] figure[data-px-align="center"] { margin-inline: auto; }
div[data-prose] figure[data-px-align="center"] img { margin-inline: auto; }
@media (min-width: 40rem) {
  div[data-prose] figure[data-px-align="left"] { float: left; margin-block: 0.3rem 1rem; margin-inline: 0 1.5rem; max-inline-size: 50%; }
  div[data-prose] figure[data-px-align="right"] { float: right; margin-block: 0.3rem 1rem; margin-inline: 1.5rem 0; max-inline-size: 50%; }
}
div[data-prose]::after { clear: both; content: ""; display: table; }
div[data-prose] h2, div[data-prose] h3, div[data-prose] hr, div[data-prose] table { clear: both; }
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; }
/* A table is compact: smaller type on tight rows, as wide as its words
   need (never more than the column), and a wide one scrolls sideways
   inside itself on a phone rather than squeezing every word. */
div[data-prose] table { border-collapse: collapse; display: block; font-size: 0.85em; font-variant-numeric: tabular-nums; inline-size: fit-content; line-height: 1.4; margin-block: 1.5em; max-inline-size: 100%; overflow-x: auto; }
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: break-word; padding: 0.3em 0.9em; text-align: start; vertical-align: top; }
div[data-prose] :is(th, td):first-child { padding-inline-start: 0; }
div[data-prose] :is(th, td):last-child { padding-inline-end: 0; }
div[data-prose] th { border-block-end: 1.5px solid var(--ink); font-family: var(--font-ui); font-size: 0.95em; font-weight: 600; white-space: nowrap; }
div[data-prose] tbody tr:last-child :is(th, td) { border-block-end: 0; }
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; }

dl[data-fields] { display: grid; gap: 0.35rem 1.25rem; grid-template-columns: minmax(6rem, max-content) 1fr; margin: var(--gap) 0 0; max-inline-size: var(--measure); }
dl[data-fields] dt { color: var(--muted); font-family: var(--font-ui); font-size: 0.85rem; padding-block-start: 0.2rem; }
dl[data-fields] dd { margin: 0; }
dl[data-fields] dd > :first-child { margin-block-start: 0; }
dl[data-fields] dd > :last-child { margin-block-end: 0; }
@media (max-width: 30rem) { dl[data-fields] { grid-template-columns: 1fr; } dl[data-fields] dd { margin-block-end: 0.5rem; } }
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; }
/* Replies sit under what they answer, a rule to their left; on a phone
   the indent stays small however deep the thread goes. */
section[data-comments] li > ol { border-inline-start: 2px solid var(--rule); margin: var(--gap) 0 0; padding-inline-start: clamp(0.6rem, 3vw, 1.25rem); }
p[data-comment-reply] { font-family: var(--font-ui); font-size: 0.85rem; }
p[data-comment-replying] { color: var(--muted); font-family: var(--font-ui); font-size: 0.9rem; }
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] > article 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; }

/* /subscribe/{plan}: the plan's price, what it includes, and the
   promotion code field, set as the comment form is. */
p[data-plan-price] { font-family: var(--font-ui); font-size: 1.1rem; }
form[data-subscribe-form] { font-family: var(--font-ui); margin-block: var(--gap); }
form[data-subscribe-form] label { display: block; font-size: 0.9rem; font-weight: 600; margin-block-end: 0.25rem; }
form[data-subscribe-form] label span, form[data-subscribe-form] [data-hint] { color: var(--muted); font-weight: 400; }
form[data-subscribe-form] [data-hint] { display: block; font-size: 0.85rem; margin-block-end: 0.35rem; }
form[data-subscribe-form] input {
  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: min(100%, 20rem);
  padding: 0.55rem 0.7rem;
}
form[data-subscribe-form] [aria-invalid] { border-color: #b3261e; }
form[data-subscribe-form] [data-error] { color: #b3261e; display: block; font-size: 0.85rem; margin-block-end: 0.35rem; }
form[data-subscribe-form] button {
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
}

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

/* Search (layout.html "search-form"): on the results page, the 404 and
   a theme's sidebar. The label is for screen readers; the placeholder
   and the button say what it is to everyone else. */
form[data-search] { display: flex; gap: 0.4rem; font-family: var(--font-ui); margin-block: 0.75rem; max-inline-size: 32rem; }
form[data-search] label { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
form[data-search] input { flex: 1; font: inherit; font-size: 0.9rem; min-inline-size: 0; padding: 0.4rem 0.6rem; border: 1px solid var(--muted); border-radius: 4px; background: transparent; color: inherit; }
form[data-search] button { font: inherit; font-size: 0.85rem; padding: 0.4rem 0.8rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
aside[data-sidebar] form[data-search] { margin-block: 1rem; }

/* Around a post (layout.html "post-nav", "share", "related"). */
nav[data-post-nav] { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; font-family: var(--font-ui); margin-block: calc(var(--gap) * 1.5); max-inline-size: var(--measure); }
nav[data-post-nav] a { display: grid; gap: 0.15rem; max-inline-size: 22rem; text-decoration: none; }
nav[data-post-nav] a span { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
nav[data-post-nav] a[rel="prev"] span::before { content: "‹ "; }
nav[data-post-nav] a[rel="next"] { margin-inline-start: auto; text-align: end; }
nav[data-post-nav] a[rel="next"] span::after { content: " ›"; }
nav[data-share] { font-family: var(--font-ui); font-size: 0.9rem; margin-block: var(--gap); }
nav[data-share] p { margin: 0 0 0.4rem; }
nav[data-share] ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
nav[data-share] a { border: 1px solid var(--rule); border-radius: 999px; display: inline-block; padding: 0.2rem 0.7rem; text-decoration: none; }
nav[data-share] a:hover, nav[data-share] a:focus-visible { border-color: currentColor; }
section[data-related] { font-family: var(--font-ui); margin-block: var(--gap); }
section[data-related] h2 { font-size: 0.78rem; letter-spacing: 0.2em; margin: 0 0 0.5rem; text-transform: uppercase; }
section[data-related] ul { display: grid; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

/* The topics and issues blocks (blocks/indexes.go). */
section.px-topics h2.px-topics-group { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
ul.px-topics-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; list-style: none; margin: 0; padding: 0; }
span.px-topics-count { color: var(--muted); font-family: var(--font-ui); font-size: 0.8em; font-variant-numeric: tabular-nums; }
ol.px-issues-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.px-issue { align-items: center; aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 1rem; text-align: center; text-decoration: none; }
span.px-issue { color: var(--muted); }
.px-issue-kind, .px-issue-date { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.px-issue-number { font-size: clamp(2.4rem, 6vw, 4rem); font-variant-numeric: tabular-nums; line-height: 1; margin-block: 0.3rem 0.8rem; }
p.px-issues-locked { text-align: center; }

/* codeblocks.css */
/* codeblocks.css: the code block extension (internal/patrix/extensions/
   codeblocks). Laid after base.css and before a theme's own files, so a
   theme restyles a code block by setting these properties (or rules) of
   its own. The token colours are a light palette with at least 4.5:1
   contrast on --code-paper's default. */

:root {
  --code-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --code-paper: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --code-ink: var(--ink);
  --code-rule: var(--rule);
  --code-comment: #5c6670;
  --code-keyword: #b3135a;
  --code-type: #1f5f9e;
  --code-string: #1d6b2e;
  --code-number: #8a4b00;
  --code-function: #6a3fb5;
  --code-builtin: #0f6670;
  --code-tag: #22863a;
  --code-attr: #6f42c1;
  --code-inserted: #1d6b2e;
  --code-deleted: #b31d28;
}

div[data-prose] .px-code {
  margin-block: 1.5em;
  margin-inline: 0;
}

div[data-prose] .px-code figcaption {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  font-family: var(--font-ui);
  font-size: 0.8em;
  gap: 1em;
  justify-content: space-between;
  margin-block-end: 0.35em;
}

div[data-prose] .px-code-title { font-family: var(--code-font); }
div[data-prose] .px-code-lang { margin-inline-start: auto; }

div[data-prose] .px-code pre {
  background: var(--code-paper);
  border: 1px solid var(--code-rule);
  border-radius: 6px;
  color: var(--code-ink);
  font-family: var(--code-font);
  font-size: 0.85em;
  line-height: 1.5;
  margin: 0;
  max-block-size: 40em;
  overflow: auto;
  padding: 0.9em 1.1em;
  tab-size: 4;
  white-space: pre;
}

div[data-prose] .px-code pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
div[data-prose] .px-code code { background: none; font: inherit; padding: 0; }

.px-code .px-c, .px-code .px-cp { color: var(--code-comment); font-style: italic; }
.px-code .px-cp { font-style: normal; }
.px-code .px-k { color: var(--code-keyword); }
.px-code .px-kt, .px-code .px-kc { color: var(--code-type); }
.px-code .px-s { color: var(--code-string); }
.px-code .px-se { color: var(--code-number); }
.px-code .px-m { color: var(--code-number); }
.px-code .px-nf { color: var(--code-function); }
.px-code .px-nb, .px-code .px-nv, .px-code .px-nd { color: var(--code-builtin); }
.px-code .px-nt { color: var(--code-tag); }
.px-code .px-na { color: var(--code-attr); }
.px-code .px-gi { background: color-mix(in srgb, var(--code-inserted) 10%, transparent); color: var(--code-inserted); }
.px-code .px-gd { background: color-mix(in srgb, var(--code-deleted) 10%, transparent); color: var(--code-deleted); }
.px-code .px-gh { color: var(--code-type); font-weight: 600; }
.px-code .px-gp { color: var(--code-comment); user-select: none; }

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