/* ==========================================================================
   00-reset.css — CSS reset / normalize rules
   ========================================================================== */

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

html,body {
  width:100%;
  max-width:100%
}

html {
  overflow-x:clip;
  scrollbar-gutter:auto;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}

::-webkit-scrollbar {
  width:8px;
  height:8px
}

::-webkit-scrollbar-track {
  background:transparent
}

::-webkit-scrollbar-thumb {
  background:var(--color-gray-300);
  border-radius:4px;
  border:2px solid transparent;
  background-clip:padding-box
}

::-webkit-scrollbar-thumb:hover {
  background:var(--color-gray-400)
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important
  }
}
/* ==========================================================================
   01-variables.css — CSS custom properties (colors, fonts, spacing) light+dark
   ========================================================================== */

:root {
  --color-bg-primary:#fafafa;
  --color-bg-elevated:#fff;
  --color-white:#fff;
  --color-gray-50:#f8f9fa;
  --color-gray-100:#f1f3f5;
  --color-gray-200:#e9ecef;
  --color-gray-300:#dee2e6;
  --color-gray-400:#adb5bd;
  --color-gray-500:#868e96;
  --color-gray-600:#495057;
  --color-gray-700:#343a40;
  --color-gray-800:#212529;
  --color-gray-900:#0f1419;
  --color-primary-25:#faf5ff;
  --color-primary-50:#f5f3ff;
  --color-primary-100:#ede9fe;
  --color-primary-200:#ddd6fe;
  --color-primary-300:#c4b5fd;
  --color-primary-400:#a78bfa;
  --color-primary-500:#8b5cf6;
  --color-primary-600:#7c3aed;
  --color-primary-700:#6d28d9;
  --color-success:#22c55e;
  --color-error:#ef4444;
  --gradient-primary:linear-gradient(135deg,var(--color-primary-600) 0,var(--color-primary-500) 50%,var(--color-primary-400) 100%);
  --color-primary-contrast:#fff;
  --font-family:'Inter',system-ui,-apple-system,sans-serif;
  --font-family-display:'Inter',system-ui,-apple-system,sans-serif;
  --font-family-editorial:'Newsreader',Georgia,serif;
  --font-family-mono:'JetBrains Mono','Fira Code',monospace;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-base:.9375rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --leading-tight:1.2;
  --leading-snug:1.35;
  --leading-relaxed:1.65;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-full:9999px;
  --container-max:1120px;
  --content-max:720px;
  --header-height:68px
}
/* ==========================================================================
   02-typography.css — Font faces, heading styles, body text, links, lists
   ========================================================================== */

@font-face {
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-var.woff2') format('woff2')
}

@font-face {
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-var.woff2') format('woff2')
}

@font-face {
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2')
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-family-display);
  font-weight:var(--font-semibold);
  line-height:var(--leading-tight);
  color:var(--color-gray-900);
  margin-top:0;
  margin-bottom:var(--space-4);
  overflow-wrap:break-word;
  word-wrap:break-word
}

p {
  margin-top:0;
  margin-bottom:var(--space-4);
  line-height:var(--leading-relaxed)
}

li:last-child,p:last-child {
  margin-bottom:0
}

h1+p,h2+p,h3+p,h4+p,h5+p,h6+p {
  margin-top:var(--space-2)
}

p+h2,p+h3,p+h4 {
  margin-top:var(--space-10)
}

ol,ul {
  margin-top:0;
  margin-bottom:var(--space-4);
  padding-left:var(--space-6)
}

li {
  margin-bottom:var(--space-2);
  line-height:var(--leading-relaxed)
}
/* ==========================================================================
   03-layout.css — Container, grid, flexbox utilities, page layout
   ========================================================================== */

.container {
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6)
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  padding:var(--space-4) var(--space-6);
  max-width:var(--container-max);
  margin:0 auto var(--space-6)
}

.suggestions h3 {
  font-size:11px;
  font-weight:var(--font-semibold);
  color:var(--color-gray-500);
  text-transform:uppercase;
  margin:0 0 var(--space-5)
}

main.container,main>.container {
  max-width:var(--container-max);
  margin-inline:auto;
  width:100%
}

.section {
  padding:var(--space-8) var(--space-6);
  max-width:var(--container-max);
  margin:0 auto var(--space-6)
}

.error-page {
  text-align:center;
  padding:clamp(3rem,8vw,6rem) var(--space-6);
  max-width:480px;
  margin:0 auto;
  position:relative;
  overflow:hidden
}

.suggestions h2 {
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-400);
  margin:0 0 var(--space-4);
  text-transform:uppercase;
  margin-bottom:var(--space-4)
}

.suggestions ul {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:var(--space-4);
  justify-content:center;
  flex-wrap:wrap
}

.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-6);
  padding-bottom:0;
  border-bottom:none
}

.section-title {
  font-family:var(--font-family-display);
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--color-gray-900);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin:0
}

.section-title-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-primary-500);
  flex-shrink:0
}

.section-link {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.8125rem;
  font-weight:500;
  color:var(--color-primary-600);
  text-decoration:none
}

.section-link:hover {
  gap:.5rem;
  color:var(--color-primary-700)
}

.error-message {
  font-size:.875rem;
  color:var(--color-gray-500);
  margin-bottom:var(--space-8);
  max-width:380px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.65;
  margin:0 0 var(--space-6)
}

.error-search {
  max-width:420px;
  margin:0 auto var(--space-8)
}

.suggestions {
  text-align:center;
  font-size:var(--text-sm)
}

.suggestions a {
  color:var(--color-primary-600);
  text-decoration:none
}

.suggestions a:hover {
  color:var(--color-primary-700);
  text-decoration:underline
}

.breadcrumb a {
  color:var(--color-gray-600);
  text-decoration:none
}

.breadcrumb a:hover {
  color:var(--color-primary-600)
}

.breadcrumb-separator {
  color:var(--color-gray-300)
}

body {
  display:flex;
  flex-direction:column;
  min-height:100vh
}

main {
  max-width:100%;
  padding:0;
  box-sizing:border-box;
  flex:1 0 auto
}

main .container {
  padding:0
}

body {
  font-family:var(--font-family),system-ui,-apple-system,sans-serif;
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-gray-800);
  background:var(--color-bg-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  margin:0;
  letter-spacing:-.01em;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  scrollbar-width:thin;
  scrollbar-color:var(--color-gray-300) transparent
}

.suggestions li a {
  padding:.375rem .75rem;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  font-size:var(--text-sm)
}

.suggestions li a:hover {
  border-color:var(--color-primary-300);
  background:var(--color-primary-25);
  text-decoration:none
}

.suggestion-item:hover,.suggestion-item.active {
  background:var(--color-gray-50)
}

.suggestion-empty {
  padding:var(--space-4) var(--space-5);
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  text-align:center
}

.error-code {
  font-size:clamp(4rem,10vw,6rem);
  font-weight:800;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0 0 var(--space-2);
  line-height:1
}

.error-title {
  font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-4);
  font-family:var(--font-family-editorial),Georgia,serif
}

.error-illustration {
  margin-bottom:var(--space-4)
}

.error-actions {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:var(--space-8)
}

.empty-state {
  text-align:center;
  padding:var(--space-10) var(--space-6)
}

.empty-state-illustration {
  margin-bottom:var(--space-6)
}

.empty-state-title {
  font-size:1.25rem;
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-3);
  font-family:var(--font-family-editorial),Georgia,serif
}

.empty-state-description {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  line-height:1.65;
  max-width:400px;
  margin:0 auto var(--space-6)
}

.empty-state-description a {
  color:var(--color-primary-600);
  text-decoration:underline;
  text-underline-offset:3px
}

.empty-state-actions {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap
}

/* --- Contact page: Section 1 — Hero gradient --- */
.contact-hero-gradient {
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:clamp(3rem,8vw,5rem) var(--space-6) clamp(2.5rem,6vw,4rem);
  position:relative;
  overflow:hidden
}

.contact-hero-gradient-inner {
  max-width:640px;
  margin:0 auto;
  position:relative;
  z-index:1
}

.contact-hero-gradient-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.75rem,4.5vw + .5rem,3rem);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  margin:0 0 var(--space-4)
}

.contact-hero-gradient-subtitle {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:rgba(255,255,255,.85);
  line-height:1.65;
  max-width:520px;
  margin:0 auto
}

/* --- Contact page: Section 2 — Form + Channels side-by-side --- */
.contact-body {
  padding:var(--space-10) var(--space-6)
}

.contact-body-inner {
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:var(--space-6);
  align-items:stretch
}

.contact-form-section-inner {
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  padding:var(--space-8)
}

.contact-channels {
  display:flex;
  flex-direction:column;
  gap:var(--space-4)
}

.contact-channel-card {
  flex:1;
  padding:var(--space-5);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  transition:border-color .2s,transform .2s
}

.contact-channel-card:hover {
  border-color:var(--color-primary-200);
  transform:translateY(-2px)
}

.contact-channel-icon {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-3)
}

.contact-channel-icon--email {
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  color:#4f46e5
}

.contact-channel-icon--github {
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  color:#1f2937
}

.contact-channel-icon--clock {
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#d97706
}

.contact-channel-card h3 {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  margin:0 0 var(--space-1);
  color:var(--color-gray-900)
}

.contact-channel-card p {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.5;
  margin:0 0 var(--space-2)
}

.contact-channel-link {
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-primary-600);
  text-decoration:none
}

.contact-channel-link:hover {
  text-decoration:underline
}

.contact-channel-detail {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  font-weight:var(--font-medium)
}

/* --- Contact page: Section 4 — FAQ --- */
.contact-faq {
  padding:var(--space-4) var(--space-6) var(--space-10);
  background:var(--color-gray-50)
}

.contact-faq-inner {
  max-width:var(--container-max);
  margin:0 auto
}

.contact-faq-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-5)
}

.contact-faq-item {
  padding:var(--space-5);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl)
}

.contact-faq-item h3 {
  font-size:var(--text-base);
  font-weight:var(--font-semibold);
  color:var(--color-gray-900);
  margin:0 0 var(--space-2)
}

.contact-faq-item p {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.65;
  margin:0
}

/* --- Contact page: Section 5 — CTA gradient --- */
.contact-cta-gradient {
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:var(--space-12) var(--space-6)
}

.contact-cta-gradient-inner {
  max-width:560px;
  margin:0 auto
}

.contact-cta-gradient-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  color:#fff;
  margin:0 0 var(--space-4);
  line-height:1.2
}

.contact-cta-gradient-subtitle {
  font-size:clamp(.875rem,1.5vw,1rem);
  color:rgba(255,255,255,.8);
  line-height:1.65;
  margin:0 0 var(--space-6)
}

.contact-cta-gradient-actions {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap
}

/* --- Contact page: Section 6 — The Showdown --- */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.showdown {
  background:var(--color-gray-50);
  color:var(--color-gray-900);
  padding:clamp(3rem,8vw,5rem) var(--space-6);
  overflow:hidden;
  position:relative;
  border-top:1px solid var(--color-gray-100);
  border-bottom:1px solid var(--color-gray-100)
}

.showdown-inner {
  max-width:860px;
  margin:0 auto;
  position:relative;
  text-align:center
}

.showdown-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-2)
}

.showdown-sub {
  font-size:clamp(.875rem,1.5vw,1rem);
  color:var(--color-gray-600);
  margin:0 0 var(--space-8)
}

/* Countdown lights */
.showdown-countdown {
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  margin-bottom:var(--space-8)
}

.showdown-light {
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--color-gray-200);
  border:2px solid var(--color-gray-300)
}

.showdown.active .showdown-light:nth-child(1) {
  animation:sd-light-red .4s .4s ease forwards
}

.showdown.active .showdown-light:nth-child(2) {
  animation:sd-light-yellow .4s .9s ease forwards
}

.showdown.active .showdown-light:nth-child(3) {
  animation:sd-light-green .4s 1.4s ease forwards
}

/* Round headings */
.showdown-round {
  font-family:var(--font-family-display);
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-400);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 var(--space-5);
  opacity:0
}

/* Race lanes */
.showdown-race {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-2);
  text-align:left
}

.showdown-lane-head {
  display:flex;
  align-items:baseline;
  gap:var(--space-2);
  margin-bottom:var(--space-1)
}

.showdown-name {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-700);
  min-width:100px
}

.showdown-name--v {
  color:var(--color-primary-600)
}

.showdown-tech {
  font-size:var(--text-xs);
  color:var(--color-gray-600);
  font-weight:var(--font-medium)
}

.showdown-tech--v {
  color:var(--color-primary-700)
}

.showdown-time {
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  font-family:var(--font-family-display);
  margin-left:auto;
  opacity:0
}

.sd-time--v { color:var(--color-primary-600);font-size:var(--text-base);font-weight:800 }
.sd-time--ghost { color:var(--color-gray-600) }
.sd-time--strapi { color:var(--color-gray-600) }
.sd-time--drupal { color:var(--color-gray-600) }
.sd-time--joomla { color:var(--color-gray-600) }
.sd-time--wp { color:var(--color-gray-600) }

.showdown.active .sd-time--v { animation:sd-fade-up .3s 2.1s ease forwards }
.showdown.active .sd-time--ghost { animation:sd-fade-up .3s 2.8s ease forwards }
.showdown.active .sd-time--strapi { animation:sd-fade-up .3s 3.0s ease forwards }
.showdown.active .sd-time--drupal { animation:sd-fade-up .3s 3.5s ease forwards }
.showdown.active .sd-time--joomla { animation:sd-fade-up .3s 3.7s ease forwards }
.showdown.active .sd-time--wp { animation:sd-fade-up .3s 4.2s ease forwards }

/* Track + bars */
.showdown-track {
  height:28px;
  background:var(--color-gray-100);
  border-radius:14px;
  overflow:hidden;
  position:relative
}

.showdown-bar {
  height:100%;
  width:0;
  border-radius:14px
}

.sd-bar--v {
  background:var(--gradient-primary);
  box-shadow:0 2px 8px color-mix(in srgb,var(--color-primary-600) 25%,transparent);
  --sd-fill-to:6%
}

.sd-bar--ghost {
  background:linear-gradient(90deg,var(--color-gray-200),var(--color-gray-300));
  --sd-fill-to:28%
}

.sd-bar--strapi {
  background:linear-gradient(90deg,var(--color-gray-200),var(--color-gray-300));
  --sd-fill-to:37%
}

.sd-bar--drupal {
  background:linear-gradient(90deg,var(--color-gray-200),var(--color-gray-300));
  --sd-fill-to:69%
}

.sd-bar--joomla {
  background:linear-gradient(90deg,var(--color-gray-200),var(--color-gray-300));
  --sd-fill-to:80%
}

.sd-bar--wp {
  background:linear-gradient(90deg,var(--color-gray-200),var(--color-gray-300));
  --sd-fill-to:100%
}

.showdown.active .sd-bar--v {
  animation:sd-fill .4s 1.8s cubic-bezier(.16,1,.3,1) forwards
}

.showdown.active .sd-bar--ghost {
  animation:sd-fill .8s 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

.showdown.active .sd-bar--strapi {
  animation:sd-fill 1s 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

.showdown.active .sd-bar--drupal {
  animation:sd-fill 1.5s 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

.showdown.active .sd-bar--joomla {
  animation:sd-fill 1.7s 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

.showdown.active .sd-bar--wp {
  animation:sd-fill 2.2s 1.8s linear forwards
}

/* Feature comparison table */
.showdown-table-wrap {
  overflow-x:auto;
  margin-bottom:var(--space-8);
  -webkit-overflow-scrolling:touch
}

.showdown-table {
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
  text-align:left;
  min-width:600px
}

.showdown-table thead {
  border-bottom:2px solid var(--color-gray-200)
}

.showdown-table th,
.showdown-table td {
  padding:var(--space-3) var(--space-4);
  white-space:nowrap
}

.showdown-table thead th {
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--color-gray-400);
  text-transform:uppercase;
  letter-spacing:.05em
}

.showdown-table tbody th {
  font-weight:var(--font-medium);
  color:var(--color-gray-700)
}

.showdown-table tbody td {
  color:var(--color-gray-400)
}

.showdown-table tbody tr {
  border-bottom:1px solid var(--color-gray-100)
}

.showdown-table tbody tr:last-child {
  border-bottom:none
}

.sd-col--v {
  color:var(--color-primary-600) !important
}

.sd-cell--v {
  color:var(--color-primary-600) !important;
  font-weight:var(--font-medium)
}

.sd-cell--check {
  color:var(--color-success) !important;
  font-size:var(--text-base)
}

.sd-cell--dash {
  color:var(--color-gray-300) !important
}

/* Punchline */
.showdown-punchline {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.5rem,3.5vw,2.5rem);
  font-weight:700;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:var(--color-primary-600);
  margin:0;
  opacity:0
}

.showdown.active .showdown-punchline {
  animation:sd-fade-up .6s 4.5s ease forwards
}

/* Feature comparison — standalone section */
.showdown-compare {
  padding:clamp(2.5rem,6vw,4rem) var(--space-6);
  background:var(--color-bg-primary);
  color:var(--color-gray-900)
}

.showdown-compare-inner {
  max-width:860px;
  margin:0 auto
}

/* Keyframes */
@keyframes sd-fade-up {
  from { opacity:0;transform:translateY(12px) }
  to { opacity:1;transform:translateY(0) }
}

@keyframes sd-fill {
  from { width:0 }
  to { width:var(--sd-fill-to) }
}

@keyframes sd-light-red {
  0% { background:var(--color-gray-200);box-shadow:none }
  50% { background:#ef4444;box-shadow:0 0 16px #ef4444,0 0 32px rgba(239,68,68,.3) }
  100% { background:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.5) }
}

@keyframes sd-light-yellow {
  0% { background:var(--color-gray-200);box-shadow:none }
  50% { background:#eab308;box-shadow:0 0 16px #eab308,0 0 32px rgba(234,179,8,.3) }
  100% { background:#eab308;box-shadow:0 0 12px rgba(234,179,8,.5) }
}

@keyframes sd-light-green {
  0% { background:var(--color-gray-200);box-shadow:none }
  50% { background:#22c55e;box-shadow:0 0 16px #22c55e,0 0 32px rgba(34,197,94,.3) }
  100% { background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.5) }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion:reduce) {
  .showdown .showdown-time,
  .showdown .showdown-punchline {
    opacity:1;
    transform:none;
    animation:none !important
  }
  .showdown .showdown-bar {
    width:var(--sd-fill-to,0);
    animation:none !important
  }
  .showdown .showdown-light:nth-child(1) {
    background:#ef4444;
    animation:none !important
  }
  .showdown .showdown-light:nth-child(2) {
    background:#eab308;
    animation:none !important
  }
  .showdown .showdown-light:nth-child(3) {
    background:#22c55e;
    animation:none !important
  }
}

/* --- About page: Section 1 — Hero gradient --- */
.about-hero-gradient {
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:clamp(3rem,8vw,5rem) var(--space-6) clamp(2.5rem,6vw,4rem);
  position:relative;
  overflow:hidden
}

.about-hero-gradient-inner {
  max-width:720px;
  margin:0 auto;
  position:relative;
  z-index:1
}

.about-hero-gradient-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.75rem,4.5vw + .5rem,3rem);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  margin:0 0 var(--space-4)
}

.about-hero-gradient-subtitle {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:rgba(255,255,255,.85);
  line-height:1.65;
  max-width:560px;
  margin:0 auto var(--space-6)
}

.about-hero-badge {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:.375rem 1rem .375rem .75rem;
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-full);
  backdrop-filter:blur(4px)
}

/* --- About page: Section 2 — Problem --- */
.about-problem {
  padding:var(--space-10) var(--space-6)
}

.about-problem-inner {
  max-width:680px;
  margin:0 auto;
  text-align:center
}

.about-problem-stat {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-5);
  line-height:1.2
}

