@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{--red:#C0392B;--red2:#E74C3C;--bg:#06060a;--text:#fff;--muted:rgba(255,255,255,0.55);--faint:rgba(255,255,255,0.35);--line:rgba(255,255,255,0.08)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 600px 400px at 50% -5%, rgba(192,57,43,0.16), transparent 70%);
  background-repeat:no-repeat;
  animation:pageEnter 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
/* Entrance transition — zoom-out reveal at 1.5x scale (matches the homepage feel) */
@keyframes pageEnter{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}

a{color:var(--red2);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{background:rgba(6,6,10,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:14px 20px;position:sticky;top:0;z-index:10}
.topbar .wrap{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px}
.topbar .logo{display:flex;align-items:center;gap:8px;font-weight:900;color:#fff;font-size:18px;letter-spacing:-0.5px}
.topbar .logo span{color:var(--red)}
/* Glowing blood drop — used wherever the logo appears */
.drop{display:inline-block;filter:drop-shadow(0 0 6px rgba(192,57,43,0.9)) drop-shadow(0 0 16px rgba(192,57,43,0.55));animation:dropGlow 2.4s ease-in-out infinite}
@keyframes dropGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(192,57,43,0.75)) drop-shadow(0 0 12px rgba(192,57,43,0.4))}50%{filter:drop-shadow(0 0 9px rgba(192,57,43,1)) drop-shadow(0 0 22px rgba(192,57,43,0.65))}}
@media(prefers-reduced-motion:reduce){.drop{animation:none}}
.topbar nav{margin-left:auto;display:flex;gap:20px;font-size:14px}
.topbar nav a{color:rgba(255,255,255,0.55);font-weight:600}
.topbar nav a:hover{color:#fff;text-decoration:none}

main{max-width:760px;margin:0 auto;padding:44px 20px 64px}
.crumb{font-size:13px;color:var(--faint);margin-bottom:18px}
.crumb a{color:var(--faint)}
h1{font-size:clamp(28px,6vw,40px);line-height:1.2;color:#fff;margin-bottom:10px;letter-spacing:-0.5px}
.lead{font-size:18px;color:rgba(255,255,255,0.7);margin:14px 0 24px}
h2{font-size:23px;margin:32px 0 10px;color:#fff;letter-spacing:-0.3px}
h3{font-size:17px;margin:22px 0 6px;color:#fff}
p,li{margin-bottom:12px;color:rgba(255,255,255,0.72)}
ul,ol{margin:0 0 14px 22px}
strong{color:#fff}
.meta{font-size:13px;color:var(--faint);margin-bottom:24px}

table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px;background:rgba(255,255,255,0.02);border-radius:10px;overflow:hidden}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:center;color:rgba(255,255,255,0.8)}
th{background:rgba(192,57,43,0.14);color:#fff;font-weight:700}

.note{background:rgba(192,57,43,0.1);border:1px solid rgba(192,57,43,0.32);border-left:4px solid var(--red);border-radius:10px;padding:14px 16px;margin:22px 0;font-size:14px;color:rgba(255,255,255,0.75)}

.cta{display:inline-block;background:linear-gradient(135deg,#922B21,#C0392B);color:#fff;font-weight:700;border-radius:12px;padding:14px 24px;margin:20px 0;box-shadow:0 4px 22px rgba(192,57,43,0.4)}
.cta:hover{text-decoration:none;transform:translateY(-2px);transition:transform 0.2s}

.cards{display:grid;gap:16px;margin-top:8px}
.card{display:block;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:all 0.25s}
.card:hover{text-decoration:none;background:rgba(255,255,255,0.05);transform:translateY(-4px);border-color:rgba(192,57,43,0.4)}
.card h2{margin:0 0 6px;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:14.5px}

footer{border-top:1px solid var(--line);margin-top:44px;padding-top:24px;font-size:13px;color:var(--faint)}
footer a{font-weight:600}
.related{margin-top:38px;border-top:1px solid var(--line);padding-top:24px}
.related h2{font-size:18px;margin-top:0}

@media(max-width:520px){table{font-size:12.5px}th,td{padding:8px 6px}}
@media(prefers-reduced-motion:reduce){body{animation:none}}