@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Gage EXO";
  src: url("fonts/GageEXO-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}


/* Design tokens: one scale shared by headings, navigation, and metadata. */
html:root {
  --font-body: "IBM Plex Sans", sans-serif;
  --font-heading: Helvetica, Arial, sans-serif;
  --font-name: "Gage EXO", Helvetica, Arial, sans-serif;
  --font-code: "Geist Mono", ui-monospace, monospace;
  --sans-serif-font: var(--font-body);
  --serif-font: var(--font-body);
  --header-font: var(--font-heading);
  --code-font: var(--font-code);
  --size-small: 0.75rem;
  --size-label: 0.875rem;
  --size-body: 1rem;
  --size-heading: 1.25rem;
  --size-title: 1.75rem;
  --size-article-title: 3.5rem;
  --size-name: 2.5rem;
  --section-spacing: 3rem;
  --header-tools-width: 2.4rem;
  --nav-link-padding: 0.66rem;
  --nav-item-gap: 1px;
  --reading-width: calc(var(--max-layout-width) - var(--header-tools-width) - var(--nav-link-padding) - var(--nav-item-gap));
  --normal-layout-width: var(--reading-width);
  --primary-color: #007f91;
}
html:root[data-theme="dark"] { --primary-color: #ff3014; --background-color: #171717; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { --primary-color: #ff3014; }
}
body, header { font-family: var(--font-body); font-size: var(--size-body); }
h1, h2, h3, h4, h5, h6, .page-header, .article-navigation p {
  font-family: var(--font-heading);
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 700;
}
h1, .page-header { font-size: var(--size-title); }
h2, h2.bloglist-title { font-size: var(--size-heading); }
h3, h4, h5, h6 { font-size: var(--size-body); }
.page-header { margin-block: 2rem 1.5rem; }
.navbar .home-title {
  font-family: var(--font-name);
  font-size: var(--size-name);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  line-height: 1.1;
}
.navbar .menu-icons-container { width: var(--header-tools-width); flex: none; }
.navbar .nav-navs > ul { gap: var(--nav-item-gap); }
.navbar .nav-links { padding-inline: var(--nav-link-padding); font-family: var(--font-code); font-size: var(--size-label); text-transform: uppercase; }
.rss-link { position: relative; display: flex; align-items: center; color: var(--text-color); padding: 0.3rem; border: 0; }
.rss-link svg { width: 1.1rem; height: 1.1rem; }
.rss-link:hover, .rss-link:focus-visible { color: var(--primary-color); background: transparent; }
.rss-link::before { content: none !important; }
.navbar .theme-switcher:hover, .navbar .theme-switcher:focus-visible { background: var(--primary-color); }
pre, code, kbd, samp { font-family: var(--font-code); }
.bloglist-meta, .bloglist-tags, .bloglist-tags .tag, .meta { font-size: var(--size-small); }

/* Keep title and metadata inside the article reading column. */
.article-header { display: grid; gap: 1rem; margin-block: 2rem 1rem; align-items: center; max-width: var(--reading-width); }
.article-header .article-title { margin: 0; font-size: clamp(2rem, 4.5vw, var(--size-article-title)); line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.article-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; color: var(--meta-color); text-align: right; text-transform: uppercase; }
.article-header .article-meta li, .article-header .article-meta a { font-family: var(--font-code); font-size: var(--size-small); line-height: 1.5; }
.article-layout { max-width: var(--reading-width); }
.article-layout .body { min-width: 0; }
.article-layout .body > :first-child { margin-block-start: 0; }
/* Space separates sections; a heading stays close to the content it introduces. */
.article-layout .body > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-block-start: var(--section-spacing);
  margin-block-end: 0.65rem;
}
.article-layout .body > :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, pre) {
  margin-block-start: 0;
}
.article-layout .body > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 1.25rem;
}

@media (min-width: 700px) {
  .article-header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; }
}
@media (min-width: 1100px) {
  .custom-article { max-width: 100%; }
}
@media (max-width: 699px) {
  .navbar .home-title { font-size: 2rem; }
  .navbar { gap: 1rem; }
}

