/* ==========================================================
   The RŌL Radio — Blog shared stylesheet
   Ported design tokens + nav/footer from the main site (index.html)
   so every blog page looks and feels like part of the same site.
   ========================================================== */

:root{
  --void:#faf9f5;
  --surface:#f1efe6;
  --surface-raised:#e9e6da;
  --hairline:#ddd9cc;
  --blue:#2e5ce0;
  --blue-dim:#c9d6f7;
  --blue-glow:#5f85f2;
  --amber:#a86a1c;
  --text-hi:#161410;
  --text-lo:#6b6759;
  --text-faint:#928d7c;
  --max:1180px;
  --max-article:720px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- SCROLL REVEAL (same pattern as main site) ---------- */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in-view{opacity:1; transform:translateY(0);}

body{
  background:var(--void);
  color:var(--text-hi);
  font-family:'DM Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Bebas Neue', sans-serif; font-weight:400; letter-spacing:0.01em; line-height:0.95;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'Space Mono', monospace;}
::selection{background:var(--blue); color:var(--void);}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

/* ---------- NAV (copied from index.html) ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,249,245,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px; position:relative;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:0.04em;}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--blue); animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,45%{opacity:1;} 50%,95%{opacity:0.15;} 100%{opacity:1;}}
nav.links{display:flex; gap:34px; align-items:center;}
nav.links a{font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-lo); transition:color .2s; position:relative; padding-bottom:2px;}
nav.links a::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .3s ease;}
nav.links a:hover{color:var(--text-hi);}
nav.links a:hover::after{transform:scaleX(1); transform-origin:left;}
nav.links a.active{color:var(--text-hi);}
nav.links a.active::after{transform:scaleX(1); transform-origin:left;}
.nav-cta{
  font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.05em;
  border:1px solid var(--blue); color:var(--blue); padding:9px 18px; border-radius:2px;
  text-transform:uppercase; transition:all .2s;
}
.nav-cta:hover{background:var(--blue); color:var(--void); transform:translateY(-2px);}
.nav-cta:active{transform:translateY(0) scale(0.96);}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer;
  padding:8px; position:relative; z-index:120;
}
.nav-toggle span{
  width:20px; height:2px; background:var(--text-hi); display:block; border-radius:1px;
  transition:transform .25s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-dismiss{display:none; position:fixed; inset:0; z-index:99; background:transparent;}
.mobile-dismiss.open{display:block;}

.mobile-dropdown{
  display:none; position:absolute; top:56px; right:0; width:168px;
  background:var(--void); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:0 16px 34px -10px rgba(22,20,16,0.28);
  padding:6px; z-index:120;
  transform-origin:top right;
  transform:scale(0.92); opacity:0; pointer-events:none;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.1), opacity .15s ease;
}
.mobile-dropdown.open{transform:scale(1); opacity:1; pointer-events:auto;}
.mobile-dropdown a{
  display:block; font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.86rem;
  color:var(--text-hi); padding:9px 12px; border-radius:8px;
  transition:background .15s;
}
.mobile-dropdown a.active{background:var(--surface);}
.mobile-dropdown a:active{background:var(--surface);}
.mobile-dropdown hr{border:none; border-top:1px solid var(--hairline); margin:4px 2px;}
.mobile-dropdown-cta{padding:5px 6px 2px;}
.mobile-dropdown-cta a{
  background:var(--blue); color:#fff; text-align:center; font-weight:700;
  font-size:0.82rem; padding:9px 0; border-radius:9px;
}
@media (prefers-reduced-motion: reduce){
  .mobile-dropdown{transition:none;}
}

/* ---------- EYEBROW ---------- */
.eyebrow{
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.14em;
  color:var(--amber); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--amber);}