.about-problem-text {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:var(--color-gray-600);
  line-height:1.75;
  margin:0 0 var(--space-4)
}

.about-problem-text:last-child {
  font-weight:var(--font-semibold);
  color:var(--color-gray-800);
  margin-bottom:0
}

/* --- About page: Section 3 — Stats bar --- */
.about-stats-bar {
  background:var(--color-gray-50);
  padding:var(--space-8) var(--space-6);
  border-top:1px solid var(--color-gray-100);
  border-bottom:1px solid var(--color-gray-100)
}

.about-stats-bar-inner {
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-6);
  text-align:center
}

.about-stat-number {
  display:block;
  font-family:var(--font-family-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  line-height:1;
  color:var(--color-primary-600);
  margin-bottom:var(--space-2)
}

.about-stat-label {
  display:block;
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  font-weight:var(--font-medium)
}

/* --- About page: Shared section styles --- */
.about-section {
  padding:var(--space-10) var(--space-6)
}

.about-section-alt {
  background:var(--color-gray-50)
}

.about-section-inner {
  max-width:var(--container-max);
  margin:0 auto
}

.about-section-title {
  font-family:var(--font-family-display);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-2)
}

/* --- About page: Section 4 — Core pillar cards --- */
.about-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-5)
}

.about-card {
  padding:var(--space-6);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  transition:border-color .2s,transform .2s
}

.about-card:hover {
  border-color:var(--color-primary-200);
  transform:translateY(-2px)
}

.about-card-icon {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-4)
}

.about-card-icon--perf {
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#d97706
}

.about-card-icon--security {
  background:linear-gradient(135deg,#d1fae5,#a7f3d0);
  color:#059669
}

.about-card-icon--dx {
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  color:#4f46e5
}

.about-card-icon--extend {
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  color:#7c3aed
}

.about-card h3 {
  font-size:var(--text-base);
  font-weight:var(--font-semibold);
  margin:0 0 var(--space-2);
  color:var(--color-gray-900)
}

.about-card p {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.6;
  margin:0
}

/* --- About page: Section 5 — Architecture layer stack --- */
.about-layer-stack {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4)
}

.about-layer-item {
  display:flex;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  transition:border-color .2s,transform .2s
}

.about-layer-item:hover {
  border-color:var(--color-primary-200);
  transform:translateY(-1px)
}

.about-layer-accent {
  width:4px;
  flex-shrink:0
}

.about-layer--rust .about-layer-accent { background:#de723c }
.about-layer--pg .about-layer-accent { background:#336791 }
.about-layer--redis .about-layer-accent { background:#dc382d }
.about-layer--meili .about-layer-accent { background:#ff5caa }
.about-layer--next .about-layer-accent { background:#171717 }
.about-layer--wasm .about-layer-accent { background:#654ff0 }

.about-layer-body {
  padding:var(--space-4) var(--space-5);
  display:flex;
  flex-direction:column;
  gap:2px
}

.about-layer-name {
  font-size:var(--text-base);
  font-weight:var(--font-semibold);
  color:var(--color-gray-900)
}

.about-layer-role {
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  color:var(--color-primary-700);
  text-transform:uppercase;
  letter-spacing:.05em
}

.about-layer-desc {
  font-size:var(--text-xs);
  color:var(--color-gray-600);
  line-height:1.5;
  margin-top:var(--space-1)
}

/* --- About page: Section 6 — Comparison cards --- */
.about-compare-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-5)
}

.about-compare-card {
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:border-color .2s
}

.about-compare-card:hover {
  border-color:var(--color-primary-200)
}

.about-compare-topic {
  font-size:var(--text-base);
  font-weight:700;
  color:var(--color-gray-900);
  padding:var(--space-4) var(--space-5);
  margin:0;
  border-bottom:1px solid var(--color-gray-100)
}

.about-compare-sides {
  display:flex;
  flex-direction:column
}

.about-compare-side {
  padding:var(--space-4) var(--space-5)
}

.about-compare-side--old {
  border-bottom:1px solid var(--color-gray-100);
  background:rgba(239,68,68,.03)
}

.about-compare-side--new {
  background:rgba(34,197,94,.03)
}

.about-compare-label {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:var(--space-2);
  padding:2px 8px;
  border-radius:var(--radius-sm)
}

.about-compare-side--old .about-compare-label {
  color:#b91c1c;
  background:rgba(239,68,68,.1)
}

.about-compare-side--new .about-compare-label {
  color:#166534;
  background:rgba(34,197,94,.15)
}

.about-compare-side p {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.6;
  margin:0
}

/* --- About page: Section 7 — CTA gradient --- */
.about-cta-gradient {
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:var(--space-12) var(--space-6)
}

.about-cta-gradient-inner {
  max-width:560px;
  margin:0 auto
}

.about-cta-gradient-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  color:#fff;
  margin:0 0 var(--space-4);
  line-height:1.2
}

.about-cta-gradient-subtitle {
  font-size:clamp(.875rem,1.5vw,1rem);
  color:rgba(255,255,255,.8);
  line-height:1.65;
  margin:0 0 var(--space-6)
}

.about-cta-gradient-actions {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap
}

.about-cta-btn-primary {
  background:#fff;
  color:var(--color-primary-600);
  font-weight:var(--font-semibold);
  border:none;
  border-radius:var(--radius-lg);
  padding:.625rem 1.5rem;
  text-decoration:none;
  transition:opacity .15s,transform .15s
}

.about-cta-btn-primary:hover {
  opacity:.9;
  transform:translateY(-1px)
}

.about-cta-btn-secondary {
  background:rgba(255,255,255,.15);
  color:#fff;
  font-weight:var(--font-semibold);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-lg);
  padding:.625rem 1.5rem;
  text-decoration:none;
  transition:background .15s,transform .15s
}

.about-cta-btn-secondary:hover {
  background:rgba(255,255,255,.25);
  transform:translateY(-1px)
}

/* ═══════════════════════════════════════════════════════════
   Licensing page
   ═══════════════════════════════════════════════════════════ */

.lic-hero {
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:var(--space-12) var(--space-6) var(--space-10)
}

.lic-hero-inner {
  max-width:640px;
  margin:0 auto
}

.lic-hero-badge {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-full);
  padding:.25rem .75rem;
  margin-bottom:var(--space-4)
}

.lic-hero-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:700;
  line-height:1.15;
  margin:0 0 var(--space-4);
  color:#fff
}

.lic-hero-sub {
  font-size:clamp(.875rem,1.5vw,1.0625rem);
  color:rgba(255,255,255,.85);
  line-height:1.65;
  margin:0
}

/* Pricing cards */
.lic-pricing {
  padding:var(--space-10) var(--space-6);
  background:var(--color-gray-50)
}

.lic-pricing-inner {
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
  align-items:start
}

.lic-card {
  background:var(--color-bg);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  position:relative
}

.lic-card--featured {
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 1px var(--color-primary-500),0 8px 24px rgba(0,0,0,.08)
}

.lic-card-badge {
  position:absolute;
  top:-.625rem;
  left:50%;
  transform:translateX(-50%);
  background:var(--color-primary-500);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  padding:.125rem .75rem;
  border-radius:var(--radius-full);
  white-space:nowrap
}

.lic-card-head {
  text-align:center;
  margin-bottom:var(--space-5)
}

.lic-card-tier {
  font-size:var(--text-lg);
  font-weight:var(--font-semibold);
  margin:0 0 var(--space-2)
}

.lic-card-price {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(2rem,4vw,2.5rem);
  font-weight:700;
  line-height:1;
  margin:0 0 var(--space-2)
}

.lic-card-price span {
  font-size:var(--text-base);
  font-weight:var(--font-normal);
  color:var(--color-gray-500)
}

.lic-card-desc {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.5;
  margin:0
}

.lic-card-features {
  list-style:none;
  padding:0;
  margin:0 0 var(--space-5);
  flex:1
}

.lic-card-features li {
  font-size:var(--text-sm);
  color:var(--color-gray-700);
  padding:.375rem 0 .375rem 1.25rem;
  position:relative;
  line-height:1.5
}

.lic-card-features li::before {
  content:"\2713";
  position:absolute;
  left:0;
  color:var(--color-primary-500);
  font-weight:700
}

.lic-card-features li strong {
  font-weight:var(--font-semibold);
  color:var(--color-gray-900)
}

.lic-card-btn {
  display:block;
  text-align:center;
  padding:.625rem 1.5rem;
  border-radius:var(--radius-lg);
  font-weight:var(--font-semibold);
  font-size:var(--text-sm);
  text-decoration:none;
  transition:opacity .15s,transform .15s;
  background:var(--color-primary-500);
  color:#fff;
  border:none
}

.lic-card-btn:hover {
  opacity:.9;
  transform:translateY(-1px)
}

.lic-card-btn--outline {
  background:transparent;
  color:var(--color-primary-600);
  border:1px solid var(--color-primary-300)
}

.lic-card-btn--outline:hover {
  background:var(--color-primary-50)
}

/* Feature breakdown grid */
.lic-features {
  padding:var(--space-12) var(--space-6)
}

.lic-features-inner {
  max-width:var(--container-max);
  margin:0 auto
}

.lic-section-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  text-align:center;
  margin:0 0 var(--space-2);
  line-height:1.2
}

.lic-section-sub {
  text-align:center;
  font-size:var(--text-base);
  color:var(--color-gray-600);
  margin:0 0 var(--space-8);
  line-height:1.5
}

.lic-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6)
}

.lic-feat {
  padding:var(--space-5);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  transition:border-color .15s,box-shadow .15s
}

.lic-feat:hover {
  border-color:var(--color-gray-200);
  box-shadow:0 4px 12px rgba(0,0,0,.04)
}

.lic-feat-icon {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-50);
  color:var(--color-primary-600);
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-3)
}

.lic-feat-title {
  font-size:var(--text-base);
  font-weight:var(--font-semibold);
  margin:0 0 var(--space-2)
}

.lic-feat-desc {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.6;
  margin:0
}

/* Tech stack */
.lic-stack {
  background:var(--color-gray-50);
  padding:var(--space-10) var(--space-6);
  border-top:1px solid var(--color-gray-100);
  border-bottom:1px solid var(--color-gray-100)
}

.lic-stack-inner {
  max-width:var(--container-max);
  margin:0 auto
}

.lic-stack-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4)
}

.lic-stack-item {
  padding:var(--space-4);
  background:var(--color-bg);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  gap:.25rem
}

.lic-stack-item strong {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold)
}

.lic-stack-item span {
  font-size:var(--text-xs);
  color:var(--color-gray-600)
}

/* CTA (legacy) */
.lic-cta { background:var(--gradient-primary);color:#fff;text-align:center;padding:var(--space-12) var(--space-6) }

/* ── Final CTA ── */
.lic-final-cta {
  position:relative;
  overflow:hidden;
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
  padding:clamp(4rem,10vw,7rem) var(--space-6)
}

.lic-final-cta-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0
}

.lic-final-cta-orb {
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:.3
}

.lic-final-cta-orb--1 {
  width:500px;height:500px;
  top:-15%;left:-10%;
  background:#fff
}

.lic-final-cta-orb--2 {
  width:400px;height:400px;
  bottom:-20%;right:-5%;
  background:var(--color-primary-700)
}

.lic-final-cta-orb--3 {
  width:300px;height:300px;
  top:30%;left:55%;
  background:#fff;
  opacity:.1
}

.lic-final-cta-inner {
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 auto
}

.lic-final-cta-badge {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.4rem 1.25rem;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  margin-bottom:var(--space-6)
}

.lic-final-cta-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:700;
  line-height:1.15;
  margin:0 0 var(--space-5);
  letter-spacing:-.02em;
  color:#fff
}

.lic-final-cta-sub {
  font-size:clamp(.95rem,1.8vw,1.125rem);
  color:rgba(255,255,255,.85);
  line-height:1.65;
  margin:0 0 var(--space-8);
  max-width:560px;
  margin-left:auto;
  margin-right:auto
}

.lic-final-cta-buttons {
  display:flex;
  gap:var(--space-4);
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:var(--space-8)
}

.lic-final-cta-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.875rem 2.25rem;
  border-radius:var(--radius-lg);
  font-weight:var(--font-semibold);
  font-size:var(--text-base);
  text-decoration:none;
  transition:all .2s ease;
  background:#fff;
  color:var(--color-primary-700);
  border:2px solid #fff;
  box-shadow:0 4px 20px rgba(0,0,0,.15)
}

.lic-final-cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,.25)
}

.lic-final-cta-btn--ghost {
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.3)
}

.lic-final-cta-btn--ghost:hover {
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.5);
  box-shadow:none
}

.lic-final-cta-trust {
  display:flex;
  gap:var(--space-5);
  justify-content:center;
  flex-wrap:wrap
}

.lic-final-cta-trust-item {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:var(--text-sm);
  color:rgba(255,255,255,.75)
}

.lic-final-cta-trust-item svg {
  color:#fff;
  flex-shrink:0
}

@media (max-width:640px) {
  .lic-final-cta-trust { flex-direction:column;align-items:center;gap:var(--space-2) }
  .lic-final-cta-buttons { flex-direction:column;align-items:center }
  .lic-final-cta-btn { width:100%;max-width:300px }
}

/* Cookie Policy page */
.cp-cookie-meta {
  margin-top:var(--space-3);
  margin-bottom:var(--space-3)
}

.cp-cookie-badge {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  padding:.2rem .6rem;
  border-radius:var(--radius-full);
  letter-spacing:.02em
}

.cp-cookie-badge--required {
  background:var(--color-primary-50);
  color:var(--color-primary-600)
}

.cp-cookie-badge--optional {
  background:var(--color-gray-100);
  color:var(--color-gray-600)
}

.cp-cookie-table {
  width:100%;
  font-size:var(--text-xs);
  border-collapse:collapse;
  margin-top:var(--space-2)
}

.cp-cookie-table tr {
  border-top:1px solid var(--color-gray-100)
}

.cp-cookie-table td {
  padding:.4rem 0;
  color:var(--color-gray-600);
  vertical-align:top
}

.cp-cookie-table td:first-child {
  font-weight:var(--font-medium);
  color:var(--color-gray-800);
  white-space:nowrap;
  padding-right:var(--space-2)
}

.cp-cookie-table td:last-child {
  text-align:right;
  white-space:nowrap;
  color:var(--color-gray-400)
}

.cp-cookie-table code {
  font-family:var(--font-family-mono);
  font-size:.7rem;
  background:var(--color-gray-100);
  padding:.1rem .35rem;
  border-radius:var(--radius-md)
}

@media (max-width:768px) {
  .lic-grid[style*="repeat(3"] { grid-template-columns:1fr!important }
}

.block-section {
  width:100%
}

.block-section--full .block-section-inner {
  max-width:none
}

.block-section--contained .block-section-inner {
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--space-6);
  padding-right:var(--space-6)
}

.block-section-pad-none {
  padding-top:0;
  padding-bottom:0
}

.block-section-pad-sm {
  padding-top:var(--space-4);
  padding-bottom:var(--space-4)
}

.block-section-pad-md {
  padding-top:var(--space-8);
  padding-bottom:var(--space-8)
}

.block-section-pad-lg {
  padding-top:var(--space-12);
  padding-bottom:var(--space-12)
}

.block-section-pad-xl {
  padding-top:4rem;
  padding-bottom:4rem
}

.block-columns {
  display:grid;
  width:100%
}

.block-columns--gap-sm {
  gap:var(--space-2)
}

.block-columns--gap-md {
  gap:var(--space-4)
}

.block-columns--gap-lg {
  gap:var(--space-6)
}

.block-columns--1 {
  grid-template-columns:1fr
}

.block-columns--1-2_1-2 {
  grid-template-columns:1fr 1fr
}

.block-columns--1-3_2-3 {
  grid-template-columns:1fr 2fr
}

.block-columns--2-3_1-3 {
  grid-template-columns:2fr 1fr
}

.block-columns--1-3_1-3_1-3 {
  grid-template-columns:1fr 1fr 1fr
}

.block-columns--1-4_1-4_1-4_1-4 {
  grid-template-columns:1fr 1fr 1fr 1fr
}

.block-columns--1-4_1-2_1-4 {
  grid-template-columns:1fr 2fr 1fr
}

.block-heading {
  font-family:var(--font-family-display);
  color:var(--color-gray-900);
  margin:0 0 var(--space-4);
  line-height:var(--leading-tight)
}

.block-rich-text {
  font-size:var(--text-base);
  line-height:1.75;
  color:var(--color-gray-700)
}

.block-rich-text p:last-child {
  margin-bottom:0
}

.block-rich-text a {
  color:var(--color-primary-600);
  text-decoration:underline;
  text-underline-offset:2px
}

.block-image {
  overflow:hidden
}

.block-image img {
  width:100%;
  height:auto;
  display:block
}

.block-image--full {
  width:100%
}

.block-image--wide {
  max-width:var(--container-max);
  margin:0 auto
}

.block-image--contained {
  max-width:var(--content-max);
  margin:0 auto
}

.block-image figcaption {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  margin-top:var(--space-2);
  text-align:center
}

.block-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  font-family:var(--font-family);
  font-size:var(--text-sm);
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .15s,transform .15s
}

.block-btn--primary {
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  border:none
}

.block-btn--secondary {
  background:var(--color-bg-elevated);
  color:var(--color-gray-700);
  border:1px solid var(--color-gray-200)
}

.block-btn--outline {
  background:transparent;
  color:var(--color-primary-600);
  border:1px solid var(--color-primary-600)
}

.block-btn:hover {
  opacity:.9;
  transform:translateY(-1px)
}

.block-btn-wrap {
  margin:var(--space-2) 0
}

.block-btn-wrap--center {
  text-align:center
}

.block-btn-wrap--right {
  text-align:right
}

.block-spacer--sm {
  height:var(--space-4)
}

.block-spacer--md {
  height:var(--space-8)
}

.block-spacer--lg {
  height:var(--space-12)
}

.block-spacer--xl {
  height:4rem
}

.block-divider {
  border:none;
  margin:var(--space-4) 0
}

.block-divider--solid {
  border-top:1px solid var(--color-gray-200)
}

.block-divider--dashed {
  border-top:1px dashed var(--color-gray-200)
}

.block-divider--dotted {
  border-top:1px dotted var(--color-gray-200)
}

.block-hero {
  overflow:hidden;
  position:relative;
  min-height:400px;
  padding:clamp(3.5rem,9vw,7rem) var(--space-6) clamp(2.5rem,7vw,5rem);
  text-align:center
}

.block-hero-inner {
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto
}

.hero .hero-badge,
.block-hero .hero-badge {
  display:inline-flex !important;
  align-items:center !important;
  gap:var(--space-2) !important;
  padding:.375rem 1rem !important;
  font-size:var(--text-xs) !important;
  font-weight:var(--font-semibold) !important;
  color:var(--color-primary-600) !important;
  background:var(--color-primary-50) !important;
  border-radius:var(--radius-full) !important;
  margin-bottom:var(--space-4) !important
}

.hero .hero-badge-dot,
.block-hero .hero-badge-dot {
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:var(--color-primary-500) !important;
  animation:pulse 2s infinite !important
}

.block-hero-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(2rem,5vw + 0.5rem,3.5rem);
  font-weight:700;
  line-height:1.08;
  color:var(--color-gray-900);
  margin:0 0 var(--space-4)
}

.block-hero-subtitle {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:var(--color-gray-500);
  line-height:1.65;
  max-width:520px;
  margin:0 auto var(--space-8)
}

.block-hero-cta {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap
}
/* ==========================================================================
   04-components.css — Buttons, badges, forms, toasts, modals, cards
   ========================================================================== */

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.1)
}

.btn:active {
  transform:translateY(0) scale(.98);
  box-shadow:0 1px 3px rgba(0,0,0,.08)
}

