@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Syne:wght@600;700;800&display=swap";
.blog-index{--blog-display:"Syne", ui-sans-serif, sans-serif;--blog-body:"IBM Plex Sans", ui-sans-serif, sans-serif;color:inherit;font-family:var(--blog-body);background:0 0}.blog-index__spacer{height:0}.blog-index__spacer--featured{height:2.75rem}.blog-index__meta--paged{margin-bottom:1.25rem}.blog-index__hero{isolation:isolate;align-items:flex-end;min-height:min(78vh,720px);display:flex;position:relative;overflow:hidden}.blog-index__hero-media{z-index:0;background:linear-gradient(120deg,#0a192feb 12%,#0a192f8c 48%,#00c0ff2e 100%),url(/blog-images/cyber_programming_hacker_1.webp) 50%/cover no-repeat;animation:18s ease-in-out infinite alternate blog-hero-drift;position:absolute;inset:0;transform:scale(1.02)}.blog-index__hero-grid{z-index:1;opacity:.22;background-image:linear-gradient(#00c0ff1f 1px,#0000 1px),linear-gradient(90deg,#00ffc014 1px,#0000 1px);background-size:48px 48px;animation:22s linear infinite blog-grid-shift;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 30%,#0000 95%);mask-image:linear-gradient(#000 30%,#0000 95%)}.blog-index__hero-inner{z-index:2;width:100%;max-width:72rem;margin:0 auto;padding:5.5rem 1.25rem 3.25rem;position:relative}.blog-index__brand{font-family:var(--blog-display);letter-spacing:-.04em;margin:0 0 1.25rem;font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;line-height:.95}.blog-index__brand span:nth-child(2){color:var(--primary)}.blog-index__brand span:nth-child(3){color:var(--secondary)}.blog-index__headline{font-family:var(--blog-display);letter-spacing:-.02em;max-width:18ch;margin:0 0 .85rem;font-size:clamp(1.35rem,3.2vw,2.15rem);font-weight:700;animation:.9s both blog-rise}.blog-index__subhead{max-width:40rem;color:var(--muted-foreground);margin:0;font-size:1.05rem;line-height:1.55;animation:1.05s both blog-rise}.blog-index__section{max-width:72rem;margin:0 auto;padding:3.5rem 1.25rem 5rem}.blog-index__section-title{font-family:var(--blog-display);letter-spacing:-.02em;margin:0 0 1.5rem;font-size:1.5rem;font-weight:700}.blog-index__featured{border:1px solid color-mix(in oklab, var(--border) 80%, transparent);background:color-mix(in oklab, var(--card) 88%, transparent);min-height:380px;color:inherit;grid-template-columns:1.15fr 1fr;gap:0;text-decoration:none;transition:border-color .35s,transform .35s;display:grid;overflow:hidden}.blog-index__featured:hover{border-color:color-mix(in oklab, var(--primary) 55%, var(--border));transform:translateY(-2px)}.blog-index__featured-media{min-height:280px;position:relative;overflow:hidden}.blog-index__featured-media img{object-fit:cover;width:100%;height:100%;transition:transform .7s}.blog-index__featured:hover .blog-index__featured-media img{transform:scale(1.04)}.blog-index__featured-body{flex-direction:column;justify-content:center;gap:.85rem;padding:2rem 2.1rem;display:flex}.blog-index__meta{color:var(--muted-foreground);letter-spacing:.01em;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;font-size:.86rem;display:flex}.blog-index__topic{color:var(--secondary);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600}.blog-index__featured-title{font-family:var(--blog-display);letter-spacing:-.025em;margin:0;font-size:clamp(1.45rem,2.6vw,2.05rem);font-weight:700;line-height:1.15}.blog-index__excerpt{color:var(--muted-foreground);margin:0;line-height:1.6}.blog-index__read{color:var(--primary);margin-top:.4rem;font-weight:600}.blog-index__topics{flex-wrap:wrap;gap:.55rem;margin:0 0 1.5rem;display:flex}.blog-index__topic-chip{border:1px solid color-mix(in oklab, var(--border) 90%, transparent);color:var(--muted-foreground);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:0 0;padding:.4rem .85rem;font-size:.78rem;font-weight:600;transition:border-color .2s,color .2s,background .2s}.blog-index__topic-chip:hover{border-color:color-mix(in oklab, var(--primary) 50%, var(--border));color:var(--foreground)}.blog-index__topic-chip.is-active{background:color-mix(in oklab, var(--primary) 18%, transparent);border-color:var(--primary);color:var(--foreground)}.blog-index__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem;display:grid}.blog-index__card{border:1px solid color-mix(in oklab, var(--border) 85%, transparent);background:color-mix(in oklab, var(--card) 92%, transparent);color:inherit;flex-direction:column;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s;display:flex;overflow:hidden}.blog-index__card:hover{border-color:color-mix(in oklab, var(--primary) 45%, var(--border));transform:translateY(-3px);box-shadow:0 18px 40px #00000047}.blog-index__card-media{aspect-ratio:16/10;background:#112240;overflow:hidden}.blog-index__card-media img{object-fit:cover;width:100%;height:100%;transition:transform .65s}.blog-index__card:hover .blog-index__card-media img{transform:scale(1.05)}.blog-index__card-body{flex-direction:column;flex:1;gap:.55rem;padding:1.2rem 1.25rem 1.35rem;display:flex}.blog-index__card-title{font-family:var(--blog-display);letter-spacing:-.02em;margin:0;font-size:1.15rem;font-weight:700;line-height:1.25}.blog-index__pagination{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2.75rem;display:flex}.blog-index__page-link{border:1px solid var(--border);min-width:2.55rem;height:2.55rem;color:var(--muted-foreground);justify-content:center;align-items:center;padding:0 .8rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.blog-index__page-link:hover{border-color:var(--primary);color:var(--foreground)}.blog-index__page-link.is-active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}.blog-index__page-ellipsis{color:var(--muted-foreground);align-items:center;padding:0 .35rem;display:inline-flex}@keyframes blog-hero-drift{0%{transform:scale(1.02)translate(0,0)}to{transform:scale(1.08)translate(-1.5%,-1%)}}@keyframes blog-grid-shift{0%{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}@keyframes blog-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media (max-width:960px){.blog-index__featured{grid-template-columns:1fr}.blog-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.blog-index__hero-inner{padding:4.5rem 1rem 2.5rem}.blog-index__grid{grid-template-columns:1fr}.blog-index__featured-body{padding:1.35rem 1.2rem 1.6rem}}
