:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --bg-soft: #f3f1ec;
  --surface: #ffffff;
  --surface-2: #f3f1ec;
  --ink-1: #191714;
  --ink-2: #514d47;
  --ink-3: #7e7669;
  --accent: #7c5c30;
  --accent-2: #9a7542;
  --accent-soft: rgba(124, 92, 48, 0.09);
  --accent-ink: #ffffff;
  --border: #e7e2d8;
  --border-strong: #d5cdbd;
  --toast-bg: #ffffff;
  --code-bg: #1c1915;
  --code-ink: #f5f4f1;
  --code-muted: #a8a29e;
  --shadow-sm: 0 1px 3px rgba(25, 23, 20, 0.07);
  --shadow-md: 0 14px 34px rgba(25, 23, 20, 0.09);
  --shadow-lg: 0 30px 64px rgba(25, 23, 20, 0.14);
  --danger: #b91c1c;
  --success: #1a7f37;
  --warning: #b45309;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Georgia", "Times New Roman", serif;
  --heading-color: var(--ink-1);
  --heading-h1: clamp(2.2rem, 6vw, 3.6rem);
  --heading-h2: 1.35rem;
  --heading-h3: 2rem;
  --heading-h4: 1.6rem;
  --radius: 16px;
  --radius-sm: 10px;
  --text-1: var(--ink-1);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --glass-bg: var(--surface-2);
  --glass-bg-strong: var(--surface);
  --glass-border: var(--border);
  --glass-blur: 22px;
  --glass-saturate: 160%;
  --glass-opacity: 82%;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #131110;
    --bg-soft: #1a1714;
    --surface: #1d1a16;
    --surface-2: #262219;
    --ink-1: #efebe4;
    --ink-2: #b5ad9f;
    --ink-3: #7a7366;
    --accent: #c2a063;
    --accent-2: #d4b678;
    --accent-soft: rgba(194, 160, 99, 0.12);
    --accent-ink: #1c180f;
    --border: #2c2820;
    --border-strong: #3b362b;
    --toast-bg: #231f19;
    --code-bg: #0f0e0b;
    --code-ink: #e8e4dc;
    --code-muted: #8a8374;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 30px 66px rgba(0, 0, 0, 0.6);
    --text-1: var(--ink-1);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --glass-bg: var(--surface-2);
    --glass-bg-strong: var(--surface);
    --glass-border: var(--border);
    --glass-blur: 22px;
    --glass-saturate: 160%;
    --glass-opacity: 82%;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Consistent, visible keyboard-focus ring. Painted only for keyboard users
   via :focus-visible so pointer clicks don't show a ring. */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

/* Avoid double-tap zoom delay on interactive elements (mobile). */
a, button, input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Skip-to-content link: off-screen until focused (keyboard users). */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10001;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* Keep anchored headings clear of the fixed floating header.
   --nav-offset is updated at runtime from the real (possibly taller) nav. */
[id] { scroll-margin-top: var(--nav-offset, 124px); }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink-1);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}
main { padding-top: 88px; }
@media (min-width: 861px) {
  /* Two-row floating header on desktop is taller than the single-row bar. */
  main { padding-top: 122px; }
  .nav-search-panel { top: calc(var(--nav-offset, 124px) - 16px) !important; }
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: inherit; }

/* Floating navbar */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 20px 0;
  pointer-events: none;
  transition: padding 0.3s ease;
}
/* Keep the header row a stable "global" element during view-transition
   navigation: it gets its own snapshot and stays put while only the page
   content slides/fades. The name intentionally lives on the inner row (not the
   whole <nav>): a view-transition-name forces isolation on the element, and
   that would trap the frosted pill/panels into blurring only what's inside the
   nav instead of the page behind it. */
.nav-inner { view-transition-name: site-nav; }
.nav::before {
  content: "";
  position: absolute;
  inset: 8px 10px 0;
  border-radius: 18px;
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(25, 23, 20, 0.05), 0 8px 24px rgba(25, 23, 20, 0.06);
  pointer-events: none;
}
body.glass-off .nav::before {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 22px 8px;
  pointer-events: auto;
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.nav-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.nav-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  min-width: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-1);
  letter-spacing: 0.01em;
  text-decoration: none;
  flex: none;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 10px;
}
.footer .brand .brand-logo { width: 30px; height: 30px; }
.brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  flex: none;
}
.brand em { font-style: italic; color: var(--accent); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-width: 0; }