.btn:focus-visible,.icon-btn:focus-visible,.announcement-dismiss:focus-visible {
  outline:2px solid var(--color-primary-500);
  outline-offset:2px
}

.btn-primary:active {
  transform:translateY(0)
}

.btn-secondary:active {
  background:var(--color-gray-50)
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  font-family:var(--font-family);
  font-size:var(--text-sm);
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  border:1px solid #0000;
  border-radius:var(--radius-lg);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),background .2s ease,border-color .2s ease,color .2s ease
}

.form-hint {
  display:block;
  margin-top:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-gray-400)
}

.input,input[type=text],input[type=email],textarea {
  width:100%;
  padding:.625rem .875rem;
  font-family:var(--font-family);
  font-size:.875rem;
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  background:var(--color-bg-elevated)
}

.input-success,input.valid,textarea.valid {
  border-color:var(--color-success)!important
}

.field-error:not(:empty) {
  margin-top:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-error);
  display:flex;
  align-items:center;
  gap:4px
}

.field-error:not(:empty)::before {
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  color:var(--color-error);
  border:1.5px solid;
  border-radius:50%;
  margin-right:4px
}

.btn-primary {
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  border:0
}

.btn-primary:hover {
  background:linear-gradient(135deg,var(--color-primary-700) 0,var(--color-primary-600) 100%);
  transform:translateY(-2px);
  box-shadow:0 6px 20px color-mix(in srgb,var(--color-primary-600) 35%,transparent)
}

.btn-primary:active {
  transform:translateY(0) scale(.98);
  box-shadow:0 2px 6px color-mix(in srgb,var(--color-primary-600) 25%,transparent)
}

.btn-secondary {
  background:var(--color-bg-elevated);
  color:var(--color-gray-700);
  border:1px solid var(--color-gray-200)
}

.btn-secondary:hover {
  border-color:var(--color-gray-300);
  background:var(--color-gray-50);
  box-shadow:0 4px 12px rgba(0,0,0,.06)
}

.btn-secondary:active {
  background:var(--color-gray-100);
  transform:translateY(0) scale(.98)
}

.btn-lg {
  padding:.75rem 1.5rem;
  font-size:.875rem;
  border-radius:var(--radius-xl)
}

.btn-loading-text {
  display:none
}

.btn-loading .btn-text {
  display:none!important
}

.btn-loading .btn-loading-text {
  display:inline!important
}

.input:focus,input[type=text]:focus,input[type=email]:focus,textarea:focus {
  outline:none;
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-600) 10%,transparent)
}

.input.invalid,.input.input-error,input.invalid,input.input-error,textarea.invalid,textarea.input-error {
  border-color:var(--color-error)
}

.input-lg {
  padding:.75rem 1rem;
  font-size:var(--text-base)
}

.form-group label {
  display:block;
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-700);
  margin-bottom:var(--space-2)
}

.form-group {
  display:flex;
  flex-direction:column;
  gap:var(--space-2)
}

.input {
  padding:.625rem .875rem;
  font-size:var(--text-sm);
  font-family:var(--font-family);
  color:var(--color-gray-900);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  outline:none
}

.input:focus {
  border-color:var(--color-primary-400)
}

.input.invalid,.input.input-error {
  border-color:var(--color-error)
}

textarea.input {
  resize:vertical;
  min-height:100px
}

.field-error {
  font-size:var(--text-xs);
  color:var(--color-error);
  min-height:1.25rem
}

.btn-loading {
  pointer-events:none;
  opacity:.8
}

.btn-loading .btn-icon {
  animation:spin 1s linear infinite;
  display:none!important
}

.input.valid,.input-success {
  border-color:var(--color-success)!important
}

.input.invalid,.input-error {
  border-color:var(--color-error)!important;
  animation:shake .3s ease
}

.toast-container {
  position:fixed;
  top:var(--space-4);
  right:var(--space-4);
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  pointer-events:none;
  max-width:380px
}

.toast {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  font-size:var(--text-sm);
  color:var(--color-gray-800);
  pointer-events:all;
  opacity:0;
  transform:translateX(100%);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08)
}

.toast-visible {
  opacity:1;
  transform:translateX(0)
}

.toast-hiding {
  opacity:0;
  transform:translateX(100%)
}

.toast-success {
  border-left:3px solid var(--color-success)
}

.toast-error {
  border-left:3px solid var(--color-error)
}

.toast-warning {
  border-left:3px solid #f59e0b
}

.toast-info {
  border-left:3px solid var(--color-primary-500)
}

.toast-icon {
  display:flex;
  align-items:center;
  flex-shrink:0
}

.toast-success .toast-icon {
  color:var(--color-success)
}

.toast-error .toast-icon {
  color:var(--color-error)
}

.toast-warning .toast-icon {
  color:#f59e0b
}

.toast-info .toast-icon {
  color:var(--color-primary-500)
}

.toast-message {
  flex:1;
  font-weight:500
}

.toast-close {
  background:none;
  border:0;
  font-size:1.125rem;
  color:var(--color-gray-400);
  cursor:pointer;
  padding:0;
  line-height:1;
  flex-shrink:0
}

.toast-close:hover {
  color:var(--color-gray-600)
}

.toast-progress {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  background:var(--color-primary-400);
  animation:toastProgress linear forwards
}

.shortcuts-modal {
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease
}

.shortcuts-modal.visible {
  opacity:1;
  visibility:visible
}

.shortcuts-content {
  background:var(--color-bg-elevated);
  border-radius:var(--radius-xl);
  padding:0;
  width:90%;
  max-width:420px;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.15)
}

.shortcuts-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--color-gray-100)
}

.shortcuts-header h2 {
  font-size:var(--text-base);
  font-weight:700;
  margin:0
}

.shortcuts-close {
  background:none;
  border:0;
  font-size:1.25rem;
  color:var(--color-gray-400);
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md)
}

.shortcuts-close:hover {
  background:var(--color-gray-100);
  color:var(--color-gray-700)
}

.shortcuts-list {
  padding:var(--space-3) var(--space-6) var(--space-5);
  list-style:none;
  margin:0
}

.shortcut-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-gray-50);
  font-size:var(--text-sm);
  color:var(--color-gray-600)
}

.shortcut-item:last-child {
  border-bottom:none
}

.shortcut-item kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  background:var(--color-gray-100);
  border:1px solid var(--color-gray-200);
  border-radius:4px;
  font-family:var(--font-family-mono);
  font-size:11px;
  font-weight:500;
  color:var(--color-gray-600)
}

.cmd-palette {
  position:fixed;
  inset:0;
  z-index:10003;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:min(20vh,140px);
  opacity:0;
  visibility:hidden;
  transition:all .15s ease
}

.cmd-palette.visible {
  opacity:1;
  visibility:visible
}

.cmd-palette-content {
  width:90%;
  max-width:560px;
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.2);
  transform:scale(.98) translateY(-8px);
  transition:transform .15s ease
}

.cmd-palette.visible .cmd-palette-content {
  transform:scale(1) translateY(0)
}

.cmd-palette-input-wrapper {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-gray-100)
}

.cmd-palette-input-wrapper svg {
  color:var(--color-gray-400);
  flex-shrink:0
}

.cmd-palette-input {
  flex:1;
  border:0;
  background:none;
  font-size:var(--text-base);
  color:var(--color-gray-900);
  outline:none;
  font-family:var(--font-family)
}

.cmd-palette-input::placeholder {
  color:var(--color-gray-400)
}

.cmd-palette-results {
  max-height:320px;
  overflow-y:auto;
  padding:var(--space-2) 0
}

.cmd-palette-group {
  padding:var(--space-2) var(--space-5) var(--space-1)
}

.cmd-palette-group-title {
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--color-gray-400);
  margin:0
}

.cmd-palette-item {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--color-gray-700);
  border-radius:var(--radius-md);
  margin:1px var(--space-2)
}

.cmd-palette-item:hover,.cmd-palette-item.active {
  background:var(--color-primary-50);
  color:var(--color-primary-700)
}

.cmd-palette-item svg {
  color:var(--color-gray-400);
  flex-shrink:0
}

.cmd-palette-item:hover svg,.cmd-palette-item.active svg {
  color:var(--color-primary-500)
}

.cmd-palette-item kbd {
  margin-left:auto;
  font-size:10px;
  color:var(--color-gray-400)
}

.cmd-palette-footer {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-gray-100);
  font-size:11px;
  color:var(--color-gray-400)
}

.cmd-palette-footer kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  background:var(--color-gray-100);
  border:1px solid var(--color-gray-200);
  border-radius:3px;
  font-family:var(--font-family-mono);
  font-size:10px;
  color:var(--color-gray-500)
}

.contact-form-title {
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  margin:0 0 var(--space-6)
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4)
}

.form-group {
  margin-bottom:var(--space-4)
}

.form-label {
  display:block;
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-700);
  margin-bottom:var(--space-2)
}

.form-input {
  display:block;
  width:100%;
  padding:.625rem .875rem;
  font-family:var(--font-family);
  font-size:var(--text-sm);
  color:var(--color-gray-800);
  background:var(--color-bg-primary);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  transition:border-color .15s,box-shadow .15s;
  outline:0
}

.form-input::placeholder {
  color:var(--color-gray-400)
}

.form-input:focus {
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-600) 10%,transparent)
}

.form-textarea {
  resize:vertical;
  min-height:120px;
  line-height:1.6
}

.contact-submit {
  width:100%;
  margin-top:var(--space-2)
}

.contact-success {
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:rgba(34,197,94,.08);
  color:var(--color-success);
  border-radius:var(--radius-lg);
  font-size:var(--text-sm);
  font-weight:var(--font-medium)
}

.contact-error {
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:rgba(239,68,68,.08);
  color:var(--color-error);
  border-radius:var(--radius-lg);
  font-size:var(--text-sm);
  font-weight:var(--font-medium)
}

/* ==========================================================================
   05-header.css — Header, navigation, mobile menu, announcement bar
   ========================================================================== */

header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
  height:var(--header-height);
  display:flex;
  align-items:center
}

header.scrolled {
  background:rgba(254,254,254,.95)
}

header .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6)
}

header h1 {
  margin:0
}

header h1 a {
  font-family:var(--font-family-display);
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px
}

header h1 a:hover {
  color:var(--color-primary-600)
}

header nav {
  display:flex;
  align-items:center;
  gap:2px
}

header nav a {
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-600);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--radius-lg);
  position:relative
}

header nav a:hover {
  color:var(--color-gray-900);
  background:rgba(0,0,0,.03)
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  height:60px
}

.site-logo a {
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:1px
}

.site-logo-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:var(--gradient-primary);
  color:#fff;
  border-radius:var(--radius-md);
  font-size:1.3rem;
  font-weight:800;
  font-family:var(--font-family-display)
}

.main-nav {
  display:flex;
  gap:var(--space-1);
  align-items:center;
  justify-content:center
}

.nav-link {
  padding:.4375rem .75rem;
  font-size:.8125rem;
  font-weight:500;
  color:var(--color-gray-600);
  text-decoration:none;
  border-radius:var(--radius-md)
}

.nav-link:hover {
  color:var(--color-gray-900);
  background:rgba(0,0,0,.04)
}

.nav-link-active {
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent);
  font-weight:600
}

.header-actions {
  display:flex;
  align-items:center;
  gap:var(--space-1)
}

.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  background:none;
  color:var(--color-gray-500);
  border-radius:var(--radius-lg);
  cursor:pointer
}

.icon-btn:hover {
  background:var(--color-gray-100);
  color:var(--color-gray-700)
}

.mobile-menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:none;
  border:0;
  color:var(--color-gray-700);
  cursor:pointer;
  border-radius:var(--radius-lg);
  padding:0
}

.mobile-menu-toggle:hover {
  background:var(--color-gray-100);
  color:var(--color-gray-800)
}

.mobile-menu-toggle:focus-visible {
  outline:2px solid var(--color-primary-500);
  outline-offset:2px
}

.mobile-menu-toggle.active .hamburger span:first-child {
  transform:translateY(6px) rotate(45deg)
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
  opacity:0;
  transform:scaleX(0)
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg)
}

.theme-toggle:hover svg {
  transform:rotate(15deg)
}

.hamburger {
  display:flex;
  flex-direction:column;
  gap:5px;
  width:20px
}

.hamburger span {
  display:block;
  height:2px;
  background:var(--color-gray-700);
  border-radius:2px;
  width:100%
}

body>header {
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  text-align:left!important;
  padding-left:0!important;
  padding-right:0!important;
  display:block!important
}

body>header .header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-3) var(--space-6)
}

.site-logo {
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  margin:0
}

.icon-sun {
  display:block
}

.icon-moon {
  display:none
}

.header-widget-logo {
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  margin:0
}

.header-widget-logo a {
  color:var(--color-gray-900);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:1px;
  white-space:nowrap
}

.header-widget-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex:1
}

.header-widget-nav a {
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-600);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--radius-lg);
  transition:color .15s,background .15s
}

.header-widget-nav a:hover {
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent)
}

.header-widget-actions {
  display:flex;
  align-items:center;
  gap:var(--space-1)
}

.main-nav,.header-widget-nav {
  flex:1
}

.hw-halign > * {
  flex:0 1 auto!important
}

.mobile-only-link {
  display:none
}

/* Announcement bar */
.announcement-bar {
  font-size:.8125rem;
  line-height:1.5
}
.announcement-bar-inner {
  margin-bottom:0;
  padding:8px var(--space-6);
  text-align:center
}
.announcement-bar-inner a {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  margin-left:4px
}
.announcement-bar-inner a:hover {
  text-decoration-thickness:2px
}
.announcement-close {
  background:none;
  border:none;
  color:inherit;
  font-size:1.125rem;
  cursor:pointer;
  opacity:.7;
  margin-left:6px;
  vertical-align:middle;
  line-height:1;
  padding:0 2px
}
.announcement-close:hover {
  opacity:1
}

@media(max-width:768px) {
  .announcement-bar-inner {
    padding:8px var(--space-4);
    font-size:.75rem
  }
  .mobile-only-link {
    display:flex;
    align-items:center;
    gap:6px
  }
}
/* ==========================================================================
   06-footer.css — Footer layout, shortcuts bar, tech badges, widgets
   ========================================================================== */

footer {
  margin-top:var(--space-8);
  padding:0 0 var(--space-6);
  background:var(--color-gray-50);
  border-top:none;
  position:relative
}

footer .container {
  max-width:var(--container-max);
  margin:0 auto
}

footer p {
  color:var(--color-gray-400);
  margin:0
}

footer nav a {
  font-size:13px;
  color:var(--color-gray-500);
  text-decoration:none;
  padding:2px 0;
  font-weight:var(--font-medium)
}

.footer-accent {
  height:3px;
  background:var(--gradient-primary);
  opacity:.6
}

.footer-top {
  display:flex;
  align-items:flex-start;
  gap:var(--space-8);
  padding-top:var(--space-10);
  flex-wrap:wrap
}

.footer-nav-group {
  display:flex;
  flex-direction:column;
  gap:var(--space-2)
}

.footer-copyright {
  font-size:.6875rem;
  color:var(--color-gray-600);
  margin:0;
  text-align:center
}

.footer-inner {
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-8)
}

.footer-brand {
  margin-bottom:var(--space-2);
  flex:0 0 280px
}

.footer-logo {
  font-size:1.35rem;
  font-weight:700;
  color:var(--color-gray-900);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:1px
}

.footer-logo-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:var(--gradient-primary);
  color:#fff;
  border-radius:var(--radius-md);
  font-size:1.3rem;
  font-weight:800;
  font-family:var(--font-family-display)
}

.footer-tagline {
  font-size:.8125rem;
  color:var(--color-gray-600);
  margin-top:var(--space-2);
  margin:var(--space-2) 0 0
}

.footer-nav {
  display:flex;
  flex:0 0 auto;
  gap:var(--space-8);
  margin-left:auto
}

.footer-nav-title {
  display:block;
  font-size:.6875rem;
  font-weight:600;
  color:var(--color-gray-600);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 var(--space-3)
}

.footer-nav a {
  display:inline-flex;
  align-items:center;
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  text-decoration:none;
  padding:var(--space-1) 0
}

.footer-nav a:hover {
  color:var(--color-primary-600)
}

.footer-shortcuts-bar {
  display:flex;
  justify-content:center;
  gap:var(--space-5);
  flex-wrap:wrap;
  font-family:var(--font-family-mono);
  font-size:10px;
  color:var(--color-gray-700);
  letter-spacing:.02em
}

.footer-shortcuts-bar span {
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap
}

.footer-shortcuts-bar kbd {
  color:var(--color-gray-900);
  font-family:inherit;
  font-weight:600;
  font-size:inherit;
  background:none;
  border:none;
  padding:0
}

.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
  padding-top:var(--space-6);
  border-top:1px solid var(--color-gray-100);
  font-size:var(--text-xs);
  color:var(--color-gray-600)
}

.footer-built-with {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-gray-600)
}

.footer-tech-badge {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  font-size:10px;
  font-weight:600;
  border-radius:var(--radius-full);
  letter-spacing:.02em
}

.footer-tech-rust {
  background:rgba(222,114,60,.1);
  color:#b7472a
}

.footer-tech-axum {
  background:rgba(59,130,246,.1);
  color:#1d4ed8
}

.footer-tech-next {
  background:rgba(0,0,0,.08);
  color:var(--color-gray-800)
}

.footer-tech-pg {
  background:rgba(51,103,145,.1);
  color:#336791
}

.footer-tech-wasm {
  background:rgba(101,79,240,.1);
  color:#5a44d6
}

footer {
  flex-shrink:0
}

.footer-nav-group a {
  font-size:.8125rem;
  color:var(--color-gray-600);
  text-decoration:none
}

.footer-nav-group a:hover {
  color:var(--color-primary-600)
}

.footer-shortcuts {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  font-size:var(--text-xs);
  color:var(--color-gray-500)
}

.footer-widgets {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--space-8);
  padding-top:var(--space-10);
  padding-bottom:var(--space-8)
}

.footer-widget {
  flex:1 1 200px;
  min-width:0
}

.footer-widget--logo {
  flex:0 0 auto
}

.footer-widget--nav,
.footer-widget-wrap--nav_menu {
  margin-left:auto
}

.footer-brand-col {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  flex:0 0 auto
}

.footer-widget--about {
  flex:0 0 auto
}

.footer-widget--social {
  flex:0 0 auto
}

.footer-widget--nav a,.footer-widget--html a {
  display:block;
  color:var(--color-gray-600);
  text-decoration:none;
  font-size:var(--text-sm);
  padding:2px 0
}

.footer-widget--nav a:hover,.footer-widget--html a:hover {
  color:var(--color-primary-600)
}

/* ── Desktop horizontal (content) alignment ── */
.fw-h-left,.fw-h-center,.fw-h-right { display:grid!important }
.fw-h-left > *,.fw-h-center > *,.fw-h-right > * { width:fit-content!important;max-width:100% }
.fw-h-left { justify-items:start!important }
.fw-h-center { justify-items:center!important }
.fw-h-right { justify-items:end!important }
.fw-h-left .widget-newsletter,.fw-h-right .widget-newsletter,.fw-h-center .widget-newsletter { margin-left:0!important;margin-right:0!important }

/* ── Footer mobile — 12-col grid with span classes ── */
@media(max-width:768px) {
  .footer-widgets {
    display:grid!important;
    grid-template-columns:repeat(12,1fr);
    gap:1rem
  }
  .footer-widget-wrap {
    flex:none!important;
    width:auto!important;
    min-width:0
  }
  .fw-m-12 { grid-column:span 12 }
  .fw-m-9 { grid-column:span 9 }
  .fw-m-8 { grid-column:span 8 }
  .fw-m-6 { grid-column:span 6 }
  .fw-m-4 { grid-column:span 4 }
  .fw-m-3 { grid-column:span 3 }
  /* Mobile text alignment */
  .fw-mt-left { text-align:left!important }
  .fw-mt-center { text-align:center!important }
  .fw-mt-right { text-align:right!important }
  /* Mobile content alignment (position within grid cell) */
  .fw-mc-left { justify-self:start!important }
  .fw-mc-center { justify-self:center!important }
  .fw-mc-right { justify-self:end!important }
  .footer-widget-wrap--nav_menu { margin-left:0 }
  .footer-inner {
    gap:0
  }
  .footer-bottom {
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:var(--space-3)
  }
  .footer-shortcuts-bar {
    display:none
  }
  .footer-built-with {
    flex-wrap:wrap;
    justify-content:center
  }
}

