:root{
  --ink:#061019;
  --ink-2:#0B1C28;
  --pb:#A1EBFF;
  --pb-mid:#4FB0D4;
  --paper:#EAF4FA;
  --slate:#6F8A9B;
  --hair:rgba(161,235,255,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:1.05rem;line-height:1.65;overflow-x:hidden;
}
.wrap{max-width:48rem;margin:0 auto;padding:0 1.75rem}
img{display:block;max-width:100%}

nav{position:sticky;top:0;z-index:50;background:rgba(6,16,25,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
nav .wrap{max-width:64rem;display:flex;align-items:center;justify-content:space-between;height:4.25rem}
.brand{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;color:var(--paper);text-decoration:none}
.brand em{color:var(--pb);font-style:normal}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);text-decoration:none}
.nav-links a:hover{color:var(--pb)}
.nav-links a:focus-visible,.brand:focus-visible{outline:2px solid var(--pb);outline-offset:4px}

.page-head{padding:4.5rem 0 2.5rem;border-bottom:1px solid var(--hair)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pb);margin-bottom:1.2rem}
h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.page-head p{margin-top:1.4rem;max-width:46ch;color:rgba(234,244,250,.84)}

/* ---- post cards ---- */
.posts{list-style:none;padding:2.75rem 0 4rem;display:grid;gap:2rem}
.posts li{margin:0}
.posts a{display:grid;grid-template-columns:15rem 1fr;border:1px solid var(--hair);background:var(--ink-2);text-decoration:none;color:inherit;transition:border-color .2s}
.posts a:hover{border-color:var(--pb)}
.posts a:focus-visible{outline:2px solid var(--pb);outline-offset:4px}
.posts .shot{overflow:hidden;background:var(--ink);min-height:11rem}
.posts .shot img{width:100%;height:100%;object-fit:cover;display:block}
.posts .meta{padding:1.9rem}
.posts time{font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:.75rem}
.posts h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.025em;line-height:1.18;margin:0 0 .75rem}
.posts a:hover h2{color:var(--pb)}
.posts p{color:rgba(234,244,250,.78);font-size:.97rem;max-width:60ch;margin-bottom:1.1rem}
.posts .more{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pb)}
@media(max-width:720px){
  .posts a{grid-template-columns:1fr}
  .posts .shot{min-height:10rem}
  .posts .meta{padding:1.6rem}
}

/* ---- topics strip ---- */
.topics{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--ink-2);padding:2.25rem 0}
.topics .wrap{max-width:48rem}
.topics h2{font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pb);margin-bottom:1.1rem;font-weight:500}
.topic-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.topic-tags span{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.1em;color:rgba(234,244,250,.8);border:1px solid var(--hair);padding:.5rem .9rem}

/* ---- social cards ---- */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.85rem;margin-top:2.25rem}
.slink{display:flex;align-items:center;gap:.95rem;padding:1rem 1.15rem;border:1px solid var(--hair);background:var(--ink-2);text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .22s,transform .22s}
.slink::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);transform:scaleY(0);transform-origin:bottom;transition:transform .22s}
.slink:hover{border-color:var(--brand);transform:translateY(-2px)}
.slink:hover::before{transform:scaleY(1)}
.slink:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.sicon{display:flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;flex:none;border:1px solid var(--hair);transition:border-color .22s,background .22s}
.slink:hover .sicon{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.sicon svg{width:1.1rem;height:1.1rem;fill:var(--slate);transition:fill .22s}
.slink:hover .sicon svg{fill:var(--brand)}
.stext{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.stext strong{font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--paper)}
.slink:hover .stext strong{color:var(--brand)}
.stext em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:.63rem;letter-spacing:.08em;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-ig{--brand:#E1306C}
.s-x{--brand:#EAF4FA}
.s-yelp{--brand:#FF1A1A}
.s-reddit{--brand:#FF4500}
.s-google{--brand:#F4B400}
.foot-social{padding:3rem 0;border-top:1px solid var(--hair)}
.foot-social .wrap{max-width:48rem}
.foot-social h2{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pb);margin:0 0 .35rem;font-weight:500}
.foot-social p{font-size:.95rem;color:rgba(234,244,250,.72);margin:0}
.foot-social .social-grid{margin-top:1.6rem}

/* ---- article ---- */
article{padding:3rem 0 4rem}
.byline{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.byline strong{color:var(--paper);font-weight:500}
.byline .cred{color:var(--pb)}
.author-box{border:1px solid var(--hair);background:var(--ink-2);padding:1.6rem 1.75rem;margin-top:3rem}
.author-box h3{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pb);margin:0 0 .8rem;font-weight:500}
.author-box p{font-size:.95rem;color:rgba(234,244,250,.82);margin-bottom:0}

article time{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:1.5rem}
article h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem;letter-spacing:-.025em;text-transform:uppercase;margin:2.75rem 0 1rem;line-height:1.1}
article h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.15rem;margin:2rem 0 .75rem}
article p{margin-bottom:1.25rem;color:rgba(234,244,250,.86)}
article ul,article ol{margin:0 0 1.25rem 1.35rem;color:rgba(234,244,250,.86)}
article li{margin-bottom:.55rem}
article a{color:var(--pb);text-decoration:none;border-bottom:1px solid rgba(161,235,255,.4)}
article a:hover{border-bottom-color:var(--pb)}
article blockquote{border-left:2px solid var(--pb);padding-left:1.4rem;margin:1.75rem 0;color:rgba(234,244,250,.78);font-style:italic}
article strong{color:var(--paper)}
.post-nav{border-top:1px solid var(--hair);padding-top:2rem;margin-top:3rem}
.post-nav a{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pb);text-decoration:none}

footer{border-top:1px solid var(--hair);padding:2.6rem 0;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.11em;line-height:2;color:rgba(111,138,155,.9);text-transform:uppercase}
footer .wrap{max-width:64rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}