@import url("_fonts-10dFkcd.css");

/* ---------------------------------------------------------------------------
   Tokens. Light is the default; dark follows the system unless the reader chose
   a theme with the toggle (html[data-theme]). Text colours are checked for the
   WCAG AA contrast ratio (tests/Frontend/ContrastTest.php).
--------------------------------------------------------------------------- */
:root {
  --bg-page: #f1f1f1;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f6f6f6;
  --bg-code: #f3f3f3;
  --bg-nav: #2d3642;
  --bg-nav-hover: #363f4a;
  --text: #3d3d3d;
  --text-muted: #5f5f5f;
  --text-heading: #232b35;
  --text-on-nav: #f1f1f1;
  --border: #d9d9d9;
  --accent: #b84400;          /* links and buttons on light surfaces */
  --accent-strong: #8f3500;
  --accent-bright: #ff6a1e;   /* decoration only, never text on light */
  --on-accent: #ffffff;
  --focus: #1a5fd0;
  --mark: #fcf8a5;
  --shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 16px rgb(0 0 0 / 5%);

  --font-body: Lato, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: Raleway, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --measure: 46rem;
  --radius: 6px;

  --hl-comment: #5c6773;
  --hl-keyword: #a626a4;
  --hl-string: #1f7a3d;
  --hl-number: #9a5b00;
  --hl-title: #1a5fd0;
  --hl-variable: #b3261e;
  --hl-meta: #006d77;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark; }
}
:root[data-theme='dark'] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-page: #17191c; --bg-surface: #222529; --bg-surface-alt: #2a2e33; --bg-code: #1a1c1f;
    --bg-nav: #14181e; --bg-nav-hover: #1f2630;
    --text: #d3d3d3; --text-muted: #a3a3a3; --text-heading: #ecedf0;
    --border: #3b4046; --accent: #ff9a62; --accent-strong: #ffb98c; --accent-bright: #ff7a3a; --on-accent: #1a1a1a;
    --focus: #7db1ff; --mark: #4a4300; --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --hl-comment: #9aa5b1; --hl-keyword: #d68cf5; --hl-string: #8fd19e; --hl-number: #f0b867; --hl-title: #7db1ff; --hl-variable: #ff8f86; --hl-meta: #6fd0d9;
  }
}
:root[data-theme='dark'] {
  --bg-page: #17191c; --bg-surface: #222529; --bg-surface-alt: #2a2e33; --bg-code: #1a1c1f;
  --bg-nav: #14181e; --bg-nav-hover: #1f2630;
  --text: #d3d3d3; --text-muted: #a3a3a3; --text-heading: #ecedf0;
  --border: #3b4046; --accent: #ff9a62; --accent-strong: #ffb98c; --accent-bright: #ff7a3a; --on-accent: #1a1a1a;
  --focus: #7db1ff; --mark: #4a4300; --shadow: 0 1px 2px rgb(0 0 0 / 40%);
  --hl-comment: #9aa5b1; --hl-keyword: #d68cf5; --hl-string: #8fd19e; --hl-number: #f0b867; --hl-title: #7db1ff; --hl-variable: #ff8f86; --hl-meta: #6fd0d9;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent-bright); color: #111; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-heading); line-height: 1.25; text-wrap: balance; }
main:focus { outline: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--radius);
  background: var(--bg-nav); color: var(--text-on-nav); font-weight: 700;
}
.skip-link:focus { top: 0.5rem; }
.icon { vertical-align: -0.2em; flex: none; }

/* ---------------------------------------------------------------------------
   Header and navigation
--------------------------------------------------------------------------- */
.site-header { padding: 1.5rem 1rem 1rem; }
.site-header__inner { max-width: var(--measure); margin: 0 auto; display: flex; gap: 1rem; align-items: center; }
.site-logo { flex: none; }
.site-logo img { display: block; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--bg-surface); box-shadow: var(--shadow); width: 72px; height: 72px; }
.site-title { margin: 0; font: 800 clamp(1.4rem, 4.5vw, 2rem)/1.15 var(--font-heading); }
.site-title a { color: var(--text-heading); text-decoration: none; }
.site-title a:hover { color: var(--accent); }
.site-tagline { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.4; }

