/* ============================================================
   Design system — extracted from the rtv.two06.co.uk aesthetic
   ============================================================ */
:root{
  --bg:#0a0b0d; --bg-outer:#060708; --panel:#050607;
  --text:#e8e9e4; --accent:#5df2a6; --on-accent:#05130c;
  --muted:#8b9088; --line:#2a2e33; --line-strong:#e8e9e4;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg-outer);}
body{
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'Space Grotesk',sans-serif; position:relative; overflow-x:hidden;
  line-height:1.6;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:var(--on-accent);}

.display{font-family:'Archivo',sans-serif; font-stretch:125%;
  font-variation-settings:"wdth" 125; text-transform:uppercase;}
.mono{font-family:'Space Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:clamp(24px,5vw,72px); padding-right:clamp(24px,5vw,72px);}
.accent{color:var(--accent);}

@keyframes gridmove{from{background-position:0 0;} to{background-position:0 60px;}}
@keyframes blink{0%,48%{opacity:1;} 49%,100%{opacity:.15;}}

.grid-bg{position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:linear-gradient(var(--accent) 1px,transparent 1px),
                   linear-gradient(90deg,var(--accent) 1px,transparent 1px);
  background-size:60px 60px; animation:gridmove 4s linear infinite;}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
  background:rgba(10,11,13,.72); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px;}
.nav .brand{font-family:'Space Mono',monospace; letter-spacing:.2em; font-weight:700;}
.nav .brand .accent{margin-left:2px;}
.nav .links{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap;
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.15em; color:var(--muted);}
.nav .links a:hover{color:var(--accent);}

/* ---------- hero ---------- */
header.hero{position:relative; z-index:1; border-bottom:1.5px solid var(--line-strong);
  padding:48px 0 0;}
.topline{display:flex; align-items:center; gap:20px;}
.kicker{font-size:clamp(12px,1.4vw,16px); letter-spacing:.4em; text-transform:uppercase;}
.rule{flex:1; height:3px; background:var(--line-strong); position:relative;}
.rule::after{content:""; position:absolute; right:-2px; top:-5px; width:0; height:0;
  border-left:14px solid var(--line-strong);
  border-top:7px solid transparent; border-bottom:7px solid transparent;}
.status{font-size:13px; letter-spacing:.2em; color:var(--accent); display:flex; align-items:center; gap:9px;}
.dot{width:10px; height:10px; background:var(--accent);
  box-shadow:0 0 10px var(--accent); animation:blink 1.6s steps(1) infinite;}
.titles{margin:18px 0 8px;}
.title{font-weight:900; font-size:clamp(38px,7.5vw,96px); line-height:.86; letter-spacing:-.01em;}
.title.row2{line-height:.92; display:flex; align-items:baseline; gap:26px; flex-wrap:wrap;}
.subrole{font-family:'Space Grotesk',sans-serif; font-weight:400; font-stretch:100%;
  font-variation-settings:normal; font-size:clamp(14px,1.8vw,26px);
  letter-spacing:.05em; text-transform:none; color:var(--muted);}
.tunnel{position:relative; margin-top:18px; border:1px solid var(--line-strong);
  border-bottom:none; background:var(--panel); overflow:hidden; height:clamp(160px,26vw,300px);}
.tunnel svg{position:absolute; inset:0; display:block; width:100%; height:100%;}
.metabar{display:flex; align-items:stretch; border-top:1.5px solid var(--line-strong); flex-wrap:wrap;}
.metabar .cell{padding:15px 22px; font-size:clamp(11px,1.3vw,14px); letter-spacing:.2em; display:flex; align-items:center;}
.metabar .left{flex:1; min-width:220px; border-right:1px solid var(--line); color:var(--muted);}
.metabar .right{color:var(--accent);}

/* ---------- generic section ---------- */
section{position:relative; z-index:1; padding:clamp(48px,7vw,96px) 0;}
.sechead{display:flex; align-items:center; gap:18px; margin-bottom:40px;}
.sechead .tag{font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.3em; color:var(--accent); white-space:nowrap;}
.sechead .bar{flex:1; height:2px; background:var(--line);}
.sechead .count{font-family:'Space Mono',monospace; font-size:14px; letter-spacing:.2em; color:var(--muted); white-space:nowrap;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:28px; max-width:820px;}
.about-grid p{font-size:clamp(16px,1.7vw,20px); color:#cfd2cb;}
.about-grid p + p{margin-top:4px;}

/* ---------- resume ---------- */
.job{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:clamp(16px,3vw,40px);
  border:1.5px solid var(--line); padding:clamp(20px,3vw,32px) clamp(22px,3.5vw,40px); margin-bottom:18px;
  background:transparent; transition:background .25s,color .25s,border-color .25s,transform .25s;}
.job:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:translateX(6px);}
.job .yr{font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(13px,1.5vw,16px); white-space:nowrap;}
.job .role{font-family:'Archivo',sans-serif; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-weight:800; text-transform:uppercase; font-size:clamp(18px,2.4vw,28px); line-height:1;}
.job .org{font-family:'Space Mono',monospace; font-size:clamp(12px,1.4vw,15px); opacity:.65; margin-top:8px; display:block;}
.job .desc{font-size:15px; margin-top:10px; opacity:.85;}
.job .bullets{list-style:none; margin:14px 0 0; padding:0;}
.job .bullets li{position:relative; padding-left:22px; font-size:14.5px; line-height:1.55;
  opacity:.9; margin:8px 0;}
.job .bullets li::before{content:"▹"; position:absolute; left:0; top:0; color:var(--accent);}
.job:hover .bullets li::before{color:var(--on-accent);}
.job .loc{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.1em; opacity:.6; white-space:nowrap;}

.skills{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.chip{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.08em; color:var(--accent);
  border:1px solid var(--line); padding:8px 14px; transition:background .2s,color .2s,border-color .2s;}
.chip:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}

.cta{display:inline-flex; align-items:center; gap:14px; margin-top:40px;
  font-family:'Space Mono',monospace; font-weight:700; letter-spacing:.15em;
  border:1.5px solid var(--accent); color:var(--accent); padding:16px 26px;
  transition:background .25s,color .25s,transform .25s;}
.cta:hover{background:var(--accent); color:var(--on-accent); transform:translateX(6px);}

/* ---------- blog ---------- */
.post{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(20px,4vw,48px);
  border:1.5px solid var(--line); padding:clamp(22px,3.5vw,36px) clamp(24px,4vw,44px); margin-bottom:20px;
  color:var(--text); background:transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s;}
.post:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:translateX(6px);}
.post .num{font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(18px,2.6vw,30px);}
.post .ttl{display:block; font-family:'Archivo',sans-serif; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-weight:800; text-transform:uppercase; font-size:clamp(20px,3vw,36px); line-height:.98;}
.post .meta{display:block; font-family:'Space Mono',monospace; font-size:clamp(12px,1.5vw,15px); letter-spacing:.06em; opacity:.6; margin-top:10px;}
.post .arrow{font-family:'Space Mono',monospace; font-size:clamp(22px,3.5vw,38px); font-weight:700;}

