@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  /* Default content width was 840px; widened ~1.5x. */
  --content-max: 1260px;

  /* Brand (must be the same in light/dark). */
  --brand-mauve: #c7a3c9;

  /*
    Theme tokens (dark defaults).
    Light mode overrides live in `.theme-light` below.
  */
  --bg-gradient-start: #2a2640;
  --bg-gradient-mid: #171827;
  --bg-gradient-end: #121321;

  --text-color: #e9e7ff;
  --text-muted: rgba(233, 231, 255, 0.82);
  --text-subtle: rgba(233, 231, 255, 0.7);

  --heading-color: rgba(255, 242, 168, 0.92);
  --accent-purple: #cbb6ff;

  --link-color: #8bb3ff;
  --link-hover-color: #ffffff;
  --link-hover-shadow: 0 0 10px rgba(139, 179, 255, 0.35);

  --panel-bg: rgba(255, 255, 255, 0.04);
  --panel-bg-subtle: rgba(255, 255, 255, 0.03);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-border-strong: rgba(255, 255, 255, 0.12);
  --panel-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);

  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.12);

  --icon-surface-bg: rgba(255, 242, 168, 0.92);
  --icon-surface-border: rgba(255, 242, 168, 0.55);
  --icon-fg: #ff4d4d;
  --icon-fg-hover: #ff2f2f;

  --accent-green-bg: rgba(178, 255, 178, 0.2);
  --accent-green-border: rgba(178, 255, 178, 0.55);

  --focus-ring: rgba(203, 182, 255, 0.65);
  --focus-ring-strong: rgba(203, 182, 255, 0.75);

  --code-bg: rgba(255, 255, 255, 0.08);
  --code-color: #f7f6ff;

  --cta-bg: rgba(255, 242, 168, 0.92);
  --cta-bg-hover: rgba(255, 242, 168, 1);
  --cta-border: rgba(255, 242, 168, 0.55);
  --cta-border-hover: rgba(255, 242, 168, 0.75);
  --cta-fg: #171827;

  /* Legacy tokens (kept for compatibility with older styles). */
  --sticky-cta-bg: #007acc;
  --sticky-cta-bg-hover: #005fa3;

  /* Hover highlight accent (keeps the dark theme but makes hover states obvious). */
  --hover-accent-bg: rgba(203, 182, 255, 0.18);
  --hover-accent-border: rgba(203, 182, 255, 0.45);
  --hover-accent-shadow: 0 0 0 3px rgba(203, 182, 255, 0.14);

  /* Buttons / CTAs (explicit contrast across themes). */
  --primary-btn-bg: #2563eb;
  --primary-btn-bg-hover: #1e40af;
  --primary-btn-fg: #ffffff;

  /*
    Global sizing for button-like components.
    0.75 => ~75% of previous size (font + height).
    NOTE: `.scroll-top` is intentionally excluded from this scaling.
  */
  --btn-scale: 0.75;
}

.theme-light {
  --bg-gradient-start: #f3f6ff;
  --bg-gradient-mid: #ffffff;
  --bg-gradient-end: #eef2ff;

  --text-color: #1f2937;
  --text-muted: rgba(31, 41, 55, 0.82);
  --text-subtle: rgba(31, 41, 55, 0.65);

  --heading-color: #6d28d9;
  --accent-purple: #6d28d9;

  --link-color: #2563eb;
  --link-hover-color: #1d4ed8;
  --link-hover-shadow: none;

  --panel-bg: rgba(255, 255, 255, 0.7);
  --panel-bg-subtle: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(31, 41, 55, 0.12);
  --panel-border-strong: rgba(31, 41, 55, 0.18);
  --panel-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);

  --input-bg: rgba(17, 24, 39, 0.04);
  --input-border: rgba(17, 24, 39, 0.12);

  --icon-surface-bg: rgba(250, 204, 21, 0.28);
  --icon-surface-border: rgba(250, 204, 21, 0.5);
  --icon-fg: #b91c1c;
  --icon-fg-hover: #991b1b;

  --accent-green-bg: rgba(34, 197, 94, 0.12);
  --accent-green-border: rgba(34, 197, 94, 0.35);

  --focus-ring: rgba(37, 99, 235, 0.55);
  --focus-ring-strong: rgba(37, 99, 235, 0.7);

  --code-bg: rgba(17, 24, 39, 0.06);
  --code-color: #111827;

  --cta-bg: rgba(250, 204, 21, 0.35);
  --cta-bg-hover: rgba(250, 204, 21, 0.45);
  --cta-border: rgba(250, 204, 21, 0.55);
  --cta-border-hover: rgba(250, 204, 21, 0.75);
  --cta-fg: #111827;

  /* Legacy tokens (kept for compatibility with older styles). */
  --sticky-cta-bg: #2563eb;
  --sticky-cta-bg-hover: #1d4ed8;

  --hover-accent-bg: rgba(99, 102, 241, 0.12);
  --hover-accent-border: rgba(99, 102, 241, 0.25);
  --hover-accent-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);

  /* Keep consistent CTA contrast in light mode too. */
  --primary-btn-bg: #2563eb;
  --primary-btn-bg-hover: #1e40af;
  --primary-btn-fg: #ffffff;
}

html.theme-dark {
  color-scheme: dark;
}

html.theme-light {
  color-scheme: light;
}

body {
  font-family: 'Inter', sans-serif;
  /* Stellody-esque dark theme */
  background: radial-gradient(
    circle at top left,
    var(--bg-gradient-start),
    var(--bg-gradient-mid) 60%,
    var(--bg-gradient-end)
  );
  color: var(--text-color);
  font-size: 20px;
  line-height: 1.8;
  padding: 64px 32px;
  margin: 0;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  text-rendering: optimizeLegibility;
}

/* Slightly tighter global top padding so sidebar + main content start higher. */
@media (min-width: 861px) {
  body {
    padding-top: 48px;
  }
}

/* Homepage: tighten the header stack so the landing content starts higher. */
body.is-homepage {
  padding-top: 36px;
}

body.is-homepage .header-topbar {
  margin-bottom: 8.8px;
}

body.is-homepage .site-header {
  margin-bottom: 20px;
}

body.is-homepage .header-cta {
  margin: -12px 0 20px;
}

/* Ensure full-width page layout containers can exceed the content max-width
   while keeping the main content column aligned with existing sizing. */
.page-layout {
  width: 100%;
}

.page-main {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Read time (post pages only; the element is present globally but stays hidden unless .post-content exists) */
.read-time-bar {
  margin: 0 0 12px;
}

/* Homepage: hide the read-time bar entirely so the hero panel top aligns with the sidebar top. */
body.is-homepage .read-time-bar {
  display: none;
}

.read-time {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 5.6px 9.6px;
  border-radius: 999px;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  color: var(--text-subtle);
  font-size: 14.4px;
}

/* Ensure the HTML `hidden` attribute always wins over `.read-time { display: … }`.
   This prevents a visible flash of “Calculating…” before JS sets the final value. */
.read-time[hidden] {
  display: none !important;
}

/* Sidebar layout: desktop = left sidebar + content; mobile = sidebar above content */
.page-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  padding: 16px;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);

  /* Allow a bottom CTA to sit naturally after the menu items. */
  display: flex;
  flex-direction: column;
}

/* Sidebar sticky CTA: appears under the left menu items. */
.sidebar-sticky-cta {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

.sidebar-title {
  margin: 0 0 12px;
  font-size: 17.6px;
  color: var(--brand-mauve);
}

.sidebar-link {
  display: block;
  padding: 7.2px 9.6px;
  border-radius: 12px;
  color: var(--text-muted);
  /* Prevent hover layout shift (Fedora Firefox): keep box metrics identical. */
  box-sizing: border-box;
  border: 1px solid transparent;
}

/* Sidebar: allow 2-line labels without awkward justification/wrapping */
.sidebar-link {
  display: flex;
  align-items: flex-start;
  gap: 8.8px;
}

.sidebar-link__icon {
  flex: 0 0 auto;
  width: 1.2em;
  line-height: 1.2;
  margin-top: 0.8px;
}

.sidebar-link__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-link__text-main {
  line-height: 1.25;
}

.sidebar-link__text-sub {
  line-height: 1.15;
  opacity: 0.85;
}

/* For the special All-posts link, right-align the sub-label so it sits to the
   right of the main label on the same line. */
.sidebar-link--all-posts .sidebar-link__text {
  flex-direction: row;
  align-items: baseline;
  gap: 6.4px;
  flex-wrap: nowrap;
}

.sidebar-link--all-posts .sidebar-link__text-main,
.sidebar-link--all-posts .sidebar-link__text-sub {
  white-space: nowrap;
}

.sidebar-link--all-posts .sidebar-link__text-sub {
  font-size: 0.92em;
  opacity: 0.85;
}

.sidebar-link:hover {
  background: linear-gradient(
    90deg,
    var(--hover-accent-bg),
    rgba(139, 179, 255, 0.10)
  );
  border-color: var(--hover-accent-border);
  box-shadow: var(--hover-accent-shadow);
  text-shadow: none;
}

.sidebar-link.is-active {
  background: var(--accent-green-bg);
  border: 1px solid var(--accent-green-border);
  color: var(--text-color);
}

/* Nested sidebar layers (subcategory links) */
.sidebar-link--layer {
  padding-left: 22px;
  font-size: 0.96em;
  opacity: 0.95;
}

/* Sidebar: section header links (e.g. Decision Architecture / Patterns). */
.sidebar-link--section {
  margin: 6px 0 6px;
  font-weight: 800;
  color: var(--text-color);
}

.sidebar-link--section .sidebar-link__text {
  gap: 0;
}

.sidebar-layer-bullet {
  flex: 0 0 auto;
  width: 1.2em;
  color: var(--text-muted);
}

.sidebar-layer-text {
  min-width: 0;
}

/* Homepage: leadership layer grouping */
.featured-group {
  width: 100%;
  margin: 8px 0 12px;
}

.featured-group-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--text-muted);
}