/* A bounded wordmark marquee; keyboard focus and hover pause the motion. */
.navbar .name-marquee {
  display: block;
  width: 14rem;
  max-width: 80vw;
  overflow: hidden;
}
.name-marquee-track {
  display: flex;
  width: max-content;
  animation: name-scroll 14s linear infinite;
}
.name-marquee-copy {
  flex: none;
  white-space: nowrap;
  padding-inline-end: 3rem;
  /* A small repeating pixel mask gives the lettering a dithered surface. */
  -webkit-mask-image: repeating-conic-gradient(transparent 0deg 90deg, #000 90deg 360deg);
  mask-image: repeating-conic-gradient(transparent 0deg 90deg, #000 90deg 360deg);
  -webkit-mask-size: 3px 3px;
  mask-size: 3px 3px;
}
.name-marquee:hover .name-marquee-track,
.name-marquee:focus .name-marquee-track { animation-play-state: paused; }
@keyframes name-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .name-marquee-track, .name-marquee-copy { animation: none; }
  .name-marquee-copy + .name-marquee-copy { display: none; }
}

/* Quotes use an italic text highlight rather than a sidebar rule. */
.article-layout blockquote {
  border: 0;
  padding: 0;
  margin-block: 1.5rem;
  font-style: italic;
  text-align: right;
}
.article-layout blockquote p {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-block: 0.6rem;
  margin-inline-start: auto;
  margin-inline-end: 0;
  padding: 0.3rem 0.65rem;
  background: var(--primary-color);
  color: #000;
  font-style: italic;
}

/* Archived posts have their own section below the active Blog listing. */
.blog-page { max-width: var(--reading-width); }
.blog-archive { margin-block-start: var(--section-spacing); border-block-start: 1px solid var(--divider-color); padding-block-start: 1.5rem; }
.archive-empty { color: var(--meta-color); font-size: var(--size-label); }
.archive-label, .archive-posts time {
  font-family: var(--font-code);
  font-size: var(--size-small);
  text-transform: uppercase;
  color: var(--meta-color);
}
.archive-year { margin-block-start: 2.5rem; }
.archive-posts { list-style: none; padding: 0; margin-block-start: 1rem; }
.archive-posts li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--divider-color);
}
.archive-posts a { font-family: var(--font-heading); font-size: var(--size-body); text-transform: uppercase; }

/* Original project demos, now embedded in archived articles. */
.project-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin-block: 1rem; }

.demo-finished:not([hidden]) {
  display: grid;
  place-content: center;
  justify-items: center;
  aspect-ratio: 16 / 9;
  background: var(--bg-1);
  gap: 1rem;
}
.demo-finished p, .demo-finished button {
  font-family: var(--font-code);
  text-transform: uppercase;
  font-size: var(--size-label);
}
.demo-finished p { margin: 0; }
.demo-finished button {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 0.65rem 1rem;
  cursor: pointer;
}

/* Post previews share the article header's alignment and type hierarchy. */
.post-previews { max-width: var(--reading-width); }
.post-preview { padding-block: 2rem; margin-inline: 0; max-width: none; width: auto; }
.post-preview-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: 1.5rem; row-gap: 0.4rem; align-items: start; }
.post-preview .post-preview-title { margin: 0; font-size: var(--size-title); line-height: 1.15; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.post-preview-title a { color: var(--text-color-high-contrast); }
.post-preview-title a:hover { color: var(--hover-color); }
.post-preview-meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; text-align: right; text-transform: uppercase; color: var(--meta-color); }
.post-preview-meta li, .post-preview-meta a { font-family: var(--font-code); font-size: var(--size-small); line-height: 1.5; }
.post-preview .post-preview-description { grid-column: 1; grid-row: 2; margin: 0; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.7; color: var(--text-color); }
.post-preview-image { display: block; max-width: 100%; margin-block-start: 1rem; }
@media (max-width: 699px) {
  .post-preview-header { grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: 1rem; row-gap: 0.4rem; }
}

/* Transparent grain pattern floats over the existing charcoal surface. */
body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: -12vh 0;
  transform: translate3d(0, var(--background-shift, 0px), 0);
  will-change: transform;
  z-index: -1;
  pointer-events: none;
  background: url("images/monarch-veins-white.png") center / cover no-repeat;
  opacity: 0.6;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,0.25) 28%, rgba(0,0,0,0.25) 76%, #000);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("images/film-grain.png") repeat;
  opacity: 0.24;
}

