/*
Theme Name: FilmSpoke
Theme URI: https://filmspoke.ai
Author: Sensa
Description: Lightweight FilmSpoke theme - blog + content pages in the FilmSpoke brand (red on cinema black, Poppins + Inter). The homepage is served by the filmspoke-landing mu-plugin; this theme renders the blog, posts and pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: filmspoke
*/

:root{
  --bg:#0A0A0A; --s1:#121212; --s2:#1A1A1A; --line:#242424;
  --white:#F4F4F5; --mut:#9A9AA0; --accent:#E50914; --accent2:#FF2A36; --ink:#FFFFFF;
  --maxw:1140px; --read:760px; --r-btn:6px; --r-card:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--white);
  font-family:'Inter',system-ui,-apple-system,Arial,sans-serif; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4,.display{font-family:'Poppins',sans-serif; letter-spacing:-.02em; line-height:1.12; margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.accent{color:var(--accent)}
.muted{color:var(--mut)}

/* ---- logo ---- */
.logo{display:inline-block; text-align:left; line-height:1}
.logo .wm{font-family:'Poppins'; font-weight:800; font-size:25px; letter-spacing:-.02em}
.logo .wm .f{color:var(--white)} .logo .wm .s{color:var(--accent)}
.logo .rule{height:3px; width:78px; background:var(--accent); margin-top:7px; border-radius:2px}

/* ---- nav ---- */
nav.site{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(10,10,10,.82); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-weight:600; font-size:14.5px; color:var(--mut); transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{display:inline-flex; align-items:center; gap:8px; font-family:'Poppins'; font-weight:700; font-size:14px; white-space:nowrap;
  background:var(--accent); color:#fff; padding:11px 20px; border-radius:var(--r-btn); transition:transform .15s, box-shadow .25s;
  box-shadow:0 6px 22px rgba(229,9,20,.32)}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(229,9,20,.45)}
@media(max-width:620px){ .nav-links a.full{display:none} nav.site .logo .wm{font-size:21px} }

/* ---- shared page shell ---- */
.pagehead{padding:64px 0 26px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:'Poppins'; font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.pagehead h1{font-size:clamp(34px,5.4vw,56px); font-weight:800}
.pagehead .lead{color:#d6d6da; font-size:clamp(17px,2vw,20px); max-width:var(--read); margin:18px 0 0}

/* ---- blog index ---- */
.postgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:48px 0 80px}
@media(max-width:860px){.postgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.postgrid{grid-template-columns:1fr}}
.pcard{background:var(--s1); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:transform .25s, border-color .25s}
.pcard:hover{transform:translateY(-4px); border-color:#3a3a3a}
.pcard .thumb{aspect-ratio:16/10; background:var(--s2); overflow:hidden}
.pcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .thumb img{transform:scale(1.06)}
.pcard .body{padding:20px 20px 24px}
.pcard .cat{font-family:'Poppins'; font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.pcard h2{font-size:20px; font-weight:700; margin:9px 0 8px; line-height:1.25}
.pcard p{color:var(--mut); font-size:14.5px; margin:0 0 14px}
.pcard .pmeta{color:#6f6f76; font-size:12.5px; font-weight:500}

/* ---- single post ---- */
.article{padding:56px 0 30px}
.article .col{max-width:var(--read); margin:0 auto}
.crumb{font-size:13px; color:var(--mut); margin-bottom:20px}
.crumb a:hover{color:var(--white)}
.article h1.title{font-size:clamp(32px,5vw,52px); font-weight:800; margin:0 0 18px}
.ameta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--mut); font-size:14px; margin-bottom:30px}
.ameta .dot{width:4px; height:4px; border-radius:50%; background:#4a4a4f}
.feat{max-width:var(--maxw); margin:0 auto 12px; padding:0 28px}
.feat img{width:100%; border-radius:var(--r-card); border:1px solid var(--line)}
.feat figcaption,.article figcaption{color:#6f6f76; font-size:13px; text-align:center; margin-top:10px}

/* ---- post body typography ---- */
.prose{font-size:18px; color:#e7e7ea}
.prose > *{max-width:var(--read); margin-left:auto; margin-right:auto}
.prose p{margin:0 0 22px}
.prose h2{font-size:clamp(24px,3vw,32px); font-weight:700; color:var(--white); margin:44px 0 14px; padding-top:6px}
.prose h2::before{content:""; display:block; width:46px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:18px}
.prose h3{font-size:21px; font-weight:700; color:var(--white); margin:30px 0 10px}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 22px; padding-left:24px}
.prose li{margin:0 0 9px}
.prose ul li::marker{color:var(--accent)}
.prose img{border-radius:var(--r-card); border:1px solid var(--line); margin:14px auto 8px}
.prose blockquote{margin:30px auto; padding:6px 0 6px 24px; border-left:3px solid var(--accent);
  font-family:'Poppins'; font-weight:600; font-size:22px; line-height:1.4; color:var(--white)}
.prose blockquote p{margin:0}
.prose hr{border:0; border-top:1px solid var(--line); margin:40px auto}
.prose code{background:var(--s2); border:1px solid var(--line); border-radius:4px; padding:1px 6px; font-size:.92em}

/* ---- CTA band ---- */
.cta-band{margin:60px 0 0; padding:54px 0; border-top:1px solid var(--line); background:var(--s1); text-align:center}
.cta-band h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; margin:0 0 12px}
.cta-band p{color:var(--mut); max-width:560px; margin:0 auto 26px; font-size:16px}
.btnA{display:inline-flex; align-items:center; gap:10px; font-family:'Poppins'; font-weight:700; font-size:16px;
  background:var(--accent); color:#fff; padding:16px 32px; border-radius:var(--r-btn); border:none; cursor:pointer;
  transition:transform .15s, box-shadow .25s; box-shadow:0 8px 30px rgba(229,9,20,.35)}
.btnA:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(229,9,20,.5)}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line); padding:46px 0 40px; margin-top:10px}
.foot-in{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start}
.foot-meta{color:var(--mut); font-size:13px; margin-top:14px; max-width:420px}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{color:var(--mut); font-size:14px; transition:color .2s}
.foot-links a:hover{color:var(--white)}

/* ---- misc ---- */
.notfound{padding:90px 0; text-align:center}
.pagination{display:flex; gap:12px; justify-content:center; padding:0 0 70px}
.pagination a,.pagination span{padding:9px 15px; border:1px solid var(--line); border-radius:6px; font-size:14px; color:var(--mut)}
.pagination .current{background:var(--accent); color:#fff; border-color:var(--accent)}