.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink-1); background: var(--surface-2); }
}

/* Hero */
.hero { padding: 72px 0 48px; text-align: center; }
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--heading-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--heading-color);
}
.hero h1 .grad { font-style: italic; color: var(--accent); }
.hero p { color: var(--ink-2); font-size: 1.1rem; max-width: 640px; margin: 0 auto 32px; }

.search-wrap { max-width: 560px; margin: 0 auto; position: relative; }
.search-wrap input {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-1);
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-wrap input::placeholder { color: var(--ink-3); }
.search-wrap input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Section headings */
.section-title {
  font-size: var(--heading-h2);
  font-weight: 700;
  margin: 36px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--heading-color);
  text-wrap: balance;
}
.section-title .st-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  line-height: 1.3;
}
.section-title .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

/* Default heading: label is plain text (no box) */
body.sec-heading-line .section-title .st-label {
  background: transparent;
  color: var(--heading-color);
  padding: 0;
  border-radius: 0;
}

/* Box heading: solid accent-filled box behind the label */
body.sec-heading-box .section-title .st-label {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  padding: 7px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* Bar heading: accent underline under the label */
body.sec-heading-bar .section-title { flex-wrap: wrap; }
body.sec-heading-bar .section-title .st-label {
  background: transparent;
  color: var(--heading-color);
  padding: 0 0 6px;
  border-radius: 0;
  position: relative;
}
body.sec-heading-bar .section-title .st-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

/* Bar heading: the flex line stays thin under the bar style */
body.sec-heading-bar .section-title .line { height: 1px; }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }

.card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent); }
}
.card-cover {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--surface-2);
}
.card-cover.fallback {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Fade-in for lazily-loaded background images (card covers / hero slides) */
.lazy-bg[data-bg] { opacity: 0; transition: opacity 0.55s ease; will-change: opacity; }
.lazy-bg[data-bg].loaded { opacity: 1; }
/* Inline <img> fade-in: hidden from first paint (only when JS runs), then
   faded in via .loaded once the browser finishes loading each image. */
html.js img:not(.loaded):not(.markdown-img) { opacity: 0; }
img:not([src]) { opacity: 0; }
img { transition: opacity 0.5s ease; }
/* Cached images (already fully decoded at init) appear instantly, no fade. */
img.no-fade { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lazy-bg[data-bg], html.js img:not(.loaded) { opacity: 1; transition: none; }
}
.card-cover .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: #1f1c18;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.featured-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #1f1c18;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.card-body { padding: 20px 22px 6px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink-1);
  transition: color 0.2s;
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-body h3 { color: var(--accent); }
}
.card-body p { color: var(--ink-2); font-size: 0.93rem; flex: 1; }
.card-meta { display: flex; gap: 14px; font-size: 0.79rem; color: var(--ink-3); flex-wrap: wrap; font-weight: 500; padding: 0 22px 22px; }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta span::before { content: "·"; color: var(--ink-3); }
.card-meta span:first-child::before { content: ""; }
.card-meta .card-meta-views { font-variant-numeric: tabular-nums; }
.card-meta .card-meta-date.desk-off,
.card-meta .card-meta-views.desk-off { display: none; }
@media (max-width: 860px) {
  .card-meta .card-meta-date.mob-off,
  .card-meta .card-meta-views.mob-off { display: none; }
}
.card-author { color: var(--accent); text-decoration: none; font-weight: 600; position: relative; }
@media (hover: hover) and (pointer: fine) {
  .card-author:hover { text-decoration: underline; }
}

/* =============================================================
   Home layout variants (grid / list / featured hybrid)
   ============================================================= */

.home-layout .grid { grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr)); }