/* Landing-page rhythm: generous section gaps, compact individual previews. */
.landing-page { padding-block-start: max(2rem, calc(38svh - 10rem)); padding-block-end: 4svh; }
.landing-page main > section:first-of-type { text-align: center; margin-block-end: calc(clamp(5rem, 26svh, 22rem) + 1rem); }
.landing-page main > section:first-of-type > :last-child { margin-block-end: 0; }
.landing-page #posts-list .page-header { margin-block: 0; padding-block-end: 0.75rem; }
.landing-page .recent-writing-empty { margin-block: 1rem 0; color: var(--meta-color); }
.landing-page .post-previews { padding-block-start: 0; }
.landing-page .post-preview { padding-block: 1.5rem; }

/* In light mode the same transparent texture becomes dark grey ink. */
html[data-theme="light"] body::before { filter: brightness(0) invert(0.25); }

/* Viewport-corner utilities, independent of the content navigation. */
.navbar .theme-switcher-wrapper { position: fixed; inset: 1rem 1rem auto auto; z-index: 50; }
.navbar .theme-switcher { display: block; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border: 0; mask-size: 1.2rem; mask-position: center; mask-repeat: no-repeat; }
.corner-rss { position: fixed; inset: auto 1rem 1rem auto; z-index: 50; justify-content: center; width: 2.4rem; height: 2.4rem; box-sizing: border-box; }
.corner-rss svg { width: 1.2rem; height: 1.2rem; }

/* Soft gradient halos separate icons from the texture without button discs. */
.navbar .theme-switcher-wrapper, .corner-rss {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: transparent; border: 0; box-shadow: none; isolation: isolate;
}
.navbar .theme-switcher-wrapper { display: grid; place-items: center; }
.navbar .theme-switcher { width: 3rem; height: 3rem; mask-size: 1.2rem; background: var(--text-color-high-contrast); }
.corner-rss { color: var(--text-color-high-contrast); }
.corner-rss svg { width: 1.2rem; height: 1.2rem; }
.corner-rss:hover, .corner-rss:focus-visible { background: transparent; color: var(--primary-color); }
.navbar .theme-switcher-wrapper:focus-within,
.navbar .theme-switcher:focus, .navbar .theme-switcher:focus-visible,
.corner-rss:focus, .corner-rss:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  body::before { transform: none; will-change: auto; }
}

.navbar .theme-switcher-wrapper::before {
  content: ""; position: absolute; inset: -0.85rem; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--background-color) 92%, transparent) 0%, color-mix(in srgb, var(--background-color) 65%, transparent) 35%, transparent 72%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  mask-image: radial-gradient(circle, #000 20%, transparent 72%);
  filter: blur(4px);
}

/* White difference blending inverts the actual pixels beneath the RSS icon. */
.corner-rss, .corner-rss:hover, .corner-rss:focus-visible {
  color: #fff;
  background: transparent;
  mix-blend-mode: difference;
  isolation: auto;
}
.corner-rss::after { content: none; }

