:root{
  --bg:#0b0c0f;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --line: rgba(255,255,255,0.12);
  --accent:#6F4BFF;
  --accent2:#BC0404;
  --max:1120px;
  --r:22px;
  --h:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --b:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --m:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:var(--b);
  color:var(--text);
  background:
    radial-gradient(1000px 560px at 18% 12%, rgba(111,75,255,0.28), transparent 60%),
    radial-gradient(920px 520px at 82% 22%, rgba(111,75,255,0.16), transparent 62%),
    radial-gradient(800px 520px at 82% 70%, rgba(188,4,4,0.10), transparent 62%),
    var(--bg);
}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
header{
  position:sticky; top:0; z-index:50;
  background: rgba(12,13,16,0.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.headRow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:46px; width:auto; display:block}
.brand span{
  font-family:var(--m);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
}
nav ul{list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end}
.navlink{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  color:rgba(255,255,255,0.84);
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-weight:650;
  letter-spacing:0.01em;
}
.navlink:hover{background: rgba(255,255,255,0.08); color:rgba(255,255,255,0.96); border-color: rgba(255,255,255,0.16)}
.hero{
  padding:44px 0 28px;
}
.heroGrid{display:grid; grid-template-columns: 1.25fr 0.75fr; gap:22px; align-items:stretch}
.heroCard{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  position:relative;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
}
.h1{font-family:var(--h); font-size:clamp(34px, 4.2vw, 58px); line-height:1.05; letter-spacing:-0.03em; margin:0 0 10px}
.lead{font-size:18px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0 0 14px; max-width:68ch}
.kicker{font-family:var(--m); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.72)}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.pill{
  display:inline-flex; align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-family:var(--m);
  font-size:12px;
  color:rgba(255,255,255,0.80);
}
.sideCard{
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.sideCard h2{font-family:var(--h); margin:0 0 10px; letter-spacing:-0.02em}
.sideCard p{margin:0 0 16px; color:rgba(255,255,255,0.76); line-height:1.7}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.01em;
}
.btn.primary{background: rgba(123,97,255,0.18); border-color: rgba(123,97,255,0.35)}
.btn.primary:hover{background: rgba(123,97,255,0.26)}
.btn.ghost{background: rgba(255,255,255,0.06)}
.btn.ghost:hover{background: rgba(255,255,255,0.10)}
.section{padding:46px 0}
.section + .section{border-top:1px solid rgba(255,255,255,0.10)}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
.h2{font-family:var(--h); font-size:clamp(22px, 2.4vw, 34px); margin:0; letter-spacing:-0.02em}
.sub{margin:0; color:rgba(255,255,255,0.72); line-height:1.7; max-width:78ch}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px}
.card{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding:18px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}
.bookCard{display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start}
.bookCard img{width:100%; height:auto; display:block; border-radius:16px; border:1px solid rgba(255,255,255,0.14)}
.card h3{font-family:var(--h); margin:0 0 8px; letter-spacing:-0.01em}
.card p{margin:0 0 10px; color:rgba(255,255,255,0.76); line-height:1.7}
.card p:last-child{margin-bottom:0}
.tagline{font-family:var(--m); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.62)}
.storyCard{display:grid; grid-template-columns: 150px 1fr; gap:14px}
.storyCard img{width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,0.14)}
.storyMeta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px}
.smallbtn{padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); text-decoration:none; font-weight:700}
.smallbtn:hover{background: rgba(255,255,255,0.10)}
.footer{
  padding:28px 0;
  background: rgba(8,9,11,0.92);
  border-top:1px solid rgba(255,255,255,0.12);
}
.footRow{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footLinks{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.iconlink{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04)}
.iconlink:hover{background: rgba(255,255,255,0.10)}
svg{display:block}
@media(max-width:980px){
  .heroGrid{grid-template-columns:1fr}
}
@media(max-width:740px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .storyCard{grid-template-columns:1fr}
  .brand img{height:42px}
}

.heroCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(111,75,255,0.42), transparent 62%),
    linear-gradient(180deg, rgba(8,9,11,0.30), rgba(8,9,11,0.88)),
    url("../img/infosec-diaries-base_edited_edited.jpg") center/cover no-repeat;
  filter: blur(10px) saturate(1.05);
  transform: scale(1.08);
  opacity:0.55;
}
.heroCard > *{position:relative}

.sectionHead .sub{max-width: 100% !important;}

/* --- V4 typography + press spacing --- */
.card h3{margin:0 0 10px}
.card p{margin:0 0 14px}
.smallbtn{margin-top:6px}
.pressCard p{margin-bottom:18px}
.pressCard .smallbtn{margin-top:10px}
.sectionHead{margin-bottom:22px}
.grid2{gap:18px}
.grid3{gap:18px}

/* --- Press card alignment --- */
.pressCard{display:flex; flex-direction:column; min-height:180px}
.pressCard p{flex:1}
.pressCard .smallbtn{align-self:flex-start; margin-top:14px}

/* --- V7: book card formatting fix --- */
.bookCard{
  grid-template-columns: 190px 1fr !important;
  align-items:start !important;
}
.bookCard h3{
  font-size:18px;
  line-height:1.25;
  margin-bottom:10px;
}
.bookCard p{
  max-width: 80ch;
}
@media(max-width:740px){
  }

/* --- V8: prevent half-width squeeze on single cards --- */
.card.bookCard{min-width:0}

/* --- V10 hard override to prevent narrow text columns --- */
.bookCard{grid-template-columns: 190px minmax(0,1fr) !important;}
.bookCard > div{min-width:0}
.bookCard p{white-space:normal; word-break:normal}

.bookCard{grid-template-columns: 200px minmax(0,1fr) !important;}

/* --- V12: stacked 'Other Works' layout to avoid column collapse --- */
.stack{display:flex;flex-direction:column;gap:18px}
.bookWide{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.bookWide .bookImg img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid rgba(255,255,255,0.14)}
.bookWide .bookBody h3{margin:0 0 10px;font-family:var(--h);letter-spacing:-0.01em}
.bookWide .bookBody p{margin:0 0 12px;color:rgba(255,255,255,0.76);line-height:1.75;max-width:92ch}
.bookWide .bookBody p:last-of-type{margin-bottom:14px}
@media(max-width:740px){.bookWide{grid-template-columns:1fr}}