/* Revelion Imperium - Resources / blog shared styles. Brand-matched: sharp 0px corners,
   Electric Blue #0056D2, graphite #121212, Archivo Black headings, DM Sans body. Root-relative paths. */
:root{
  --bg:#121212; --bg-1:#0A2540; --bg-2:#161a22;
  --blue:#0056D2; --steel:#2F80ED; --navy:#0A2540;
  --smoke:#F8F9F9; --silver:#C0C0C0; --muted:#8a8f98;
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.05);
  --heading:'Archivo Black',sans-serif; --body:'DM Sans',system-ui,sans-serif;
  --maxw:820px; --ease:cubic-bezier(0.4,0,0.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--silver);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;}
a{color:var(--steel);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
a:hover{color:var(--blue);border-color:var(--blue);}
::selection{background:rgba(0,86,210,0.3);color:#fff;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

.topbar{position:sticky;top:0;z-index:20;background:rgba(18,18,18,0.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:none;padding:0 clamp(20px,4vw,40px);}
.brand{display:inline-flex;align-items:center;gap:10px;border:none;color:hsl(200 6% 97%);transition:color .2s var(--ease);}
.brand:hover{color:var(--blue);}
.brand img{height:30px;width:auto;display:block;}
.brand .bn{font-family:var(--heading);text-transform:uppercase;letter-spacing:2px;font-size:14px;line-height:1;color:inherit;}
.back{font-family:var(--body);font-weight:500;font-size:14px;color:var(--silver);display:inline-flex;align-items:center;gap:8px;border:none;}
.back:hover{color:var(--smoke);}
.back .arr{transition:transform .2s var(--ease);} .back:hover .arr{transform:translateX(-3px);}

.doc-hero{position:relative;height:384px;display:flex;align-items:flex-end;padding:84px 0 48px;overflow:hidden;border-bottom:1px solid var(--line-soft);background:var(--navy);}
.doc-hero .glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 90% 60% at 22% 0%,rgba(0,86,210,0.28) 0%,transparent 62%),radial-gradient(ellipse 70% 50% at 88% 10%,rgba(47,128,237,0.16) 0%,transparent 60%);}
.doc-hero .wrap{position:relative;z-index:1;width:100%;}
.eyebrow{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--steel);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);}
h1{font-family:var(--heading);color:var(--smoke);font-weight:400;letter-spacing:-0.02em;line-height:1.1;font-size:clamp(30px,5vw,44px);}
.post-meta{margin-top:20px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 22px;}
.post-meta b{color:var(--silver);font-weight:700;}

.doc-body{padding:54px 0 40px;}
.lede{font-size:18.5px;color:var(--smoke);line-height:1.65;margin-bottom:22px;font-weight:500;}
h2{font-family:var(--heading);color:var(--smoke);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,3vw,28px);line-height:1.25;margin:44px 0 14px;}
h3{font-family:var(--body);color:var(--smoke);font-weight:700;font-size:18px;margin:28px 0 8px;}
p{margin-bottom:15px;color:var(--silver);}
p.note{color:var(--muted);font-size:14.5px;}
strong{color:var(--smoke);font-weight:700;}
ul,ol{list-style:none;margin:8px 0 18px;padding:0;}
li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--silver);}
li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--blue);}
li strong{color:var(--smoke);}

.stat-big{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--blue);padding:26px 28px;margin:26px 0;}
.stat-big .n{font-family:var(--heading);font-weight:400;color:var(--smoke);font-size:clamp(28px,5vw,40px);line-height:1;letter-spacing:-0.02em;}
.stat-big .lbl{color:var(--silver);margin-top:8px;font-size:15px;}

.callout{background:var(--bg-2);border:1px solid var(--line);padding:22px 26px;margin:22px 0;}
.callout .ttl{font-family:var(--body);font-weight:700;color:var(--smoke);font-size:15.5px;margin-bottom:8px;}
.callout p:last-child{margin-bottom:0;}

.faq-block{margin-top:40px;}
.faq-block .q{font-family:var(--body);color:var(--smoke);font-weight:700;font-size:17px;margin:24px 0 6px;}
.faq-block .a{color:var(--silver);margin-bottom:6px;}

.cta-block{margin:48px 0 8px;padding:34px 32px;border:1px solid var(--line);border-top:3px solid var(--blue);background:var(--bg-2);text-align:center;}
.cta-block h2{margin:0 0 10px;font-size:clamp(22px,3vw,26px);}
.cta-block p{color:var(--silver);max-width:520px;margin:0 auto 22px;}
.cta{display:inline-block;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:0.05em;text-transform:uppercase;color:var(--smoke);background:var(--blue);padding:15px 34px;border:none;transition:background .2s var(--ease),box-shadow .2s;box-shadow:0 0 20px rgba(0,86,210,0.45);}
.cta:hover{background:var(--steel);color:var(--smoke);border:none;box-shadow:0 0 28px rgba(0,86,210,0.7);}

.related{margin-top:44px;padding-top:30px;border-top:1px solid var(--line-soft);}
.related .rl-h{font-family:var(--body);font-weight:700;color:var(--muted);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}
.related a{display:block;padding:8px 0;color:var(--silver);border:none;font-size:15.5px;}
.related a:hover{color:var(--steel);}

/* hub cards */
.hub-intro{font-size:18px;color:var(--silver);max-width:640px;margin:0 0 8px;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.card{display:block;background:var(--bg-2);border:1px solid var(--line);padding:24px;transition:transform .2s var(--ease),border-color .2s;color:inherit;border-bottom:1px solid var(--line);}
.card:hover{transform:translateY(-3px);border-color:var(--blue);color:inherit;}
.card .tag{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--steel);}
.card .ct{font-family:var(--heading);color:var(--smoke);font-weight:400;font-size:18px;line-height:1.3;margin:10px 0 8px;}
.card .cd{color:var(--muted);font-size:14.5px;}

footer{padding:56px 0 46px;border-top:1px solid var(--line-soft);background:var(--bg);margin-top:40px;}
footer .wrap{max-width:none;}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
footer img.flogo{height:26px;}
.brand-foot{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid transparent;color:var(--smoke);}
.brand-foot:hover{border-color:var(--blue);}
.brand-foot .bn{font-family:var(--heading);text-transform:uppercase;letter-spacing:2px;font-size:13px;}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;}
.foot-links a{font-size:14px;color:var(--silver);border:none;}
.foot-links a:hover{color:var(--steel);border:none;}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:22px;font-size:12.5px;color:var(--muted);}
.foot-bottom .foot-popia{flex:1;text-align:center;min-width:260px;}
.foot-bottom a{color:var(--muted);border:none;} .foot-bottom a:hover{color:var(--steel);border:none;}

@media (max-width:600px){
  .doc-hero{height:368px;padding:60px 0 38px;} .doc-body{padding:40px 0 30px;}
  .post-meta{flex-direction:column;gap:6px;}
  .cards{grid-template-columns:1fr;}
  /* Keep the wordmark on mobile so the brand matches the homepage; tighten
     padding + sizes so logo + wordmark + back-link fit on narrow phones. */
  .topbar .wrap{padding:0 16px;}
  .topbar .brand .bn{font-size:12px;letter-spacing:1.5px;}
  .back{font-size:13px;}
  .topbar .brand .bn,.back{white-space:nowrap;}
}
/* Very narrow phones (<=359px, e.g. iPhone SE 1st gen): size down so logo +
   wordmark + back-link stay on one line with breathing room. */
@media (max-width:359px){
  .topbar .brand .bn{font-size:11px;letter-spacing:1px;}
  .back{font-size:12px;}
}