/* Article "Related" grid — full width (no sidebar column), centered cards */
.related-grid { margin-top: 24px; }
.related-grid .grid { grid-template-columns: repeat(var(--related-cols, 3), minmax(0, 1fr)); gap: 28px; }
.related-grid-list .grid { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 641px) {
  .related-grid-list .card { flex-direction: row; align-items: stretch; }
  .related-grid-list .card .card-link { flex-direction: row; }
  .related-grid-list .card .card-cover { width: 300px; min-width: 300px; height: auto; min-height: 100%; flex-shrink: 0; }
  .related-grid-list .card .card-body { padding: 20px 24px 10px; }
  .related-grid-list .card .card-meta { padding-top: 0; }
}
@media (max-width: 640px) {
  .related-grid .grid { grid-template-columns: 1fr; }
}

/* List rows: horizontal cards, one per row */
.home-layout-list .grid { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 641px) {
  .home-layout-list .card { flex-direction: row; align-items: stretch; }
  .home-layout-list .card .card-link { flex-direction: row; }
  .home-layout-list .card .card-cover { width: 300px; min-width: 300px; height: auto; min-height: 100%; flex-shrink: 0; }
  .home-layout-list .card .card-body { padding: 20px 24px 10px; }
  .home-layout-list .card .card-meta { padding-top: 0; }
}

/* Grid with list-style items: horizontal rows (image + details) inside the grid */
.home-layout-list-items .grid { grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 641px) {
  .home-layout-list-items .card { flex-direction: row; align-items: stretch; }
  .home-layout-list-items .card .card-link { flex-direction: row; }
  .home-layout-list-items .card .card-cover { width: 280px; min-width: 280px; height: auto; min-height: 100%; flex-shrink: 0; }
  .home-layout-list-items .card .card-body { padding: 18px 22px 8px; }
  .home-layout-list-items .card .card-body h3 { font-size: 1.25rem; }
  .home-layout-list-items .card .card-meta { padding-top: 0; }
}

/* Hybrid featured: one large lead card above the grid */
.featured-lead { margin-bottom: 28px; }
.home-layout-featured .featured-lead .card { flex-direction: column; }

/* Masonry / staggered columns: card heights vary naturally per column */
.home-layout-masonry .grid {
  display: block;
  column-count: var(--home-cols, 3);
  column-gap: 28px;
}
.home-layout-masonry .grid > .card {
  display: inline-block;
  width: 100%;
  margin: 0 0 28px;
  break-inside: avoid;
}
@media (max-width: 800px) {
  .home-layout-masonry .grid { column-count: 2; }
}
@media (min-width: 641px) {
  .home-layout-featured .featured-lead .card { flex-direction: row; align-items: stretch; }
  .home-layout-featured .featured-lead .card .card-link { flex-direction: row; }
  .home-layout-featured .featured-lead .card-cover { width: 55%; min-width: 55%; height: auto; min-height: 100%; flex-shrink: 0; }
  .home-layout-featured .featured-lead .card-body { padding: 26px 28px 10px; }
  .home-layout-featured .featured-lead .card-meta { padding-top: 0; }
  .home-layout-featured .featured-lead .card-body h3 { font-size: 1.7rem; }
  .home-layout-featured .featured-lead .card-body p { font-size: 1rem; }
}
@media (max-width: 800px) {
  .home-layout:not(.home-layout-list):not(.home-layout-list-items) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-layout-list-items .grid { grid-template-columns: 1fr; }
}

/* Empty state */
.empty { text-align: center; padding: 80px 20px; color: var(--ink-3); }

/* Pagination/filters */
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.chip {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--accent); color: var(--accent); }
}
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 12px rgba(0,0,0,0.12);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset, 0 6px 18px rgba(0,0,0,0.16); }
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-1); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: var(--surface-2); box-shadow: none; transform: translateY(-1px); }
}
.btn-danger { background: var(--danger); }
.btn-sm { padding: 6px 16px; font-size: 0.8rem; }
.btn-block { width: 100%; }

/* Alerts / toasts */
.toast-wrap {
  position: fixed;
  /* Anchored below the fixed floating header so a toast is always visible
     and never overlaps the nav, no matter how far the page is scrolled
     (e.g. after a demo import completes). */
  top: 88px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 861px) {
  /* Two-row floating header on desktop is taller than the single-row bar. */
  .toast-wrap { top: 122px; }
}
@media (max-width: 640px) {
  .toast-wrap { left: 16px; right: 16px; top: 88px; }
  .toast { max-width: none; width: 100%; }
}
.toast {
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--toast-bg);
  color: var(--ink-1);
  box-shadow: var(--shadow-md);
  animation: slideIn 0.3s ease;
  max-width: 340px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--accent); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }


