/* ═══════════════════════════════════════════════════════════════════
   Movarna Media — editorial stylesheet.
   Brand tokens match the landing page and the MVP homepage exactly.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --C0:#060606;
  --C1:#0c0c0c;
  --C2:#141414;
  --C3:#1c1c1c;
  --BR:#2a2a2a;
  --W:#ffffff;
  --L:#d9d9d9;
  --M:#8a8a8a;
  --R:#C8181A;
  --R2:#A01012;
  --R3:#E52020;
  --GREEN:#4ade80;
  --FD:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--C0);color:var(--W);font-family:var(--FD);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ─ Logo lockup (matches MVP .logo-wm / .logo-tag exactly) ─ */
.nav-logo{display:flex;flex-direction:column;line-height:1;cursor:pointer;background:none;border:none;padding:0;text-align:left;text-decoration:none}
.logo-wm{font-family:var(--FD);font-size:30px;font-weight:900;font-style:italic;letter-spacing:-1px;color:var(--R);line-height:1}
.logo-tag{font-family:var(--FD);font-size:8px;font-weight:700;letter-spacing:4.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:2px}

/* ─ Nav ─ */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 5rem;background:rgba(6,6,6,.88);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--BR)}
.nav-right{font-family:var(--FD);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--M);display:flex;align-items:center;gap:10px}
.nav-right a{color:var(--M);text-decoration:none;transition:color .2s}
.nav-right a:hover{color:var(--W)}
.nav-right::before{content:'';width:6px;height:6px;background:var(--R);border-radius:50%}

/* ─ Article shell ─ */
.art{max-width:760px;margin:0 auto;padding:72px 5rem 48px}
.art-eye{font-family:var(--FD);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--R);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.art-eye::before{content:'';width:28px;height:2px;background:var(--R)}
.art-hed{font-family:var(--FD);font-size:clamp(32px,4.2vw,54px);font-weight:900;text-transform:none;letter-spacing:-1px;line-height:1.08;color:var(--W);margin:0 0 22px}
.art-hed em{color:var(--R);font-style:normal}
.art-dek{font-size:17px;color:var(--L);line-height:1.7;font-weight:400;margin:0 0 30px;max-width:680px}
.art-meta{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--BR);border-bottom:1px solid var(--BR);margin-bottom:40px}
.art-meta-k{font-family:var(--FD);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--M)}
.art-meta-v{font-family:var(--FD);font-size:12px;font-weight:600;color:var(--L)}
.art-meta-sep{width:1px;height:14px;background:var(--BR)}

/* ─ Body copy ─ */
.art-body p{font-size:16px;color:var(--L);line-height:1.85;font-weight:400;margin:0 0 22px}
.art-body p.lede{font-size:19px;color:var(--W);line-height:1.7;font-weight:400;margin-bottom:28px}
.art-body h2{font-family:var(--FD);font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;color:var(--W);margin:38px 0 14px}
.art-body h3{font-family:var(--FD);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--L);margin:30px 0 10px}
.art-body blockquote{border-left:3px solid var(--R);padding:6px 0 6px 24px;margin:28px 0;font-size:19px;color:var(--W);line-height:1.6;font-style:italic}
.art-body ul{margin:0 0 24px;padding-left:22px}
.art-body li{font-size:16px;color:var(--L);line-height:1.85;margin-bottom:10px}
.art-body strong{color:var(--W);font-weight:700}
.art-body a{color:var(--W);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(200,24,26,.7);transition:text-decoration-color .2s}
.art-body a:hover{text-decoration-color:var(--R3)}

/* ─ Figure ─ */
figure.art-fig{margin:36px 0;padding:0}
figure.art-fig img{width:100%;border:1px solid var(--BR);border-radius:2px}
figcaption{font-family:var(--FD);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--M);margin-top:10px}

/* ─ Related ─ */
.related{max-width:760px;margin:0 auto;padding:44px 5rem 80px;border-top:1px solid var(--BR)}
.related-hed{font-family:var(--FD);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--R);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.related-hed::before{content:'';width:28px;height:2px;background:var(--R)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.related-card{background:var(--C3);padding:24px 22px;text-decoration:none;display:block;border-top:3px solid var(--BR);transition:border-color .3s}
.related-card:hover{border-top-color:var(--R)}
.related-kicker{font-family:var(--FD);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--R);margin-bottom:8px}
.related-title{font-family:var(--FD);font-size:15px;font-weight:800;color:var(--W);line-height:1.35}

/* ─ Footer ─ */
.foot{background:var(--C0);border-top:1px solid var(--BR);padding:36px 5rem 44px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.foot .logo-wm{font-size:22px}
.foot .logo-tag{font-size:7px;letter-spacing:3px}
.foot-meta{font-family:var(--FD);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--M);text-align:right}
.foot-social{display:flex;gap:10px;align-items:center}
.foot-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--BR);border-radius:50%;color:var(--L);transition:border-color .2s,color .2s,background .2s}
.foot-social a:hover{border-color:var(--R);color:var(--W);background:rgba(200,24,26,.08)}
.foot-social svg{width:15px;height:15px;fill:currentColor}

/* ─ Responsive ─ */
@media (max-width:1000px){
  .nav{padding:18px 1.5rem}
  .art{padding:56px 1.5rem 40px}
  .related{padding:36px 1.5rem 72px}
  .foot{padding:28px 1.5rem 36px}
}
@media (max-width:600px){
  .nav{padding:16px 1rem}
  .logo-wm{font-size:24px}
  .logo-tag{font-size:7px;letter-spacing:3px}
  .art{padding:40px 1rem 32px}
  .related{padding:30px 1rem 56px}
  .related-grid{grid-template-columns:1fr;gap:1px}
  .foot{padding:24px 1rem 30px;flex-direction:column;align-items:flex-start;gap:14px}
  .foot-meta{text-align:left}
  .art-body p.lede{font-size:17px}
  .art-body h2{font-size:19px}
}