/* mold theme — frontend.css
   Parchment & ink; straight lines; sharp corners; strong separation
   This file replaces the platform’s default frontend.css.
*/
/* === TOKENS & THEME ALIASING === */
/* --- Base palettes (define once) --- */
:root {
  /* Light palette ("parchment day") */
  --background-light: #F8F6F1;
  --paper-light: #f5f1df;
  --paper-soft-light: #faf7ea;
  --paper-hard-light: #e9e2c5;
  --ink-light: #111;
  --ink-muted-light: #222;
  --ink-weak-light: #3f3b2e;
  --line-light: rgba(0, 0, 0, 0.4);
  --line-weak-light: rgba(0, 0, 0, 0.1);
  --rule-light: #c9c2a3;
  --rule-weak-light: #e5dfc5;
  --wood-light: #dccebd;
  --accent-light: #1f33b7;
  --accent-weak-light: #e6eefc;
  --accent-ink-light: #FCFBFA;
  --focus-light: 0 0 0 3px rgba(34, 75, 143, 0.25);
  /* UI specifics (light) */
  --field-light: #FCFBF6;
  --placeholder-light: #6f6b5b;
  --highlight-light: #fff2a8;
  /* Dark palette ("parchment night") */
  --background-dark: #0b0c0d;
  --paper-dark: #111315;
  --paper-soft-dark: #161a1d;
  --paper-hard-dark: #0c0f12;
  --ink-dark: #f2efe2;
  --ink-muted-dark: #f6f1dc;
  --ink-weak-dark: #c9c3ad;
  --line-dark: rgba(207, 200, 163, 0.5);
  --line-weak-dark: rgba(255, 255, 255, 0.1);
  --rule-dark: #2b3136;
  --rule-weak-dark: #1a1f23;
  --wood-dark: #222;
  --accent-dark: #6ec7ff;
  --accent-weak-dark: rgba(110, 163, 255, 0.18);
  --accent-ink-dark: #0b0f14;
  --focus-dark: 0 0 0 3px rgba(110, 163, 255, 0.35);
  /* UI specifics (dark) */
  --field-dark: #0f1417;
  --placeholder-dark: #8b8a7a;
  --highlight-dark: #4d3e00;
  /* Static tokens */
  --radius: 0;
  --radius-sm: 0;
  --shadow: 0;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-8: 32px;
  --stack-gap: var(--space-5); /* base layout vertical spacing */
  --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --ui: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* --- Aliases (default to light) --- */
  --background: var(--background-light);
  --paper: var(--paper-light);
  --paper-soft: var(--paper-soft-light);
  --paper-hard: var(--paper-hard-light);
  --ink: var(--ink-light);
  --ink-muted: var(--ink-muted-light);
  --ink-weak: var(--ink-weak-light);
  --line: var(--line-light);
  --line-weak: var(--line-weak-light);
  --rule: var(--rule-light);
  --rule-weak: var(--rule-weak-light);
  --wood: var(--wood-light);
  --accent: var(--accent-light);
  --accent-weak: var(--accent-weak-light);
  --accent-ink: var(--accent-ink-light);
  --focus: var(--focus-light);
  --field: var(--field-light);
  --placeholder: var(--placeholder-light);
  --highlight: var(--highlight-light);
  /* Let UA render light controls by default; dark is enabled below */
  color-scheme: light only;
}
/* --- Manual overrides: force Dark or Light --- */
html.theme-dark {
  color-scheme: dark only;
  --background: var(--background-dark);
  --paper: var(--paper-dark);
  --paper-soft: var(--paper-soft-dark);
  --paper-hard: var(--paper-hard-dark);
  --ink: var(--ink-dark);
  --ink-muted: var(--ink-muted-dark);
  --ink-weak: var(--ink-weak-dark);
  --line: var(--line-dark);
  --line-weak: var(--line-weak-dark);
  --rule: var(--rule-dark);
  --rule-weak: var(--rule-weak-dark);
  --wood: var(--wood-dark);
  --accent: var(--accent-dark);
  --accent-weak: var(--accent-weak-dark);
  --accent-ink: var(--accent-ink-dark);
  --focus: var(--focus-dark);
  --field: var(--field-dark);
  --placeholder: var(--placeholder-dark);
  --highlight: var(--highlight-dark);
}
/* Forcing light: variables already match :root; just ensure color-scheme */
html.theme-light {
  color-scheme: light only;
}
/* --- System preference (applies only when not forcing light) --- */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    color-scheme: dark only;
    --background: var(--background-dark);
    --paper: var(--paper-dark);
    --paper-soft: var(--paper-soft-dark);
    --paper-hard: var(--paper-hard-dark);
    --ink: var(--ink-dark);
    --ink-muted: var(--ink-muted-dark);
    --ink-weak: var(--ink-weak-dark);
    --line: var(--line-dark);
    --line-weak: var(--line-weak-dark);
    --rule: var(--rule-dark);
    --rule-weak: var(--rule-weak-dark);
    --wood: var(--wood-dark);
    --accent: var(--accent-dark);
    --accent-weak: var(--accent-weak-dark);
    --accent-ink: var(--accent-ink-dark);
    --focus: var(--focus-dark);
    --field: var(--field-dark);
    --placeholder: var(--placeholder-dark);
    --highlight: var(--highlight-dark);
  }
}
/* === RESET === */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
html.smooth-scroll {
  scroll-behavior: smooth;
}
body {
  max-width: 1280px;
  margin: 4px auto 40px auto;
  padding-inline: clamp(6px, 2vw, 20px);
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 768px) {
  body {
    padding-inline: 0;
  }
}
/* === BASE ELEMENTS === */
a {
  color: var(--accent);
}
a:hover {
  color: color-mix(in srgb, var(--accent) 50%, var(--ink));
}
.url {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1 a,
h2 a,
h3 a,
h4 a,
header a,
footer a,
details a,
.top-menu a,
.main-menu a,
.breadcrumbs a,
.meta-strip a,
.post-nav a {
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  color: var(--ink-muted);
  font-family: var(--ui);
  letter-spacing: 0.1px;
  margin: 0.35em 0 0.25em;
  line-height: 1.25;
  font-weight: 500;
}
h1 {
  font-size: 1.6rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.15rem;
}
p {
  line-height: 1.5;
  font-size: 1rem;
}
/* Normalizations */
li,
blockquote,
figcaption {
  font-size: 1rem;
}
p,
ul,
ol,
figure,
pre {
  margin: 0.7rem 0;
}
a,
code,
kbd,
samp {
  line-height: inherit;
  vertical-align: baseline;
}
noscript {
  color: #b00;
  font-family: var(--ui);
  margin-left: var(--space-2);
}
/* Code */
code,
kbd,
pre,
samp {
  font-family: var(--mono);
}
pre {
  background: var(--paper-hard);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  overflow: auto;
  position: relative;
}
code {
  background: var(--paper-hard);
  border: 1px solid var(--rule);
  padding: 0px 4px;
}
pre > code {
  border: 0;
}
/* Details and Summary */
details {
  font-family: var(--ui);
  display: inline-grid;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 0; /* closed state: no padding so summary is fully clickable */
  margin: var(--space-4) 0;
}
/* Closed: hug summary width */
details:not([open]) {
  width: max-content;
}
/* Expand and content padding when open */
details[open] {
  width: auto;
  padding: 8px 12px;
}
/* Keep the summary flush to the border when open */
details[open] summary {
  margin: -8px -12px 0; /* cancels the open-state padding on details */
}
summary {
  cursor: pointer;
  font-family: var(--ui);
  position: relative;
  list-style: none;
  display: block;
  padding: 8px 12px;
  padding-left: calc(13px + 1.2em);
}
summary::marker,
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "▶";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: var(--ink-weak);
  transition:
    transform 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
  color: var(--accent);
}
details:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
}
details[open]:hover {
  background: var(--paper-soft);
  border-color: var(--line);
}
details[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
}
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
/* Rules */
hr {
  border: none;
  border-top: 1px solid var(--rule);
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rule),
    transparent
  );
  margin: 22px 0;
}