/* ---------- BLOG HEADER ---------- */
.blog-head{padding:70px 0 50px; border-bottom:1px solid var(--hairline);}
.blog-head h1{font-size:clamp(2.6rem,6vw,4.2rem); text-transform:uppercase;}
.blog-head p{color:var(--text-lo); font-size:1.05rem; max-width:560px; margin-top:14px;}
.blog-head .rss-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-family:'Space Mono',monospace; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-lo); border-bottom:1px solid var(--hairline); padding-bottom:3px; transition:color .2s, border-color .2s;
}
.blog-head .rss-link:hover{color:var(--amber); border-color:var(--amber);}

/* ---------- POST GRID / CARDS ---------- */
.post-grid{padding:60px 0 100px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.post-grid-empty{color:var(--text-lo); font-size:0.98rem; padding:10px 0 20px;}
.post-card{border:1px solid var(--hairline); border-radius:6px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s;}
.post-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px -14px rgba(22,20,16,0.22); border-color:var(--blue-dim);}
.post-card-cover{aspect-ratio:16/9; background:var(--surface-raised); position:relative; overflow:hidden;}
.post-card-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.post-card-body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-card-date{font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint);}
.post-card h2{font-size:1.5rem; text-transform:uppercase; line-height:1.05;}
.post-card p{color:var(--text-lo); font-size:0.92rem; flex:1;}
.post-card-link{font-family:'Space Mono',monospace; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue); margin-top:4px;}
.post-card-link::after{content:' →'; transition:margin-left .15s;}
.post-card:hover .post-card-link::after{margin-left:4px;}

.post-card.featured{grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr;}
.post-card.featured .post-card-cover{aspect-ratio:auto; height:100%;}
.post-card.featured .post-card-body{justify-content:center; padding:34px 40px;}
.post-card.featured h2{font-size:2.2rem;}

/* ---------- ARTICLE (single post page) ---------- */
.article-head{padding:56px 0 36px; border-bottom:1px solid var(--hairline);}
.article-head .back-link{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:26px;
  font-family:'Space Mono',monospace; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-lo); transition:color .2s;
}
.article-head .back-link:hover{color:var(--blue);}
.article-head .back-link::before{content:'← ';}
.article-head h1{max-width:var(--max-article); font-size:clamp(2.2rem,5.4vw,3.4rem); text-transform:uppercase;}
.article-meta{display:flex; align-items:center; gap:14px; margin-top:18px; font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
.article-meta .dot-sep{width:3px; height:3px; border-radius:50%; background:var(--text-faint);}
.article-cover{max-width:var(--max-article); margin:0 auto; padding:40px 28px 0;}
.article-cover img{width:100%; border-radius:6px; display:block; aspect-ratio:16/9; object-fit:cover;}
.article-body{max-width:var(--max-article); margin:0 auto; padding:40px 28px 90px; font-size:1.05rem; color:var(--text-hi);}
.article-body > * + *{margin-top:22px;}
.article-body h2{font-size:1.8rem; text-transform:uppercase; margin-top:44px;}
.article-body h3{font-size:1.3rem; text-transform:uppercase; margin-top:34px;}
.article-body p{line-height:1.75;}
.article-body a{color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue-dim); text-underline-offset:2px;}
.article-body a:hover{text-decoration-color:var(--blue);}
.article-body blockquote{
  border-left:3px solid var(--amber); padding:4px 0 4px 20px; color:var(--text-lo);
  font-family:'Bebas Neue',sans-serif; font-size:1.4rem; text-transform:uppercase; line-height:1.15;
}
.article-body ul, .article-body ol{padding-left:22px; line-height:1.75;}
.article-body img{width:100%; border-radius:6px; display:block;}
.article-foot{border-top:1px solid var(--hairline); padding-top:28px; margin-top:50px !important; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.article-foot .back-link{
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--blue);
}

/* ---------- FOOTER (copied from index.html) ---------- */
footer{border-top:1px solid var(--hairline); padding:36px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
footer p{font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--text-faint);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  nav.links{display:none;}
  .nav-right{display:none;}
  .nav-toggle{display:flex;}
  .mobile-dropdown{display:block;}
  .post-grid{grid-template-columns:1fr;}
  .post-card.featured{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .article-cover{padding:28px 20px 0;}
  .article-body{padding:28px 20px 70px;}
}