.site-nav-wrap { background: var(--bg-nav); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); }
.site-nav { max-width: var(--measure); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 0.5rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav a, .site-nav button { color: var(--text-on-nav); }
.site-nav__list a {
  display: block; padding: 0.85rem 1rem; text-decoration: none; font: 700 0.9rem/1 var(--font-heading);
  letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 3px solid transparent;
}
.site-nav__list a:hover { background: var(--bg-nav-hover); }
.site-nav__list a[aria-current='page'] { border-bottom-color: var(--accent-bright); }
.site-nav__tools { display: flex; align-items: center; gap: 0.25rem; }
.social-link { display: inline-flex; padding: 0.6rem; border-radius: var(--radius); line-height: 1; text-decoration: none; }
.social-link:hover { background: var(--bg-nav-hover); }
.lang-switch a { display: block; padding: 0.5rem 0.6rem; text-decoration: none; font: 700 0.8rem/1 var(--font-heading); border-radius: var(--radius); opacity: 0.8; }
.lang-switch a[aria-current='true'] { opacity: 1; background: var(--bg-nav-hover); }
.lang-switch a:hover { opacity: 1; text-decoration: underline; }
.theme-toggle, .nav-toggle {
  background: none; border: 0; cursor: pointer; padding: 0.6rem; border-radius: var(--radius); display: inline-flex; align-items: center; line-height: 1;
}
.theme-toggle:hover, .nav-toggle:hover { background: var(--bg-nav-hover); }
.theme-toggle__sun { display: none; }
:root[data-theme='dark'] .theme-toggle__moon { display: none; }
:root[data-theme='dark'] .theme-toggle__sun { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__moon { display: none; }
  :root:not([data-theme='light']) .theme-toggle__sun { display: inline-flex; }
}
.nav-toggle { display: none; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: inline-flex; }

@media (max-width: 40rem) {
  .search-form { order: 4; width: 100%; padding: 0 0.5rem 0.6rem; }
  .search-form input[type='search'] { flex: 1; width: auto; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav__list { display: none; order: 3; width: 100%; flex-direction: column; padding-bottom: 0.5rem; }
  .js .site-nav__list.is-open { display: flex; }
  .site-nav { justify-content: space-between; }
  .site-nav__list a { border-bottom: 0; border-left: 3px solid transparent; }
  .site-nav__list a[aria-current='page'] { border-left-color: var(--accent-bright); }
}

/* Search */
.search-form { display: flex; align-items: stretch; margin: 0.4rem 0; }
.search-form input[type='search'] {
  font: inherit; font-size: 0.9rem; width: 9.5rem; padding: 0.4rem 0.6rem; border: 1px solid transparent; border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius); background: rgb(255 255 255 / 12%); color: var(--text-on-nav);
}
.search-form input::placeholder { color: #d5dae0; opacity: 1; }
.search-form input[type='search']:focus { background: #fff; color: #222; }
.search-form button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-bright); color: #111; cursor: pointer; font: 700 0.9rem var(--font-body); }
.search-form button:hover { background: #ff8a4a; }
.search-form--page { margin: 1rem 0 0.5rem; align-items: stretch; }
.search-form--page button { padding: 0 1.1rem; font-size: 1rem; }
.search-form--page input[type='search'] { width: 100%; max-width: 26rem; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-right: 0; padding: 0.6rem 0.8rem; font-size: 1rem; }
.search-form--page input::placeholder { color: var(--text-muted); }
.search-result { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.search-result__title { margin: 0 0 0.25rem; font-size: 1.25rem; }
.search-result__snippet { margin: 0; }
mark { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Layout
--------------------------------------------------------------------------- */
.content { flex: 1; width: 100%; max-width: calc(var(--measure) + 2rem); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.notice { background: var(--bg-surface-alt); border-left: 4px solid var(--accent-bright); padding: 0.6rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; font-size: 0.95rem; }
.button, .read-more {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none;
}
.button { background: var(--accent); color: var(--on-accent); padding: 0.6rem 1.2rem; border-radius: var(--radius); }
.button:hover { background: var(--accent-strong); color: var(--on-accent); }

.listing-header { margin-bottom: 1.5rem; }
.listing-title { margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.listing-count { margin: 0.25rem 0; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Post cards, meta
--------------------------------------------------------------------------- */
.post-card, .post, .page {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  margin: 0 0 1.75rem; overflow: hidden;
}
.post-card__image { display: block; }
.post-card__image img, .post__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-surface-alt); }
.post-card__body, .post, .page { padding: 1.25rem 1.5rem 1.5rem; }
.post-card { padding: 0; }
.post-card__title { margin: 0 0 0.4rem; font-size: 1.55rem; }
.post-card__title a { color: var(--text-heading); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); text-decoration: underline; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.75rem; padding: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.post-meta__item { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.post-meta__tags a { margin-right: 0.35rem; }
.post-meta__tags a::before { content: '#'; }
.read-more { margin-top: 0.25rem; }

.post__header { margin-bottom: 1rem; }
.post__image { margin: 1rem -1.5rem 0; width: calc(100% + 3rem); max-width: none; }
.post__title, .page__title { margin: 0.25rem 0 0.5rem; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-size: 0.9rem; }
.breadcrumb li + li::before { content: '›'; margin: 0 0.5rem; color: var(--text-muted); }
.post__footer { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1rem; font-size: 0.95rem; }
.post__terms a { margin-left: 0.5rem; }
.share__title { font-size: 1rem; margin: 1rem 0 0.25rem; }
.share ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; flex-wrap: wrap; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.75rem; }
.post-nav a { display: block; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; text-decoration: none; height: 100%; }
.post-nav a:hover { border-color: var(--accent); }
.post-nav__older { grid-column: 2; text-align: right; }
.post-nav__label { display: block; color: var(--text-muted); font-size: 0.85rem; }
.post-nav__title { font-weight: 700; color: var(--text-heading); }
.related h2 { font-size: 1.2rem; }
.related ul { padding-left: 1.2rem; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 2rem 0; }
.pagination__pages { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; }
.pagination__page, .pagination__step { padding: 0.45rem 0.8rem; border-radius: var(--radius); text-decoration: none; font-weight: 700; display: inline-flex; gap: 0.35rem; align-items: center; min-width: 2.5rem; justify-content: center; }
.pagination a.pagination__page, .pagination a.pagination__step { background: var(--bg-surface); border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--accent); }
.pagination__gap { padding: 0 0.15rem; color: var(--text-muted); }
.pagination__page--current { background: var(--bg-nav); color: var(--text-on-nav); }
/* keeps the place of the missing button; hidden from everyone, there is nothing to read or press */
.pagination__step--disabled { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Article text
--------------------------------------------------------------------------- */
.prose { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.6rem; margin: 2.2rem 0 0.6rem; }
.prose h3 { font-size: 1.3rem; margin: 1.8rem 0 0.5rem; }
.prose h4 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.prose a { overflow-wrap: anywhere; }
.prose img { border-radius: var(--radius); margin: 0.5rem 0; }
.prose blockquote { margin: 1.25rem 0; padding: 0.25rem 1rem; border-left: 4px solid var(--accent-bright); color: var(--text-muted); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-code); padding: 0.1em 0.35em; border-radius: 4px; }
.prose pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; line-height: 1.5; tab-size: 4; position: relative; }
.prose pre code { background: none; padding: 0; font-size: 0.85rem; overflow-wrap: normal; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: left; }
.prose th { background: var(--bg-surface-alt); }
.heading-anchor { margin-left: 0.4rem; text-decoration: none; opacity: 0; font-weight: 400; }
.prose :is(h2, h3, h4):hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
.video { aspect-ratio: 16 / 9; background: #111 center / cover; border-radius: var(--radius); display: grid; place-items: center; margin: 1rem 0; overflow: hidden; }
.video a { color: #fff; padding: 0.8rem 1.2rem; background: rgb(0 0 0 / 70%); border-radius: var(--radius); }
.video iframe { width: 100%; height: 100%; border: 0; }
.copy-code {
  position: absolute; top: 0.4rem; right: 0.4rem; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.25rem 0.5rem; font: 0.75rem var(--font-body); cursor: pointer; opacity: 0.7;
}
.prose pre:hover .copy-code, .copy-code:hover, .copy-code:focus-visible { opacity: 1; }

.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute { color: var(--hl-string); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-built_in, .hljs-type { color: var(--hl-number); }
.hljs-title, .hljs-section, .hljs-name, .hljs-class .hljs-title, .hljs-function { color: var(--hl-title); }
.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-deletion, .hljs-selector-id, .hljs-selector-class { color: var(--hl-variable); }
.hljs-meta, .hljs-link { color: var(--hl-meta); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Forms */
.form { margin-top: 1.25rem; }
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.field__required { color: var(--accent); }
.field__help { margin: 0 0 0.3rem; color: var(--text-muted); font-size: 0.9rem; }
.form input[type='text'], .form input[type='email'], .form input[type='password'], .form textarea {
  width: 100%; font: inherit; padding: 0.65rem 0.8rem; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text);
}
.form textarea { resize: vertical; min-height: 9rem; }
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--focus); outline-offset: 0; }
.field--invalid input, .field--invalid textarea { border-color: #b3261e; }
:root[data-theme='dark'] .field--invalid input, :root[data-theme='dark'] .field--invalid textarea { border-color: #ff8f86; }
.field__errors { list-style: none; margin: 0.35rem 0 0; padding: 0; color: #b3261e; font-weight: 700; font-size: 0.95rem; }
:root[data-theme='dark'] .field__errors { color: #ff8f86; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .field__errors { color: #ff8f86; } :root:not([data-theme='light']) .field--invalid input, :root:not([data-theme='light']) .field--invalid textarea { border-color: #ff8f86; } }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error-summary { border: 3px solid #b3261e; border-radius: var(--radius); padding: 0.75rem 1.25rem; margin: 1rem 0; background: var(--bg-surface-alt); }
.error-summary:focus { outline: 3px solid var(--focus); }
.error-summary__title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.form__note { color: var(--text-muted); font-size: 0.9rem; }
button.button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* The photo of the about page sits beside the first paragraph */
.page--about .prose img { float: left; width: 9rem; height: 9rem; object-fit: cover; border-radius: 50%; margin: 0.25rem 1.25rem 0.75rem 0; box-shadow: var(--shadow); }
.page--about .prose::after { content: ''; display: block; clear: both; }

/* Comments */
.comments { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; }
.comments h2 { margin-top: 0; font-size: 1.3rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list--replies { margin: 0.75rem 0 0 1.5rem; padding-left: 1rem; border-left: 3px solid var(--border); }
.comment { padding: 0.75rem 0; border-top: 1px solid var(--border); }
.comment-list > li:first-child > .comment { border-top: 0; }
.comment-list--replies .comment { border-top: 0; padding: 0.4rem 0; }
.comment__header { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; color: var(--text-muted); font-size: 0.9rem; }
.comment__author { color: var(--text-heading); font-size: 1rem; }
.comment__body { overflow-wrap: anywhere; margin-top: 0.25rem; }
.comment__actions { margin: 0.25rem 0 0; font-size: 0.9rem; }
.comment-context { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--accent-bright); background: var(--bg-surface-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.comment-context p { margin: 0.25rem 0; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.site-footer { background: var(--bg-nav); color: var(--text-on-nav); margin-top: auto; padding: 2rem 1rem 1rem; }
.site-footer a { color: #ffb98c; }
.site-footer a:hover { color: #fff; }
.site-footer__inner { max-width: calc(var(--measure) + 12rem); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; }
.widget-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-nav); margin: 0 0 0.5rem; }
.term-list { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.term-list--tags { display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
.term-count { color: #c4cad2; font-size: 0.85rem; }
.site-footer__legal { max-width: calc(var(--measure) + 12rem); margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 15%); font-size: 0.85rem; color: #c4cad2; }

/* ---------------------------------------------------------------------------
   Preferences
--------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  /* page numbers on their own line, the two steps share the line under it */
  .pagination { gap: 0.6rem; }
  .pagination__pages { order: -1; width: 100%; justify-content: center; }
  .pagination__step { flex: 1; }
  .pagination__step--disabled { display: none; }
  .post__image { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
  .post-card__body, .post, .page { padding: 1rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__older { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .pagination__page--current, .site-nav__list a[aria-current='page'] { outline: 2px solid CanvasText; }
}
@media print {
  .site-nav-wrap, .site-footer, .skip-link, .share, .post-nav, .related, .pagination, .copy-code { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .post, .post-card, .page { box-shadow: none; border: 0; }
  a { color: inherit; }
  .prose a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}

/* ---------------------------------------------------------------------------
   Typewriter demos (the posts about CSS and JavaScript typewriters)
--------------------------------------------------------------------------- */
.typewriter {
  display: block; max-width: fit-content; margin: 0 auto; overflow: hidden; white-space: nowrap; text-align: left;
  letter-spacing: 0.2em; border-right: 0.15em solid var(--accent-bright);
  animation: typing 3.5s steps(38, end), blink-caret 0.75s step-end infinite;
}
.typewriter.slow { animation: typing 7s steps(52, end), blink-caret 1.5s step-end infinite; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--accent-bright); } }
@keyframes blink-char { from, to { color: transparent; } 50% { color: inherit; } }
.retype-btn, .type-btn {
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.55rem 1.1rem; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--bg-surface); color: var(--accent);
}
.retype-btn:hover, .type-btn:hover { background: var(--accent); color: var(--on-accent); }
.type-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.prose textarea, .prose input[type='number'] { font: inherit; max-width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text); }
.prose label { margin-right: 0.5rem; font-weight: 700; }
.typewriter-output {
  position: relative; min-height: 6rem; padding: 3rem; margin-top: 1rem; font-family: ATWriter, monospace; white-space: pre-wrap;
  background: #f8f5de linear-gradient(to right, rgb(255 210 0 / 40%), rgb(200 160 0 / 10%) 11%, transparent 35%, rgb(200 160 0 / 10%) 65%);
  box-shadow: inset 0 0 75px rgb(255 210 0 / 30%), inset 0 0 30px rgb(220 120 0 / 80%); color: #2a2a2a;
}
.typewriter-output-blinker::after { content: '_'; font-weight: 700; margin-left: 0.2rem; animation: blink-char 0.75s step-end infinite; }
.banner.error { background: #fde8e8; color: #7a1010; border: 1px solid #c53030; border-radius: var(--radius); padding: 0.5rem 1rem; margin-top: 1rem; }
.banner.error ul { margin: 0; padding-left: 1.2rem; }
@media (max-width: 770px) { .typewriter-output { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .typewriter { animation: none; width: auto; white-space: normal; }
  .typewriter-output-blinker::after { animation: none; }
}

/* ---- post types: quote and video (as the format-quote / format-video of the old theme) ---- */
.post-card--quote { background: var(--bg-surface-alt, var(--bg-surface)); border-left: 5px solid var(--accent-bright); padding: 1.25rem 1.5rem; }
.prose--quote { font-family: var(--font-heading, inherit); }
.prose--quote blockquote { margin: 0; padding: 0; border: 0; font-size: 1.45rem; line-height: 1.45; font-style: italic; color: var(--text); }
.prose--quote blockquote p { margin: 0; }
.prose--quote cite { display: block; margin-top: 0.8rem; font-size: 1rem; font-style: normal; font-weight: 700; text-align: right; color: var(--text-muted); }
.prose--quote cite::before { content: '— '; }
.prose--quote cite a { color: inherit; text-decoration: none; pointer-events: none; }
.post--quote .post__header { margin-bottom: 0; }
.post--quote .prose--quote { padding: 0.5rem 0 1rem; }
.post-card--video .video { margin-top: 0.75rem; }