/* TechSec Info — technical publication theme
   Palette:  ink #14202E · paper #FCFBF8 · hairline #E4E1D9
             signal #E2483D · muted #5C6470 · meta #8A8F98
   Type:     Space Grotesk (display) · Source Serif 4 (body) · JetBrains Mono (meta) */

:root{
  --ink:#14202E; --paper:#FCFBF8; --line:#E4E1D9;
  --signal:#E2483D; --muted:#5C6470; --meta:#8A8F98;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:18px; line-height:1.6;
}
a{color:var(--ink); text-decoration:none}
.post-body a,.dek a{text-decoration:underline; text-decoration-color:var(--signal); text-underline-offset:3px}
a:hover{color:var(--signal)}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)} .small{font-size:13px} .kicker,.byline{font-family:"JetBrains Mono",monospace}

/* ---- Header ---- */
.site-head{border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:20}
.head-inner{display:flex; align-items:center; gap:28px; padding:16px 24px}
.brand{display:flex; align-items:center; gap:9px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:21px}
.brand-mark{color:var(--signal); font-size:14px}
.nav{display:flex; gap:20px; flex:1; font-family:"JetBrains Mono",monospace; font-size:13px; text-transform:lowercase}
.nav a{color:var(--muted)} .nav a:hover{color:var(--ink)}
.search input{border:1px solid var(--line); background:#fff; padding:7px 12px; font:inherit; font-size:14px; border-radius:2px; width:140px}
.search input:focus{outline:2px solid var(--signal); outline-offset:0; border-color:transparent}
.ticker{border-top:1px solid var(--line); background:var(--ink); color:var(--paper); overflow:hidden}
.ticker span{display:block; max-width:var(--maxw); margin:0 auto; padding:7px 24px; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.04em}

/* ---- Layout ---- */
.main{padding:40px 24px 64px}
.kicker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--meta); margin:0 0 10px}
.kicker a{color:var(--signal)}
.byline{font-size:13px; color:var(--muted)}

/* ---- Lead story ---- */
.lead{display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:center;
  padding-bottom:40px; margin-bottom:40px; border-bottom:2px solid var(--ink)}
.lead-img img{aspect-ratio:16/10; object-fit:cover; border-radius:3px}
.lead h1{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:40px; line-height:1.05;
  letter-spacing:-.02em; margin:0 0 14px}
.standfirst{font-size:20px; color:var(--muted); margin:0 0 16px; line-height:1.5}

/* ---- Grid ---- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px}
.card-img img{aspect-ratio:16/10; object-fit:cover; border-radius:3px; margin-bottom:14px}
.card h2{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:21px; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 8px}
.card .dek{font-size:15.5px; color:var(--muted); margin:0 0 10px; line-height:1.5}

/* ---- Pager ---- */
.pager{display:flex; align-items:center; justify-content:center; gap:24px; margin-top:56px;
  font-family:"JetBrains Mono",monospace; font-size:14px}
.pager a{border-bottom:2px solid var(--signal); padding-bottom:2px}

/* ---- Single post ---- */
.post{max-width:720px; margin:0 auto}
.post-title{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:42px; line-height:1.06;
  letter-spacing:-.02em; margin:6px 0 16px}
.post .standfirst{font-size:21px}
.post-hero{margin:28px 0}
.post-hero img{border-radius:3px}
.post-hero figcaption{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--meta); margin-top:8px}
.post-body{font-size:19px; line-height:1.72}
.post-body h2{font-family:"Space Grotesk",sans-serif; font-size:27px; letter-spacing:-.01em; margin:38px 0 12px}
.post-body h3{font-family:"Space Grotesk",sans-serif; font-size:21px; margin:28px 0 10px}
.post-body p{margin:0 0 20px}
.post-body ul,.post-body ol{margin:0 0 20px; padding-left:24px}
.post-body li{margin:0 0 8px}
.post-body blockquote{margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid var(--signal);
  font-style:italic; color:var(--ink)}
.post-body pre{background:var(--ink); color:#E8E6DF; padding:18px; border-radius:4px; overflow:auto;
  font-family:"JetBrains Mono",monospace; font-size:14px; line-height:1.5}
.post-body code{font-family:"JetBrains Mono",monospace; font-size:.85em}
.source-note{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--muted); margin-top:28px}
.author-box{margin-top:44px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:4px}
.author-name{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:18px; margin:0 0 6px}
.static .post-body{font-size:18px}

/* ---- Lists / headers ---- */
.list-head,.empty{margin-bottom:34px; padding-bottom:22px; border-bottom:2px solid var(--ink)}
.list-head h1,.empty h1{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; margin:0; letter-spacing:-.02em}
.empty{text-align:left}

/* ---- Ads ---- */
.ad-slot{margin:32px 0; padding:6px; min-height:90px; text-align:center;
  background:repeating-linear-gradient(45deg,#fff,#fff 10px,#faf8f3 10px,#faf8f3 20px);
  border:1px solid var(--line); border-radius:3px}

/* ---- Footer ---- */
.site-foot{border-top:2px solid var(--ink); margin-top:40px; background:#fff}
.foot-inner{display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:32px 24px; justify-content:space-between}
.foot-nav{display:flex; gap:22px; font-family:"JetBrains Mono",monospace; font-size:13px}
.foot-nav a{color:var(--muted)} .foot-nav a:hover{color:var(--signal)}
.foot-inner .brand-name{font-family:"Space Grotesk",sans-serif; font-weight:700; margin:0 0 4px}

/* ---- Responsive ---- */
@media(max-width:860px){
  .lead{grid-template-columns:1fr; gap:20px}
  .lead h1{font-size:32px}
  .grid{grid-template-columns:repeat(2,1fr); gap:30px 24px}
  .nav{display:none}
}
@media(max-width:560px){
  body{font-size:17px}
  .grid{grid-template-columns:1fr}
  .post-title{font-size:32px} .lead h1{font-size:28px}
  .head-inner{gap:14px} .search input{width:110px}
  .post-body{font-size:18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px}