/* Lil' ITH · The Orchard (field log). Uses lil-ith-overrides.css tokens. */

.blog-page-body {
   background: var(--ith-black, #030508);
   min-height: 100vh;
}

/* Loader (match about.html) */
.blog-page-body .loader {
   position: fixed;
   inset: 0;
   background: var(--ith-black, #030508);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
}
.blog-page-body .loader-inner svg {
   animation: blog-spin 1.2s linear infinite;
}
@keyframes blog-spin {
   to {
      transform: rotate(360deg);
   }
}

/* ── Nav (match about.html) ── */
.blog-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
   background: rgba(3, 5, 8, 0.88);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(0, 255, 160, 0.1);
   padding: 1rem 1.75rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}
.blog-nav .nav-logo {
   font-family: 'Futurion', 'Montserrat', sans-serif;
   font-size: clamp(0.9rem, 2.2vw, 1.15rem);
   color: #9aa000;
   letter-spacing: 0.07em;
   white-space: nowrap;
   text-shadow: 0 0 8px #9aa000, 0 0 24px rgba(154, 160, 0, 0.45);
   text-decoration: none;
   transition: text-shadow 0.3s;
}
.blog-nav .nav-logo:hover {
   text-shadow: 0 0 14px #9aa000, 0 0 40px rgba(154, 160, 0, 0.7);
}
.blog-nav .nav-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 1.75rem;
   flex-wrap: wrap;
   justify-content: flex-end;
}
.blog-nav .nav-links li a {
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #9eb8c8;
   text-decoration: none;
   transition: color 0.3s, text-shadow 0.3s;
   position: relative;
}
.blog-nav .nav-links li a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 0;
   height: 1px;
   background: #00ffa0;
   box-shadow: 0 0 5px #00ffa0;
   transition: width 0.3s ease;
}
.blog-nav .nav-links li a:hover::after,
.blog-nav .nav-links li a.active::after {
   width: 100%;
}
.blog-nav .nav-links li a:hover,
.blog-nav .nav-links li a.active {
   color: #00ffa0;
   text-shadow: 0 0 8px rgba(0, 255, 160, 0.5);
}
.nav-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
   display: block;
   width: 22px;
   height: 2px;
   background: #00ffa0;
   position: relative;
   transition: all 0.3s;
   box-shadow: 0 0 5px rgba(0, 255, 160, 0.5);
}
.nav-toggle span::before,
.nav-toggle span::after {
   content: '';
   position: absolute;
}
.nav-toggle span::before {
   top: -7px;
}
.nav-toggle span::after {
   top: 7px;
}
@media (max-width: 640px) {
   .nav-toggle {
      display: block;
   }
   .blog-nav .nav-links {
      display: none;
      width: 100%;
      flex-direction: column;
      gap: 0.6rem;
      padding-top: 0.75rem;
   }
   .blog-nav .nav-links.open {
      display: flex;
   }
   .blog-nav {
      flex-wrap: wrap;
   }
}

/* ── Hero ── */
.blog-hero {
   position: relative;
   padding: 8rem 1.75rem 3.5rem;
   text-align: center;
   overflow: hidden;
}
.blog-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 255, 160, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 40% 35% at 80% 20%, rgba(255, 45, 120, 0.06) 0%, transparent 50%);
   pointer-events: none;
}
.blog-hero-inner {
   position: relative;
   z-index: 1;
   max-width: 720px;
   margin: 0 auto;
}
.blog-hero-eyebrow {
   font-size: 0.68rem;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: #ff2d78;
   text-shadow: 0 0 8px rgba(255, 45, 120, 0.45);
   margin-bottom: 0.75rem;
   display: block;
}
.blog-hero h1 {
   font-family: 'Futurion', 'Montserrat', sans-serif;
   font-size: clamp(2.4rem, 8vw, 4.2rem);
   color: #9aa000;
   letter-spacing: 0.06em;
   line-height: 1.05;
   margin: 0 0 1rem;
   text-shadow: 0 0 12px #9aa000, 0 0 36px rgba(154, 160, 0, 0.45);
}
.blog-hero-lead {
   font-size: 0.95rem;
   line-height: 1.75;
   color: #9eb8c8;
   margin-bottom: 1.5rem;
}
.blog-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem 1.25rem;
   justify-content: center;
   align-items: center;
}
.blog-hero-actions a.social-brand {
   font-size: 0;
   letter-spacing: 0;
   text-transform: none;
   color: transparent;
   text-decoration: none;
   border-bottom: none;
   padding: 0.4rem;
   min-width: 2.4rem;
   min-height: 2.4rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: transform 0.25s ease, color 0.25s, text-shadow 0.25s;
}
.blog-hero-actions a.social-brand:hover,
.blog-hero-actions a.social-brand:focus-visible {
   color: transparent;
   text-shadow: none;
   transform: translateY(-2px) scale(1.06);
}
.blog-hero-actions .rss-link.social-brand {
   color: transparent;
   border-bottom: none;
}