/* ---------- footer / contact ---------- */
footer{position:relative; z-index:1; border-top:1.5px solid var(--line-strong); padding:clamp(40px,6vw,72px) 0;}
.contact{display:flex; flex-wrap:wrap; gap:14px 40px; font-family:'Space Mono',monospace; letter-spacing:.12em;}
.contact a{color:var(--muted);} .contact a:hover{color:var(--accent);}
.copy{margin-top:28px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em; color:var(--muted);}

/* ---------- article page ---------- */
.article{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:clamp(40px,6vw,80px) clamp(24px,5vw,40px);}
.article .back{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.15em; color:var(--muted);}
.article .back:hover{color:var(--accent);}
.article h1{font-family:'Archivo',sans-serif; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-weight:900; text-transform:uppercase; font-size:clamp(30px,5vw,56px); line-height:.95; margin:22px 0 14px;}
.article .postmeta{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.12em; color:var(--accent); margin-bottom:36px;}
.article h2{font-family:'Archivo',sans-serif; font-stretch:112%; font-variation-settings:"wdth" 112;
  font-weight:800; text-transform:uppercase; font-size:clamp(20px,3vw,30px); margin:44px 0 14px;}
.article p{font-size:clamp(16px,1.7vw,18px); color:#cfd2cb; margin:16px 0;}
.article a.inline{color:var(--accent); border-bottom:1px solid var(--line);}
.article ul,.article ol{margin:16px 0 16px 24px; color:#cfd2cb;}
.article li{margin:8px 0;}
.article pre{background:var(--panel); border:1px solid var(--line); padding:18px 20px; overflow-x:auto;
  font-family:'Space Mono',monospace; font-size:14px; color:#d6f7e6; margin:20px 0;}
.article code{font-family:'Space Mono',monospace; font-size:.9em; color:var(--accent);}
.article blockquote{border-left:3px solid var(--accent); padding:6px 0 6px 20px; margin:22px 0; color:var(--muted);}

/* ---------- credentials (education / certs / recognition) ---------- */
.subhead{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.25em;
  color:var(--accent); text-transform:uppercase; margin:8px 0 14px;}
.subhead:not(:first-child){margin-top:44px;}
.record{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  border-bottom:1px solid var(--line); padding:15px 0; font-family:'Space Mono',monospace;}
.record .r-main{font-size:clamp(14px,1.6vw,16px); letter-spacing:.02em;}
.record .r-sub{color:var(--muted); font-size:13px;}
.record .r-date{margin-left:auto; color:var(--accent); font-size:13px; letter-spacing:.12em; white-space:nowrap;}
.record a{color:var(--accent);}
.record a:hover{text-decoration:underline;}