.editorial,
.editorial * ,
.editorial *::before,
.editorial *::after{
  box-sizing:border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  width: 100%;
  min-height: 100%;
}
.editorial .post-image svg {
  width: 100px;
  height: 100px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}
.editorial{
  --parchment:#f2efe4;
  --ink:#231f20;
  --crimson:#8a1c1c;
  --gold:#cfb53b;
  --faded:#6b655f;
  --white:#ffffff;
  --dark-bg:#1a1614;
  --font-serif:"Cinzel",serif;
  --font-sans:"Lato",sans-serif;
  --font-reading:"Merriweather",serif;

  margin:0;
  padding:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--font-reading);
  line-height:1.6;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* Reset inside */
.editorial *{
  margin:0;
  padding:0;
}

/* Hero */
.editorial .hero{
  padding:150px 40px 100px;
  background:linear-gradient(135deg,#1a1614 0%,#2a2220 100%);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.editorial .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity:.3;
}

.editorial .hero-content{
  max-width:1000px;
  margin:auto;
  position:relative;
  z-index:1;
}

.editorial .hero-title{
  font-family:var(--font-serif);
  font-size:4.5rem;
  font-weight:900;
  color:var(--gold);
  letter-spacing:10px;
  margin-bottom:20px;
  text-shadow:0 0 30px rgba(207,181,59,.5);
}

.editorial .hero-dash{
  width:60px;
  height:3px;
  margin:20px auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.editorial .hero-subtitle{
  font-family:var(--font-sans);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--parchment);
  opacity:.9;
  margin:20px 0 15px;
}

.editorial .hero-description{
  font-size:1.1rem;
  line-height:1.8;
  color:var(--parchment);
  opacity:.85;
  max-width:700px;
  margin:auto;
  font-style:italic;
}

/* Main */
.editorial .main-content{
  max-width:1400px;
  margin:auto;
  padding:80px 40px;
}

/* Section */
.editorial .section-header{
  text-align:center;
  margin-bottom:60px;
}

.editorial .section-title{
  font-family:var(--font-serif);
  font-size:2.5rem;
  font-weight:900;
  color:var(--crimson);
  margin-bottom:15px;
  letter-spacing:3px;
  padding-bottom:20px;
  position:relative;
}

.editorial .section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:80px;
  height:4px;
  background:linear-gradient(90deg,var(--crimson),var(--gold));
}

.editorial .section-subtitle{
  font-family:var(--font-sans);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--faded);
  margin-top:15px;
}

/* Blog Grid */
.editorial .blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:50px;
}

/* An <a> since the cards became real links to /editorials/{slug}. */
.editorial .blog-card{
  display:block;
  background:linear-gradient(135deg,#faf8f3 0%,var(--white) 100%);
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:.5s ease;
  box-shadow:0 4px 20px rgba(35,31,32,.06);
  color:inherit;
  text-decoration:none;
}

.editorial .blog-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 20px 50px rgba(138,28,28,.12);
}

.editorial .blog-card-image{
  width:100%;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(138,28,28,.9),#5a1212);
  position:relative;
}

.editorial .card-icon{
  width:90px;
  height:90px;
  z-index:1;
}

.editorial .card-icon svg{
  width:100%;
  height:100%;
  stroke:var(--gold);
  fill:none;
}

.editorial .blog-card-content{
  padding:40px 35px 35px;
}

.editorial .blog-card h3{
  font-family:var(--font-serif);
  font-size:1.6rem;
  margin-bottom:18px;
}

.editorial .author{
  font-family:var(--font-sans);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--gold);
  margin-bottom:18px;
}

.editorial .excerpt{
  font-size:.95rem;
  line-height:1.75;
  opacity:.75;
  margin-bottom:25px;
}

.editorial .read-more{
  font-family:var(--font-sans);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--crimson);
}

/* Post View
   ---------------------------------------------------------------------------
   Was #blog-post, a display:none div that JavaScript revealed after swapping
   its text. Each article has its own URL and its own server-rendered page now,
   so the container is simply visible, and .back-button is an <a> to the index
   rather than a button that re-showed the list. */
.editorial .post-view{
  max-width:900px;
  margin:auto;
}

.editorial .back-button{
  display:inline-block;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:40px;
  color:var(--crimson);
  text-decoration:none;
}

.editorial .back-button:hover{
  color:var(--ink);
}

.editorial .back-button::before{
  content:"← ";
}

.editorial .post-footer{
  margin-top:50px;
  text-align:center;
}

.editorial .post-footer .back-button{
  margin-bottom:0;
}

/* Article hero — the title is real prose, not the "EDITORIALS" wordmark, so
   it drops the 4.5rem/10px-tracking treatment that only works on one word. */
.editorial .hero--article{
  padding-top:120px;
  padding-bottom:80px;
}

.editorial .hero-eyebrow{
  font-family:var(--font-sans);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--gold);
  margin:0 0 18px;
}

.editorial .hero-title--article{
  font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:1px;
  color:var(--parchment);
  text-shadow:none;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.editorial .editorial-empty{
  text-align:center;
  font-size:1.05rem;
  opacity:.7;
  padding:40px 0 60px;
}

.editorial .post-container{
  background:var(--white);
  padding:60px;
  box-shadow:0 10px 40px rgba(138,28,28,.08);
}

.editorial .post-header{
  text-align:center;
  margin-bottom:40px;
  padding-bottom:30px;
  border-bottom:2px solid rgba(138,28,28,.2);
}

.editorial #post-title{
  font-family:var(--font-serif);
  font-size:2.8rem;
  font-weight:900;
  color:var(--crimson);
  margin-bottom:20px;
}

.editorial .post-meta{
  font-family:var(--font-sans);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--faded);
}

.editorial .post-image{
  width:200px;
  height:200px;
  margin:0 auto 40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--crimson),#5a1212);
}

.editorial .post-content{
  font-size:1.1rem;
  line-height:1.9;
}

.editorial .post-content p{
  margin-bottom:25px;
}

.editorial .post-content h3{
  font-family:var(--font-serif);
  font-size:1.8rem;
  color:var(--crimson);
  margin:40px 0 20px;
}

/* Responsive */
@media (max-width:968px){
  .editorial .hero-title{
    font-size:3rem;
    letter-spacing:5px;
  }

  .editorial .blog-grid{
    grid-template-columns:1fr;
  }

  .editorial .post-container{
    padding:30px 20px;
  }
}

@media (max-width:768px){
  .editorial .hero{
    padding:120px 20px 80px;
  }

  .editorial .main-content{
    padding:60px 20px;
  }

  .editorial #post-title{
    font-size:2rem;
  }
}