/* === LAYOUT / FRAME UI === */
.top-menu {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--paper-hard);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.top-menu a {
  color: var(--ink);
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.top-menu a:hover {
  border-bottom-color: var(--ink);
}
.site-header {
  margin: 4px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.header-top {
  flex: 0 0 100%;
}
.logo-link {
  display: inline-block;
  margin-right: 10px;
}
.logo-link img {
  display: block;
  max-width: 200px;
  margin: 0;
}
.site-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0 4px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.header-bottom {
  margin-left: auto;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.main-menu {
  font-family: var(--ui);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--wood);
}
.main-menu a {
  color: var(--ink);
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.main-menu a:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
}
.top-menu a[aria-current="page"],
.main-menu a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--accent);
}
.main-menu-elements {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.main-menu:has(+ .breadcrumbs) {
  margin-bottom: 0;
}
.below-main-menu {
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .main-menu-elements {
    margin-left: 0;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }
}

/* Breadcrumbs */
.breadcrumbs {
  padding: 0 10px;
  margin: 2px 0 0 0;
  color: var(--ink-weak);
}
.breadcrumbs ol {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  min-width: 0;
}
.breadcrumbs li {
  font-family: var(--ui);
  font-size: 0.86rem;
  font-style: italic;
  margin: 0;
  padding: 2px 2px 0 2px;
  border: none;
  white-space: nowrap;
}
.breadcrumbs li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 6px 0 2px;
  color: var(--ink-weak);
}
.breadcrumbs a {
  opacity: 0.8;
}
/* === CONTENT LAYOUT (WITH ASIDE) === */
main {
  padding-left: clamp(2px, 2vw, 16px);
  padding-right: clamp(2px, 2vw, 16px);
}
/* Default content wrap */
.content-wrap {
  display: block;
  margin-inline: auto;
}
/* Two-column grid when widgets exist */
.content-wrap.has-widgets {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
  gap: var(--stack-gap);
  align-items: start;
}
main {
  margin-inline: auto;
}
.content-wrap.has-widgets main {
  margin-inline: 0;
}
/* Mobile: stack columns */
@media (max-width: 980px) {
  .content-wrap.has-widgets {
    display: block;
  }
  .content-wrap.has-widgets > .widgets-section {
    margin-top: var(--stack-gap);
  }
}
/* Sidebar widgets */
.widgets-section {
  background: var(--background);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.widgets-section img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
}
.widgets-section a:has(> img) {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Mobile: disable stickiness */
@media (max-width: 980px) {
  .widgets-section {
    position: static;
  }
}
/* Below-main blocks (full width) */
.below-main,
.below-main-post {
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 16px 14px;
  box-shadow: var(--shadow);
  margin-top: var(--stack-gap);
}
/* Footer */
footer {
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 12px 10px;
  margin-top: var(--stack-gap);
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--ink-weak);
}
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.footer-menu span + span::before {
  content: "·";
  margin: 0 0.5em;
  opacity: 0.8;
}