@media(max-width:480px) {
  .footer-inner {
    padding-left:1rem;
    padding-right:1rem
  }
}
/* ==========================================================================
   07-posts.css — Post cards, article layout, post grid, featured posts, meta
   ========================================================================== */

.featured-post .post-card-excerpt {
  font-size:var(--text-base);
  -webkit-line-clamp:3;
  line-clamp:3;
  color:var(--color-gray-600);
  line-height:1.7
}

.posts-grid>* {
  animation:.5s cubic-bezier(.4,0,.2,1) both fadeInUp
}

.posts-grid>*:nth-child(1) { animation-delay:0s }
.posts-grid>*:nth-child(2) { animation-delay:.06s }
.posts-grid>*:nth-child(3) { animation-delay:.12s }
.posts-grid>*:nth-child(4) { animation-delay:.18s }
.posts-grid>*:nth-child(5) { animation-delay:.24s }
.posts-grid>*:nth-child(6) { animation-delay:.3s }
.posts-grid>*:nth-child(n+7) { animation-delay:.36s }

.post-list>* {
  animation:.4s cubic-bezier(.4,0,.2,1) both slideIn
}

.author-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit
}

.posts-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-2)
}
@media (min-width:640px) {
  .posts-grid { grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1024px) {
  .posts-grid { grid-template-columns:repeat(3,1fr) }
}

.post-card {
  display:flex;
  flex-direction:column;
  background:var(--color-bg-elevated);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-xl);
  overflow:hidden;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04)
}

@media (hover:hover) {
  .post-card {
    transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s cubic-bezier(.25,.46,.45,.94),border-color .35s ease
  }
  .post-card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
    border-color:rgba(0,0,0,.12)
  }
}

.post-card-image-wrapper {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--color-gray-100)
}

.post-card-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center
}

@media (hover:hover) {
  .post-card-image {
    transition:transform .5s cubic-bezier(.25,.46,.45,.94)
  }
  .post-card:hover .post-card-image {
    transform:scale(1.03)
  }
}

.post-card-content {
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  flex:1
}

.post-card-excerpt {
  font-size:.8125rem;
  color:var(--color-gray-600);
  line-height:1.6;
  margin-bottom:var(--space-4);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.featured-post {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  background:var(--color-bg-elevated);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-2xl);
  overflow:hidden;
  padding:var(--space-6);
  margin-bottom:var(--space-6);
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.04)
}

.featured-post::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--gradient-primary);
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
  opacity:.7
}

.featured-post-image-wrapper {
  aspect-ratio:16/9;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--color-gray-100);
  position:relative
}

.featured-post-image-wrapper picture {
  display:block;
  width:100%;
  height:100%
}

.featured-post-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center
}

@media (hover:hover) {
  .featured-post-image {
    transition:transform .5s cubic-bezier(.25,.46,.45,.94)
  }
  .featured-post:hover .featured-post-image {
    transform:scale(1.02)
  }
}

.featured-post-content {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:var(--space-6) var(--space-6) var(--space-7);
  gap:0
}

.gradient-text {
  background:linear-gradient(135deg,var(--color-primary-700) 0,var(--color-primary-600) 50%,var(--color-primary-500) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:var(--color-primary-700)
}

.post-author {
  display:flex;
  align-items:center;
  gap:var(--space-2)
}

.post-meta span,.post-meta time {
  display:inline-flex;
  align-items:center;
  gap:6px
}

.post-meta strong {
  color:var(--color-gray-700);
  font-weight:600
}

.post-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:var(--space-3);
  border-top:1px solid rgba(0,0,0,.05);
  font-size:var(--text-xs)
}

.featured-post .post-card-footer {
  border-top-color:rgba(0,0,0,.06);
  padding-top:var(--space-4);
  margin-top:auto;
  border-top:1px solid rgba(0,0,0,.05)
}

.featured-post-meta {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-3)
}

.featured-post-title {
  margin-bottom:var(--space-3);
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.25rem,2.5vw,1.5rem);
  font-weight:700;
  line-height:1.25;
  margin:0 0 var(--space-3);
  text-wrap:balance
}

.featured-post-title a {
  color:var(--color-gray-900);
  text-decoration:none
}

.featured-post-title a:hover {
  color:var(--color-primary-600)
}

.featured-post-excerpt {
  font-size:.8125rem;
  color:var(--color-gray-600);
  line-height:1.65;
  margin:0 0 var(--space-4);
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:var(--space-5)
}

.featured-post-image-placeholder,.post-card-image-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:linear-gradient(145deg,var(--color-gray-50) 0,var(--color-gray-100) 100%);
  color:var(--color-gray-400)
}

.placeholder-grad-0 {
  background:linear-gradient(135deg,#f5f3ff 0,#ede9fe 50%,#ddd6fe 100%)
}

.placeholder-grad-1 {
  background:linear-gradient(135deg,#f0f9ff 0,#e0f2fe 50%,#bae6fd 100%)
}

.placeholder-grad-2 {
  background:linear-gradient(135deg,#f0fdf4 0,#dcfce7 50%,#bbf7d0 100%)
}

.placeholder-grad-3 {
  background:linear-gradient(135deg,#fffbeb 0,#fef3c7 50%,#fde68a 100%)
}

.placeholder-grad-4 {
  background:linear-gradient(135deg,#fdf2f8 0,#fce7f3 50%,#fbcfe8 100%)
}

.placeholder-grad-5 {
  background:linear-gradient(135deg,#fff7ed 0,#ffedd5 50%,#fed7aa 100%)
}

.placeholder-grad-6 {
  background:linear-gradient(135deg,#ecfdf5 0,#d1fae5 50%,#a7f3d0 100%)
}

.placeholder-grad-7 {
  background:linear-gradient(135deg,#eef2ff 0,#e0e7ff 50%,#c7d2fe 100%)
}

.post-item-excerpt mark {
  background:color-mix(in srgb,var(--color-primary-600) 12%,transparent);
  color:var(--color-primary-700);
  border-radius:2px;
  padding:0 2px
}

.post-list {
  max-width:720px;
  margin:0 auto;
  padding:0 var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-3)
}

.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  margin:var(--space-10) auto var(--space-6);
  padding:0 var(--space-6)
}
.pagination-item {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.25rem;
  height:2.25rem;
  padding:0 .625rem;
  border-radius:var(--radius-lg);
  font-size:.8125rem;
  font-weight:500;
  color:var(--color-gray-600);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-150,rgba(0,0,0,.08));
  text-decoration:none;
  transition:all .2s ease
}
.pagination-arrow {
  padding:0 .5rem
}
.pagination-ellipsis {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.5rem;
  height:2.25rem;
  font-size:.8125rem;
  color:var(--color-gray-400);
  letter-spacing:.15em;
  user-select:none
}

.post-card-meta {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-3)
}

.post-card-title {
  font-size:.9375rem;
  font-weight:700;
  line-height:1.35;
  margin-bottom:var(--space-2);
  margin:0 0 var(--space-2)
}

.post-card-title a {
  color:var(--color-gray-900);
  text-decoration:none;
  transition:color .2s ease
}

.post-card-title a:hover {
  color:var(--color-primary-600)
}

@media (hover:hover) {
  .featured-post {
    transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s cubic-bezier(.25,.46,.45,.94)
  }
  .featured-post:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 36px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05)
  }
}

.post-item {
  display:flex;
  gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  border-bottom:1px solid var(--color-gray-100);
  margin-bottom:0;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease
}

.post-item:hover {
  transform:translateY(-2px);
  border-color:var(--color-primary-200);
  box-shadow:0 4px 16px rgba(0,0,0,.08)
}

.post-list .post-item h3 {
  font-size:1rem;
  font-weight:600;
  margin-bottom:var(--space-1);
  line-height:var(--leading-snug);
  margin:0 0 var(--space-2);
  color:var(--color-gray-900)
}

.post-list .post-item h3 a {
  color:var(--color-gray-900);
  text-decoration:none;
  font-weight:600
}

.post-list .post-item h3 a:hover {
  color:var(--color-primary-600)
}

.post-list .post-item-excerpt {
  font-size:.8125rem;
  color:var(--color-gray-600);
  line-height:1.65;
  margin-bottom:var(--space-2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 var(--space-2)
}

.post-item time {
  font-size:.75rem;
  color:var(--color-gray-600);
  font-weight:500
}

.pagination a:hover {
  border-color:var(--color-primary-300);
  color:var(--color-primary-600);
  background:var(--color-primary-25)
}

.pagination .current {
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  border-color:#0000
}

.post-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-4);
  font-size:.8125rem;
  color:var(--color-gray-600);
  align-items:center
}

.post-meta svg {
  vertical-align:-2px;
  margin-right:2px;
  opacity:.6
}

.content {
  max-width:var(--content-max);
  margin:0 auto;
  font-size:var(--text-base);
  line-height:1.75;
  color:var(--color-gray-700)
}

.content h2,.content h3,.content h4 {
  color:var(--color-gray-900);
  font-weight:var(--font-semibold);
  margin-top:2em;
  margin-bottom:.75em;
  line-height:1.3;
  margin:var(--space-8) 0 var(--space-4)
}

.content h3 {
  font-size:1.25rem;
  font-weight:600;
  color:var(--color-gray-900);
  margin:2rem 0 .75rem
}

.content p {
  margin-bottom:1.5em;
  margin:0 0 1.5rem;
  max-width:65ch;
  text-wrap:pretty;
  color:var(--color-gray-700)
}

.content a {
  color:var(--color-primary-600);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--color-primary-600) 25%,transparent);
  text-underline-offset:3px
}

.content blockquote {
  border-left:4px solid var(--color-primary-400);
  padding-left:var(--space-5);
  margin:1.5rem 0;
  color:var(--color-gray-600);
  font-style:italic;
  padding:1.25rem 1.5rem;
  background:color-mix(in srgb,var(--color-primary-600) 3%,transparent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0
}

.content pre {
  background:var(--color-gray-900);
  border:1px solid var(--color-gray-800);
  border-radius:var(--radius-xl);
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  font-family:var(--font-family-mono);
  font-size:.8125rem;
  line-height:1.7;
  margin:1.5rem 0;
  color:var(--color-gray-100)
}

.content code {
  font-family:var(--font-family-mono);
  font-size:.85em;
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent);
  padding:.15em .4em;
  border-radius:6px;
  color:var(--color-primary-700);
  border:1px solid color-mix(in srgb,var(--color-primary-600) 8%,transparent)
}

.content pre code {
  background:none;
  padding:0;
  border-radius:0;
  color:inherit;
  border:0;
  font-size:inherit
}

.content img {
  max-width:100%;
  height:auto;
  border-radius:var(--radius-xl);
  margin:1.5rem 0
}

.content ul,.content ol {
  margin-bottom:1.5em;
  padding-left:1.5rem;
  margin:0 0 1.5rem
}

.content li {
  margin-bottom:.5rem;
  color:var(--color-gray-700)
}

.content hr {
  border:0;
  height:1px;
  background:var(--color-gray-200);
  margin:2rem 0
}

.author-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--color-gray-200)
}

.author-avatar-sm {
  width:24px;
  height:24px
}

.author-avatar-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-100),var(--color-primary-200));
  color:var(--color-primary-600);
  font-weight:600;
  font-size:.625rem;
  line-height:1;
  font-family:var(--font-family)
}

.author-avatar-sm.author-avatar-placeholder {
  font-size:.5rem
}

.author-bio .author-avatar-placeholder {
  font-size:1.25rem
}

.author-name {
  font-size:.6875rem;
  font-weight:500;
  color:var(--color-gray-600)
}

.reading-time {
  display:flex;
  align-items:center;
  gap:.25rem;
  font-size:.6875rem;
  color:var(--color-gray-600)
}

.category-tag-featured {
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  border-color:#0000;
  padding:3px 10px
}

.category-tag-tutorials {
  background:rgba(34,197,94,.15);
  color:#15803d
}

.category-tag-technology {
  background:rgba(59,130,246,.15);
  color:#1d4ed8
}

.category-tag-news {
  background:rgba(245,158,11,.15);
  color:#b45309
}

.category-tag-best-practices {
  background:rgba(236,72,153,.15);
  color:#be185d
}

.post-date {
  font-size:.6875rem;
  color:var(--color-gray-600);
  font-weight:400
}

.taxonomy-title {
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-2)
}

.taxonomy-count {
  font-size:.8125rem;
  color:var(--color-gray-500);
  margin-top:var(--space-2)
}

.author-social-links {
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-3)
}

.post-list .post-item {
  width:100%
}

.category-tag,.category-tag-featured {
  display:inline-flex;
  align-items:center;
  padding:.25rem .625rem;
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-radius:var(--radius-full);
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 12%,transparent);
  transition:background .2s ease,color .2s ease
}

article.post-meta span {
  display:inline-flex;
  align-items:center;
  gap:.375rem
}

.content h2[id],.content h3[id],.content h4[id] {
  scroll-margin-top:calc(var(--header-height) + var(--space-4))
}

.content figure {
  margin:var(--space-6) 0
}

.content figcaption {
  font-size:.8125rem;
  color:var(--color-gray-500);
  text-align:center;
  margin-top:.5rem;
  font-style:italic
}

.post-card-image-placeholder svg,.featured-post-image-placeholder svg {
  opacity:.35
}

.post-meta time {
  color:var(--color-gray-600)
}

.post-meta span + time::before,.post-meta time + span::before {
  content:'\00B7';
  margin-right:var(--space-2);
  color:var(--color-gray-300);
  font-size:1.25em
}

.content blockquote p:last-child {
  margin-bottom:0
}

.archive-hero {
  padding:var(--space-8) var(--space-6) clamp(2rem,4vw,3rem);
  text-align:center;
  position:relative;
  overflow:hidden
}

.archive-hero-content {
  max-width:640px;
  margin:0 auto
}

.archive-hero h1 {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-3);
  line-height:1.1
}

.archive-hero p {
  font-size:clamp(.875rem,1.5vw,1rem);
  color:var(--color-gray-600);
  line-height:1.65;
  margin:0 0 var(--space-6)
}

.archive-stats {
  display:flex;
  gap:var(--space-8);
  justify-content:center;
  align-items:center
}

.archive-stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1)
}

.archive-stat-value {
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-primary-600);
  font-family:var(--font-family-display)
}

.archive-stat-label {
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--color-gray-600);
  text-transform:uppercase;
  letter-spacing:.05em
}

.article-header {
  position:static;
  text-align:center;
  padding:var(--space-8) var(--space-6) var(--space-2);
  max-width:none;
  margin:0;
  background:none;
  border-bottom:1px solid var(--color-gray-100);
  z-index:auto;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  height:auto
}

.article-header-inner {
  max-width:var(--container-max);
  margin:0 auto
}

.article-header h1 {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(2rem,5vw,3rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 auto var(--space-4);
  line-height:1.15;
  letter-spacing:-.02em;
  max-width:var(--container-max)
}

.article-header h1:last-child {
  margin-bottom:0
}

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

.content-wide {
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-8) var(--space-6)
}

.article-layout {
  display:grid;
  grid-template-columns:1fr;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6);
  column-gap:var(--space-8)
}
.article-layout .article-sidebar {
  display:none
}
.article-layout.article-with-toc .article-sidebar {
  display:block
}

.share-section-enhanced {
  max-width:var(--content-max);
  margin:var(--space-10) auto var(--space-8);
  padding:var(--space-6) 0;
  border-top:1px solid var(--color-gray-100);
  text-align:center
}

.share-section-enhanced h3 {
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-gray-600);
  margin:0 0 var(--space-4);
  text-transform:uppercase;
  letter-spacing:.05em
}

.share-buttons-enhanced {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap
}

.share-btn-enhanced {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:.5rem 1rem;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-gray-600);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  text-decoration:none;
  cursor:pointer;
  font-family:var(--font-family)
}

.share-btn-enhanced:hover {
  border-color:var(--color-gray-300);
  background:var(--color-gray-50);
  transform:translateY(-1px)
}

.share-btn-enhanced.x:hover {
  color:#000;
  border-color:#000
}

.share-btn-enhanced.facebook:hover {
  color:#1877f2;
  border-color:#1877f2
}

.share-btn-enhanced.linkedin:hover {
  color:#0a66c2;
  border-color:#0a66c2
}

.share-btn-enhanced.email:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-400)
}

.share-btn-enhanced.copy:hover {
  color:var(--color-success);
  border-color:var(--color-success)
}

.author-bio {
  display:flex;
  gap:var(--space-5);
  padding:var(--space-6);
  background:var(--color-gray-50);
  border-radius:var(--radius-xl);
  max-width:var(--content-max);
  margin:var(--space-8) auto
}

.author-bio .author-avatar {
  width:56px;
  height:56px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--color-gray-200)
}

.author-bio h3 {
  font-size:var(--text-base);
  font-weight:600;
  color:var(--color-gray-900);
  margin:0 0 var(--space-2)
}

.author-bio p {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.6;
  margin:0
}

/* ── Author Card (single post) ── */

.author-card {
  margin:var(--space-10) 0 0;
  padding:var(--space-8);
  background:var(--color-white);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden
}

.author-card::before {
  content:'';
  position:absolute;
  inset:0;
  top:0;
  height:4px;
  background:var(--gradient-primary);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0
}

.author-card-inner {
  display:flex;
  gap:var(--space-6);
  align-items:flex-start
}

.author-card-avatar {
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  flex-shrink:0;
  object-fit:cover;
  border:3px solid var(--color-primary-100);
  box-shadow:0 0 0 4px var(--color-primary-50)
}

.author-card-avatar-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-primary);
  color:var(--color-primary-contrast);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em
}

.author-card-body {
  flex:1;
  min-width:0
}

.author-card-label {
  display:block;
  font-size:var(--text-xs);
  font-weight:var(--font-medium);
  color:var(--color-primary-600);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:var(--space-1)
}

.author-card-name {
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  margin:0 0 var(--space-2);
  line-height:var(--leading-tight)
}

.author-card-bio {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:var(--leading-relaxed);
  margin:0
}

@media(max-width:480px) {
  .author-card {
    padding:var(--space-6)
  }
  .author-card-inner {
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .author-card-avatar {
    width:80px;
    height:80px
  }
}

.author-profile {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(2.5rem,6vw,4rem) var(--space-6) var(--space-8);
  max-width:480px;
  margin:0 auto
}

.author-profile-avatar {
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:var(--space-4);
  background:var(--color-gray-200)
}

.author-profile-role {
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent);
  padding:.25rem .625rem;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-3);
  display:inline-block
}

.author-profile-name {
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-3);
  font-family:var(--font-family-editorial),Georgia,serif
}

.author-profile-bio {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  line-height:1.65;
  margin:0 0 var(--space-3)
}

.author-profile-stats {
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-gray-400);
  margin:0
}

.author-posts-section {
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-8) var(--space-6)
}

.taxonomy-header {
  text-align:center;
  padding:clamp(2rem,5vw,3.5rem) var(--space-6) var(--space-8)
}

.taxonomy-label {
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent);
  padding:.25rem .625rem;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-3)
}

.content pre {
  position:relative
}