/* Search opens as a compact list beneath its navigation icon. */
.search-control { position: relative; }
.search-dropdown:not([hidden]) { display: block; }
.search-dropdown { position: absolute; inset: calc(100% + 0.75rem) 0 auto auto; width: min(21rem, calc(100vw - 4rem)); z-index: 60; padding: 0.6rem; border: 1px solid var(--divider-color); background: var(--background-color); box-shadow: 0 8px 28px #0003; text-align: left; }
.search-dropdown input { width: 100%; box-sizing: border-box; padding: 0.6rem; border: 1px solid var(--divider-color); background: var(--bg-0); color: var(--text-color); font-family: var(--font-body); font-size: var(--size-body); }
.search-dropdown #search-options { display: grid; max-height: min(22rem, 55vh); overflow-y: auto; margin-block-start: 0.4rem; }
.search-dropdown #search-options a { display: block; padding: 0.65rem; color: var(--text-color); font-family: var(--font-heading); font-size: var(--size-label); line-height: 1.4; text-transform: uppercase; text-decoration: none; }
.search-dropdown #search-options a::before { content: none; }
.search-dropdown #search-options a:hover, .search-dropdown #search-options a[aria-selected="true"] { background: var(--primary-color); color: var(--hover-color); }
.search-dropdown #search-status { margin: 0; padding: 0.4rem; font-family: var(--font-code); font-size: var(--size-small); color: var(--meta-color); }
.search-dropdown #search-status:empty { display: none; }

/* Search floats on a soft-edged scrim instead of a bordered panel. */
.search-dropdown {
  border: 0; background: transparent; box-shadow: none; isolation: isolate;
}
.search-dropdown::before {
  content: ""; position: absolute; inset: -1.1rem; z-index: -1;
  pointer-events: none; border-radius: 1.5rem;
  background: var(--background-color);
  filter: blur(14px);
  opacity: 0.96;
}
.search-dropdown input {
  border: 0; border-radius: 0; background: color-mix(in srgb, var(--background-color) 65%, transparent);
  outline: none;
}
.search-dropdown input:focus-visible { outline: none; }

/* Invert only the search field; keep the results' soft-edged backdrop. */
.search-dropdown input {
  background: var(--text-color-high-contrast);
  color: var(--background-color);
  caret-color: var(--background-color);
}
.search-dropdown input::placeholder { color: var(--background-color); opacity: 0.65; }
html[data-theme="dark"] .search-dropdown input { color-scheme: light; }
html[data-theme="light"] .search-dropdown input { color-scheme: dark; }

/* Feather only the inverted field's surface, keeping its text unmasked. */
.search-field { position: relative; isolation: isolate; }
.search-field::before {
  content: ""; position: absolute; inset: -0.15rem; z-index: -1; pointer-events: none;
  background: var(--text-color-high-contrast);
  mask-image: linear-gradient(to right, transparent, #000 0.8rem, #000 calc(100% - 0.8rem), transparent), linear-gradient(to bottom, transparent, #000 0.5rem, #000 calc(100% - 0.5rem), transparent);
  mask-composite: intersect;
  filter: blur(3px);
}
.search-dropdown .search-field input { background: transparent; padding-inline: 0.85rem; }

/* Center beneath the search icon, staying inside narrow viewports. */
.search-dropdown {
  position: fixed;
  inset: var(--search-dropdown-top, 5rem) auto auto var(--search-dropdown-left, 1rem);
  width: var(--search-dropdown-width, 21rem);
  box-sizing: border-box;
}

/* Media share one grid; selection expands smoothly through layout interpolation. */
.article-layout .media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-block: var(--section-spacing); align-items: start; overflow-anchor: none; }
.media-grid .media-tile { margin: 0; min-width: 0; transform-origin: top left; }
.media-tile.is-selected { grid-column: 1 / -1; order: -1; }
.media-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-0); }
.media-tile.is-selected .media-visual { aspect-ratio: 16 / 9; }
.media-grid .media-visual img { display: block; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; border-radius: 0; }
.media-grid .demo-video, .media-grid .demo-frame-host { width: 100%; height: 100%; }
.media-grid .project-video { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0; pointer-events: none; }
.media-tile.is-selected .project-video { pointer-events: auto; }
.media-grid .demo-finished:not([hidden]) { position: absolute; inset: 0; aspect-ratio: auto; }
.media-grid figcaption { margin-block-start: 0.5rem; font-family: var(--font-code); font-size: var(--size-small); line-height: 1.5; text-align: left; text-transform: uppercase; color: var(--meta-color); }
.media-select { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.media-select::after { content: '↗'; position: absolute; inset: 0.35rem 0.35rem auto auto; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; color: white; background: #0009; font-family: var(--font-code); font-size: 1rem; }
.is-selected .media-select { cursor: zoom-out; }
.is-selected .media-select::after { content: '↙'; }
.media-tile-video.is-selected .media-select { inset: 0.35rem 0.35rem auto auto; width: 1.7rem; height: 1.7rem; z-index: 1; }
.media-tile-video.is-selected .media-select::after { inset: 0; }
@media (max-width: 699px) { .article-layout .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
.media-grid .project-video { max-width: none; max-height: none; }

/* Code follows the site's neutral palette, with one theme-aware accent. */
html:root { --code-surface: #f1f1f1; --code-ink: #292929; --code-muted: #747474; --code-string: #555; }
html:root[data-theme="dark"] { --code-surface: #141414; --code-ink: #dedede; --code-muted: #929292; --code-string: #bdbdbd; }
.article-layout pre:not(.mermaid) {
  margin-block: 1.5rem; padding: 2.8rem 1.25rem 1.25rem;
  border: 0; border-radius: 0;
  background: var(--code-surface); color: var(--code-ink);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--code-surface) 70%, transparent);
  line-height: 1.65;
}
.article-layout pre code {
  margin: 0; padding: 0; border-radius: 0; background: transparent;
  font-family: var(--font-code); font-size: 0.8rem; line-height: 1.65;
  tab-size: 4; scrollbar-width: thin; scrollbar-color: var(--meta-color) transparent;
}
.article-layout pre code .giallo-l { line-height: 1.65; }
.article-layout pre code::before {
  inset-block-start: 0.85rem; inset-inline-start: 1.25rem;
  width: auto; height: auto; padding: 0;
  background: transparent; color: var(--code-muted);
  font-family: var(--font-code); font-size: 0.65rem; line-height: 1.2; letter-spacing: 0.08em;
}
.article-layout pre[data-name]::after, .article-layout pre code[data-name]::after, .article-layout pre .source-path {
  top: 0.85rem; padding-top: 0; color: var(--code-muted); font-family: var(--font-code);
}
.article-layout pre .copy-code {
  top: 0.65rem; inset-inline-end: 1rem;
  width: 1.15rem; height: 1.15rem; background: var(--code-muted);
  mask-size: 0.9rem; mask-position: center; mask-repeat: no-repeat;
}
.article-layout pre .copy-code:hover, .article-layout pre .copy-code.checked { background: var(--primary-color); }
.article-layout pre.z-code span { color: inherit; font-style: normal; }
.article-layout pre.z-code .z-6 { color: var(--code-muted); font-style: italic; }
.article-layout pre.z-code .z-4 { color: var(--code-muted); }
.article-layout pre.z-code .z-7 { color: var(--code-string); }
.article-layout pre.z-code .z-9, .article-layout pre.z-code .z-10 { color: var(--primary-color); }
.article-layout pre code mark, .article-layout pre .z-hl { background: color-mix(in srgb, var(--primary-color) 12%, var(--code-surface)); }
.article-layout :not(pre) > code { background: color-mix(in srgb, var(--text-color) 9%, var(--background-color)); border-radius: 2px; font-size: 0.86em; padding: 0.1em 0.3em; }

/* Long snippets expand like selected media, while short snippets stay untouched. */
.code-fold { position: relative; margin-block: 1.5rem; }
.article-layout .code-fold pre { box-sizing: border-box; margin: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--meta-color) var(--code-surface); transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.code-fold::after { content: none; }
.code-fold.is-expanded::after { opacity: 0; }
.code-fold-toggle { display: block; width: 100%; min-height: 2.8rem; padding: 0.75rem; border: 0; background: var(--code-surface); color: var(--meta-color); font-family: var(--font-code); font-size: var(--size-small); line-height: 1.3; text-transform: uppercase; cursor: pointer; }
.code-fold-toggle:hover, .code-fold-toggle:focus-visible { color: var(--primary-color); }
@media (prefers-reduced-motion: reduce) { .article-layout .code-fold pre, .code-fold::after { transition: none; } }

/* Inline code reads as a small typographic inset, not a bright badge. */
.article-layout .body :not(pre) > code {
  padding: 0.12em 0.34em; border: 1px solid color-mix(in srgb, var(--meta-color) 22%, transparent);
  border-radius: 2px; color: var(--text-color-high-contrast);
  background: color-mix(in srgb, var(--text-color) 7%, var(--background-color));
  font-family: var(--font-code); font-size: 0.86em; box-decoration-break: clone;
}
.article-layout .body a:hover code { padding: 0.12em 0.34em; color: var(--primary-color); }

/* Consistent list rhythm, including nested lists, tasks and definitions. */
.article-layout .body :is(ul, ol) { margin-block: 1rem 1.4rem; padding-inline-start: 1.6rem; }
.article-layout .body li { padding-inline-start: 0.3rem; margin-block: 0.45rem; line-height: 1.7; }
.article-layout .body li::marker { color: var(--primary-color); font-family: var(--font-code); font-size: 0.85em; }
.article-layout .body li > :is(ul, ol) { margin-block: 0.45rem 0.65rem; }
.article-layout .body ul { list-style-type: disc; }
.article-layout .body ul ul { list-style-type: circle; }
.article-layout .body ul ul ul { list-style-type: square; }
.article-layout .body ol { list-style-type: decimal; }
.article-layout .body ol ol { list-style-type: lower-alpha; }
.article-layout .body ol ol ol { list-style-type: lower-roman; }
.article-layout .body li > p { margin-block: 0.5rem; }
.article-layout .body li:has(> input[type="checkbox"]) { list-style: none; padding-inline-start: 0; }
.article-layout .body input[type="checkbox"] { appearance: none; display: inline-grid; place-content: center; width: 0.9rem; height: 0.9rem; margin: 0 0.55rem 0 -1.2rem; border: 1px solid var(--meta-color); border-radius: 1px; vertical-align: -0.1rem; background: var(--background-color); opacity: 1; }
.article-layout .body input[type="checkbox"]:checked { background: var(--primary-color); border-color: var(--primary-color); }
.article-layout .body input[type="checkbox"]:checked::after { content: '✓'; color: var(--hover-color); font: 0.75rem/1 var(--font-code); }
.article-layout .body dl { margin-block: 1.5rem; }
.article-layout .body dt { margin-block-start: 1rem; font-family: var(--font-code); font-size: var(--size-label); text-transform: uppercase; }
.article-layout .body dd { margin: 0.4rem 0 1rem 1.5rem; }

/* Quiet tables: mono headers, horizontal rules, no accent-colour slab. */
.article-table-scroll { margin-block: 1.75rem; overflow-x: auto; scrollbar-width: thin; }
.article-layout .body .article-table-scroll table { width: 100%; margin: 0; border-radius: 0; border-collapse: collapse; text-align: start; background: color-mix(in srgb, var(--background-color) 94%, transparent); }
.article-layout .body table :is(th, td) { border: 0; border-bottom: 1px solid var(--divider-color); padding: 0.85rem 1rem; font-size: 0.9rem; line-height: 1.5; }
.article-layout .body table thead tr { color: var(--text-color-high-contrast); background: transparent; }
.article-layout .body table th { font-family: var(--font-code); font-size: var(--size-small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--meta-color); }
.article-layout .body table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.article-layout .body table tbody tr:hover { background: color-mix(in srgb, var(--primary-color) 6%, var(--background-color)); }
.article-layout .body table td:first-child, .article-layout .body table th:first-child { padding-inline-start: 0.6rem; }
.article-layout .body a:not(:has(img)) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary-color) 50%, transparent); text-underline-offset: 0.18em; }
.article-layout .body a:hover { color: var(--primary-color); background: transparent; text-decoration-color: currentColor; }
.article-layout .body a:hover::before { content: none !important; }