/* ============ Header search ============ */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
}
.nav-search-desktop { margin: 0 16px 0 0; }
.nav-search-mobile { max-width: none; margin: 12px 0; }
.nav-search input {
  width: 100%;
  padding: 9px 14px;
  padding-right: 40px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  /* Glass-on-glass wash matching the round header buttons, so the search
     field melts into the frosted panel/pill instead of sitting as an opaque
     chip (same recipe for mobile panel and desktop inline box). */
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) clamp(16%, calc(var(--glass-opacity) - 44%), 55%), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(25,23,20,0.05);
  color: var(--ink-1);
  font-size: 0.88rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
body.glass-off .nav-search input {
  background: var(--surface);
  box-shadow: none;
}
.nav-search input::placeholder { color: var(--ink-3); }
.nav-search input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,0.28); }
.nav-search button {
  position: absolute;
  right: 2px;
  margin-left: -38px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 999px;
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-search button:hover { color: var(--accent); }
}

/* Mobile search toggle + slide-down panel (kept inside the sticky header) */
.nav-search-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* "Glass on glass": a low-alpha wash so the frosted pill shows through the
     button. No nested backdrop-filter here — it would be trapped by the
     isolated .nav-inner (view-transition-name), and the pill behind is already
     blurred anyway; translucency alone sells the layered look. */
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) clamp(16%, calc(var(--glass-opacity) - 44%), 55%), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(25,23,20,0.05);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
body.glass-off .nav-search-toggle {
  background: var(--surface);
  box-shadow: none;
}
.nav-search-toggle .icon-close { display: none; }
.nav-search-toggle.open .icon-search { display: none; }
.nav-search-toggle.open .icon-close { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .nav-search-toggle:hover { border-color: var(--accent); color: var(--accent); }
}

.nav-search-panel {
  display: none;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 86px;
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 14px 18px;
  pointer-events: auto;
}
body.glass-off .nav-search-panel {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-lg);
}
.nav-search-panel .container { padding: 0; }
.nav-search-panel.open { display: block; }

/* ============ Header style variants ============ */
@media (min-width: 861px) {
  /* Full: keep the inline search box; no extra icon toggle needed. */
  body.header-full .nav-search-toggle { display: none; }

  /* Compact: the desktop search collapses to an icon toggle that opens the
     slide-down panel (same one used on mobile). */
  body.header-compact .nav-search-desktop { display: none; }
  body.header-compact .nav-search-toggle { display: inline-flex; }

  /* Minimal: no inline box, but keep the icon so desktop search stays
     reachable (previously it hid both and left desktop with no search). */
  body.header-minimal .nav-search-desktop { display: none; }
  body.header-minimal .nav-search-toggle { display: inline-flex; }
}

/* Nav active state */
.nav-links a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) clamp(16%, calc(var(--glass-opacity) - 44%), 55%), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(25,23,20,0.05);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  /* Deepen the same translucent wash on hover instead of a solid fill. */
  .nav-burger:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg) clamp(30%, calc(var(--glass-opacity) - 30%), 68%), transparent);
  }
}
body.glass-off .nav-burger {
  background: var(--surface);
  box-shadow: none;
}
body.glass-off .nav-burger:hover { background: var(--surface-2); }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink-2); margin: 0 auto; border-radius: 2px; transition: background-color 0.25s, transform 0.25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