.code-lang-label {
  position:absolute;
  top:0;
  right:0;
  padding:4px 10px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--color-gray-400);
  background:rgba(255,255,255,.06);
  border-radius:0 var(--radius-xl) 0 6px;
  letter-spacing:.05em;
  user-select:none
}

.code-copy-btn {
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  color:var(--color-gray-400);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease,background .2s ease
}

.content pre:hover .code-copy-btn {
  opacity:1
}

.code-copy-btn:hover {
  background:rgba(255,255,255,.15);
  color:var(--color-gray-200)
}

.code-copy-btn.copied {
  color:var(--color-success)
}

.content h2,.content h3,.content h4 {
  position:relative
}

.heading-anchor {
  position:absolute;
  left:-1.5em;
  top:50%;
  transform:translateY(-50%);
  color:var(--color-gray-300);
  text-decoration:none;
  opacity:0;
  transition:opacity .2s ease;
  font-weight:400;
  font-size:.8em;
  padding-right:.5em
}

.content h2:hover .heading-anchor,.content h3:hover .heading-anchor,.content h4:hover .heading-anchor {
  opacity:1
}

.heading-anchor:hover {
  color:var(--color-primary-500)
}

.toc {
  display:none;
  padding:0 0 var(--space-5);
  background:none;
  border:none;
  border-radius:0;
  font-size:var(--text-sm);
  margin-bottom:var(--space-5);
  border-bottom:1px solid var(--color-gray-100)
}

.toc-title {
  font-size:.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-gray-600);
  margin:0 0 var(--space-3)
}

.toc ol {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:toc
}

.toc li {
  counter-increment:toc
}

.toc a {
  display:block;
  padding:4px var(--space-2) 4px var(--space-3);
  color:var(--color-gray-500);
  text-decoration:none;
  border-left:2px solid transparent;
  border-radius:0;
  font-size:.8125rem;
  line-height:1.4;
  transition:color .15s,border-color .15s
}

.toc a:hover {
  color:var(--color-gray-900)
}

.toc a.active {
  color:var(--color-primary-600);
  border-left-color:var(--color-primary-500);
  font-weight:600
}

.toc li li a {
  padding-left:var(--space-5);
  font-size:.75rem
}

.article-main {
  min-width:0;
  overflow:hidden;
  max-width:100%
}

.article-main .content {
  max-width:none;
  margin:0;
  overflow-wrap:break-word;
  word-break:break-word
}

.content * {
  max-width:100%
}

.content pre {
  max-width:100%;
  overflow-x:auto;
  box-sizing:border-box
}

.content blockquote {
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word
}

.content table {
  display:block;
  overflow-x:auto;
  max-width:100%
}

.content iframe,.content video,.content embed {
  max-width:100%;
  height:auto
}

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

.article-main .share-section-enhanced {
  max-width:none;
  margin:var(--space-8) 0 var(--space-6);
  padding:var(--space-6) 0
}

.article-main .author-bio {
  max-width:none;
  margin:var(--space-6) 0 0
}

.article-main .author-card {
  max-width:none
}

.post-hero-slider {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-xl);
  margin-bottom:var(--space-6)
}

.post-hero-slider .slider-track {
  display:flex;
  height:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1)
}

.post-hero-slider .slider-slide {
  min-width:100%;
  height:100%
}

.post-hero-slider .slider-slide img {
  width:100%;
  height:100%;
  object-fit:cover
}

.post-hero-slider:hover .slider-arrow {
  opacity:1
}

.post-hero-image {
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-xl);
  margin-bottom:var(--space-6)
}

.post-hero-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

/* ── Archive Filters & Tag Cloud ── */

.archive-filters {
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6) var(--space-6)
}

.archive-filter-row {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  align-items:center;
  padding-bottom:2px
}

.archive-filter-row::-webkit-scrollbar {
  display:none
}

.filter-pill {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:.375rem .875rem;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-gray-600);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-full);
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s ease;
  flex-shrink:0
}

.filter-pill:hover {
  border-color:var(--color-primary-300);
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 4%,transparent)
}

.filter-pill.active {
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  border-color:transparent
}

.filter-pill.active .filter-pill-count {
  background:rgba(255,255,255,.2);
  color:inherit
}

.filter-pill-count {
  font-size:.6875rem;
  font-weight:600;
  background:var(--color-gray-100);
  color:var(--color-gray-500);
  padding:1px 6px;
  border-radius:var(--radius-full);
  line-height:1.3
}

.archive-filter-search {
  position:relative;
  margin-left:auto;
  flex-shrink:0;
  width:180px;
  transition:width .2s ease
}
.archive-filter-search:focus-within {
  width:240px
}
.archive-filter-search-icon {
  position:absolute;
  left:.625rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--color-gray-400);
  pointer-events:none
}
input.archive-filter-search-input {
  width:100%;
  padding:.375rem 2.5rem .375rem 2.5rem;
  font-size:.8125rem;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-full);
  background:var(--color-bg-primary);
  color:var(--color-text-primary);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease
}
input.archive-filter-search-input:focus {
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-400) 15%,transparent)
}
.archive-filter-search-input::placeholder {
  color:var(--color-gray-400)
}
.archive-filter-search-kbd {
  position:absolute;
  right:.5rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.5625rem;
  font-family:inherit;
  padding:.05rem .3rem;
  border-radius:3px;
  border:1px solid var(--color-gray-300);
  background:var(--color-gray-100);
  color:var(--color-gray-600);
  line-height:1.3;
  pointer-events:none
}
@media(max-width:767px){
  .archive-filter-row{flex-wrap:wrap}
  .archive-filter-search{width:100%;order:99;margin-left:0;margin-top:.5rem}
  .archive-filter-search:focus-within{width:100%}
  input.archive-filter-search-input{padding:.5rem 2.5rem .5rem 2.5rem;font-size:.875rem}
  .archive-filter-search-kbd{display:none}
}
.archive-filter-section {
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.archive-filter-label {
  font-size:.6875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-gray-600)
}
.archive-filter-label-row {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.archive-filters-inner {
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  padding:var(--space-5)
}
.archive-filter-status {
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-3) var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  font-size:.875rem;
  color:var(--color-gray-500)
}
.archive-filter-clear {
  font-size:.8125rem;
  font-weight:500;
  color:var(--color-primary-600);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px
}
.archive-filter-clear:hover {
  color:var(--color-primary-700)
}
.tag-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--color-gray-100);
  transition:max-height .3s ease
}
.tag-cloud--collapsed {
  max-height:5.75rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,#000 70%,transparent)
}
.tag-cloud-toggle {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.2rem .6rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--color-primary-400) 20%,transparent);
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all .15s ease
}
.tag-cloud-toggle:hover {
  color:var(--color-primary-700)
}
.tag-cloud-toggle-icon {
  transition:transform .2s ease
}

.tag-pill {
  display:inline-flex;
  align-items:center;
  padding:.25rem .625rem;
  font-weight:500;
  color:var(--color-gray-600);
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-150,var(--color-gray-200));
  border-radius:var(--radius-full);
  text-decoration:none;
  transition:all .2s ease;
  line-height:1.3
}

.tag-pill:hover {
  border-color:var(--color-primary-300);
  color:var(--color-primary-600);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent)
}

.tag-sm {
  font-size:.6875rem
}

.tag-md {
  font-size:.75rem
}

.tag-lg {
  font-size:.8125rem;
  font-weight:600
}

/* ── Post Card Tags ── */

.post-card-tags {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
  margin-bottom:var(--space-3)
}

.post-card-tag {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  font-size:.625rem;
  font-weight:500;
  color:var(--color-gray-500);
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-full);
  text-decoration:none;
  transition:all .15s ease;
  line-height:1.4
}

.post-card-tag:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-200);
  background:color-mix(in srgb,var(--color-primary-600) 6%,transparent)
}

@media(min-width:768px) {
  .archive-filter-row {
    flex-wrap:wrap;
    overflow-x:visible
  }
  .tag-cloud {
    gap:var(--space-2)
  }
}

.article-header--page {
  text-align:left;
  padding:0;
  margin:0;
  height:0;
  overflow:hidden
}

.article-header--page .breadcrumb {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
/* ==========================================================================
   08-widgets.css — Widgets, newsletter, search, social, tag cloud, comments
   ========================================================================== */

.search-input::placeholder {
  color:var(--color-gray-400);
  font-weight:400
}

.search-input:hover {
  border-color:rgba(0,0,0,.1)
}

.search-input-wrapper:focus-within::before {
  transform:translateY(-50%) scale(1.1)
}

.search-btn:hover svg {
  transform:scale(1.15) rotate(-5deg)
}

.newsletter-form .input {
  min-width:280px
}

.comment:hover {
  border-color:rgba(0,0,0,.08)
}

.newsletter-section {
  position:relative;
  overflow:hidden;
  padding:0 var(--space-6) var(--space-4);
  max-width:var(--container-max);
  margin:0 auto;
  margin-bottom:var(--space-6)
}

.newsletter-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 80% 50%,color-mix(in srgb,var(--color-primary-600) 4%,transparent) 0,transparent 60%);
  pointer-events:none;
  border-radius:inherit
}

.newsletter-form .form-group {
  margin-bottom:0;
  flex:1;
  min-width:200px
}

.newsletter-form .newsletter-form .btn-loading .btn-text,.newsletter-form .newsletter-form .btn-loading .btn-loading-text {
  display:inline
}

.search-stats {
  max-width:var(--container-max);
  margin:0 0 var(--space-6);
  padding:0 var(--space-6);
  font-size:.8125rem;
  color:var(--color-gray-500);
  font-weight:500;
  text-align:center;
  margin-bottom:var(--space-6)
}

.search-form {
  max-width:600px;
  margin:var(--space-6) auto var(--space-8);
  padding:0 var(--space-6);
  position:relative
}

.search-input:focus {
  outline:0;
  border-color:var(--color-primary-400)
}

.search-btn {
  padding:var(--space-3) var(--space-6);
  white-space:nowrap;
  border-radius:var(--radius-xl);
  flex-shrink:0
}

.comment {
  padding:var(--space-4) var(--space-5);
  background:var(--color-gray-50);
  border:0;
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-3);
  border-bottom:none
}

.comment-author {
  font-weight:600;
  color:var(--color-gray-800);
  font-size:.8125rem
}

.comment-date {
  font-size:.6875rem;
  color:var(--color-gray-600)
}

.comment-content {
  font-size:.8125rem;
  color:var(--color-gray-600);
  line-height:1.65;
  margin:0
}

.newsletter-card {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-2xl);
  flex-direction:column;
  text-align:center;
  position:relative;
  overflow:hidden;
  max-width:none;
  width:100%
}

.newsletter-title {
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-gray-900);
  margin:0;
  font-family:var(--font-family-editorial),Georgia,serif;
  line-height:2.6rem
}

.newsletter-description {
  font-size:.8125rem;
  color:var(--color-gray-500);
  line-height:1.6;
  margin:0
}

.newsletter-form {
  display:flex;
  gap:var(--space-3);
  flex-shrink:0;
  width:100%;
  max-width:none;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start
}

.search-input-wrapper {
  display:flex;
  gap:var(--space-3);
  align-items:center;
  position:relative
}

.search-input {
  flex:1;
  min-width:0;
  padding:.6875rem 1rem;
  font-size:.9375rem;
  font-family:var(--font-family);
  color:var(--color-gray-900);
  background:var(--color-bg-elevated);
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-xl);
  outline:none
}

.search-hint {
  display:block;
  text-align:center;
  margin-top:var(--space-3);
  font-size:var(--text-xs);
  color:var(--color-gray-600);
  opacity:.7
}

.newsletter-content {
  max-width:none
}

.newsletter-form .input-lg {
  border-radius:var(--radius-xl);
  border:1.5px solid var(--color-gray-200)
}

.newsletter-form .input-lg:focus {
  border-color:var(--color-primary-400)
}

.search-form:focus-within .search-hint {
  opacity:1
}

.newsletter-success {
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--space-6);
  animation:fadeIn .4s ease
}

.search-page-header {
  text-align:center;
  padding:clamp(2.5rem,6vw,4rem) var(--space-6) var(--space-4);
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary-600) 4%,transparent) 0,color-mix(in srgb,var(--color-primary-600) 1%,transparent) 40%,var(--color-bg-primary) 100%)
}

.search-page-header h1 {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-2)
}

.search-page-header p {
  font-size:clamp(.875rem,1.5vw,1rem);
  color:var(--color-gray-500);
  margin:0
}

.related-posts {
  max-width:var(--content-max);
  margin:var(--space-10) auto var(--space-8)
}

.related-posts h3 {
  font-size:var(--text-lg);
  font-weight:700;
  margin:0 0 var(--space-6)
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4)
}

.related-card {
  padding:var(--space-4);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-lg)
}

.related-card:hover {
  border-color:var(--color-primary-200);
  transform:translateY(-2px)
}

.related-card h4 {
  font-size:var(--text-sm);
  font-weight:600;
  margin:0 0 var(--space-2)
}

.related-card h4 a {
  color:var(--color-gray-900);
  text-decoration:none
}

.related-card h4 a:hover {
  color:var(--color-primary-600)
}

.related-card p {
  font-size:var(--text-xs);
  color:var(--color-gray-500);
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.comments-section {
  max-width:var(--content-max);
  margin:var(--space-8) auto;
  padding:var(--space-8) var(--space-6)
}

.comments-section h2 {
  font-size:var(--text-lg);
  font-weight:700;
  margin:0 0 var(--space-6)
}

.comment-form-section {
  margin-top:var(--space-8);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-gray-100)
}

.comment-form-section h3 {
  font-size:var(--text-base);
  font-weight:600;
  margin:0 0 var(--space-4)
}

.comment-form {
  display:flex;
  flex-direction:column;
  gap:var(--space-4)
}

.comment-form-notice {
  font-size:var(--text-sm);
  line-height:1.5;
  margin:var(--space-3) 0 0
}

.social-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-gray-500);
  text-decoration:none;
  padding:.375rem .75rem;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg)
}

.social-link:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-300);
  background:color-mix(in srgb,var(--color-primary-600) 4%,transparent)
}

.search-suggestions {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  margin-top:var(--space-2);
  max-height:300px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:all .2s ease;
  z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}

.search-suggestions.visible.has-interaction {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}

.sidebar-section {
  margin-bottom:var(--space-4);
  padding:var(--space-5);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl)
}

.sidebar-heading {
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--color-gray-400);
  margin:0 0 var(--space-3);
  text-transform:uppercase;
  letter-spacing:.05em
}

.sidebar-related-card {
  display:flex;
  gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-lg);
  text-decoration:none;
  margin-bottom:var(--space-3);
  border:1px solid var(--color-gray-100);
  transition:border-color .2s,background .2s,transform .2s
}

.sidebar-related-card:last-child {
  margin-bottom:0
}

.sidebar-related-card:hover {
  background:var(--color-gray-50);
  border-color:var(--color-primary-200);
  transform:translateY(-1px)
}

.sidebar-related-image {
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-gray-100)
}

.sidebar-related-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.sidebar-related-body {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.sidebar-related-title {
  display:block;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-gray-900);
  line-height:var(--leading-snug);
  margin-bottom:2px
}

.sidebar-related-card:hover .sidebar-related-title {
  color:var(--color-primary-600)
}

.sidebar-related-excerpt {
  display:block;
  font-size:var(--text-xs);
  color:var(--color-gray-600);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.sidebar-comments-section h2 {
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-4);
  text-transform:uppercase;
  letter-spacing:.03em
}

.sidebar-comments-section .comment {
  padding:var(--space-3);
  background:var(--color-gray-50);
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-3)
}

.sidebar-comments-section .comment-author {
  font-size:var(--text-xs);
  font-weight:600
}

.sidebar-comments-section .comment-date {
  font-size:.6875rem
}

.sidebar-comments-section .comment-content {
  font-size:var(--text-xs);
  line-height:1.5;
  margin:var(--space-1) 0 0
}

.comment-form-toggle {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  width:100%;
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);
  font-weight:500;
  font-family:var(--font-family);
  color:var(--color-gray-600);
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-xl);
  cursor:pointer;
  transition:all .2s ease;
  margin-top:var(--space-4)
}

.comment-form-toggle:hover {
  background:var(--color-primary-50);
  border-color:var(--color-primary-200);
  color:var(--color-primary-600)
}

.comment-modal {
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
  padding:var(--space-6)
}

.comment-modal.visible {
  opacity:1;
  visibility:visible
}

.comment-modal-content {
  width:100%;
  max-width:480px;
  background:var(--color-bg-elevated);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  transform:scale(.95) translateY(10px);
  transition:transform .2s ease
}

.comment-modal.visible .comment-modal-content {
  transform:scale(1) translateY(0)
}

.comment-modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--color-gray-100)
}

.comment-modal-header h3 {
  font-size:var(--text-lg);
  font-weight:700;
  margin:0;
  color:var(--color-gray-900)
}

.comment-modal-close {
  background:none;
  border:0;
  font-size:1.5rem;
  color:var(--color-gray-400);
  cursor:pointer;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  line-height:1;
  transition:all .15s ease
}

.comment-modal-close:hover {
  background:var(--color-gray-100);
  color:var(--color-gray-700)
}

.comment-modal-body {
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-4)
}

.comment-modal-body .form-group {
  margin:0
}

.comment-modal-body .form-group label {
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-gray-700);
  margin-bottom:var(--space-2);
  display:block
}

.comment-modal-body .input {
  font-size:var(--text-sm)
}

.comment-modal-body textarea.input {
  min-height:100px;
  resize:vertical
}

.comment-modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--color-gray-100);
  background:var(--color-gray-50)
}

.comment-modal-cancel {
  font-size:var(--text-sm)
}

.comment-modal .btn-primary {
  font-size:var(--text-sm)
}

.sidebar-comments-section .comment-form-section h3 {
  font-size:var(--text-sm);
  margin:0 0 var(--space-3)
}

.sidebar-comments-section .comment-form .form-group label {
  font-size:var(--text-xs)
}

.sidebar-comments-section .comment-form .input {
  font-size:var(--text-xs);
  padding:.5rem .75rem
}

.sidebar-comments-section .comment-form textarea.input {
  min-height:70px
}

.sidebar-comments-section .comment-form .btn {
  font-size:var(--text-xs);
  padding:.5rem 1rem
}

.sidebar-comments-section .form-hint {
  font-size:.625rem
}

.sidebar-comments-section .field-error {
  font-size:.625rem;
  min-height:1rem
}

.comments-empty {
  color:var(--color-gray-600);
  font-size:var(--text-xs)
}

.widget-area {
  display:flex;
  flex-direction:column;
  gap:var(--space-6)
}

.widget {
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-xl);
  padding:var(--space-5)
}

.widget-title {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-900);
  margin:0 0 var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--color-gray-100)
}

.widget-search-wrap {
  position:relative;
  display:flex;
  align-items:center;
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  background:var(--color-bg-primary);
  transition:border-color .15s,box-shadow .15s
}

.widget-search-wrap:focus-within {
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-400) 20%,transparent)
}

.widget-search-icon {
  position:absolute;
  left:.75rem;
  display:flex;
  color:var(--color-gray-400);
  pointer-events:none
}

.widget-search-input {
  width:100%;
  padding:.625rem .75rem .625rem 2.25rem;
  font-size:var(--text-sm);
  font-family:var(--font-family);
  border:0;
  background:transparent;
  color:var(--color-gray-800);
  outline:0
}

.widget-search-input::placeholder {
  color:var(--color-gray-400)
}