/* Link previews use the same feathered surface as search. */
.link-preview { position: fixed; z-index: 2000; width: min(18rem, calc(100vw - 3rem)); box-sizing: border-box; padding: 0.85rem; pointer-events: none; isolation: isolate; opacity: 0; transform: translateY(4px); transition: opacity 140ms ease, transform 140ms ease; }
.link-preview.is-visible { opacity: 1; transform: none; }
.link-preview::before { content: ""; position: absolute; inset: -0.5rem; z-index: -1; border-radius: 0.6rem; background: var(--background-color); filter: blur(10px); opacity: 0.98; }
.link-preview-title { margin: 0 0 0.45rem; font-family: var(--font-heading); font-size: 0.9rem; line-height: 1.3; text-transform: uppercase; color: var(--text-color-high-contrast); }
.link-preview-description { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 0.8rem; line-height: 1.5; color: var(--text-color); }
.link-preview-destination { display: block; font-family: var(--font-code); font-size: 0.6rem; line-height: 1.5; color: var(--primary-color); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .link-preview { transition: none; transform: none; } }

.article-layout .body table .column-left { text-align: left; }
.article-layout .body table .column-center { text-align: center; }
.article-layout .body table .column-right { text-align: right; }

/* A nested quotation lives inside the outer quote, with a visible inset. */
.article-layout blockquote:has(> blockquote) {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--primary-color) 9%, var(--background-color));
}
.article-layout blockquote:has(> blockquote) > p { margin-block: 0 0.6rem; }
.article-layout blockquote > blockquote {
  margin: 0.85rem 1rem 0.15rem clamp(1.25rem, 4vw, 3rem);
  padding: 0.65rem 0.85rem;
  background: color-mix(in srgb, var(--primary-color) 18%, var(--background-color));
}
.article-layout blockquote > blockquote > p { margin-block: 0; }

/* Star bullets and neutral numbering; task checkboxes retain the accent. */
.article-layout .body li::marker { color: var(--text-color-high-contrast); }
.article-layout .body ul { list-style-type: '✦  '; }
.article-layout .body ul ul, .article-layout .body ul ul ul { list-style-type: '✧  '; }
.article-layout .body ul > li::marker { font-family: var(--font-body); font-size: 0.85em; }