.featured-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sidebar-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  color: var(--cta-fg);
  padding: 7.2px 12.8px;
  border-radius: 12px;
  z-index: 1000;
}

.skip-link:focus {
  left: 12px;
}

@media (max-width: 860px) {
  body {
    padding: 44px 16px;
  }

  .header-layout {
    grid-template-columns: 1fr;
  }

  .header-gutter {
    display: none;
  }

  .header-topbar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .header-topbar--masthead {
    gap: 12px;
  }

  .page-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}

/* Top-of-page call to action */
.top-links {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: -40px auto 24px;
}

/* Header layout aligned with the main content column (accounts for the sidebar). */
.header-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

.header-main {
  width: 100%;
}

.header-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding-top: 4px;
}

.header-email-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Place back-link under the email in the left gutter (post pages). */
.back-link--gutter {
  display: block;
  margin: 6px 0 0;
  font-size: 14.4px;
  color: var(--text-subtle);
  text-align: left;
  line-height: 1.2;
}

.back-link--gutter:hover {
  color: var(--link-hover-color);
  text-shadow: var(--link-hover-shadow);
}

/* Header email + GitHub link (quiet credibility signal; avoid button styling). */

.header-github-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.15s ease;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  border-radius: 4px;
}

/* Header social icons: match the header email button height. */
.header-social-link {
  /* Match the header icon buttons on the right (52px square). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(52px * var(--btn-scale));
  height: calc(52px * var(--btn-scale));
  padding: 0;
  border-radius: 8px;
  background: var(--cta-bg-hover);
  border: 1px solid var(--cta-border-hover);
  box-sizing: border-box;
  /* GitHub SVG uses currentColor; make it dark in the default state. */
  color: #111827;
  /* Ensure the background matches other CTA surfaces (avoid inherited fade). */
  opacity: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.15s ease;
}

.header-social-link:hover,
.header-social-link:focus-visible {
  background: var(--brand-mauve);
  border-color: color-mix(in srgb, var(--brand-mauve) 72%, white);
  color: #111827;
  opacity: 1;
  box-shadow: 0 14px 30px rgba(203, 182, 255, 0.18);
}

.header-social-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.header-github-link:hover,
.header-github-link:focus-visible {
  opacity: 1;
}

.header-github-link svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.header-social-link svg,
.header-social-link img {
  display: block;
  width: calc(24px * var(--btn-scale));
  height: calc(24px * var(--btn-scale));
}

.header-email-link {
  color: var(--link-color);
}

.header-email-link:hover {
  color: var(--link-hover-color);
  text-shadow: var(--link-hover-shadow);
}

/* Header email should look like a compact button (but still behaves like a link). */
.header-email-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match the header icon buttons on the right (52px tall). */
  height: calc(52px * var(--btn-scale));
  padding: 0 calc(14px * var(--btn-scale));
  border-radius: 8px;
  background: var(--cta-bg-hover);
  border: 1px solid var(--cta-border-hover);
  color: var(--cta-fg);
  text-decoration: none;
  line-height: 1;
  text-shadow: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.header-email-button:hover {
  background: var(--brand-mauve);
  border-color: color-mix(in srgb, var(--brand-mauve) 72%, white);
  color: #111827;
  box-shadow: 0 14px 30px rgba(203, 182, 255, 0.18);
}

.header-email-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.header-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Masthead: breadcrumbs | big title | CTA + icons */
.header-topbar--masthead {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 10px;
}

/* Breadcrumbs aligned with the content panel (right column). */
.breadcrumb-bar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 8px;
}

/* Visual separation between the masthead and the quick-link pills. */
.masthead-separator {
  height: 1px;
  background: rgba(178, 255, 178, 0.38);
  box-shadow: 0 0 0 1px rgba(178, 255, 178, 0.08);
  margin: 10px 0 14px;
  border-radius: 999px;
}

.header-topbar-left {
  /* Left slot is intentionally empty; breadcrumbs moved to `.breadcrumb-bar`. */
  justify-self: start;
  min-height: 44px;
}

.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.6px;
  color: var(--text-muted);
  line-height: 1.2;
  /* Keep to a single tidy line; truncate rather than wrapping per-word. */
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-link {
  color: var(--link-color);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--link-hover-color);
  text-shadow: var(--link-hover-shadow);
}

.breadcrumb-current {
  color: var(--text-muted);
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-sep {
  opacity: 0.7;
}

.back-link--topbar {
  /* legacy: no longer used */
  margin: 0;
  padding: 0;
}

.header-topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
}

/*
  Mobile contact cluster (Email / GitHub / LinkedIn)
  - Desktop uses the left gutter. On mobile we render an additional cluster
    inside the topbar actions row.
*/
.header-topbar-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-contact--mobile {
  display: none;
}

.header-actions--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Header CTA removed (was too noisy); keep layout stable without it. */

/* Quick links row under the masthead (kept calm + compact). */
.header-about-row {
  margin: 0 0 14px;
}

.header-about-wrap {
  justify-self: center;
}

/* Icon cluster (top-right): favicon above RSS (aligned right), search next to RSS below */
.header-actions {
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "theme home"
    "search rss";
  gap: 8px;
  align-items: center;
}