.widget-search-btn {
  position:absolute;
  right:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:calc(var(--radius-lg) - 3px);
  background:var(--gradient-primary);
  color:var(--color-primary-contrast,#fff);
  cursor:pointer;
  transition:opacity .15s
}

.widget-search-btn:hover {
  opacity:.85
}

.widget-search-hint {
  margin:var(--space-2) 0 0;
  font-size:var(--text-xs);
  color:var(--color-gray-400)
}

.widget-search-hint kbd {
  display:inline-block;
  padding:1px 6px;
  font-size:11px;
  font-family:var(--font-family-mono);
  background:var(--color-gray-100);
  border:1px solid var(--color-gray-200);
  border-radius:4px;
  color:var(--color-gray-500);
  line-height:1.4
}

.widget-post-list {
  display:flex;
  flex-direction:column;
  gap:2px
}

.widget-post-item {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:background .15s,transform .15s
}

.widget-post-item:hover {
  background:var(--color-gray-50);
  transform:translateY(-1px)
}

.widget-post-thumb {
  width:48px;
  height:48px;
  border-radius:var(--radius-md);
  overflow:hidden;
  flex-shrink:0;
  background:var(--color-gray-100)
}

.widget-post-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}

.widget-post-thumb-placeholder {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));
  color:var(--color-primary-400)
}

.widget-post-body {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.widget-post-title {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-800);
  line-height:var(--leading-snug);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .15s
}

.widget-post-item:hover .widget-post-title {
  color:var(--color-primary-600)
}

.widget-post-date {
  font-size:var(--text-xs);
  color:var(--color-gray-400)
}

.widget-newsletter {
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  width:100%
}

.widget-newsletter-heading {
  font-weight:var(--font-semibold);
  margin-bottom:var(--space-1)
}

.widget-newsletter-desc {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  margin-bottom:var(--space-3)
}

.widget-newsletter-field {
  display:flex;
  gap:var(--space-2)
}

.widget-newsletter-input {
  flex:1;
  padding:.5rem .75rem;
  font-size:var(--text-sm);
  font-family:var(--font-family);
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  background:var(--color-bg-primary);
  color:var(--color-gray-800);
  transition:border-color .15s,box-shadow .15s;
  outline:0
}

.widget-newsletter-input:focus {
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-400) 20%,transparent)
}

.widget-newsletter-btn {
  padding:.5rem 1rem;
  font-size:var(--text-sm);
  white-space:nowrap;
  flex-shrink:0
}

.widget-newsletter-btn .spinner {
  animation:widget-spin .8s linear infinite
}

.widget-newsletter-hint {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin:var(--space-2) 0 0;
  font-size:var(--text-xs);
  color:var(--color-gray-600)
}

.widget-newsletter-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-success);
  flex-shrink:0
}

.widget-newsletter-success {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3);
  background:color-mix(in srgb,var(--color-success) 8%,transparent);
  border-radius:var(--radius-lg);
  font-size:var(--text-sm);
  color:var(--color-gray-700);
  font-weight:var(--font-medium)
}

.widget-category-list {
  display:flex;
  flex-direction:column
}

.widget-category-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-2) 0;
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  text-decoration:none;
  border-bottom:1px solid var(--color-gray-50);
  transition:color .15s
}

.widget-category-item:last-child {
  border-bottom:0
}

.widget-category-item:hover {
  color:var(--color-primary-600)
}

.widget-category-name {
  font-weight:var(--font-medium)
}

.widget-category-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 8px;
  font-size:var(--text-xs);
  font-weight:var(--font-medium);
  color:var(--color-gray-500);
  background:var(--color-gray-100);
  border-radius:var(--radius-full);
  transition:background .15s,color .15s
}

.widget-category-item:hover .widget-category-count {
  background:var(--color-primary-50);
  color:var(--color-primary-600)
}

.widget-social-links {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.widget-social-btn {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-600);
  text-decoration:none;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-full);
  transition:color .15s,border-color .15s,transform .15s,background .15s
}

.widget-social-btn svg {
  flex-shrink:0
}

.widget-social-btn:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-200);
  background:var(--color-primary-50);
  transform:translateY(-1px)
}

.widget-about {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-3)
}

.widget-about-avatar {
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  overflow:hidden;
  box-shadow:0 0 0 3px var(--color-primary-100);
  flex-shrink:0
}

.widget-about-avatar img {
  width:100%;
  height:100%;
  object-fit:cover
}

.widget-about-text {
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  line-height:1.6;
  margin:0
}

.widget-about-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-primary-600);
  text-decoration:none;
  transition:gap .2s
}

.widget-about-link:hover {
  gap:var(--space-2)
}

.widget-tag-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.widget-tag {
  display:inline-block;
  padding:.25rem .625rem;
  font-size:var(--text-xs);
  font-weight:var(--font-medium);
  color:var(--color-primary-600);
  background:var(--color-primary-50);
  border-radius:var(--radius-full);
  text-decoration:none;
  transition:background .15s,color .15s,transform .15s
}

.widget-tag:hover {
  background:var(--gradient-primary);
  color:#fff;
  transform:translateY(-1px)
}

.widget-tag--md {
  font-size:var(--text-sm);
  padding:.3rem .75rem
}

.widget-tag--lg {
  font-size:var(--text-base);
  padding:.35rem .875rem;
  font-weight:var(--font-semibold)
}

.widget-post-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--space-4)
}

.widget-post-grid-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s
}

.widget-post-grid-card:hover {
  border-color:var(--color-primary-200);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.06)
}

.widget-post-grid-card-img {
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--color-gray-100)
}

.widget-post-grid-card-img img {
  width:100%;
  height:100%;
  object-fit:cover
}

.widget-post-grid-card-img .widget-post-thumb-placeholder {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));
  color:var(--color-primary-400)
}

.widget-post-grid-card-body {
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:2px
}

.widget-post-grid-card-body .widget-post-title {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-800);
  line-height:var(--leading-snug);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.widget-post-grid-card:hover .widget-post-title {
  color:var(--color-primary-600)
}

.widget-post-grid-card-body .widget-post-date {
  font-size:var(--text-xs);
  color:var(--color-gray-400)
}

.widget-post-compact {
  list-style:none;
  counter-reset:post-count;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0
}

.widget-post-compact li {
  counter-increment:post-count
}

.widget-post-compact-item {
  display:flex;
  align-items:baseline;
  gap:var(--space-3);
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-gray-50);
  text-decoration:none;
  transition:color .15s
}

.widget-post-compact li:last-child .widget-post-compact-item {
  border-bottom:0
}

.widget-post-compact-item::before {
  content:counter(post-count);
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
  color:var(--color-gray-300);
  min-width:1.25em;
  text-align:right;
  flex-shrink:0
}

.widget-post-compact-item .widget-post-title {
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-700);
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.widget-post-compact-item:hover .widget-post-title {
  color:var(--color-primary-600)
}

.widget-post-compact-item .widget-post-date {
  font-size:var(--text-xs);
  color:var(--color-gray-400);
  flex-shrink:0
}

.widget-post-featured {
  display:flex;
  flex-direction:column;
  gap:2px
}

.widget-post-featured-hero {
  display:block;
  text-decoration:none;
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:var(--space-3);
  transition:transform .15s,box-shadow .15s
}

.widget-post-featured-hero:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.06)
}

.widget-post-featured-hero-img {
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--color-gray-100)
}

.widget-post-featured-hero-img img {
  width:100%;
  height:100%;
  object-fit:cover
}

.widget-post-featured-hero-img .widget-post-thumb-placeholder {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));
  color:var(--color-primary-400)
}

.widget-post-featured-hero-body {
  padding:var(--space-3) 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1)
}

.widget-post-featured-hero-body .widget-post-title {
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  line-height:var(--leading-snug)
}

.widget-post-featured-hero:hover .widget-post-title {
  color:var(--color-primary-600)
}

.widget-post-excerpt {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.widget-category-pills {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.widget-category-pill {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:.3rem .75rem;
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-600);
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-full);
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s
}

.widget-category-pill:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-200);
  background:var(--color-primary-50)
}

.widget-category-pill-count {
  font-size:var(--text-xs);
  color:var(--color-gray-400);
  font-weight:normal
}

.widget-category-compact {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  font-size:var(--text-sm);
  line-height:1.8
}

.widget-category-compact a {
  color:var(--color-gray-600);
  text-decoration:none;
  transition:color .15s
}

.widget-category-compact a:hover {
  color:var(--color-primary-600)
}

.widget-category-compact a:not(:last-child)::after {
  content:"\00B7";
  margin:0 var(--space-2);
  color:var(--color-gray-300)
}

.widget-tag-list {
  display:flex;
  flex-direction:column
}

.widget-tag-list-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-2) 0;
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  text-decoration:none;
  border-bottom:1px solid var(--color-gray-50);
  transition:color .15s
}

.widget-tag-list-item:last-child {
  border-bottom:0
}

.widget-tag-list-item:hover {
  color:var(--color-primary-600)
}

.widget-tag-list-item span:first-child {
  font-weight:var(--font-medium)
}

.widget-tag-list-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 8px;
  font-size:var(--text-xs);
  font-weight:var(--font-medium);
  color:var(--color-gray-500);
  background:var(--color-gray-100);
  border-radius:var(--radius-full);
  transition:background .15s,color .15s
}

.widget-tag-list-item:hover .widget-tag-list-count {
  background:var(--color-primary-50);
  color:var(--color-primary-600)
}

.widget-tag-cloud--compact .widget-tag {
  font-size:var(--text-xs);
  padding:.25rem .625rem
}

.widget-newsletter--minimal .widget-newsletter-heading,.widget-newsletter--minimal .widget-newsletter-desc,.widget-newsletter--minimal .widget-newsletter-hint {
  display:none
}

.widget-newsletter--banner {
  display:flex;
  align-items:center;
  gap:var(--space-6)
}

.widget-newsletter--banner .widget-newsletter-text {
  flex:1 1 0%;
  min-width:0
}

.widget-newsletter--banner .widget-newsletter-heading {
  margin-bottom:var(--space-1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.widget-newsletter--banner .widget-newsletter-desc {
  margin-bottom:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.widget-newsletter--banner .widget-newsletter-form {
  flex:1 0 auto;
  min-width:min(260px,100%)
}

.widget-newsletter--banner .widget-newsletter-field {
  flex-direction:row
}

.widget-newsletter--banner .widget-newsletter-hint {
  display:none
}

.widget-about--horizontal {
  flex-direction:row;
  text-align:left;
  align-items:flex-start
}

.widget-about--horizontal .widget-about-avatar {
  flex-shrink:0
}

.widget-about--minimal {
  align-items:flex-start;
  text-align:left
}

.widget-about--minimal .widget-about-text {
  font-size:var(--text-xs)
}

.widget-social-icons {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.widget-social-icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-full);
  color:var(--color-gray-600);
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s,transform .15s
}

.widget-social-icon-btn:hover {
  color:var(--color-primary-600);
  border-color:var(--color-primary-200);
  background:var(--color-primary-50);
  transform:translateY(-1px)
}

.widget-social-list {
  display:flex;
  flex-direction:column;
  gap:2px
}

.widget-social-list-item {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-gray-600);
  text-decoration:none;
  border-radius:var(--radius-md);
  transition:color .15s,background .15s
}

.widget-social-list-item:hover {
  color:var(--color-primary-600);
  background:var(--color-gray-50)
}

.widget-custom-html {
  font-size:var(--text-sm);
  line-height:var(--leading-relaxed);
  color:var(--color-gray-600)
}

.widget-custom-html a {
  color:var(--color-primary-600);
  text-decoration:underline;
  text-underline-offset:2px
}

.widget-custom-html img {
  border-radius:var(--radius-md);
  margin:var(--space-2) 0
}

.widget-area--after-content {
  max-width:var(--container-max);
  margin:var(--space-8) auto;
  padding:0 var(--space-6)
}

.widget-area--after-content .widget {
  padding:var(--space-6)
}

.widget-area--after-content .widget-search-input {
  padding-top:.75rem;
  padding-bottom:.75rem;
  font-size:var(--text-base)
}

.widget-area--after-content .widget-search-btn {
  width:36px;
  height:36px
}

.widget-area--after-content .widget-newsletter-field {
  flex-direction:row
}

.widget-area--footer {
  max-width:var(--container-max);
  margin:var(--space-6) auto 0;
  padding:0 var(--space-6)
}

.widget-area--footer .widget {
  padding:var(--space-6)
}

.widget-area--footer .widget-social-links {
  justify-content:center
}

.widget-area--sidebar .widget {
  background:none;
  border:none;
  padding:0
}

.widget-area--sidebar .widget-title {
  font-size:.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-gray-400)
}

.widget-area--sidebar .widget-about-avatar {
  width:56px;
  height:56px
}

.widget-area--sidebar .widget-newsletter-field {
  flex-direction:column
}

.widget-area--sidebar .sidebar-related-excerpt {
  display:none
}

.widget-area--sidebar .sidebar-related-card {
  padding:var(--space-2);
  border:none;
  border-radius:var(--radius-md);
  margin-bottom:2px;
  gap:var(--space-3)
}

.widget-area--sidebar .sidebar-related-card:last-child {
  margin-bottom:0
}

.widget-area--sidebar .sidebar-related-card:hover {
  background:var(--color-gray-50);
  border-color:transparent;
  transform:none
}

.widget-area--sidebar .sidebar-related-image {
  width:48px;
  height:48px;
  border-radius:var(--radius-md)
}

.widget-area--sidebar .sidebar-related-title {
  font-size:.8125rem;
  line-height:1.35
}

.widget-area--header {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  width:100%
}

.widget-area--homepage {
  display:flex;
  flex-direction:column
}

.widget-area--homepage>.widget {
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--space-6);
  padding-right:var(--space-6);
  width:100%
}

.widget-area--homepage>.widget--hero,.widget-area--homepage>.widget--section {
  max-width:none;
  padding-left:0;
  padding-right:0
}

.comments-section {
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--border, #e5e7eb)
}

.comments-section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.5rem
}

.comments-section-header h2 {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.5rem;
  margin:0
}

