/* =========================================================
   LRNED — Dark Glassmorphism Theme
   Table of contents:
   1. Design tokens
   2. Reset & base
   3. Typography
   4. Layout utilities
   5. Glass components
   6. Header / navigation
   7. Hero
   8. Post cards
   9. Topics grid
   10. About / sections
   11. Footer
   12. Category archive
   13. Single post
   14. 404
   15. Motion & accessibility
   16. Responsive
   ========================================================= */

/* -----------------------------------------------------------
   0. Fonts (local — files go in assets/fonts/, see README.txt there)
----------------------------------------------------------- */
@font-face{
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable-Italic.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* -----------------------------------------------------------
   1. Design tokens
----------------------------------------------------------- */
:root{
  /* Core palette */
  --c-bg:            #0b0b0b;
  --c-bg-alt:        #101010;
  --c-panel:         #151515;
  --c-glass:         rgba(255,255,255,0.04);
  --c-glass-strong:  rgba(255,255,255,0.07);
  --c-border:        rgba(255,255,255,0.09);
  --c-border-soft:   rgba(255,255,255,0.05);

  --c-accent:        #22c55e;
  --c-accent-dim:    #16a34a;
  --c-accent-glow:   rgba(34,197,94,0.35);
  --c-accent-soft:   rgba(34,197,94,0.10);

  --c-text:          #ededed;
  --c-text-muted:    #9ca3af;
  --c-text-faint:    #6b7280;

  /* Typography */
  --f-display: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --f-body:    "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --f-mono:    "Vazirmatn", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Spacing scale */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.8rem;
  --sp-5: 2.8rem;
  --sp-6: 4.4rem;
  --sp-7: 7rem;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadows */
  --sh-soft: 0 10px 40px rgba(0,0,0,0.45);
  --sh-glow: 0 0 0 1px var(--c-border), 0 0 30px -8px var(--c-accent-glow);

  /* Layout */
  --w-content: 1180px;
  --w-narrow: 760px;

  /* Motion */
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --ease: cubic-bezier(.22,.9,.35,1);
}

/* -----------------------------------------------------------
   2. Reset & base
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body{
  margin: 0;
  width: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, var(--c-accent-soft), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(34,197,94,0.06), transparent 55%),
    var(--c-bg);
  pointer-events: none;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea{ font-family: inherit; }
::selection{ background: var(--c-accent); color: #06140c; }
:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   3. Typography
----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
  color: #fafafa;
}
h1{ font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
h3{ font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
p{ margin: 0 0 var(--sp-3); color: var(--c-text); }
.lead{ color: var(--c-text-muted); font-size: 1.15rem; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  text-transform: none;
  margin-bottom: var(--sp-3);
}
.eyebrow::before{ content:"~/"; color: var(--c-text-faint); }

.mono{ font-family: var(--f-mono); }

/* -----------------------------------------------------------
   4. Layout utilities
----------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.container--narrow{ max-width: var(--w-narrow); }
.section{ padding-block: var(--sp-7); }
.section-head{
  max-width: 640px;
  margin-bottom: var(--sp-5);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.grid{ display: grid; gap: var(--sp-4); }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-accent); color:#06140c; padding: 0.8em 1.2em;
  border-radius: 0 0 var(--r-sm) 0; font-family: var(--f-mono); font-size: 0.85rem;
}
.skip-link:focus{ left: 0; }

/* -----------------------------------------------------------
   5. Glass components
----------------------------------------------------------- */
.glass{
  background: var(--c-glass);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-lg);
}
.glass-panel{
  background: linear-gradient(180deg, var(--c-glass-strong), var(--c-glass));
  border: 1px solid var(--c-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--c-border);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--c-accent);
  color: #06140c;
  border-color: var(--c-accent);
}
.btn-primary:hover{
  box-shadow: 0 0 30px -4px var(--c-accent-glow);
  background: #26d966;
}
.btn-ghost{
  background: var(--c-glass);
  color: var(--c-text);
}
.btn-ghost:hover{
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: 0 0 24px -10px var(--c-accent-glow);
}
.btn-sm{ padding: 0.55em 1.1em; font-size: 0.82rem; }

.badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border: 1px solid rgba(34,197,94,0.25);
  padding: 0.35em 0.8em;
  border-radius: var(--r-pill);
}
.badge::before{ content:"#"; opacity: 0.7; }

.meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--c-text-faint);
}
.meta span{ display:inline-flex; align-items:center; gap: 0.4em; }

/* -----------------------------------------------------------
   6. Header / navigation
----------------------------------------------------------- */
.site-header{
  position: sticky;
  top: var(--sp-3);
  z-index: 100;
  margin-inline: auto;
  margin-top: var(--sp-3);
  max-width: calc(var(--w-content) + var(--sp-4));
  padding-inline: var(--sp-4);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(15,15,15,0.55);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.site-branding{
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
}
.site-branding .cursor{
  display:inline-block; width: 0.55em; height: 1.1em;
  background: var(--c-accent);
  animation: blink 1.1s steps(1) infinite;
}
.site-branding img.custom-logo{ max-height: 32px; width: auto; border-radius: 6px; }
@keyframes blink{ 50%{ opacity: 0; } }

.main-navigation{ display: flex; align-items: center; gap: var(--sp-5); }
.main-navigation ul{ display: flex; align-items: center; gap: var(--sp-4); }
.main-navigation a{
  font-size: 0.92rem;
  color: var(--c-text-muted);
  position: relative;
  padding: 0.3em 0;
  transition: color var(--dur-fast) var(--ease);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{ color: var(--c-text); }
.main-navigation a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--c-accent);
  transition: right var(--dur-mid) var(--ease);
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after{ right: 0; }

.header-actions{ display:flex; align-items:center; gap: var(--sp-3); }
.menu-toggle{
  display:none;
  background: var(--c-glass);
  border: 1px solid var(--c-border);
  width: 44px; height: 44px;
  border-radius: 50%;
  align-items:center; justify-content:center;
  color: var(--c-text);
  flex-shrink: 0;
}
.menu-toggle .bar{
  display:block; width:16px; height:2px; background: currentColor; position:relative;
}
.menu-toggle .bar::before,.menu-toggle .bar::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.menu-toggle .bar::before{ top:-5px; }
.menu-toggle .bar::after{ top:5px; }

.mobile-drawer{
  display:none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(6,6,6,0.75);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events:none;
  transition: opacity var(--dur-mid) var(--ease);
}
.mobile-drawer.is-open{ opacity:1; pointer-events:auto; }
.mobile-drawer__panel{
  position:absolute; top: var(--sp-3); right: var(--sp-3); left: var(--sp-3);
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  transform: translateY(-16px);
  transition: transform var(--dur-mid) var(--ease);
}
.mobile-drawer.is-open .mobile-drawer__panel{ transform: translateY(0); margin-top: 130px; }
.mobile-drawer ul{ display:flex; flex-direction:column; gap: var(--sp-3); }
.mobile-drawer a{ font-family: var(--f-display); font-size: 1.4rem; }

/* -----------------------------------------------------------
   7. Hero
----------------------------------------------------------- */
.hero{
  padding-block: var(--sp-7) var(--sp-6);
  position: relative;
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-6);
  align-items: center;
}
.hero__title{ margin-bottom: var(--sp-4); }
.hero__title .accent{ color: var(--c-accent); }
.hero__desc{ max-width: 46ch; margin-bottom: var(--sp-5); }
.hero__cta{ display:flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero__terminal{
  padding: 0;
  overflow: hidden;
}
.hero__terminal-bar{
  display:flex; align-items:center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-text-faint);
}
.hero__terminal-dots{ display:flex; gap: 6px; }
.hero__terminal-dots span{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.15); }
.hero__terminal-body{
  padding: var(--sp-4);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--c-text-muted);
}
.hero__terminal-body .prompt{ color: var(--c-accent); }
.hero__terminal-body .out{ color: var(--c-text); }
.hero__terminal-body .dim{ color: var(--c-text-faint); }

