/*
Theme Name:   Beyond Aeroverse
Theme URI:    https://beyondaeroverse.com
Author:       Beyond Aeroverse
Author URI:   https://beyondaeroverse.com
Description:  A custom WordPress theme for Beyond Aeroverse — an aerospace, aeronautics, and space exploration blog. Converted from a bespoke HTML/CSS/JS design; preserves the original visual identity, hero orbit animation, and card-based dispatch layout.
Version:      1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  beyond-aeroverse
Tags:         blog, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Beyond Aeroverse — tokens
   ========================================================================== */

:root {
  --bg: #F0F4EF;
  --bg-panel: #FFFFFF;
  --bg-panel-raised: #10192b; /* kept dark on purpose — see .post-media */
  --line: rgba(27, 73, 101, 0.14);
  --line-strong: rgba(27, 73, 101, 0.28);

  --ink: #1B4965;
  --ink-dim: #45607a;
  --ink-faint: #7c93a3;

  --primary: #1B4965;
  --primary-dim: #143a52;
  --secondary: #5FA8D3;
  --accent: #FAC748;

  /* legacy aliases kept so the rest of the sheet reads the new palette */
  --violet: var(--primary);
  --violet-dim: var(--primary-dim);
  --cyan: var(--secondary);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --max-width: 1180px;
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p { margin: 0; }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* faint background texture — sits behind everything */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(27,73,101,0.16) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 65%, rgba(27,73,101,0.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 80%, rgba(27,73,101,0.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 15%, rgba(27,73,101,0.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 90%, rgba(27,73,101,0.10) 50%, transparent 51%);
  background-size: 600px 600px;
  opacity: 0.6;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(240, 244, 239, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* The logo artwork bakes the icon and wordmark into one image, with the
   wordmark occupying only the lower portion — sized up from a plain
   text-swap height so that text stays legible, not just the icon. */
.logo-img {
  display: block;
  height: 52px;         /* controls the logo's on-page size */
  width: auto;           /* preserves aspect ratio */
  aspect-ratio: 502 / 146; /* matches the logo SVG's own proportions — guarantees
                              correct width even on browsers that fail to read
                              intrinsic size from the SVG file itself */
  max-width: 220px;      /* safety cap for unusually wide logo files */
  flex-shrink: 0;        /* never let a tight mobile header row squeeze this to 0 */
  object-fit: contain;
}

@media (max-width: 480px) {
  .logo-img {
    height: 42px; /* slightly smaller on narrow phones so it never crowds the nav toggle */
  }
}

.custom-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-logo-link img,
.custom-logo-link svg,
.site-logo-wrap img,
.site-logo-wrap svg {
  display: block;
  height: 52px;
  width: auto;
  max-width: 220px;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 480px) {
  .custom-logo-link img,
  .custom-logo-link svg,
  .site-logo-wrap img,
  .site-logo-wrap svg {
    height: 42px;
  }
}

.brand-tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .brand-tagline { display: none; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li { position: relative; }

.nav-link {
  font-size: 0.92rem;
  color: var(--ink-dim);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
  display: inline-block;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-link:hover,
.nav-link.is-active,
.current-menu-item > .nav-link {
  color: var(--ink);
}

.nav-link.is-active::after,
.nav-link:hover::after,
.current-menu-item > .nav-link::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  padding: 96px 0 120px;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.05;
  font-weight: 600;
  max-width: 12ch;
}

.hero-subtitle {
  margin-top: 24px;
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--ink-dim);
  line-height: 1.7;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

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

.btn-primary {
  background: var(--accent);
  color: var(--primary-dim);
}

.btn-primary:hover {
  background: #ffd873;
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--secondary);
  color: var(--primary-dim);
  background: rgba(95, 168, 211, 0.12);
}

/* --- hero orbit visual --- */

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.orbit-svg {
  width: 100%;
  max-width: 420px;
  color: var(--violet);
}

.orbit-ring {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* The ring and its orbiting node share one rotating group, so the
   ring's spin and the node's travel along it are driven by the same
   compositor timeline and never drift apart. transform-box: view-box
   pins the origin to the SVG's own coordinate system (240,240 is the
   exact center of the 0 0 480 480 viewBox) instead of each shape's own
   bounding box, so every ring rotates around the true shared center
   regardless of browser/device. */
.orbit-ring-group {
  transform-box: view-box;
  transform-origin: 240px 240px;
  will-change: transform;
}

.orbit-ring-group--1 { animation: spin 34s linear infinite; }
.orbit-ring-group--2 { animation: spin 22s linear infinite reverse; }
.orbit-ring-group--3 { animation: spin 46s linear infinite; }

.orbit-core {
  fill: var(--accent);
  filter: drop-shadow(0 0 18px rgba(250, 199, 72, 0.55));
}

.orbit-node {
  fill: var(--secondary);
  filter: drop-shadow(0 0 6px rgba(95, 168, 211, 0.8));
  offset-rotate: 0deg;
}

#node-1 { offset-path: path('M 30,240 A 210 90 0 1 1 450,240 A 210 90 0 1 1 30,240'); animation: travel 12s linear infinite; }
#node-2 { offset-path: path('M 90,240 A 150 150 0 1 1 390,240 A 150 150 0 1 1 90,240'); animation: travel 8s linear infinite reverse; }
#node-3 { offset-path: path('M 240,30 A 90 210 0 1 1 240,450 A 90 210 0 1 1 240,30'); animation: travel 16s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes travel {
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-ring-group--1, .orbit-ring-group--2, .orbit-ring-group--3, .orbit-node {
    animation: none;
  }
}

.telemetry {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-align: center;
}

.telemetry-row i {
  font-style: normal;
  color: var(--ink-dim);
  margin-right: 6px;
}

/* ==========================================================================
   Posts grid
   ========================================================================== */

.posts {
  padding: 40px 0 100px;
  position: relative;
  z-index: 1;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.section-head h2 {
  font-size: 1.9rem;
  font-weight: 600;
}

.section-head p {
  color: var(--ink-dim);
  max-width: 40ch;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.post-card--featured {
  grid-row: span 2;
}

.post-media {
  --tint: var(--violet);
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint) 35%, var(--bg-panel-raised)), var(--bg-panel-raised));
  display: flex;
  align-items: flex-end;
  padding: 16px;
  overflow: hidden;
}

.post-card--featured .post-media {
  aspect-ratio: 16 / 11;
}

.post-media img.post-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  mix-blend-mode: luminosity;
}

.post-media-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(244, 246, 251, 0.8);
  background: rgba(10, 14, 26, 0.55);
  border: 1px solid rgba(244, 246, 251, 0.18);
  padding: 4px 10px;
  border-radius: 100px;
}