/* Mobile nav */
.nav-mobile {
  display: none;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 86px;
  box-sizing: border-box;
  /* On short screens the drawer is taller than the viewport; the links list
     scrolls internally while the footer row (View Site / Log out) stays
     pinned at the bottom (body scroll is locked while the drawer is open). */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  pointer-events: auto;
}
body.glass-off .nav-mobile {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-mobile .container { padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-mobile-links::-webkit-scrollbar { display: none; }
.nav-mobile-links a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.nav-mobile-links a .nav-ic { flex: none; color: var(--ink-3); display: inline-flex; }
.nav-mobile-links a.active .nav-ic { color: var(--accent); }
.nav-mobile-links a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .nav-mobile-links a:hover .nav-ic { color: var(--accent); }
  .nav-mobile-links a:hover { color: var(--ink-1); background: var(--surface-2); }
}

/* View Site / Log out side by side, pinned to the bottom of the mobile drawer
   while the menu links scroll above. */
.nav-mobile-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.nav-mobile-row > a,
.nav-mobile-row form,
.nav-mobile-row .nav-mobile-logout {
  flex: 1;
}
.nav-mobile-row > a,
.nav-mobile-row .nav-mobile-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-mobile-row .nav-ic { flex: none; color: var(--ink-3); display: inline-flex; }
.nav-mobile-row form { margin: 0; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .nav-mobile-row > a:hover .nav-ic { color: var(--accent); }
  .nav-mobile-row > a:hover { color: var(--ink-1); background: var(--surface-2); }
}

/* Mobile drawer reveal: the panel pops in and the items reveal one-by-one
   with an elastic overshoot, like Chrome's menu. Per-item stagger comes from
   the --i custom property set in JS (nav-item-reveal keyframes). */
@keyframes nav-menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-item-reveal {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.nav-mobile.open {
  display: flex;
  animation: nav-menu-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.nav-mobile.open .nav-mobile-links a,
.nav-mobile.open .nav-mobile-row {
  animation: nav-item-reveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile.open { animation: none; }
  .nav-mobile.open .nav-mobile-links a,
  .nav-mobile.open .nav-mobile-row {
    animation: none;
  }
}


/* ============ Home layout ============ */
.search-head { margin: 28px 0 8px; }
.search-head h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-1); }
.search-head span { color: var(--ink-3); font-size: 0.9rem; }

/* Archive pages (category / author) */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 6px 0 2px;
}
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color 0.15s ease; }
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--accent); }
}
.crumbs-sep { display: inline-flex; align-items: center; color: var(--ink-3); opacity: 0.55; }
.crumbs-current { color: var(--accent); font-weight: 600; }
/* Match the article page's breadcrumb (padding + spacing) so archive and
   author pages read consistently with it. */
.archive-head { padding: 46px 0 0; }
.archive-head .crumbs {
  margin: 0 0 12px;
  gap: 5px;
  font-size: 0.8rem;
}
.archive-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 36px;
  margin: 24px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(1100px 340px at 10% -30%, var(--accent-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.archive-hero-body { min-width: 0; }
.archive-hero h1 { font-family: var(--font-display); font-size: var(--heading-h1); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--heading-color); margin: 4px 0 8px; }
.archive-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.archive-meta { color: var(--ink-3); font-size: 0.92rem; margin: 0; }
.archive-hero .btn { margin-top: 18px; }
.archive-hero-total {
  flex-shrink: 0;
  min-width: 96px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--bg-soft);
  padding: 12px 16px;
  text-align: center;
}
.archive-hero-total-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent); }
.archive-hero-total-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.archive-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-md);
}
.archive-hero .archive-avatar { margin-inline-end: 4px; }
.archive-avatar-img { object-fit: cover; background: var(--surface-2); box-shadow: var(--shadow-md); }
@media (max-width: 640px) {
  .archive-hero { flex-wrap: wrap; padding: 28px 22px; }
  .archive-hero h1 { font-size: 1.7rem; }
  .archive-hero-total { min-width: 72px; min-height: 72px; }
  .archive-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
}
.home-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; margin-top: 24px; }
.home-main { min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 88px; }