/* -----------------------------------------------------------
   8. Post cards
----------------------------------------------------------- */
.post-cards{
  grid-template-columns: repeat(3, 1fr);
}
.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition: transform var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.post-card:hover{
  transform: translateY(-6px);
  border-color: rgba(34,197,94,0.35);
  box-shadow: var(--sh-glow);
}
.post-card__thumb{
  position:relative;
  aspect-ratio: 16/10;
  overflow:hidden;
  border-bottom: 1px solid var(--c-border-soft);
  background: var(--c-bg-alt);
}
.post-card__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 600ms var(--ease);
}
.post-card:hover .post-card__thumb img{ transform: scale(1.06); }
.post-card__thumb .badge{ position:absolute; top: var(--sp-2); left: var(--sp-2); background: rgba(11,11,11,0.7); }
.post-card__body{ padding: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-2); flex:1; }
.post-card__title{ font-size: 1.15rem; margin: 0; }
.post-card__title a{ transition: color var(--dur-fast) var(--ease); }
.post-card__title a:hover{ color: var(--c-accent); }
.post-card__excerpt{ color: var(--c-text-muted); font-size: 0.92rem; margin: 0; flex:1; }
.post-card__more{
  margin-top: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--c-accent);
  display:inline-flex; align-items:center; gap: 0.4em;
}
.post-card__more svg{ transition: transform var(--dur-fast) var(--ease); }
.post-card:hover .post-card__more svg{ transform: translateX(4px); }

/* -----------------------------------------------------------
   9. Topics grid
----------------------------------------------------------- */
.topics-grid{ grid-template-columns: repeat(3, 1fr); }
.topic-card{
  display:flex;
  align-items:center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.topic-card:hover{ transform: translateY(-4px); border-color: rgba(34,197,94,0.35); }
.topic-card__icon{
  display:flex; align-items:center; justify-content:center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  flex-shrink:0;
}
.topic-card__icon svg{ width:22px; height:22px; }
.topic-card__name{ font-family: var(--f-display); font-weight: 600; font-size: 1rem; color:#fff; }
.topic-card__count{ font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-text-faint); }

/* -----------------------------------------------------------
   10. About / sections
----------------------------------------------------------- */
.about-panel{ padding: var(--sp-6); }
.about-panel__grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items:center; }
.about-stats{ display:flex; gap: var(--sp-5); margin-top: var(--sp-4); flex-wrap: wrap; }
.about-stats .stat b{ display:block; font-family: var(--f-display); font-size: 1.8rem; color:#fff; }
.about-stats .stat span{ font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-text-faint); }

.view-all-wrap{ display:flex; justify-content:center; margin-top: var(--sp-5); }

