@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#0d0d0d;
  --text:#f5f5f5;
  --muted:rgba(245,245,245,.7);
  --accent:#ff4d00;
  --secondary:#ffd700;
  --card:#1a1a1a;
  --border:rgba(255,77,0,.2);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Space Mono', monospace;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,77,0,.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,215,0,.06) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit}
.container{max-width:1400px;margin:0 auto;padding:0 2rem}

/* Screen-reader only text */
.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;
}

/* Header */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  background:rgba(13,13,13,.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-content{
  max-width:1400px;
  margin:0 auto;
  padding:1.2rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}

/* Logo with animation */
.logo{
  font-family:'Syne', sans-serif;
  font-size:1.65rem;
  font-weight:800;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  gap:.55rem;
  align-items:baseline;
  position:relative;
  color:var(--text);
  isolation:isolate;
  overflow:hidden;
}
.logo-word{display:inline-block}
.logo-accent{color:var(--accent); font-style:italic}

/* Underline */
.logo::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-7px;
  width:100%;
  height:3px;
  background:var(--secondary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.logo:hover::after{transform:scaleX(1)}

/* Rise-in on load */
.logo .logo-word{
  transform:translateY(12px);
  opacity:0;
  animation:logoRise .65s cubic-bezier(.2,.9,.2,1) forwards;
}
.logo .logo-accent{ animation-delay:.09s; }

/* Shine sweep on hover */
.logo::before{
  content:'';
  position:absolute;
  top:-30%;
  left:-35%;
  width:35%;
  height:160%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg) translateX(-120%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
}
.logo:hover::before{
  opacity:1;
  animation:logoShine .9s ease forwards;
}
.logo:hover{ transform:translateY(-1px); }

@keyframes logoRise{ to{transform:translateY(0); opacity:1;} }
@keyframes logoShine{
  0%{transform:skewX(-18deg) translateX(-120%);}
  100%{transform:skewX(-18deg) translateX(420%);}
}

/* Nav */
nav{display:flex; gap:2rem; flex-wrap:wrap}
nav a{
  text-decoration:none;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text);
  opacity:.9;
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
}
nav a:hover{color:var(--accent); transform:translateX(6px)}
nav a.active{color:var(--secondary)}

/* Hero */
.hero{
  min-height:88vh;
  display:flex;
  align-items:center;
  padding:8rem 0 4rem;
  position:relative;
  z-index:1;
}
.hero-label{
  font-size:.75rem;
  letter-spacing:.28em;
  color:var(--secondary);
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:1.5rem;
}
.hero h1{
  font-family:'Syne', sans-serif;
  font-size:clamp(2.8rem, 8vw, 6.5rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero h1 .highlight{color:var(--accent); font-style:italic}
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:2px var(--text);
  text-stroke:2px var(--text);
}
.hero-description{
  max-width:680px;
  color:var(--muted);
  line-height:1.9;
  margin-bottom:2rem;
}
.hero-cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:.85rem;
  padding:1rem 1.6rem;
  border:2px solid var(--accent);
  transition:all .25s ease;
}
.btn.primary{background:var(--accent); color:var(--bg)}
.btn.primary:hover{background:transparent; color:var(--accent); transform:translateX(6px)}
.btn.ghost{background:transparent; color:var(--text); border-color:rgba(245,245,245,.22)}
.btn.ghost:hover{border-color:var(--secondary); color:var(--secondary); transform:translateX(6px)}

/* Sections */
.section{
  padding:5rem 0 1rem;
  position:relative;
  z-index:1;
}
.section-header{
  display:flex;
  align-items:baseline;
  gap:1.2rem;
  margin-bottom:2rem;
}
.section-number{
  font-family:'Syne', sans-serif;
  font-size:3.2rem;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}
.section-title{
  font-family:'Syne', sans-serif;
  font-size:2rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
}

/* Featured */
.featured-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:2rem;
  margin-bottom:3rem;
}
.featured-image{
  aspect-ratio: 4/3;
  border:2px solid rgba(255,77,0,.3);
  background:var(--card);
  overflow:hidden;
  position:relative;
}
.featured-image img{width:100%; height:100%; object-fit:cover; display:block}
.image-label{
  position:absolute;
  bottom:1rem; right:1rem;
  background:var(--accent);
  color:var(--bg);
  padding:.45rem .85rem;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.post-tag{
  display:inline-block;
  background:rgba(255,77,0,.18);
  color:var(--accent);
  padding:.45rem .85rem;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  width:fit-content;
  margin-bottom:1rem;
}
.featured-content h2{
  font-family:'Syne', sans-serif;
  font-size:2.2rem;
  line-height:1.1;
  margin-bottom:1rem;
}
.featured-content p{color:var(--muted); line-height:1.9; margin-bottom:1.5rem}

/* Filters */
.filters{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  margin:1rem 0 2rem;
}
.filters input{
  flex:1;
  min-width:240px;
  padding:1rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(245,245,245,.14);
  color:var(--text);
  font-family:'Space Mono', monospace;
}
.chips{display:flex; gap:.6rem; flex-wrap:wrap}
.chip{
  border:1px solid rgba(245,245,245,.18);
  padding:.5rem .8rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
  user-select:none;
  transition:all .2s ease;
}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.active{border-color:var(--secondary); color:var(--secondary)}

/* Cards */
.posts-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap:1.4rem;
    padding-bottom:2rem;
  }
  
  /* Frame + slide-in effect */
  .post-card{
    background:var(--card);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
  
    /* remove the animated border */
    border:none;
  
    /* motion */
    transform:translate(0,0);
    transition:transform .35s cubic-bezier(.2,.9,.2,1);
  }
  
  /* STATIC FRAME (always visible) */
  .post-card::before{
    content:'';
    position:absolute;
    inset:0;
    border:2px solid rgba(255,77,0,.35);
    pointer-events:none;
    z-index:2;
  }
  
  /* Card moves “into” the frame */
  .post-card:hover{
    transform:translate(8px,-8px);
  }
  
  /* Optional: subtle print-like offset shadow */
  .post-card:hover{
    box-shadow:-12px 12px 0 rgba(255,77,0,.08);
  }
  
  .post-card-image{
    aspect-ratio:16/10;
    background:rgba(255,77,0,.08);
  }
  
  .post-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
  }
  
  /* Optional: tiny parallax */
  .post-card:hover .post-card-image img{
    transform:scale(1.03);
  }
  
  .post-card-content{
    padding:1.6rem;
    display:flex;
    flex-direction:column;
    gap:.8rem;
    flex:1;
  }
  
  .post-card h3{
    font-family:'Syne', sans-serif;
    font-size:1.35rem;
    line-height:1.2;
  }
  
  .post-card p{
    color:rgba(245,245,245,.62);
    line-height:1.7;
    font-size:.92rem;
  }
  
  .post-meta{
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
    color:var(--secondary);
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  /* ===== Post page hero image sizing ===== */
.post-hero{
  margin-top: 7.5rem; /* fixed header space */
  position: relative;
  z-index: 1;
}

/* If post.js renders an <img> inside #postHero */
.post-hero img{
  width: 100%;
  height: clamp(240px, 40vh, 420px); /* smaller hero */
  object-fit: cover;                /* crop instead of tall */
  display: block;

  border-radius: 16px;
  border: 2px solid rgba(255,77,0,.35);
  background: var(--card);
}

/* Post body spacing */
.post-body{
  max-width: 900px;
  padding: 2rem 0 4rem;
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  padding:3rem 0;
  text-align:center;
  color:rgba(245,245,245,.55);
  position:relative;
  z-index:1;
}

/* Responsive */
@media (max-width: 980px){
  .featured-grid{grid-template-columns:1fr}
  .hero{min-height:80vh}
}
@media (max-width: 640px){
  .header-content{flex-direction:column; align-items:flex-start}
  nav{gap:1.2rem}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo .logo-word{animation:none; transform:none; opacity:1;}
  .logo::before{display:none;}
  .logo:hover{transform:none;}
}