/* Widgets */
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease;
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-1);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.widget-title .widget-icon { vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.rank-list { display: flex; flex-direction: column; }
.rank-item { display: flex; gap: 14px; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--border); align-items: flex-start; }
.rank-item:last-child { border-bottom: none; padding-bottom: 0; }
.rank-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  min-width: 26px;
}
.rank-body { display: flex; flex-direction: column; gap: 3px; }
.rank-title { color: var(--ink-1); font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .rank-item:hover .rank-title { color: var(--accent); }
}
.rank-meta { color: var(--ink-3); font-size: 0.78rem; }
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--border); }
.mini-item:last-child { border-bottom: none; padding-bottom: 0; }
.mini-title { color: var(--ink-1); font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .mini-item:hover .mini-title { color: var(--accent); }
}
.mini-meta { color: var(--ink-3); font-size: 0.78rem; }
.cat-list { display: flex; flex-direction: column; }
.cat-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.cat-item:last-child { border-bottom: none; padding-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .cat-item:hover { color: var(--accent); }
}
.cat-item-active { color: var(--accent); font-weight: 600; }
.cat-item-active .cat-count { background: var(--accent); color: var(--accent-ink); }
.cat-count {
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.chip-count { opacity: 0.65; font-size: 0.78em; }

/* Empty state (improved) */
.empty { text-align: center; padding: 70px 20px; color: var(--ink-3); }
.empty h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-1); margin-bottom: 8px; }
.empty p { margin-bottom: 20px; }


/* ============ Footer ============ */
.footer {
  margin-top: 56px;
  padding-top: 1px;
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  background: var(--bg-soft);
}
.container.footer-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 24px 36px;
  text-align: center;
}
.footer-stack .brand { font-size: 1.3rem; }
.footer .brand .brand-mark { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
.footer-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  max-width: 720px;
}
.footer-pages a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.18s, background-color 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .footer-pages a:hover { color: var(--ink-1); background: var(--surface-2); }
}
.footer-copyright {
  color: var(--ink-3);
  font-size: 0.84rem;
  margin: 2px 0 0;
}
.back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s, visibility 0.2s, bottom 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .back-top:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); }
}
/* Hidden when the footer is in view (no need to go to top from the bottom). */
.back-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
body.glass-off .back-top {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 860px) {
  .back-top { right: 16px; bottom: 22px; }
  .brand { max-width: none; }
}

/* Clear the fixed back-to-top / admin buttons at the bottom corners.
   (The FAB is hidden when the footer is in view via JS, so only a small
   baseline is needed.) */
footer { padding-bottom: 56px; }

/* On article pages the mobile sticky share bar sits at the bottom, so lift
   the FAB above it. The lift is driven by body.has-sticky-share (toggled in
   app.js on every same-document swap) so it follows the actual page and the
   FAB eases between positions. The sticky share bar hides itself once the
   footer is in view (like the FAB), so the footer needs no extra clearance. */

/* ============ Error pages ============ */.error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.error-code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; line-height: 1; color: var(--accent); }
.error-page h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--heading-color); margin: 16px 0 10px; }
.error-page p { color: var(--ink-2); max-width: 480px; margin-bottom: 28px; }
.error-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }


/* ============ Cookie consent banner ============ */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 950;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-consent.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-consent-text { font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.cookie-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-consent-actions .btn { font-size: 0.85rem; }
@media (max-width: 640px) {
  .cookie-consent { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .cookie-consent-actions { flex-direction: column; }
  .cookie-consent-actions .btn { width: 100%; }
}

/* ============ Pagination ============ */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0;
}
.page-info {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.pagination-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  a.page-link:hover { border-color: var(--accent); color: var(--accent); }
}
.page-link.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.page-link.disabled { opacity: 0.5; cursor: not-allowed; }
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  color: var(--ink-3);
  font-size: 0.88rem;
  user-select: none;
}

@media (max-width: 640px) {
  .pagination { gap: 8px; padding: 20px 0; }
  .pagination-links { gap: 5px; }
  .page-link { min-width: 40px; height: 40px; padding: 0 10px; font-size: 0.85rem; }
  .page-ellipsis { min-width: 30px; height: 36px; }
  .page-link[rel="prev"], .page-link[rel="next"] { min-width: 0; padding: 0 12px; }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-side { position: static; }
}