/* === ARTICLE & LISTS === */
article :where(ul) {
  padding-inline-start: 2ch;
}
article :where(ol) {
  padding-inline-start: 2.5ch;
}
.list-article {
  border: 1px solid var(--line);
  padding: var(--space-4);
  background: var(--paper-soft);
}
/* Author/Time/Category strip */
.meta-strip {
  font-family: var(--ui);
  letter-spacing: 0.04em;
  font-size: 0.86rem;
  color: var(--ink-weak);
  margin: 0.2rem 0 0.4rem 0;
}
.meta-strip .meta-strip-item:not(:last-child)::after {
  content: " | ";
  color: var(--ink-weak);
}
/* Author & Category blocks */
.author-box,
.author-header,
.category-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: var(--space-3) 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
}
.author-avatar,
.author-header .author-image,
.category-header .category-image {
  flex: 0 0 auto;
}
.author-avatar img,
.author-header .author-image img {
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid var(--rule);
}
.category-header .category-image img {
  display: block;
  max-width: 200px;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.author-meta,
.author-header .author-biography,
.category-header .category-description {
  flex: 1;
  margin: 0;
  padding: 0;
}
.author-name,
.category-name {
  font-weight: bold;
}
.author-name a,
.category-name a {
  text-decoration: none;
}
.author-biography,
.category-description {
  padding: 10px;
}
/* === PAGINATION === */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 4px;
  max-width: 100%;
  font-family: var(--ui);
}
.pagination a,
.pagination strong {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-soft);
}
.pagination a:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
}
.pagination strong {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.pagination .prev a::before {
  content: "← ";
  opacity: 0.8;
  margin-right: 0.1em;
}
.pagination .next a::after {
  content: " →";
  opacity: 0.8;
  margin-left: 0.1em;
}
/* === POST NAV (prev/next) === */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--stack-gap);
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
}
.post-nav .prev-post,
.post-nav .next-post {
  width: 100%;
}
.post-nav .prev-post {
  text-align: left;
}
.post-nav .next-post {
  text-align: right;
}