.post-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.post-meta {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.post-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.post-card--featured .post-title {
  font-size: 1.5rem;
}

.post-excerpt {
  color: var(--ink-dim);
  font-size: 0.94rem;
  line-height: 1.6;
  flex: 1;
}

.post-link {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cyan);
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.post-link:hover {
  border-color: var(--cyan);
}

.posts-empty {
  color: var(--ink-dim);
  padding: 40px 0;
}

/* ==========================================================================
   Tech strip / about
   ========================================================================== */

.tech-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 64px 0;
  position: relative;
  z-index: 1;
}

.tech-inner {
  text-align: left;
  max-width: 640px;
}

.tech-inner h2 {
  font-size: 1.7rem;
  margin-bottom: 14px;
}

.tech-inner p {
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}

.about {
  padding: 80px 0 100px;
  position: relative;
  z-index: 1;
}

.about-inner {
  max-width: 640px;
}

.about-inner h2 {
  font-size: 1.7rem;
  margin-bottom: 14px;
}

.about-inner p {
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  position: relative;
  z-index: 1;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* ==========================================================================
   Single article page
   ========================================================================== */

.single-article {
  padding: 56px 0 100px;
  position: relative;
  z-index: 1;
}

.single-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

.single-header {
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 32px;
}

.single-category {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.single-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  font-weight: 600;
  margin-top: 14px;
}

.single-meta {
  margin-top: 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--ink-faint);
  font-size: 0.88rem;
  font-family: var(--font-mono);
}

.single-featured-image {
  margin: 32px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.single-featured-image img {
  width: 100%;
  height: auto;
}

.single-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
}

.single-content p { margin-bottom: 1.4em; }

.single-content h2,
.single-content h3,
.single-content h4 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.single-content ul,
.single-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
  color: var(--ink-dim);
}

.single-content img {
  border-radius: var(--radius-md);
  margin: 1.6em 0;
}

.single-content blockquote {
  margin: 1.8em 0;
  padding: 4px 24px;
  border-left: 3px solid var(--accent);
  color: var(--ink-dim);
  font-style: italic;
}

.single-content a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-tags {
  margin-top: 40px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.single-tags a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--ink-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.single-tags a:hover {
  border-color: var(--secondary);
  color: var(--primary-dim);
}

.post-nav {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

.post-nav-item:hover { border-color: var(--line-strong); }

.post-nav-item.next { text-align: right; align-items: flex-end; }

.post-nav-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.post-nav-title {
  font-weight: 600;
  color: var(--ink);
}

.related-articles {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}

.related-articles h2 {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

/* ==========================================================================
   Archive / category / search
   ========================================================================== */

.archive-header {
  padding: 56px 0 24px;
  position: relative;
  z-index: 1;
}

.archive-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
}

.archive-description {
  margin-top: 12px;
  color: var(--ink-dim);
  max-width: 60ch;
}

.pagination {
  margin: 48px 0 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--ink-dim);
}

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

.pagination a:hover {
  border-color: var(--secondary);
  color: var(--primary-dim);
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
  padding: 100px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.error-404 h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--secondary);
}