.comment-sort-bar {
  display:flex;
  gap:.25rem;
  background:var(--muted, #f3f4f6);
  border-radius:8px;
  padding:3px
}

.comment-sort-btn {
  border:none;
  background:transparent;
  padding:.375rem .75rem;
  border-radius:6px;
  font-size:.8125rem;
  font-weight:500;
  cursor:pointer;
  color:var(--muted-foreground, #6b7280);
  transition:all .15s ease
}

.comment-sort-btn.active {
  background:var(--background, #fff);
  color:var(--foreground, #111);
  box-shadow:0 1px 2px rgba(0,0,0,.06)
}

.comment-sort-btn:hover:not(.active) {
  color:var(--foreground, #111)
}

.comment-form-section {
  background:var(--muted, #f8f9fa);
  border-radius:12px;
  padding:1.5rem;
  margin-bottom:2rem
}

.comment-form-inline {
  display:flex;
  flex-direction:column;
  gap:1rem
}

.comment-form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.comment-reply-indicator {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .75rem;
  background:var(--color-primary, #6366f1);
  color:#fff;
  border-radius:8px;
  font-size:.875rem
}

.comment-reply-indicator button {
  background:none;
  border:none;
  color:#fff;
  font-size:1.25rem;
  cursor:pointer;
  padding:0 .25rem;
  line-height:1;
  opacity:.8
}

.comment-reply-indicator button:hover {
  opacity:1
}

.comment-textarea-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:.25rem;
  font-size:.75rem;
  color:var(--muted-foreground, #9ca3af)
}

.comment-char-count.warning {
  color:#f59e0b
}

.comment-char-count.danger {
  color:#ef4444
}

.comment-format-hint {
  opacity:.6
}

.comment-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:.875rem;
  color:#fff;
  flex-shrink:0
}

.comment-avatar-sm {
  width:32px;
  height:32px;
  font-size:.75rem
}

.comment-thread {
  margin-bottom:1rem
}

.comment {
  border:1px solid var(--border, #e5e7eb);
  border-radius:12px;
  padding:1rem 1.25rem;
  transition:box-shadow .15s ease,transform .15s ease;
  animation:commentFadeIn .3s ease
}

.comment:hover {
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}

.comment-pending {
  border-style:dashed;
  opacity:.75
}

.comment-header {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.5rem
}

.comment-info {
  display:flex;
  flex-direction:column;
  gap:.125rem;
  min-width:0
}

.comment-author {
  font-weight:600;
  font-size:.9375rem
}

.comment-time {
  font-size:.75rem;
  color:var(--muted-foreground, #9ca3af)
}

.comment-badge-pending {
  font-size:.6875rem;
  font-weight:500;
  padding:.125rem .5rem;
  border-radius:9999px;
  background:#fef3c7;
  color:#92400e;
  margin-left:auto;
  white-space:nowrap
}

.comment-body {
  font-size:.9375rem;
  line-height:1.6;
  margin-bottom:.5rem;
  word-break:break-word
}

.comment-body strong {
  font-weight:600
}

.comment-body em {
  font-style:italic
}

.comment-body a {
  color:var(--color-primary, #6366f1);
  text-decoration:underline
}

.comment-actions {
  display:flex;
  gap:.75rem;
  align-items:center
}

.comment-action-btn {
  display:flex;
  align-items:center;
  gap:.375rem;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:.8125rem;
  color:var(--muted-foreground, #9ca3af);
  padding:.25rem .5rem;
  border-radius:6px;
  transition:all .15s ease
}

.comment-action-btn:hover {
  color:var(--foreground, #111);
  background:var(--muted, #f3f4f6)
}

.comment-like-btn.liked {
  color:#ef4444
}

.comment-like-btn.liked svg {
  fill:#ef4444;
  stroke:#ef4444
}

.comment-replies {
  margin-left:2rem;
  margin-top:.5rem;
  padding-left:1rem;
  border-left:2px solid var(--border, #e5e7eb);
  display:flex;
  flex-direction:column;
  gap:.5rem
}

.comments-empty-state {
  text-align:center;
  padding:3rem 1rem;
  color:var(--muted-foreground, #9ca3af)
}

.comments-empty-state p {
  margin-top:.75rem;
  font-size:.9375rem
}

/* ── Sidebar Comments ── */
.sidebar-comments {
  border-top:1px solid var(--color-gray-100);
  padding-top:var(--space-5)
}

.sidebar-comments-title {
  font-size:.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-gray-400);
  margin-bottom:var(--space-4)
}

.sidebar-comments-title span {
  color:var(--color-gray-300);
  font-weight:400
}

.sidebar-comment-form-wrap .comment-form-inline {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-bottom:var(--space-4)
}

.sidebar-comment-form-wrap .input {
  font-size:.8125rem;
  padding:.5rem .625rem;
  border-radius:var(--radius-md);
  border:1px solid var(--color-gray-150,var(--color-gray-100));
  background:var(--color-bg)
}

.sidebar-comment-form-wrap .input:focus {
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 12%,transparent)
}

.sidebar-comment-form-wrap textarea.input {
  min-height:56px;
  resize:vertical
}

.sidebar-comment-form-wrap .btn {
  font-size:.8125rem;
  padding:.5rem;
  width:100%;
  border-radius:var(--radius-md)
}

.sc-form-details {
  display:none;
  flex-direction:column;
  gap:.5rem
}

.comment-form-inline:focus-within .sc-form-details {
  display:flex
}

.sidebar-comment-form-wrap .comment-reply-indicator {
  font-size:.75rem;
  padding:.375rem .5rem;
  border-radius:var(--radius-md)
}

.sidebar-comment-form-wrap .field-error {
  font-size:.6875rem;
  min-height:0
}

.sidebar-comment-list {
  display:flex;
  flex-direction:column;
  gap:var(--space-3)
}

.sidebar-comment-thread+.sidebar-comment-thread {
  padding-top:var(--space-3);
  border-top:1px solid var(--color-gray-100)
}

.sc-comment {
  display:flex;
  gap:.5rem;
  align-items:flex-start
}

.sc-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.625rem;
  color:#fff;
  flex-shrink:0
}

.sc-bubble {
  background:var(--color-gray-50);
  border-radius:2px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding:.375rem .625rem;
  flex:1;
  min-width:0
}

.sc-name {
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--color-gray-800);
  line-height:1.3;
  margin-bottom:1px
}

.sc-body {
  font-size:.8125rem;
  line-height:1.45;
  color:var(--color-gray-600);
  word-break:break-word
}

.sc-meta {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding-left:36px;
  margin-top:3px
}

.sc-time {
  font-size:.6875rem;
  color:var(--color-gray-400)
}

.sc-meta-dot {
  color:var(--color-gray-300);
  font-size:.6875rem;
  line-height:1
}

.sc-meta .comment-action-btn {
  font-size:.6875rem;
  font-weight:600;
  padding:0;
  gap:.25rem;
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--color-gray-400);
  display:flex;
  align-items:center;
  transition:color .15s
}

.sc-meta .comment-action-btn:hover {
  color:var(--color-gray-700)
}

.sc-reply {
  margin-left:14px;
  margin-top:var(--space-2);
  padding-left:var(--space-3);
  border-left:2px solid var(--color-gray-200)
}

.sc-reply .sc-avatar {
  width:22px;
  height:22px;
  font-size:.5rem
}

.sc-reply .sc-bubble {
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100)
}

.sc-reply .sc-meta {
  padding-left:30px
}

.sc-reply .sc-body {
  font-size:.75rem
}

.sc-reply .sc-name {
  font-size:.6875rem
}

.sidebar-comments-empty {
  color:var(--color-gray-400);
  font-size:.8125rem;
  line-height:1.5;
  text-align:center;
  padding:var(--space-4) var(--space-2)
}
/* ==========================================================================
   09-media.css — Responsive images, image grids, lightbox, media queries
   ========================================================================== */

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

@media(min-width:1024px) {
  .toc {
    display:block
  }
  .article-layout .article-main {
    min-width:0;
    padding-top:var(--space-4)
  }
  .article-layout.article-with-toc {
    grid-template-columns:1fr 300px
  }
  .article-layout.article-with-toc .article-header {
    grid-column:1/-1
  }
  .article-with-toc .article-sidebar {
    position:sticky;
    top:calc(var(--header-height) + var(--space-4));
    align-self:start;
    padding-top:var(--space-4);
    padding-bottom:var(--space-6)
  }
  .article-with-toc .article-sidebar:hover {
    scrollbar-color:var(--color-gray-200) transparent
  }
  .article-with-toc .article-sidebar::-webkit-scrollbar {
    width:4px
  }
  .article-with-toc .article-sidebar::-webkit-scrollbar-track {
    background:transparent
  }
  .article-with-toc .article-sidebar::-webkit-scrollbar-thumb {
    background:transparent;
    border-radius:4px
  }
  .article-with-toc .article-sidebar:hover::-webkit-scrollbar-thumb {
    background:var(--color-gray-200)
  }
}

@media(max-width:768px) {
  .about-grid {
    grid-template-columns:1fr
  }
  .about-stats-bar-inner {
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-5)
  }
  .about-layer-stack {
    grid-template-columns:1fr
  }
  .about-compare-grid {
    grid-template-columns:1fr
  }
  .lic-pricing-inner {
    grid-template-columns:1fr
  }
  .lic-grid {
    grid-template-columns:1fr
  }
  .lic-stack-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .contact-body-inner {
    grid-template-columns:1fr
  }
  .contact-channels {
    order:-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-4)
  }
  .contact-faq-grid {
    grid-template-columns:1fr
  }
  .showdown-table-wrap {
    margin-left:calc(-1 * var(--space-4));
    margin-right:calc(-1 * var(--space-4))
  }
  .showdown-name {
    min-width:70px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .article-with-toc .article-sidebar {
    border-top:1px solid var(--color-gray-100);
    margin-top:var(--space-8);
    padding-top:var(--space-6)
  }
  input[type=text],input[type=email],input[type=search],textarea,select,.input {
    font-size:16px!important
  }
}

@media(max-width:480px) {
  .about-stats-bar-inner {
    grid-template-columns:1fr;
    gap:var(--space-4)
  }
  .about-stat-number {
    font-size:2rem
  }
  .about-hero-gradient {
    padding:var(--space-8) var(--space-4) var(--space-6)
  }
  .about-cta-gradient {
    padding:var(--space-8) var(--space-4)
  }
  .contact-hero-gradient {
    padding:var(--space-8) var(--space-4) var(--space-6)
  }
  .contact-cta-gradient {
    padding:var(--space-8) var(--space-4)
  }
  .contact-form-section-inner {
    padding:var(--space-5)
  }
  .contact-channels {
    grid-template-columns:1fr
  }
}

.img-blur-wrap {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  flex:1 1 0%
}

.img-placeholder {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(20px);
  transform:scale(1.1);
  transition:opacity .4s ease;
  z-index:1
}

.img-blur-wrap.loaded .img-placeholder {
  opacity:0;
  pointer-events:none
}

.img-blur-wrap picture {
  display:block;
  width:100%;
  height:100%
}

.img-blur-wrap picture img {
  width:100%;
  height:100%;
  object-fit:cover
}

.slider-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s,background .2s;
  z-index:2;
  color:var(--color-gray-800);
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}

.slider-arrow:hover {
  background:#fff
}

.slider-arrow-prev {
  left:var(--space-3)
}

.slider-arrow-next {
  right:var(--space-3)
}

.slider-dots {
  position:absolute;
  bottom:var(--space-3);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:2
}

.slider-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  padding:0;
  transition:background .2s,transform .2s
}

.slider-dot.active {
  background:#fff;
  transform:scale(1.25)
}

@media(max-width:640px) {
  .slider-arrow {
    opacity:1;
    width:32px;
    height:32px
  }
  .post-hero-slider,.post-hero-image {
    border-radius:var(--radius-lg);
    aspect-ratio:4/3
  }
}

@media(max-width:639px) {
  .widget-area--after-content .widget-newsletter-field {
    flex-direction:column
  }
  .widget-area--after-content .widget-newsletter-btn {
    width:100%;
    justify-content:center
  }
  .widget-post-grid {
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:var(--space-3)
  }
  .widget-newsletter--banner {
    flex-direction:column;
    gap:var(--space-3)
  }
  .widget-newsletter--banner .widget-newsletter-heading,.widget-newsletter--banner .widget-newsletter-desc {
    white-space:normal
  }
}

@media(max-width:639px) {
  .block-columns[data-stack-mobile="true"] {
    grid-template-columns:1fr!important
  }
}

@media(max-width:640px) {
  .newsletter-card {
    padding:1.25rem
  }
  .post-item {
    padding:.75rem 0
  }
}

@media (min-width:640px) {
  .posts-grid {
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-6)
  }
  .featured-post {
    grid-template-columns:1.2fr 1fr;
    min-height:320px
  }
  .featured-post-image-wrapper {
    aspect-ratio:auto;
    height:100%
  }
  .footer-top {
    gap:var(--space-12)
  }
  .newsletter-card {
    flex-direction:row;
    text-align:left;
    align-items:flex-start
  }
  .newsletter-content {
    flex:1;
    flex-shrink:0
  }
  .newsletter-form {
    flex:1;
    max-width:none;
    flex-wrap:nowrap
  }
}

@media (min-width:1024px) {
  .posts-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .featured-post {
    grid-template-columns:1.4fr 1fr;
    min-height:380px
  }
  .newsletter-card {
    flex-direction:row;
    text-align:left
  }
  .newsletter-content {
    flex-shrink:0
  }
  .post-card-image-wrapper {
    aspect-ratio:3/2
  }
}

@media (min-width:768px) {
  .featured-post {
    grid-template-columns:1.2fr 1fr;
    min-height:360px
  }
}

@media (max-width:768px) {
  .mobile-menu-toggle {
    display:flex!important
  }
  .main-nav,.header-widget-nav.main-nav {
    display:none;
    position:fixed;
    top:60px;
    left:0;
    right:0;
    background:var(--color-bg-elevated);
    border-bottom:1px solid var(--color-gray-200);
    flex-direction:column;
    padding:var(--space-4) var(--space-6);
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    z-index:99;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease,opacity .25s ease
  }
  .main-nav.open,.main-nav.active,.header-widget-nav.main-nav.open {
    display:flex;
    transform:translateY(0);
    opacity:1;
    pointer-events:auto
  }
  .main-nav a {
    padding:var(--space-3) 0;
    font-size:var(--text-base);
    border-bottom:1px solid var(--color-gray-100)
  }
  .main-nav a:last-child {
    border-bottom:0
  }
  .header-actions {
    gap:var(--space-1)
  }
  .header-inner>div {
    flex:unset!important
  }
}

@media (min-width:769px) {
  .mobile-menu-toggle {
    display:none!important
  }
  .main-nav {
    display:flex!important
  }
}

@media(max-width:639px) {
  .featured-post {
    margin-bottom:1rem;
    padding:var(--space-3)
  }
  .featured-post-content {
    padding:.5rem .25rem
  }
  .featured-post-title {
    font-size:1.0625rem
  }
  .posts-grid {
    grid-template-columns:1fr;
    gap:1rem
  }
  .post-card-content {
    padding:1rem
  }
  .section {
    padding:.75rem 1rem;
    margin-bottom:0
  }
  .section-header {
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem
  }
  .mobile-menu-toggle {
    display:flex!important
  }
  .header-actions .search-toggle {
    display:none
  }
  .newsletter-form .input {
    min-width:0
  }
  .newsletter-form {
    flex-direction:column
  }
  .newsletter-form .btn {
    width:100%;
    justify-content:center
  }
  .footer-top {
    flex-direction:column;
    gap:var(--space-4)
  }
  .footer-brand {
    flex:unset
  }
  .footer-nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--space-4);
    margin-left:0
  }
  .footer-nav-group {
    flex:1 1 0;
    min-width:80px;
    gap:var(--space-1)
  }
  .footer-bottom {
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:var(--space-3)
  }
  .footer-shortcuts-bar {
    display:none
  }
  .footer-built-with {
    flex-wrap:wrap;
    justify-content:center
  }
  .comment {
    padding:1rem
  }
  .container,.footer-inner,.newsletter-section,.newsletter-card {
    padding-left:1rem;
    padding-right:1rem
  }
}

/* footer mobile layout now in 06-footer.css */

/* Tablet (769px – 1023px) */
@media (min-width:769px) and (max-width:1023px) {
  .about-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .about-layer-stack {
    grid-template-columns:repeat(2,1fr)
  }
  .about-compare-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .contact-body-inner {
    grid-template-columns:1fr 280px
  }
  .contact-faq-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .contact-channels {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-4)
  }
  .posts-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .post-card-content {
    padding:var(--space-4)
  }
  .container {
    padding-left:var(--space-6);
    padding-right:var(--space-6)
  }
  .footer-nav {
    gap:var(--space-6)
  }
  .article-with-toc {
    grid-template-columns:1fr
  }
  .article-with-toc .article-sidebar {
    position:relative;
    top:auto;
    max-height:none;
    border-top:1px solid var(--color-gray-100);
    margin-top:var(--space-8);
    padding-top:var(--space-6)
  }
}

@media print {
  header,footer,.hero,.newsletter-section,.comment-section,.pagination,.breadcrumb,.skip-link,.mobile-menu-toggle,.header-actions,.hero-cta-up,.section-link,.scroll-to-top,.reading-progress {
    display:none!important
  }
  body {
    font-size:12pt;
    line-height:1.6;
    color:#000;
    background:#fff
  }
  main,.content,.article-body {
    max-width:100%;
    padding:0;
    margin:0
  }
  .content img {
    max-width:100%;
    page-break-inside:avoid
  }
  h1,h2,h3 {
    page-break-after:avoid;
    color:#000
  }
  a {
    color:#000;
    text-decoration:underline
  }
  a[href^="http"]::after {
    content:" (" attr(href) ")";
    font-size:9pt;
    color:#666
  }
  pre,code {
    border:1px solid #ccc;
    background:#f5f5f5;
    page-break-inside:avoid
  }
  .post-card,.featured-post {
    break-inside:avoid;
    border:1px solid #ddd;
    padding:.5rem;
    margin-bottom:.5rem
  }
}

@media(max-width:640px) {
  .comment-form-row {
    grid-template-columns:1fr
  }
}

@media(max-width:640px) {
  .comment-replies {
    margin-left:.75rem;
    padding-left:.75rem
  }
}

/* Plugin responsive */
@media(max-width:768px) {
  .related-posts-grid { grid-template-columns:1fr }
  .reactions-btn { min-width:44px; padding:var(--space-2) }
  .helpful-widget { flex-direction:column; text-align:center }
  .font-sizer { margin-left:0; margin-top:var(--space-2) }
}
/* ==========================================================================
   10-utilities.css — Animations, scroll-to-top, reading progress, loading bar
   ========================================================================== */

.skip-link {
  position:absolute;
  top:-40px;
  left:0;
  transform:translateX(-50%);
  background:var(--color-primary-600);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:var(--radius-lg);
  z-index:1000
}

.skip-link:focus {
  top:0
}

.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
}

body.modal-open {
  overflow:hidden
}

.scroll-to-top {
  position:fixed;
  bottom:var(--space-6);
  right:var(--space-6);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:50%;
  color:var(--color-gray-500);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  z-index:50;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s
}

body.loaded .suggestion-item {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
  font-size:var(--text-sm)
}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible,select:focus-visible {
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary-600) 12%,transparent)
}

input:focus-visible,textarea:focus-visible {
  outline:none;
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-600) 10%,transparent)
}

.btn-spinner {
  animation:spin 1s linear infinite;
  margin-right:var(--space-1)
}

.animate-fade-in {
  animation:fadeIn .5s ease both
}

.page-loading-bar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--gradient-primary);
  z-index:10002;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
  pointer-events:none;
  will-change:transform
}

.page-loading-bar.active {
  transform:scaleX(.7);
  transition:transform 1s ease-out
}

.page-loading-bar.done {
  transform:scaleX(1);
  transition:transform .2s ease,opacity .3s ease .2s;
  opacity:0
}

.reading-progress {
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:3px;
  background:var(--gradient-primary);
  z-index:101;
  display:none;
  pointer-events:none
}

.scroll-to-top.visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:all;
  box-shadow:0 2px 8px rgba(0,0,0,.08)
}

.scroll-to-top:hover {
  background:var(--color-primary-600);
  color:#fff;
  border-color:var(--color-primary-600);
  box-shadow:0 4px 12px color-mix(in srgb,var(--color-primary-600) 25%,transparent)
}

.skeleton {
  background:linear-gradient(90deg,var(--color-gray-100) 25%,var(--color-gray-50) 50%,var(--color-gray-100) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--radius-md)
}

.skeleton-heading {
  height:1.75em;
  width:60%;
  margin-bottom:var(--space-3)
}

.skeleton-text {
  height:.875em;
  width:80%;
  margin-bottom:var(--space-2);
  border-radius:4px
}

.skeleton-image {
  aspect-ratio:16/10;
  border-radius:var(--radius-xl)
}

body.loaded .skeleton-placeholder {
  display:none
}

@keyframes spin {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}

@keyframes fadeIn {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

@keyframes fadeInUp {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes slideIn {
  from {
    opacity:0;
    transform:translateX(-10px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}

@keyframes pulse-glow {
  0%,100% {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.5;
    transform:scale(1.2)
  }
}

@keyframes shake {
  0%,100% {
    transform:translateX(0)
  }
  25% {
    transform:translateX(-4px)
  }
  75% {
    transform:translateX(4px)
  }
}

@keyframes shimmer {
  0% {
    background-position:200% 0
  }
  100% {
    background-position:-200% 0
  }
}

@keyframes toastProgress {
  from {
    width:100%
  }
  to {
    width:0
  }
}

@keyframes slideInFromRight {
  from {
    opacity:0;
    transform:translateX(100%)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}

@keyframes widget-spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes commentFadeIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
/* ==========================================================================
   11-dark-mode.css — Dark mode overrides (html.dark)
   ========================================================================== */

html.dark {
  --color-bg-primary:#0f1419;
  --color-bg-elevated:#1c2130;
  --color-gray-50:#14161b;
  --color-gray-100:#1c1f26;
  --color-gray-200:#282c36;
  --color-gray-300:#3a404d;
  --color-gray-400:#5c6370;
  --color-gray-500:#8b919e;
  --color-gray-600:#a8adb8;
  --color-gray-700:#c5c9d2;
  --color-gray-800:#e2e4e9;
  --color-gray-900:#f4f5f7;
  --color-primary-50:#1e1a2e;
  --color-primary-100:#2d2547;
  --color-primary-200:#3f3466;
  --color-primary-300:#5b4d8a;
  --color-primary-400:#8b7cc5;
  --color-primary-500:#a78bfa;
  --color-primary-600:#b69cfb;
  --color-primary-700:#c4aefc;
  --gradient-primary:linear-gradient(135deg,var(--color-primary-600) 0,var(--color-primary-500) 50%,var(--color-primary-400) 100%);
  --color-primary-contrast:#1a1a2e;
  --color-success:#4ade80;
  --color-error:#f87171
}

html.dark .theme-toggle .icon-sun,.theme-toggle .icon-moon {
  display:none
}

html:not(.dark) .theme-toggle .icon-moon {
  display:none
}

html:not(.dark) .theme-toggle .icon-sun {
  display:block
}

html.dark .gradient-text {
  background:linear-gradient(135deg,var(--color-primary-500) 0,var(--color-primary-400) 50%,var(--color-primary-300) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:#0000;
  background-clip:text;
  color:var(--color-primary-400)
}

html.dark .theme-toggle .icon-sun {
  display:none
}

html.dark .theme-toggle .icon-moon {
  display:block
}

html.dark .footer-shortcuts-bar kbd {
  color:var(--color-gray-400)
}

html.dark .footer-tech-rust {
  background:rgba(222,114,60,.15);
  color:#e8845a
}

html.dark .footer-tech-axum {
  background:rgba(59,130,246,.12);
  color:#93bbfd
}

html.dark .footer-tech-next {
  background:rgba(255,255,255,.08);
  color:#fff
}

html.dark .footer-tech-pg {
  background:rgba(51,103,145,.15);
  color:#7db3d8
}

html.dark .footer-tech-wasm {
  background:rgba(101,79,240,.12);
  color:#a99af7
}

html.dark .footer-keys {
}

html.dark .icon-sun {
  display:none
}

html.dark .icon-moon {
  display:block
}

html.dark header {
  background:rgba(15,20,25,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:rgba(255,255,255,.1)
}

html.dark header.scrolled {
  background:rgba(15,20,25,.95)
}

html.dark .post-card {
  background:var(--color-bg-elevated);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2)
}

html.dark .post-card:hover {
  border-color:rgba(255,255,255,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.25)
}

html.dark .featured-post {
  background:var(--color-bg-elevated);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 2px 12px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.15)
}

html.dark .featured-post:hover {
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.25)
}

html.dark footer {
  background:var(--color-gray-50);
  border-top-color:var(--color-gray-100)
}

html.dark .newsletter-card {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  box-shadow:0 2px 8px rgba(0,0,0,.25)
}

html.dark .post-item {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  box-shadow:0 1px 4px rgba(0,0,0,.25)
}

html.dark .post-item:hover {
  border-color:var(--color-primary-400);
  box-shadow:0 4px 16px rgba(0,0,0,.35)
}

html.dark .toast {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  color:var(--color-gray-800);
  box-shadow:0 8px 24px rgba(0,0,0,.4)
}

html.dark .search-suggestions {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200)
}

html.dark .comment {
  background:var(--color-gray-100)
}

html.dark .share-btn-enhanced {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  color:var(--color-gray-600)
}

html.dark .author-bio {
  background:var(--color-gray-100)
}

html.dark .author-card {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200)
}

html.dark .author-card-name {
  color:var(--color-gray-900)
}

html.dark .author-card-label {
  color:var(--color-primary-400)
}

html.dark .author-card-bio {
  color:var(--color-gray-400)
}

html.dark .author-card-avatar {
  border-color:rgba(139,92,246,.25);
  box-shadow:0 0 0 4px rgba(139,92,246,.1)
}

html.dark .related-card {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-100)
}

html.dark .social-link {
  border-color:var(--color-gray-200);
  color:var(--color-gray-500)
}

html.dark .cmd-palette-content {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200)
}

