:root{
  --background:#030303;
  --foreground:#f5f5f5;
  --card:#0a0a0a;
  --muted:#a3a3a3;
  --primary:#eb1d25;
  --primary-fg:#fff;
  --border:#262626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Saira,system-ui,sans-serif;
  background:var(--background);
  color:var(--foreground);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 1.5rem}
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 10%,transparent);
  background:color-mix(in srgb,var(--background) 80%,transparent);
  backdrop-filter:blur(10px);
}
.header-inner{height:4rem;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;font-size:1.125rem;letter-spacing:-0.02em}
.logo span{color:var(--primary)}
nav a{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--muted)}
nav a:hover{color:var(--primary)}
.site-footer{border-top:1px solid color-mix(in srgb,var(--primary) 10%,transparent);padding:2rem 0}
.site-footer p{text-align:center;font-family:ui-monospace,monospace;font-size:.75rem;color:var(--muted);margin:0}
main{padding-top:6rem;padding-bottom:4rem;min-height:70vh}
.panel{
  position:relative;
  border:1px solid color-mix(in srgb,var(--primary) 10%,transparent);
  border-radius:.5rem;
  padding:2rem;
  background:transparent;
}
@media(min-width:768px){.panel{padding:3rem}}
.corner{position:absolute;font-family:ui-monospace,monospace;font-size:.75rem;color:color-mix(in srgb,var(--primary) 40%,transparent);line-height:1;user-select:none}
.corner.tl{top:-1px;left:-1px}
.corner.tr{top:-1px;right:-1px}
.corner.bl{bottom:-1px;left:-1px}
.corner.br{bottom:-1px;right:-1px}
.eyebrow{font-family:ui-monospace,monospace;font-size:.75rem;color:color-mix(in srgb,var(--primary) 70%,transparent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem}
.hero{text-align:center;margin-bottom:3rem}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;letter-spacing:-0.03em;margin:0 0 1rem;line-height:1.05}
.hero h1 span{color:var(--primary)}
.hero p{max-width:42rem;margin:0 auto;color:var(--muted);font-size:1.05rem}
.grid{display:grid;gap:1.5rem;max-width:72rem;margin:0 auto}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid color-mix(in srgb,var(--primary) 10%,transparent);
  border-radius:.5rem;background:var(--card);overflow:hidden;
  transition:border-color .2s;
}
a.card-link:hover .card{border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
a.card-link:hover .card h2{color:var(--primary)}
.card-img{position:relative;aspect-ratio:1200/630;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
a.card-link:hover .card-img img{transform:scale(1.03)}
.card-img::after{content:"";position:absolute;inset:auto 0 0;height:2.5rem;background:linear-gradient(to top,var(--card),transparent)}
.card-body{display:flex;flex-direction:column;flex:1;padding:1.25rem}
.meta-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.75rem}
.idx,.tag{font-family:ui-monospace,monospace;font-size:.75rem}
.idx{color:color-mix(in srgb,var(--primary) 40%,transparent)}
.tag{border:1px solid color-mix(in srgb,var(--primary) 10%,transparent);border-radius:.375rem;padding:.125rem .5rem;color:var(--muted)}
.tag-strong{border-color:color-mix(in srgb,var(--primary) 20%,transparent);color:color-mix(in srgb,var(--primary) 70%,transparent)}
.card h2{font-size:1rem;font-weight:900;line-height:1.35;margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.card .desc{font-size:.875rem;color:var(--muted);line-height:1.5;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;justify-content:space-between;margin-top:1rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,var(--primary) 10%,transparent);font-family:ui-monospace,monospace;font-size:.75rem;color:var(--muted)}
.card-foot .rt{color:color-mix(in srgb,var(--primary) 50%,transparent)}
.article{max-width:48rem;margin:0 auto;padding:0 1.5rem 4rem}
.back{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,monospace;font-size:.75rem;color:color-mix(in srgb,var(--primary) 60%,transparent);margin-bottom:2rem}
.back:hover{color:var(--primary)}
.cover{width:100%;aspect-ratio:1200/630;border-radius:.5rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 10%,transparent);margin-bottom:2.5rem}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.article header{margin-bottom:3rem}
.article h1{font-size:clamp(1.875rem,4vw,3rem);font-weight:900;letter-spacing:-0.02em;line-height:1.15;margin:0 0 1.25rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;font-family:ui-monospace,monospace;font-size:.75rem;color:var(--muted);border-top:1px solid color-mix(in srgb,var(--primary) 10%,transparent);padding-top:1rem}
.dot{color:color-mix(in srgb,var(--primary) 20%,transparent)}
.share-btn{
  margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:ui-monospace,monospace;font-size:.75rem;
  border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);
  border-radius:.375rem;padding:.375rem .75rem;
  color:color-mix(in srgb,var(--primary) 70%,transparent);background:transparent;cursor:pointer;
}
.share-btn:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent);color:var(--primary)}
.blog-content{line-height:1.75}
.blog-content h2{font-size:1.5rem;font-weight:900;margin:2.5rem 0 1rem;letter-spacing:-0.02em}
.blog-content h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem}
.blog-content p{margin:1rem 0}
.blog-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.blog-content ul,.blog-content ol{margin:1rem 0;padding-left:1.5rem}
.blog-content ul{list-style:disc}
.blog-content ol{list-style:decimal}
.blog-content li{margin:.4rem 0}
.blog-content strong{font-weight:700}
.blog-content hr{border:0;border-top:1px solid color-mix(in srgb,var(--primary) 10%,transparent);margin:2.5rem 0}
.blog-content blockquote{border-left:3px solid var(--primary);padding-left:1rem;color:var(--muted);margin:1.5rem 0}
.blog-content code{font-family:ui-monospace,monospace;font-size:.875em;background:var(--card);padding:.15rem .4rem;border-radius:.25rem}
.blog-content pre{background:var(--card);border:1px solid var(--border);border-radius:.5rem;padding:1rem;overflow-x:auto;margin:1.5rem 0}
.blog-content pre code{background:none;padding:0}
.blog-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;display:block;overflow-x:auto}
.blog-content th,.blog-content td{border:1px solid var(--border);padding:.6rem .9rem;text-align:left}
.blog-content th{background:var(--card);font-weight:700}
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid color-mix(in srgb,var(--primary) 10%,transparent)}
.related h3{font-family:ui-monospace,monospace;font-size:.75rem;color:color-mix(in srgb,var(--primary) 60%,transparent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .75rem;font-weight:400}
.related a{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--muted);margin:.5rem 0}
.related a:hover{color:var(--foreground)}
.related a .chev{color:color-mix(in srgb,var(--primary) 40%,transparent);font-family:ui-monospace,monospace}
.related a:hover .chev{color:var(--primary)}
.contact-wrap{max-width:42rem;margin:0 auto;padding:3rem 1.5rem 4rem}
.contact-wrap .panel{text-align:center}
.contact-wrap h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-0.02em;margin:0 0 1rem}
.contact-wrap h1 span{color:var(--primary)}
.contact-wrap p{color:var(--muted);margin:0 0 2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--primary);color:var(--primary-fg);font-weight:900;
  padding:.625rem 1.5rem;border-radius:.5rem;font-size:.875rem;
}
.btn:hover{filter:brightness(1.08)}
.empty{text-align:center;padding:4rem 0;font-family:ui-monospace,monospace;font-size:.875rem;color:var(--muted)}