/*
  Header corner icons (theme / home / search / RSS)
  - Default state should be clearly visible (banana-yellow).
  - Hover state should switch to brand mauve for a crisp, interactive affordance.
*/
.header-actions .icon-btn,
.header-actions .rss-link,
.header-actions .home-favicon-link {
  opacity: 1;
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.header-actions .icon-btn:hover,
.header-actions .rss-link:hover,
.header-actions .home-favicon-link:hover {
  background: var(--brand-mauve);
  border-color: color-mix(in srgb, var(--brand-mauve) 72%, white);
  color: #111827;
  box-shadow: 0 14px 30px rgba(203, 182, 255, 0.18);
}

.header-actions .icon-btn:focus-visible,
.header-actions .rss-link:focus-visible,
.header-actions .home-favicon-link:focus-visible {
  opacity: 1;
}

/* Make search + RSS controls match the favicon (crank icon) size */
.header-actions .icon-btn,
.header-actions .rss-link {
  width: calc(52px * var(--btn-scale));
  height: calc(52px * var(--btn-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-actions .icon-btn {
  font-size: calc(24px * var(--btn-scale));
  line-height: 1;
}

.header-actions .rss-icon {
  width: calc(32px * var(--btn-scale));
  height: calc(32px * var(--btn-scale));
}

.header-actions .home-favicon-link {
  grid-area: home;
}

.header-actions .theme-toggle {
  grid-area: theme;
}

.header-actions .search-toggle {
  grid-area: search;
}

.header-actions .rss-link {
  grid-area: rss;
}

/* Home favicon in the topbar should match the original landing-page styling */
.header-home-link {
  position: static;
  transform: none;
  width: calc(64px * var(--btn-scale));
  height: calc(64px * var(--btn-scale));
}

.header-about-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.4px;
  flex-wrap: wrap;
}

/* (legacy) */
.header-top-links {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.top-about-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 6.4px 16px;
  border-radius: 999px;
  background: var(--accent-green-bg);
  border: 1px solid var(--accent-green-border);
  color: var(--text-color);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.top-favicon-link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Keep the icon's right edge aligned with the right edge of the header icons */
  width: calc(64px * var(--btn-scale));
  height: calc(64px * var(--btn-scale));
  padding: 0;
  border-radius: 12px;
  line-height: 0;
  /* Prevent hover layout shift: reserve border space in the base state. */
  box-sizing: border-box;
  border: 1px solid transparent;
}

.top-favicon-link:hover {
  background: var(--hover-accent-bg);
  border-color: var(--hover-accent-border);
  box-shadow: var(--hover-accent-shadow);
  text-shadow: none;
}

.top-favicon-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.top-favicon-icon {
  width: calc(64px * var(--btn-scale));
  height: calc(64px * var(--btn-scale));
  display: block;
  border-radius: 12px;
}

.top-about-link:hover {
  background: color-mix(in srgb, var(--accent-green-bg) 75%, transparent);
  color: var(--text-color);
  text-shadow: none;
}

.top-about-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Simple site header (title + RSS icon) */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

/* On post pages (back link present), align the title row with the email row:
   email | title | icons */
.header-layout--has-back .site-header {
  /* Keep the title truly centered even when a back link is present. */
  grid-template-columns: 1fr auto 1fr;
}

/* Do not offset the title on pages that show a back link. */
.header-layout--has-back .site-title-link {
  justify-self: center;
}

/* Ensure the site title styling is consistent even when rendered as a <span> */
.site-title {
  margin: 0;
  text-align: center;
  color: var(--brand-mauve);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.15;
}

.site-title-link {
  justify-self: center;
  color: inherit;
}

.site-title {
  margin: 0;
  text-align: center;
}

.header-spacer {
  min-width: 1px;
}

.site-title-link {
  justify-self: center;
  color: inherit;
}

.site-title-link:hover {
  color: inherit;
  text-shadow: none;
}

.site-header .back-link {
  justify-self: start;
}

.icon-btn,
.rss-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(40px * var(--btn-scale));
  height: calc(40px * var(--btn-scale));
  border-radius: calc(10px * var(--btn-scale));
/* Pale yellow background, red icon (foreground) */
  color: var(--icon-fg);
  background: var(--icon-surface-bg);
  border: 1px solid var(--icon-surface-border);
}

/* Home favicon button: top-right, rounded and 2x the RSS icon size */
.home-favicon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(52px * var(--btn-scale));
  height: calc(52px * var(--btn-scale));
  border-radius: calc(14px * var(--btn-scale));
  background: var(--icon-surface-bg);
  border: 1px solid var(--icon-surface-border);
}

.home-favicon-link:hover {
  background: var(--cta-bg-hover);
}

.home-favicon-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.home-favicon-icon {
  width: calc(52px * var(--btn-scale));
  height: calc(52px * var(--btn-scale));
  display: block;
  border-radius: 14px;
}

/* Home button: emoji instead of favicon image (favicon stays as the site icon). */
.home-favicon-emoji {
  font-size: calc(26px * var(--btn-scale));
  line-height: 1;
}

.icon-btn {
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: calc(18px * var(--btn-scale));
  line-height: 1;
}

.icon-btn:hover,
.rss-link:hover {
  color: var(--icon-fg-hover);
  background: var(--cta-bg-hover);
  text-shadow: none;
}

/* (removed) Duplicate `.header-actions` rules lived here and conflicted with the
   block above. Keep a single source of truth for these buttons. */

.icon-btn:focus-visible,
.rss-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Theme toggle icon fade (polish). */
.fade-icon {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.fade-icon.fade-out {
  opacity: 0;
}

.rss-icon {
  width: calc(26px * var(--btn-scale));
  height: calc(26px * var(--btn-scale));
  display: block;
}

.search-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -16px 0 32px;
  justify-content: center;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 9.6px;
  width: 100%;
  justify-content: center;
}

.about-section {
  margin: 0 0 40px;
  scroll-margin-top: 24px;
}

.about-content {
  text-align: left;
  padding: 20px 20px 4px;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

/* Battlestation page */
.battlestation {
  margin: 0 0 40px;
}

.battlestation-figure--spaced {
  margin-bottom: 32px;
}

.battlestation-photo-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}

.battlestation-photo-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.battlestation-image--centered {
  margin: 0 auto;
}

.battlestation-figure--printer {
  display: flex;
  justify-content: center;
  margin: 32px 0;
}

.battlestation-gallery {
  margin: 12px auto 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 860px) {
  .battlestation-gallery {
    grid-template-columns: 1fr;
  }
}

.battlestation-figure {
  margin: 0;
}

.battlestation-image {
  display: block;
  width: 100%;
  /* Do not crop battlestation images (some are portrait). */
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.battlestation-caption {
  margin-top: 8px;
  font-size: 14.4px;
  color: var(--text-subtle);
}

/* Ensure the `hidden` attribute always wins (overrides `.search-panel { display: flex; }`). */
.search-panel[hidden] {
  display: none !important;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 520px;
}

.search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  border-radius: 12px;
  border: 1px solid var(--panel-border-strong);
  background: var(--bg-gradient-end);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestions a {
  display: block;
  padding: 8.8px 12px;
  color: var(--text-color);
}

.search-suggestions a:hover {
  background: linear-gradient(
    90deg,
    var(--hover-accent-bg),
    rgba(255, 255, 255, 0.06)
  );
  text-shadow: none;
}

.search-suggestions .search-suggestion-sub {
  display: block;
  font-size: 14.4px;
  color: var(--text-subtle);
  margin-top: 1.6px;
}

.search-input {
  flex: 1;
  width: 100%;
  padding: 10.4px 13.6px;
  padding-right: 38.4px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-color);
}

.search-go {
  height: calc(42px * var(--btn-scale));
  padding: 0 calc(15.2px * var(--btn-scale));
  border-radius: calc(12px * var(--btn-scale));
  border: 1px solid var(--panel-border-strong);
  background: var(--primary-btn-bg);
  color: var(--primary-btn-fg);
  cursor: pointer;
  font: inherit;
  font-size: calc(1em * var(--btn-scale));
  font-weight: 700;
  line-height: 1;
}

.search-go:hover {
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
}

.search-go:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Hide the browser-provided clear (×) button so we only show our custom close icon. */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: calc(30px * var(--btn-scale));
  height: calc(30px * var(--btn-scale));
  border-radius: calc(10px * var(--btn-scale));
  border: 1px solid var(--panel-border-strong);
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.search-close:hover {
  color: var(--text-color);
  background: var(--panel-bg-subtle);
}

.search-close:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.search-input::placeholder {
  color: var(--text-subtle);
}

.search-input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 {
  /* Major titles must be brand mauve across light/dark. */
  color: var(--brand-mauve);
  font-weight: 700;
  margin-bottom: 24px;
}

/* Section headers (homepage) */
.section-title {
  text-align: center;
  margin: 0 0 16px;
}

.section-title--accent {
  /* Keep section titles on-brand. */
  color: var(--brand-mauve);
}

h1 {
  font-size: 38px;
}

h2 {
  font-size: 26px;
}

h3 {
  font-size: 22px;
}

p {
  margin-bottom: 32px;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/*
  Global focus ring
  - Ensures keyboard users always see where focus is.
  - Use :focus-visible to avoid showing the ring on mouse click.
*/
:where(a button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* If an element already has a custom focus ring, don't double-ring it. */
:where(a button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  box-shadow: none;
}

/*
  Link hover treatment
  - Use the same banana-yellow accent as buttons.
  - Avoid layout shift: no padding/line-height changes; use inset box-shadow.
  - Scope to content links to avoid overriding nav/button-like links.
*/
.page-main a:not(.btn-link):not(.cta-button):not(.header-cta-link):not(.sticky-cta):not(.tag):not(.sidebar-link):not(.breadcrumb-link):not(.site-title-link):not(.back-link):not(.book-cover-link):not(.books-compilation-card__link):hover {
  color: var(--cta-fg);
  text-decoration: none;
  text-shadow: none;
  box-shadow: inset 0 -1.1em 0 var(--cta-bg-hover);
  border-radius: 6px;
}

/* Light mode: use brand mauve for link hover highlight instead of banana yellow. */
html.theme-light .page-main a:not(.btn-link):not(.cta-button):not(.header-cta-link):not(.sticky-cta):not(.tag):not(.sidebar-link):not(.breadcrumb-link):not(.site-title-link):not(.back-link):not(.book-cover-link):not(.books-compilation-card__link):hover {
  color: #111827;
  box-shadow: inset 0 -1.1em 0 var(--brand-mauve);
}

ul {
  padding-left: 24px;
  margin-bottom: 32px;
}

/* Homepage: visually center the "How I Work" bullet list block within its panel,
   while keeping the list text left-aligned and bullets normal. */
.section-panel--how-i-work .how-i-work-list {
  margin: 0 auto;
  max-width: 60ch;
  padding-left: 18px;
  text-align: left;
}

/* Homepage: portfolio entry point should align with the centered list block. */
.section-panel--how-i-work .how-i-work-portfolio {
  margin: 10px auto 0;
  max-width: 60ch;
  text-align: left;
  color: var(--text-muted);
}

/* Homepage Featured card: one-line context + slightly reduced empty feel. */
.section-panel--featured {
  padding-top: 14.4px;
  padding-bottom: 16.8px;
}

.section-panel--featured .featured-lede {
  margin: 0 0 12px;
  color: var(--text-muted);
}

small {
  display: block;
  margin: 8px 0 16px;
  color: var(--text-subtle);
}

code {
  background: var(--code-bg);
  color: var(--code-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.2px;
}

pre {
  background: var(--input-bg);
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 32px;
  font-size: 15.2px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
}

img {
  max-width: 100%;
  height: auto;
}

/* Center images inside post bodies (markdown-rendered) */
.post-content img {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: var(--content-max);
}

/* Markdown tables (used in posts like Calendifier). */
.post-content table,
.about-content table {
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 32px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  overflow: hidden;
  display: table;
  -webkit-overflow-scrolling: touch;
}

/* Keep long tables usable on smaller screens. */
@media (max-width: 860px) {
  .post-content table,
  .about-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

.post-content thead th,
.about-content thead th {
  text-align: left;
  font-weight: 700;
  padding: 10.4px 13.6px;
  background: var(--input-bg);
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-color);
  white-space: nowrap;
}

.post-content tbody td,
.about-content tbody td {
  padding: 9.6px 13.6px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-muted);
  vertical-align: top;
}

.post-content tbody tr:nth-child(2n) td,
.about-content tbody tr:nth-child(2n) td {
  background: var(--panel-bg-subtle);
}

.post-content tbody tr:last-child td,
.about-content tbody tr:last-child td {
  border-bottom: 0;
}

/* Inline icons inside post bodies should behave like emoji-sized glyphs. */
.post-content img.inline-icon {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  margin: 0 6.4px 0 0 !important;
  vertical-align: -0.2em;
  border-radius: 4px;
}

.post-cover-link {
  display: block;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.post-cover {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  border-radius: 14px;
  border: 0;
  box-shadow: none;
  margin: 8px auto 20px;
}

/* Post page: additional images from frontmatter `extra_images` */
.post-extra-images {
  width: 100%;
  max-width: var(--content-max);
  margin: 8px auto 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.post-extra-image {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
}

.tag {
  display: inline-block;
  background: color-mix(in srgb, var(--link-color) 14%, transparent);
  color: var(--link-color);
  padding: 6.4px 12.8px;
  margin: 4.8px 8px 4.8px 0;
  border-radius: 999px;
  font-size: 13.6px;
  /* Preserve author casing (e.g. `cat:Tools`, `Web APIs`). */
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid color-mix(in srgb, var(--link-color) 30%, transparent);
  transition: background 0.3s ease;
}

.tag:hover {
  background: color-mix(in srgb, var(--link-color) 20%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

a[href=\"/\"] {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 14.4px;
  color: var(--text-subtle);
}

/* Back link inside header should not create extra spacing */
.site-header .back-link {
  display: inline-block;
  margin-bottom: 0;
  font-size: 14.4px;
  color: var(--text-subtle);
}

/* Center the post title button + tags/meta but keep body/content left-aligned */
.post-heading {
  text-align: center;
}

.post-heading > h1,
.post-heading > p,
.post-heading > small {
  margin-left: auto;
  margin-right: auto;
}

/* Homepage-only: center the post summary text under the title/tags */
.post-summary {
  text-align: center;
}

/* AxisDB: left-align the “server starts at” note (blockquotes are centered elsewhere). */
.axisdb-run-note {
  text-align: left;
  /* Remove default blockquote indent so it aligns with the H1 left edge. */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  border-left: 0;
}

.axisdb-run-note p {
  margin: 0 0 5.6px;
}

.axisdb-run-note__url {
  display: inline-flex;
  align-items: center;
  gap: 8.8px;
}

.axisdb-run-note .code-copy--icon {
  width: calc(42px * var(--btn-scale));
  height: calc(32px * var(--btn-scale));
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.axisdb-run-note .code-copy__icon {
  width: calc(18px * var(--btn-scale));
  height: calc(18px * var(--btn-scale));
  fill: rgba(233, 231, 255, 0.88);
}

.axisdb-run-note .code-copy--icon[data-copied="true"] {
  background: rgba(178, 255, 178, 0.22);
  border-color: rgba(178, 255, 178, 0.55);
}

.axisdb-run-note .code-copy--icon[data-copied="true"] .code-copy__icon {
  fill: rgba(233, 231, 255, 0.98);
}

/* Ensure the URL is not given extra “inline code pill” padding in this specific note. */
.axisdb-run-note__url code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2.4px 7.2px;
  border-radius: 8px;
}

/* One-off: center content for the Hello Crank post only */
.post-content--centered {
  text-align: center;
}

.post-content--centered p,
.post-content--centered ul,
.post-content--centered ol {
  margin-left: auto;
  margin-right: auto;
}

/* Homepage: divider between posts */
.post-separator {
  height: 3px;
  border: 0;
  background: color-mix(in srgb, var(--accent-green-border) 85%, transparent);
  margin: 32px 0;
  border-radius: 999px;
}

a[href=\"/\"]:hover {
  color: var(--link-hover-color);
  text-shadow: var(--link-hover-shadow);
}

.site-header .back-link:hover {
  color: var(--link-hover-color);
  text-shadow: var(--link-hover-shadow);
}

/* Button-styled links */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(56px * var(--btn-scale));
  background: var(--primary-btn-bg);
  color: var(--primary-btn-fg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: calc(12.5px * var(--btn-scale)) calc(21.6px * var(--btn-scale));
  font-weight: 700;
  font-size: calc(1em * var(--btn-scale));
  line-height: 1.2;
  box-shadow: 0 12px 26px rgba(139, 179, 255, 0.18);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

/* Homepage “All” button: slightly wider while keeping the same base button styling. */
.btn-link--all {
  padding-left: calc(24.8px * var(--btn-scale));
  padding-right: calc(24.8px * var(--btn-scale));
  min-width: calc(88px * var(--btn-scale));
}

/* Homepage “All” button: slightly wider while keeping the same base button styling. */
.btn-link--all {
  padding-left: calc(24.8px * var(--btn-scale));
  padding-right: calc(24.8px * var(--btn-scale));
  min-width: calc(88px * var(--btn-scale));
}

/* Button links with tiny thumbnails */
.btn-link--with-thumb {
  display: inline-flex;
  align-items: center;
  gap: calc(12.8px * var(--btn-scale));
}

/* Compact button variant (used for dense navigation rows like Start Here themes). */
.btn-link--compact {
  min-height: calc(46px * var(--btn-scale));
  padding: calc(10px * var(--btn-scale)) calc(18px * var(--btn-scale));
}

.btn-thumb {
  width: calc(56px * var(--btn-scale));
  height: calc(56px * var(--btn-scale));
  border-radius: calc(12px * var(--btn-scale));
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Emoji thumbnail variant (used when we want an emoji instead of an image) */
.btn-thumb--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(38px * var(--btn-scale));
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Dual-emoji thumbnails: keep glyphs side-by-side and avoid line wrapping. */
.btn-thumb--emoji-multi {
  gap: calc(2px * var(--btn-scale));
  white-space: nowrap;
}

.btn-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-subtext {
  display: block;
  margin-top: calc(3.2px * var(--btn-scale));
  font-size: calc(13.6px * var(--btn-scale));
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-muted);
}

/* On hover buttons switch to banana-yellow. Ensure the subtext remains readable
   (dark) in *both* themes instead of staying light/washed out in dark mode. */
.btn-link:hover .btn-subtext {
  color: rgba(17, 24, 39, 0.82);
}

.post-one-liner {
  margin: 5.6px 0 0;
  font-size: 15.2px;
  line-height: 1.3;
  color: var(--text-muted);
}

/* Center the primary featured button's text stack */
.featured-primary .btn-text {
  align-items: center;
}

.btn-link--primary {
  background: var(--primary-btn-bg);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

/* Homepage: the wide first featured button (Stellody) should start with the same
   background as other buttons, so the hover colour change is obvious.
   This is intentionally scoped to `.featured-primary` to avoid affecting other
   potential uses of `.btn-link--primary`. */
.featured-primary.btn-link--primary {
  background: var(--primary-btn-bg);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 26px rgba(139, 179, 255, 0.18);
}

.btn-link--primary:hover {
  background: var(--primary-btn-bg-hover);
}

.btn-link--subtle {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(233, 231, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.btn-link--subtle:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn-link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
  box-shadow:
    0 14px 30px rgba(139, 179, 255, 0.14),
    var(--hover-accent-shadow);
}

/* Hover: ensure the primary button label remains readable against banana-yellow.
   `--cta-fg` is already dark; this makes sure nested `.btn-text` inherits it even
   if other rules override descendants. */
.btn-link:hover .btn-text {
  color: var(--cta-fg);
}

/* Subtle/primary button variants: keep the original variant color but add a more
   obvious hover highlight via the purple accent ring. */
.btn-link--primary:hover,
.btn-link--subtle:hover {
  box-shadow:
    0 14px 30px rgba(139, 179, 255, 0.16),
    var(--hover-accent-shadow);
}

.btn-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Homepage featured project buttons */
.featured-projects {
  margin: 4px 0 36px;
}

/* Landing page intro (homepage) */
.landing-intro {
  margin: 4px 0 28px;
}

/* Homepage: tighten hero -> divider -> next section spacing (keep divider). */
body.is-homepage .landing-intro {
  margin-bottom: 18px;
}

body.is-homepage .landing-intro + .post-separator {
  margin: 20px 0;
}

/* Homepage: remove the extra top offset so the first section aligns with the sidebar panel top. */
body.is-homepage .landing-intro {
  margin-top: 0;
}

.section-panel--intro {
  text-align: center;
}

/* Homepage hero (avatar + headline + subline) */
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 19.2px;
  text-align: left;
}

.hero__avatar {
  flex: 0 0 auto;
}

.hero__avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.hero__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hero__thesis {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 14.4px;
  line-height: 1.45;
  font-variant: normal;
  letter-spacing: normal;
  text-transform: none;
}

.hero__headline {
  margin: 0 0 10.4px;
  color: var(--brand-mauve);
  font-size: 34px;
  line-height: 1.22;
  font-weight: 750;
}

.hero__tagline {
  margin: 0 0 14.4px;
  color: var(--text-color);
  font-size: 16.8px;
  line-height: 1.55;
}

.hero__subline {
  margin: 0;
  color: var(--text-muted);
}

/* Homepage hero: slightly higher contrast for the support line (no size change). */
body.is-homepage .hero__subline {
  color: color-mix(in srgb, var(--text-color) 90%, var(--text-muted));
}

/* Homepage intro: quiet proof-of-execution cue (inline, not a new section). */
.homepage-portfolio-cue {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.96;
  color: var(--text-muted);
}

.homepage-portfolio-cue a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.homepage-portfolio-cue a:hover,
.homepage-portfolio-cue a:focus-visible {
  color: var(--link-hover-color);
}

.homepage-selected-project {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
}

.homepage-selected-project a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.homepage-selected-project a:hover,
.homepage-selected-project a:focus-visible {
  opacity: 1;
  color: var(--link-hover-color);
}

/* Portfolio: subtle proof-first label (text-only, no new component). */
.portfolio-featured-label {
  margin: 0 0 12px;
  font-size: 14.4px;
  line-height: 1.45;
  color: var(--text-subtle);
  /* Render as written (title case), not forced uppercase. */
  text-transform: none;
  /* Avoid the all-caps tracking look; keep this closer to body text. */
  letter-spacing: normal;
}

.portfolio-featured-label__name {
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Safety: ensure product/system names keep their intended casing. */
  text-transform: none;
  letter-spacing: normal;
}

/* Homepage hero action buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 15.2px;
}

/* CTA button styling (used on homepage hero). */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(52px * var(--btn-scale));
  padding: calc(11.2px * var(--btn-scale)) calc(19.2px * var(--btn-scale));
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(1em * var(--btn-scale));
  line-height: 1.1;
  background: var(--primary-btn-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--primary-btn-fg);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  text-shadow: none;
}

.cta-button:hover {
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  transform: translateY(-1px);
  text-shadow: none;
}

.cta-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.section-panel--intro p {
  margin: 0 0 14.4px;
}

/* Homepage: section heading row (e.g. Decision Architecture title + download button). */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Ensure headings in a row don't introduce extra top spacing. */
.section-heading-row .section-title {
  margin: 0;
}

/* Make the eBook button slightly more compact than the hero CTAs. */
.cta-button--compact {
  min-height: calc(44px * var(--btn-scale));
  padding: calc(9.6px * var(--btn-scale)) calc(16px * var(--btn-scale));
}

@media (max-width: 680px) {
  .section-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.section-panel--intro .landing-bio {
  margin-bottom: 17.6px;
  color: var(--text-muted);
}

.section-panel--intro p:last-child {
  margin-bottom: 0;
}

.section-panel--intro p:nth-of-type(3) {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 860px) {
  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 13.6px;
  }

  .hero__avatar-img {
    width: 88px;
    height: 88px;
  }

  .hero__headline {
    font-size: 27.2px;
  }

  .hero__thesis {
    /* Keep the thesis line visually quiet when the headline scales down. */
    font-size: 13.6px;
    margin: 0 0 6.4px;
  }
}

.post-separator--subtle {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 19.2px 0 17.6px;
}

.build-with {
  margin-top: 8px;
  padding: 13.6px 16px;
  border-radius: 16px;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: left;
}

.build-with-title {
  margin: 0 0 5.6px;
  font-size: 16.8px;
  color: var(--brand-mauve);
}

/* Improve perceived contrast for brand-mauve titles in light mode without
   changing the actual brand color token. */
html.theme-light .site-title,
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light .section-title {
  text-shadow: 0 1px 0 rgba(17, 24, 39, 0.25);
}

.build-with-items {
  margin: 0;
  color: var(--text-muted);
  font-size: 15.7px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .build-with {
    grid-template-columns: 1fr;
  }
}

/* Fake terminal snippet (posts) */
/* DARK-ONLY COMPONENT: Skip during light mode theming */
.fake-terminal {
  max-width: var(--content-max);
  margin: 20px auto 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* Use an opaque background so the terminal stays truly dark on light pages. */
  background: #121321;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);

  /* Force dark console colors even when the site is in light mode. */
  --code-bg: rgba(255, 255, 255, 0.08);
  --code-color: #f7f6ff;
  color: rgba(233, 231, 255, 0.92);
}

.fake-terminal__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8.8px 14.4px;
  font-size: 14.4px;
  color: rgba(233, 231, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* AxisDB terminals: gently fade out at the end of the loop before restarting. */
.fake-terminal--axisdb-install .fake-terminal__body {
  animation: ft-axisdb-install-fade var(--ft-cycle) linear infinite;
}

.fake-terminal--axisdb-run .fake-terminal__body {
  animation: ft-axisdb-run-fade var(--ft-run-cycle) linear infinite;
}

@keyframes ft-axisdb-install-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ft-axisdb-run-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.fake-terminal__title .code-copy--icon {
  width: calc(42px * var(--btn-scale));
  height: calc(32px * var(--btn-scale));
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fake-terminal__title .code-copy__icon {
  width: calc(18px * var(--btn-scale));
  height: calc(18px * var(--btn-scale));
  fill: rgba(233, 231, 255, 0.88);
}

.fake-terminal__title .code-copy--icon[data-copied="true"] {
  background: rgba(178, 255, 178, 0.22);
  border-color: rgba(178, 255, 178, 0.55);
}

.fake-terminal__body {
  margin: 0;
  padding: 15.2px 16.8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  /* Prevent layout “jumping” when horizontal scrollbars appear mid-typing.
     This keeps the terminal block height stable while the command grows. */
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  .fake-terminal__body {
    /* Fallback: always reserve scrollbar space for older browsers. */
    overflow-x: scroll;
  }
}

.fake-terminal__body code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.2px;
  line-height: 1.55;
  color: var(--code-color);
}

/* Copyable code blocks (AxisDB quick start) */
/* DARK-ONLY COMPONENT: Skip during light mode theming */
.code-block {
  max-width: var(--content-max);
  margin: 20px auto 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* Use an opaque background so the code block stays truly dark on light pages. */
  background: #121321;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);

  /* Force dark console colors even when the site is in light mode. */
  --code-bg: rgba(255, 255, 255, 0.08);
  --code-color: #f7f6ff;
  color: rgba(233, 231, 255, 0.92);
}

.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8.8px 14.4px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-block__label {
  font-size: 14.4px;
  color: rgba(233, 231, 255, 0.78);
}

.code-copy {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(233, 231, 255, 0.9);
  padding: calc(4.8px * var(--btn-scale)) calc(8.8px * var(--btn-scale));
  border-radius: calc(10px * var(--btn-scale));
  font: inherit;
  font-size: calc(13.6px * var(--btn-scale));
  cursor: pointer;
}

/* Icon-only copy button (used across AxisDB) */
.code-copy--icon {
  width: calc(42px * var(--btn-scale));
  height: calc(32px * var(--btn-scale));
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.code-copy__icon {
  width: calc(18px * var(--btn-scale));
  height: calc(18px * var(--btn-scale));
  fill: rgba(233, 231, 255, 0.88);
}

/* When the icon copy button is in “copied” state, give it a subtle highlight. */
.code-copy--icon[data-copied="true"] {
  background: rgba(178, 255, 178, 0.22);
  border-color: rgba(178, 255, 178, 0.55);
}

.code-copy:hover {
  background: rgba(255, 255, 255, 0.12);
}

.code-copy:disabled {
  opacity: 0.7;
  cursor: default;
}

.code-copy:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.code-block__body {
  margin: 0;
  padding: 15.2px 16.8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
}

.code-block__body code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.2px;
  white-space: pre;
  color: var(--code-color);
}

/* AxisDB “live feed” terminal: step-reveal + typing (one line at a time) */
.fake-terminal {
  /* Master timeline for all animations */
  --ft-cycle: 70s;
}

/* Faster feeds */
.fake-terminal--axisdb-install {
  /* Total loop time (includes a ~3s “rest” where the finished commands remain visible) */
  /* Typing completes at ~13.8s, then rests ~3s, then immediately restarts. */
  --ft-cycle: 16.8s;
}

.fake-terminal--axisdb-run {
  /* Match the install terminal loop length so the overall pacing feels consistent. */
  --ft-cycle: 24s;
}

/* AxisDB run terminal: override the generic timeline with a simple 2-step feed. */
.fake-terminal--axisdb-run {
  /* Finish typing, then rest ~3s, then immediately restart. */
  --ft-run-cycle: 10.92s;
}

.fake-terminal--axisdb-run .ft-step--1 {
  animation: ft-run-show-step-1 var(--ft-run-cycle) linear infinite;
}

.fake-terminal--axisdb-run .ft-step--2 {
  animation: ft-run-show-step-2 var(--ft-run-cycle) linear infinite;
}

.fake-terminal--axisdb-run .fake-terminal__typed--run {
  animation: ft-run-type var(--ft-run-cycle) steps(52, end) infinite;
}

/* AxisDB run terminal: reserve full command width so the terminal never “jumps”. */
.fake-terminal--axisdb-run .fake-terminal__typed--run {
  --ft-line-width: 52ch;
}

.fake-terminal--axisdb-run .fake-terminal__cursor-wrap--run {
  animation: ft-run-cursor var(--ft-run-cycle) linear infinite;
}

@keyframes ft-run-show-step-1 {
  0%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-run-show-step-2 {
  0%,
  72.5% {
    opacity: 0;
    max-height: 0;
  }
  72.51%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-run-type {
  0%,
  4.4% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  /* ~7.5s typing for a 52ch command in a 24s loop (≈31%) */
  72.5%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-run-cursor {
  0%,
  72.5% {
    opacity: 1;
  }
  72.51%,
  100% {
    opacity: 0;
  }
}

.fake-terminal__output {
  color: rgba(233, 231, 255, 0.7);
}

.fake-terminal__code {
  display: block;
  color: rgba(233, 231, 255, 0.82);
  white-space: pre;
  margin-top: 4px;
  padding-left: 1.8ch;
}

.fake-terminal__body .ft-step {
  display: flex;
  align-items: baseline;
  gap: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* AxisDB: keep the fake terminal height CONSTANT.
   The generic step reveal animations use `max-height`, which makes the terminal
   block grow/shrink vertically. For AxisDB, reserve space for all steps from
   the start and reveal steps using opacity only (layout stays fixed). */
.fake-terminal--axisdb-install .fake-terminal__body .ft-step,
.fake-terminal--axisdb-run .fake-terminal__body .ft-step {
  max-height: 60em;
  overflow: visible;
}

@keyframes ft-axisdb-show-s1 {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes ft-axisdb-show-s2 {
  0%,
  20.71% {
    opacity: 0;
  }
  20.72%,
  100% {
    opacity: 1;
  }
}

@keyframes ft-axisdb-show-s3 {
  0%,
  38.57% {
    opacity: 0;
  }
  38.58%,
  100% {
    opacity: 1;
  }
}

@keyframes ft-axisdb-show-s4 {
  0%,
  56.43% {
    opacity: 0;
  }
  56.44%,
  100% {
    opacity: 1;
  }
}

.fake-terminal--axisdb-install .fake-terminal__body .ft-step--1 {
  animation: ft-axisdb-show-s1 var(--ft-cycle) linear infinite;
}

.fake-terminal--axisdb-install .fake-terminal__body .ft-step--2 {
  animation: ft-axisdb-show-s2 var(--ft-cycle) linear infinite;
}

.fake-terminal--axisdb-install .fake-terminal__body .ft-step--3 {
  animation: ft-axisdb-show-s3 var(--ft-cycle) linear infinite;
}

.fake-terminal--axisdb-install .fake-terminal__body .ft-step--4 {
  animation: ft-axisdb-show-s4 var(--ft-cycle) linear infinite;
}

@keyframes ft-axisdb-run-show-step-1 {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes ft-axisdb-run-show-step-2 {
  0%,
  72.5% {
    opacity: 0;
  }
  72.51%,
  100% {
    opacity: 1;
  }
}

.fake-terminal--axisdb-run .fake-terminal__body .ft-step--1 {
  animation: ft-axisdb-run-show-step-1 var(--ft-run-cycle) linear infinite;
}

.fake-terminal--axisdb-run .fake-terminal__body .ft-step--2 {
  animation: ft-axisdb-run-show-step-2 var(--ft-run-cycle) linear infinite;
}

.fake-terminal__prompt {
  color: rgba(139, 179, 255, 0.9);
}

.fake-terminal__typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  /* Keep the terminal layout stable: reserve the full line width up-front and
     reveal characters without changing layout (no resizing/jumping). */
  width: var(--ft-line-width, 0);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  position: relative;
  line-height: inherit;
  vertical-align: baseline;
  /* Visually nudge the animated inline-block down onto the same baseline as the
     inline prompt text. Using `transform` avoids baseline quirks across browsers. */
  transform: translateY(0);
}

/* AxisDB terminals: cursor should follow the typed text.
   We hide the separate cursor span (which sits at the far right of the reserved
   width) and instead render an animated cursor inside the typed span.
   This keeps the terminal height constant AND places the cursor at the current
   reveal boundary. */
.fake-terminal--axisdb-install .fake-terminal__cursor-wrap,
.fake-terminal--axisdb-run .fake-terminal__cursor-wrap {
  display: none;
}

.fake-terminal--axisdb-install .fake-terminal__typed::after,
.fake-terminal--axisdb-run .fake-terminal__typed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.6ch;
  height: 1em;
  margin-left: 0.15ch;
  background: rgba(233, 231, 255, 0.85);
  transform: translateX(0);
  animation: fake-terminal-blink 1s steps(2, end) infinite;
}

@keyframes ft-axisdb-cursor-move-s1 {
  0%,
  2.86% {
    opacity: 0;
    transform: translateX(0);
  }
  2.861% {
    opacity: 1;
    transform: translateX(0);
  }
  20.71% {
    opacity: 1;
    transform: translateX(var(--ft-line-width));
  }
  20.711%,
  100% {
    opacity: 0;
    transform: translateX(var(--ft-line-width));
  }
}

@keyframes ft-axisdb-cursor-move-s2 {
  0%,
  20.71% {
    opacity: 0;
    transform: translateX(0);
  }
  20.72% {
    opacity: 1;
    transform: translateX(0);
  }
  38.57% {
    opacity: 1;
    transform: translateX(var(--ft-line-width));
  }
  38.58%,
  100% {
    opacity: 0;
    transform: translateX(var(--ft-line-width));
  }
}

@keyframes ft-axisdb-cursor-move-s3 {
  0%,
  38.57% {
    opacity: 0;
    transform: translateX(0);
  }
  38.58% {
    opacity: 1;
    transform: translateX(0);
  }
  56.43% {
    opacity: 1;
    transform: translateX(var(--ft-line-width));
  }
  56.44%,
  100% {
    opacity: 0;
    transform: translateX(var(--ft-line-width));
  }
}

@keyframes ft-axisdb-cursor-move-s4 {
  0%,
  56.43% {
    opacity: 0;
    transform: translateX(0);
  }
  56.44% {
    opacity: 1;
    transform: translateX(0);
  }
  82.14% {
    opacity: 1;
    transform: translateX(var(--ft-line-width));
  }
  82.15%,
  100% {
    opacity: 0;
    transform: translateX(var(--ft-line-width));
  }
}

.fake-terminal--axisdb-install .fake-terminal__typed--1::after {
  animation:
    ft-axisdb-cursor-move-s1 var(--ft-cycle) steps(20, end) infinite,
    fake-terminal-blink 1s steps(2, end) infinite;
}

.fake-terminal--axisdb-install .fake-terminal__typed--2::after {
  animation:
    ft-axisdb-cursor-move-s2 var(--ft-cycle) steps(24, end) infinite,
    fake-terminal-blink 1s steps(2, end) infinite;
}

.fake-terminal--axisdb-install .fake-terminal__typed--3::after {
  animation:
    ft-axisdb-cursor-move-s3 var(--ft-cycle) steps(25, end) infinite,
    fake-terminal-blink 1s steps(2, end) infinite;
}

.fake-terminal--axisdb-install .fake-terminal__typed--4::after {
  animation:
    ft-axisdb-cursor-move-s4 var(--ft-cycle) steps(18, end) infinite,
    fake-terminal-blink 1s steps(2, end) infinite;
}

@keyframes ft-axisdb-run-cursor-move {
  0%,
  4.4% {
    opacity: 0;
    transform: translateX(0);
  }
  4.401% {
    opacity: 1;
    transform: translateX(0);
  }
  72.5% {
    opacity: 1;
    transform: translateX(var(--ft-line-width));
  }
  72.51%,
  100% {
    opacity: 0;
    transform: translateX(var(--ft-line-width));
  }
}

.fake-terminal--axisdb-run .fake-terminal__typed--run::after {
  animation:
    ft-axisdb-run-cursor-move var(--ft-run-cycle) steps(52, end) infinite,
    fake-terminal-blink 1s steps(2, end) infinite;
}

.fake-terminal__cursor-wrap {
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(0);
}

.fake-terminal__cursor {
  display: inline-block;
  width: 0.6ch;
  height: 1em;
  vertical-align: baseline;
  margin-left: 0.15ch;
  /* Nudge the blinking block cursor down slightly so it sits perfectly on the text baseline. */
  transform: translateY(2px);
  background: rgba(233, 231, 255, 0.85);
  animation: fake-terminal-blink 1s steps(2, end) infinite;
}

/* Step visibility windows (each step appears when its action starts, then stays until reset). */
.fake-terminal__body .ft-step--1  { animation: ft-show-s1  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--2  { animation: ft-show-s2  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--3  { animation: ft-show-s3  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--4  { animation: ft-show-s4  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--5  { animation: ft-show-s5  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--6  { animation: ft-show-s6  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--7  { animation: ft-show-s7  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--8  { animation: ft-show-s8  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--9  { animation: ft-show-s9  var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--10 { animation: ft-show-s10 var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--11 { animation: ft-show-s11 var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--12 { animation: ft-show-s12 var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--13 { animation: ft-show-s13 var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--14 { animation: ft-show-s14 var(--ft-cycle) linear infinite; }
.fake-terminal__body .ft-step--15 { animation: ft-show-s15 var(--ft-cycle) linear infinite; }

/* Typing windows (one line at a time). */
.fake-terminal__typed--1 { --ft-line-width: 20ch; animation: ft-type-s1  var(--ft-cycle) steps(20, end) infinite; }
.fake-terminal__typed--2 { --ft-line-width: 24ch; animation: ft-type-s2  var(--ft-cycle) steps(24, end) infinite; }
.fake-terminal__typed--3 { --ft-line-width: 25ch; animation: ft-type-s3  var(--ft-cycle) steps(25, end) infinite; }
.fake-terminal__typed--4 { --ft-line-width: 18ch; animation: ft-type-s4  var(--ft-cycle) steps(18, end) infinite; }
.fake-terminal__typed--5 { --ft-line-width: 23ch; animation: ft-type-s5  var(--ft-cycle) steps(23, end) infinite; }
.fake-terminal__typed--6 { --ft-line-width: 52ch; animation: ft-type-s13 var(--ft-cycle) steps(52, end) infinite; }

/* Cursor only shows while the line is typing. */
.fake-terminal__cursor-wrap--1 { animation: ft-cursor-s1  var(--ft-cycle) linear infinite; }
.fake-terminal__cursor-wrap--2 { animation: ft-cursor-s2  var(--ft-cycle) linear infinite; }
.fake-terminal__cursor-wrap--3 { animation: ft-cursor-s3  var(--ft-cycle) linear infinite; }
.fake-terminal__cursor-wrap--4 { animation: ft-cursor-s4  var(--ft-cycle) linear infinite; }
.fake-terminal__cursor-wrap--5 { animation: ft-cursor-s5  var(--ft-cycle) linear infinite; }
.fake-terminal__cursor-wrap--6 { animation: ft-cursor-s13 var(--ft-cycle) linear infinite; }

/* Timeline markers (70s cycle)
   0%      = 0s
   5.714%  = 4s
   11.429% = 8s
   17.143% = 12s
   22.857% = 16s
   28.571% = 20s
   31.429% = 22s
   50%     = 35s
   52.857% = 37s
   64.286% = 45s
   67.143% = 47s
   78.571% = 55s
   81.429% = 57s
   90%     = 63s
   92.857% = 65s
   97.143% = 68s
*/

/* Install terminal typing: type each line, then keep the finished output visible for ~3s.
   No “blank” gap between loops: the clear + restart happens at the loop boundary. */
@keyframes ft-type-s1 {
  0%,
  2.86% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  20.71%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-type-s2 {
  0%,
  20.71% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  38.57%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-type-s3 {
  0%,
  38.57% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  56.43%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-type-s4 {
  0%,
  56.43% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  /* Finish typing by ~57.5% (≈13.8s), then hold until the loop ends (~24s). */
  82.14%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ft-type-s5 {
  0%,
  22.857% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  28.571%,
  97.143% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes ft-type-s13 {
  0%,
  81.429% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  90%,
  97.143% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
}

/* Cursor visibility windows */
@keyframes ft-cursor-s1 {
  0%,
  20.71% { opacity: 1; }
  20.72%,
  100% { opacity: 0; }
}

@keyframes ft-cursor-s2 {
  0%,
  20.71% { opacity: 0; }
  20.72%,
  38.57% { opacity: 1; }
  38.58%,
  100% { opacity: 0; }
}

@keyframes ft-cursor-s3 {
  0%,
  38.57% { opacity: 0; }
  38.58%,
  56.43% { opacity: 1; }
  56.44%,
  100% { opacity: 0; }
}

@keyframes ft-cursor-s4 {
  0%,
  56.43% { opacity: 0; }
  56.44%,
  82.14% { opacity: 1; }
  82.15%,
  100% { opacity: 0; }
}

@keyframes ft-cursor-s5 {
  0%,
  22.857% { opacity: 0; }
  22.858%,
  28.571% { opacity: 1; }
  28.572%,
  100% { opacity: 0; }
}

@keyframes ft-cursor-s13 {
  0%,
  81.429% { opacity: 0; }
  81.43%,
  90% { opacity: 1; }
  90.001%,
  100% { opacity: 0; }
}

/* Step show windows */
@keyframes ft-show-s1 {
  0%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-show-s2 {
  0%,
  20.71% {
    opacity: 0;
    max-height: 0;
  }
  20.72%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-show-s3 {
  0%,
  38.57% {
    opacity: 0;
    max-height: 0;
  }
  38.58%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-show-s4 {
  0%,
  56.43% {
    opacity: 0;
    max-height: 0;
  }
  56.44%,
  100% {
    opacity: 1;
    max-height: 60em;
  }
}

@keyframes ft-show-s5 {
  0%,
  22.856% {
    opacity: 0;
    max-height: 0;
  }
  22.857%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s6 {
  0%,
  28.57% {
    opacity: 0;
    max-height: 0;
  }
  28.571%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s7 {
  0%,
  31.428% {
    opacity: 0;
    max-height: 0;
  }
  31.429%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s8 {
  0%,
  49.999% {
    opacity: 0;
    max-height: 0;
  }
  50%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s9 {
  0%,
  52.856% {
    opacity: 0;
    max-height: 0;
  }
  52.857%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s10 {
  0%,
  64.285% {
    opacity: 0;
    max-height: 0;
  }
  64.286%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s11 {
  0%,
  67.142% {
    opacity: 0;
    max-height: 0;
  }
  67.143%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s12 {
  0%,
  78.57% {
    opacity: 0;
    max-height: 0;
  }
  78.571%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s13 {
  0%,
  81.428% {
    opacity: 0;
    max-height: 0;
  }
  81.429%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s14 {
  0%,
  89.999% {
    opacity: 0;
    max-height: 0;
  }
  90%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes ft-show-s15 {
  0%,
  92.856% {
    opacity: 0;
    max-height: 0;
  }
  92.857%,
  97.143% {
    opacity: 1;
    max-height: 60em;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}

@keyframes fake-terminal-blink {
  0%,
  49% { opacity: 1; }
  50%,
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fake-terminal__typed {
    width: auto;
    animation: none;
    -webkit-clip-path: none;
    clip-path: none;
  }

  .fake-terminal--axisdb-install .fake-terminal__body,
  .fake-terminal--axisdb-run .fake-terminal__body {
    opacity: 1;
    animation: none;
  }

  .fake-terminal--axisdb-install .fake-terminal__typed::after,
  .fake-terminal--axisdb-run .fake-terminal__typed::after {
    display: none;
  }

  .fake-terminal__cursor-wrap {
    opacity: 1;
    animation: none;
  }

  .fake-terminal__body .ft-step {
    opacity: 1;
    animation: none;
  }

  .fake-terminal__cursor {
    animation: none;
    opacity: 1;
  }
}

/* Homepage: subtle section panels to improve scan-ability */
.section-panel {
  padding: 17.6px 17.6px 20px;
  border-radius: 20px;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
}

.section-panel--backlog {
  background: var(--panel-bg);
  border-color: var(--panel-border-strong);
}

.header-cta {
  margin: -17.6px 0 32px;
  text-align: center;
}

.header-cta-slot {
  display: inline;
}

.header-cta-link {
  display: inline-block;
  padding: calc(8.8px * var(--btn-scale)) calc(14.4px * var(--btn-scale));
  border-radius: 999px;
  background: var(--primary-btn-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--primary-btn-fg);
  box-sizing: border-box;
  font-size: calc(1em * var(--btn-scale));
  transition: background 0.18s ease, border-color 0.18s ease;
}

.header-cta-link:hover {
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
}

.header-cta-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Scroll-to-top button (all pages) */
.scroll-top {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--primary-btn-bg);
  color: var(--primary-btn-fg);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

/* Sticky “Work With Me” CTA (site-wide).
   Position it bottom-right but ABOVE the scroll-to-top button to avoid overlap. */
.sticky-cta {
  position: static;
  background: var(--primary-btn-bg);
  color: var(--primary-btn-fg);
  padding: calc(12px * var(--btn-scale)) calc(20px * var(--btn-scale));
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: calc(1em * var(--btn-scale));
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  box-sizing: border-box;
}

.sticky-cta:hover {
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
}

.sticky-cta:focus-visible {
  outline: 3px solid var(--focus-ring-strong);
  outline-offset: 3px;
}

/* Floating actions: keep them bottom-right, stack them and control visual order.
   Requirement: CTA below scroll-to-top without changing DOM order. */
.floating-actions {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  align-items: flex-end;
}

/* On narrow screens, the sticky CTA becomes a single-color full-width block. */
@media (max-width: 480px) {
  /* Ensure fixed floating actions never cover content on very small screens. */
  body {
    padding-bottom: 140px;
  }

  .floating-actions {
    left: 16px;
    right: 16px;
    align-items: stretch;
  }

  .sticky-cta {
    width: 100%;
    text-align: center;
    border-radius: 0;
  }

  /* Mobile header: prevent button clusters from overflowing the viewport. */
  .header-actions .icon-btn,
  .header-actions .rss-link,
  .home-favicon-link {
    width: 44px;
    height: 44px;
  }

  .header-actions .rss-icon {
    width: 26px;
    height: 26px;
  }

  .header-actions {
    gap: 8px;
  }

  /* Make the contact cluster match the 44px icon cluster size on very small screens. */
  .header-contact--mobile {
    --btn-scale: 0.85;
  }

  .header-contact--mobile .header-email-row {
    gap: 8px;
  }

  .header-about-wrap {
    gap: 8px;
  }

  .top-about-link {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* Avoid hover-only affordances on touch devices (where hover is emulated). */
@media (hover: none) {
  .sidebar-link:hover,
  .btn-link:hover,
  .cta-button:hover,
  .header-cta-link:hover,
  .sticky-cta:hover,
  .scroll-top:hover {
    transform: none;
  }
}

/* Tablet spacing to reduce cramped feel. */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    padding: 56px 24px;
  }

  .page-layout,
  .header-layout {
    gap: 24px;
  }
}

/*
  Responsive overrides (placed late so they win):
  The header layout rules are defined after the earlier mobile media query, so
  we repeat the <=860px overrides here to ensure they apply.
*/
@media (max-width: 860px) {
  body {
    padding: 44px 16px;
  }

  .header-layout {
    grid-template-columns: 1fr;
  }

  .header-gutter {
    display: none;
  }

  .header-topbar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /*
    On mobile the title stays centered, but the actions row should span the
    full width so we can place Contact (left) and Header actions (right).
  */
  .header-topbar-right {
    justify-self: stretch;
    width: 100%;
  }

  .header-topbar-actions-row {
    width: 100%;
    justify-content: space-between;
    /* Align contact links with the top row (theme/home) of the right-side grid. */
    align-items: flex-start;
  }

  .header-contact--mobile {
    display: flex;
    align-self: flex-start;
  }

  .header-actions {
    align-self: flex-start;
  }

  .header-actions {
    justify-self: center;
  }

  .header-email {
    justify-content: center;
  }

  .page-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}

/* Post meta: enforce date/tags on separate lines. */
.post-meta {
  margin-bottom: 16px;
}

.post-date,
.post-tags {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-top:hover {
  /* Banana-yellow hover to match the rest of the UI. */
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  color: var(--cta-fg);
  text-shadow: none;
}

.scroll-top:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: none;
  }
}

.featured-projects .section-title {
  margin-top: 20px;
}

.featured-projects .section-title:first-child {
  margin-top: 0;
}

.featured-buttons {
  display: flex;
  flex-wrap: wrap;
  /* More breathing room between discrete items */
  gap: 14.4px;
  justify-content: center;
  align-items: center;
}

/* Slightly tighter layout for compact navigation rows. */
.featured-buttons--compact {
  gap: 10.4px;
}

/* Books page: quiet cover catalogue (no marketing). */
.books-grid {
  display: grid;
  /* Desktop: one calm, coherent row of 4 (series progression, not inventory). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Avoid tall, stretched tiles that create dead space under short subtitles. */
  align-items: start;
  gap: 22px;
  margin-top: 20px;
}

/* Books page: lightweight entry guidance (decision compression, not navigation). */
.books-entry-guidance__card {
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 16px;
}

.books-entry-guidance__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: start;
}

.books-entry-guidance__title {
  margin: 0;
  font-weight: 750;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.25;
}

.books-entry-guidance__subtext {
  color: var(--text-muted);
  opacity: 0.82;
  font-size: 14.6px;
  line-height: 1.35;
  max-width: 60ch;
  margin-top: 7px;
}

.books-entry-guidance__list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  /* Slightly tighter to improve scan speed without collapsing separation. */
  gap: 9px;
}

@media (max-width: 820px) {
  .books-entry-guidance__layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .books-entry-guidance__list {
    margin-top: 14px;
  }
}

.books-entry-guidance__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.books-entry-guidance__condition {
  font-weight: 400;
  color: var(--text-muted);
  /* Option A: dim condition slightly so action reads as the click target. */
  opacity: 0.82;
  font-size: 14.4px;
  line-height: 1.35;
}

.books-entry-guidance__target {
  display: inline-flex;
  align-items: baseline;
  font-size: 15.2px;
  line-height: 1.3;
}

.books-entry-guidance__action {
  display: inline-flex;
  align-items: baseline;
}

.books-entry-guidance__arrow {
  color: var(--text-muted);
  opacity: 0.85;
  /* Stable, consistent spacing after the arrow across all rows. */
  margin-right: 6px;
}

.books-entry-guidance__book {
  color: var(--text-color);
  font-weight: 700;
}

.books-entry-guidance__link {
  color: var(--text-color);
  font-weight: 700;
}

/* Tablet: allow 2 columns so covers remain readable (avoid cramped 4-across). */
@media (max-width: 1023px) {
  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .books-grid {
    grid-template-columns: 1fr;
  }
}

.book-tile {
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 14.4px;
}

.book-cover-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  text-align: left;
}

.book-cover {
  display: block;
  width: 100%;
  /* Enforce a consistent visual height for cover images even if source assets
     have slightly different aspect ratios (e.g. DA Patterns cover). */
  aspect-ratio: 2 / 3;
  height: auto;
  /* Prefer filling the cover frame so hover/focus rings read as a perimeter
     highlight (no inset “letterboxing” effect). */
  object-fit: cover;
  /* Bias slightly toward the bottom so cover title areas are preserved if
     any vertical cropping occurs (mainly affects the Patterns cover). */
  object-position: center 62%;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Books: title + subtitle under the cover (always visible; calm metadata). */
.book-meta {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;

  /* Keep cards visually even across a row while still allowing readable
     multi-line subtitles (prevents the “short” third tile). */
  min-height: 114px;
}

.book-title {
  font-weight: 700;
  color: var(--text-color);
  /* Slightly smaller to avoid frequent truncation on long titles. */
  font-size: 15.2px;
  line-height: 1.25;
  text-align: left;

  /* Titles should not grow cards beyond the intended calm, uniform rhythm. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-subtitle {
  font-weight: 400;
  opacity: 0.78;
  color: var(--text-muted);
  /* Slightly smaller than title (calm, metadata-like). */
  font-size: 14.4px;
  line-height: 1.25;
  text-align: left;

  /* Max 4 lines, then ellipsis (mobile + scanning-friendly). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Books page: allow slightly more breathing room below the final note. */
.section-panel--books {
  padding-bottom: 24px;
}

.books-footer-note {
  margin: 22px 0 2px;
}

.book-tile:hover {
  background: linear-gradient(
    90deg,
    var(--hover-accent-bg),
    color-mix(in srgb, var(--panel-bg) 75%, transparent)
  );
  border-color: var(--hover-accent-border);
  box-shadow: var(--hover-accent-shadow);
}

/* Books: focus/hover should highlight the *entire* cover perimeter.
   We avoid relying on `outline` because it can render inconsistently around
   images in some browsers / zoom levels. */
.book-cover-link:focus-visible {
  outline: none;
}

.book-cover-link:hover .book-cover,
.book-cover-link:focus-visible .book-cover {
  border-color: rgba(255, 246, 200, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 246, 200, 0.55);
}

/* Books: subtle series label (quiet, curated tone). */
.books-series-label {
  font-size: 14.4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Books: separate compilation/reference section (not a peer series volume). */
.books-compilation {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.books-compilation__title {
  margin: 0;
  font-size: 14.4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.95;
}

.books-compilation-card {
  margin-top: 14px;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 16px;
}

.books-compilation-card__link {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 16px;
  align-items: start;
  text-decoration: none;
  /* Ensure no browser focus/active highlight can create a full-width ring/bar.
     The cover image receives the focus ring instead. */
  border-radius: 14px;
  background: transparent;
}

.books-compilation-card__cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  object-position: center 60%;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.books-compilation-card__meta {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.books-compilation-card__name {
  font-weight: 750;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.25;
}

.books-compilation-card__support {
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.82;
  font-size: 14.6px;
  line-height: 1.35;
  max-width: 56ch;
}

.books-compilation-card:hover {
  background: linear-gradient(
    90deg,
    var(--hover-accent-bg),
    color-mix(in srgb, var(--panel-bg) 75%, transparent)
  );
  border-color: var(--hover-accent-border);
  box-shadow: var(--hover-accent-shadow);
}

.books-compilation-card__link:hover .books-compilation-card__cover,
.books-compilation-card__link:focus-visible .books-compilation-card__cover {
  border-color: rgba(255, 246, 200, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 246, 200, 0.55);
}

.books-compilation-card__link:active .books-compilation-card__cover {
  border-color: rgba(255, 246, 200, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 246, 200, 0.55);
}

.books-compilation-card__link:focus-visible {
  outline: none;
}

/* Firefox can apply focus outlines on `:focus` even when `:focus-visible` is not
   used (e.g. mouse click). Ensure the focus ring is only on the cover, not the
   full card/link box. */
.books-compilation-card__link:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
}

/* Firefox-specific focus ring hook (keyboard). */
.books-compilation-card__link:-moz-focusring {
  outline: none !important;
  box-shadow: none !important;
}


@media (max-width: 680px) {
  .books-compilation-card__link {
    grid-template-columns: 1fr;
  }

  .books-compilation-card__cover {
    max-width: 240px;
  }
}

/* Posts index: treat each post entry like a discrete row/card for easier scanning */
.posts-index .post-item {
  padding: 14.4px 14.4px 17.6px;
  border-radius: 18px;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
}

/* Posts index: filter/toggle row (Projects only <-> Include Blog) */
.posts-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

/* Posts index: 3-way view switch should sit as a compact row */
.posts-toolbar .featured-buttons {
  justify-content: flex-end;
}

.posts-index .post-item:hover {
  background: linear-gradient(
    90deg,
    var(--hover-accent-bg),
    color-mix(in srgb, var(--panel-bg) 75%, transparent)
  );
  border-color: var(--hover-accent-border);
  box-shadow: var(--hover-accent-shadow);
}

/* On /posts, separators should be subtle (homepage uses the bolder green separators). */
.posts-index .post-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 17.6px 0;
}

/* Posts index: progressive reveal (More…) */
.posts-more-sentinel {
  height: 1px;
}

.posts-more-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.posts-more-btn {
  min-width: 160px;
}

.posts-more-btn[hidden] {
  display: none !important;
}

/* Homepage: featured project highlight (subtle, not larger). */
.featured-primary {
  /* Keep size identical; only adjust emphasis. */
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 14px 30px rgba(139, 179, 255, 0.16),
    var(--hover-accent-shadow);
}

.hotas-list {
  list-style: disc outside;
  padding-left: 24px;
  margin-top: 16px;
  margin-bottom: 32px;
  text-align: left;
  display: block;
}

.hotas-list li {
  margin-bottom: 8px;
}

.hotas-list li::marker {
  color: var(--brand-mauve);
  font-size: 1.2em;
}

.open-source-note {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 1.5rem 0;
}

.open-source-note a {
  text-decoration: none;
  font-weight: 500;
}