/* -----------------------------------------------------------
   11. Footer
----------------------------------------------------------- */
.site-footer{ padding-block: var(--sp-6) var(--sp-5); margin-top: var(--sp-6); }
.footer-panel{ padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap: var(--sp-4); flex-wrap:wrap;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border-soft);
}
.footer-brand{ font-family: var(--f-mono); font-size: 1.05rem; color:#fff; }
.footer-tagline{ color: var(--c-text-faint); font-size: 0.85rem; max-width: 34ch; margin-top: var(--sp-2); }
.footer-social{ display:flex; gap: var(--sp-2); }
.footer-social a{
  width: 40px; height: 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-glass); border: 1px solid var(--c-border);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer-social a:hover{ border-color: var(--c-accent); color: var(--c-accent); }
.footer-social svg{ width:17px; height:17px; }
.footer-links{ padding-block: var(--sp-4); border-bottom: 1px solid var(--c-border-soft); }
.footer-links__list{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-5); list-style:none; margin:0; padding:0; }
.footer-links__list a{
  font-family: var(--f-mono); font-size: 0.85rem; color: var(--c-text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.footer-links__list a:hover{ color: var(--c-accent); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-2);
  padding-top: var(--sp-3);
  font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-text-faint);
}
.back-to-top{
  display:inline-flex; align-items:center; gap:0.4em;
  color: var(--c-text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.back-to-top:hover{ color: var(--c-accent); }

/* -----------------------------------------------------------
   12. Category archive
----------------------------------------------------------- */
.archive-header{ padding-block: var(--sp-6) var(--sp-4); }

.cat-filter{ display:flex; gap: var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-5); }
.cat-filter a{
  font-family: var(--f-mono); font-size: 0.78rem;
  padding: 0.5em 1em; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); color: var(--c-text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.cat-filter a:hover, .cat-filter a.is-active{
  color: var(--c-accent); border-color: rgba(34,197,94,0.4); background: var(--c-accent-soft);
}

.archive-grid{ grid-template-columns: repeat(3,1fr); }

.pagination{ display:flex; justify-content:center; gap: var(--sp-2); margin-top: var(--sp-6); flex-wrap:wrap; }
.pagination a, .pagination span{
  display:flex; align-items:center; justify-content:center;
  min-width: 40px; height: 40px; padding-inline: 0.6em;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  font-family: var(--f-mono); font-size: 0.85rem;
  color: var(--c-text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.pagination a:hover{ border-color: var(--c-accent); color: var(--c-accent); }
.pagination .current{ background: var(--c-accent); color:#06140c; border-color: var(--c-accent); }

.no-results{ text-align:center; padding: var(--sp-6) 0; color: var(--c-text-muted); }

/* -----------------------------------------------------------
   13. Single post
----------------------------------------------------------- */
.post-hero{ padding-top: var(--sp-6); }
.post-hero__image{
  border-radius: var(--r-lg);
  overflow:hidden;
  border: 1px solid var(--c-border);
  aspect-ratio: 21/9;
  margin-bottom: var(--sp-5);
}
.post-hero__image img{ width:100%; height:100%; object-fit:cover; }
.post-hero__head{ max-width: var(--w-narrow); margin-inline:auto; text-align:center; }
.post-hero__head .meta{ justify-content:center; margin-bottom: var(--sp-3); }

.entry-content{
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-block: var(--sp-5);
  font-size: 1.05rem;
}
.entry-content h2{ margin-top: var(--sp-5); }
.entry-content h3{ margin-top: var(--sp-4); }
.entry-content p{ color: #d8d8d8; }
.entry-content a{ color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34,197,94,0.4); }
.entry-content img{ border-radius: var(--r-md); border: 1px solid var(--c-border); margin-block: var(--sp-4); }
.entry-content blockquote{
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-accent);
  background: var(--c-glass);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text-muted);
  font-style: italic;
}
.entry-content pre{
  background: #0f1210;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 0.88rem;
  margin-block: var(--sp-4);
}
.entry-content code{
  font-family: var(--f-mono);
  background: var(--c-glass-strong);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  font-size: 0.88em;
  color: var(--c-accent);
}
.entry-content pre code{ background:none; padding:0; color: #d8f5e2; }
.entry-content ul, .entry-content ol{ padding-left: 1.4em; color: #d8d8d8; margin-bottom: var(--sp-3); }
.entry-content li{ margin-bottom: 0.4em; }
.entry-content table{ width:100%; border-collapse: collapse; margin-block: var(--sp-4); font-size: 0.92rem; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content th, .entry-content td{ padding: 0.75em 1em; border: 1px solid var(--c-border); text-align:left; }
.entry-content th{ background: var(--c-glass); font-family: var(--f-mono); font-size: 0.8rem; color: var(--c-accent); }
.entry-content .wp-block-embed{ position:relative; margin-block: var(--sp-4); }
.entry-content .wp-block-embed iframe{ width:100%; aspect-ratio: 16/9; border-radius: var(--r-md); border: 1px solid var(--c-border); }
.entry-content hr{ border:none; border-top: 1px solid var(--c-border); margin-block: var(--sp-5); }

.entry-tags{ max-width: var(--w-narrow); margin: var(--sp-4) auto 0; display:flex; gap: var(--sp-2); flex-wrap:wrap; }

.post-nav{
  max-width: var(--w-narrow); margin: var(--sp-6) auto 0;
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.post-nav a{ display:block; padding: var(--sp-4); transition: border-color var(--dur-fast) var(--ease); }
.post-nav a:hover{ border-color: rgba(34,197,94,0.35); }
.post-nav .dir{ font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-text-faint); margin-bottom: 0.5em; display:block; }
.post-nav .next{ text-align:right; }
.post-nav .title{ font-family: var(--f-display); font-weight:600; font-size: 0.98rem; color:#fff; }

.related-posts{ padding-block: var(--sp-6); }

.author-box{
  max-width: var(--w-narrow); margin: var(--sp-5) auto 0;
  display:flex; gap: var(--sp-3); align-items:center; padding: var(--sp-4);
}
.author-box img{ width:56px; height:56px; border-radius:50%; border: 1px solid var(--c-border); }
.author-box .name{ font-family: var(--f-display); font-weight:600; color:#fff; }
.author-box .role{ font-family: var(--f-mono); font-size: 0.75rem; color: var(--c-text-faint); }

/* -----------------------------------------------------------
   14. 404
----------------------------------------------------------- */
.error-404{
  padding-block: var(--sp-7);
  text-align:center;
  max-width: 600px;
  margin-inline:auto;
}
.error-404 .code{
  font-family: var(--f-mono);
  font-size: clamp(3rem, 12vw, 5rem);
  color: var(--c-accent);
  line-height:1;
  margin-bottom: var(--sp-3);
}

/* -----------------------------------------------------------
   15. Motion & accessibility
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -----------------------------------------------------------
   16. Responsive
----------------------------------------------------------- */

/* ---- ≤1024px: small laptops / large tablets — tighten side padding ---- */
@media (max-width: 1024px){
  .container{ padding-inline: var(--sp-3); }
  .site-header{ padding-inline: var(--sp-3); }
}

/* ---- ≤960px: tablets — stack the two-column sections, grids to 2-up ---- */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
  .about-panel__grid{ grid-template-columns: 1fr; }
  .post-cards, .archive-grid{ grid-template-columns: repeat(2,1fr); }
  .topics-grid{ grid-template-columns: repeat(2,1fr); }
  .post-hero__image{ aspect-ratio: 16/9; }
}

/* ---- ≤780px: header switches to the hamburger + drawer ---- */
@media (max-width: 780px){
  .main-navigation{ display:none; }
  .header-actions .btn-ghost.desktop-only{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-drawer{ display:block; }

  .hero{ padding-block: var(--sp-6) var(--sp-5); }
  .section{ padding-block: var(--sp-6); }
  .about-panel{ padding: var(--sp-5); }

  .post-nav{ grid-template-columns: 1fr; }
  .post-nav .next{ text-align:left; }
}

/* ---- ≤640px: phones — single-column content, tighter rhythm ---- */
@media (max-width: 640px){
  .container{ padding-inline: var(--sp-3); }

  .post-cards, .archive-grid{ grid-template-columns: 1fr; }
  .topics-grid{ grid-template-columns: 1fr 1fr; }

  .section-head{ max-width: 100%; }
  .hero__desc{ max-width: 100%; }

  .post-hero{ padding-top: var(--sp-5); }
  .entry-content{ padding-block: var(--sp-4); font-size: 1rem; }

  .about-stats{ gap: var(--sp-4); }
  .author-box{ text-align: center; flex-direction: column; }

  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-links__list{ gap: var(--sp-2) var(--sp-3); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap: var(--sp-2); }
}

/* ---- ≤480px: small phones — final squeeze + full-width CTAs ---- */
@media (max-width: 480px){
  .site-header{ top: var(--sp-2); margin-top: var(--sp-2); padding-inline: var(--sp-2); }
  .site-header__inner{ padding: 0.6rem 0.9rem; }
  .site-branding{ font-size: 0.95rem; min-width: 0; }
  .site-branding > a{ min-width: 0; }
  .site-branding span:not(.cursor){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 44vw; }

  .mobile-drawer__panel{ padding: var(--sp-4) var(--sp-3); }
  .mobile-drawer a{ font-size: 1.2rem; }

  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__terminal-body{ padding: var(--sp-3); font-size: 0.8rem; line-height: 1.75; }
  .hero__terminal-bar{ padding: var(--sp-2) var(--sp-3); }

  .topics-grid{ grid-template-columns: 1fr; }
  .topic-card{ padding: var(--sp-3); }
  .post-card__body{ padding: var(--sp-3); }
  .glass-panel.about-panel{ padding: var(--sp-4); }
  .about-stats{ gap: var(--sp-3) var(--sp-5); }

  .cat-filter{ gap: var(--sp-1); }
  .cat-filter a{ padding: 0.45em 0.85em; font-size: 0.72rem; }

  .entry-tags{ gap: var(--sp-1); }
  .pagination a, .pagination span{ min-width: 36px; height: 36px; }
}