/* When only one of prev/next exists, let it occupy the full row
   while keeping its left/right alignment. */
.post-nav:not(:has(.prev-post)) .next-post,
.post-nav:not(:has(.next-post)) .prev-post {
  grid-column: 1 / -1;
}
.post-nav:not(:has(.prev-post)) .next-post {
  justify-self: end;
}
.post-nav:not(:has(.next-post)) .prev-post {
  justify-self: start;
}

.post-nav .prev-post a::before {
  content: "← ";
  opacity: 0.8;
  margin-right: 0.25em;
}
.post-nav .next-post a::after {
  content: " →";
  opacity: 0.8;
  margin-left: 0.25em;
}
/* === POSTS GRID (horizontal order) === */
.post-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

.post-container > article {
  width: 100%;
}

.post-container > article img {
  width: 100%;
  height: auto;
}

/* responsive */
@media (max-width: 768px) {
  .post-container {
    grid-template-columns: 1fr;
  }
}

/* === GRID VARIANTS === */
.post-container-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

@media (max-width: 768px) {
  .post-container-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 556px) {
  .post-container-3 {
    grid-template-columns: 1fr;
  }
}

.post-container-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

@media (max-width: 768px) {
  .post-container-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 556px) {
  .post-container-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .post-container-4 {
    grid-template-columns: 1fr;
  }
}
/* === BUTTONS === */
.btn,
.button,
button,
.read-more,
input[type="submit"] {
  font-family: var(--ui);
  font-size: 0.95rem;
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover,
.button:hover,
button:hover,
.read-more:hover,
input[type="submit"]:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
.btn.primary,
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
article .btn,
article .button,
article button {
  margin: var(--space-2);
}
.read-more {
  display: block;
  width: 100%;
  text-align: center;
}
.copy-btn {
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: var(--ui);
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 2; /* sit above code content */
  opacity: 0.92;
  transition:
    opacity 0.15s ease-in-out,
    background 0.15s ease-in-out;
}
.copy-btn:hover {
  opacity: 1;
  background: var(--accent-weak);
  border-color: var(--accent);
}
/* === FORMS === */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-family: var(--ui);
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 1rem;
}
::placeholder {
  color: var(--placeholder);
}
.site-search-widget {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0.1rem;
}
.site-search-widget input[type="search"],
.site-search-widget button {
  padding: 6px 8px;
  font-size: 0.95rem;
}
.site-search-widget button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--paper);
}
@media (max-width: 768px) {
  .site-search-widget {
    max-width: 420px;
  }
}
textarea {
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--accent);
}
.feminized,
.regular,
.amazon {
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0px 0px 2px 0px #333;
  color: white;
  vertical-align: middle;
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  margin: var(--space-3) var(--space-1);
  border-radius: 4px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.feminized:hover,
.regular:hover,
.amazon:hover {
  text-decoration: none;
  color: white;
}
.feminized {
  border: 2px solid #fa0fdd;
  background-color: #78256a;
}
.feminized:hover {
  background-color: #9e1476;
}
.regular {
  border: 2px solid #FA5B0F;
  background-color: #7e4828;
}
.regular:hover {
  background-color: #9e5914;
}
.amazon {
  border: 2px solid #ff9900;
  background-color: #ec510c;
}
.amazon:hover {
  background-color: #d03e05;
}
.feminized::after,
.regular::after,
.amazon::after {
  content: " →";
}
.table-button {
  padding: var(--space-1);
  margin: 0;
  min-width: 100px;
}
td .table-button {
  text-align: center;
}
td:has(.table-button) {
  vertical-align: middle;
}
/* === IMAGES & FIGURES === */
img {
  max-width: 100%;
  height: auto;
}
/* Framed content images */
article img,
figure > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--rule);
}
.featured-image {
  display: block;
  width: 100%;
}
.hover-image {
  border: 1px solid var(--rule);
}
.hover-image:hover {
  border-color: var(--accent);
}
figure {
  max-width: 100%;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px;
}
figcaption,
.figure > .caption {
  contain: inline-size;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--rule-weak);
  text-align: center;
  font-family: var(--ui);
  font-size: 0.92rem;
}
/* === IMAGE & FIGURE ALIGNMENT (TinyMCE classes) === */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-justify {
  text-align: justify;
  text-justify: inter-word;
}
figure.image.align-left,
img.align-left {
  float: left;
  margin: 0 var(--space-4) var(--space-4) 0;
}
figure.image.align-right,
img.align-right {
  float: right;
  margin: 0 0 var(--space-4) var(--space-4);
}
figure.image.align-center,
img.align-center {
  margin-left: auto;
  margin-right: auto;
}
figure.align-justify figcaption {
  text-align: justify;
  text-justify: inter-word;
}
@media (max-width: 768px) {
  figure.image.align-left,
  figure.image.align-right,
  img.align-left,
  img.align-right {
    float: none;
    margin: 0 auto var(--space-4);
  }
}
.post-article a:has(> img) {
  display: block;
  width: fit-content;
  max-width: 100%;
}
.post-article a:has(> img.align-center) {
  margin-left: auto;
  margin-right: auto;
}
.post-article a:has(> img.align-left),
.post-article a:has(> img.align-right) {
  display: inline;
}
/* === UTILITIES === */
.block {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px;
}
.embed {
  text-align:center;
  display:flex;
  justify-content:center;
}
/* 404 page tweaks */
.error-container {
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 24px;
}
/* Accessibility */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
/* === TYPOGRAPHY HELPERS === */
.font {
  font-family: var(--font);
}
.font-ui {
  font-family: var(--ui);
}
.font-mono {
  font-family: var(--mono);
}
/* Anchored headings */
article h2,
article h3 {
  position: relative;
  scroll-margin-top: 80px;
}
article h2:hover a.anchor,
article h3:hover a.anchor {
  opacity: 1;
}
a.anchor {
  position: absolute;
  left: -0.7em;
  top: 0;
  opacity: 0;
  text-decoration: none;
  font-family: var(--ui);
  color: var(--ink-weak);
}
/* Tables */
table {
  border-collapse: collapse;
  padding-bottom: 2px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--line);
}
th {
  font-weight: 500;
}
th,
td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  vertical-align: top;
}
thead th {
  background: var(--paper-hard);
}
/* Blockquotes */
blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 4px solid var(--line);
  background: var(--paper-soft);
}
/* Callouts */
.callout {
  border: 1px solid var(--line);
  padding: 12px;
  background: var(--paper-soft);
}
.callout.info {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.callout.warn {
  border-color: #a76b00;
  background: #fff3d6;
}
.callout.note {
  border-color: #6b654f;
  background: #f7f3e4;
}
/* kbd */
kbd {
  border: 1px solid var(--line);
  background: var(--field);
  padding: 0 0.3em;
  font-family: var(--mono);
  font-size: 0.92em;
}
/* === RESPONSIVE (global trims) === */
@media (max-width: 980px) {
  .main-menu,
  .top-menu {
    gap: 8px;
  }
  .content-wrap.has-widgets {
    display: block;
  }
  .widgets-section {
    position: static;
  } /* ensure no sticky styles carry over */
}
@media (max-width: 768px) {
  .page-article,
  .post-article {
    padding: 1px;
  }
  .author-box,
  .author-header,
  .category-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .author-avatar img,
  .author-header .author-image img,
  .category-header .category-image img {
    margin: 0 auto;
  }
  .category-header .category-image img {
    max-width: 100%;
  }
}
/* === THEME TOGGLE BUTTON === */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
  padding: 6px 10px;
}
.theme-toggle__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}
.theme-toggle__sun {
  display: none;
}
.theme-toggle__moon {
  display: inline;
}
html.theme-dark .theme-toggle__sun {
  display: inline;
}
html.theme-dark .theme-toggle__moon {
  display: none;
}
/* Explicit light should behave like auto-light: show moon */
html.theme-light .theme-toggle__sun {
  display: none;
}
html.theme-light .theme-toggle__moon {
  display: inline;
}
.header-bottom .theme-toggle {
  margin-left: 0;
  gap: 10px;
  flex: 0 0 auto;
}