@media (max-width: 860px) {
  :root, :root[data-theme="light"], :root[data-theme="dark"], :root:not([data-theme="light"]) { --heading-h1: clamp(1.7rem, 5vw, 2.6rem) !important; --heading-h2: 1.2rem !important; --heading-h3: 1.6rem !important; --heading-h4: 1.3rem !important; }
  .nav { padding: 10px 12px 0; }
  .nav::before { inset: 10px 12px 0; border-radius: 14px; }
  .nav-inner { height: 56px; padding: 0 14px; flex-direction: row; align-items: center; }
  .nav-top { flex: 1 1 auto; min-width: 0; }
  .nav-bottom { display: none; }
  .nav-search-panel { left: 12px; right: 12px; top: 76px; }
  .nav-mobile { left: 12px; right: 12px; top: 76px; }
  main { padding-top: 76px; }
  .nav-search-desktop { display: none; }
  .nav-search-toggle { display: inline-flex; }
   .nav-burger { display: flex; }
  .nav-mobile.open { display: flex; }
  .hero-slide { min-height: var(--hero-h-mob, 400px); }
}

/* Footer stays centered on phones too; just tighten the spacing. */
@media (max-width: 640px) {
  .container.footer-stack { gap: 14px; padding: 40px 16px 26px; }
  .footer-stack .brand { font-size: 1.1rem; }
  .footer .brand .brand-mark,
  .footer .brand .brand-logo { width: 30px; height: 30px; }
  .footer-pages a { font-size: 0.88rem; padding: 6px 12px; }
  .footer-copyright { font-size: 0.78rem; }
}

@media (min-width: 861px) and (max-width: 1080px) {
  /* Between mobile and full desktop, give the search room to shrink so the
     brand + nav links never collide with it. */
  .nav-search { max-width: 220px; }
}

@media (max-width: 640px) {
  .article-body { padding: 16px 14px; max-width: none; }
  .article-body .block { margin-bottom: 12px; }
  .article-body .block p { font-size: 0.97rem; line-height: 1.65; }
  .article-body .block h1 { font-size: 1.5rem; }
  .article-body .block h2 { font-size: 1.3rem; }
  .article-body .block h3 { font-size: 1.15rem; }
  .article-body .blockquote { padding: 12px 16px; font-size: 1rem; }
  .article-body pre.code { padding: 14px 16px; font-size: 0.83rem; }
  .article-body .callout { padding: 14px 16px; }
  .article-body ul.block-list, .article-body ol.block-list { padding-left: 20px; }
  .article-hero { padding: 8px 0 10px; }
  .article-head { padding-top: 14px; }
  .article-head .crumbs { margin-bottom: 6px; }
  .archive-head { padding-top: 14px; }
  .archive-head .crumbs { margin-bottom: 6px; }
  .article-hero h1 { font-size: 1.5rem; line-height: 1.22; }
  .article-meta-row { gap: 8px 14px; font-size: 0.8rem; margin-top: 12px; }
  .article-cover { max-height: 240px; margin: 16px auto; }
  .container { padding: 0 14px; }
  .grid { grid-template-columns: 1fr; }
  .hero-slide { min-height: var(--hero-h-mob, 380px); }
  .hero-slide-content p { -webkit-line-clamp: 3; }
  .hero-arrow { width: 40px; height: 40px; font-size: 1rem; }
}

/* =============================================================
   Native-app feel: page transitions, loading bar, entrance
   ============================================================= */

/* Top loading indicator (plays once on every page load) */
.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}
.nav-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--accent);
  border-radius: 0 3px 3px 0;
  animation: nav-progress-run 1.9s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
.nav-progress.run { opacity: 1; }
@keyframes nav-progress-run {
  0% { width: 0; }
  55% { width: 62%; }
  100% { width: 92%; opacity: 0; }
}

/* View-transition animations.
   The whole page transitions as one image (the Turbo/Hotwire pattern).
   Animating just the content column breaks when two pages differ in height
   (the layout reflows mid-swap, so the old snapshot overlaps or gaps the
   footer) and a horizontal slide on a transparent <main> exposes the page
   background. A whole-page crossfade+slide morphs height changes naturally
   and, because navigation is same-document and prefetched, only costs
   compositor work. */
