:root{
  --bg:#ffffff;
  --bg-alt:#f6f7f9;
  --card:#ffffff;
  --text:#151515;
  --muted:#6b7280;
  --accent:#C1121F; /* deep red */
  --accent-2:#EF233C; /* bright red */
  --border:rgba(17,24,39,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  line-height:1.65;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.container{max-width: 980px; margin: 0 auto; padding: 1.25rem;}

header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .85rem 1rem;}
.brand{font-weight:800; letter-spacing:.2px; font-size:1.2rem}
.brand a{color:var(--text); text-decoration:none}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.25rem; flex-wrap:wrap;}
nav a{
  display:inline-block;
  padding:.55rem .85rem;
  color:var(--text); text-decoration:none; border-radius:.6rem;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
nav a:hover{background: rgba(239, 35, 60, .08); color: var(--accent); transform: translateY(-1px)}
nav a.active{color:#fff; background: linear-gradient(90deg, var(--accent), var(--accent-2));}

main{padding: 1.75rem 0;}
.card{
  background:var(--card);
  border-radius:14px;
  padding:1.15rem 1.25rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  border:1px solid var(--border);
}

.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr));}
@media (max-width: 760px){ .grid-2{grid-template-columns: 1fr;}}

h1{margin:.2rem 0 1rem 0; font-size: clamp(1.8rem, 3.2vw, 2.2rem);}
h2{margin:1rem 0 .6rem 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem)}
h3{margin:.6rem 0 .35rem 0; font-size: 1.075rem}
p{margin:.5rem 0 1rem 0}
.lead{color:var(--muted)}

a{color:var(--accent);}
a:hover{text-decoration: underline wavy 1px}

button, .btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; padding:.65rem 1rem; border-radius:.7rem;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 10px 24px rgba(239,35,60,.25);
  font-weight:600;
}
button:hover, .btn:hover{transform: translateY(-1px); opacity:.97}

footer{color:var(--muted); padding:2rem 0 3rem; text-align:center}
small{color:var(--muted)}

article time{color:var(--muted); font-size:.92rem}
article a{color:var(--accent)}

hr{border:none; border-top:1px solid var(--border); margin:1.25rem 0}

.list-plain{list-style:none; padding:0; margin:0}
.meta{color:var(--muted); font-size:.92rem}

.badge{
  display:inline-block; padding:.25rem .55rem; border-radius:.5rem;
  background: rgba(239,35,60,.08); color: var(--accent); font-weight:600; font-size:.85rem
}

/* comments */
.comments{margin-top:1.25rem}
.comment{display:grid; grid-template-columns: 40px 1fr; gap:.75rem; padding: .75rem 0; border-top:1px solid var(--border)}
.comment:first-child{border-top:none}
.avatar{
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:inline-block;
}
.comment .author{font-weight:700}
.comment .date{color:var(--muted); font-size:.85rem}