html.dark .cmd-palette-item:hover,html.dark .cmd-palette-item.active {
  background:var(--color-primary-100);
  color:var(--color-primary-400)
}

html.dark .code-lang-label {
  background:rgba(255,255,255,.04)
}

html.dark {
  scrollbar-color:var(--color-gray-300) transparent
}

html.dark ::-webkit-scrollbar-thumb {
  background:var(--color-gray-300)
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background:var(--color-gray-400)
}

html.dark .comment-form-toggle {
  background:var(--color-gray-100);
  border-color:var(--color-gray-200);
  color:var(--color-gray-600)
}

html.dark .comment-form-toggle:hover {
  background:var(--color-primary-100);
  border-color:var(--color-primary-300);
  color:var(--color-primary-400)
}

html.dark .comment-modal-content {
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200)
}

html.dark .comment-modal-header {
  border-bottom-color:var(--color-gray-200)
}

html.dark .comment-modal-footer {
  background:var(--color-gray-100);
  border-top-color:var(--color-gray-200)
}

html.dark .comment-modal-close:hover {
  background:var(--color-gray-200)
}

html.dark .sidebar-section {
  border-color:var(--color-gray-700)
}

html.dark .sidebar-related-card {
  border-color:var(--color-gray-700)
}

html.dark .sidebar-related-card:hover {
  background:var(--color-gray-800);
  border-color:var(--color-primary-400)
}

html.dark .sidebar-comments-section .comment {
  background:var(--color-gray-100)
}

html.dark .about-hero-gradient {
  background:linear-gradient(135deg,#2d1b69 0,#1e1145 50%,#0f0a2a 100%)
}

html.dark .about-hero-badge {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.15)
}

html.dark .about-problem-stat {
  color:var(--color-gray-900)
}

html.dark .about-problem-text:last-child {
  color:var(--color-gray-700)
}

html.dark .about-stats-bar {
  background:var(--color-gray-50);
  border-color:var(--color-gray-100)
}

html.dark .about-stat-number {
  color:var(--color-primary-400)
}

html.dark .about-section-alt {
  background:var(--color-gray-50)
}

html.dark .about-card {
  border-color:var(--color-gray-200)
}

html.dark .about-card:hover {
  border-color:var(--color-primary-300)
}

html.dark .about-card-icon--perf {
  background:linear-gradient(135deg,#422006,#78350f);
  color:#fbbf24
}

html.dark .about-card-icon--security {
  background:linear-gradient(135deg,#064e3b,#065f46);
  color:#34d399
}

html.dark .about-card-icon--dx {
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  color:#818cf8
}

html.dark .about-card-icon--extend {
  background:linear-gradient(135deg,#2e1065,#3b0764);
  color:#a78bfa
}

html.dark .about-layer-item {
  border-color:var(--color-gray-200)
}

html.dark .about-layer-item:hover {
  border-color:var(--color-primary-300)
}

html.dark .about-layer--next .about-layer-accent {
  background:#e5e5e5
}

html.dark .about-compare-card {
  border-color:var(--color-gray-200)
}

html.dark .about-compare-card:hover {
  border-color:var(--color-primary-300)
}

html.dark .about-compare-topic {
  border-bottom-color:var(--color-gray-200)
}

html.dark .about-compare-side--old {
  background:rgba(239,68,68,.06);
  border-bottom-color:var(--color-gray-200)
}

html.dark .about-compare-side--new {
  background:rgba(34,197,94,.06)
}

html.dark .about-compare-side--old .about-compare-label {
  color:#fca5a5;
  background:rgba(239,68,68,.15)
}

html.dark .about-compare-side--new .about-compare-label {
  color:#86efac;
  background:rgba(34,197,94,.15)
}

html.dark .about-cta-gradient {
  background:linear-gradient(135deg,#2d1b69 0,#1e1145 50%,#0f0a2a 100%)
}

html.dark .about-cta-btn-primary {
  background:rgba(255,255,255,.95);
  color:#4c1d95
}

html.dark .about-cta-btn-secondary {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2)
}

html.dark .contact-hero-gradient {
  background:linear-gradient(135deg,#2d1b69 0,#1e1145 50%,#0f0a2a 100%)
}

html.dark .contact-cta-gradient {
  background:linear-gradient(135deg,#2d1b69 0,#1e1145 50%,#0f0a2a 100%)
}

html.dark .contact-channel-card {
  border-color:var(--color-gray-200)
}

html.dark .contact-channel-card:hover {
  border-color:var(--color-primary-300)
}

html.dark .contact-channel-icon--email {
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  color:#818cf8
}

html.dark .contact-channel-icon--github {
  background:linear-gradient(135deg,#1f2937,#374151);
  color:#d1d5db
}

html.dark .contact-channel-icon--clock {
  background:linear-gradient(135deg,#422006,#78350f);
  color:#fbbf24
}

html.dark .contact-form-section-inner {
  border-color:var(--color-gray-200)
}

html.dark .form-input {
  background:var(--color-gray-50);
  border-color:var(--color-gray-300);
  color:var(--color-gray-800)
}

html.dark .form-input:focus {
  border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px rgba(167,139,250,.15)
}

html.dark .contact-faq {
  background:var(--color-gray-50)
}

html.dark .contact-faq-item {
  border-color:var(--color-gray-200)
}

html.dark .slider-arrow {
  background:rgba(30,30,30,.85);
  color:var(--color-gray-200)
}

html.dark .slider-arrow:hover {
  background:rgba(30,30,30,.95)
}

html.dark .slider-dot {
  background:rgba(255,255,255,.3)
}

html.dark .slider-dot.active {
  background:rgba(255,255,255,.85)
}

html.dark .widget {
  border-color:var(--color-gray-200)
}

html.dark .widget-title {
  border-bottom-color:var(--color-gray-200)
}

html.dark .widget-post-item:hover {
  background:var(--color-gray-100)
}

html.dark .widget-post-thumb {
  background:var(--color-gray-200)
}

html.dark .widget-post-thumb-placeholder {
  background:linear-gradient(135deg,var(--color-primary-100),var(--color-primary-200))
}

html.dark .widget-post-title {
  color:var(--color-gray-800)
}

html.dark .widget-search-wrap {
  border-color:var(--color-gray-300);
  background:var(--color-gray-100)
}

html.dark .widget-search-hint kbd {
  background:var(--color-gray-200);
  border-color:var(--color-gray-300);
  color:var(--color-gray-600)
}

html.dark .widget-newsletter-input {
  border-color:var(--color-gray-300);
  background:var(--color-gray-100)
}

html.dark .widget-category-item {
  border-bottom-color:var(--color-gray-200)
}

html.dark .widget-category-count {
  background:var(--color-gray-200);
  color:var(--color-gray-600)
}

html.dark .widget-social-btn {
  border-color:var(--color-gray-300);
  color:var(--color-gray-600)
}

html.dark .widget-social-btn:hover {
  border-color:var(--color-primary-400);
  background:var(--color-primary-100)
}

html.dark .widget-about-avatar {
  box-shadow:0 0 0 3px var(--color-primary-200)
}

html.dark .widget-tag {
  background:var(--color-primary-100);
  color:var(--color-primary-400)
}

html.dark .widget-tag:hover {
  background:var(--gradient-primary);
  color:#fff
}

html.dark .widget-post-grid-card {
  border-color:var(--color-gray-200)
}

html.dark .widget-post-grid-card:hover {
  border-color:var(--color-primary-300);
  box-shadow:0 4px 12px rgba(0,0,0,.2)
}

html.dark .widget-post-grid-card-img {
  background:var(--color-gray-200)
}

html.dark .widget-post-compact-item {
  border-bottom-color:var(--color-gray-200)
}

html.dark .widget-post-compact-item::before {
  color:var(--color-gray-500)
}

html.dark .widget-post-compact-item .widget-post-title {
  color:var(--color-gray-800)
}

html.dark .widget-post-featured-hero-img {
  background:var(--color-gray-200)
}

html.dark .widget-post-featured-hero-body .widget-post-title {
  color:var(--color-gray-800)
}

html.dark .widget-category-pill {
  background:var(--color-gray-100);
  border-color:var(--color-gray-300);
  color:var(--color-gray-600)
}

html.dark .widget-category-pill:hover {
  border-color:var(--color-primary-400);
  background:var(--color-primary-100);
  color:var(--color-primary-400)
}

html.dark .widget-category-compact a {
  color:var(--color-gray-600)
}

html.dark .widget-category-compact a::after {
  color:var(--color-gray-500)
}

html.dark .widget-tag-list-item {
  border-bottom-color:var(--color-gray-200)
}

html.dark .widget-tag-list-count {
  background:var(--color-gray-200);
  color:var(--color-gray-600)
}

html.dark .widget-social-icon-btn {
  border-color:var(--color-gray-300);
  color:var(--color-gray-600)
}

html.dark .widget-social-icon-btn:hover {
  border-color:var(--color-primary-400);
  background:var(--color-primary-100)
}

html.dark .widget-social-list-item {
  color:var(--color-gray-600)
}

html.dark .widget-social-list-item:hover {
  background:var(--color-gray-100)
}

html.dark .block-heading {
  color:var(--color-gray-900)
}

html.dark .block-rich-text {
  color:var(--color-gray-700)
}

html.dark .block-divider--solid,html.dark .block-divider--dashed,html.dark .block-divider--dotted {
  border-top-color:var(--color-gray-300)
}

html.dark .block-btn--secondary {
  background:var(--color-bg-elevated);
  color:var(--color-gray-700);
  border-color:var(--color-gray-300)
}

html.dark .block-btn--outline {
  color:var(--color-primary-400);
  border-color:var(--color-primary-400)
}

html.dark .comment-sort-bar {
  background:var(--color-gray-800)
}
html.dark .comment-sort-btn.active {
  background:var(--color-gray-900);
  color:var(--color-gray-100)
}
html.dark .comment-form-section {
  background:var(--color-gray-800)
}
html.dark .showdown {
  background:var(--color-gray-50);
  border-color:var(--color-gray-100)
}

html.dark .sd-bar--v {
  box-shadow:0 2px 12px color-mix(in srgb,var(--color-primary-500) 35%,transparent)
}

html.dark .comment-badge-pending {
  background:#78350f;
  color:#fde68a
}
html.dark .comment-action-btn:hover {
  background:var(--color-gray-700)
}

/* Cookie consent */
html.dark .cc-banner {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  box-shadow:0 8px 32px rgba(167,139,250,.12),0 2px 8px rgba(0,0,0,.3)
}

html.dark .cc-icon {
  background:var(--color-primary-100);
  color:var(--color-primary-400)
}

html.dark .cc-text a {
  color:var(--color-primary-400)
}

html.dark .cc-btn--reject {
  background:var(--color-gray-100);
  color:var(--color-gray-700);
  border-color:var(--color-gray-200)
}

html.dark .cc-btn--reject:hover {
  background:var(--color-gray-200)
}

html.dark .cc-btn--manage {
  color:var(--color-primary-400);
  border-color:var(--color-primary-200)
}

html.dark .cc-btn--manage:hover {
  background:var(--color-primary-100)
}

html.dark .cc-toggle-row {
  background:var(--color-gray-100)
}

html.dark .cc-toggle-row:hover {
  background:var(--color-gray-200)
}

html.dark .cc-toggle-slider {
  background:var(--color-gray-400)
}

html.dark .cc-fab {
  background:var(--color-bg-elevated);
  border-color:var(--color-gray-200);
  color:var(--color-primary-400);
  box-shadow:0 2px 12px rgba(0,0,0,.3)
}

html.dark .cc-fab:hover {
  box-shadow:0 4px 20px rgba(167,139,250,.25);
  border-color:var(--color-primary-300)
}
/* ==========================================================================
   12-plugins.css — Reader experience plugin styles
   ========================================================================== */

/* -- Related Posts Grid ---------------------------------------------------- */
.related-posts {
  margin:var(--space-8) 0;
  padding-top:var(--space-6);
  border-top:1px solid var(--color-gray-100);
}
.related-posts-title {
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--color-gray-900);
  margin:0 0 var(--space-5);
}
.related-posts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-4);
}
.related-post-card {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--color-gray-700);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.related-post-card:hover {
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.related-post-img {
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--color-gray-50);
}
.related-post-img img { width:100%; height:100%; object-fit:cover }
.related-post-body { padding:var(--space-3) }
.related-post-name {
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-gray-800);
  margin:0 0 var(--space-1);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.related-post-excerpt {
  font-size:var(--text-xs);
  color:var(--color-gray-500);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* -- Reaction Buttons ----------------------------------------------------- */
.reactions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-6) 0;
  margin:var(--space-4) 0;
  border-top:1px solid var(--color-gray-100);
}
.reactions-label {
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-gray-600);
}
.reactions-buttons { display:flex; gap:var(--space-2) }
.reactions-btn {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:all .15s;
  min-width:52px;
}
.reactions-btn:hover {
  border-color:var(--color-primary-300);
  background:var(--color-primary-25);
  transform:translateY(-2px);
}
.reactions-btn--active {
  border-color:var(--color-primary-400);
  background:var(--color-primary-50);
}
.reactions-btn:disabled { opacity:.6; pointer-events:none }
.reactions-emoji { font-size:1.25rem; line-height:1 }
.reactions-count {
  font-size:11px;
  font-weight:600;
  color:var(--color-gray-500);
  min-height:14px;
}

/* -- Highlight & Share Tooltip -------------------------------------------- */
.highlight-share {
  position:absolute;
  z-index:1000;
  display:flex;
  gap:2px;
  background:var(--color-gray-800);
  border-radius:var(--radius-md);
  padding:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transform:translate(-50%,-100%);
  opacity:0;
  visibility:hidden;
  transition:all .15s;
}
.highlight-share--visible { opacity:1; visibility:visible }
.hl-share-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:28px;
  background:none;
  border:0;
  color:var(--color-gray-300);
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:all .1s;
}
.hl-share-btn:hover { color:#fff; background:rgba(255,255,255,.1) }

/* -- Image Lightbox ------------------------------------------------------- */
.lightbox-overlay {
  position:fixed;
  inset:0;
  z-index:10010;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .25s;
  cursor:zoom-out;
}
.lightbox--open { opacity:1; visibility:visible }
.lightbox-img {
  max-width:92vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:var(--radius-md);
  box-shadow:0 8px 40px rgba(0,0,0,.3);
}
.lightbox-close {
  position:absolute;
  top:var(--space-4);
  right:var(--space-4);
  background:rgba(255,255,255,.15);
  border:0;
  color:#fff;
  font-size:1.5rem;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s;
}
.lightbox-close:hover { background:rgba(255,255,255,.3) }
.article-layout .content img { cursor:zoom-in }

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */

/* --- Banner container --- */
.cc-banner {
  position:fixed;
  bottom:var(--space-6);
  right:var(--space-6);
  z-index:10000;
  width:400px;
  max-width:calc(100vw - 2rem);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-2xl);
  box-shadow:
    0 8px 32px rgba(139,92,246,.1),
    0 2px 8px rgba(0,0,0,.08),
    0 0 0 1px rgba(139,92,246,.05);
  padding:var(--space-5);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
}

.cc-banner.cc-visible {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.cc-banner.cc-hidden {
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
}

/* --- Header with icon --- */
.cc-header {
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  margin-bottom:var(--space-4);
}

.cc-icon {
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-lg);
  background:var(--color-primary-50);
  color:var(--color-primary-600);
}

.cc-title {
  font-family:var(--font-family-editorial),Georgia,serif;
  font-size:var(--text-lg);
  font-weight:var(--font-bold);
  color:var(--color-gray-900);
  margin:0 0 .25rem;
  line-height:1.2;
}

.cc-text {
  font-size:var(--text-sm);
  color:var(--color-gray-500);
  line-height:1.5;
  margin:0;
}

.cc-text a {
  color:var(--color-primary-600);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

.cc-text a:hover {
  color:var(--color-primary-500);
}

/* --- Action buttons --- */
.cc-actions {
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}

.cc-btn {
  flex:1;
  min-width:0;
  padding:.5rem .75rem;
  font-family:var(--font-family);
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  border-radius:var(--radius-lg);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  text-align:center;
  line-height:1.25;
}

.cc-btn--accept {
  background:var(--gradient-primary);
  color:#fff;
  border:none;
}

.cc-btn--accept:hover {
  opacity:.9;
  transform:translateY(-1px);
}

.cc-btn--reject {
  background:var(--color-gray-100);
  color:var(--color-gray-700);
  border-color:var(--color-gray-200);
}

.cc-btn--reject:hover {
  background:var(--color-gray-200);
}

.cc-btn--manage {
  background:transparent;
  color:var(--color-primary-600);
  border-color:var(--color-primary-200);
}

.cc-btn--manage:hover {
  background:var(--color-primary-50);
}

/* --- Detail panel (manage preferences) --- */
.cc-detail {
  transition:opacity .2s ease;
}

.cc-detail.cc-visible {
  opacity:1;
  pointer-events:auto;
}

.cc-detail.cc-hidden {
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:0;left:0;right:0;
  padding:var(--space-5);
}

.cc-back {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-family:var(--font-family);
  font-size:var(--text-sm);
  font-weight:var(--font-medium);
  color:var(--color-primary-600);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  margin-bottom:var(--space-4);
}

.cc-back:hover { text-decoration:underline }

/* --- Toggle switches --- */
.cc-toggle-group {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}

.cc-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-lg);
  background:var(--color-gray-50);
  cursor:pointer;
}

.cc-toggle-row:hover {
  background:var(--color-gray-100);
}

.cc-toggle-info {
  display:flex;
  flex-direction:column;
  gap:.125rem;
  min-width:0;
}

.cc-toggle-info strong {
  font-size:var(--text-sm);
  font-weight:var(--font-semibold);
  color:var(--color-gray-900);
}

.cc-toggle-info small {
  font-size:var(--text-xs);
  color:var(--color-gray-500);
}

.cc-toggle-row input[type="checkbox"] {
  display:none;
}

.cc-toggle-slider {
  position:relative;
  flex-shrink:0;
  width:40px;
  height:22px;
  background:var(--color-gray-300);
  border-radius:var(--radius-full);
  transition:background .2s ease;
}

.cc-toggle-slider::after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.cc-toggle-row input:checked + .cc-toggle-slider {
  background:var(--color-primary-500);
}

.cc-toggle-row input:checked + .cc-toggle-slider::after {
  transform:translateX(18px);
}

.cc-toggle-slider--locked {
  background:var(--color-primary-400);
  opacity:.6;
}

.cc-toggle-slider--locked::after {
  transform:translateX(18px);
}

/* --- Floating Action Button (cookie fab) --- */
.cc-fab {
  position:fixed;
  bottom:var(--space-6);
  right:var(--space-6);
  z-index:9999;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--color-gray-200);
  background:var(--color-bg-elevated);
  color:var(--color-primary-600);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  transition:all .3s ease;
  opacity:0;
  transform:scale(0);
  pointer-events:none;
}

.cc-fab.cc-fab-visible {
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.cc-fab:hover {
  transform:scale(1.1);
  box-shadow:0 4px 20px rgba(139,92,246,.2);
  border-color:var(--color-primary-300);
}

/* --- Responsive --- */
@media (max-width:480px) {
  .cc-banner {
    bottom:0;
    right:0;
    left:0;
    width:100%;
    max-width:100%;
    border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
    border-bottom:none;
  }
  .cc-actions { flex-direction:column }
  .cc-btn { flex:none }
  .cc-fab { bottom:var(--space-4);right:var(--space-4) }
}