/* ── Social strip ── */
.blog-social-strip {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem 1rem;
   padding: 0 1rem 2.5rem;
   max-width: 900px;
   margin: 0 auto;
}
.blog-social-strip a.social-brand {
   font-size: 0;
   letter-spacing: 0;
   text-transform: none;
   color: transparent;
   text-decoration: none;
   padding: 0.35rem;
   min-width: 2.35rem;
   min-height: 2.35rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: transform 0.25s ease;
}
.blog-social-strip a.social-brand:hover,
.blog-social-strip a.social-brand:focus-visible {
   color: transparent;
   transform: translateY(-2px) scale(1.06);
}
.blog-social-strip .blog-all-links {
   font-size: 0.68rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(158, 184, 200, 0.65);
   text-decoration: none;
   transition: color 0.2s;
   padding: 0.35rem 0.15rem;
   display: inline-flex;
   align-items: center;
}
.blog-social-strip .blog-all-links:hover {
   color: #00ffa0;
}

/* ── Grid ── */
.blog-main {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 1.25rem 5rem;
}
.blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1.75rem;
}

.blog-card {
   margin: 0;
   border-radius: 2px;
   background: linear-gradient(145deg, rgba(13, 31, 53, 0.6) 0%, rgba(3, 5, 8, 0.95) 100%);
   border: 1px solid rgba(0, 255, 160, 0.12);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.35);
   transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.35s;
   overflow: hidden;
}
.blog-card:hover {
   transform: translateY(-6px);
   border-color: rgba(0, 255, 160, 0.28);
   box-shadow: 0 0 0 1px rgba(0, 255, 160, 0.15), 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 255, 160, 0.08);
}
.blog-card-link {
   display: block;
   color: inherit;
   text-decoration: none;
   height: 100%;
}
.blog-card-media {
   margin: 0;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #060d18;
}
.blog-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease, filter 0.5s;
   filter: saturate(1.05);
}
.blog-card:hover .blog-card-media img {
   transform: scale(1.05);
   filter: saturate(1.15);
}
.blog-card-body {
   padding: 1.35rem 1.4rem 1.5rem;
}
.blog-card-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem 0.75rem;
   margin-bottom: 0.65rem;
   font-size: 0.62rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(158, 184, 200, 0.55);
}
.blog-card-meta time {
   color: #ff2d78;
   text-shadow: 0 0 6px rgba(255, 45, 120, 0.35);
}
.blog-card-tag {
   padding: 0.15rem 0.45rem;
   border: 1px solid rgba(0, 255, 160, 0.25);
   color: #00cc7a;
   font-size: 0.58rem;
}
.blog-card-title {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.3;
   color: #00ffa0;
   margin: 0 0 0.65rem;
   letter-spacing: 0.04em;
   text-shadow: 0 0 18px rgba(0, 255, 160, 0.2);
}
.blog-card-excerpt {
   font-size: 0.86rem;
   line-height: 1.65;
   color: #9eb8c8;
   margin: 0 0 1rem;
}
.blog-card-cta {
   font-size: 0.72rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #9aa000;
}

/* ── Footer ── */
.blog-footer {
   padding: 2rem 1.75rem 3rem;
   border-top: 1px solid rgba(0, 255, 160, 0.08);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.75rem;
   max-width: 1100px;
   margin: 0 auto;
}
.blog-footer small {
   font-size: 0.67rem;
   color: rgba(158, 184, 200, 0.3);
   letter-spacing: 0.07em;
}
.blog-footer-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 1.25rem;
}
.blog-footer-links a {
   font-size: 0.67rem;
   letter-spacing: 0.07em;
   color: rgba(158, 184, 200, 0.3);
   text-decoration: none;
   transition: color 0.3s;
}
.blog-footer-links a:hover {
   color: #00ffa0;
}

/* Vines (reuse about positioning) */
.blog-vine {
   position: fixed;
   bottom: 0;
   width: 70px;
   pointer-events: none;
   z-index: 1;
   opacity: 0.55;
}
.blog-vine.left {
   left: 0;
}
.blog-vine.right {
   right: 0;
   transform: scaleX(-1);
}
.blog-vine svg {
   display: block;
   width: 100%;
}
@media (max-width: 768px) {
   .blog-vine {
      display: none;
   }
}