@keyframes vt-old-fwd { from { transform: none; opacity: 1; } to { transform: translateX(-3%); opacity: 0.6; } }
@keyframes vt-new-fwd { from { transform: translateX(3%); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes vt-old-back { from { transform: none; opacity: 1; } to { transform: translateX(3%); opacity: 0.6; } }
@keyframes vt-new-back { from { transform: translateX(-3%); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes vt-crossfade { from { opacity: 0.4; } to { opacity: 1; } }

::view-transition-old(root),
::view-transition-new(root) {
  height: 100%;
  width: 100%;
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
html[data-navdir="forward"]::view-transition-old(root) { animation-name: vt-old-fwd; }
html[data-navdir="forward"]::view-transition-new(root) { animation-name: vt-new-fwd; }
html[data-navdir="back"]::view-transition-old(root) { animation-name: vt-old-back; }
html[data-navdir="back"]::view-transition-new(root) { animation-name: vt-new-back; }
html:not([data-navdir])::view-transition-old(root),
html:not([data-navdir])::view-transition-new(root) { animation-name: vt-crossfade; animation-duration: 0.2s; }

/* The floating header must not participate in the page transition: it is a
   persistent global element, so its captured "old" and "new" snapshots must
   not cross-fade (or blend-plus-lighter) while the content slides underneath.
   Leaving the UA defaults in place makes the header flash/flicker on every
   swap, so pin the site-nav group to no animation.
   BUT the UA defaults also set ::view-transition-new to opacity: 0 (its fade-in
   animation brings it up). With animation: none that would leave the incoming
   header invisible for the whole transition — on a cross-document navigation
   (public -> admin, where the header content actually changes) the new header
   would only appear after the transition ends. So pin the group with explicit
   opacity: old hidden, new shown instantly. */
::view-transition-old(site-nav) {
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: 0;
}
::view-transition-new(site-nav) {
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}

/* The admin left sidebar is a persistent global element too, so it must stay
   put while the content swaps underneath. It has its own view-transition-name
   (set on .admin-sidebar) to isolate it from the root snapshot; pin its group
   so it never slides, fades, or blends with the incoming content. */
::view-transition-old(admin-sidebar) {
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: 0;
}
::view-transition-new(admin-sidebar) {
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}

/* Entrance animation for same-document swaps when View Transitions are
   unavailable. It is applied transiently by app.js, so a normal page load or
   reload never replays it. Horizontal only, to match the view-transition
   slide (no vertical movement). */
@keyframes page-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body.js-nav main.swapped,
  body.js-nav .main.swapped { animation: page-enter 0.34s ease-out both; }
}

/* Reduced motion: no transitions at all */
@media (prefers-reduced-motion: reduce) {
  html[data-navdir]::view-transition-old(root),
  html[data-navdir]::view-transition-new(root) { animation: none !important; }
  .nav-progress::after { animation: none; }
  .nav-progress { display: none; }
}

/* Cross-document page transitions: real navigations — e.g. the article editor,
   which is intentionally never swapped in-place — animate with the same
   fade as the in-app swaps. Ignored by browsers without support. */
@view-transition {
  navigation: auto;
}


/* ============ Header layout variants (desktop) ============ */
@media (min-width: 861px) {
  /* Modern: nav links flush-left under the brand */
  body.header-variant-modern .nav-bottom { justify-content: flex-start; }
  body.header-variant-modern .nav-bottom .nav-links { justify-content: flex-start; }

  /* Centered: brand centered on its row, actions pinned right */
  body.header-variant-centered .nav-top { position: relative; }
  body.header-variant-centered .brand { margin: 0 auto; }
  body.header-variant-centered .nav-top-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  /* Floating: the header floats with more air around it */
  body.header-variant-floating .nav { padding: 18px 28px 0; }
  body.header-variant-floating .nav-inner { max-width: 1080px; }
  body.header-variant-floating .nav::before { inset: 8px 24px 0; }
}

/* ============ Sidebar widgets ============ */
.widget-search-form { display: flex; gap: 6px; margin-top: 4px; }
.widget-search-form input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-1);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}
.widget-search-form input:focus-visible { border-color: var(--accent); }
.widget-search-form button {
  flex: none; width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.widget-text { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* Registered design tokens so theme changes transition smoothly instead of
   snapping. Browsers without @property support fall back to an instant swap. */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #7c5c30; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #9a7542; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(124,92,48,0.09); }
@property --heading-color { syntax: '<color>'; inherits: true; initial-value: #191714; }
:root { transition: --accent 0.6s ease, --accent-2 0.6s ease, --accent-soft 0.6s ease, --heading-color 0.6s ease; }