.error-404 p {
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 1.05rem;
}

.error-404 .btn { margin-top: 32px; }

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}

.comments-title {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-body {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.comment-author {
  font-weight: 600;
  font-size: 0.95rem;
}

.comment-metadata {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

.comment-content p { margin-bottom: 0.8em; color: var(--ink-dim); }

.comment-respond {
  margin-top: 40px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.comment-form textarea { min-height: 140px; resize: vertical; }

.comment-form .comment-form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--accent);
  color: var(--primary-dim);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    min-height: 260px;
  }

  .hero-title {
    max-width: none;
  }

  .posts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .post-card--featured {
    grid-column: span 2;
    grid-row: auto;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .header-inner { padding: 16px 24px; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(240, 244, 239, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
  }

  .main-nav.is-open {
    max-height: 260px;
    visibility: visible;
    transition: max-height 0.3s ease, visibility 0s linear 0s;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .main-nav .nav-link {
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle { display: flex; }

  .section-inner { padding: 0 22px; }
  .hero-inner { padding: 0 22px; }
  .footer-inner { padding: 0 22px; }
  .single-inner { padding: 0 22px; }

  .hero { padding: 64px 0 80px; }

  .posts-grid {
    grid-template-columns: 1fr;
  }

  .post-card--featured {
    grid-column: auto;
  }

  .footer-inner {
    flex-direction: column;
  }
}

/* ==========================================================================\n   Blogsy-style single-post author box\n   ========================================================================== */
.single-author-box-container { margin: 48px 0 0; }
.single-author-box { display:flex; align-items:center; gap:28px; padding:32px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 8px 28px rgba(27,73,101,.06); }
.single-author-box-avatar { flex:0 0 120px; }
.single-author-box-avatar a { display:block; width:120px; height:120px; border-radius:50%; overflow:hidden; border:3px solid var(--secondary); background:var(--bg); }
.single-author-box-avatar img.avatar { width:120px; height:120px; object-fit:cover; border-radius:50%; }
.single-author-box-desc { min-width:0; flex:1; }
.single-author-box .written-by { display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.single-author-box .author-name { margin:0 0 8px; font-size:1.45rem; line-height:1.2; }
.single-author-box .author-name a { color:var(--primary); }
.single-author-box .author-name a:hover { color:var(--secondary); }
.single-author-box .author-bio { max-width:760px; margin:0 0 18px; color:var(--ink-dim); font-size:.96rem; line-height:1.7; }
.single-author-box .author-social-links { display:none; }
.single-author-box .more-articles { display:inline-flex; align-items:center; min-height:42px; padding:10px 18px; border:1px solid var(--primary); border-radius:var(--radius-sm); background:var(--primary); color:#fff; font-family:var(--font-display); font-size:.88rem; font-weight:600; line-height:1; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.single-author-box .more-articles::after { content:' →'; color:var(--accent); margin-left:6px; }
.single-author-box .more-articles:hover { background:var(--primary-dim); border-color:var(--primary-dim); transform:translateY(-1px); }
@media (max-width:720px) { .single-author-box-container{margin-top:36px}.single-author-box{align-items:flex-start;gap:20px;padding:24px}.single-author-box-avatar{flex-basis:88px}.single-author-box-avatar a,.single-author-box-avatar img.avatar{width:88px;height:88px}.single-author-box .author-name{font-size:1.25rem} }
@media (max-width:480px) { .single-author-box{flex-direction:column;align-items:center;text-align:center}.single-author-box .author-bio{margin-left:auto;margin-right:auto} }

/* Author archive */
.author-archive { padding:80px 0 100px; }
.author-archive-header { display:flex; align-items:center; gap:28px; max-width:900px; margin:0 auto 64px; padding:36px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-md); }
.author-archive-avatar { flex:0 0 140px; }
.author-archive-avatar img { width:140px; height:140px; object-fit:cover; border-radius:50%; border:3px solid var(--secondary); }
.author-archive-label { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--ink-faint); }
.author-archive-header h1 { margin:6px 0 10px; font-size:clamp(2rem,4vw,3.2rem); }
.author-archive-header p { max-width:700px; color:var(--ink-dim); }
.author-archive-heading { margin-bottom:24px; }
.author-archive-heading h2 { font-size:1.6rem; }
.author-posts-grid { margin-bottom:40px; }
.author-archive .nav-links { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:40px; }
.author-archive .page-numbers { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-panel); }
.author-archive .page-numbers.current { background:var(--primary); color:#fff; border-color:var(--primary); }
@media (max-width:720px) { .author-archive{padding:56px 0 72px}.author-archive-header{flex-direction:column;text-align:center;padding:28px 22px}.author-archive-avatar,.author-archive-avatar img{width:110px;height:110px;flex-basis:110px} }