/* === Simple TOC === */
.simple-toc {
  margin: var(--space-4) 0;
  padding: 0;
  font-family: var(--ui);
}
.simple-toc details {
  margin: 0;
}
.simple-toc-title,
.simple-toc summary {
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0;
}
/* Remove excess spacing around the list container */
.simple-toc-content,
.simple-toc details > div {
  margin-top: var(--space-2);
}
/* Reset default browser padding */
.simple-toc ol {
  margin: 0;
  list-style-position: inside;
  padding: 0;
}
.simple-toc ul {
  margin: 0;
  padding-left: 1em;
}
/* Tighten list items */
.simple-toc li {
  margin: 0.15em 0;
  padding: 0;
  line-height: 1.35;
}
/* Nested lists: minimal extra indent */
.simple-toc ol ol,
.simple-toc ul ul,
.simple-toc ol ul,
.simple-toc ul ol {
  margin-top: 0.15em;
  padding-left: 1em;
}
/* === recentposts widget === */
.widgets-section .recentposts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.widgets-section .recentposts__item {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.widgets-section .recentposts__entry {
  background: var(--paper);
}
.widgets-section .recentposts__link {
  display: grid;
  grid-template-areas: "img" "title";
  gap: 0;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid var(--rule);
}
.widgets-section .recentposts__link--img-below {
  grid-template-areas: "title" "img";
}
.widgets-section .recentposts__img {
  grid-area: img;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* aspect-ratio: 16 / 10; CLS Test*/
}
.widgets-section .recentposts__title {
  grid-area: title;
  display: block;
  font-family: var(--ui);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 6px;
  background: var(--paper-soft);
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  hyphens: none;
  word-break: normal;
  overflow-wrap: anywhere;
}
.widgets-section .recentposts__entry:hover .recentposts__link {
  background: var(--accent-weak);
  border-color: var(--accent);
}
.widgets-section .recentposts__link:hover .recentposts__title {
  background: transparent;
}
.widgets-section
  .recentposts__entry:not(:has(.recentposts__link))
  .recentposts__title {
  border: 1px solid var(--rule);
}
.widgets-section
  .recentposts__entry:not(:has(.recentposts__link)):hover
  .recentposts__title {
  background: var(--accent-weak);
  border-color: var(--accent);
}
.widgets-section .recentposts__title:focus-visible,
.widgets-section .recentposts__link:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
@media (max-width: 980px) {
  .widgets-section .recentposts__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .widgets-section .recentposts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 400px) {
  .widgets-section .recentposts__list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.widgets-section .recentposts__date {
  display: block;
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink-weak);
  padding: 4px 6px;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widgets-section .recentposts__date:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
@media (max-width: 980px) {
  .widgets-section .recentposts__date {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (max-width: 556px) {
  .widgets-section .recentposts__date {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
  }
}
/* Homepage */
[data-is-homepage="1"] article h1 {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 0;
} 
[data-is-homepage="1"] article h2 {
  font-size: 1.25rem;
  font-weight: 400;
}
[data-is-homepage="1"] article h3 {
  font-size: 1.2rem;
  font-weight: 400;
}
.home-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0.3em;
}
.home-grid-item {
  text-align: center;
  border: 1px solid var(--line);
}
.home-grid-item:hover {
  border: 1px solid var(--accent);
}
.home-grid-image {
  display: block;
  padding: var(--space-3) var(--space-1);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.25;
}
.home-grid-image:hover {
  color: var(--ink);
  background: var(--accent-weak);
}
.home-grid-image img {
  border: none;
  padding: var(--space-3) 0;
}